You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ha...@apache.org on 2026/02/26 13:16:44 UTC

(royale-asjs) branch develop updated: Added elements, some components

This is an automated email from the ASF dual-hosted git repository.

harbs pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 990acce621 Added elements, some components
990acce621 is described below

commit 990acce6217bdd35b6ac93aab1bc644919e64765
Author: Harbs <ha...@in-tools.com>
AuthorDate: Thu Feb 26 15:16:37 2026 +0200

    Added elements, some components
---
 frameworks/projects/Style/README.md                |    6 +-
 .../Style/src/main/resources/basic-manifest.xml    |   58 +-
 .../projects/Style/src/main/resources/defaults.css |   56 +
 .../org/apache/royale/style/DataContainer.as       |  133 +++
 .../org/apache/royale/style/DataContainerBase.as   |   83 ++
 .../style/{stylebeads/BorderStyle.as => Group.as}  |   26 +-
 .../royale/org/apache/royale/style/GroupBase.as    |  284 +++++
 .../main/royale/org/apache/royale/style/List.as    |  156 +++
 .../org/apache/royale/style/MultiSelectionList.as  |  153 +++
 .../royale/org/apache/royale/style/StyleUIBase.as  |   32 +-
 .../main/royale/org/apache/royale/style/Tree.as    |   65 ++
 .../royale/org/apache/royale/style/elements/A.as   |  122 +++
 .../org/apache/royale/style/elements/Audio.as      |   35 +
 .../{stylebeads/BorderStyle.as => elements/B.as}   |   37 +-
 .../{stylebeads/BorderStyle.as => elements/Br.as}  |   34 +-
 .../org/apache/royale/style/elements/Button.as     |  187 ++++
 .../BorderStyle.as => elements/Caption.as}         |   37 +-
 .../BorderStyle.as => elements/Code.as}            |   36 +-
 .../{stylebeads/BorderStyle.as => elements/Col.as} |   59 +-
 .../org/apache/royale/style/elements/Colgroup.as   |   85 ++
 .../{stylebeads/BorderStyle.as => elements/Div.as} |   37 +-
 .../{stylebeads/BorderStyle.as => elements/Em.as}  |   37 +-
 .../BorderStyle.as => elements/Footer.as}          |   37 +-
 .../org/apache/royale/style/elements/Form.as       |  155 +++
 .../{stylebeads/BorderStyle.as => elements/H1.as}  |   37 +-
 .../{stylebeads/BorderStyle.as => elements/H2.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/H3.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/H4.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/H5.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/H6.as}  |   38 +-
 .../BorderStyle.as => elements/Header.as}          |   39 +-
 .../{stylebeads/BorderStyle.as => elements/Hr.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/I.as}   |   38 +-
 .../org/apache/royale/style/elements/Iframe.as     |  282 +++++
 .../royale/org/apache/royale/style/elements/Img.as |  113 ++
 .../org/apache/royale/style/elements/Input.as      |  221 ++++
 .../BorderStyle.as => elements/Label.as}           |   45 +-
 .../{stylebeads/BorderStyle.as => elements/Li.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/Ol.as}  |   38 +-
 .../BorderStyle.as => elements/Option.as}          |   38 +-
 .../{stylebeads/BorderStyle.as => elements/P.as}   |   38 +-
 .../{stylebeads/BorderStyle.as => elements/Pre.as} |   38 +-
 .../org/apache/royale/style/elements/Progress.as   |  171 +++
 .../{stylebeads/BorderStyle.as => elements/S.as}   |   38 +-
 .../BorderStyle.as => elements/Section.as}         |   39 +-
 .../apache/royale/style/elements/SecurityIframe.as |  212 ++++
 .../BorderStyle.as => elements/Select.as}          |   38 +-
 .../BorderStyle.as => elements/Small.as}           |   38 +-
 .../BorderStyle.as => elements/Span.as}            |   38 +-
 .../BorderStyle.as => elements/Strong.as}          |   38 +-
 .../BorderStyle.as => elements/Table.as}           |   38 +-
 .../BorderStyle.as => elements/Tbody.as}           |   38 +-
 .../{stylebeads/BorderStyle.as => elements/Td.as}  |   38 +-
 .../org/apache/royale/style/elements/Textarea.as   |  224 ++++
 .../BorderStyle.as => elements/Tfoot.as}           |   38 +-
 .../{stylebeads/BorderStyle.as => elements/Th.as}  |   38 +-
 .../BorderStyle.as => elements/Thead.as}           |   38 +-
 .../{stylebeads/BorderStyle.as => elements/Tr.as}  |   38 +-
 .../{stylebeads/BorderStyle.as => elements/U.as}   |   38 +-
 .../{stylebeads/BorderStyle.as => elements/Ul.as}  |   38 +-
 .../BorderStyle.as => elements/Video.as}           |   43 +-
 .../royale/style/stylebeads/layout/Position.as     |    1 +
 .../royale/style/support/MediaElementBase.as       | 1125 ++++++++++++++++++++
 .../apache/royale/style/support/NodeElementBase.as |  301 ++++++
 .../org/apache/royale/style/support/TextNode.as    |   82 ++
 .../royale/style/support/TextNodeContainerBase.as  |  100 ++
 66 files changed, 5330 insertions(+), 643 deletions(-)

diff --git a/frameworks/projects/Style/README.md b/frameworks/projects/Style/README.md
index ab42099664..aa6347d1eb 100644
--- a/frameworks/projects/Style/README.md
+++ b/frameworks/projects/Style/README.md
@@ -184,4 +184,8 @@ This project is under active development. APIs and naming may evolve as style be
 - (min/max-)inline-size
 - (min/max-)block-size
 - Add support for normal rgb for browsers which don't support oklch (i.e. CEP) Maybe?
-- border "between" https://tailwindcss.com/docs/border-width
\ No newline at end of file
+- border "between" https://tailwindcss.com/docs/border-width
+
+
+### Internal notes
+- It does not look like we need ContainerBase
diff --git a/frameworks/projects/Style/src/main/resources/basic-manifest.xml b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
index 8d1c6f1085..7238933c1a 100644
--- a/frameworks/projects/Style/src/main/resources/basic-manifest.xml
+++ b/frameworks/projects/Style/src/main/resources/basic-manifest.xml
@@ -20,6 +20,12 @@
 
 
 <componentPackage>
+  <component id="Group" class="org.apache.royale.style.Group"/>
+  <component id="DataContainer" class="org.apache.royale.style.DataContainer"/>
+  <component id="List" class="org.apache.royale.style.List"/>
+  <component id="MultiSelectionList" class="org.apache.royale.style.MultiSelectionList"/>
+  <component id="Tree" class="org.apache.royale.style.Tree"/>
+
   <component id="BackgroundStyle" class="org.apache.royale.style.stylebeads.BackgroundStyle"/>
   <component id="ContainerPosition" class="org.apache.royale.style.stylebeads.ContainerPosition"/>
   <component id="FlexContainerStyle" class="org.apache.royale.style.stylebeads.FlexContainerStyle"/>
@@ -113,7 +119,6 @@
   <component id="Stroke" class="org.apache.royale.style.stylebeads.svg.Stroke"/>
   <component id="StrokeWidth" class="org.apache.royale.style.stylebeads.svg.StrokeWidth"/>
   <component id="ForcedColorAdjust" class="org.apache.royale.style.stylebeads.access.ForcedColorAdjust"/>
-  <component id="BorderStyle" class="org.apache.royale.style.stylebeads.BorderStyle"/>
   <component id="CompositeStyle" class="org.apache.royale.style.stylebeads.CompositeStyle"/>
   <component id="MixBlendMode" class="org.apache.royale.style.stylebeads.effects.MixBlendMode"/>
   <component id="RingEffect" class="org.apache.royale.style.stylebeads.effects.RingEffect"/>
@@ -207,4 +212,55 @@
   <component id="TransformStyle" class="org.apache.royale.style.stylebeads.transform.TransformStyle"/>
   <component id="Translate" class="org.apache.royale.style.stylebeads.transform.Translate"/>
 
+  <component id="A" class="org.apache.royale.style.elements.A"/>
+  <component id="Audio" class="org.apache.royale.style.elements.Audio"/>
+  <component id="B" class="org.apache.royale.style.elements.B"/>
+  <component id="Br" class="org.apache.royale.style.elements.Br"/>
+  <component id="Button" class="org.apache.royale.style.elements.Button"/>
+  <component id="Caption" class="org.apache.royale.style.elements.Caption"/>
+  <component id="Code" class="org.apache.royale.style.elements.Code"/>
+  <component id="Col" class="org.apache.royale.style.elements.Col"/>
+  <component id="Colgroup" class="org.apache.royale.style.elements.Colgroup"/>
+  <component id="Div" class="org.apache.royale.style.elements.Div"/>
+  <component id="Em" class="org.apache.royale.style.elements.Em"/>
+  <component id="Footer" class="org.apache.royale.style.elements.Footer"/>
+  <component id="Form" class="org.apache.royale.style.elements.Form"/>
+  <component id="H1" class="org.apache.royale.style.elements.H1"/>
+  <component id="H2" class="org.apache.royale.style.elements.H2"/>
+  <component id="H3" class="org.apache.royale.style.elements.H3"/>
+  <component id="H4" class="org.apache.royale.style.elements.H4"/>
+  <component id="H5" class="org.apache.royale.style.elements.H5"/>
+  <component id="H6" class="org.apache.royale.style.elements.H6"/>
+  <component id="Header" class="org.apache.royale.style.elements.Header"/>
+  <component id="Hr" class="org.apache.royale.style.elements.Hr"/>
+  <component id="I" class="org.apache.royale.style.elements.I"/>
+  <component id="Iframe" class="org.apache.royale.style.elements.Iframe"/>
+  <component id="Img" class="org.apache.royale.style.elements.Img"/>
+  <component id="Input" class="org.apache.royale.style.elements.Input"/>
+  <component id="Label" class="org.apache.royale.style.elements.Label"/>
+  <component id="Li" class="org.apache.royale.style.elements.Li"/>
+  <component id="Ol" class="org.apache.royale.style.elements.Ol"/>
+  <component id="Option" class="org.apache.royale.style.elements.Option"/>
+  <component id="P" class="org.apache.royale.style.elements.P"/>
+  <component id="Pre" class="org.apache.royale.style.elements.Pre"/>
+  <component id="Progress" class="org.apache.royale.style.elements.Progress"/>
+  <component id="S" class="org.apache.royale.style.elements.S"/>
+  <component id="Section" class="org.apache.royale.style.elements.Section"/>
+  <component id="SecurityIframe" class="org.apache.royale.style.elements.SecurityIframe"/>
+  <component id="Select" class="org.apache.royale.style.elements.Select"/>
+  <component id="Small" class="org.apache.royale.style.elements.Small"/>
+  <component id="Span" class="org.apache.royale.style.elements.Span"/>
+  <component id="Strong" class="org.apache.royale.style.elements.Strong"/>
+  <component id="Table" class="org.apache.royale.style.elements.Table"/>
+  <component id="Tbody" class="org.apache.royale.style.elements.Tbody"/>
+  <component id="Td" class="org.apache.royale.style.elements.Td"/>
+  <component id="Textarea" class="org.apache.royale.style.elements.Textarea"/>
+  <component id="Tfoot" class="org.apache.royale.style.elements.Tfoot"/>
+  <component id="Th" class="org.apache.royale.style.elements.Th"/>
+  <component id="Thead" class="org.apache.royale.style.elements.Thead"/>
+  <component id="Tr" class="org.apache.royale.style.elements.Tr"/>
+  <component id="U" class="org.apache.royale.style.elements.U"/>
+  <component id="Ul" class="org.apache.royale.style.elements.Ul"/>
+  <component id="Video" class="org.apache.royale.style.elements.Video"/>
+
 </componentPackage>
diff --git a/frameworks/projects/Style/src/main/resources/defaults.css b/frameworks/projects/Style/src/main/resources/defaults.css
index 3002422fd4..1d7b74bb2a 100644
--- a/frameworks/projects/Style/src/main/resources/defaults.css
+++ b/frameworks/projects/Style/src/main/resources/defaults.css
@@ -19,3 +19,59 @@
  */
 
 @namespace "library://ns.apache.org/royale/style";
