You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2018/03/12 21:10:10 UTC

[royale-asjs] branch feature/jewel-ui-set created (now d6bcaae)

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

carlosrovira pushed a change to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.


      at d6bcaae  redo branch due to mistake in the rebase

This branch includes the following new commits:

     new d6bcaae  redo branch due to mistake in the rebase

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.


-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.

[royale-asjs] 01/01: redo branch due to mistake in the rebase

Posted by ca...@apache.org.
This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch feature/jewel-ui-set
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git

commit d6bcaae0c5b68fa300068282a2a6586715ce555e
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Mon Mar 12 22:10:01 2018 +0100

    redo branch due to mistake in the rebase
---
 examples/royale/JewelExample/.vscode/launch.json   |  21 ++
 examples/royale/JewelExample/.vscode/settings.json |   3 +
 examples/royale/JewelExample/.vscode/tasks.json    |   8 +
 examples/royale/JewelExample/README.txt            |  26 ++
 examples/royale/JewelExample/asconfig.json         |  31 ++
 examples/royale/JewelExample/build.xml             |  68 ++++
 examples/royale/JewelExample/pom.xml               | 102 ++++++
 .../src/main/config/compile-app-config.xml         |  28 ++
 .../src/main/resources/jewel-example-styles.css    |  25 ++
 .../royale/JewelExample/src/main/royale/App.mxml   |  40 +++
 .../src/main/royale/ButtonPlayGround.mxml          |  71 +++++
 .../src/main/royale/TextInputPlayGround.mxml       |  30 ++
 examples/royale/pom.xml                            |   1 +
 frameworks/projects/Jewel/.vscode/launch.json      |  21 ++
 frameworks/projects/Jewel/.vscode/settings.json    |   3 +
 frameworks/projects/Jewel/.vscode/tasks.json       |   8 +
 frameworks/projects/Jewel/asconfig.json            |  34 ++
 frameworks/projects/Jewel/build.xml                | 130 ++++++++
 .../royale => frameworks/projects/Jewel}/pom.xml   | 151 ++++-----
 .../Jewel/src/main/config/compile-swf-config.xml   | 105 +++++++
 .../projects/Jewel/src/main/resources/defaults.css |  70 +++++
 .../Jewel/src/main/resources/jewel-as-manifest.xml |  25 ++
 .../Jewel/src/main/resources/jewel-manifest.xml    |  37 +++
 .../projects/Jewel/src/main/resources/jewel.css    |  63 ++++
 .../projects/Jewel/src/main/royale/JewelClasses.as |  45 +++
 .../royale/org/apache/royale/jewel/Application.as  |  70 +++++
 .../main/royale/org/apache/royale/jewel/Button.as  | 165 ++++++++++
 .../royale/org/apache/royale/jewel/RadioButton.as  | 107 +++++++
 .../main/royale/org/apache/royale/jewel/Slider.as  |  72 +++++
 .../royale/org/apache/royale/jewel/TextButton.as   | 129 ++++++++
 .../royale/org/apache/royale/jewel/TextField.as    | 115 +++++++
 .../org/apache/royale/jewel/beads/Disabled.as      | 107 +++++++
 .../apache/royale/jewel/beads/RadioButtonView.as   | 286 +++++++++++++++++
 .../apache/royale/jewel/beads/SliderThumbView.as   | 121 ++++++++
 .../apache/royale/jewel/beads/SliderTrackView.as   | 121 ++++++++
 .../org/apache/royale/jewel/beads/SliderView.as    | 172 +++++++++++
 .../royale/jewel/beads/layouts/HorizontalLayout.as | 196 ++++++++++++
 .../royale/jewel/beads/layouts/VerticalLayout.as   | 193 ++++++++++++
 .../layouts/VerticalLayoutWithPaddingAndGap.as     | 341 +++++++++++++++++++++
 .../royale/jewel/supportClasses/ITextField.as      |  68 ++++
 .../royale/jewel/supportClasses/RadioButtonIcon.as | 117 +++++++
 .../royale/jewel/supportClasses/TextFieldBase.as   | 154 ++++++++++
 .../projects/Jewel/src/main/sass/_global.sass      |  66 ++++
 frameworks/projects/Jewel/src/main/sass/jewel.sass |  35 +++
 frameworks/projects/pom.xml                        |   1 +
 frameworks/themes/JewelTheme/.vscode/launch.json   |  21 ++
 frameworks/themes/JewelTheme/.vscode/settings.json |   3 +
 frameworks/themes/JewelTheme/.vscode/tasks.json    |   8 +
 frameworks/themes/JewelTheme/asconfig.json         |  34 ++
 frameworks/themes/JewelTheme/build.xml             | 133 ++++++++
 frameworks/themes/JewelTheme/pom.xml               |  88 ++++++
 .../src/main/config/compile-swf-config.xml         |  90 ++++++
 .../src/main/resources/assets/JewelButton2.svg     |  44 +++
 .../src/main/resources/assets/jewel-button.svg     |  37 +++
 .../src/main/resources/royale-jewel-blue.css       | 263 ++++++++++++++++
 .../src/main/resources/royale-jewel-red.css        | 263 ++++++++++++++++
 .../src/main/royale/JewelThemeClasses.as           |  36 +++
 .../apache/royale/jewel/JewelThemeFontInject.as    |  46 +++
 .../themes/JewelTheme/src/main/sass/_button.sass   |  73 +++++
 .../JewelTheme/src/main/sass/_functions.sass       |  18 ++
 .../themes/JewelTheme/src/main/sass/_global.sass   |  32 ++
 .../themes/JewelTheme/src/main/sass/_mixins.sass   |  43 +++
 .../JewelTheme/src/main/sass/_textbutton.sass      |  64 ++++
 .../JewelTheme/src/main/sass/_textfield.sass       |  67 ++++
 .../JewelTheme/src/main/sass/_variables.sass       |  31 ++
 .../src/main/sass/colors/_blue-color-palette.sass  |  26 ++
 .../src/main/sass/colors/_red-color-palette.sass   |  26 ++
 .../src/main/sass/royale-jewel-blue.sass           |  36 +++
 .../JewelTheme/src/main/sass/royale-jewel-red.sass |  36 +++
 frameworks/themes/pom.xml                          |   1 +
 70 files changed, 5217 insertions(+), 84 deletions(-)

diff --git a/examples/royale/JewelExample/.vscode/launch.json b/examples/royale/JewelExample/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chrome against debug.html, with sourcemaps",
+            "type": "chrome",
+            "request": "launch",
+            "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+            "sourceMaps": true,
+            "preLaunchTask": "mvn"
+        },
+        {
+            "name": "Launch Firefox against debug.html, with sourcemaps",
+            "type": "firefox",
+            "request": "launch",
+            "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+            "sourceMaps": true,
+            "preLaunchTask": "mvn"
+        }
+    ]
+}
diff --git a/examples/royale/JewelExample/.vscode/settings.json b/examples/royale/JewelExample/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/.vscode/tasks.json b/examples/royale/JewelExample/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/examples/royale/JewelExample/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+	// for the documentation about the tasks.json format
+	"version": "0.1.0",
+	"command": "mvn",
+	"args": ["clean", "install", "-DskipTests"],
+	"isShellCommand": true,
+	"showOutput": "always"
+}
\ No newline at end of file
diff --git a/examples/royale/JewelExample/README.txt b/examples/royale/JewelExample/README.txt
new file mode 100644
index 0000000..7b84b3a
--- /dev/null
+++ b/examples/royale/JewelExample/README.txt
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+DESCRIPTION
+
+The JewelExample is demo app to customize styles on Royale components
+
+Right now this is a starter project with only a button to start developing styles
+
+
diff --git a/examples/royale/JewelExample/asconfig.json b/examples/royale/JewelExample/asconfig.json
new file mode 100644
index 0000000..4b6259e
--- /dev/null
+++ b/examples/royale/JewelExample/asconfig.json
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+{
+    "config": "royale",
+    "compilerOptions": {
+        "debug": false,
+        "targets": ["JSRoyale","SWF"],
+        "source-map": true
+    },
+    "additionalOptions": "-remove-circulars -js-output-optimization=skipAsCoercions",
+    "files":
+    [
+        "src/main/royale/App.mxml"
+    ]
+}
diff --git a/examples/royale/JewelExample/build.xml b/examples/royale/JewelExample/build.xml
new file mode 100644
index 0000000..b0cb3d3
--- /dev/null
+++ b/examples/royale/JewelExample/build.xml
@@ -0,0 +1,68 @@
+<?xml version="1.0"?>
+<!--
+
+  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.
+
+-->
+
+
+<project name="JewelExample" default="main" basedir=".">
+    <property name="ROYALE_HOME" location="../../.."/>
+    <property name="example" value="App" />
+    
+    <property file="${ROYALE_HOME}/env.properties"/>
+    <property environment="env"/>
+    <property file="${ROYALE_HOME}/build.properties"/>
+    <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+
+    <include file="${basedir}/../../build_example.xml" />
+    
+    <target name="main" depends="clean,build_example.compile" description="Clean build of ${example}">
+        <mkdir dir="${basedir}/bin/js-debug/assets" />
+        <copy todir="${basedir}/bin/js-debug/assets" failonerror="false">
+            <fileset dir="${basedir}/src/main/resources/assets">
+                <include name="**" />
+            </fileset>
+        </copy>
+        <mkdir dir="${basedir}/bin/js-release/assets" />
+        <copy todir="${basedir}/bin/js-release/assets" failonerror="false">
+            <fileset dir="${basedir}/src/main/resources/assets">
+                <include name="**" />
+            </fileset>
+        </copy>
+        <replace file="${basedir}/bin/js-debug/index.html" token="${primary}" value="indigo" />
+        <replace file="${basedir}/bin/js-debug/index.html" token="${accent}" value="pink" />
+        <replace file="${basedir}/bin/js-release/index.html" token="${primary}" value="indigo" />
+        <replace file="${basedir}/bin/js-release/index.html" token="${accent}" value="pink" />
+    </target>
+    
+    <target name="clean">
+        <delete dir="${basedir}/bin" failonerror="false" />
+        <delete dir="${basedir}/bin-debug" failonerror="false" />
+        <delete dir="${basedir}/bin-release" failonerror="false" />
+        <delete dir="${basedir}/target" failonerror="false" />
+    </target>
+
+    <target name="examine" depends="build_example.get.browser">
+        <property name="which" value="debug" />
+        <echo message="See various team members."/>
+        <exec executable="${browser}" dir="${basedir}/bin/js-${which}" failonerror="true">
+            <arg value="${basedir}/bin/js-${which}/index.html"/>
+        </exec>
+    </target>
+
+
+</project>
diff --git a/examples/royale/JewelExample/pom.xml b/examples/royale/JewelExample/pom.xml
new file mode 100644
index 0000000..e71767e
--- /dev/null
+++ b/examples/royale/JewelExample/pom.xml
@@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+
+  <parent>
+    <groupId>org.apache.royale.examples</groupId>
+    <artifactId>examples-royale</artifactId>
+    <version>0.9.3-SNAPSHOT</version>
+  </parent>
+
+  <artifactId>JewelExample</artifactId>
+  <version>0.9.3-SNAPSHOT</version>
+  <packaging>swf</packaging>
+
+  <name>Apache Royale: Examples: Royale: JewelExample</name>
+
+  <properties>
+    <!-- Customize Jewel colors  -->
+    <primary>red</primary>
+    <secondary>grey</secondary>
+  </properties>
+
+  <build>
+    <sourceDirectory>src/main/royale</sourceDirectory>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.royale.compiler</groupId>
+        <artifactId>royale-maven-plugin</artifactId>
+        <extensions>true</extensions>
+        <configuration>
+          <mainClass>App.mxml</mainClass>
+          <targets>JSRoyale,SWF</targets>
+          <!--<htmlTemplate>${basedir}/target/javascript/bin/js-debug/jewel-js-index-template.html</htmlTemplate>-->
+        </configuration>
+      </plugin>
+    </plugins>
+  </build>
+
+  <dependencies>
+    <dependency>
+      <groupId>com.adobe.flash.framework</groupId>
+      <artifactId>playerglobal</artifactId>
+      <version>${flash.version}</version>
+      <type>swc</type>
+      <scope>provided</scope>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Jewel</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>swf</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Jewel</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Basic</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>HTML</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>swf</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>JewelTheme</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <scope>theme</scope>
+    </dependency>
+  </dependencies>
+
+</project>
diff --git a/examples/royale/JewelExample/src/main/config/compile-app-config.xml b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
new file mode 100644
index 0000000..df6ea5b
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/config/compile-app-config.xml
@@ -0,0 +1,28 @@
+<!--
+
+  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.
+
+-->
+<royale-config>
+    <js-output-optimization>
+        <optimization>skipAsCoercions</optimization>
+    </js-output-optimization>
+    <compiler>
+        <theme>
+            <filename>../../../../../../frameworks/libs/JewelTheme.swc</filename>
+        </theme>
+    </compiler>
+</royale-config>
diff --git a/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
new file mode 100644
index 0000000..48829b3
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/resources/jewel-example-styles.css
@@ -0,0 +1,25 @@
+/*
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+*/
+
+@namespace "http://www.w3.org/1999/xhtml";
+
+
+
diff --git a/examples/royale/JewelExample/src/main/royale/App.mxml b/examples/royale/JewelExample/src/main/royale/App.mxml
new file mode 100644
index 0000000..3d41276
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/App.mxml
@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!---
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+-->
+<j:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
+			   xmlns:j="library://ns.apache.org/royale/jewel"
+			   xmlns:js="library://ns.apache.org/royale/basic"
+			   xmlns:local="*">
+
+	<fx:Style source="../../main/resources/jewel-example-styles.css"/>
+	
+	<js:valuesImpl>
+		<js:SimpleCSSValuesImpl />
+	</js:valuesImpl>
+	<js:initialView>
+		<js:View>
+			<js:beads>
+				<js:HorizontalLayout />
+			</js:beads>
+			<local:ButtonPlayGround/>
+			<local:TextInputPlayGround/>
+        </js:View>
+	</js:initialView>
+</j:Application>
diff --git a/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
new file mode 100644
index 0000000..5ca13a1
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/ButtonPlayGround.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+		  xmlns:js="library://ns.apache.org/royale/basic"
+		  xmlns:j="library://ns.apache.org/royale/jewel">
+    
+	<fx:Script>
+		<![CDATA[
+        private function onValueChange(event:Event):void
+        {
+        	button.width = slider.value;
+			button.height = slider_v.value;
+        }
+    	]]>
+	</fx:Script>
+
+	<js:beads>
+		<js:VerticalLayoutWithPaddingAndGap gap="10"/>
+	</js:beads>
+	
+	<js:Label text="Basic"/>
+	<js:Button/>
+	<js:TextButton text="Basic"/>
+
+	<js:Label text="Jewel Button"/>
+	<j:Button primary="true"/>
+
+	<js:Label text="Jewel TextButton"/>
+	
+	<j:TextButton text="DEFAULT"/>
+
+	<j:TextButton text="Button With More Text"/>
+
+	<j:TextButton text="PRIMARY" primary="true"/>
+
+	<j:TextButton text="SECONDARY" secondary="true"/>
+
+	<j:TextButton text="EMPHASIZED" emphasized="true"/>
+
+	<j:TextButton text="Disabled" primary="true">
+		<j:beads>
+			<j:Disabled/>
+		</j:beads>
+	</j:TextButton>
+
+	<js:Label text="Jewel Button Sizing (respect min values)"/>
+	<j:Slider id="slider" width="250" value="100" minimum="0" maximum="500"
+				valueChange="onValueChange(event)"/>
+	<j:Slider id="slider_v" width="250" value="40" minimum="0" maximum="300"
+				valueChange="onValueChange(event)"/>
+
+	<j:TextButton id="button" text="Button" width="100" height="40" primary="true"/>
+
+</js:Group>
diff --git a/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
new file mode 100644
index 0000000..aa8c81a
--- /dev/null
+++ b/examples/royale/JewelExample/src/main/royale/TextInputPlayGround.mxml
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+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.
+
+-->
+<js:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
+		  xmlns:js="library://ns.apache.org/royale/basic"
+		  xmlns:j="library://ns.apache.org/royale/jewel">
+    
+	
+	
+	<j:TextField text="Text Input" width="120" height="40"/>
+
+	<j:RadioButton/>
+
+</js:Group>
diff --git a/examples/royale/pom.xml b/examples/royale/pom.xml
index e65f9df..2cc511e 100644
--- a/examples/royale/pom.xml
+++ b/examples/royale/pom.xml
@@ -71,6 +71,7 @@
     <module>DataBindingExampleWithFlexLayout</module>
     <module>DragAndDropExample</module>
     <module>AlertExample</module>
