royale-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From carlosrov...@apache.org
Subject [royale-asjs] 01/36: redo branch due to mistake in the rebase
Date Fri, 23 Mar 2018 07:57:01 GMT
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 6428b6326932611e84b3590c03031742e50842d7
Author: Carlos Rovira <carlosrovira@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 ++
 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 ++++++++
 frameworks/projects/Jewel/pom.xml                  | 186 +++++++++++
 .../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 +
 69 files changed, 5335 insertions(+)

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/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/frameworks/projects/Jewel/pom.xml b/frameworks/projects/Jewel/pom.xml
new file mode 100644
index 0000000..74e2bd2
--- /dev/null
+++ b/frameworks/projects/Jewel/pom.xml
@@ -0,0 +1,186 @@
+<?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>projects</artifactId>
+    <version>0.9.3-SNAPSHOT</version>
+  </parent>
+
+  <artifactId>Jewel</artifactId>
+  <version>0.9.3-SNAPSHOT</version>
+  <packaging>swc</packaging>
+
+  <name>Apache Royale: Framework: Libs: Jewel</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>
+          <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>generate-css-using-sass</id>
+              <goals>
+                  <goal>update-stylesheets</goal>
+              </goals>
+          </execution>
+        </executions>
+      </plugin>
+    </plugins>
+  </build>
+
+  <dependencies>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Core</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>swf</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Core</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Binding</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>swf</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Binding</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Graphics</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>swf</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Graphics</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Collections</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>swf</classifier>
+    </dependency>
+    <dependency>
+      <groupId>org.apache.royale.framework</groupId>
+      <artifactId>Collections</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>swf</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>HTML</artifactId>
+      <version>0.9.3-SNAPSHOT</version>
+      <type>swc</type>
+      <classifier>js</classifier>
+    </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.

Mime
View raw message