+
+DataContainer
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.DataProviderModel");
+	IBeadView:  ClassReference("org.apache.royale.html.beads.DataContainerView");			
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
+	IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData");
+	IItemRendererClassFactory: ClassReference("org.apache.royale.core.ItemRendererClassFactory");
+	IItemRendererInitializer: ClassReference("org.apache.royale.html.beads.ListItemRendererInitializer");
+	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer");
+	IViewport: ClassReference("org.apache.royale.html.supportClasses.Viewport");
+	IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+MultiSelectionList
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArrayMultiSelectionModel");
+	IBeadView:  ClassReference("org.apache.royale.html.beads.MultiSelectionListView");			
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListMultiSelectionMouseController");
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
+	IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData");
+	IItemRendererClassFactory: ClassReference("org.apache.royale.html.beads.MultiSelectionItemRendererClassFactory");
+	IItemRendererInitializer: ClassReference("org.apache.royale.html.beads.ListItemRendererInitializer");
+	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer");
+	ISelectableItemRenderer: ClassReference("org.apache.royale.html.beads.SolidBackgroundSelectableItemRendererBead");
+	IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+List
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.ArraySelectionModel");
+	IBeadView:  ClassReference("org.apache.royale.html.beads.ListView");			
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.ListSingleSelectionMouseController");
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
+	IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForArrayData");
+	IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+	IItemRendererInitializer: ClassReference("org.apache.royale.html.beads.ListItemRendererInitializer");
+	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.StringItemRenderer");
+	ISelectableItemRenderer: ClassReference("org.apache.royale.html.beads.SolidBackgroundSelectableItemRendererBead");
+	IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+Tree
+{
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.TreeModel");
+	IBeadView:  ClassReference("org.apache.royale.html.beads.ListView");			
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.TreeSingleSelectionMouseController");
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.VerticalLayout");
+	IDataProviderItemRendererMapper: ClassReference("org.apache.royale.html.beads.DataItemRendererFactoryForHierarchicalData");
+	IItemRendererClassFactory: ClassReference("org.apache.royale.core.SelectableItemRendererClassFactory");
+	IItemRendererInitializer: ClassReference("org.apache.royale.html.beads.TreeItemRendererInitializer");
+	IItemRenderer: ClassReference("org.apache.royale.html.supportClasses.TreeItemRenderer");
+	ISelectableItemRenderer: ClassReference("org.apache.royale.html.beads.SolidBackgroundSelectableItemRendererBead");
+	IViewport: ClassReference("org.apache.royale.html.supportClasses.ScrollingViewport");
+	IViewportModel: ClassReference("org.apache.royale.html.beads.models.ViewportModel");
+}
+
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/DataContainer.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/DataContainer.as
new file mode 100644
index 0000000000..cebc82225d
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/DataContainer.as
@@ -0,0 +1,133 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IDataProviderModel;
+	import org.apache.royale.core.IStrandWithPresentationModel;
+	import org.apache.royale.utils.loadBeadFromValuesManager;
+	import org.apache.royale.core.IHasLabelField;
+	import org.apache.royale.core.IListWithPresentationModel;
+	import org.apache.royale.html.beads.models.ListPresentationModel;
+	import org.apache.royale.html.util.getModelByType;
+	import org.apache.royale.html.IListPresentationModel;
+
+	/**
+	 *  The DataContainer class is a component that displays multiple data items. The DataContainer uses
+	 *  the following bead types:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the dataProvider.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the list.
+	 *  org.apache.royale.core.IBeadController: the bead that handles input and output.
+	 *  org.apache.royale.core.IBeadLayout: the bead responsible for the size and position of the itemRenderers.
+	 *  org.apache.royale.core.IDataProviderItemRendererMapper: the bead responsible for creating the itemRenders.
+	 *  org.apache.royale.core.IItemRenderer: the class or factory used to display an item in the list.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class DataContainer extends DataContainerBase implements IStrandWithPresentationModel, IListWithPresentationModel, IHasLabelField
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function DataContainer()
+		{
+			super();
+			// typeNames = "DataContainer";
+		}
+
+		/**
+		 *  The name of field within the data used for display. Each item of the
+		 *  data should have a property with this name.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+		 */
+		public function get labelField():String
+		{
+			return (model as IDataProviderModel).labelField;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+		 */
+		public function set labelField(value:String):void
+		{
+			(model as IDataProviderModel).labelField = value;
+		}
+
+		/**
+		 *  The data being display by the List.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+		 */
+		public function get dataProvider():Object
+		{
+			return (model as IDataProviderModel).dataProvider;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IDataProviderModel
+		 */
+		public function set dataProvider(value:Object):void
+		{
+			(model as IDataProviderModel).dataProvider = value;
+		}
+
+		/**
+		 *  The presentation model for the list.
+		 * TODO: Decide if we need this at all in Style
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 *  @royaleignorecoercion org.apache.royale.html.IListPresentationModel
+		 */
+		public function get presentationModel():IBead
+		{
+			var presModel:IListPresentationModel = getModelByType(this, IListPresentationModel) as IListPresentationModel;
+			if (presModel == null)
+			{
+				presModel = loadBeadFromValuesManager(IListPresentationModel, "iListPresentationModel", this) as IListPresentationModel;
+				if (presModel == null)
+				{
+					presModel = new ListPresentationModel();
+					addBead(presModel);
+				}
+			}
+			return presModel;
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/DataContainerBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/DataContainerBase.as
new file mode 100644
index 0000000000..f790ca345d
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/DataContainerBase.as
@@ -0,0 +1,83 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+	import org.apache.royale.core.IFactory;
+	import org.apache.royale.core.IItemRendererProvider;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.utils.sendEvent;
+
+	/**
+	 *  The DataContainerBase class is the base class for components that
+	 *  that have generated content, like lists.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class DataContainerBase extends GroupBase implements IItemRendererProvider
+	{
+		/**
+		 *  Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function DataContainerBase()
+		{
+			super();
+		}
+
+		private var _initialized:Boolean;
+
+		/**
+		 * @private
+		 */
+		override public function addedToParent():void
+		{
+			if (!_initialized)
+			{
+				ValuesManager.valuesImpl.init(this);
+				_initialized = true;
+			}
+			super.addedToParent();
+			sendEvent(this, "initComplete");
+		}
+
+		/*
+		* IItemRendererProvider
+		*/
+
+		private var _itemRenderer:IFactory = null;
+
+		/**
+		 *  The class or factory used to display each item.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get itemRenderer():IFactory
+		{
+			return _itemRenderer;
+		}
+		public function set itemRenderer(value:IFactory):void
+		{
+			_itemRenderer = value;
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Group.as
similarity index 74%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/Group.as
index caeeae30f0..7df4ae8b7c 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Group.as
@@ -16,28 +16,22 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style
 {
-	public class BorderStyle extends StyleBeadBase
+	public class Group extends GroupBase
 	{
-		public function BorderStyle()
+		public function Group()
 		{
 			super();
 		}
-
-		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
-		 */
-
-		override public function get selectors():Array
-		{
-			return [];
+		override protected function requiresView():Boolean{
+			return false;
 		}
-
-		override public function get rules():Array
-		{
-			return [];
+		override protected function requiresController():Boolean{
+			return false;
+		}
+		override protected function requiresLayout():Boolean{
+			return false;
 		}
 	}
 }
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/GroupBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/GroupBase.as
new file mode 100644
index 0000000000..9cb5c156f6
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/GroupBase.as
@@ -0,0 +1,284 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+	import org.apache.royale.core.IContentViewHost;
+	import org.apache.royale.core.ILayoutParent;
+	import org.apache.royale.core.ILayoutHost;
+	import org.apache.royale.core.ILayoutView;
+	import org.apache.royale.core.IState;
+	import org.apache.royale.events.ValueChangeEvent;
+	import org.apache.royale.events.ValueEvent;
+	import org.apache.royale.utils.loadBeadFromValuesManager;
+	import org.apache.royale.utils.sendEvent;
+	import org.apache.royale.core.IStatesObject;
+	import org.apache.royale.core.IContainer;
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.IParent;
+	import org.apache.royale.core.IStatesImpl;
+	import org.apache.royale.core.IChild;
+
+	/**
+	 *  Indicates that the state change has completed.  All properties
+	 *  that need to change have been changed, and all transitinos
+	 *  that need to run have completed.  However, any deferred work
+	 *  may not be completed, and the screen may not be updated until
+	 *  code stops executing.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="stateChangeComplete", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  Indicates that the initialization of the container is complete.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="initComplete", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  Indicates that the children of the container is have been added.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="childrenAdded", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  The GroupBase class is the base class for most simple containers
+	 *  in Royale.  It is usable as the root tag of MXML
+	 *  documents and UI controls and containers are added to it.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class GroupBase extends StyleUIBase implements IStatesObject, IContainer, ILayoutParent, ILayoutView, IContentViewHost
+	{
+		/**
+		 *  Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function GroupBase()
+		{
+			super();
+		}
+
+		override public function addedToParent():void
+		{
+			super.addedToParent();
+
+			// Load the layout bead if it hasn't already been loaded.
+			if (requiresLayout())
+				loadBeadFromValuesManager(IBeadLayout, "iBeadLayout", this);
+		}
+
+		/**
+		 * Subclasses can override this method to declare whether they need a layout.
+		 * Components which do not need a layout can avoid searching for layout beads
+		 */
+		protected function requiresLayout():Boolean
+		{
+			return true;
+		}
+
+		/*
+		 * IContainer
+		 */
+
+		/**
+		 *  @private
+		 */
+		public function childrenAdded():void
+		{
+			sendEvent(this, new ValueEvent("childrenAdded"));
+		}
+
+		/*
+		 * Utility
+		 */
+
+		/**
+		 * Dispatches a "layoutNeeded" event
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function layoutNeeded():void
+		{
+			sendEvent(this, "layoutNeeded");
+		}
+
+		/*
+		 * ILayoutParent
+		 */
+
+		/**
+		 * Returns the ILayoutHost which is its view. From ILayoutParent.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.ILayoutHost
+		 */
+		public function getLayoutHost():ILayoutHost
+		{
+			return view as ILayoutHost;
+		}
+
+		/**
+		 * @copy org.apache.royale.core.IContentViewHost#strandChildren
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get strandChildren():IParent
+		{
+			return this;
+		}
+
+		private var _states:Array;
+
+		/**
+		 *  The array of view states. These should
+		 *  be instances of org.apache.royale.states.State.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get states():Array
+		{
+			return _states;
+		}
+
+		/**
+		 *  @private
+		 *  @royaleignorecoercion Class
+		 *  @royaleignorecoercion org.apache.royale.core.IBead
+		 */
+		public function set states(value:Array):void
+		{
+			_states = value;
+			_currentState = _states[0].name;
+
+			try
+			{
+				loadBeadFromValuesManager(IStatesImpl, "iStatesImpl", this);
+			}
+			// TODO:  Need to handle this case more gracefully
+			catch (e:Error)
+			{
+				COMPILE::SWF
+				{
+					trace(e.message);
+				}
+			}
+		}
+
+		/**
+		 *  <code>true</code> if the array of states
+		 *  contains a state with this name.
+		 *
+		 *  @param state The state name.
+		 *  @return True if state in state array
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function hasState(state:String):Boolean
+		{
+			for each (var s:IState in _states)
+			{
+				if (s.name == state)
+					return true;
+			}
+			return false;
+		}
+		private var _currentState:String;
+
+		[Bindable("currentStateChange")]
+
+		/**
+		 *  The name of the current state.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get currentState():String
+		{
+			return _currentState;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set currentState(value:String):void
+		{
+			if (value == _currentState)
+				return;
+			var event:ValueChangeEvent = new ValueChangeEvent("currentStateChange", false, false, _currentState, value);
+			_currentState = value;
+			sendEvent(this, event);
+		}
+
+		/**
+		 * @private
+		 */
+		override public function addElement(c:IChild, dispatchEvent:Boolean = true):void
+		{
+			super.addElement(c, dispatchEvent);
+			if (dispatchEvent)
+				sendEvent(this, new ValueEvent("childrenAdded", c));
+		}
+
+		/**
+		 * @private
+		 */
+		override public function addElementAt(c:IChild, index:int, dispatchEvent:Boolean = true):void
+		{
+			super.addElementAt(c, index, dispatchEvent);
+			if (dispatchEvent)
+				sendEvent(this, new ValueEvent("childrenAdded", c));
+		}
+
+		/**
+		 * @private
+		 */
+		override public function removeElement(c:IChild, dispatchEvent:Boolean = true):void
+		{
+			super.removeElement(c, dispatchEvent);
+			// TODO This should possibly be ultimately refactored to be more PAYG
+			if (dispatchEvent)
+				sendEvent(this, new ValueEvent("childrenRemoved", c));
+		}
+
+		/**
+		 * This exists only to complete the signature for IStatesObject.
+		 * Any transitions will be handled by CSS classes in Style.
+		 */
+		public function get transitions():Array
+		{
+			trace("Warning: Transitions are not currently supported in Style components. Use CSS transitions instead.");
+			return null;
+		}
+
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/List.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/List.as
new file mode 100644
index 0000000000..26457a1435
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/List.as
@@ -0,0 +1,156 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+	import org.apache.royale.core.IRollOverModel;
+	import org.apache.royale.core.ISelectionModel;
+	import org.apache.royale.html.IListPresentationModel;
+
+	/**
+	 *  Indicates that the initialization of the list is complete.
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="initComplete", type="org.apache.royale.events.Event")]
+
+	/**
+	 * The selectionChange event is dispatched whenever the list's selection changes.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="selectionChange", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  The List class is a component that displays multiple data items. The List uses
+	 *  the following bead types:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the dataProvider, selectedItem, and
+	 *  so forth.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the list.
+	 *  org.apache.royale.core.IBeadController: the bead that handles input and output.
+	 *  org.apache.royale.core.IBeadLayout: the bead responsible for the size and position of the itemRenderers.
+	 *  org.apache.royale.core.IDataProviderItemRendererMapper: the bead responsible for creating the itemRenders.
+	 *  org.apache.royale.core.IItemRenderer: the class or factory used to display an item in the list.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class List extends DataContainer
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function List()
+		{
+			super();
+			// typeNames += " List";
+		}
+
+		/**
+		 *  The index of the currently selected item. Changing this value
+		 *  also changes the selectedItem property.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		[Bindable("selectionChange")]
+		public function get selectedIndex():int
+		{
+			return (model as ISelectionModel).selectedIndex;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		public function set selectedIndex(value:int):void
+		{
+			(model as ISelectionModel).selectedIndex = value;
+		}
+
+		/**
+		 *  The index of the item currently below the pointer.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.IRollOverModel
+		 */
+		public function get rollOverIndex():int
+		{
+			return (model as IRollOverModel).rollOverIndex;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+		 */
+		public function set rollOverIndex(value:int):void
+		{
+			(model as IRollOverModel).rollOverIndex = value;
+		}
+
+		/**
+		 *  The default height of each cell in every column
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.html.IListPresentationModel
+		 */
+		public function get rowHeight():Number
+		{
+			return (presentationModel as IListPresentationModel).rowHeight;
+		}
+
+		/**
+		 *  @royaleignorecoercion org.apache.royale.html.IListPresentationModel
+		 */
+		public function set rowHeight(value:Number):void
+		{
+			(presentationModel as IListPresentationModel).rowHeight = value;
+		}
+
+		/**
+		 *  The item currently selected. Changing this value also
+		 *  changes the selectedIndex property.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		[Bindable("selectionChange")]
+		public function get selectedItem():Object
+		{
+			return (model as ISelectionModel).selectedItem;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.ISelectionModel
+		 */
+		public function set selectedItem(value:Object):void
+		{
+			(model as ISelectionModel).selectedItem = value;
+		}
+
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/MultiSelectionList.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/MultiSelectionList.as
new file mode 100644
index 0000000000..f8387acc88
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/MultiSelectionList.as
@@ -0,0 +1,153 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+	import org.apache.royale.core.IRollOverModel;
+	import org.apache.royale.core.IMultiSelectionModel;
+	import org.apache.royale.html.IListPresentationModel;
+
+	/**
+	 *  Indicates that the initialization of the list is complete.
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="initComplete", type="org.apache.royale.events.Event")]
+
+	/**
+	 * The selectionChange event is dispatched whenever the list's selection changes.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	[Event(name="selectionChange", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  The MultiSelectionList class is a component that displays multiple data items. The MultiSelectionList uses
+	 *  the following bead types:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the dataProvider, selectedItems, and
+	 *  so forth.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the list.
+	 *  org.apache.royale.core.IBeadController: the bead that handles input and output.
+	 *  org.apache.royale.core.IBeadLayout: the bead responsible for the size and position of the itemRenderers.
+	 *  org.apache.royale.core.IDataProviderItemRendererMapper: the bead responsible for creating the itemRenders.
+	 *  org.apache.royale.core.IItemRenderer: the class or factory used to display an item in the list.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class MultiSelectionList extends DataContainer
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function MultiSelectionList()
+		{
+			super();
+			// typeNames += " MultiSelectionList";
+		}
+
+		/**
+		 *  The index of the currently selected item. Changing this value
+		 *  also changes the selectedItems property.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.IMultiSelectionModel
+		 */
+		[Bindable("selectionChange")]
+		public function get selectedIndices():Array
+		{
+			return (model as IMultiSelectionModel).selectedIndices;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IMultiSelectionModel
+		 */
+		public function set selectedIndices(value:Array):void
+		{
+			(model as IMultiSelectionModel).selectedIndices = value;
+		}
+
+		/**
+		 *  The index of the item currently below the pointer.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.IRollOverModel
+		 */
+		public function get rollOverIndex():int
+		{
+			return (model as IRollOverModel).rollOverIndex;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IRollOverModel
+		 */
+		public function set rollOverIndex(value:int):void
+		{
+			(model as IRollOverModel).rollOverIndex = value;
+		}
+
+		/**
+		 *  The default height of each cell in every column
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.IListPresentationModel
+		 */
+		public function get rowHeight():Number
+		{
+			return (presentationModel as IListPresentationModel).rowHeight;
+		}
+
+		public function set rowHeight(value:Number):void
+		{
+			(presentationModel as IListPresentationModel).rowHeight = value;
+		}
+
+		/**
+		 *  The items currently selected. Changing this value also
+		 *  changes the selectedIndices property.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 *  @royaleignorecoercion org.apache.royale.core.IMultiSelectionModel
+		 */
+		[Bindable("selectionChange")]
+		public function get selectedItems():Array
+		{
+			return (model as IMultiSelectionModel).selectedItems;
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.IMultiSelectionModel
+		 */
+		public function set selectedItems(value:Array):void
+		{
+			(model as IMultiSelectionModel).selectedItems = value;
+		}
+
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
index 50a1eaf8ae..fc799ac639 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/StyleUIBase.as
@@ -23,12 +23,12 @@ package org.apache.royale.style
 	import org.apache.royale.core.IBead;
 	import org.apache.royale.style.stylebeads.IStyleBead;
 	import org.apache.royale.style.util.StyleManager;
+	import org.apache.royale.style.util.ThemeManager;
 
 	COMPILE::JS
 	{
 		import org.apache.royale.html.util.addElementToWrapper;
 		import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.style.util.ThemeManager;
 	}
 
 	/**
@@ -56,7 +56,6 @@ package org.apache.royale.style
 		}
 		protected var classList:CSSClassList;
 		protected var utilityList:CSSClassList;
-		protected var styleBeads:Array = [];
 
 		/**
 		 * TODO: Add support for cascading theming.
@@ -66,33 +65,50 @@ package org.apache.royale.style
 			return ThemeManager.instance.current;
 		}
 
+		/**
+		 *  
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 * 
+		 *  @royalesuppresspublicvarwarning
+		 */
+		public var styleBeads:Array;
+
+		protected var _styleBeads:Vector.<IStyleBead>;
 		/**
 		 * @royaleignorecoercion org.apache.royale.style.stylebeads.IStyleBead
 		 */
-		override public function addBead(bead:IBead):void
+		public function addStyleBead(bead:IStyleBead):void
 		{
-			super.addBead(bead);
 			if (bead is IStyleBead)
 			{
 				var styleBead:IStyleBead = bead as IStyleBead;
 				styleBeads.push(styleBead);
+				_styleBeads.push(styleBead);
 			}
 			refreshStyles();
 		}
 		override protected function loadBeads():void
 		{
 			super.loadBeads();
+			if(styleBeads)
+			for each(var bead:IStyleBead in styleBeads)
+				addStyleBead(bead);
+				
 			refreshStyles();
 		}
 
 		protected function refreshStyles():void
 		{
-			utilityList.clear();
-			for each (var styleBead:IStyleBead in styleBeads)
+			COMPILE::JS
 			{
-				applyStyle(styleBead);
+				utilityList.clear();
+				for each (var styleBead:IStyleBead in styleBeads)
+				{
+					applyStyle(styleBead);
+				}
+				computeFinalClassNames();
 			}
-			computeFinalClassNames();
 		}
 		protected function applyStyle(styleBead:IStyleBead):void
 		{
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Tree.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Tree.as
new file mode 100644
index 0000000000..3f421a0bfc
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/Tree.as
@@ -0,0 +1,65 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style
+{
+	import org.apache.royale.collections.HierarchicalData;
+	import org.apache.royale.collections.TreeData;
+
+	/**
+	 *  The Tree component displays structured data. The Tree uses a HierarchicalData
+	 *  object as its data provider.
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Tree extends List
+	{
+		/**
+		 * Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Tree()
+		{
+			super();
+			// typeNames += " Tree";
+		}
+
+		/**
+		 * The dataProvider for a Tree is TreeData which is created
+		 * from HierarchicalData. You can set the dataProvider with
+		 * TreeData or HierarchicalData and it will create a TreeData
+		 * from that.
+		 * @royaleignorecoercion org.apache.royale.collections.HierarchicalData
+		 */
+		override public function set dataProvider(value:Object):void
+		{
+			if (value is HierarchicalData)
+			{
+				var treeData:TreeData = new TreeData(value as HierarchicalData);
+				super.dataProvider = treeData;
+			}
+			else
+			{
+				super.dataProvider = value;
+			}
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/A.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/A.as
new file mode 100644
index 0000000000..9a73ae3ba6
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/A.as
@@ -0,0 +1,122 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+
+	import org.apache.royale.style.support.TextNodeContainerBase;
+
+	/**
+	 *  The A(Anchor) class represents an HTML <a> anchor element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class A extends TextNodeContainerBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function A()
+		{
+			super();
+		}
+
+		private var _href:String;
+
+		/**
+		 *  the link url
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get href():String
+		{
+			return _href;
+		}
+		public function set href(value:String):void
+		{
+			_href = value;
+			setAttribute('href', value);
+		}
+
+		private var _target:String = "_self";
+
+		/**
+		 *  the target attribute. Defaults to "_self"
+		 *  Other options "_blank", "_parent", "_top"
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.9.13
+		 */
+		public function get target():String
+		{
+			return _target;
+		}
+		public function set target(value:String):void
+		{
+			_target = value;
+			setAttribute('target', value);
+		}
+
+		private var _download:String = "";
+
+		/**
+		 *  Prompts the user to save the linked URL instead of navigating to it
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.9.13
+		 */
+		public function get download():String
+		{
+			return _download;
+		}
+		public function set download(value:String):void
+		{
+			_download = value;
+			setAttribute('download', value);
+		}
+
+		private var _rel:String = "";
+
+		/**
+		 *  The rel attribute specifies the relationship between the current document and the linked document.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.9.13
+		 */
+		public function get rel():String
+		{
+			return _rel;
+		}
+		public function set rel(value:String):void
+		{
+			_rel = value;
+			setAttribute('rel', value);
+		}
+		override protected function getTag():String
+		{
+			return "a";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Audio.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Audio.as
new file mode 100644
index 0000000000..d40ca704a7
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Audio.as
@@ -0,0 +1,35 @@
+// //////////////////////////////////////////////////////////////////////////////
+// 
+// Licensed to the Apache Software Foundation (ASF) under one or more
+// contributor license agreements.  See the NOTICE file distributed with
+// this work for additional information regarding copyright ownership.
+// The ASF licenses this file to You under the Apache License, Version 2.0
+// (the "License"); you may not use this file except in compliance with
+// the License.  You may obtain a copy of the License at
+// 
+// http://www.apache.org/licenses/LICENSE-2.0
+// 
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+// 
+// //////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+
+	import org.apache.royale.style.support.MediaElementBase;
+
+	public class Audio extends MediaElementBase
+	{
+		public function Audio()
+		{
+			super();
+		}
+		override protected function getTag():String
+		{
+			return "audio";
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/B.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/B.as
index caeeae30f0..ad1a6fe873 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/B.as
@@ -16,28 +16,35 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
 
+	import org.apache.royale.style.support.TextNodeContainerBase;
+
+	/**
+	 *  The B(Bold) class represents an HTML <b> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class B extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function B()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "b";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Br.as
similarity index 72%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Br.as
index caeeae30f0..49491046d7 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Br.as
@@ -16,28 +16,18 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+  import org.apache.royale.style.support.NodeElementBase;
+  public class Br extends NodeElementBase
+  {
+    public function Br()
+    {
 
-		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
-		 */
-
-		override public function get selectors():Array
-		{
-			return [];
-		}
-
-		override public function get rules():Array
-		{
-			return [];
-		}
-	}
+    }
+    override protected function getTag():String
+    {
+      return "br";
+    }
+  }
 }
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Button.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Button.as
new file mode 100644
index 0000000000..0fcb4c7859
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Button.as
@@ -0,0 +1,187 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Button class represents an HTML <button> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Button extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Button()
+		{
+			super();
+		}
+
+		COMPILE::JS
+		private function get button():HTMLButtonElement
+		{
+			return element as HTMLButtonElement;
+		}
+
+		COMPILE::SWF
+		private var _disabled:Boolean;
+
+		/**
+		 *  Whether the button is disabled
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get disabled():Boolean
+		{
+			COMPILE::SWF
+			{
+				return _disabled;
+			}
+
+			COMPILE::JS
+			{
+				return button.disabled;
+			}
+		}
+		public function set disabled(value:Boolean):void
+		{
+			COMPILE::SWF
+			{
+				_disabled = value;
+			}
+			COMPILE::JS
+			{
+				button.disabled = value;
+			}
+		}
+
+		/**
+		 *  The button name
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		COMPILE::JS
+
+		public function get name():String
+		{
+			return button.name;
+		}
+		COMPILE::JS
+
+		public function set name(value:String):void
+		{
+			button.name = value;
+		}
+
+		COMPILE::SWF
+
+		override public function get name():String
+		{
+			return super.name;
+		}
+		COMPILE::SWF
+
+		override public function set name(value:String):void
+		{
+			super.name = value;
+		}
+
+		COMPILE::SWF
+
+		private var _type:String;
+
+		/**
+		 *  The button type
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get type():String
+		{
+			COMPILE::SWF
+			{
+				return _type;
+			}
+
+			COMPILE::JS
+			{
+				return button.type;
+			}
+		}
+		public function set type(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_type = value;
+			}
+			COMPILE::JS
+			{
+				button.type = value;
+			}
+		}
+
+		COMPILE::SWF
+
+		private var _value:String = "";
+
+		/**
+		 *  The current value of the control
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get value():String
+		{
+			COMPILE::SWF
+			{
+				return _value;
+			}
+			COMPILE::JS
+			{
+				return button.value;
+			}
+		}
+
+		public function set value(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_value = value;
+			}
+			COMPILE::JS
+			{
+				button.value = value;
+			}
+		}
+		override protected function getTag():String
+		{
+			return "button";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Caption.as
similarity index 67%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Caption.as
index caeeae30f0..0572466b7f 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Caption.as
@@ -16,28 +16,33 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Caption class represents an HTML <caption> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Caption extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Caption()
 		{
-			return [];
+			super();
 		}
-
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "caption";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Code.as
similarity index 69%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Code.as
index caeeae30f0..02e1a44ed3 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Code.as
@@ -16,28 +16,32 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Code class represents an HTML <code> element
+	 *
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Code extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Code()
 		{
-			return [];
+			super();
 		}
-
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "code";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Col.as
similarity index 53%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Col.as
index caeeae30f0..e443850096 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Col.as
@@ -16,28 +16,65 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Col class represents an HTML <col> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Col extends NodeElementBase
 	{
-		public function BorderStyle()
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Col()
 		{
 			super();
 		}
 
+		private var _span:Number;
+
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  The column span
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function get span():Number
 		{
-			return [];
+			COMPILE::SWF
+			{
+				return _span;
+			}
+			COMPILE::JS
+			{
+				return (element as HTMLTableColElement).span;
+			}
 		}
+		public function set span(value:Number):void
+		{
+			COMPILE::SWF
+			{
+				_span = value;
+			}
 
-		override public function get rules():Array
+			COMPILE::JS
+			{
+				(element as HTMLTableColElement).span = value;
+			}
+		}
+		override protected function getTag():String
 		{
-			return [];
+			return "col";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Colgroup.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Colgroup.as
new file mode 100644
index 0000000000..23df3e9e64
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Colgroup.as
@@ -0,0 +1,85 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+	COMPILE::JS
+	{
+		import org.apache.royale.core.WrappedHTMLElement;
+		import org.apache.royale.html.util.addElementToWrapper;
+	}
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Colgroup class represents an HTML <colgroup> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Colgroup extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Colgroup()
+		{
+			super();
+		}
+
+		private var _span:Number;
+
+		/**
+		 *  The column span
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get span():Number
+		{
+			COMPILE::SWF
+			{
+				return _span;
+			}
+			COMPILE::JS
+			{
+				return (element as HTMLTableColElement).span;
+			}
+		}
+		public function set span(value:Number):void
+		{
+			COMPILE::SWF
+			{
+				_span = value;
+			}
+
+			COMPILE::JS
+			{
+				(element as HTMLTableColElement).span = value;
+			}
+		}
+		override protected function getTag():String
+		{
+			return "colgroup";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Div.as
similarity index 71%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Div.as
index caeeae30f0..5e4fc444a1 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Div.as
@@ -16,28 +16,29 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Div class represents an HTML <div> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Div extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Div()
 		{
-			return [];
-		}
-
-		override public function get rules():Array
-		{
-			return [];
+			super();
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Em.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Em.as
index caeeae30f0..0c8cca87f7 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Em.as
@@ -16,28 +16,33 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Em(Emphasis) class represents an HTML <em> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Em extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Em()
 		{
-			return [];
+			super();
 		}
-
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "em";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Footer.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Footer.as
index caeeae30f0..f240868a19 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Footer.as
@@ -16,28 +16,33 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Footer class represents an HTML <footer> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Footer extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Footer()
 		{
-			return [];
+			super();
 		}
-
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "footer";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Form.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Form.as
new file mode 100644
index 0000000000..bbb25b9d06
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Form.as
@@ -0,0 +1,155 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Form class represents an HTML <form> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Form extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Form()
+		{
+			super();
+		}
+
+		COMPILE::JS
+		private function get form():HTMLFormElement
+		{
+			return element as HTMLFormElement;
+		}
+
+		COMPILE::SWF
+		private var _method:String;
+
+		/**
+		 *  The form method (either "post" or "get")
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get method():String
+		{
+			COMPILE::SWF
+			{
+				return _method;
+			}
+
+			COMPILE::JS
+			{
+				return form.method;
+			}
+		}
+		public function set method(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_method = value;
+			}
+			COMPILE::JS
+			{
+				form.method = value;
+			}
+		}
+
+		/**
+		 *  The form name
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		COMPILE::JS
+		public function get name():String
+		{
+			return form.name;
+		}
+		COMPILE::JS
+
+		public function set name(value:String):void
+		{
+			form.name = value;
+		}
+
+		COMPILE::SWF
+
+		override public function get name():String
+		{
+			return super.name;
+		}
+		COMPILE::SWF
+
+		override public function set name(value:String):void
+		{
+			super.name = value;
+		}
+
+		COMPILE::SWF
+
+		private var _target:String;
+
+		/**
+		 *  The form target
+		 *  Acceptable values are _self _blank _parent _top or an iframe name
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		public function get target():String
+		{
+			COMPILE::SWF
+			{
+				return _target;
+			}
+
+			COMPILE::JS
+			{
+				return form.target;
+			}
+		}
+		public function set target(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_target = value;
+			}
+			COMPILE::JS
+			{
+				form.target = value;
+			}
+		}
+		override protected function getTag():String
+		{
+			return "form";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H1.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H1.as
index caeeae30f0..a32da468c1 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H1.as
@@ -16,28 +16,33 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The H1 class represents an HTML <h1> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class H1 extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function H1()
 		{
-			return [];
+			super();
 		}
-
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "h1";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H2.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H2.as
index caeeae30f0..2fcdadb53c 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H2.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The H2 class represents an HTML <h2> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class H2 extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function H2()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "h2";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H3.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H3.as
index caeeae30f0..54dac69fb4 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H3.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The H3 class represents an HTML <h3> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class H3 extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function H3()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "h3";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H4.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H4.as
index caeeae30f0..b6bdbc0195 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H4.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The H4 class represents an HTML <h4> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class H4 extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function H4()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "h4";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H5.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H5.as
index caeeae30f0..c427bf0f8a 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H5.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The H5 class represents an HTML <h5> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class H5 extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function H5()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "h5";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H6.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H6.as
index caeeae30f0..5e350d7038 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/H6.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The H6 class represents an HTML <h6> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class H6 extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function H6()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "h6";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Header.as
similarity index 65%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Header.as
index caeeae30f0..2c31457ec0 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Header.as
@@ -16,28 +16,35 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Header class represents an HTML <header> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Header extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Header()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "header";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Hr.as
similarity index 69%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Hr.as
index caeeae30f0..c10b085417 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Hr.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Hr class represents an HTML <hr> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Hr extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Hr()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "hr";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/I.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/I.as
index caeeae30f0..5c60867310 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/I.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The I(Italic) class represents an HTML <i> anchor element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class I extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function I()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "i";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Iframe.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Iframe.as
new file mode 100644
index 0000000000..9ff2e7af67
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Iframe.as
@@ -0,0 +1,282 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Iframe class represents an HTML <iframe> element
+	 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Iframe extends NodeElementBase
+	{
+		public function Iframe()
+		{
+			super();
+		}
+		/**
+		 * Specifies the feature policy for the iframe
+		 * https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get allow():String
+		{
+			return getAttribute("allow");
+		}
+
+		public function set allow(value:String):void
+		{
+			setAttribute("allow",value);
+		}
+		/**
+		 * Specifies the Content Security Policy for the iframe
+		 * https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get csp():String
+		{
+			return getAttribute("csp");
+		}
+
+		public function set csp(value:String):void
+		{
+			setAttribute("csp",value);
+		}
+
+		/**
+		 * The download priority of the resource in the <iframe>'s src attribute.
+		 * Allowed values:
+		 * auto (default)
+		 *    No preference. The browser uses its own heuristics to decide the priority of the resource.
+		 * high
+		 *    The resource should be downloaded before other lower-priority page resources.
+		 * low
+		 *    The resource should be downloaded after other higher-priority page resources.
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get importance():String
+		{
+			return getAttribute("importance");
+		}
+
+    [Inspectable(category="General", enumeration="auto,high,low", defaultValue="auto")]
+		public function set importance(value:String):void
+		{
+			setAttribute("importance",value);
+		}
+
+		/**
+		 * Indicates how the browser should load the iframe:
+		 * eager: Load the iframe immediately, regardless if it is outside the visible viewport (this is the default value).
+		 * lazy: Defer loading of the iframe until it reaches a calculated distance from the viewport, as defined by the browser.
+
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get loading():String
+		{
+			return getAttribute("loading");
+		}
+
+    [Inspectable(category="General", enumeration="eager,lazy")]
+		public function set loading(value:String):void
+		{
+			setAttribute("loading",value);
+		}
+
+		/**
+		 * A targetable name for the embedded browsing context.
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		COMPILE::JS
+		public function get name():String
+		{
+			return iframe.name;
+		}
+		COMPILE::JS
+		public function set name(value:String):void
+		{
+			iframe.name = value;
+		}
+
+		COMPILE::SWF
+		override public function get name():String
+		{
+			return super.name;
+		}
+		COMPILE::SWF
+		override public function set name(value:String):void
+		{
+			super.name = value;
+		}
+
+		/**
+		 * Indicates which referrer to send when fetching the frame's resource
+		 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get referrerpolicy():String
+		{
+			return getAttribute("referrerpolicy");
+		}
+
+    [Inspectable(category="General", enumeration="no-referrer,no-referrer-when-downgrade,origin,origin-when-cross-origin,same-origin,strict-origin,strict-origin-when-cross-origin,unsafe-url", defaultValue="no-referrer-when-downgrade")]
+		public function set referrerpolicy(value:String):void
+		{
+			setAttribute("referrerpolicy",value);
+		}
+		COMPILE::SWF
+		private var _sandbox:String;
+		/**
+		 * Applies extra restrictions to the content in the frame. The value of the attribute can either be
+		 * empty to apply all restrictions, or space-separated tokens to lift particular restrictions:
+		 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get sandbox():String
+		{
+			COMPILE::SWF
+			{
+				return _sandbox;
+			}
+
+			COMPILE::JS
+			{
+				return iframe.sandbox;
+			}
+		}
+
+    [Inspectable(category="General", enumeration="allow-downloads-without-user-activation,allow-downloads,allow-forms,allow-modals,allow-orientation-lock,allow-pointer-lock,allow-popups,allow-popups-to-escape-sandbox,allow-presentation,allow-same-origin,allow-scripts,allow-storage-access-by-user-activation,allow-top-navigation,allow-top-navigation-by-user-activation")]
+		public function set sandbox(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_sandbox = value;
+			}
+
+			COMPILE::JS
+			{
+				iframe.sandbox = value;
+			}
+		}
+		COMPILE::SWF
+		private var _src:String;
+		/**
+		 * The URL of the page to embed.
+		 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src
+		 * https://developer.mozilla.org/en-US/docs/Web/HTTP/Feature_Policy
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get src():String
+		{
+			COMPILE::SWF
+			{
+				return _src;
+			}
+
+			COMPILE::JS
+			{
+				return iframe.src;
+			}
+		}
+
+		public function set src(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_src = value;
+			}
+
+			COMPILE::JS
+			{
+				iframe.src = value;
+			}
+		}
+
+		/**
+		 * Convenience method for postMessage
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function postMessage(message:Object, targetOrigin:String, transfer:Object = null):void
+		{
+			COMPILE::JS
+			{
+				var transferables:* = undefined;
+				if (transfer) {
+					transferables = Array.isArray(transfer) ? transfer : [transfer];
+				}
+				contentWindow.postMessage(message,targetOrigin,transferables);
+			}
+		}
+
+		/**
+		 * Convenience method to attach message listener
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function addMessageListener(handler:(e:MessageEvent)=>void):void
+		{
+			COMPILE::JS
+			{
+				window.addEventListener("message",handler);
+			}
+		}
+
+		COMPILE::SWF
+		public function get contentWindow():Object
+		{
+			return null;
+		}
+		/**
+		 * @royaleignorecoercion HTMLIFrameElement
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		COMPILE::JS
+		public function get contentWindow():Window
+		{
+			return (element as HTMLIFrameElement).contentWindow;
+		}
+
+		override protected function getTag():String
+		{
+			return "iframe";
+		}
+		/**
+		 * @royaleignorecoercion HTMLIFrameElement
+		 */
+		COMPILE::JS
+		private function get iframe():HTMLIFrameElement
+		{
+			return element as HTMLIFrameElement;
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Img.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Img.as
new file mode 100644
index 0000000000..c5cac63da1
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Img.as
@@ -0,0 +1,113 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Img class represents an HTML <img> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Img extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Img()
+		{
+			super();
+		}
+
+		private var _src:String;
+
+		/**
+		 *  The img src
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get src():String
+		{
+			COMPILE::SWF
+			{
+				return _src;
+			}
+			COMPILE::JS
+			{
+				return (element as HTMLImageElement).src;
+			}
+		}
+		public function set src(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_src = value;
+			}
+
+			COMPILE::JS
+			{
+				(element as HTMLImageElement).src = value;
+			}
+		}
+
+		private var _alt:String;
+
+		/**
+		 *  The img alt
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get alt():String
+		{
+			COMPILE::SWF
+			{
+				return _alt;
+			}
+			COMPILE::JS
+			{
+				return (element as HTMLImageElement).alt;
+			}
+		}
+		public function set alt(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_alt = value;
+			}
+
+			COMPILE::JS
+			{
+				(element as HTMLImageElement).alt = value;
+			}
+		}
+
+		override protected function getTag():String
+		{
+			return "img";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Input.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Input.as
new file mode 100644
index 0000000000..fd368beff9
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Input.as
@@ -0,0 +1,221 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Input class represents an HTML <input> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Input extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Input()
+		{
+			super();
+		}
+
+		COMPILE::JS
+		private function get input():HTMLInputElement
+		{
+			return element as HTMLInputElement;
+		}
+
+		COMPILE::SWF
+		private var _disabled:Boolean;
+
+		/**
+		 *  Whether the input is disabled
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get disabled():Boolean
+		{
+			COMPILE::SWF
+			{
+				return _disabled;
+			}
+
+			COMPILE::JS
+			{
+				return input.disabled;
+			}
+		}
+		public function set disabled(value:Boolean):void
+		{
+			COMPILE::SWF
+			{
+				_disabled = value;
+			}
+			COMPILE::JS
+			{
+				input.disabled = value;
+			}
+		}
+
+		/**
+		 *  The input name
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		COMPILE::JS
+		public function get name():String
+		{
+			return input.name;
+		}
+		COMPILE::JS
+
+		public function set name(value:String):void
+		{
+			input.name = value;
+		}
+
+		COMPILE::SWF
+
+		override public function get name():String
+		{
+			return super.name;
+		}
+		COMPILE::SWF
+
+		override public function set name(value:String):void
+		{
+			super.name = value;
+		}
+
+		COMPILE::SWF
+
+		private var _required:Boolean;
+
+		/**
+		 *  Whether the input is required
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get required():Boolean
+		{
+			COMPILE::SWF
+			{
+				return _required;
+			}
+
+			COMPILE::JS
+			{
+				return input.required;
+			}
+		}
+		public function set required(value:Boolean):void
+		{
+			COMPILE::SWF
+			{
+				_required = value;
+			}
+			COMPILE::JS
+			{
+				input.required = value;
+			}
+		}
+
+		COMPILE::SWF
+
+		private var _type:String;
+
+		/**
+		 *  The input type
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get type():String
+		{
+			COMPILE::SWF
+			{
+				return _type;
+			}
+
+			COMPILE::JS
+			{
+				return input.type;
+			}
+		}
+		public function set type(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_type = value;
+			}
+			COMPILE::JS
+			{
+				input.type = value;
+			}
+		}
+
+		COMPILE::SWF
+
+		private var _value:String = "";
+
+		/**
+		 *  The current value of the control
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get value():String
+		{
+			COMPILE::SWF
+			{
+				return _value;
+			}
+			COMPILE::JS
+			{
+				return input.value;
+			}
+		}
+
+		public function set value(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_value = value;
+			}
+			COMPILE::JS
+			{
+				input.value = value;
+			}
+		}
+
+		override protected function getTag():String
+		{
+			return "input";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Label.as
similarity index 57%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Label.as
index caeeae30f0..5d8903efd6 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Label.as
@@ -16,28 +16,51 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Label class represents an HTML <label> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Label extends NodeElementBase
 	{
-		public function BorderStyle()
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Label()
 		{
 			super();
 		}
 
+		private var _for:String;
+
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  The id of the associated element
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function get for():String
+		{
+			return getAttribute("for");
+		}
+		public function set for(value:String):void
 		{
-			return [];
+			setAttribute("for", value);
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "label";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Li.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Li.as
index caeeae30f0..fd7e178690 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Li.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Li class represents an HTML <li> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Li extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Li()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "li";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Ol.as
similarity index 69%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Ol.as
index caeeae30f0..7b124e95c5 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Ol.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Ol class represents an HTML <ol> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Ol extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Ol()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "ol";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Option.as
similarity index 67%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Option.as
index caeeae30f0..74a2127d9b 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Option.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Option class represents an HTML <option> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Option extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Option()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "option";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/P.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/P.as
index caeeae30f0..6a2ba2fd86 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/P.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The P class represents an HTML <p> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class P extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function P()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "p";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Pre.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Pre.as
index caeeae30f0..0344a328c7 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Pre.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The PRE class represents an HTML <pre> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Pre extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Pre()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "pre";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Progress.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Progress.as
new file mode 100644
index 0000000000..28fd598a21
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Progress.as
@@ -0,0 +1,171 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//	Licensed to the Apache Software Foundation (ASF) under one or more
+//	contributor license agreements.	See the NOTICE file distributed with
+//	this work for additional information regarding copyright ownership.
+//	The ASF licenses this file to You under the Apache License, Version 2.0
+//	(the "License"); you may not use this file except in compliance with
+//	the License.	You may obtain a copy of the License at
+//
+//			http://www.apache.org/licenses/LICENSE-2.0
+//
+//	Unless required by applicable law or agreed to in writing, software
+//	distributed under the License is distributed on an "AS IS" BASIS,
+//	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//	See the License for the specific language governing permissions and
+//	limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+		import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *	The Progress class represents an HTML <progress> element
+		 *
+	 *
+		 *	@toplevel
+	 *	@langversion 3.0
+	 *	@productversion Royale 0.9.13
+	 */
+	public class Progress extends NodeElementBase
+	{
+		/**
+		 *	constructor.
+		 *
+		 *	@langversion 3.0
+		 *	@productversion Royale 0.9.13
+		 */
+		public function Progress()
+		{
+			super();
+		}
+
+		/**
+		 * @royaleignorecoercion HTMLProgressElement
+		 */
+		COMPILE::JS
+		private function get progress():HTMLProgressElement
+		{
+			return element as HTMLProgressElement;
+		}
+
+		COMPILE::SWF
+		private var _value:Number;
+
+		/**
+		 *	A Number value that reflects the current value;
+		 *	if the progress bar is an indeterminate progress bar, it returns 0.
+		 *
+		 *	@langversion 3.0
+		 *	@productversion Royale 0.9.13
+		 */
+		public function get value():Number
+		{
+			COMPILE::SWF
+			{
+				return _value;
+			}
+			COMPILE::JS
+			{
+				return progress.value;
+			}
+		}
+
+
+		public function set value(value:Number):void
+		{
+			COMPILE::SWF
+			{
+				_value = value;
+			}
+			COMPILE::JS
+			{
+				progress.value = value;
+			}
+		}
+
+		COMPILE::SWF
+		private var _max:Number;
+
+		/**
+		 *	A Number value reflecting the content attribute of the same name,
+		 *  limited to numbers greater than zero. Its default value is 1.0.
+		 *
+		 *	@langversion 3.0
+		 *	@productversion Royale 0.9.13
+		 */
+		public function get max():Number
+		{
+			COMPILE::SWF
+			{
+				if(isNaN(_max))
+					return 1;
+				return _max;
+			}
+			COMPILE::JS
+			{
+				return progress.max;
+			}
+		}
+
+		public function set max(value:Number):void
+		{
+			COMPILE::SWF
+			{
+				_max = value;
+			}
+			COMPILE::JS
+			{
+				progress.max = value;
+			}
+		}
+
+		/**
+		 *	Returns a Number value returning the result of dividing the
+		 *  current value (value) by the maximum value (max).
+		 *  If the progress bar is an indeterminate progress bar, it returns -1.
+		 *
+		 *	@langversion 3.0
+		 *	@productversion Royale 0.9.13
+		 */
+		public function get position():Number
+		{
+			COMPILE::SWF
+			{
+				if(determinate)
+					return value / max;
+
+				return -1;
+			}
+			COMPILE::JS
+			{
+				return progress.position;
+			}
+		}
+
+		/**
+		 *	Whether the progress bar is determinate (true) or indeterminate (false)
+		 *
+		 *	@langversion 3.0
+		 *	@productversion Royale 0.9.13
+		 */
+		public function get determinate():Boolean
+		{
+			COMPILE::SWF
+			{
+				return !isNaN(_value);
+			}
+
+			COMPILE::JS
+			{
+				return progress.hasAttribute("value");
+			}
+		}
+
+		override protected function getTag():String
+		{
+			return "progress";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/S.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/S.as
index caeeae30f0..2a7423df4b 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/S.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The S class represents an HTML <s> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class S extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function S()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "s";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Section.as
similarity index 65%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Section.as
index caeeae30f0..66f2051080 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Section.as
@@ -16,28 +16,35 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Section class represents an HTML <section> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Section extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Section()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "section";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/SecurityIframe.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/SecurityIframe.as
new file mode 100644
index 0000000000..e3d1560b67
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/SecurityIframe.as
@@ -0,0 +1,212 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements {
+	import org.apache.royale.style.elements.Iframe;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.ValueEvent;
+
+	[Event(name='message',type='org.apache.royale.events.ValueEvent')]
+	[Event(name='iframeLoad',type='org.apache.royale.events.Event')]
+	[Event(name='iframeError',type='org.apache.royale.events.Event')]
+	/**
+	 *  Enhanced version of the Iframe base component, with additional security support for message filtering
+	 *
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class SecurityIframe extends Iframe {
+		public function SecurityIframe() {
+			super();
+			COMPILE::JS
+			{
+				(element as HTMLIFrameElement).addEventListener('load', onStatus);
+				(element as HTMLIFrameElement).addEventListener('error', onStatus)
+			}
+		}
+
+
+		private var _checkExpectedOrigin:Boolean = true;
+		/**
+		 * This is true by default. Setting it to false will also allow message handling from
+		 * potential opaque origins ("" or 'null' origins)  which is NOT considered secure
+		 * @param value
+		 */
+		public function set checkExpectedOrigin(value:Boolean):void{
+			_checkExpectedOrigin = value;
+		}
+		public function get checkExpectedOrigin():Boolean{
+			return _checkExpectedOrigin;
+		}
+
+
+		COMPILE::JS
+		private static function isDescendantWindow(source:Window, root:Window):Boolean
+		{
+			var w:Window = source;
+
+			// Walk up the parent chain until we reach the top window
+			while (w && w !== w.parent)
+			{
+				if (w === root)
+					return true;
+
+				w = w.parent as Window;
+			}
+
+			return false;
+		}
+
+
+		private var _allowNestedFrames:Boolean = false;
+		/**
+		 * whether or not to filter messaging from deeper nested iframes
+		 * @param value true if messaging from nested iframes is supported. false by default
+		 */
+		public function set allowNestedFrames(value:Boolean):void{
+			_allowNestedFrames = value;
+		}
+		public function get allowNestedFrames():Boolean{
+			return _allowNestedFrames;
+		}
+
+
+		override public function set src(value:String):void
+		{
+			super.src = value;
+
+			COMPILE::JS
+			{
+				try{
+					expectedOrigin = new URL(value, window.location.href).origin;
+				} catch(e:Error) {
+					expectedOrigin = null;
+				}
+
+				if ((_listeners.length || hasEventListener('message')) && expectedOrigin) {
+					activateMessaging(true);
+				}
+			}
+		}
+
+
+		COMPILE::JS
+		private var _listeners:Array = []
+
+		/* the royale version needs fixing... this might be a candidate */
+		override public function addMessageListener(handler:(e:MessageEvent)=>void):void
+		{
+			COMPILE::JS
+			{
+				var idx:int = _listeners.indexOf(handler);
+				if (idx== -1 ) _listeners.push(handler)
+				if (expectedOrigin) activateMessaging(true);
+			}
+		}
+
+		public function removeMessageListener(handler:(e:MessageEvent)=>void):void
+		{
+			COMPILE::JS
+			{
+				var idx:int = _listeners.indexOf(handler);
+				if (idx!= -1 ) _listeners.splice(idx,1);
+				if (!_listeners.length) {
+					activateMessaging(false);
+				}
+			}
+		}
+		COMPILE::JS
+		private function onStatus(e:Object):void{
+			var localEventType:String = 'iframe'+e.type.charAt(0).toUpperCase() + e.type.substr(1)
+			dispatchEvent(new Event(localEventType))
+		}
+
+		COMPILE::JS
+		private var expectedOrigin:String;
+
+		COMPILE::JS
+		private var messagingActive:Boolean;
+		COMPILE::JS
+		private function activateMessaging(on:Boolean):void{
+			if (on) {
+				if (!messagingActive) {
+					window.addEventListener('message', filterMessaging);
+					messagingActive = true;
+				}
+			} else {
+				if (messagingActive) {
+					window.removeEventListener('message', filterMessaging);
+					messagingActive = false;
+				}
+			}
+		}
+
+		private var _messageShapeChecker:(dataObject:Object)=>Boolean;
+
+		/**
+		 * extra optional check to make sure the data received conforms to some expectations
+		 * for example, check if a namespace field matches expectations, or data appears to be a certain 'shape'
+		 * @param checker the function which should examine the data object and return true if it conforms to expectations
+		 */
+		public function setMessageValidationCheck(checker:(dataObject:Object)=>Boolean):void{
+				_messageShapeChecker = checker;
+		}
+
+
+		COMPILE::JS
+		private function filterMessaging(e:MessageEvent):void{
+			//opaque origins (cases including "" and "null" origin) will always be excluded unless  checkExpectedOrigin is false
+			if (checkExpectedOrigin) {
+				if (!e.origin || e.origin === "null")
+					return;
+				if (e.origin != expectedOrigin) return;
+			}
+
+			if (!allowNestedFrames) {
+				// default: only accept messages from the iframe itself
+				if (e.source != contentWindow) return;
+			} else {
+				//accept messages also from nested iframes
+				if (!isDescendantWindow(e.source as Window, contentWindow as Window))
+					return;
+
+			}
+
+			//extra optional check to make sure the data received conforms to some expectations
+			if (_messageShapeChecker && !_messageShapeChecker(e.data)) return;
+
+			for each(var _listener:(e:MessageEvent)=>void in _listeners) {
+				_listener(e);
+			}
+			if (hasEventListener('message')) {
+				//send the native MessageEvent via a ValueEvent
+				dispatchEvent(new ValueEvent('message', e))
+			}
+		}
+
+		COMPILE::JS
+		override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
+		{
+			if (type=='message' && expectedOrigin || !_checkExpectedOrigin) {
+				activateMessaging(true)
+			}
+			super.addEventListener(type, handler, opt_capture, opt_handlerScope);
+		}
+
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Select.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Select.as
index caeeae30f0..a95e467d62 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Select.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Select class represents an HTML <select> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Select extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Select()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "select";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Small.as
similarity index 67%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Small.as
index caeeae30f0..75facd2a43 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Small.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Small class represents an HTML <small> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Small extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Small()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "small";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Span.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Span.as
index caeeae30f0..aac4956f8c 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Span.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Span class represents an HTML <span> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Span extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Span()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "span";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Strong.as
similarity index 67%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Strong.as
index caeeae30f0..a406367889 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Strong.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Strong class represents an HTML <strong> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Strong extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Strong()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "strong";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Table.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Table.as
index caeeae30f0..0e69c3ed60 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Table.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Table class represents an HTML <table> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Table extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Table()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "table";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tbody.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tbody.as
index caeeae30f0..8c5ee96e32 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tbody.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Tbody class represents an HTML <tbody> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Tbody extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Tbody()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "tbody";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Td.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Td.as
index caeeae30f0..6d309b0db0 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Td.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Td class represents an HTML <td> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Td extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Td()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "td";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Textarea.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Textarea.as
new file mode 100644
index 0000000000..61d3cbfab0
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Textarea.as
@@ -0,0 +1,224 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.elements
+{
+	import org.apache.royale.style.support.NodeElementBase;
+
+	/**
+	 *  The Textarea class represents an HTML <textarea> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Textarea extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Textarea()
+		{
+			super();
+		}
+
+		/**
+		 * @royaleignorecoercion HTMLTextAreaElement
+		 */
+		COMPILE::JS
+		private function get textarea():HTMLTextAreaElement
+		{
+			return element as HTMLTextAreaElement;
+		}
+
+		COMPILE::SWF
+		private var _cols:uint = 20;
+
+		/**
+		 *  Width of textarea in (average) character widths
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get cols():uint
+		{
+			COMPILE::SWF
+			{
+				return _cols;
+			}
+
+			COMPILE::JS
+			{
+				return textarea.cols;
+			}
+		}
+		public function set cols(value:uint):void
+		{
+			COMPILE::SWF
+			{
+				_cols = value;
+			}
+			COMPILE::JS
+			{
+				textarea.cols = value;
+			}
+		}
+
+		COMPILE::SWF
+		private var _rows:uint;
+
+		/**
+		 *  Number of visible lines
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get rows():uint
+		{
+			COMPILE::SWF
+			{
+				return _rows;
+			}
+
+			COMPILE::JS
+			{
+				return textarea.rows;
+			}
+		}
+		public function set rows(value:uint):void
+		{
+			COMPILE::SWF
+			{
+				_rows = value;
+			}
+			COMPILE::JS
+			{
+				textarea.rows = value;
+			}
+		}
+
+		COMPILE::SWF
+
+		private var _disabled:Boolean;
+
+		/**
+		 *  Whether the textarea is disabled
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get disabled():Boolean
+		{
+			COMPILE::SWF
+			{
+				return _disabled;
+			}
+
+			COMPILE::JS
+			{
+				return textarea.disabled;
+			}
+		}
+		public function set disabled(value:Boolean):void
+		{
+			COMPILE::SWF
+			{
+				_disabled = value;
+			}
+			COMPILE::JS
+			{
+				textarea.disabled = value;
+			}
+		}
+
+		/**
+		 *  The textarea name
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		COMPILE::JS
+
+		public function get name():String
+		{
+			return textarea.name;
+		}
+		COMPILE::JS
+
+		public function set name(value:String):void
+		{
+			textarea.name = value;
+		}
+
+		COMPILE::SWF
+
+		override public function get name():String
+		{
+			return super.name;
+		}
+		COMPILE::SWF
+
+		override public function set name(value:String):void
+		{
+			super.name = value;
+		}
+
+		COMPILE::SWF
+
+		private var _value:String = "";
+
+		/**
+		 *  The current value of the textarea
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function get value():String
+		{
+			COMPILE::SWF
+			{
+				return _value;
+			}
+			COMPILE::JS
+			{
+				return textarea.value;
+			}
+		}
+
+		public function set value(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_value = value;
+			}
+			COMPILE::JS
+			{
+				textarea.value = value;
+			}
+		}
+
+		override protected function getTag():String
+		{
+			return "textarea";
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tfoot.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tfoot.as
index caeeae30f0..f191f644bc 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tfoot.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Tfoot class represents an HTML <tfoot> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Tfoot extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Tfoot()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "tfoot";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Th.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Th.as
index caeeae30f0..cc8ec3c14d 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Th.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The Th class represents an HTML <th> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Th extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Th()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "th";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Thead.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Thead.as
index caeeae30f0..0824363162 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Thead.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Thead class represents an HTML <thead> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Thead extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Thead()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "thead";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tr.as
similarity index 69%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tr.as
index caeeae30f0..5d0f19a960 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Tr.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Tr class represents an HTML <tr> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Tr extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Tr()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "tr";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/U.as
similarity index 68%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/U.as
index caeeae30f0..45056f7990 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/U.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.TextNodeContainerBase;
 
+	/**
+	 *  The U class represents an HTML <u> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class U extends TextNodeContainerBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function U()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "u";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Ul.as
similarity index 69%
copy from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
copy to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Ul.as
index caeeae30f0..c582592269 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Ul.as
@@ -16,28 +16,34 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
-	{
-		public function BorderStyle()
-		{
-			super();
-		}
+	import org.apache.royale.style.support.NodeElementBase;
 
+	/**
+	 *  The Ul class represents an HTML <ul> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Ul extends NodeElementBase
+	{
 		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
 		 */
-
-		override public function get selectors():Array
+		public function Ul()
 		{
-			return [];
+			super();
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "ul";
 		}
-	}
-}
\ No newline at end of file
+    }
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Video.as
similarity index 59%
rename from frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
rename to frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Video.as
index caeeae30f0..4e7dda05b7 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/BorderStyle.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/elements/Video.as
@@ -16,28 +16,47 @@
 //  limitations under the License.
 //
 ////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.style.stylebeads
+package org.apache.royale.style.elements
 {
-	public class BorderStyle extends StyleBeadBase
+
+	import org.apache.royale.style.support.MediaElementBase;
+
+	/**
+	 *  The Video class represents an HTML <video> element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @productversion Royale 0.9.13
+	 */
+	public class Video extends MediaElementBase
 	{
-		public function BorderStyle()
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @productversion Royale 0.9.13
+		 */
+		public function Video()
 		{
 			super();
 		}
 
-		/**
-		 * TODO:
-		 * border-radius, border-color, border-style, border-width
-		 */
+		COMPILE::JS
+		public function get videoHeight():uint
+		{
+			return (element as HTMLVideoElement).videoHeight;
+		}
 
-		override public function get selectors():Array
+		COMPILE::JS
+		public function get videoWidth():uint
 		{
-			return [];
+			return (element as HTMLVideoElement).videoWidth;
 		}
 
-		override public function get rules():Array
+		override protected function getTag():String
 		{
-			return [];
+			return "video";
 		}
 	}
-}
\ No newline at end of file
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as
index d486bbc4d2..37b6984277 100644
--- a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/stylebeads/layout/Position.as
@@ -28,6 +28,7 @@ package org.apache.royale.style.stylebeads.layout
 			super("", "position");
 		}
 
+		[Inspectable(category="General", enumeration="static,fixed,absolute,relative,sticky", defaultValue="absolute")]
 		override public function set value(value:*):void
 		{
 			assert(["static","fixed","absolute","relative","sticky"].indexOf(value) >= 0, "Invalid value for position: " + value);
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/MediaElementBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/MediaElementBase.as
new file mode 100644
index 0000000000..9235201502
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/MediaElementBase.as
@@ -0,0 +1,1125 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.support
+{
+	COMPILE::JS
+	{
+		import goog.events;
+		import org.apache.royale.events.utils.EventUtils;
+		import org.apache.royale.events.Event;
+	}
+	public class MediaElementBase extends NodeElementBase
+	{
+
+		/**
+		 *  Dispatched when the resource was not fully loaded,
+		 *  but not as the result of an error.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="abort", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the user agent can play the media, but
+		 *  estimates that not enough data has been loaded
+		 *  to play the media up to its end without having to stop
+		 *  for further buffering of content
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="canplay", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the user agent can play the media, and estimates
+		 *  that enough data has been loaded to play the media up to its end
+		 *  without having to stop for further buffering of content.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="canplaythrough", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the duration property has been updated.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="durationchange", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the media has become empty; for example, when the
+		 *  media has already been loaded (or partially loaded), and the
+		 *  MediaElement.load() method is called to reload it
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="emptied", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when playback stops when end of the media (<audio> or <video>)
+		 *  is reached or because no further data is available.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="ended", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the resource could not be loaded due to an error.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="error", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the metadata has been loaded
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="loadeddata", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the metadata has been loaded
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="loadedmetadata", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the browser has started to load a resource.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="loadstart", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when a request to pause play is handled and the activity
+		 *  has entered its paused state, most commonly occurring when the media's
+		 *  pause() method is called.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="pause", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the paused property is changed from true to false,
+		 *  as a result of the play() method, or the autoplay attribute
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="play", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when playback is ready to start after having been
+		 *  paused or delayed due to lack of data
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="playing", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched periodically as the browser loads a resource.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="progress", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the playback rate has changed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="ratechange", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when a seek operation completes
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="seeked", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when a seek operation begins.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="seeking", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the user agent is trying to fetch media data,
+		 *  but data is unexpectedly not forthcoming.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="stalled", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the media data loading has been suspended.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="suspend", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the time indicated by the currentTime property has been updated.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="timeupdate", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when the volume has changed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="volumechange", type="org.apache.royale.events.Event")]
+
+		/**
+		 *  Dispatched when playback has stopped because of a temporary lack of data.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		[Event(name="waiting", type="org.apache.royale.events.Event")]
+
+		public function MediaElementBase()
+		{
+			super();
+		}
+
+		COMPILE::SWF
+        private var _autoplay:Boolean;
+
+		/**
+		 *  indicate whether playback should automatically begin as
+		 *  soon as enough media is available to do so without interruption.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get autoplay():Boolean
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).autoplay;
+			}
+
+			COMPILE::SWF
+			{
+				return _autoplay;
+			}
+		}
+
+		/**
+		 *  A boolean value which is true if the media element will begin playback as
+		 *  soon as enough content has loaded to allow it to do so without interruption.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set autoplay(value:Boolean):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).autoplay = value;
+			}
+
+			COMPILE::SWF
+			{
+				_autoplay = value;
+			}
+		}
+
+		/**
+		 *  return a TimeRanges object that represents the ranges of the media resource,
+		 *  if any, that the user agent has buffered at the moment the buffered property is accessed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		COMPILE::JS
+		public function get buffered():TimeRanges
+		{
+			return (element as HTMLMediaElement).buffered;
+		}
+
+		/**
+		 *  eflects the controls attribute, which controls whether user interface
+		 *  controls for playing the media item will be displayed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get controls():Boolean
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).controls;
+			}
+
+			COMPILE::SWF
+			{
+				return false;
+			}
+		}
+
+		/**
+		 *  A value of true means controls will be displayed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set controls(value:Boolean):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).controls = value;
+			}
+		}
+
+		/*
+		public function get controlsList():DOMTokenList
+		{
+			return (element as HTMLMediaElement).controlsList;
+		}
+*/
+
+		/*COMPILE::JS
+		public function get crossOrigin():String
+		{
+			return (element as HTMLMediaElement).crossOrigin;
+		}
+
+    	COMPILE::JS
+		public function set crossOrigin(value:String):void
+		{
+			(element as HTMLMediaElement).controls = crossOrigin;
+		}*/
+
+		/**
+		 *  return the current source
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get currentSrc():String
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).currentSrc;
+			}
+
+			COMPILE::SWF
+			{
+				return null;
+			}
+		}
+
+		/**
+		 *  specifies the current playback time in seconds.
+		 *  If the media is not yet playing, the value of currentTime
+		 *  indicates the time position within the media at which playback
+		 *  will begin once the play() method is called
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get currentTime():Number
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).currentTime;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/**
+		 *  Changing the value of currentTime seeks the media to the new time.
+		 *  value indicate the current playback time in seconds.
+		 *  Setting currentTime to a new value seeks the media to the given time, if the media is available.
+		 *  The length of the media in seconds can be determined using the duration property.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set currentTime(value:Number):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).currentTime = value;
+			}
+		}
+
+		/*COMPILE::JS
+		public function get defaultMuted():Boolean
+		{
+			return (element as HTMLMediaElement).defaultMuted;
+		}
+
+    	COMPILE::JS
+		public function set defaultMuted(value:Boolean):void
+		{
+			(element as HTMLMediaElement).defaultMuted = value;
+		}*/
+
+		/**
+		 *  indicates the default playback rate for the media.
+		 *  1.0 is "normal speed,"
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get defaultPlaybackRate():Number
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).defaultPlaybackRate;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/*COMPILE::JS
+		public function set defaultPlaybackRate(value:Number):void
+		{
+			(element as HTMLMediaElement).defaultPlaybackRate = value;
+		}
+
+        COMPILE::JS
+		public function get disableRemotePlayback():Boolean
+		{
+			return (element as HTMLMediaElement).disableRemotePlayback;
+		}
+
+    	COMPILE::JS
+		public function set disableRemotePlayback(value:Boolean):void
+		{
+			(element as HTMLMediaElement).disableRemotePlayback = value;
+		}*/
+
+		/**
+		 *  indicates the length of the element's media in seconds.
+		 *  If no media data is available, the value NaN is returned.
+		 *  If the element's media doesn't have a known duration—such
+		 *  as for live media streams—the value of duration is +Infinity
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get duration():Number
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).duration;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/**
+		 *  indicates whether the media element has ended playback.
+		 *  return true if the media contained in the element has finished playing.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get ended():Boolean
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).ended;
+			}
+
+			COMPILE::SWF
+			{
+				return false;
+			}
+		}
+
+		/**
+		 *  MediaError object for the most recent error, or null if there has not been an error.
+		 *  When an error event is received by the element, you can determine details about
+		 *  what happened by examining this object.
+		 *
+		 *  A MediaError object describing the most recent error to occur
+		 *  on the media element or null if no errors have occurred.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		COMPILE::JS
+		public function get error():MediaError
+		{
+			return (element as HTMLMediaElement).error;
+		}
+
+		/**
+		 *  return whether the media element should start over when it reaches the end
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get loop():Boolean
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).loop;
+			}
+
+			COMPILE::SWF
+			{
+				return false;
+			}
+		}
+
+		/**
+		 *  controls whether the media element should start over when it reaches the end
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set loop(value:Boolean):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).loop = value;
+			}
+		}
+
+		/**
+		 *  indicates whether the media element muted.
+		 *  true means muted and false means not muted
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get muted():Boolean
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).muted;
+			}
+
+			COMPILE::SWF
+			{
+				return false;
+			}
+		}
+
+		/**
+		 *  set or unset mute
+		 *  true means mute and false means not mute
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set muted(value:Boolean):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).muted = value;
+			}
+		}
+
+		/**
+		 *  indicates the current state of the fetching of media over the network.
+		 *  Possible values are:
+		 *
+		 *  0: NETWORK_EMPTY. There is no data yet. Also, readyState is HAVE_NOTHING.
+		 *	1: NETWORK_IDLE. MediaElement is active and has selected a resource, but is not using the network.
+		 *	2: NETWORK_LOADING. downloading MediaElement data is downloading.
+		 *	3: NETWORK_NO_SOURCE. No MediaElement src found.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		static public const NETWORK_EMPTY:int = 0;
+		static public const NETWORK_IDLE:int = 1;
+		static public const NETWORK_LOADING:int = 2;
+		static public const NETWORK_NO_SOURCE:int = 3;
+
+		public function get networkState():uint
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).networkState;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/**
+     *  Whether the video is paused
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get paused():Boolean
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).paused;
+			}
+
+			COMPILE::SWF
+			{
+				return false;
+			}
+		}
+
+		/**
+		 *  1.0 is "normal speed," values lower than 1.0 make the media play slower than
+		 *  normal, higher values make it play faster.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get playbackRate():Number
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).playbackRate;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/**
+		 *  sets the rate at which the media is being played back. This is used
+		 *  to implement user controls for fast forward, slow motion, and so forth.
+		 *  The normal playback rate is multiplied by this value to obtain the current
+		 *  rate, so a value of 1.0 indicates normal speed.
+		 *
+		 *  If playbackRate is negative, the media is not played backwards.
+		 *
+		 *  The audio is muted when the fast forward or slow motion is outside
+		 *  a useful range (for example, Gecko mutes the sound outside the range 0.25 to 4.0)
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set playbackRate(value:Number):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).playbackRate = value;
+			}
+		}
+
+		/*COMPILE::JS
+		public function get preservesPitch():Boolean
+		{
+			return (element as HTMLMediaElement).preservesPitch;
+		}
+        
+        COMPILE::JS
+		public function set preservesPitch(value:Boolean):void
+		{
+			(element as HTMLMediaElement).preservesPitch = value;
+		}*/
+
+		/**
+		 *  indicates the readiness state of the media.
+		 *  Possible values are:
+		 *
+		 *  0 -> HAVE_NOTHING (No information is available about the media resource.)
+		 *  1 -> HAVE_METADATA (Enough of the media resource has been retrieved that the metadata attributes are initialized. Seeking will no longer raise an exception. )
+		 *  2 -> HAVE_CURRENT_DATA (Data is available for the current playback position, but not enough to actually play more than one frame.)
+		 *  3 -> HAVE_FUTURE_DATA (Data for the current playback position as well as for at least a little bit of time into the future is available (in other words, at least two frames of video, for example).)
+		 *  4 -> HAVE_ENOUGH_DATA (Enough data is available—and the download rate is high enough—that the media can be played through to the end without interruption. )
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get readyState():uint
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).readyState;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/**
+		 *  returns a TimeRanges object that represents the ranges of the media resource,
+		 *  if any, that the user agent is able to seek to at the time seekable property is accessed.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		COMPILE::JS
+		public function get seekable():TimeRanges
+		{
+			return (element as HTMLMediaElement).seekable;
+		}
+
+		/**
+		 *  returns a DOMString that is the unique ID of the audio device delivering output.
+		 *  If it is using the user agent default, it returns an empty string.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get sinkId():String
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).sinkId;
+			}
+
+			COMPILE::SWF
+			{
+				return null;
+			}
+		}
+
+		/**
+		 *  reflects the value of the media element's src attribute, which indicates the URL of a media resource to use in the element.
+		 *  The best way to know the URL of the media resource currently in active use in this element is to look at the value
+		 *  of the currentSrc attribute, which also takes into account selection of a best or preferred media resource from
+		 *  a list provided in an HTMLSourceElement (which represents a <source> element).
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get src():String
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).src;
+			}
+
+			COMPILE::SWF
+			{
+				return null;
+			}
+		}
+
+		/**
+		 *  set source.  TODO see use of <sources>
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set src(value:String):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).src = value;
+			}
+		}
+
+		COMPILE::SWF
+
+		private var _source:Object;
+
+		/**
+		 *  Stream object for Video
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.8
+		 */
+		public function get source():Object
+		{
+			COMPILE::SWF
+			{
+				return _source;
+			}
+
+			COMPILE::JS
+			{
+				return element["srcObject"];
+			}
+		}
+
+		public function set source(value:Object):void
+		{
+			COMPILE::SWF
+			{
+				_source = value;
+			}
+			COMPILE::JS
+			{
+				element["srcObject"] = value;
+			}
+		}
+
+		/**
+		 *  returns a TextTrackList object listing all of the TextTrack objects representing
+		 *  the media element's text tracks, in the same order as in the list of text tracks.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		COMPILE::JS
+
+		public function get textTracks():TextTrackList
+		{
+			return (element as HTMLMediaElement).textTracks;
+		}
+
+		/*COMPILE::JS
+		public function get videoTracks():VideoTrackList
+		{ 
+			return (element as HTMLMediaElement).videoTracks;
+		}*/
+
+		/**
+		 *  value between 0 and 1, where 0 is effectively muted and
+		 *  1 is the loudest possible value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function get volume():Number
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).volume;
+			}
+
+			COMPILE::SWF
+			{
+				return 0;
+			}
+		}
+
+		/**
+		 *  value must fall between 0 and 1, where 0 is effectively muted and
+		 *  1 is the loudest possible value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function set volume(value:Number):void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).volume = value;
+			}
+		}
+
+		/**
+		 *  reports how likely it is that the current browser will be able
+		 *  to play media of a given MIME type
+		 *
+		 *  Return value :
+		 * 	A string indicating how likely it is that the media can be played.
+		 *
+		 *  The string will be one of the following values:
+		 *
+		 *  probably
+		 *  Media of the type indicated by the mediaType parameter is probably
+		 *  playable on this device.
+		 *
+		 *  maybe
+		 *  Not enough information is available to determine for sure whether or not
+		 *  the media will play until playback is actually attempted.
+		 *
+		 *  "" (empty string)
+		 *  Media of the given type definitely can't be played on the current device.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function canPlayType(mediaType:String):String
+		{
+			COMPILE::JS
+			{
+				return (element as HTMLMediaElement).canPlayType(mediaType);
+			}
+
+			COMPILE::SWF
+			{
+				return null;
+			}
+		}
+
+		/**
+		 *  resets the media element to its initial state and begins the process
+		 *  of selecting a media source and loading the media in preparation for
+		 *  playback to begin at the beginning.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function load():void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).load();
+			}
+		}
+
+		/**
+		 *  pause playback of the media, if the media is already in a paused state this method will have no effect.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function pause():void
+		{
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).pause();
+			}
+		}
+
+		/**
+		 *  attempts to begin playback of the media. May be block by browser policy if not called in a user gesture event
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 0.0
+		 *  @playerversion AIR 0.0
+		 *  @productversion Royale 0.0
+		 */
+		public function play():void
+		{
+			/*TODO check for return value*/
+			COMPILE::JS
+			{
+				(element as HTMLMediaElement).play();
+			}
+		}
+		private static const MEDIA_EVENTS:Object = {
+				"abort": true,
+				"canplay": true,
+				"canplaythrough": true,
+				"durationchange": true,
+				"emptied": true,
+				"ended": true,
+				"error": true,
+				"loadeddata": true,
+				"loadedmetadata": true,
+				"loadstart": true,
+				"pause": true,
+				"play": true,
+				"playing": true,
+				"progress": true,
+				"ratechange": true,
+				"seeked": true,
+				"seeking": true,
+				"stalled": true,
+				"suspend": true,
+				"timeupdate": true,
+				"volumechange": true,
+				"waiting": true
+			};
+		
+		COMPILE::JS
+		override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
+		{
+			if (MEDIA_EVENTS[type])
+			{
+				goog.events.listen(element, type, handler, opt_capture ? {capture : true}: null);
+				return;
+			}
+			super.addEventListener(type, handler, opt_capture, opt_handlerScope);
+		}
+		
+		COMPILE::JS
+		override public function removeEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
+		{
+			if (MEDIA_EVENTS[type])
+			{
+				goog.events.unlisten(element, type, handler, opt_capture ? {capture : true}: null);
+				return;
+			}
+			super.removeEventListener(type, handler, opt_capture, opt_handlerScope);
+		}
+		
+		COMPILE::JS
+		override public function hasEventListener(type:String):Boolean
+		{
+			if (MEDIA_EVENTS[type])
+			{
+				return goog.events.hasListener(source, type);
+			}
+			return super.hasEventListener(type);
+		}
+		COMPILE::JS
+		/**
+		 * @royaleignorecoercion String
+		 */
+		override public function dispatchEvent(e:Object):Boolean
+		{
+			var isString:Boolean = e is String;
+			var type:String = isString ? e as String : e.type;
+			if (MEDIA_EVENTS[type])
+			{
+				if (isString)
+					e = new Event(type);
+
+				var orig:Object = e;
+				e = EventUtils.tagNativeEvent(EventUtils.createEvent(type, e["bubbles"]), orig);
+				orig.target = orig.currentTarget = this;
+				return (element as Object).dispatchEvent(e);
+			}
+			return super.dispatchEvent(e);
+		}
+
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/NodeElementBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/NodeElementBase.as
new file mode 100644
index 0000000000..7423cc8cf0
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/NodeElementBase.as
@@ -0,0 +1,301 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.support
+{
+	import org.apache.royale.style.StyleUIBase;
+
+	public class NodeElementBase extends StyleUIBase
+	{
+		public function NodeElementBase()
+		{
+			super();
+			typeNames = "";
+		}
+
+		override protected function requiresView():Boolean
+		{
+			return false;
+		}
+
+		override protected function requiresController():Boolean
+		{
+			return false;
+		}
+
+		// override protected function requiresLayout():Boolean
+		// {
+		// 	return false;
+		// }
+
+		COMPILE::SWF
+		{
+			private var _nodeValue:String;
+		}
+		public function get nodeValue():String
+		{
+			COMPILE::SWF
+			{
+				return _nodeValue;
+			}
+
+			COMPILE::JS
+			{
+				return element.nodeValue;
+			}
+		}
+
+		public function set nodeValue(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_nodeValue = value;
+			}
+
+			COMPILE::JS
+			{
+				element.nodeValue = value;
+			}
+		
+		}
+
+		public function get class():String
+		{
+			COMPILE::SWF
+			{
+				return "";
+			}
+
+			COMPILE::JS
+			{
+				return element.getAttribute("class");
+			}
+		}
+
+		public function set class(value:String):void
+		{
+			COMPILE::JS
+			{
+				element.setAttribute("class",value);
+			}
+		}
+
+		public function get contentEditable():String
+		{
+			COMPILE::SWF
+			{
+				return "false";
+			}
+			COMPILE::JS
+			{
+				return element.contentEditable;
+			}
+		}
+
+		[Inspectable(category="General", enumeration="true,false,inherit", defaultValue="inherit")]
+		public function set contentEditable(value:String):void
+		{
+			COMPILE::JS
+			{
+				element.contentEditable = value;
+			}
+		}
+
+		public function get isContentEditable():Boolean
+		{
+			COMPILE::SWF
+			{
+				return false;
+			}
+			COMPILE::JS
+			{
+				return element.isContentEditable;
+			}
+		}
+
+		public function set isContentEditable(value:Boolean):void
+		{
+			COMPILE::JS
+			{
+				element.isContentEditable = value;
+			}
+		}
+		/**
+		 * The direction of the element.
+		 */
+		public function get dir():String
+		{
+			COMPILE::SWF
+			{
+				return "";
+			}
+
+			COMPILE::JS
+			{
+				return element.dir;
+			}
+		}
+
+		[Inspectable(category="General", enumeration="ltr,rtl,auto", defaultValue="auto")]
+		public function set dir(value:String):void
+		{
+			COMPILE::JS
+			{
+				element.dir = value;
+			}
+		}
+
+		COMPILE::SWF
+		private var _hidden:Boolean;
+
+		/**
+		 * Indicates whether the element is hidden or not.
+		 */
+		public function get hidden():Boolean
+		{
+			COMPILE::SWF
+			{
+				return _hidden;
+			}
+			COMPILE::JS
+			{
+				return element.hidden;
+			}
+		}
+
+		public function set hidden(value:Boolean):void
+		{
+			COMPILE::SWF
+			{
+				_hidden = value;
+			}
+			COMPILE::JS
+			{
+				element.hidden = value;
+			}
+		}
+		/**
+		 * Represents the "rendered" text content of a node and its descendants.
+		 * As a getter, it approximates the text the user would get if they highlighted the contents
+		 * of the element with the cursor and then copied it to the clipboard.
+		 */
+		COMPILE::SWF
+		private var _innerText:String;
+
+		public function get innerText():String
+		{
+			COMPILE::SWF{
+				return _innerText;
+			}
+			COMPILE::JS
+			{
+				return element.innerText;
+			}
+		}
+
+		public function set innerText(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_innerText = value;				
+			}
+			COMPILE::JS
+			{
+				element.innerText = value;
+			}
+		}
+		COMPILE::SWF
+		private var _lang:String;
+		/**
+		 * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang
+		 */
+		public function get lang():String
+		{
+			COMPILE::SWF
+			{
+				return _lang;
+			}
+			
+			COMPILE::JS
+			{
+				return element.lang;
+			}
+		}
+
+		public function set lang(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_lang = value;
+			}
+
+			COMPILE::JS
+			{
+				element.lang = value;
+			}
+		}
+		COMPILE::SWF
+		private var _title:String;
+
+		public function get title():String
+		{
+			COMPILE::SWF
+			{
+				return _title;
+			}
+
+			COMPILE::JS
+			{
+				return element.title;
+			}
+		}
+
+		public function set title(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_title = value;
+			}
+
+			COMPILE::JS
+			{
+				element.title = value;
+			}
+		}
+
+		COMPILE::SWF
+		override public function get tabIndex():int{
+			return super.tabIndex;
+		}
+		COMPILE::SWF
+		override public function set tabIndex(value:int):void{
+			super.tabIndex = value;
+		}
+
+		COMPILE::JS
+		public function get tabIndex():int
+		{
+			return element.tabIndex;
+		}
+		COMPILE::JS
+		public function set tabIndex(value:int):void
+		{
+			element.tabIndex = value;
+		}
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/TextNode.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/TextNode.as
new file mode 100644
index 0000000000..ebaf54242d
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/TextNode.as
@@ -0,0 +1,82 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.support
+{
+
+	COMPILE::JS
+	{
+		import org.apache.royale.core.WrappedHTMLElement;
+	}
+
+	[DefaultProperty("text")]
+
+	/**
+	 *  The TextNode class represents an HTML Text node element
+	 *
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class TextNode extends NodeElementBase
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function TextNode()
+		{
+			super();
+		}
+
+		/**
+		 *  The text of the heading
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get text():String
+		{
+			return nodeValue;
+		}
+
+		public function set text(value:String):void
+		{
+			nodeValue = value;
+		}
+
+		COMPILE::JS
+		override protected function createElement():WrappedHTMLElement
+		{
+			// We're actually lying a bit about the type considering that Text
+			// inherits from CharacterData and not HTMLElement, but the important
+			// bit from our perspective is that it's a Node and has a royale_wrapper.
+			element = document.createTextNode("") as WrappedHTMLElement;
+			return element;
+		}
+	}
+}
diff --git a/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/TextNodeContainerBase.as b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/TextNodeContainerBase.as
new file mode 100644
index 0000000000..ba5e35b889
--- /dev/null
+++ b/frameworks/projects/Style/src/main/royale/org/apache/royale/style/support/TextNodeContainerBase.as
@@ -0,0 +1,100 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package org.apache.royale.style.support
+{
+
+	[DefaultProperty("mxmlContent|innerHTML")]
+
+	public class TextNodeContainerBase extends NodeElementBase
+	{
+		public function TextNodeContainerBase()
+		{
+			super();
+		}
+
+		private var _text:String = "";
+
+		/**
+		 *  The text of the element
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get text():String
+		{
+			return _text;
+		}
+		public function set text(value:String):void
+		{
+			_text = value;
+
+			COMPILE::JS
+			{
+				if (textNode == null)
+				{
+					textNode = document.createTextNode('') as Text;
+					element.appendChild(textNode);
+				}
+
+				textNode.nodeValue = value;
+			}
+		}
+
+		COMPILE::JS
+		protected var textNode:Text;
+
+		COMPILE::SWF
+		private var _html:String = "";
+
+		/**
+		 *  Sets the HTML of the Div
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9
+		 */
+		public function get innerHTML():String
+		{
+			COMPILE::SWF
+			{
+				return _html;
+			}
+			COMPILE::JS
+			{
+				return element.innerHTML;
+			}
+		}
+		public function set innerHTML(value:String):void
+		{
+			COMPILE::SWF
+			{
+				_html = value;
+			}
+
+			COMPILE::JS
+			{
+				element.innerHTML = value;
+			}
+		}
+
+	}
+}
\ No newline at end of file