+    <module>JewelExample</module>
   </modules>
 
   <build>
diff --git a/frameworks/projects/Jewel/.vscode/launch.json b/frameworks/projects/Jewel/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chrome against debug.html, with sourcemaps",
+            "type": "chrome",
+            "request": "launch",
+            "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+            "sourceMaps": true,
+            "preLaunchTask": "mvn"
+        },
+        {
+            "name": "Launch Firefox against debug.html, with sourcemaps",
+            "type": "firefox",
+            "request": "launch",
+            "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+            "sourceMaps": true,
+            "preLaunchTask": "mvn"
+        }
+    ]
+}
diff --git a/frameworks/projects/Jewel/.vscode/settings.json b/frameworks/projects/Jewel/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/.vscode/tasks.json b/frameworks/projects/Jewel/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/frameworks/projects/Jewel/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+	// for the documentation about the tasks.json format
+	"version": "0.1.0",
+	"command": "mvn",
+	"args": ["clean", "install", "-DskipTests"],
+	"isShellCommand": true,
+	"showOutput": "always"
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/asconfig.json b/frameworks/projects/Jewel/asconfig.json
new file mode 100644
index 0000000..f4421c7
--- /dev/null
+++ b/frameworks/projects/Jewel/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+ {
+    "config": "royale",
+    "type": "lib",
+    "compilerOptions": {
+        "debug": true,
+        "targets": [
+            "JSRoyale",
+            "SWF"
+        ],
+        "include-classes": [
+            "JewelClasses"
+        ],
+        "include-sources": [
+            "src/main/royale"
+        ],
+        "output": "target/Jewel.swc"
+    }
+}
diff --git a/frameworks/projects/Jewel/build.xml b/frameworks/projects/Jewel/build.xml
new file mode 100644
index 0000000..5ad2877
--- /dev/null
+++ b/frameworks/projects/Jewel/build.xml
@@ -0,0 +1,130 @@
+<?xml version="1.0"?>
+<!--
+
+  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.
+
+-->
+
+
+<project name="Jewel" default="main" basedir=".">
+    <property name="ROYALE_HOME" location="../../.."/>
+    
+    <property file="${ROYALE_HOME}/env.properties"/>
+    <property environment="env"/>
+    <property file="${ROYALE_HOME}/build.properties"/>
+    <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+    
+    <property name="target.name" value="${ant.project.name}.swc" />
+    
+    <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+    </target>
+    
+    <target name="compile-js">
+        <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+            <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+            <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+            <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+        </ant>
+    </target>
+    
+    <target name="copy-swc" if="env.AIR_HOME">
+        <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+    </target>
+    
+    <target name="check-for-tests" >
+        <condition property="skip-tests" >
+            <not>
+                <available file="${basedir}/src/test/royale/build.xml" />
+            </not>
+        </condition>
+    </target>
+    
+    <target name="test" depends="check-for-tests" unless="skip-tests">
+        <ant dir="src/test/royale" />
+    </target>
+    
+    <target name="clean">
+        <delete failonerror="false">
+            <fileset dir="${ROYALE_HOME}/frameworks/libs">
+                <include name="${target.name}"/>
+            </fileset>
+        </delete>
+        <delete failonerror="false" includeemptydirs="true">
+            <fileset dir="${basedir}/target">
+                <include name="**/**"/>
+            </fileset>
+        </delete>
+        <antcall target="clean-tests" />
+    </target>
+    
+    <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+        <ant dir="src/test/royale" target="clean"/>
+    </target>
+    
+    <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+        <echo message="Compiling libs/${ant.project.name}.swc"/>
+        <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+        <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+        <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+        
+        <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+            <jvmarg value="-Xmx384m" />
+            <jvmarg value="-Dsun.io.useCanonCaches=false" />
+            <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+            <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+            <arg value="+playerglobal.version=${playerglobal.version}" />
+            <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+            <arg value="-compiler.strict-xml=true" />
+            <arg value="-compiler.targets=SWF,JSRoyale" />
+            <arg value="-output=${basedir}/target/${target.name}" />
+            <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+            <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+            <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+        </java>
+    </target>
+    
+    <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+        <path id="lib.path">
+            <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+        </path>
+        <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+    </target>
+    
+    <target name="check-compiler-home"
+        description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+        
+        <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+        type="file"
+        property="ROYALE_SWF_COMPILER_HOME"
+        value="${ROYALE_HOME}"/>
+        
+        <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+        unless="ROYALE_SWF_COMPILER_HOME"/>
+    </target>
+    
+    <target name="check-transpiler-home"
+        description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+        
+        <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+        type="file"
+        property="ROYALE_COMPILER_HOME"
+        value="${ROYALE_HOME}/js"/>
+        
+        <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+        unless="ROYALE_COMPILER_HOME"/>
+    </target>
+    
+</project>
diff --git a/examples/royale/pom.xml b/frameworks/projects/Jewel/pom.xml
similarity index 56%
copy from examples/royale/pom.xml
copy to frameworks/projects/Jewel/pom.xml
index e65f9df..74e2bd2 100644
--- a/examples/royale/pom.xml
+++ b/frameworks/projects/Jewel/pom.xml
@@ -17,88 +17,79 @@
   limitations under the License.
 
 -->
-<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
 
   <parent>
-    <groupId>org.apache.royale.examples</groupId>
-    <artifactId>examples</artifactId>
+    <groupId>org.apache.royale.framework</groupId>
+    <artifactId>projects</artifactId>
     <version>0.9.3-SNAPSHOT</version>
   </parent>
 
-  <artifactId>examples-royale</artifactId>
+  <artifactId>Jewel</artifactId>
   <version>0.9.3-SNAPSHOT</version>
-  <packaging>pom</packaging>
+  <packaging>swc</packaging>
 
-  <name>Apache Royale: Examples: Royale</name>
-
-  <modules>
-    <module>AccordionExample</module>
-    <module>ASDoc</module>
-    <module>ChartExample</module>
-    <module>CordovaCameraExample</module>
-    <module>CreateJSExample</module>
-    <module>DataBindingExample</module>
-    <module>DataBindingExample_as</module><!-- Flash error -->
-    <module>DataBindingExample_Flat</module>
-    <module>DataGridExample</module>
-    <module>DateControlsExample</module>
-    <module>DesktopMap</module>
-    <module>Flex2Royale</module>
-    <module>RoyaleStore</module>
-    <module>RoyaleStore_jquery</module>
-    <module>RoyaleTeamPage_MDL</module>
-    <module>RoyaleWebsite</module>
-    <module>RoyaleWebsiteStatsViewer</module>
-    <module>HelloWorld</module>
-    <module>HTMLElements</module>
-    <module>ListExample</module>
-    <module>MapSearch</module>
-    <module>MDLDynamicTabsExample</module>
-    <module>MDLDynamicTableExample</module>
-    <module>ModuleExample</module>
-    <module>MobileMap</module>
-    <module>MobileStocks</module>
-    <module>MobileTrader</module>
-    <module>RemoteObjectAMFTest</module>
-    <module>StorageExample</module>
-    <module>StyleExample</module>
-    <module>TeamPage</module>
-    <module>TodoListSampleApp</module>
-    <module>TreeExample</module>
-    <module>TableExample</module>
-    <module>DebuggingExample</module>
-    <module>DataBindingExampleWithFlexLayout</module>
-    <module>DragAndDropExample</module>
-    <module>AlertExample</module>
-  </modules>
+  <name>Apache Royale: Framework: Libs: Jewel</name>
 
   <build>
+    <sourceDirectory>src/main/royale</sourceDirectory>
     <plugins>
       <plugin>
-        <groupId>org.apache.maven.plugins</groupId>
-        <artifactId>maven-surefire-plugin</artifactId>
-        <version>2.19.1</version>
+        <groupId>org.apache.royale.compiler</groupId>
+        <artifactId>royale-maven-plugin</artifactId>
+        <version>${royale.compiler.version}</version>
+        <extensions>true</extensions>
+        <configuration>
+          <namespaces>
+            <namespace>
+              <uri>library://ns.apache.org/royale/jewel</uri>
+              <manifest>${project.basedir}/src/main/resources/jewel-manifest.xml</manifest>
+            </namespace>
+            <namespace>
+              <type>as</type>
+              <uri>library://ns.apache.org/royale/jewel</uri>
+              <manifest>${project.basedir}/src/main/resources/jewel-as-manifest.xml</manifest>
+            </namespace>
+          </namespaces>
+          <includeClasses>
+            <includeClass>JewelClasses</includeClass>
+          </includeClasses>
+          <includeFiles>
+            <include-file>
+              <name>jewel.css</name>
+              <path>../src/main/resources/jewel.css</path>
+            </include-file>
+          </includeFiles>
+          <includeLookupOnly>true</includeLookupOnly>
+          <!--<allowSubclassOverrides>true</allowSubclassOverrides>-->
+          <skipExtern>true</skipExtern>
+          <!--<additionalCompilerOptions>-compiler.fxg-base-class=flash.display.Sprite</additionalCompilerOptions>-->
+        </configuration>
+      </plugin>
+      <plugin>
+        <groupId>nl.geodienstencentrum.maven</groupId>
+        <artifactId>sass-maven-plugin</artifactId>
+        <version>3.5.2</version>
+        <configuration>
+          <resources>
+              <resource>
+                  <source>
+                      <directory>${basedir}/src/main/sass</directory>
+                      <includes>
+                          <include>**/*.sass</include>
+                      </includes>
+                  </source>
+                  <destination>${basedir}/src/main/resources</destination>
+              </resource>
+          </resources>
+        </configuration>
         <executions>
           <execution>
-            <id>tests-default</id>
-            <phase>integration-test</phase>
-            <goals>
-              <goal>test</goal>
-            </goals>
-            <configuration>
-              <!-- Run the tests from the 'examples-tests' artifact -->
-              <dependenciesToScan>
-                <dependency>org.apache.royale.examples:examples-tests</dependency>
-              </dependenciesToScan>
-              <systemPropertyVariables>
-                <artifactId>${project.artifactId}</artifactId>
-                <version>${project.version}</version>
-                <type>${project.packaging}</type>
-                <targets>${project.build.plugins.plugin.configuration.targets}</targets>
-                <buildDirectory>${project.build.directory}</buildDirectory>
-              </systemPropertyVariables>
-            </configuration>
+              <id>generate-css-using-sass</id>
+              <goals>
+                  <goal>update-stylesheets</goal>
+              </goals>
           </execution>
         </executions>
       </plugin>
@@ -122,28 +113,28 @@
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>Language</artifactId>
+      <artifactId>Binding</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>swf</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>Language</artifactId>
+      <artifactId>Binding</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>js</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>HTML</artifactId>
+      <artifactId>Graphics</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>swf</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>HTML</artifactId>
+      <artifactId>Graphics</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>js</classifier>
@@ -164,40 +155,32 @@
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>Binding</artifactId>
+      <artifactId>Basic</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>swf</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>Binding</artifactId>
+      <artifactId>Basic</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>js</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>Graphics</artifactId>
+      <artifactId>HTML</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>swf</classifier>
     </dependency>
     <dependency>
       <groupId>org.apache.royale.framework</groupId>
-      <artifactId>Graphics</artifactId>
+      <artifactId>HTML</artifactId>
       <version>0.9.3-SNAPSHOT</version>
       <type>swc</type>
       <classifier>js</classifier>
     </dependency>
-
-    <!-- Import the shared unit-tests we want to run on all examples -->
-    <dependency>
-      <groupId>org.apache.royale.examples</groupId>
-      <artifactId>examples-tests</artifactId>
-      <version>0.9.3-SNAPSHOT</version>
-      <scope>test</scope>
-    </dependency>
   </dependencies>
 
 </project>
diff --git a/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml b/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..4c2f19e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/config/compile-swf-config.xml
@@ -0,0 +1,105 @@
+<!--
+
+  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.
+
+-->
+<royale-config>
+
+    <compiler>
+        <accessible>false</accessible>
+        
+        <!-- build both SWF and JS. -->
+        <targets>
+            <target>JSRoyale</target>
+        </targets>
+        <strict-xml>true</strict-xml>
+
+        <external-library-path>
+            <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+            <path-element>../../../../../libs/Binding.swc</path-element>
+            <path-element>../../../../../libs/Core.swc</path-element>
+            <path-element>../../../../../libs/Graphics.swc</path-element>
+            <path-element>../../../../../libs/Basic.swc</path-element>
+            <path-element>../../../../../libs/Collections.swc</path-element>
+            <path-element>../../../../../libs/HTML.swc</path-element>
+        </external-library-path>
+        
+        <allow-subclass-overrides>true</allow-subclass-overrides>
+		<mxml>
+			<children-as-data>true</children-as-data>
+		</mxml>
+		<binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+		<binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+		<binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+        <define>
+            <name>COMPILE::SWF</name>
+            <value>true</value>
+        </define>
+        <define>
+            <name>COMPILE::JS</name>
+            <value>false</value>
+        </define>
+
+        <keep-as3-metadata>
+          <name>Bindable</name>
+          <name>Managed</name>
+          <name>ChangeEvent</name>
+          <name>NonCommittingChangeEvent</name>
+          <name>Transient</name>
+        </keep-as3-metadata>
+	  
+        <locale/>
+        
+        <library-path/>
+
+        <namespaces>
+            <namespace>
+                <uri>library://ns.apache.org/royale/jewel</uri>
+                <manifest>../resources/jewel-manifest.xml</manifest>
+            </namespace>
+            <namespace>
+                <uri>library://ns.apache.org/royale/jewel</uri>
+                <manifest>../resources/jewel-as-manifest.xml</manifest>
+            </namespace>
+        </namespaces>
+        
+        <source-path>
+            <path-element>../royale</path-element>
+        </source-path>
+        
+        <warn-no-constructor>false</warn-no-constructor>
+    </compiler>
+    
+    <include-file>
+        <name>defaults.css</name>
+        <path>../resources/defaults.css</path>
+    </include-file>
+
+    <include-lookup-only>true</include-lookup-only>
+    
+    <include-classes>
+        <class>JewelClasses</class>
+    </include-classes>
+    
+    <include-namespaces>
+        <uri>library://ns.apache.org/royale/jewel</uri>
+    </include-namespaces>
+        
+    <target-player>${playerglobal.version}</target-player>
+	
+
+</royale-config>
diff --git a/frameworks/projects/Jewel/src/main/resources/defaults.css b/frameworks/projects/Jewel/src/main/resources/defaults.css
new file mode 100644
index 0000000..f09b980
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/defaults.css
@@ -0,0 +1,70 @@
+/*
+ *
+ *  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.
+ *
+ */
+
+@namespace "library://ns.apache.org/royale/jewel";
+
+.vertical-layout-padding-gap {
+	display: block !important;
+}
+
+/*
+* Jewel TextField
+*/
+TextField {
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+	/*IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");*/
+}
+.vTextField--input {}
+.vTextField--label {}
+
+/*
+* Jewel Slider
+*/
+Slider {
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+	IBeadView:  ClassReference("org.apache.royale.jewel.beads.SliderView");
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+	position: relative;
+}
+.SliderTrack {
+	position: absolute;
+}
+.SliderThumb {
+	position: absolute;
+	border-radius: 15px;
+}
+
+@media -royale-swf
+{
+    Slider
+	{
+		iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+		iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+	}
+
+	RadioButton
+	{
+		IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+		IBeadView:  ClassReference("org.apache.royale.jewel.beads.RadioButtonView");			
+		/*font-size: 11px;
+		font-family: Arial;*/
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
new file mode 100644
index 0000000..e38496a
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-as-manifest.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0"?>
+<!--
+
+  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.
+
+-->
+
+
+<componentPackage>
+
+    
+</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
new file mode 100644
index 0000000..b3bfccb
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel-manifest.xml
@@ -0,0 +1,37 @@
+<?xml version="1.0"?>
+<!--
+
+  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.
+
+-->
+
+
+<componentPackage>
+
+    <component id="Application" class="org.apache.royale.jewel.Application"/>
+    <component id="Button" class="org.apache.royale.jewel.Button"/>
+    <component id="TextButton" class="org.apache.royale.jewel.TextButton"/>
+    <component id="TextField" class="org.apache.royale.jewel.TextField"/>
+    <component id="Slider" class="org.apache.royale.jewel.Slider"/>
+    <component id="RadioButton" class="org.apache.royale.jewel.RadioButton"/>
+
+    <component id="Disabled" class="org.apache.royale.jewel.beads.Disabled"/>
+
+    <component id="HorizontalLayout" class="org.apache.royale.jewel.beads.layouts.HorizontalLayout"/>
+    <component id="VerticalLayout" class="org.apache.royale.jewel.beads.layouts.VerticalLayout"/>
+    <component id="VerticalLayoutWithPaddingAndGap" class="org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap"/>
+    
+</componentPackage>
diff --git a/frameworks/projects/Jewel/src/main/resources/jewel.css b/frameworks/projects/Jewel/src/main/resources/jewel.css
new file mode 100644
index 0000000..21f1648
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/resources/jewel.css
@@ -0,0 +1,63 @@
+/**
+ *  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.
+ */
+@namespace "library://ns.apache.org/royale/jewel";
+.layout .horizontal {
+  white-space: nowrap;
+}
+.layout .vertical {
+  display: block !important;
+}
+
+/**
+ * Jewel TextField
+ */
+TextField {
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel");
+}
+
+/**
+ * Jewel Slider
+ */
+Slider {
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel");
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.SliderView");
+  IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout");
+  IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController");
+  position: relative;
+}
+
+.SliderTrack {
+  position: absolute;
+}
+
+.SliderThumb {
+  position: absolute;
+  border-radius: 15px;
+}
+
+@media -royale-swf {
+  Slider {
+    iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView");
+    iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView");
+  }
+}
+RadioButton {
+  IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel");
+  IBeadView: ClassReference("org.apache.royale.jewel.beads.RadioButtonView");
+}
+
+/*# sourceMappingURL=jewel.css.map */
diff --git a/frameworks/projects/Jewel/src/main/royale/JewelClasses.as b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
new file mode 100644
index 0000000..3cb788e
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/JewelClasses.as
@@ -0,0 +1,45 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+
+    /**
+     *  @private
+     *  This class is used to link additional classes into jewel.swc
+     *  beyond those that are found by dependecy analysis starting
+     *  from the classes specified in manifest.xml.
+     */
+    internal class JewelClasses
+    {
+        import org.apache.royale.jewel.beads.SliderView; SliderView;
+	    
+        COMPILE::SWF
+	    {
+            import org.apache.royale.jewel.beads.SliderThumbView; SliderThumbView;
+            import org.apache.royale.jewel.beads.SliderTrackView; SliderTrackView;
+
+            import org.apache.royale.jewel.beads.RadioButtonView; RadioButtonView;
+        }
+
+        import org.apache.royale.jewel.beads.layouts.HorizontalLayout; HorizontalLayout;
+        import org.apache.royale.jewel.beads.layouts.VerticalLayout; VerticalLayout;
+        import org.apache.royale.jewel.beads.layouts.VerticalLayoutWithPaddingAndGap; VerticalLayoutWithPaddingAndGap;
+    }
+
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
new file mode 100644
index 0000000..b29f0a4
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Application.as
@@ -0,0 +1,70 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel
+{
+    import org.apache.royale.core.Application;
+    import org.apache.royale.core.SimpleCSSValuesImpl;
+		
+	/**
+	 * Jewel Application holds specific Jewel need in a Royale Application.
+	 *
+	 * This class extends the standard Application and sets up the
+	 * SimpleCSSValuesImpl (implementation) for convenience.
+	 *
+	 * 
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.2
+	 */
+	public class Application extends org.apache.royale.core.Application
+	{
+		/**
+         *  constructor.
+         *
+		 * <inject_html>
+		 * <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+     	 * </inject_html>
+	 	 * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+		public function Application()
+		{
+			super();
+			
+			this.valuesImpl = new SimpleCSSValuesImpl();
+
+			// this a is temp solution until we get a better way to get a reference to Application
+			//topLevelApplication = this;
+		}
+
+		/**
+         *  static reference to this application used mainly for dialog (Dialog class)
+		 * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+        //public static var topLevelApplication:Object;
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
new file mode 100644
index 0000000..70d4d58
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Button.as
@@ -0,0 +1,165 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel
+{
+    import org.apache.royale.html.Button;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+    /**
+     *  The Button class is a simple button.  Use TextButton for
+     *  buttons that should show text.  This is the lightest weight
+     *  button used for non-text buttons like the arrow buttons
+     *  in a Scrollbar or NumericStepper.
+     * 
+     *  The most common view for this button is CSSButtonView that
+     *  allows you to specify a backgroundImage in CSS that defines
+     *  the look of the button.
+     * 
+     *  However, when used in ScrollBar and when composed in many
+     *  other components, it is more common to assign a custom view
+     *  to the button.  
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.0
+     */
+    public class Button extends org.apache.royale.html.Button
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function Button()
+		{
+			super();
+
+            typeNames = "jewel button";
+		}
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return super.computeFinalClassNames() + " " + element.classList;
+        }
+
+        private var _primary:Boolean = false;
+
+        /**
+		 *  A boolean flag to activate "primary" effect selector.
+		 *  Applies primary color display effect.
+         *  Colors are defined in royale-jewel.css
+         *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get primary():Boolean
+        {
+            return _primary;
+        }
+
+        public function set primary(value:Boolean):void
+        {
+            if (_primary != value)
+            {
+                _primary = value;
+
+                COMPILE::JS
+                {
+                    
+                    element.classList.toggle("primary", value);
+                    setClassName(computeFinalClassNames());
+                }
+            }
+        }
+        
+        private var _secondary:Boolean = false;
+
+        /**
+		 *  A boolean flag to activate "secondary" effect selector.
+		 *  Applies secondary color display effect.
+         *  Colors are defined in royale-jewel.css
+         *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get secondary():Boolean
+        {
+            return _secondary;
+        }
+
+        public function set secondary(value:Boolean):void
+        {
+            if (_secondary != value)
+            {
+                _secondary = value;
+
+                COMPILE::JS
+                {
+                    element.classList.toggle("secondary", value);
+                    setClassName(computeFinalClassNames());
+                }
+            }
+        }
+
+        private var _emphasized:Boolean = false;
+
+        /**
+		 *  A boolean flag to activate "emphasized" effect selector.
+		 *  Applies emphasized color display effect.
+         *  Colors are defined in royale-jewel.css
+         *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get emphasized():Boolean
+        {
+            return _emphasized;
+        }
+
+        public function set emphasized(value:Boolean):void
+        {
+            if (_emphasized != value)
+            {
+                _emphasized = value;
+
+                COMPILE::JS
+                {
+                    element.classList.toggle("emphasized", value);
+                    setClassName(computeFinalClassNames());
+                }
+            }
+        }
+	}
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
new file mode 100644
index 0000000..05a5b3d
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/RadioButton.as
@@ -0,0 +1,107 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel
+{
+    import org.apache.royale.html.RadioButton;
+
+    COMPILE::SWF
+    {
+        import flash.display.DisplayObject;
+    }
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.jewel.supportClasses.RadioButtonIcon;
+        import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+    /**
+	 *  The RadioButton class is a component that displays a selectable Button. RadioButtons
+	 *  are typically used in groups, identified by the groupName property. RadioButton use
+	 *  the following beads:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the RadioButton..
+	 *
+	 *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+    COMPILE::SWF
+	public class RadioButton extends org.apache.royale.html.RadioButton
+    {
+        /**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function RadioButton(upState:DisplayObject=null, overState:DisplayObject=null, downState:DisplayObject=null, hitTestState:DisplayObject=null)
+		{
+			super(upState, overState, downState, hitTestState);
+		}
+    }
+
+    COMPILE::JS
+    public class RadioButton extends org.apache.royale.html.RadioButton
+    {
+        /**
+         * @private
+         * 
+         *  @royalesuppresspublicvarwarning
+         */
+        public static var radioCounter:int = 0;
+
+        private var labelFor:HTMLLabelElement;
+        private var textNode:Text;
+        private var icon:RadioButtonIcon;
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         * @royaleignorecoercion HTMLInputElement
+         * @royaleignorecoercion HTMLLabelElement
+         * @royaleignorecoercion Text
+         */
+        override protected function createElement():WrappedHTMLElement
+        {
+            
+
+            icon = new RadioButtonIcon()
+            icon.id = '_radio_' + org.apache.royale.jewel.RadioButton.radioCounter++;
+
+            textNode = document.createTextNode('') as Text;
+
+            labelFor = addElementToWrapper(this,'label') as HTMLLabelElement;
+            labelFor.appendChild(icon.element);
+            labelFor.appendChild(textNode);
+            
+            (textNode as WrappedHTMLElement).royale_wrapper = this;
+			(icon.element as WrappedHTMLElement).royale_wrapper = this;
+
+            typeNames = 'RadioButton';
+
+            return element;
+        }
+    }
+}
\ No newline at end of file
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
new file mode 100644
index 0000000..9d4f6d9
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/Slider.as
@@ -0,0 +1,72 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel
+{
+	import org.apache.royale.html.Slider;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+    }
+
+	[Event(name="valueChange", type="org.apache.royale.events.Event")]
+
+	/**
+	 *  The Slider class is a component that displays a range of values using a
+	 *  track and a thumb control. The Slider uses the following bead types:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model, typically an IRangeModel, that holds the Slider values.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the Slider.
+	 *  org.apache.royale.core.IBeadController: the bead that handles input.
+	 *  org.apache.royale.core.IThumbValue: the bead responsible for the display of the thumb control.
+	 *  org.apache.royale.core.ITrackView: the bead responsible for the display of the track.
+	 *
+     *  @toplevel
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.2
+	 */
+	public class Slider extends org.apache.royale.html.Slider
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+		public function Slider()
+		{
+			super();
+		}
+
+		
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+			return super.createElement();
+        }
+    }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
new file mode 100644
index 0000000..67fdcdd
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextButton.as
@@ -0,0 +1,129 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel
+{
+    import org.apache.royale.core.ITextModel;
+
+    COMPILE::JS
+    {
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.html.util.addElementToWrapper;
+    }
+    
+    [DefaultProperty("text")]
+
+    /**
+     *  The TextButton class implements a basic button that
+     *  displays text and provides a Jewel Design Library UI-like appearance.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.2
+     */
+	public class TextButton extends Button
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+		public function TextButton()
+		{
+			super();
+
+            typeNames = "jewel textbutton";
+		}
+        
+        /**
+         *  @copy org.apache.royale.html.Label#text
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function get text():String
+		{
+            COMPILE::SWF
+            {
+                return ITextModel(model).text;
+            }
+            COMPILE::JS
+            {
+                return element.innerHTML;
+            }
+		}
+
+        /**
+         *  @private
+         */
+		public function set text(value:String):void
+		{
+            COMPILE::SWF
+            {
+                ITextModel(model).text = value;
+            }
+            COMPILE::JS
+            {
+                this.element.innerHTML = value;
+                this.dispatchEvent('textChange');
+            }
+		}
+
+        /**
+         *  @copy org.apache.royale.html.Label#html
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function get html():String
+		{
+            COMPILE::SWF
+            {
+                return ITextModel(model).html;
+            }
+            COMPILE::JS
+            {
+                return element.innerHTML;
+            }
+		}
+
+        /**
+         *  @private
+         */
+		public function set html(value:String):void
+		{
+            COMPILE::SWF
+            {
+                ITextModel(model).html = value;
+            }
+            COMPILE::JS
+            {
+                this.element.innerHTML = value;
+                this.dispatchEvent('textChange');
+            }
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
new file mode 100644
index 0000000..145ab37
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/TextField.as
@@ -0,0 +1,115 @@
+//
+//  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.jewel
+{
+    import org.apache.royale.jewel.supportClasses.TextFieldBase;
+
+    COMPILE::JS
+    {
+        import goog.events;
+        import org.apache.royale.core.WrappedHTMLElement;
+        import org.apache.royale.html.util.addElementToWrapper;
+    }
+
+    /**
+     *  The TextField class implements the basic control for
+     *  single-line text input.
+     *
+     *  @toplevel
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.2
+     */
+	public class TextField extends TextFieldBase
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+		public function TextField()
+		{
+			super();
+		}
+
+        COMPILE::JS
+        private var _positioner:WrappedHTMLElement;
+
+		COMPILE::JS
+        /**
+         * The HTMLElement used to position the component.
+         */
+        override public function get positioner():WrappedHTMLElement
+		{
+			return _positioner;
+		}
+
+		COMPILE::JS
+        /**
+         * @private
+         */
+        override public function set positioner(value:WrappedHTMLElement):void
+		{
+			_positioner = value;
+		}
+
+        /**
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         * @royaleignorecoercion HTMLDivElement
+         * @royaleignorecoercion HTMLInputElement
+         * @royaleignorecoercion HTMLLabelElement
+         * @royaleignorecoercion Text
+         */
+        COMPILE::JS
+        override protected function createElement():WrappedHTMLElement
+        {
+            typeNames = "TextField";
+
+            var div:HTMLDivElement = document.createElement('div') as HTMLDivElement;
+            div.className = typeNames;
+            
+            input = addElementToWrapper(this,'input') as HTMLInputElement;
+            input.setAttribute('type', 'text');
+            input.className = "vTextField--input";
+            
+            //attach input handler to dispatch royale change event when user write in textinput
+            //goog.events.listen(element, 'change', killChangeHandler);
+            goog.events.listen(input, 'input', textChangeHandler);
+            
+            label = document.createElement('label') as HTMLLabelElement;
+            label.className = "vTextField--label";
+
+            textNode = document.createTextNode('') as Text;
+            label.appendChild(textNode);
+            
+            div.appendChild(input);
+            div.appendChild(label);
+
+            positioner = div as WrappedHTMLElement;
+            (label as WrappedHTMLElement).royale_wrapper = this;
+            _positioner.royale_wrapper = this;
+            
+            return element;
+        }
+
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
new file mode 100644
index 0000000..30429d6
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/Disabled.as
@@ -0,0 +1,107 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads
+{	
+	import org.apache.royale.core.IBead;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.UIBase;
+	
+	/**
+	 *  The Disabled bead class is a specialty bead that can be used to disable a Jewel control.
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.2
+	 */
+	public class Disabled implements IBead
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+		public function Disabled()
+		{
+		}
+
+		private var _disabled:Boolean = true;
+        /**
+		 *  A boolean flag to enable or disable the host control.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get disabled():Boolean
+        {
+            return _disabled;
+        }
+        public function set disabled(value:Boolean):void
+        {
+            _disabled = value;
+
+			COMPILE::JS
+            {
+                updateHost();
+            }
+        }
+
+		private var _strand:IStrand;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 *  @royaleignorecoercion HTMLInputElement
+		 *  @royaleignorecoercion org.apache.royale.core.UIBase;
+		 */
+		public function set strand(value:IStrand):void
+		{
+			_strand = value;
+			
+			var host:UIBase = value as UIBase;
+
+			COMPILE::JS
+			{
+				updateHost();
+			}
+		}
+
+		COMPILE::JS
+		private function updateHost():void
+		{
+			var host:UIBase = _strand as UIBase;
+
+			if (host)
+            {
+                _disabled ?
+				host.element.setAttribute('disabled', '') :
+				host.element.removeAttribute('disabled');
+            }
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
new file mode 100644
index 0000000..984b7b5
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/RadioButtonView.as
@@ -0,0 +1,286 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads
+{
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+	import flash.display.Sprite;
+	import flash.text.TextFieldAutoSize;
+	import flash.text.TextFieldType;
+	
+    import org.apache.royale.core.BeadViewBase;
+	import org.apache.royale.core.CSSTextField;
+	import org.apache.royale.core.IBeadView;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.IValueToggleButtonModel;
+	import org.apache.royale.events.Event;
+	
+	/**
+	 *  The RadioButtonView class creates the visual elements of the org.apache.royale.html.RadioButton 
+	 *  component. 
+	 *  
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class RadioButtonView extends BeadViewBase implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function RadioButtonView()
+		{
+			sprites = [ upSprite = new Sprite(),
+				        downSprite = new Sprite(),
+						overSprite = new Sprite(),
+						upAndSelectedSprite = new Sprite(),
+						downAndSelectedSprite = new Sprite(),
+						overAndSelectedSprite = new Sprite() ];
+			
+			for each( var s:Sprite in sprites )
+			{
+				var tf:CSSTextField = new CSSTextField();
+				tf.type = TextFieldType.DYNAMIC;
+				tf.autoSize = TextFieldAutoSize.LEFT;
+				tf.name = "textField";
+				var icon:Shape = new Shape();
+				icon.name = "icon";
+				s.addChild(icon);
+				s.addChild(tf);
+			}
+		}
+		
+		private var upSprite:Sprite;
+		private var downSprite:Sprite;
+		private var overSprite:Sprite;
+		private var upAndSelectedSprite:Sprite;
+		private var downAndSelectedSprite:Sprite;
+		private var overAndSelectedSprite:Sprite;
+		
+		private var sprites:Array;
+		
+		private var _toggleButtonModel:IValueToggleButtonModel;
+		
+		/**
+		 *  The model used for the RadioButton.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get toggleButtonModel() : IValueToggleButtonModel
+		{
+			return _toggleButtonModel;
+		}
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			_toggleButtonModel = value.getBeadByType(IValueToggleButtonModel) as IValueToggleButtonModel;
+			_toggleButtonModel.addEventListener("textChange", textChangeHandler);
+			_toggleButtonModel.addEventListener("htmlChange", htmlChangeHandler);
+			_toggleButtonModel.addEventListener("selectedValueChange", selectedValueChangeHandler);
+			if (_toggleButtonModel.text != null)
+				text = _toggleButtonModel.text;
+			if (_toggleButtonModel.html != null)
+				html = _toggleButtonModel.html;
+            for each( var s:Sprite in sprites )
+            {
+                var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+                tf.styleParent = value;
+            }
+			
+			layoutControl();
+			
+			var hitArea:Shape = new Shape();
+			hitArea.graphics.beginFill(0x000000);
+			hitArea.graphics.drawRect(0,0,upSprite.width, upSprite.height);
+			hitArea.graphics.endFill();
+			
+			SimpleButton(value).upState = upSprite;
+			SimpleButton(value).downState = downSprite;
+			SimpleButton(value).overState = overSprite;
+			SimpleButton(value).hitTestState = hitArea;
+			
+			if (toggleButtonModel.text !== null)
+				text = toggleButtonModel.text;
+			if (toggleButtonModel.html !== null)
+				html = toggleButtonModel.html;
+			
+			if (toggleButtonModel.selected && toggleButtonModel.value == value) {
+				selected = true;
+			}
+		}
+		
+		/**
+		 *  The string label for the org.apache.royale.html.RadioButton.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get text():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.text;
+		}
+		public function set text(value:String):void
+		{
+			for each( var s:Sprite in sprites )
+			{
+				var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+				tf.text = value;
+			}
+			
+			layoutControl();
+		}
+		
+		/**
+		 *  The HTML string for the org.apache.royale.html.RadioButton.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get html():String
+		{
+			var tf:CSSTextField = upSprite.getChildByName('textField') as CSSTextField;
+			return tf.htmlText;
+		}
+		public function set html(value:String):void
+		{
+			for each(var s:Sprite in sprites)
+			{
+				var tf:CSSTextField = s.getChildByName('textField') as CSSTextField;
+				tf.htmlText = value;
+			}
+			
+			layoutControl();
+		}
+		
+		/**
+		 * @private
+		 */
+		private function textChangeHandler(event:Event):void
+		{
+			text = toggleButtonModel.text;
+		}
+		
+		/**
+		 * @private
+		 */
+		private function htmlChangeHandler(event:Event):void
+		{
+			html = toggleButtonModel.html;
+		}
+		
+		private var _selected:Boolean;
+		
+		/**
+		 * The selection state of the RadioButton
+		 */
+		public function get selected():Boolean
+		{
+			return _selected;
+		}
+		public function set selected(value:Boolean):void
+		{
+			_selected = value;
+			
+			if( value ) {
+				SimpleButton(_strand).upState = upAndSelectedSprite;
+				SimpleButton(_strand).downState = downAndSelectedSprite;
+				SimpleButton(_strand).overState = overAndSelectedSprite;
+				
+			} else {
+				SimpleButton(_strand).upState = upSprite;
+				SimpleButton(_strand).downState = downSprite;
+				SimpleButton(_strand).overState = overSprite;
+			}
+			
+			layoutControl();
+		}
+		
+		/**
+		 * @private
+		 */
+		private function selectedValueChangeHandler(event:Event):void
+		{
+			selected = _toggleButtonModel.value == _toggleButtonModel.selectedValue;
+		}
+		
+		/**
+		 * @private
+		 */
+		protected function layoutControl() : void
+		{
+			for each(var s:Sprite in sprites)
+			{
+				var icon:Shape = s.getChildByName("icon") as Shape;
+				var tf:CSSTextField = s.getChildByName("textField") as CSSTextField;
+				
+				drawRadioButton(icon);
+				
+				var mh:Number = Math.max(icon.height,tf.height);
+				
+				icon.x = 0;
+				icon.y = (mh - icon.height)/2;
+				
+				tf.x = icon.x + icon.width + 1;
+				tf.y = (mh - tf.height)/2;
+			}
+			
+		}
+		
+		/**
+		 * @private
+		 */
+		protected function drawRadioButton(icon:Shape) : void
+		{
+			icon.graphics.clear();
+			icon.graphics.beginFill(0xf8f8f8);
+			icon.graphics.lineStyle(1,0x808080);
+			icon.graphics.drawEllipse(0,0,10,10);
+			icon.graphics.endFill();
+			
+			if( selected ) {
+				icon.graphics.beginFill(0);
+				icon.graphics.drawEllipse(3,3,4,4);
+				icon.graphics.endFill();
+			}
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as
new file mode 100644
index 0000000..4df51c8
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderThumbView.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads
+{
+	import flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;
+
+    import org.apache.royale.core.BeadViewBase;
+    import org.apache.royale.core.IBeadView;
+    import org.apache.royale.core.IStrand;
+	import org.apache.royale.html.Button;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.core.IChild;
+	
+	/**
+	 *  The SliderThumbView class creates the draggable input element for the 
+	 *  org.apache.royale.html.Slider component.
+	 *  
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class SliderThumbView extends BeadViewBase implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function SliderThumbView()
+		{
+            hitArea = new Shape();
+            upView = new Shape();
+            downView = new Shape();
+            overView = new Shape();                
+		}
+		
+		/**
+		 * @private
+		 */
+		private function drawView(g:Graphics, bgColor:uint):void
+		{
+			var host:Button = Button(_strand);
+            var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+			g.clear();
+			g.lineStyle(1,0x000000);
+			g.beginFill(bgColor,1.0);
+			g.drawCircle(host.width/2, host.height/2, 10);
+			g.endFill();
+		}
+		
+		private var hitArea:Shape;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+         *  @royaleignoreimport org.apache.royale.core.WrappedHTMLElement
+         *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+            drawView(hitArea.graphics, 0xDD0000);
+            drawView(upView.graphics, 0xFFFFFF);
+            drawView(downView.graphics, 0x999999);
+            drawView(overView.graphics, 0xDDDDDD);
+            
+            var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+            button.upState = upView;
+            button.downState = downView;
+            button.overState = overView;
+            button.hitTestState = hitArea;
+            
+            IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+            IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);                
+		}
+		
+		private var upView:Shape;
+		private var downView:Shape;
+		private var overView:Shape;
+        
+		/**
+		 * @private
+		 */
+		private function sizeChangeHandler( event:Event ) : void
+		{
+			drawView(hitArea.graphics, 0xDD0000);
+			drawView(upView.graphics, 0xFFFFFF);
+			drawView(downView.graphics, 0x999999);
+			drawView(overView.graphics, 0xDDDDDD);
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as
new file mode 100644
index 0000000..a5e0410
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderTrackView.as
@@ -0,0 +1,121 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads
+{
+	import flash.display.Graphics;
+	import flash.display.Shape;
+	import flash.display.SimpleButton;			
+	
+	import org.apache.royale.core.BeadViewBase;
+	import org.apache.royale.core.IBeadView;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.UIBase;
+	import org.apache.royale.html.Button;
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.core.IChild;
+	
+	/**
+	 *  The SliderTrackView class creates the track area for the org.apache.royale.html.Slider
+	 *  component.
+	 *  
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class SliderTrackView extends BeadViewBase implements IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function SliderTrackView()
+		{
+			hitArea = new Shape();
+			upView = new Shape();
+			downView = new Shape();
+			overView = new Shape();					
+		}
+		
+		/**
+		 * @private
+		 */
+		private function drawView(g:Graphics, bgColor:uint):void
+		{
+			var host:Button = Button(_strand);
+            var button:SimpleButton = IChild(_strand).$displayObject as SimpleButton;
+			g.clear();
+			g.lineStyle(1,0x000000);
+			g.beginFill(bgColor);
+			g.drawRect(0, 0, host.width, host.height);
+			g.endFill();
+		}
+		
+		private var hitArea:Shape;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+         *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+			drawView(hitArea.graphics, 0xDD0000);
+			drawView(upView.graphics, 0xCCCCCC);
+			drawView(downView.graphics, 0x808080);
+			drawView(overView.graphics, 0xEEEEEE);
+			
+            var button:SimpleButton = IChild(value).$displayObject as SimpleButton;
+			button.upState = upView;
+			button.downState = downView;
+			button.overState = overView;
+			button.hitTestState = hitArea;
+			
+			IEventDispatcher(value).addEventListener("widthChanged",sizeChangeHandler);
+			IEventDispatcher(value).addEventListener("heightChanged",sizeChangeHandler);					
+		}
+		
+		private var upView:Shape;
+		private var downView:Shape;
+		private var overView:Shape;
+		
+		/**
+		 * @private
+		 */
+		private function sizeChangeHandler( event:Event ) : void
+		{
+			drawView(hitArea.graphics, 0xDD0000);
+			drawView(upView.graphics, 0xCCCCCC);
+			drawView(downView.graphics, 0x808080);
+			drawView(overView.graphics, 0xEEEEEE);
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
new file mode 100644
index 0000000..c62a3fc
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/SliderView.as
@@ -0,0 +1,172 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads
+{
+	COMPILE::SWF {
+		import flash.display.DisplayObject;
+		import flash.display.Sprite;
+	}
+	
+    import org.apache.royale.html.beads.ISliderView;
+    import org.apache.royale.core.BeadViewBase;
+    import org.apache.royale.core.IBead;
+    import org.apache.royale.core.IBeadLayout;
+    import org.apache.royale.core.IBeadModel;
+    import org.apache.royale.core.IBeadView;
+    import org.apache.royale.core.IRangeModel;
+    import org.apache.royale.core.IStrand;
+    import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.UIBase;
+    import org.apache.royale.core.ValuesManager;
+    import org.apache.royale.events.Event;
+    import org.apache.royale.events.IEventDispatcher;
+    import org.apache.royale.html.Button;
+    import org.apache.royale.html.TextButton;
+	
+	/**
+	 *  The SliderView class creates the visual elements of the org.apache.royale.html.Slider 
+	 *  component. The Slider has a track and a thumb control which are also created with view beads.
+	 *  
+	 *  @viewbead
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class SliderView extends BeadViewBase implements ISliderView, IBeadView
+	{
+		/**
+		 *  constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function SliderView()
+		{
+		}
+		
+		private var rangeModel:IRangeModel;
+		
+		/**
+		 *  @copy org.apache.royale.core.IBead#strand
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+			var layout:IBeadLayout = _strand.getBeadByType(IBeadLayout) as IBeadLayout;
+			if (layout == null) {
+				var klass:Class = ValuesManager.valuesImpl.getValue(_strand, "iBeadLayout");
+				_strand.addBead(new klass() as IBead);
+			}
+			
+			COMPILE::SWF {
+				var s:UIBase = UIBase(_strand);
+				
+				_track = new Button();
+				_track.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iTrackView")) as IBead);
+				_track.className = "SliderTrack";
+				s.addElement(_track);
+				
+				_thumb = new TextButton();
+				_thumb.text = '\u29BF';
+				_thumb.addBead(new (ValuesManager.valuesImpl.getValue(_strand, "iThumbView")) as IBead);
+				_thumb.className = "SliderThumb";
+				s.addElement(_thumb);
+				
+			}
+			COMPILE::JS {
+				_track = new Button();
+				_track.className = "SliderTrack";
+				host.addElement(_track);
+				
+				_thumb = new TextButton();
+				_thumb.className = "SliderThumb";
+				_thumb.text = '\u29BF';
+				host.addElement(_thumb);
+			}
+			
+			rangeModel = _strand.getBeadByType(IBeadModel) as IRangeModel;
+
+			var rm:IEventDispatcher = rangeModel as IEventDispatcher;
+			
+			// listen for changes to the model and adjust the UI accordingly.
+			rm.addEventListener("valueChange",modelChangeHandler);
+			rm.addEventListener("minimumChange",modelChangeHandler);
+			rm.addEventListener("maximumChange",modelChangeHandler);
+			rm.addEventListener("stepSizeChange",modelChangeHandler);
+			rm.addEventListener("snapIntervalChange",modelChangeHandler);
+			
+			(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+		}
+		
+		private var _track:Button;
+		private var _thumb:TextButton;
+		
+		
+		/**
+		 *  The track component.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get track():IUIBase
+		{
+			return _track;
+		}
+		
+		/**
+		 *  The thumb component.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get thumb():IUIBase
+		{
+			return _thumb;
+		}
+		
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.UIBase
+		 */
+		private function get host():UIBase
+		{
+			return _strand as UIBase;
+		}
+		
+		/**
+		 * @private
+		 */
+		private function modelChangeHandler( event:Event ) : void
+		{
+			(_strand as IEventDispatcher).dispatchEvent(new Event("layoutNeeded"));
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
new file mode 100644
index 0000000..16950a3
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/HorizontalLayout.as
@@ -0,0 +1,196 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads.layouts
+{
+	import org.apache.royale.core.IBeadLayout;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.ILayoutView;
+	import org.apache.royale.core.IParentIUIBase;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.layout.EdgeData;
+	import org.apache.royale.core.ValuesManager;
+	import org.apache.royale.core.LayoutBase;
+	COMPILE::SWF {
+			import org.apache.royale.core.UIBase;
+	}
+    COMPILE::JS {
+        import org.apache.royale.core.WrappedHTMLElement;
+    }
+
+    /**
+     *  The HorizontalLayout class is a simple layout
+     *  bead.  It takes the set of children and lays them out
+     *  horizontally in one row, separating them according to
+     *  CSS layout rules for margin and vertical-align styles.
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.0
+     */
+	public class HorizontalLayout extends LayoutBase implements IBeadLayout
+	{
+        /**
+         *  Constructor.
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         */
+		public function HorizontalLayout()
+		{
+			super();
+		}
+
+        /**
+         *  @copy org.apache.royale.core.IBead#strand
+         *
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.0
+         *  @royaleignorecoercion HTMLElement
+         *  @royaleignorecoercion org.apache.royale.core.IUIBase
+         */
+		override public function set strand(value:IStrand):void
+		{
+			super.strand = value;
+			
+            COMPILE::JS
+            {
+				var base:IUIBase = value as IUIBase;
+				if (base.element.style.display !== "none") {
+					base.element.style.display = "block";
+				}
+            }
+		}
+
+        /**
+         * @copy org.apache.royale.core.IBeadLayout#layout
+         * @royaleignorecoercion org.apache.royale.core.ILayoutHost
+         * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+         */
+		override public function layout():Boolean
+		{
+            COMPILE::SWF
+            {
+				var contentView:ILayoutView = layoutView;
+
+				var n:Number = contentView.numElements;
+				if (n == 0) return false;
+
+				var maxWidth:Number = 0;
+				var maxHeight:Number = 0;
+				var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+				var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+				var hostWidth:Number = host.width;
+				var hostHeight:Number = host.height;
+
+				var ilc:ILayoutChild;
+				var data:Object;
+				var canAdjust:Boolean = false;
+
+				var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+				var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+				
+				// adjust the host's usable size by the metrics. If hostSizedToContent, then the
+				// resulting adjusted value may be less than zero.
+				hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+				hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+				var xpos:Number = borderMetrics.left + paddingMetrics.left;
+				var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+				// First pass determines the data about the child.
+				for(var i:int=0; i < n; i++)
+				{
+					var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+					var positions:Object = childPositions(child);
+					var margins:Object = childMargins(child, hostWidth, hostHeight);
+
+					ilc = child as ILayoutChild;
+
+					xpos += margins.left;
+
+					var childYpos:Number = ypos + margins.top; // default y position
+
+					var childHeight:Number = child.height;
+					if (ilc != null && !isNaN(ilc.percentHeight)) {
+						childHeight = hostHeight * ilc.percentHeight/100.0;
+						ilc.setHeight(childHeight);
+					}
+					var valign:Object = ValuesManager.valuesImpl.getValue(child, "vertical-align");
+					if (valign == "middle")
+					{
+						childYpos = hostHeight/2 - (childHeight + margins.top + margins.bottom)/2;
+					}
+	
+					if (ilc) {
+						ilc.setX(xpos);
+						ilc.setY(childYpos);
+
+						if (!isNaN(ilc.percentWidth)) {
+							var newWidth:Number = hostWidth * ilc.percentWidth / 100;
+							ilc.setWidth(newWidth);
+						}
+
+					} else {
+						child.x = xpos;
+						child.y = childYpos;
+					}
+
+					xpos += child.width + margins.right;
+				}
+
+				return true;
+
+            }
+            COMPILE::JS
+            {
+                var children:Array;
+                var i:int;
+                var n:int;
+				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				contentView.element.classList.add("layout parent"); //style["white-space"] = "nowrap";
+                children = contentView.internalChildren();
+
+                n = children.length;
+                for (i = 0; i < n; i++)
+                {
+                    var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+					if (child == null) continue;
+
+					 child.classList.add("layout horizontal");
+
+					/*child.royale_wrapper.setDisplayStyleForLayout('inline-block');
+					if (child.style.display !== 'none')
+					{
+						child.style.display = 'inline-block';
+					}*/
+				}
+
+                return true;
+            }
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
new file mode 100644
index 0000000..fab6700
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayout.as
@@ -0,0 +1,193 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads.layouts
+{
+	import org.apache.royale.core.LayoutBase;
+	
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.IBeadModel;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.ILayoutHost;
+	import org.apache.royale.core.ILayoutView;
+	import org.apache.royale.core.ILayoutParent;
+	import org.apache.royale.core.IParentIUIBase;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.layout.EdgeData;
+	import org.apache.royale.core.ValuesManager;
+	COMPILE::JS
+	{
+		import org.apache.royale.core.WrappedHTMLElement;
+	}
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.geom.Rectangle;
+	import org.apache.royale.utils.CSSUtils;
+
+	/**
+	 *  The VerticalLayout class is a simple layout
+	 *  bead.  It takes the set of children and lays them out
+	 *  vertically in one column, separating them according to
+	 *  CSS layout rules for margin and horizontal-align styles.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.9.3
+	 */
+	public class VerticalLayout extends LayoutBase implements IBeadLayout
+	{
+		/**
+		 *  Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.3
+		 */
+		public function VerticalLayout()
+		{
+			super();
+		}
+
+		/**
+		 *  Layout children vertically
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 *  @royaleignorecoercion org.apache.royale.core.ILayoutHost
+		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 */
+		override public function layout():Boolean
+		{
+			COMPILE::SWF
+			{
+				var contentView:ILayoutView = layoutView;
+
+				var n:Number = contentView.numElements;
+				if (n == 0) return false;
+
+				var maxWidth:Number = 0;
+				var maxHeight:Number = 0;
+				var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+				var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+				var hostWidth:Number = host.width;
+				var hostHeight:Number = host.height;
+
+				var ilc:ILayoutChild;
+				var data:Object;
+				var canAdjust:Boolean = false;
+
+				var paddingMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getPaddingMetrics(host);
+				var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+				
+				// adjust the host's usable size by the metrics. If hostSizedToContent, then the
+				// resulting adjusted value may be less than zero.
+				hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+				hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+				var xpos:Number = borderMetrics.left + paddingMetrics.left;
+				var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+				// First pass determines the data about the child.
+				for(var i:int=0; i < n; i++)
+				{
+					var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+					var positions:Object = childPositions(child);
+					var margins:Object = childMargins(child, hostWidth, hostHeight);
+
+					ilc = child as ILayoutChild;
+
+					ypos += margins.top;
+
+					var childXpos:Number = xpos + margins.left; // default x position
+
+					var childWidth:Number = child.width;
+					if (ilc != null && !isNaN(ilc.percentWidth)) {
+						childWidth = hostWidth * ilc.percentWidth/100.0;
+						ilc.setWidth(childWidth);
+					}
+					else if (ilc.isWidthSizedToContent() && !margins.auto)
+					{
+						childWidth = hostWidth;
+						ilc.setWidth(childWidth);
+					}
+					if (margins.auto)
+						childXpos = (hostWidth - childWidth) / 2;
+						
+					if (ilc) {
+						ilc.setX(childXpos);
+						ilc.setY(ypos);
+
+						if (!isNaN(ilc.percentHeight)) {
+							var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+							ilc.setHeight(newHeight);
+						}
+
+					} else {
+						child.x = childXpos;
+						child.y = ypos;
+					}
+
+					ypos += child.height + margins.bottom;
+				}
+
+				return true;
+			}
+			COMPILE::JS
+			{
+				var children:Array;
+				var i:int;
+				var n:int;
+				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				contentView.element.classList.add("layout parent");//style["vertical-align"] = "top";
+				
+				children = contentView.internalChildren();
+				n = children.length;
+				for (i = 0; i < n; i++)
+				{
+					var child:WrappedHTMLElement = children[i] as WrappedHTMLElement;
+					if (child == null) continue;
+					
+                    child.classList.add("layout vertical");
+
+                    /*child.royale_wrapper.setDisplayStyleForLayout('block');
+					if (child.style.display === 'none')
+					{
+						child.royale_wrapper.setDisplayStyleForLayout('block');
+					}
+					else
+					{
+						// block elements don't measure width correctly so set to inline for a second
+						child.style.display = 'inline-block';
+						child.style.display = 'block';
+					}*/
+					child.royale_wrapper.dispatchEvent('sizeChanged');
+				}
+
+				return true;
+			}
+		}
+
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
new file mode 100644
index 0000000..f941993
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/layouts/VerticalLayoutWithPaddingAndGap.as
@@ -0,0 +1,341 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.beads.layouts
+{
+	import org.apache.royale.core.LayoutBase;
+	
+	import org.apache.royale.core.IBeadLayout;
+	import org.apache.royale.core.IBeadModel;
+    import org.apache.royale.core.IBorderPaddingMarginValuesImpl;
+	import org.apache.royale.core.ILayoutChild;
+	import org.apache.royale.core.ILayoutHost;
+	import org.apache.royale.core.ILayoutView;
+	import org.apache.royale.core.ILayoutParent;
+	import org.apache.royale.core.IParentIUIBase;
+	import org.apache.royale.core.IStrand;
+	import org.apache.royale.core.IUIBase;
+    import org.apache.royale.core.layout.EdgeData;
+	import org.apache.royale.core.ValuesManager;
+	COMPILE::JS
+	{
+		import org.apache.royale.core.WrappedHTMLElement;
+	}
+	import org.apache.royale.events.Event;
+	import org.apache.royale.events.IEventDispatcher;
+	import org.apache.royale.geom.Rectangle;
+	import org.apache.royale.utils.CSSUtils;
+
+	/**
+	 *  The VerticalLayoutWithPaddingAndGap class is a simple layout
+	 *  bead similar to VerticalLayout, but it adds support for
+	 *  padding and gap values.
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class VerticalLayoutWithPaddingAndGap extends LayoutBase implements IBeadLayout
+	{
+		/**
+		 *  Constructor.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function VerticalLayoutWithPaddingAndGap()
+		{
+			super();
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingTop:Number = 0;
+
+		/**
+		 *  The top padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get paddingTop():Number
+		{
+			return _paddingTop;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingTop(value:Number):void
+		{
+			_paddingTop = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingRight:Number = 0;
+
+		/**
+		 *  The right padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get paddingRight():Number
+		{
+			return _paddingRight;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingRight(value:Number):void
+		{
+			_paddingRight = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingBottom:Number = 0;
+
+		/**
+		 *  The top padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get paddingBottom():Number
+		{
+			return _paddingBottom;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingBottom(value:Number):void
+		{
+			_paddingBottom = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _paddingLeft:Number = 0;
+
+		/**
+		 *  The left padding value.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get paddingLeft():Number
+		{
+			return _paddingLeft;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set paddingLeft(value:Number):void
+		{
+			_paddingLeft = value;
+		}
+
+		/**
+		 *  @private
+		 */
+		private var _gap:Number = 0;
+
+		/**
+		 *  The gap between items.
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 */
+		public function get gap():Number
+		{
+			return _gap;
+		}
+
+		/**
+		 *  @private
+		 */
+		public function set gap(value:Number):void
+		{
+			_gap = value;
+		}
+
+		/**
+		 *  Layout children vertically
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.0
+		 *  @royaleignorecoercion org.apache.royale.core.ILayoutHost
+		 *  @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 */
+		override public function layout():Boolean
+		{
+			COMPILE::SWF
+			{
+				var contentView:ILayoutView = layoutView;
+
+				var n:Number = contentView.numElements;
+				if (n == 0) return false;
+
+				var maxWidth:Number = 0;
+				var maxHeight:Number = 0;
+				var hostWidthSizedToContent:Boolean = host.isWidthSizedToContent();
+				var hostHeightSizedToContent:Boolean = host.isHeightSizedToContent();
+				var hostWidth:Number = hostWidthSizedToContent ? 0 : contentView.width;
+				var hostHeight:Number = hostHeightSizedToContent ? 0 : contentView.height;
+
+				var ilc:ILayoutChild;
+				var data:Object;
+				var canAdjust:Boolean = false;
+
+				var paddingMetrics:EdgeData = new EdgeData();
+                paddingMetrics.left = _paddingLeft;
+                paddingMetrics.top  = _paddingTop;
+                paddingMetrics.right = _paddingRight;
+                paddingMetrics.bottom = _paddingBottom;
+				var borderMetrics:EdgeData = (ValuesManager.valuesImpl as IBorderPaddingMarginValuesImpl).getBorderMetrics(host);
+				
+				// adjust the host's usable size by the metrics. If hostSizedToContent, then the
+				// resulting adjusted value may be less than zero.
+				hostWidth -= paddingMetrics.left + paddingMetrics.right + borderMetrics.left + borderMetrics.right;
+				hostHeight -= paddingMetrics.top + paddingMetrics.bottom + borderMetrics.top + borderMetrics.bottom;
+
+				var xpos:Number = borderMetrics.left + paddingMetrics.left;
+				var ypos:Number = borderMetrics.top + paddingMetrics.top;
+
+				// First pass determines the data about the child.
+				for(var i:int=0; i < n; i++)
+				{
+					var child:IUIBase = contentView.getElementAt(i) as IUIBase;
+					if (child == null || !child.visible) continue;
+					var positions:Object = childPositions(child);
+
+					ilc = child as ILayoutChild;
+
+					var childXpos:Number = xpos; // default x position
+
+					if (!hostWidthSizedToContent) {
+						var childWidth:Number = child.width;
+						if (ilc != null && !isNaN(ilc.percentWidth)) {
+							childWidth = hostWidth * ilc.percentWidth/100.0;
+							ilc.setWidth(childWidth);
+						}
+						// the following code center-aligns the child, but since HTML does not
+						// do this normally, this code is commented. (Use VerticalFlexLayout for
+						// horizontally centered elements in a vertical column).
+						//					childXpos = hostWidth/2 - (childWidth + ml + mr)/2;
+					}
+
+					if (ilc) {
+						ilc.setX(childXpos);
+						ilc.setY(ypos);
+
+						if (!hostHeightSizedToContent && !isNaN(ilc.percentHeight)) {
+							var newHeight:Number = hostHeight * ilc.percentHeight / 100;
+							ilc.setHeight(newHeight);
+						}
+
+					} else {
+						child.x = childXpos;
+						child.y = ypos;
+					}
+
+					ypos += child.height + _gap;
+				}
+
+				return true;
+			}
+			COMPILE::JS
+			{
+				var children:Array;
+				var i:int;
+				var n:int;
+				var contentView:IParentIUIBase = layoutView as IParentIUIBase;
+				contentView.element.style["vertical-align"] = "top";
+				
+				children = contentView.internalChildren();
+				n = children.length;
+				for (i = 0; i < n; i++)
+				{
+					var child:WrappedHTMLElement = children[i];
+
+                    child.className += " vertical-layout-padding-gap";
+
+
+					/*if(i == 0)
+					{
+						child.style.marginTop = _paddingTop + 'px';
+					}
+					else
+					{
+						child.style.marginTop = _gap + 'px';
+					}
+					child.style.marginRight = _paddingRight + 'px';
+					if(i === (n - 1))
+					{
+						child.style.marginBottom = _paddingBottom + 'px';
+					}
+					else
+					{
+						child.style.marginBottom = '0px';
+					}
+					child.style.marginLeft = _paddingLeft + 'px';
+					child.royale_wrapper.setDisplayStyleForLayout('block');
+					if (child.style.display === 'none')
+					{
+						child.royale_wrapper.setDisplayStyleForLayout('block');
+					}
+					else
+					{
+						// block elements don't measure width correctly so set to inline for a second
+						child.style.display = 'inline-block';
+						child.style.display = 'block';
+					}
+                    */
+					child.royale_wrapper.dispatchEvent('sizeChanged');
+				}
+
+				return true;
+			}
+		}
+
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
new file mode 100644
index 0000000..e1ed050
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/ITextField.as
@@ -0,0 +1,68 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.supportClasses
+{
+    /**
+     *  ITextField is the interface that all text jewel classes.
+     *  It's used mainly in org.apache.royale.jewel.supportClasses.TextFieldBase
+     *
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 9.2
+     */
+    public interface ITextField
+    {
+        COMPILE::JS
+        {
+            /**
+            * the textNode
+            *
+            * @langversion 3.0
+            * @playerversion Flash 10.2
+            * @playerversion AIR 2.6
+            * @productversion Royale 0.9.2
+            */
+            function get textNode():Text;
+            function set textNode(value:Text):void;
+
+            /**
+            * the input
+            *
+            * @langversion 3.0
+            * @playerversion Flash 10.2
+            * @playerversion AIR 2.6
+            * @productversion Royale 0.9.2
+            */
+            function get input():HTMLInputElement;
+            function set input(value:HTMLInputElement):void;
+
+            /**
+            * the label
+            *
+            * @langversion 3.0
+            * @playerversion Flash 10.2
+            * @playerversion AIR 2.6
+            * @productversion Royale 0.9.2
+            */
+            function get label():HTMLLabelElement;
+            function set label(value:HTMLLabelElement):void;
+        }
+    }
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
new file mode 100644
index 0000000..4d71794
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/RadioButtonIcon.as
@@ -0,0 +1,117 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel.supportClasses
+{
+	COMPILE::JS {
+        import org.apache.royale.core.WrappedHTMLElement;
+    }
+
+	/**
+	 *  The RadioButton class is a component that displays a selectable Button. RadioButtons
+	 *  are typically used in groups, identified by the groupName property. RadioButton use
+	 *  the following beads:
+	 *
+	 *  org.apache.royale.core.IBeadModel: the data model, which includes the groupName.
+	 *  org.apache.royale.core.IBeadView:  the bead that constructs the visual parts of the RadioButton..
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.2
+	 *  @playerversion AIR 2.6
+	 *  @productversion Royale 0.0
+	 */
+	public class RadioButtonIcon
+	{
+		public function RadioButtonIcon()
+		{
+			COMPILE::JS {
+				createElement();
+			}
+
+			className = 'RadioButtonIcon';
+		}
+
+        /**
+         * @private
+         * 
+         * @royalesuppresspublicvarwarning
+         */
+		COMPILE::JS 
+		public var element:WrappedHTMLElement;
+		
+		COMPILE::JS
+		public function get positioner():WrappedHTMLElement
+		{
+			return element;
+		}
+		
+		private var _className:String;
+
+		/**
+		 * @private
+		 */
+		public function get className():String
+		{
+			return _className;
+		}
+		public function set className(value:String):void
+		{
+			_className = value;
+
+			COMPILE::JS {
+				element.className = value;
+			}
+		}
+
+		private var _id:String;
+
+		/**
+		 * @private
+		 */
+		public function get id():String
+		{
+			return _id;
+		}
+		public function set id(value:String):void
+		{
+			_id = value;
+
+			COMPILE::JS {
+				element.id = value;
+			}
+		}
+
+		/**
+		 * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
+		 * @royaleignorecoercion HTMLInputElement
+		 * @royaleignorecoercion Text
+		 */
+		COMPILE::JS
+ 		protected function createElement():WrappedHTMLElement
+		{
+			//This class does not subclass anything, so these properties must be set explicitly
+			var input:HTMLInputElement = document.createElement('input') as HTMLInputElement;
+			input.type = 'radio';
+
+			element = input as WrappedHTMLElement;
+			element.royale_wrapper = this;
+
+			return element;
+		}
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
new file mode 100644
index 0000000..5cb5924
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/supportClasses/TextFieldBase.as
@@ -0,0 +1,154 @@
+//
+//  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.jewel.supportClasses
+{
+	import org.apache.royale.events.Event;
+	import org.apache.royale.html.TextInput;
+    
+    import org.apache.royale.jewel.supportClasses.ITextField;
+    
+    COMPILE::JS
+    {
+        import goog.events;
+        import org.apache.royale.core.WrappedHTMLElement;        
+    }
+    
+    /**
+     *  The TextFieldBase class is the base class for TextField and TextArea Jewel controls
+     *  
+     *  @langversion 3.0
+     *  @playerversion Flash 10.2
+     *  @playerversion AIR 2.6
+     *  @productversion Royale 0.9.2
+     */    
+	public class TextFieldBase extends TextInput implements ITextField
+	{
+        /**
+         *  Constructor.
+         *  
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+		public function TextFieldBase()
+		{
+			super();
+		}
+
+        COMPILE::JS
+        {
+            private var _textNode:Text;
+            /**
+             *  @copy org.apache.royale.jewel.supportClasses.ITextField#textNode
+             *
+             *  @langversion 3.0
+             *  @playerversion Flash 10.2
+             *  @playerversion AIR 2.6
+             *  @productversion Royale 0.9.2
+             */
+            public function get textNode():Text
+            {
+                return _textNode;
+            }
+
+            public function set textNode(value:Text):void
+            {
+                _textNode = value;
+            }
+
+            private var _input:HTMLInputElement;
+            /**
+             *  @copy org.apache.royale.jewel.supportClasses.ITextField#input
+             *
+             *  @langversion 3.0
+             *  @playerversion Flash 10.2
+             *  @playerversion AIR 2.6
+             *  @productversion Royale 0.9.2
+             */
+            public function get input():HTMLInputElement
+            {
+                return _input;
+            }
+
+            public function set input(value:HTMLInputElement):void
+            {
+                _input = value;
+            }
+
+            private var _label:HTMLLabelElement;
+            /**
+             *  @copy org.apache.royale.jewel.supportClasses.ITextField#label
+             *
+             *  @langversion 3.0
+             *  @playerversion Flash 10.2
+             *  @playerversion AIR 2.6
+             *  @productversion Royale 0.9.2
+             */
+            public function get label():HTMLLabelElement
+            {
+                return _label;
+            }
+
+            public function set label(value:HTMLLabelElement):void
+            {
+                _label = value;
+            }
+        }
+
+        COMPILE::JS
+        /**
+		 *  override UIBase to affect positioner instead of element
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+		override protected function setClassName(value:String):void
+		{
+			positioner.className = value;           
+		}
+
+        private var _isInvalid:Boolean = false;
+        /**
+		 *  A boolean flag to activate "is-invalid" effect selector.
+         *  Defines the textfield as invalid on initial load.
+         *  Optional
+		 *
+		 *  @langversion 3.0
+		 *  @playerversion Flash 10.2
+		 *  @playerversion AIR 2.6
+		 *  @productversion Royale 0.9.2
+		 */
+        public function get isInvalid():Boolean
+        {
+            return _isInvalid;
+        }
+        public function set isInvalid(value:Boolean):void
+        {
+            _isInvalid = value;
+
+            COMPILE::JS
+            {
+                positioner.classList.toggle("is-invalid", _isInvalid);
+                typeNames = positioner.className;
+            }
+        }
+	}
+}
diff --git a/frameworks/projects/Jewel/src/main/sass/_global.sass b/frameworks/projects/Jewel/src/main/sass/_global.sass
new file mode 100644
index 0000000..b98f623
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/_global.sass
@@ -0,0 +1,66 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+@namespace "library://ns.apache.org/royale/jewel"
+
+.layout
+	.horizontal
+		white-space: nowrap
+	.vertical
+		display: block !important
+	
+
+/**
+ * Jewel TextField
+ */
+TextField
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.TextModel")
+	//IBeadView: ClassReference("org.apache.royale.html.beads.TextInputWithBorderView");
+	//IBeadController: ClassReference("org.apache.royale.html.beads.controllers.EditableTextKeyboardController");
+
+.vTextField--input
+.vTextField--label
+
+/**
+ * Jewel Slider
+ */
+Slider
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.RangeModel")
+	IBeadView:  ClassReference("org.apache.royale.jewel.beads.SliderView")
+	IBeadLayout: ClassReference("org.apache.royale.html.beads.layouts.HorizontalSliderLayout")
+	IBeadController: ClassReference("org.apache.royale.html.beads.controllers.HSliderMouseController")
+	position: relative
+
+.SliderTrack
+	position: absolute
+
+.SliderThumb
+	position: absolute
+	border-radius: 15px
+
+@media -royale-swf
+	Slider
+		iThumbView: ClassReference("org.apache.royale.jewel.beads.SliderThumbView")
+		iTrackView: ClassReference("org.apache.royale.jewel.beads.SliderTrackView")
+
+RadioButton
+	IBeadModel: ClassReference("org.apache.royale.html.beads.models.ValueToggleButtonModel")
+	IBeadView:  ClassReference("org.apache.royale.jewel.beads.RadioButtonView")
+	//font-size: 11px
+	//font-family: Arial
diff --git a/frameworks/projects/Jewel/src/main/sass/jewel.sass b/frameworks/projects/Jewel/src/main/sass/jewel.sass
new file mode 100644
index 0000000..598c490
--- /dev/null
+++ b/frameworks/projects/Jewel/src/main/sass/jewel.sass
@@ -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.
+ */
+
+// Variables
+//import "variables"
+//import "mixins"
+//import "functions"
+
+// Global
+@import "global"
+
+// Components
+
+// Button
+//import "button"
+
+// TextButton
+//import "textbutton"
+
+// TextField
+//import "textfield"
\ No newline at end of file
diff --git a/frameworks/projects/pom.xml b/frameworks/projects/pom.xml
index 4a548f3..6545709 100644
--- a/frameworks/projects/pom.xml
+++ b/frameworks/projects/pom.xml
@@ -60,6 +60,7 @@
     <module>Text</module>
     <module>TLF</module>
     <module>RoyaleSite</module>
+    <module>Jewel</module>
   </modules>
 
   <profiles>
diff --git a/frameworks/themes/JewelTheme/.vscode/launch.json b/frameworks/themes/JewelTheme/.vscode/launch.json
new file mode 100644
index 0000000..5dfb672
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/launch.json
@@ -0,0 +1,21 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Launch Chrome against debug.html, with sourcemaps",
+            "type": "chrome",
+            "request": "launch",
+            "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+            "sourceMaps": true,
+            "preLaunchTask": "mvn"
+        },
+        {
+            "name": "Launch Firefox against debug.html, with sourcemaps",
+            "type": "firefox",
+            "request": "launch",
+            "file": "${workspaceRoot}/target/javascript/bin/js-debug/index.html",
+            "sourceMaps": true,
+            "preLaunchTask": "mvn"
+        }
+    ]
+}
diff --git a/frameworks/themes/JewelTheme/.vscode/settings.json b/frameworks/themes/JewelTheme/.vscode/settings.json
new file mode 100644
index 0000000..1f5a970
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "nextgenas.sdk.framework": "/Users/carlosrovira/Dev/Royale/Sdks/apache-royale-0.9.2-SNAPSHOT"
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/.vscode/tasks.json b/frameworks/themes/JewelTheme/.vscode/tasks.json
new file mode 100644
index 0000000..5d6198d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/.vscode/tasks.json
@@ -0,0 +1,8 @@
+{
+	// for the documentation about the tasks.json format
+	"version": "0.1.0",
+	"command": "mvn",
+	"args": ["clean", "install", "-DskipTests"],
+	"isShellCommand": true,
+	"showOutput": "always"
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/asconfig.json b/frameworks/themes/JewelTheme/asconfig.json
new file mode 100644
index 0000000..1cb76c0
--- /dev/null
+++ b/frameworks/themes/JewelTheme/asconfig.json
@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+ {
+    "config": "royale",
+    "type": "lib",
+    "compilerOptions": {
+        "debug": true,
+        "targets": [
+            "JSRoyale",
+            "SWF"
+        ],
+        "include-classes": [
+            "JewelThemeClasses"
+        ],
+        "include-sources": [
+            "src/main/royale"
+        ],
+        "output": "target/JewelTheme.swc"
+    }
+}
diff --git a/frameworks/themes/JewelTheme/build.xml b/frameworks/themes/JewelTheme/build.xml
new file mode 100644
index 0000000..6174e3e
--- /dev/null
+++ b/frameworks/themes/JewelTheme/build.xml
@@ -0,0 +1,133 @@
+<?xml version="1.0"?>
+<!--
+
+  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.
+
+-->
+
+
+<project name="JewelTheme" default="main" basedir=".">
+    <property name="ROYALE_HOME" location="../../.."/>
+    
+    <property file="${ROYALE_HOME}/env.properties"/>
+    <property environment="env"/>
+    <property file="${ROYALE_HOME}/build.properties"/>
+    <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+    
+    <property name="target.name" value="${ant.project.name}.swc" />
+    
+    <!-- doesn't contain compiled files so only need to compile JS version -->
+    <target name="main" depends="clean,check-compiler,compile,compile-js,copy-swc,test" description="Full build of ${ant.project.name}.swc">
+    </target>
+    
+    <target name="compile-js">
+        <!-- doesn't contain compiled files so only need to compile JS version
+        <ant dir="${ROYALE_HOME}/frameworks/js/projects/${ant.project.name}JS/" inheritAll="false" >
+            <property name="ROYALE_SWF_COMPILER_HOME" value="${ROYALE_SWF_COMPILER_HOME}"/>
+            <property name="ROYALE_COMPILER_HOME" value="${ROYALE_COMPILER_HOME}"/>
+            <property name="ROYALE_HOME" value="${ROYALE_HOME}"/>
+        </ant>
+         -->
+    </target>
+    
+    <target name="copy-swc" if="env.AIR_HOME">
+        <copy file="${basedir}/target/${target.name}" tofile="${ROYALE_HOME}/frameworks/libs/${target.name}" />
+    </target>
+    
+    <target name="check-for-tests" >
+        <condition property="skip-tests" >
+            <not>
+                <available file="${basedir}/src/test/royale/build.xml" />
+            </not>
+        </condition>
+    </target>
+    
+    <target name="test" depends="check-for-tests" unless="skip-tests">
+        <ant dir="src/test/royale" />
+    </target>
+    
+    <target name="clean">
+        <delete failonerror="false">
+            <fileset dir="${ROYALE_HOME}/frameworks/libs">
+                <include name="${target.name}"/>
+            </fileset>
+        </delete>
+        <delete failonerror="false" includeemptydirs="true">
+            <fileset dir="${basedir}/target">
+                <include name="**/**"/>
+            </fileset>
+        </delete>
+        <antcall target="clean-tests" />
+    </target>
+    
+    <target name="clean-tests" depends="check-for-tests" unless="skip-tests">
+        <ant dir="src/test/royale" target="clean"/>
+    </target>
+    
+    <target name="compile" description="Compiles .as files into .swc" if="env.AIR_HOME">
+        <echo message="Compiling libs/${ant.project.name}.swc"/>
+        <echo message="ROYALE_HOME: ${ROYALE_HOME}"/>
+        <echo message="ROYALE_SWF_COMPILER_HOME: ${ROYALE_SWF_COMPILER_HOME}"/>
+        <echo message="ROYALE_COMPILER_HOME: ${ROYALE_COMPILER_HOME}"/>
+        
+        <java jar="${ROYALE_COMPILER_HOME}/lib/compc.jar" fork="true" >
+            <jvmarg value="-Xmx384m" />
+            <jvmarg value="-Dsun.io.useCanonCaches=false" />
+            <jvmarg value="-Droyalelib=${ROYALE_HOME}/frameworks" />
+            <arg value="+royalelib=${ROYALE_HOME}/frameworks" />
+            <arg value="+playerglobal.version=${playerglobal.version}" />
+            <arg value="+env.AIR_HOME=${env.AIR_HOME}" />
+            <arg value="-compiler.strict-xml=true" />
+            <arg value="-compiler.targets=SWF" />
+            <arg value="-output=${basedir}/target/${target.name}" />
+            <arg value="-load-config=${basedir}/src/main/config/compile-swf-config.xml" />
+            <arg value="-js-load-config=${ROYALE_HOME}/frameworks/js-config.xml" />
+            <arg value="-js-load-config+=${basedir}/../../js/projects/${ant.project.name}JS/src/main/config/compile-js-config.xml" />
+        </java>
+    </target>
+    
+    <target name="check-compiler" depends="check-compiler-home,check-transpiler-home">
+        <path id="lib.path">
+            <fileset dir="${ROYALE_COMPILER_HOME}/lib" includes="compiler-royaleTasks.jar"/>
+        </path>
+        <taskdef resource="flexTasks.tasks" classpathref="lib.path"/>
+    </target>
+    
+    <target name="check-compiler-home"
+        description="Set ROYALE_SWF_COMPILER_HOME to point at the compiler.">
+        
+        <available file="${ROYALE_HOME}/lib/compiler-mxmlc.jar"
+        type="file"
+        property="ROYALE_SWF_COMPILER_HOME"
+        value="${ROYALE_HOME}"/>
+        
+        <fail message="ROYALE_SWF_COMPILER_HOME must be set to a folder with a lib sub-folder containing compiler-mxmlc.jar such as the compiler folder in royale-compiler repo or the root of a Royale SDK"
+        unless="ROYALE_SWF_COMPILER_HOME"/>
+    </target>
+    
+    <target name="check-transpiler-home"
+        description="Set ROYALE_COMPILER_HOME to point at the cross-compiler.">
+        
+        <available file="${ROYALE_HOME}/js/lib/jsc.jar"
+        type="file"
+        property="ROYALE_COMPILER_HOME"
+        value="${ROYALE_HOME}/js"/>
+        
+        <fail message="ROYALE_COMPILER_HOME must be set to a folder with a lib sub-folder containing jsc.jar such as the compiler-jx folder in royale-compiler repo or the js folder of a Royale SDK"
+        unless="ROYALE_COMPILER_HOME"/>
+    </target>
+    
+</project>
diff --git a/frameworks/themes/JewelTheme/pom.xml b/frameworks/themes/JewelTheme/pom.xml
new file mode 100644
index 0000000..055a04d
--- /dev/null
+++ b/frameworks/themes/JewelTheme/pom.xml
@@ -0,0 +1,88 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+
+  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.
+
+-->
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+  <modelVersion>4.0.0</modelVersion>
+
+  <parent>
+    <groupId>org.apache.royale.framework</groupId>
+    <artifactId>themes</artifactId>
+    <version>0.9.3-SNAPSHOT</version>
+  </parent>
+
+  <artifactId>JewelTheme</artifactId>
+  <version>0.9.3-SNAPSHOT</version>
+  <packaging>swc</packaging>
+
+  <name>Apache Royale: Framework: Themes: JewelTheme</name>
+
+  <build>
+    <sourceDirectory>src/main/royale</sourceDirectory>
+    <plugins>
+      <plugin>
+        <groupId>org.apache.royale.compiler</groupId>
+        <artifactId>royale-maven-plugin</artifactId>
+        <version>${royale.compiler.version}</version>
+        <extensions>true</extensions>
+        <configuration>
+          <includeClasses>
+            <includeClass>JewelThemeClasses</includeClass>
+          </includeClasses>
+          <includeFiles>
+            <include-file>
+              <name>assets/*</name>
+              <path>../src/main/resources/assets/*</path>
+            </include-file>
+            <include-file>
+              <name>royale-jewel-blue.css</name>
+              <path>../src/main/resources/royale-jewel-blue.css</path>
+            </include-file>
+          </includeFiles>
+        </configuration>
+      </plugin>
+      <plugin>
+        <groupId>nl.geodienstencentrum.maven</groupId>
+        <artifactId>sass-maven-plugin</artifactId>
+        <version>3.5.2</version>
+        <configuration>
+          <resources>
+              <resource>
+                  <source>
+                      <directory>${basedir}/src/main/sass</directory>
+                      <includes>
+                          <include>**/*.sass</include>
+                      </includes>
+                  </source>
+                  <destination>${basedir}/src/main/resources</destination>
+              </resource>
+          </resources>
+        </configuration>
+        <executions>
+          <execution>
+              <id>generate-css-using-sass</id>
+              <goals>
+                  <goal>update-stylesheets</goal>
+              </goals>
+          </execution>
+        </executions>
+      </plugin>
+    </plugins>
+  </build>
+
+</project>
diff --git a/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
new file mode 100644
index 0000000..bb3e613
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/config/compile-swf-config.xml
@@ -0,0 +1,90 @@
+<!--
+
+  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.
+
+-->
+<royale-config>
+
+    <compiler>
+        <accessible>false</accessible>
+        
+        <!-- build both SWF and JS. -->
+        <targets>
+            <target>JSRoyale</target>
+        </targets>
+        <strict-xml>true</strict-xml>
+
+        <external-library-path>
+            <path-element>${env.AIR_HOME}/frameworks/libs/air/airglobal.swc</path-element>
+            <path-element>../../../../../libs/Binding.swc</path-element>
+            <path-element>../../../../../libs/Core.swc</path-element>
+            <path-element>../../../../../libs/Graphics.swc</path-element>
+            <path-element>../../../../../libs/Basic.swc</path-element>
+            <path-element>../../../../../libs/Collections.swc</path-element>
+            <path-element>../../../../../libs/HTML.swc</path-element>
+        </external-library-path>
+        
+        <allow-subclass-overrides>true</allow-subclass-overrides>
+		<mxml>
+			<children-as-data>true</children-as-data>
+		</mxml>
+		<binding-value-change-event>org.apache.royale.events.ValueChangeEvent</binding-value-change-event>
+		<binding-value-change-event-kind>org.apache.royale.events.ValueChangeEvent</binding-value-change-event-kind>
+		<binding-value-change-event-type>valueChange</binding-value-change-event-type>
+
+        <define>
+            <name>COMPILE::SWF</name>
+            <value>true</value>
+        </define>
+        <define>
+            <name>COMPILE::JS</name>
+            <value>true</value>
+        </define>
+
+        <keep-as3-metadata>
+          <name>Bindable</name>
+          <name>Managed</name>
+          <name>ChangeEvent</name>
+          <name>NonCommittingChangeEvent</name>
+          <name>Transient</name>
+        </keep-as3-metadata>
+	  
+        <locale/>
+        
+        <library-path/>
+
+        <source-path>
+            <path-element>../royale</path-element>
+        </source-path>
+        
+        <warn-no-constructor>false</warn-no-constructor>
+    </compiler>
+    
+    <include-file>
+        <name>defaults.css</name>
+        <path>../resources/defaults.css</path>
+    </include-file>
+
+    <include-lookup-only>true</include-lookup-only>
+    
+    <include-classes>
+        <class>JewelThemeClasses</class>
+    </include-classes>
+    
+    <target-player>${playerglobal.version}</target-player>
+	
+
+</royale-config>
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
new file mode 100644
index 0000000..ad0c128
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/JewelButton2.svg
@@ -0,0 +1,44 @@
+
+<!--
+
+  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.
+
+-->
+
+<svg width="152px" height="42px" viewBox="0 0 152 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <linearGradient x1="50%" y1="3.10307717%" x2="50%" y2="98.2081246%" id="linearGradient-1">
+            <stop stop-color="#3BB0FF" offset="0%"></stop>
+            <stop stop-color="#1E36FA" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0" y="0" width="150" height="40" rx="3"></rect>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="98.2362085%" id="linearGradient-3">
+            <stop stop-color="#8EDEFF" offset="0%"></stop>
+            <stop stop-color="#1D89E6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="JewelButton">
+            <g id="Background" transform="translate(1.000000, 1.000000)">
+                <g>
+                    <use fill="url(#linearGradient-1)" fill-rule="evenodd" xlink:href="#path-2"></use>
+                    <rect stroke="#244084" stroke-width="1" x="-0.5" y="-0.5" width="151" height="41" rx="3"></rect>
+                </g>
+                <rect stroke="url(#linearGradient-3)" x="0.5" y="0.5" width="149" height="39" rx="3"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg b/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
new file mode 100644
index 0000000..63bfc72
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/assets/jewel-button.svg
@@ -0,0 +1,37 @@
+
+
+<!--
+
+  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.
+
+-->
+<svg viewBox="0 0 126 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <defs>
+        <rect id="path-1" x="0" y="0" width="126" height="48" rx="4"></rect>
+    </defs>
+    <g id="Jewel" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="button/large">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="mask" fill="#009EF5" fill-rule="evenodd" xlink:href="#path-1"></use>
+            <g id="colors/primary" mask="url(#mask-2)" fill="#006CEB" fill-rule="evenodd">
+                <rect x="0" y="0" width="126" height="48"></rect>
+            </g>
+            <text id="CTA" mask="url(#mask-2)" font-family="Lato-Bold, Lato" font-size="18" font-weight="bold" line-spacing="24" letter-spacing="-0.225000009"></text>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
new file mode 100644
index 0000000..e642ce7
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-blue.css
@@ -0,0 +1,263 @@
+/**
+ *  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.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+.royale *, .royale *:before, .royale *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.royale {
+  padding: 10px;
+  margin: 10px;
+}
+
+/**
+ * Jewel Button
+ */
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 16px;
+  min-width: 74px;
+  min-height: 34px;
+  /* Background: */
+  border: none;
+  border-radius: 3px;
+}
+
+.jewel.button {
+  background-color: rgba(0, 0, 0, 0.3);
+  transition-duration: 0.4s;
+  color: rgba(0, 0, 0, 0.4);
+}
+.jewel.button:hover {
+  background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.button:active {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.button:focus {
+  outline: 0;
+}
+.jewel.button[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.button.primary {
+  background-color: #006CEB;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.button.primary:hover {
+  background-color: #0b7bff;
+}
+.jewel.button.primary:active {
+  background-color: #005ecc;
+}
+.jewel.button.primary:focus {
+  outline: 0;
+}
+.jewel.button.primary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.button.secondary {
+  background-color: #011833;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.button.secondary:hover {
+  background-color: #022651;
+}
+.jewel.button.secondary:active {
+  background-color: #000a15;
+}
+.jewel.button.secondary:focus {
+  outline: 0;
+}
+.jewel.button.secondary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.button.emphasized {
+  background-color: #1FD348;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.button.emphasized:hover {
+  background-color: #30e158;
+}
+.jewel.button.emphasized:active {
+  background-color: #1bb83f;
+}
+.jewel.button.emphasized:focus {
+  outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.jewel.textbutton, .jewel.textbutton:hover {
+  /* TextField */
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.jewel.textbutton [disabled] {
+  text-shadow: unset;
+}
+
+.jewel.textbutton {
+  background-color: rgba(0, 0, 0, 0.3);
+  transition-duration: 0.4s;
+  color: rgba(0, 0, 0, 0.4);
+}
+.jewel.textbutton:hover {
+  background-color: rgba(15, 15, 15, 0.3);
+}
+.jewel.textbutton:active {
+  background-color: rgba(0, 0, 0, 0.3);
+}
+.jewel.textbutton:focus {
+  outline: 0;
+}
+.jewel.textbutton[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.textbutton.primary {
+  background-color: #006CEB;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.textbutton.primary:hover {
+  background-color: #0b7bff;
+}
+.jewel.textbutton.primary:active {
+  background-color: #005ecc;
+}
+.jewel.textbutton.primary:focus {
+  outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.textbutton.secondary {
+  background-color: #011833;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.textbutton.secondary:hover {
+  background-color: #022651;
+}
+.jewel.textbutton.secondary:active {
+  background-color: #000a15;
+}
+.jewel.textbutton.secondary:focus {
+  outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+  background-color: #1FD348;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.textbutton.emphasized:hover {
+  background-color: #30e158;
+}
+.jewel.textbutton.emphasized:active {
+  background-color: #1bb83f;
+}
+.jewel.textbutton.emphasized:focus {
+  outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+/**
+ * Jewel TextField
+ */
+TextField {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 300px;
+  max-width: 100%;
+  margin: 0;
+}
+
+.vTextField--input {
+  font-size: 16px;
+  font-family: "Lato", sans-serif;
+  border: none;
+  border-bottom: 2px solid;
+  border-bottom-color: #ff0000;
+  display: block;
+  margin: 0;
+  padding: 4 0;
+  width: 100px;
+  background: transparent;
+  text-align: left;
+  color: inherit;
+  outline: none;
+}
+
+.vTextField--label {
+  bottom: 0;
+  color: #ff0000;
+  font-size: 13px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  position: absolute;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/*# sourceMappingURL=royale-jewel-blue.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
new file mode 100644
index 0000000..60f16ca
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/resources/royale-jewel-red.css
@@ -0,0 +1,263 @@
+/**
+ *  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.
+ */
+@namespace j "library://ns.apache.org/royale/jewel";
+@namespace "http://www.w3.org/1999/xhtml";
+.royale *, .royale *:before, .royale *:after {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.royale {
+  padding: 10px;
+  margin: 10px;
+}
+
+/**
+ * Jewel Button
+ */
+.jewel.button, .jewel.button:hover, .jewel.textbutton, .jewel.textbutton:hover {
+  cursor: pointer;
+  display: inline-block;
+  margin: 0;
+  padding: 10px 16px;
+  min-width: 74px;
+  min-height: 34px;
+  /* Background: */
+  border: none;
+  border-radius: 3px;
+}
+
+.jewel.button {
+  background-color: rgba(0, 0, 0, 0.2);
+  transition-duration: 0.4s;
+  color: rgba(0, 0, 0, 0.5);
+}
+.jewel.button:hover {
+  background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.button:active {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.button:focus {
+  outline: 0;
+}
+.jewel.button[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.button.primary {
+  background-color: #FF0000;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.button.primary:hover {
+  background-color: #ff1f1f;
+}
+.jewel.button.primary:active {
+  background-color: #e00000;
+}
+.jewel.button.primary:focus {
+  outline: 0;
+}
+.jewel.button.primary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.button.secondary {
+  background-color: #342F30;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.button.secondary:hover {
+  background-color: #443e3f;
+}
+.jewel.button.secondary:active {
+  background-color: #242021;
+}
+.jewel.button.secondary:focus {
+  outline: 0;
+}
+.jewel.button.secondary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.button.emphasized {
+  background-color: #016936;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.button.emphasized:hover {
+  background-color: #018746;
+}
+.jewel.button.emphasized:active {
+  background-color: #014b26;
+}
+.jewel.button.emphasized:focus {
+  outline: 0;
+}
+.jewel.button.emphasized[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+/**
+ * Jewel TextButton
+ */
+.jewel.textbutton, .jewel.textbutton:hover {
+  /* TextField */
+  font-family: "Lato-Bold", sans-serif;
+  font-style: bold;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  text-decoration: none;
+}
+.jewel.textbutton [disabled] {
+  text-shadow: unset;
+}
+
+.jewel.textbutton {
+  background-color: rgba(0, 0, 0, 0.2);
+  transition-duration: 0.4s;
+  color: rgba(0, 0, 0, 0.5);
+}
+.jewel.textbutton:hover {
+  background-color: rgba(15, 15, 15, 0.2);
+}
+.jewel.textbutton:active {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+.jewel.textbutton:focus {
+  outline: 0;
+}
+.jewel.textbutton[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.textbutton.primary {
+  background-color: #FF0000;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.textbutton.primary:hover {
+  background-color: #ff1f1f;
+}
+.jewel.textbutton.primary:active {
+  background-color: #e00000;
+}
+.jewel.textbutton.primary:focus {
+  outline: 0;
+}
+.jewel.textbutton.primary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.textbutton.secondary {
+  background-color: #342F30;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.textbutton.secondary:hover {
+  background-color: #443e3f;
+}
+.jewel.textbutton.secondary:active {
+  background-color: #242021;
+}
+.jewel.textbutton.secondary:focus {
+  outline: 0;
+}
+.jewel.textbutton.secondary[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+.jewel.textbutton.emphasized {
+  background-color: #016936;
+  transition-duration: 0.4s;
+  color: white;
+}
+.jewel.textbutton.emphasized:hover {
+  background-color: #018746;
+}
+.jewel.textbutton.emphasized:active {
+  background-color: #014b26;
+}
+.jewel.textbutton.emphasized:focus {
+  outline: 0;
+}
+.jewel.textbutton.emphasized[disabled] {
+  background-color: #CCCCCC;
+  color: #888888;
+  cursor: unset;
+}
+
+/**
+ * Jewel TextField
+ */
+TextField {
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 300px;
+  max-width: 100%;
+  margin: 0;
+}
+
+.vTextField--input {
+  font-size: 16px;
+  font-family: "Lato", sans-serif;
+  border: none;
+  border-bottom: 2px solid;
+  border-bottom-color: #ff0000;
+  display: block;
+  margin: 0;
+  padding: 4 0;
+  width: 100px;
+  background: transparent;
+  text-align: left;
+  color: inherit;
+  outline: none;
+}
+
+.vTextField--label {
+  bottom: 0;
+  color: #ff0000;
+  font-size: 13px;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+  position: absolute;
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-align: left;
+}
+
+/*# sourceMappingURL=royale-jewel-red.css.map */
diff --git a/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
new file mode 100644
index 0000000..3e88523
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/royale/JewelThemeClasses.as
@@ -0,0 +1,36 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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
+{
+
+    /**
+     *  @private
+     *  This class is used to link additional classes into JewelTheme.swc
+     *  beyond those that are found by dependecy analysis starting
+     *  from the classes specified in manifest.xml.
+     */
+    internal class JewelThemeClasses
+    {
+        COMPILE::JS
+	    {
+            import org.apache.royale.jewel.JewelThemeFontInject; JewelThemeFontInject;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
new file mode 100644
index 0000000..9d5f913
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/royale/org/apache/royale/jewel/JewelThemeFontInject.as
@@ -0,0 +1,46 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.jewel
+{
+
+    /**
+     *  @private
+     *  This class is used to link the font in html
+     */
+    public class JewelThemeFontInject
+    {
+        /**
+         *  constructor.
+         *
+		 * <inject_html>
+		 * <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
+     	 * </inject_html>
+	 	 * 
+         *  @langversion 3.0
+         *  @playerversion Flash 10.2
+         *  @playerversion AIR 2.6
+         *  @productversion Royale 0.9.2
+         */
+		public function JewelThemeFontInject()
+		{
+            super();
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_button.sass b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
new file mode 100644
index 0000000..d04d186
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_button.sass
@@ -0,0 +1,73 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel Button
+ */
+%button-def
+	cursor: pointer
+	
+	display: inline-block
+	margin: 0 //1rem
+	padding: 10px 16px //.938em 1.875em
+	min-width: $button-min-width
+	min-height: 34px
+
+	/* Background: */
+	border: none // .094em solid 
+	border-radius: 3px //.625em
+	//box-shadow: 0 .375em .313em -.313em rgba(black,.8), inset 0 .063em $off-wht, inset 0 -.188em rgba(black,.15)
+
+.jewel.button, .jewel.button:hover
+	@extend %button-def
+
+.jewel.button
+	+button-theme($default-color, $default-font-color)
+
+.jewel.button.primary
+	+button-theme($primary-color, $font-color)
+
+.jewel.button.secondary
+	+button-theme($secondary-color, $font-color)
+
+.jewel.button.emphasized
+	+button-theme($emphasized-color, $font-color)
+
+
+//SVGs
+//border:1px; /*without this svg shows scaled and bigger*/
+//border-image-source: url(assets/jewel-button.svg) ;
+//border-image-slice: 4;
+//border-image-width: 4;
+
+//background-image: linear-gradient(#3BB0FF, #1E36FA);
+
+//background-color: #006CEB;
+//background-size: cover;
+//background-repeat: no-repeat;
+//background-clip: padding-box;
+
+//background: url(assets/4slicewithpattern.svg);
+//background-size: cover;
+//width: fit-content;
+//height: fit-content;
+
+//.button:active	
+//box-shadow: #E6431D 0 1px 0 inset;
+//text-shadow: 0 -1px 0 #5F3A29;
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_functions.sass b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
new file mode 100644
index 0000000..0c6fb82
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_functions.sass
@@ -0,0 +1,18 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_global.sass b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
new file mode 100644
index 0000000..3a8a0ef
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_global.sass
@@ -0,0 +1,32 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+@namespace j "library://ns.apache.org/royale/jewel"
+@namespace "http://www.w3.org/1999/xhtml"
+
+
+.royale *, .royale *:before, .royale *:after
+	-moz-box-sizing: border-box
+	-webkit-box-sizing: border-box
+	box-sizing: border-box
+	//fonts: ClassReference("org.apache.royale.jewel.JewelThemeFontInject")
+
+.royale
+	padding: 10px
+	margin: 10px
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
new file mode 100644
index 0000000..f4e7302
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_mixins.sass
@@ -0,0 +1,43 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+=button-theme($button-color, $text-color)
+	//border-color: darken($button-color, 20%)
+	background-color: $button-color
+	transition:
+		duration: 0.4s
+	color: $text-color
+	&:hover
+		background-color: lighten($button-color, 6%)
+		//box-shadow: 0 .125em $off-wht, inset 0 .063em $off-wht, inset 0 -.188em lighten($btn-color, 2%)
+	&:active
+		background-color: darken($button-color, 6%)
+		//box-shadow: 0 .063em $off-wht, inset 0 0 1.094em darken($btn-color, 40%), inset 0 .063em darken($btn-color, 20%),inset 0 -0.188em darken($btn-color, 20%)
+	&:focus
+		outline: 0
+	&[disabled]
+		background-color: $disabled-color
+		color: $font-disabled-color
+		cursor: unset
+
+//=trans($val...)
+//	-webkit-transition: $val
+//	-moz-transition: $val
+//	-o-transition: $val
+//	transition: $val
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
new file mode 100644
index 0000000..c24dbec
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textbutton.sass
@@ -0,0 +1,64 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+ 
+/**
+ * Jewel TextButton
+ */
+%textbutton-def
+	@extend %button-def
+	/* TextField */
+	font:
+		family: $font-stack 
+		style: bold 
+		size: .7rem 
+	//+trans(0.2s ease-in-out)
+	text:
+		transform: uppercase
+		decoration: none 
+		//shadow: 0 .063em rgba(black,.3)
+	[disabled]
+		text:
+			shadow: unset
+
+.jewel.textbutton, .jewel.textbutton:hover
+	@extend %textbutton-def
+
+.jewel.textbutton
+	+button-theme($default-color, $default-font-color)
+
+.jewel.textbutton.primary
+	+button-theme($primary-color, $font-color)
+
+.jewel.textbutton.secondary
+	+button-theme($secondary-color, $font-color)
+
+.jewel.textbutton.emphasized
+	+button-theme($emphasized-color, $font-color)
+
+// /* TextField: */
+//	font-family: $font-stack
+//	font-size: 14px
+//	font-weight: bold
+//	color: $font-normal-color
+//	text-shadow: 0 1px 0 #555
+
+//	padding: 10px 0px
+//	display: inline-block
+//	min-width: 80px
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass b/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
new file mode 100644
index 0000000..84b696c
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_textfield.sass
@@ -0,0 +1,67 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * Jewel TextField
+ */
+TextField
+	position: relative
+	display: inline-block
+	box-sizing: border-box
+	width: 300px
+	max-width: 100%
+	margin: 0
+
+.vTextField--input
+	font-size: 16px
+	font-family: 'Lato', sans-serif
+
+	border: none
+	border-bottom: 2px solid
+	border-bottom-color: #ff0000
+	display: block
+	margin: 0
+	padding: 4 0
+	width: 100px
+	background: transparent
+	text-align: left
+	color: inherit
+	outline: none
+
+.vTextField--label
+	bottom: 0
+	color: #ff0000
+	font-size: 13px
+	left: 0
+	right: 0
+	pointer-events: none
+	position: absolute
+	display: block
+	width: 100%
+	overflow: hidden
+	white-space: nowrap
+	text-align: left
+
+//    padding: 5px;
+//    border: solid 1px #666666;
+//    border-radius: 6px;
+//    color: #333333;
+//:hover 
+//    padding: 5px;
+//    background-color: #DFDFDF;
diff --git a/frameworks/themes/JewelTheme/src/main/sass/_variables.sass b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
new file mode 100644
index 0000000..b1f1f39
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/_variables.sass
@@ -0,0 +1,31 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+
+$font-stack: 'Lato-Bold', sans-serif
+
+// Common Colors
+$white: rgba(white,.9)
+$disabled-color: #CCCCCC
+$font-disabled-color: #888888
+
+// Button variables
+$button-min-width: 74px !default
+
+
+
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
new file mode 100644
index 0000000..3bdf08e
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_blue-color-palette.sass
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+// Color Themes
+$default-color: rgba(0,0,0,.3)
+$primary-color: #006CEB
+$secondary-color: #011833
+$emphasized-color: #1FD348
+
+$default-font-color: rgba(0, 0, 0, .4)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
new file mode 100644
index 0000000..b564176
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/colors/_red-color-palette.sass
@@ -0,0 +1,26 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  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.
+//
+////////////////////////////////////////////////////////////////////////////////
+// Color Themes
+$default-color: rgba(0,0,0,0.20)
+$primary-color: #FF0000
+$secondary-color: #342F30
+$emphasized-color: #016936
+
+$default-font-color: rgba(0, 0, 0, .5)
+$font-color: white
\ No newline at end of file
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
new file mode 100644
index 0000000..3c82eb7
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-blue.sass
@@ -0,0 +1,36 @@
+/**
+ *  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.
+ */
+
+// Variables
+@import "colors/blue-color-palette"
+@import "variables"
+@import "mixins"
+@import "functions"
+
+// Global
+@import "global"
+
+// Components
+
+// Button
+@import "button"
+
+// TextButton
+@import "textbutton"
+
+// TextField
+@import "textfield"
diff --git a/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
new file mode 100644
index 0000000..54e8f75
--- /dev/null
+++ b/frameworks/themes/JewelTheme/src/main/sass/royale-jewel-red.sass
@@ -0,0 +1,36 @@
+/**
+ *  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.
+ */
+
+// Variables
+@import "colors/red-color-palette"
+@import "variables"
+@import "mixins"
+@import "functions"
+
+// Global
+@import "global"
+
+// Components
+
+// Button
+@import "button"
+
+// TextButton
+@import "textbutton"
+
+// TextField
+@import "textfield"
diff --git a/frameworks/themes/pom.xml b/frameworks/themes/pom.xml
index e674d5f..19fbbe6 100644
--- a/frameworks/themes/pom.xml
+++ b/frameworks/themes/pom.xml
@@ -34,6 +34,7 @@
 
   <modules>
     <module>Basic</module>
+    <module>JewelTheme</module>
   </modules>
 
   <dependencies>

-- 
To stop receiving notification emails like this one, please contact
carlosrovira@apache.org.