You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by pi...@apache.org on 2018/03/02 17:13:15 UTC

[royale-asjs] branch feature/type_names_class_name_issue124 updated (f21d7f2 -> 75fa06d)

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

piotrz pushed a change to branch feature/type_names_class_name_issue124
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git.


    from f21d7f2  Remove trimming from computation of class names (reference #124)
     add 02d3b2c  move ContainerUtils into ValuesManager so that we can use getComputedStyle on JS
     add 83841f0  update release_notes"
     add e526d5f  theme support in release notes
     new 8f26771  Merge branch 'develop' into feature/type_names_class_name_issue124
     new 75fa06d  Apply computeFinalClassNames function to MDL classes (reference #124)

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


Summary of changes:
 RELEASE_NOTES.md                                   |   6 +
 .../projects/Basic/src/main/royale/BasicClasses.as |   1 -
 .../royale/org/apache/royale/core/LayoutBase.as    |  83 ++--
 .../main/royale/org/apache/royale/core/UIBase.as   |   2 +-
 .../org/apache/royale/html/beads/AlertView.as      |   7 +-
 .../royale/html/beads/CSSImageAndTextButtonView.as |  60 +--
 .../apache/royale/html/beads/CSSTextButtonView.as  |  76 ++--
 .../org/apache/royale/html/beads/ContainerView.as  |  11 +-
 .../org/apache/royale/html/beads/GroupView.as      |  41 +-
 .../org/apache/royale/html/beads/PanelView.as      |   1 -
 .../royale/html/beads/PanelWithControlBarView.as   |   1 -
 .../apache/royale/html/beads/SimpleAlertView.as    |   7 +-
 .../org/apache/royale/html/beads/TextInputView.as  |  11 +-
 .../royale/html/beads/TextInputWithBorderView.as   |   6 +-
 .../royale/html/beads/layouts/DataGridLayout.as    |   8 +-
 .../layouts/FlexibleFirstChildHorizontalLayout.as  |   8 +-
 .../html/beads/layouts/HDividedContainerLayout.as  |   9 +-
 .../royale/html/beads/layouts/HScrollBarLayout.as  |   8 +-
 .../html/beads/layouts/HorizontalFlexLayout.as     |   8 +-
 .../html/beads/layouts/HorizontalFlowLayout.as     |   9 +-
 .../royale/html/beads/layouts/HorizontalLayout.as  |   7 +-
 .../layouts/HorizontalLayoutWithPaddingAndGap.as   |  12 +-
 .../layouts/OneFlexibleChildHorizontalLayout.as    |   7 +-
 .../OneFlexibleChildHorizontalLayoutForOverflow.as |   7 +-
 .../layouts/OneFlexibleChildVerticalLayout.as      |   7 +-
 .../OneFlexibleChildVerticalLayoutForOverflow.as   |   7 +-
 .../royale/html/beads/layouts/SimpleTableLayout.as |   6 +-
 .../royale/html/beads/layouts/TableCellLayout.as   |   8 +-
 .../royale/html/beads/layouts/TableHeaderLayout.as |   8 +-
 .../apache/royale/html/beads/layouts/TileLayout.as |   9 +-
 .../royale/html/beads/layouts/TreeGridLayout.as    |   8 +-
 .../html/beads/layouts/VDividedContainerLayout.as  |   9 +-
 .../royale/html/beads/layouts/VScrollBarLayout.as  |   7 +-
 .../html/beads/layouts/VerticalColumnLayout.as     |   6 +-
 .../html/beads/layouts/VerticalFlexLayout.as       |   7 +-
 .../royale/html/beads/layouts/VerticalLayout.as    |   7 +-
 .../layouts/VerticalLayoutWithPaddingAndGap.as     |  11 +-
 .../beads/layouts/VirtualListVerticalLayout.as     |   7 +-
 .../royale/html/beads/models/ViewportModel.as      |  14 +-
 .../royale/html/supportClasses/HScrollViewport.as  |   7 +-
 .../royale/html/supportClasses/OverflowViewport.as |   1 -
 .../html/supportClasses/ScrollingViewport.as       |   7 +-
 .../html/supportClasses/TextFieldItemRenderer.as   |   7 +-
 .../royale/html/supportClasses/VScrollViewport.as  |   6 +-
 .../apache/royale/html/supportClasses/Viewport.as  |   1 -
 .../royale/html/util/addOrReplaceClassName.as      |  63 ---
 .../org/apache/royale/charts/beads/ChartView.as    |   7 +-
 .../projects/Core/src/main/royale/CoreClasses.as   |   1 -
 .../org/apache/royale/core/AllCSSValuesImpl.as     | 498 ++++++++++++++++++++-
 ...tModel.as => IBorderPaddingMarginValuesImpl.as} | 106 ++---
 .../org/apache/royale/core/IViewportModel.as       |  10 +-
 .../org/apache/royale/core/SimpleCSSValuesImpl.as  | 466 ++++++++++++++++++-
 .../org/apache/royale/core/layout/EdgeData.as}     |  77 ++--
 .../org/apache/royale/core/layout/LayoutData.as}   |  66 ++-
 .../org/apache/royale/core/layout/MarginData.as}   |  32 +-
 .../org/apache/royale/core/styles/BorderStyles.as} |  74 ++-
 .../org/apache/royale/utils/CSSContainerUtils.as   | 194 --------
 .../royale/express/beads/layouts/DataGridLayout.as |   7 +-
 .../src/main/royale/org/apache/royale/mdl/Card.as  |   9 +-
 .../main/royale/org/apache/royale/mdl/CheckBox.as  |  27 +-
 .../royale/org/apache/royale/mdl/DialogActions.as  |  26 +-
 .../royale/org/apache/royale/mdl/DropDownList.as   |   4 +-
 .../main/royale/org/apache/royale/mdl/Footer.as    |  12 +-
 .../org/apache/royale/mdl/FooterBottomSection.as   |  15 +-
 .../org/apache/royale/mdl/FooterLeftSection.as     |  15 +-
 .../royale/org/apache/royale/mdl/FooterLinkList.as |  10 +-
 .../org/apache/royale/mdl/FooterMiddleSection.as   |   9 +-
 .../org/apache/royale/mdl/FooterRightSection.as    |  10 +-
 .../org/apache/royale/mdl/FooterSocialButton.as    |   9 +-
 .../org/apache/royale/mdl/FooterTopSection.as      |   9 +-
 .../src/main/royale/org/apache/royale/mdl/Grid.as  |  25 +-
 .../main/royale/org/apache/royale/mdl/GridCell.as  | 167 +++++--
 .../main/royale/org/apache/royale/mdl/Header.as    |  43 +-
 .../royale/org/apache/royale/mdl/IconToggle.as     |  24 +-
 .../src/main/royale/org/apache/royale/mdl/Menu.as  |  31 +-
 .../org/apache/royale/mdl/NavigationLayout.as      |  33 +-
 .../apache/royale/mdl/NavigationLayoutContent.as   |   6 -
 .../royale/org/apache/royale/mdl/ProgressBar.as    |  24 +-
 .../royale/org/apache/royale/mdl/RadioButton.as    |  31 +-
 .../main/royale/org/apache/royale/mdl/Spacer.as    |   6 -
 .../main/royale/org/apache/royale/mdl/Spinner.as   |  40 +-
 .../main/royale/org/apache/royale/mdl/Switch.as    |  24 +-
 .../main/royale/org/apache/royale/mdl/TabBar.as    |  29 +-
 .../royale/org/apache/royale/mdl/TabBarButton.as   |  28 +-
 .../royale/org/apache/royale/mdl/TabBarPanel.as    |  26 +-
 .../src/main/royale/org/apache/royale/mdl/Table.as |  33 +-
 .../royale/org/apache/royale/mdl/TableColumn.as    |  34 +-
 .../src/main/royale/org/apache/royale/mdl/Tabs.as  |  24 +-
 .../src/main/royale/org/apache/royale/mdl/Toast.as |   1 -
 .../apache/royale/mdl/supportClasses/CardInner.as  |  33 +-
 .../royale/mdl/supportClasses/MaterialIconBase.as  |  74 +--
 .../supportClasses/TabBarButtonItemRendererBase.as |  24 +-
 .../mdl/supportClasses/TabItemRendererBase.as      |  24 +-
 .../royale/mdl/supportClasses/TextFieldBase.as     |  37 +-
 94 files changed, 2023 insertions(+), 1100 deletions(-)
 delete mode 100644 frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as
 copy frameworks/projects/Core/src/main/royale/org/apache/royale/core/{IAlertModel.as => IBorderPaddingMarginValuesImpl.as} (51%)
 mode change 100644 => 100755
 copy frameworks/projects/{Basic/src/main/royale/org/apache/royale/html/RangeStepper.as => Core/src/main/royale/org/apache/royale/core/layout/EdgeData.as} (51%)
 copy frameworks/projects/{RoyaleSite/src/main/royale/org/apache/royale/site/data/AnchorListData.as => Core/src/main/royale/org/apache/royale/core/layout/LayoutData.as} (58%)
 copy frameworks/projects/{Basic/src/main/royale/org/apache/royale/html/beads/IDataGridView.as => Core/src/main/royale/org/apache/royale/core/layout/MarginData.as} (68%)
 copy frameworks/projects/{RoyaleSite/src/main/royale/org/apache/royale/site/data/AnchorListData.as => Core/src/main/royale/org/apache/royale/core/styles/BorderStyles.as} (58%)
 delete mode 100644 frameworks/projects/Core/src/main/royale/org/apache/royale/utils/CSSContainerUtils.as

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

[royale-asjs] 02/02: Apply computeFinalClassNames function to MDL classes (reference #124)

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

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

commit 75fa06d2853cf66008976d98899bd3c055917bcc
Author: Piotr Zarzycki <pi...@gmail.com>
AuthorDate: Fri Mar 2 18:13:05 2018 +0100

    Apply computeFinalClassNames function to MDL classes (reference #124)
---
 .../projects/Basic/src/main/royale/BasicClasses.as |   1 -
 .../main/royale/org/apache/royale/core/UIBase.as   |   2 +-
 .../royale/html/util/addOrReplaceClassName.as      |  63 --------
 .../src/main/royale/org/apache/royale/mdl/Card.as  |   9 +-
 .../main/royale/org/apache/royale/mdl/CheckBox.as  |  27 +++-
 .../royale/org/apache/royale/mdl/DialogActions.as  |  26 +++-
 .../royale/org/apache/royale/mdl/DropDownList.as   |   4 +-
 .../main/royale/org/apache/royale/mdl/Footer.as    |  12 +-
 .../org/apache/royale/mdl/FooterBottomSection.as   |  15 +-
 .../org/apache/royale/mdl/FooterLeftSection.as     |  15 +-
 .../royale/org/apache/royale/mdl/FooterLinkList.as |  10 +-
 .../org/apache/royale/mdl/FooterMiddleSection.as   |   9 +-
 .../org/apache/royale/mdl/FooterRightSection.as    |  10 +-
 .../org/apache/royale/mdl/FooterSocialButton.as    |   9 +-
 .../org/apache/royale/mdl/FooterTopSection.as      |   9 +-
 .../src/main/royale/org/apache/royale/mdl/Grid.as  |  25 ++-
 .../main/royale/org/apache/royale/mdl/GridCell.as  | 167 +++++++++++++++------
 .../main/royale/org/apache/royale/mdl/Header.as    |  43 ++++--
 .../royale/org/apache/royale/mdl/IconToggle.as     |  24 ++-
 .../src/main/royale/org/apache/royale/mdl/Menu.as  |  31 +++-
 .../org/apache/royale/mdl/NavigationLayout.as      |  33 ++--
 .../apache/royale/mdl/NavigationLayoutContent.as   |   6 -
 .../royale/org/apache/royale/mdl/ProgressBar.as    |  24 ++-
 .../royale/org/apache/royale/mdl/RadioButton.as    |  31 ++--
 .../main/royale/org/apache/royale/mdl/Spacer.as    |   6 -
 .../main/royale/org/apache/royale/mdl/Spinner.as   |  40 +++--
 .../main/royale/org/apache/royale/mdl/Switch.as    |  24 ++-
 .../main/royale/org/apache/royale/mdl/TabBar.as    |  29 +++-
 .../royale/org/apache/royale/mdl/TabBarButton.as   |  28 +++-
 .../royale/org/apache/royale/mdl/TabBarPanel.as    |  26 +++-
 .../src/main/royale/org/apache/royale/mdl/Table.as |  33 +++-
 .../royale/org/apache/royale/mdl/TableColumn.as    |  34 +++--
 .../src/main/royale/org/apache/royale/mdl/Tabs.as  |  24 ++-
 .../src/main/royale/org/apache/royale/mdl/Toast.as |   1 -
 .../apache/royale/mdl/supportClasses/CardInner.as  |  33 ++--
 .../royale/mdl/supportClasses/MaterialIconBase.as  |  74 +++++----
 .../supportClasses/TabBarButtonItemRendererBase.as |  24 ++-
 .../mdl/supportClasses/TabItemRendererBase.as      |  24 ++-
 .../royale/mdl/supportClasses/TextFieldBase.as     |  37 ++---
 39 files changed, 621 insertions(+), 421 deletions(-)

diff --git a/frameworks/projects/Basic/src/main/royale/BasicClasses.as b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
index 6d73af9..d0d8e2b 100644
--- a/frameworks/projects/Basic/src/main/royale/BasicClasses.as
+++ b/frameworks/projects/Basic/src/main/royale/BasicClasses.as
@@ -31,7 +31,6 @@ internal class BasicClasses
 	{
 		import org.apache.royale.html.util.addElementToWrapper; addElementToWrapper;
 	}
-    import org.apache.royale.html.util.addOrReplaceClassName; addOrReplaceClassName;
     import org.apache.royale.html.ToolTip; ToolTip;
 	import org.apache.royale.html.accessories.NumericOnlyTextInputBead; NumericOnlyTextInputBead;
     import org.apache.royale.html.beads.DispatchInputFinishedBead; DispatchInputFinishedBead;
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
index 5937eb2..77ed10b 100644
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
+++ b/frameworks/projects/Basic/src/main/royale/org/apache/royale/core/UIBase.as
@@ -1062,7 +1062,7 @@ package org.apache.royale.core
 		COMPILE::JS
         protected function computeFinalClassNames():String
 		{
-            return _className ? _className + " " : "" + typeNames ? typeNames : "";
+            return (_className ? _className + " " : "") + (typeNames ? typeNames : "");
 		}
 
         COMPILE::JS
diff --git a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as b/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as
deleted file mode 100644
index e1a87e0..0000000
--- a/frameworks/projects/Basic/src/main/royale/org/apache/royale/html/util/addOrReplaceClassName.as
+++ /dev/null
@@ -1,63 +0,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.
-//
-////////////////////////////////////////////////////////////////////////////////
-package org.apache.royale.html.util
-{
-    import org.apache.royale.utils.StringTrimmer;
-
-    /**
-     * Adding or replacing css class in provided className.
-     *
-     * @param className The value of components className
-     * @param newName New css class name which will be added or replace the old one in className
-     * @param oldName Old css class name which will be replaced by newName
-     *
-     * @return The resulting className with added or replaced css class specified by newName
-     */
-    public function addOrReplaceClassName(className:String, newName:String, oldName:String = null):String
-    {
-        if (!newName)
-        {
-            return className;
-        }
-
-        if (newName && oldName && className)
-        {
-            var trimmedOldName:String = StringTrimmer.trim(oldName);
-            if (className.indexOf(trimmedOldName) > -1)
-            {
-                return className.replace(trimmedOldName, StringTrimmer.trim(newName));
-            }
-            else
-            {
-                return className += " " + StringTrimmer.trim(newName);
-            }
-        }
-
-        var isClassNameEmpty:Boolean = !className;
-
-        if (isClassNameEmpty || !oldName)
-        {
-            if (isClassNameEmpty) className = "";
-
-            return className += " " + StringTrimmer.trim(newName);
-        }
-
-        return className;
-    }
-}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
index f621393..22633f3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Card.as
@@ -22,7 +22,6 @@ package org.apache.royale.mdl
 
 	COMPILE::JS
     {
-        import org.apache.royale.html.util.addOrReplaceClassName;
         import org.apache.royale.core.CSSClassList;
     }
 	/**
@@ -91,8 +90,12 @@ package org.apache.royale.mdl
                 {
                     if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
                     {
-						var classVal:String = "mdl-shadow--" + value + "dp";
-						value ? _classList.add(classVal) : _classList.remove(classVal);
+                        var classVal:String = "mdl-shadow--" + _shadow + "dp";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-shadow--" + value + "dp";
+						_classList.add(classVal);
+
                         _shadow = value;
 
                         setClassName(computeFinalClassNames());
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as
index aa1ed97..e1610bb 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/CheckBox.as
@@ -28,7 +28,7 @@ package org.apache.royale.mdl
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.events.Event;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -61,12 +61,20 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-checkbox mdl-js-checkbox";
 
             addBead(new UpgradeElement());
             addBead(new UpgradeChildren(["mdl-checkbox__ripple-container"]));
         }
-        
+
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         COMPILE::JS
         protected var input:HTMLInputElement;
 
@@ -117,6 +125,7 @@ package org.apache.royale.mdl
         {
             return _ripple;
         }
+
         public function set ripple(value:Boolean):void
         {
             if (_ripple != value)
@@ -125,11 +134,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -263,6 +270,12 @@ package org.apache.royale.mdl
                 dispatchEvent(new Event(Event.CHANGE));
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as
index c72e876..34686cf 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DialogActions.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -50,10 +50,19 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-dialog__actions";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected var _fullWidth:Boolean = false;
+
         /**
 		 *  A boolean flag to activate "mdl-dialog__actions--full-width" effect selector.
 		 *  Modifies the actions to each take the full width of the container.
@@ -69,6 +78,7 @@ package org.apache.royale.mdl
         {
             return _fullWidth;
         }
+
         public function set fullWidth(value:Boolean):void
         {
             if (_fullWidth != value)
@@ -77,13 +87,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-dialog__actions--full-width");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-dialog__actions--full-width");
-                    }
+                    var classVal:String = "mdl-dialog__actions--full-width";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as
index 00d7333..a4d3369 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/DropDownList.as
@@ -31,7 +31,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
     [Event(name="change", type="org.apache.royale.events.Event")]
@@ -207,8 +206,7 @@ package org.apache.royale.mdl
         {
 			element = super.createElement();
 
-            className = addOrReplaceClassName(className, "mdl-textfield--floating-label");
-
+            element.classList.add("mdl-textfield--floating-label");
             return element;
         }
     }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as
index eb1c4e5..b111f5f 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Footer.as
@@ -24,7 +24,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -75,6 +74,7 @@ package org.apache.royale.mdl
         {
             return _mini;
         }
+
         public function set mini(value:Boolean):void
         {
             _mini = value;
@@ -82,15 +82,11 @@ package org.apache.royale.mdl
 			COMPILE::JS
             {
 				element.classList.remove(typeNames);
-				if(!_mini)
-				{
-                    element.classList.add("mdl-mega-footer");
-                    className = addOrReplaceClassName(className, "mdl-mega-footer");
-				}
-				else
+
+				if (_mini)
 				{
                     typeNames = "mdl-mini-footer";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer");
+                    setClassName(computeFinalClassNames());
 				}
             }
         }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as
index bc3e0d2..0f474e3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterBottomSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -70,16 +69,12 @@ package org.apache.royale.mdl
 
 			if(parent is Footer)
 			{
-				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__bottom-section");
-				}
-				else
-				{
+                element.classList.remove(typeNames);
+                if (Footer(parent).mini)
+                {
                     typeNames = "mdl-mini-footer__bottom-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__bottom-section");
-				}
+                    setClassName(computeFinalClassNames());
+                }
 			}
 			else
 			{
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as
index 8644d25..6bb90ea 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLeftSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -70,16 +69,12 @@ package org.apache.royale.mdl
 
 			if(parent is Footer)
 			{
-				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__left-section");
-				}
-				else
-				{
+                element.classList.remove(typeNames);
+                if (Footer(parent).mini)
+                {
                     typeNames = "mdl-mini-footer__left-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__left-section");
-				}
+                    setClassName(computeFinalClassNames());
+                }
 
 			}
 			else if(parent is IFooterSection)
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as
index b4efb8f..a1eec49 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterLinkList.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -85,15 +84,10 @@ package org.apache.royale.mdl
 				if(UIBase(parentSection).parent is Footer)
 				{
 					element.classList.remove(typeNames);
-					if(!Footer(UIBase(parentSection).parent).mini)
-					{
-                        className = addOrReplaceClassName(className, "mdl-mega-footer__link-list");
-
-					}
-					else
+					if (Footer(UIBase(parentSection).parent).mini)
 					{
                         typeNames = "mdl-mini-footer__link-list";
-                        className = addOrReplaceClassName(className, "mdl-mini-footer__link-list");
+                        setClassName(computeFinalClassNames());
 					}
 				}
 			}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as
index 1d2026d..947ee2c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterMiddleSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -71,14 +70,10 @@ package org.apache.royale.mdl
 			if(parent is Footer)
 			{
 				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__middle-section");
-				}
-				else
+				if (Footer(parent).mini)
 				{
                     typeNames = "mdl-mini-footer__middle-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__middle-section");
+                    setClassName(computeFinalClassNames());
 				}
 			}
 			else
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as
index aff9704..aed81e6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterRightSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -71,15 +70,10 @@ package org.apache.royale.mdl
 			if(parent is Footer)
 			{
 				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    element.classList.add("mdl-mega-footer__right-section");
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__right-section");
-				}
-				else
+				if (Footer(parent).mini)
 				{
                     typeNames = "mdl-mini-footer__right-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__right-section");
+                    setClassName(computeFinalClassNames());
 				}
 			}
 			else if(parent is IFooterSection)
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as
index 6737630..1bd52eb 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterSocialButton.as
@@ -26,7 +26,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
     
 	/**
@@ -74,14 +73,10 @@ package org.apache.royale.mdl
 				if(UIBase(parentSection).parent is Footer)
 				{
 					element.classList.remove(typeNames);
-					if(!Footer(UIBase(parentSection).parent).mini)
-					{
-                        className = addOrReplaceClassName(className, "mdl-mega-footer__social-btn");
-					}
-					else
+					if (Footer(UIBase(parentSection).parent).mini)
 					{
                         typeNames = "mdl-mini-footer__social-btn";
-                        className = addOrReplaceClassName(className, "mdl-mini-footer__social-btn");
+                        setClassName(computeFinalClassNames());
 					}
 				}
 			}
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as
index 52e63d6..abd866d 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/FooterTopSection.as
@@ -25,7 +25,6 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
     }
 
 	/**
@@ -71,14 +70,10 @@ package org.apache.royale.mdl
 			if(parent is Footer)
 			{
 				element.classList.remove(typeNames);
-				if(!Footer(parent).mini)
-				{
-                    className = addOrReplaceClassName(className, "mdl-mega-footer__top-section");
-				}
-				else
+                if(Footer(parent).mini)
 				{
                     typeNames = "mdl-mini-footer__top-section";
-                    className = addOrReplaceClassName(className, "mdl-mini-footer__top-section");
+                    setClassName(computeFinalClassNames());
 				}
 			}
 			else
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as
index 35a6664..d270bf0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Grid.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -63,9 +63,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-grid";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected var _nospacing:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-grid--no-spacing" effect selector.
@@ -80,6 +88,7 @@ package org.apache.royale.mdl
         {
             return _nospacing;
         }
+
         public function set nospacing(value:Boolean):void
         {
             if (_nospacing != value)
@@ -88,13 +97,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-grid--no-spacing");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-grid--no-spacing");
-                    }
+                    var classVal:String = "mdl-grid--no-spacing";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as
index 623fe9f..163c360 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/GridCell.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -52,9 +52,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-cell";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected var _column:Number = 4;
         /**
 		 *  A boolean flag to activate "mdl-cell--N-col" effect selector.
@@ -78,7 +86,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col", "mdl-cell--" + _column + "-col");
+                        var classVal:String = "mdl-cell--" + _column + "-col";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col";
+                        _classList.add(classVal);
+
                         _column = value;
                     }
                 }
@@ -100,6 +113,7 @@ package org.apache.royale.mdl
         {
             return _columnDesktop;
         }
+
         public function set columnDesktop(value:Number):void
         {
             if (_columnDesktop != value)
@@ -108,7 +122,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-desktop", "mdl-cell--" + _columnDesktop + "-col-desktop");
+                        var classVal:String = "mdl-cell--" + _columnDesktop + "-col-desktop";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col-desktop";
+                        _classList.add(classVal);
+
                         _columnDesktop = value;
                     }
                 }
@@ -130,6 +149,7 @@ package org.apache.royale.mdl
         {
             return _columnTablet;
         }
+
         public function set columnTablet(value:Number):void
         {
             if (_columnTablet != value)
@@ -138,7 +158,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-tablet", "mdl-cell--" + _columnTablet + "-col-tablet");
+                        var classVal:String = "mdl-cell--" + _columnTablet + "-col-tablet";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col-tablet";
+                        _classList.add(classVal);
+
                         _columnTablet = value;
                     }
                 }
@@ -160,6 +185,7 @@ package org.apache.royale.mdl
         {
             return _columnPhone;
         }
+
         public function set columnPhone(value:Number):void
         {
             if (_columnPhone != value)
@@ -168,7 +194,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 5)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-col-phone", "mdl-cell--" + _columnPhone + "-col-phone");
+                        var classVal:String = "mdl-cell--" + _columnPhone + "-col-phone";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-col-phone";
+                        _classList.add(classVal);
+
                         _columnPhone = value;
                     }
                 }
@@ -190,6 +221,7 @@ package org.apache.royale.mdl
         {
             return _offset;
         }
+
         public function set offset(value:Number):void
         {
 			if (_offset != value)
@@ -198,7 +230,12 @@ package org.apache.royale.mdl
 				{
 					if (value > 0 || value < 12)
 					{
-						className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset", "mdl-cell--" + _offset + "-offset");
+                        var classVal:String = "mdl-cell--" + _offset + "-offset";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset";
+                        _classList.add(classVal);
+
 						_offset = value;
 					}
 				}
@@ -220,6 +257,7 @@ package org.apache.royale.mdl
         {
             return _offsetDesktop;
         }
+
         public function set offsetDesktop(value:Number):void
         {
             if (_offsetDesktop != value)
@@ -228,7 +266,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 12)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-desktop", "mdl-cell--" + _offsetDesktop + "-offset-desktop");
+                        var classVal:String = "mdl-cell--" + _offsetDesktop + "-offset-desktop";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset-desktop";
+                        _classList.add(classVal);
+
                         _offsetDesktop = value;
                     }
                 }
@@ -250,6 +293,7 @@ package org.apache.royale.mdl
         {
             return _offsetTablet;
         }
+
         public function set offsetTablet(value:Number):void
         {
             if (_offsetTablet != value)
@@ -258,7 +302,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 12)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-tablet", "mdl-cell--" + _offsetTablet + "-offset-tablet");
+                        var classVal:String = "mdl-cell--" + _offsetTablet + "-offset-tablet";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset-tablet";
+                        _classList.add(classVal);
+
                         _offsetTablet = value;
                     }
                 }
@@ -280,6 +329,7 @@ package org.apache.royale.mdl
         {
             return _offsetPhone;
         }
+
         public function set offsetPhone(value:Number):void
         {
             if (_offsetPhone != value)
@@ -288,7 +338,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 12)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--" + value + "-offset-phone", "mdl-cell--" + _offsetPhone + "-offset-phone");
+                        var classVal:String = "mdl-cell--" + _offsetPhone + "-offset-phone";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--" + value + "-offset-phone";
+                        _classList.add(classVal);
+
                         _offsetPhone = value;
                     }
                 }
@@ -318,7 +373,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value, "mdl-cell--order-" + _order);
+                        var classVal:String = "mdl-cell--order-" + _order;
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value;
+                        _classList.add(classVal);
+
                         _order = value;
                     }
                 }
@@ -340,6 +400,7 @@ package org.apache.royale.mdl
         {
             return _orderDesktop;
         }
+
         public function set orderDesktop(value:Number):void
         {
             if (_orderDesktop != value)
@@ -348,7 +409,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-desktop", "mdl-cell--order-" + _orderDesktop + "-desktop");
+                        var classVal:String = "mdl-cell--order-" + _orderDesktop + "-desktop";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value + "-desktop";
+                        _classList.add(classVal);
+
                         _orderDesktop = value;
                     }
                 }
@@ -378,7 +444,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-tablet", "mdl-cell--order-" + _orderTablet + "-tablet");
+                        var classVal:String = "mdl-cell--order-" + _orderTablet + "-tablet";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value + "-tablet";
+                        _classList.add(classVal);
+
                         _orderTablet = value;
                     }
                 }
@@ -408,7 +479,12 @@ package org.apache.royale.mdl
                 {
                     if (value > 0 || value < 13)
                     {
-                        className = addOrReplaceClassName(className, "mdl-cell--order-" + value + "-phone", "mdl-cell--order-" + _orderPhone + "-phone");
+                        var classVal:String = "mdl-cell--order-" + _orderPhone + "-phone";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-cell--order-" + value + "-phone";
+                        _classList.add(classVal);
+
                         _orderPhone = value;
                     }
                 }
@@ -429,6 +505,7 @@ package org.apache.royale.mdl
         {
             return _hideDesktop;
         }
+
         public function set hideDesktop(value:Boolean):void
         {
             if (_hideDesktop != value)
@@ -437,11 +514,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--hide-desktop");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--hide-desktop");
-                    }
+                    var classVal:String = "mdl-cell--hide-desktop";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -460,6 +535,7 @@ package org.apache.royale.mdl
         {
             return _hideTablet;
         }
+
         public function set hideTablet(value:Boolean):void
         {
             if (_hideTablet != value)
@@ -468,11 +544,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--hide-tablet");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--hide-tablet");
-                    }
+                    var classVal:String = "mdl-cell--hide-tablet";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -499,11 +573,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--hide-phone");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--hide-phone");
-                    }
+                    var classVal:String = "mdl-cell--hide-phone";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -531,11 +603,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--stretch");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--stretch");
-                    }
+                    var classVal:String = "mdl-cell--stretch";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -562,11 +632,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--top");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--top");
-                    }
+                    var classVal:String = "mdl-cell--top";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -585,6 +653,7 @@ package org.apache.royale.mdl
         {
             return _alignMiddle;
         }
+
         public function set alignMiddle(value:Boolean):void
         {
             if (_alignMiddle != value)
@@ -593,11 +662,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--middle");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--middle");
-                    }
+                    var classVal:String = "mdl-cell--middle";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -625,13 +692,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-cell--bottom");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-cell--bottom");
-                    }
+                    var classVal:String = "mdl-cell--bottom";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as
index 11816b6..e10622c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Header.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -51,9 +51,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__header"
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
@@ -77,6 +85,7 @@ package org.apache.royale.mdl
         {
             return _transparent;
         }
+
         public function set transparent(value:Boolean):void
         {
             if (_transparent != value)
@@ -85,11 +94,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout__header--transparent");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout__header--transparent");
-                    }
+                    var classVal:String = "mdl-layout__header--transparent";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -108,6 +115,7 @@ package org.apache.royale.mdl
         {
             return _scrollable;
         }
+
         public function set scrollable(value:Boolean):void
         {
             if (_scrollable != value)
@@ -116,11 +124,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout__header--scroll");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout__header--scroll");
-                    }
+                    var classVal:String = "mdl-layout__header--scroll";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -139,6 +145,7 @@ package org.apache.royale.mdl
         {
             return _waterfall;
         }
+
         public function set waterfall(value:Boolean):void
         {
             if (_waterfall != value)
@@ -147,13 +154,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout__header--waterfall");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout__header--waterfall");
-                    }
+                    var classVal:String = "mdl-layout__header--waterfall";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as
index c3241fd..2507e6c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/IconToggle.as
@@ -35,7 +35,7 @@ package org.apache.royale.mdl
     {    
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     //--------------------------------------
@@ -95,6 +95,11 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-icon-toggle mdl-js-icon-toggle";
 
             COMPILE::SWF
@@ -106,6 +111,9 @@ package org.apache.royale.mdl
             addBead(new UpgradeChildren(["mdl-icon-toggle__ripple-container"]));
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         [Bindable("change")]
         /**
          *  <code>true</code> if the Button is selected.
@@ -183,11 +191,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -273,5 +279,11 @@ package org.apache.royale.mdl
         {
             //selected = !selected;
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
index 07305b5..5652c04 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Menu.as
@@ -26,7 +26,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 	
     /**
@@ -60,10 +60,18 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-menu mdl-js-menu";
 			addEventListener("beadsAdded", addUpgradeBead);
         }
-		
+
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		protected function addUpgradeBead(event:Event):void
 		{
 			addBead(new UpgradeElement());	
@@ -138,6 +146,7 @@ package org.apache.royale.mdl
 		{
 			return _left;
 		}
+
 		public function set left(value:Boolean):void
 		{
 			_left = value;
@@ -148,7 +157,8 @@ package org.apache.royale.mdl
             {
                 currentMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right");
                 className += currentMenuPosition;
-            } else
+            }
+			else
             {
                 newMenuPosition = " mdl-menu--" + (_bottom ? "bottom" : "top") + "-" + (_left ? "left" : "right");
                 className = className.replace( "/(?:^|\s)" + currentMenuPosition + "(?!\S)/g" , newMenuPosition);
@@ -194,6 +204,7 @@ package org.apache.royale.mdl
         {
             return _ripple;
         }
+
         public function set ripple(value:Boolean):void
         {
             if (_ripple != value)
@@ -202,13 +213,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
index 383525c..a469ea6 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayout.as
@@ -26,7 +26,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -53,9 +53,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout mdl-js-layout";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _applicationModel:Object;
 
 		[Bindable("modelChanged")]
@@ -106,11 +114,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout--fixed-header");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout--fixed-header");
-                    }
+                    var classVal:String = "mdl-layout--fixed-header";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -129,6 +135,7 @@ package org.apache.royale.mdl
         {
             return _fixedDrawer;
         }
+
         public function set fixedDrawer(value:Boolean):void
         {
             if (_fixedDrawer != value)
@@ -137,13 +144,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-layout--fixed-drawer");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-layout--fixed-drawer");
-                    }
+                    var classVal:String = "mdl-layout--fixed-drawer";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as
index 262a265..3a50e9c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/NavigationLayoutContent.as
@@ -20,12 +20,6 @@ package org.apache.royale.mdl
 {
 	import org.apache.royale.html.Group;
 
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;
-		import org.apache.royale.html.util.addElementToWrapper;
-    }
-
 	/**
 	 *  The NavigationLayoutContent class is a Container component capable of parenting
 	 *  the content of the NavigationLayout parent. If the navigation uses a TabBar component
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
index 79c913d..8dbaa23 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/ProgressBar.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {        
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     /**
      *  The ProgressBar indicate loading and progress states.
@@ -47,9 +47,17 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-progress mdl-js-progress";
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var materialProgress:Object;
 
         private var _currentProgress:Number;
@@ -115,11 +123,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-progress__indeterminate");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-progress__indeterminate");
-                    }
+                    var classVal:String = "mdl-progress__indeterminate";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -170,5 +176,11 @@ package org.apache.royale.mdl
             setCurrentProgress(_currentProgress);
             setCurrentBuffer(_currentBuffer);
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as
index e74c289..ac1f4d0 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/RadioButton.as
@@ -30,12 +30,13 @@ package org.apache.royale.mdl
         import org.apache.royale.core.IStrand;
         import org.apache.royale.core.IValueToggleButtonModel;
     }
+
     COMPILE::JS
     {
         import org.apache.royale.core.UIBase;
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     //--------------------------------------
@@ -295,6 +296,8 @@ package org.apache.royale.mdl
 		{
             super();
 
+            _classList = new CSSClassList();
+
             typeNames = "mdl-radio mdl-js-radio";
 
             addBead(new UpgradeElement());
@@ -306,6 +309,8 @@ package org.apache.royale.mdl
          */
         protected static var radioCounter:int = 0;
 
+        private var _classList:CSSClassList;
+
         private var radio:HTMLSpanElement;
         private var icon:HTMLInputElement;
         private var label:HTMLLabelElement;
@@ -343,9 +348,8 @@ package org.apache.royale.mdl
             (radio as WrappedHTMLElement).royale_wrapper = this;
 
             return element;
-        };
+        }
 
-        COMPILE::JS
         override public function addEventListener(type:String, handler:Function, opt_capture:Boolean = false, opt_handlerScope:Object = null):void
         {
             if (type == MouseEvent.CLICK)
@@ -358,7 +362,6 @@ package org.apache.royale.mdl
             }
         }
 
-        COMPILE::JS
         public function clickHandler(event:Event):void
         {
             selected = !selected;
@@ -384,14 +387,9 @@ package org.apache.royale.mdl
             {
                 _ripple = value;
 
-                COMPILE::JS
-                {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
-                }
+                var classVal:String = "mdl-js-ripple-effect";
+                value ? _classList.add(classVal) : _classList.remove(classVal);
+                setClassName(computeFinalClassNames());
             }
         }
 
@@ -399,6 +397,7 @@ package org.apache.royale.mdl
         {
             return icon.name as String;
         }
+
         public function set groupName(value:String):void
         {
             icon.name = value;
@@ -419,6 +418,7 @@ package org.apache.royale.mdl
         {
             return icon.checked;
         }
+
         public function set selected(value:Boolean):void
         {
             if(icon.checked == value)
@@ -479,6 +479,11 @@ package org.apache.royale.mdl
                 }
             }
         }
-    }
 
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
+    }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as
index bed52ac..40e5f67 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spacer.as
@@ -20,12 +20,6 @@ package org.apache.royale.mdl
 {
 	import org.apache.royale.core.UIBase;
 
-    COMPILE::JS
-    {
-        import org.apache.royale.core.WrappedHTMLElement;    
-        import org.apache.royale.html.util.addElementToWrapper;        
-    }
-	
     /**
      *  The Spacer class takes up space in the UI layout.
      *
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as
index 24726a7..e9dff95 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Spinner.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {    
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     /**
      *  The Material Design Lite (MDL) spinner component is an enhanced replacement for
@@ -50,12 +50,21 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-spinner mdl-js-spinner";
 
             addBead(new UpgradeElement());
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _isActive:Boolean;
+
         /**
          *  Indicates whether Spinner is active and visible
          *
@@ -68,9 +77,7 @@ package org.apache.royale.mdl
         {
             return _isActive;
         }
-        /**
-         *  @private
-         */
+
         public function set isActive(value:Boolean):void
         {
             if (_isActive != value)
@@ -79,16 +86,15 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
 
-        private var _singleColor:Boolean;   
+        private var _singleColor:Boolean;
+
         /**
          *  Make Spinner in a single color
          *
@@ -105,11 +111,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-spinner--single-color");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-spinner--single-color");
-                    }
+                    var classVal:String = "mdl-spinner--single-color";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -124,5 +128,11 @@ package org.apache.royale.mdl
         {
 			return addElementToWrapper(this,'div');
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as
index e521948..0a38132 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Switch.as
@@ -32,7 +32,7 @@ package org.apache.royale.mdl
     {    
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     //--------------------------------------
@@ -98,12 +98,20 @@ package org.apache.royale.mdl
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-switch mdl-js-switch";
 
             addBead(new UpgradeElement());
             addBead(new UpgradeChildren(["mdl-switch__ripple-container"]));
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          *  @copy org.apache.royale.html.Label#text
          *
@@ -183,11 +191,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -238,5 +244,11 @@ package org.apache.royale.mdl
             input.checked = selected;
             label.classList.toggle("is-checked", selected);
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as
index c7a23ff..4da4593 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBar.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -62,9 +62,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__tab-bar";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @copy org.apache.royale.core.IDataProviderModel#dataProvider
          *
@@ -77,6 +85,7 @@ package org.apache.royale.mdl
         {
             return ITabModel(model).dataProvider;
         }
+
         override public function set dataProvider(value:Object):void
         {
             ITabModel(model).dataProvider = value;
@@ -94,6 +103,7 @@ package org.apache.royale.mdl
         {
             return ITabModel(model).labelField;
         }
+
         override public function set labelField(value:String):void
         {
             ITabModel(model).labelField = value;
@@ -149,7 +159,7 @@ package org.apache.royale.mdl
                 element.classList.remove(typeNames);
 				typeNames = "mdl-tabs__tab-bar";
 
-                className = addOrReplaceClassName(className, "mdl-tabs__tab-bar");
+                setClassName(computeFinalClassNames());
 			}
 
 			if(parent is Tabs && _ripple)
@@ -172,6 +182,7 @@ package org.apache.royale.mdl
         {
             return _ripple;
         }
+
         public function set ripple(value:Boolean):void
         {
             if (_ripple != value)
@@ -185,13 +196,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as
index 620672b..2b07754 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarButton.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -49,9 +49,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__tab";
 		}
-		
+
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _isActive:Boolean = false;
 
         /**
@@ -75,11 +83,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
 		}
@@ -117,9 +123,15 @@ package org.apache.royale.mdl
                     element.classList.remove(typeNames);
                     typeNames = "mdl-tabs__tab";
 
-                    className = addOrReplaceClassName(className, "mdl-tabs__tab");
+                    setClassName(typeNames);
                 }
 			}
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as
index 34eed6c..9d777b7 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TabBarPanel.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -51,9 +51,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-layout__tab-panel";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @royaleignorecoercion org.apache.royale.core.WrappedHTMLElement
          */
@@ -81,7 +89,7 @@ package org.apache.royale.mdl
                 element.classList.remove(typeNames);
                 typeNames = "mdl-tabs__panel";
 
-                className = addOrReplaceClassName(className, "mdl-tabs__panel");
+                setClassName(computeFinalClassNames());
             }
         }
 
@@ -108,13 +116,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
 		}
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as
index 9bc0015..81915fe 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Table.as
@@ -27,7 +27,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -61,9 +61,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-data-table mdl-js-data-table";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _columns:Array;
         /**
 		 *  columns. Optional
@@ -278,10 +286,17 @@ package org.apache.royale.mdl
             {
                 COMPILE::JS
                 {
-                    className = addOrReplaceClassName(className, "mdl-shadow--" + value + "dp", "mdl-shadow--" + _shadow + "dp");
                     if (value == 2 || value == 3 || value == 4 || value == 6 || value == 8 || value == 16)
                     {
+                        var classVal:String = "mdl-shadow--" + _shadow + "dp";
+                        _classList.remove(classVal);
+
+                        classVal = "mdl-shadow--" + value + "dp";
+                        _classList.add(classVal);
+
                         _shadow = value;
+
+                        setClassName(computeFinalClassNames());
                     }
                 }
             }
@@ -310,11 +325,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-data-table--selectable");
-                    COMPILE::JS
-                    {
-                        className = addOrReplaceClassName(className, "mdl-data-table--selectable");
-                    }
+                    var classVal:String = "mdl-data-table--selectable";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -339,5 +352,11 @@ package org.apache.royale.mdl
             super.addElement(tbody);
 			_isTbodyAddedToParent = true;
 		}
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as
index cf3abbb..3c06c63 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/TableColumn.as
@@ -23,7 +23,7 @@ package org.apache.royale.mdl
     COMPILE::JS
     {
         import org.apache.royale.core.WrappedHTMLElement;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -51,9 +51,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-data-table__cell--non-numeric";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _headerText:String = "";
 
         /**
@@ -102,6 +110,7 @@ package org.apache.royale.mdl
         {
             return _ascending;
         }
+
         public function set ascending(value:Boolean):void
         {
             if (_ascending != value)
@@ -110,11 +119,9 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-data-table__header--sorted-ascending");
-                    COMPILE::JS
-                    {
-                        className = addOrReplaceClassName(className, "mdl-data-table__header--sorted-ascending");
-                    }
+                    var classVal:String = "mdl-data-table__header--sorted-ascending";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -134,6 +141,7 @@ package org.apache.royale.mdl
         {
             return _descending;
         }
+
         public function set descending(value:Boolean):void
         {
             if (_descending != value)
@@ -142,13 +150,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-data-table__header--sorted-descending");
-                    COMPILE::JS
-                    {
-                        className = addOrReplaceClassName(className, "mdl-data-table__header--sorted-descending");
-                    }
+                    var classVal:String = "mdl-data-table__header--sorted-descending";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as
index a85abd0..e677fd7 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Tabs.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
 	/**
@@ -59,9 +59,17 @@ package org.apache.royale.mdl
 		{
 			super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "mdl-tabs mdl-js-tabs";
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         /**
          * @copy org.apache.royale.core.IDataProviderModel#dataProvider
          *
@@ -169,13 +177,17 @@ package org.apache.royale.mdl
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-js-ripple-effect");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-js-ripple-effect");
-                    }
+                    var classVal:String = "mdl-js-ripple-effect";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as
index 057d242..73f222c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/Toast.as
@@ -110,7 +110,6 @@ package org.apache.royale.mdl
                 var snackbarData:Object = IToastModel(model).snackbarData;
                 snackbar.showSnackbar(snackbarData);
             }
-            //dispatchEvent(new Event("action"));
         }
 
         protected var snackbar:Object;
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as
index 922da08..d5616c3 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/CardInner.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl.supportClasses
     {
         import org.apache.royale.core.WrappedHTMLElement;
 		import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
 	/**
@@ -48,8 +48,16 @@ package org.apache.royale.mdl.supportClasses
 		public function CardInner()
 		{
 			super();
+
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
 		}
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
 		private var _border:Boolean = false;
         /**
 		 *  A boolean flag to activate "mdl-card--border" effect selector.
@@ -72,11 +80,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-card--border");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-card--border");
-                    }
+                    var classVal:String = "mdl-card--border";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -96,6 +102,7 @@ package org.apache.royale.mdl.supportClasses
         {
             return _expand;
         }
+
         public function set expand(value:Boolean):void
         {
             if (_expand != value)
@@ -104,13 +111,17 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-card--expand");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-card--expand");
-                    }
+                    var classVal:String = "mdl-card--expand";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
 	}
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as
index d86db7b..5cc1aea 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/MaterialIconBase.as
@@ -25,7 +25,7 @@ package org.apache.royale.mdl.supportClasses
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -54,10 +54,18 @@ package org.apache.royale.mdl.supportClasses
         {
             super();
 
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
+
             typeNames = "material-icons";
         }
 
         COMPILE::JS
+        private var _classList:CSSClassList;
+
+        COMPILE::JS
         protected var textNode:Text;
 
         /**
@@ -121,8 +129,15 @@ package org.apache.royale.mdl.supportClasses
             {
                 COMPILE::JS
                 {
-                    className = addOrReplaceClassName(className, "md-" + value, "md-" + _size);
+                    var classVal:String = "md-" + _size;
+                    _classList.remove(classVal);
+
+                    classVal = "md-" + value;
+                    _classList.add(classVal);
+
                     _size = value;
+
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -140,6 +155,7 @@ package org.apache.royale.mdl.supportClasses
         {
             return _dark;
         }
+
         public function set dark(value:Boolean):void
         {
             if (_dark != value)
@@ -148,11 +164,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("md-dark");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "md-dark");
-                    }
+                    var classVal:String = "md-dark";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -178,11 +192,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("md-light");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "md-light");
-                    }
+                    var classVal:String = "md-light";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -208,11 +220,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("md-inactive");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "md-inactive");
-                    }
+                    var classVal:String = "md-inactive";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -238,11 +248,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-list__item-icon");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-list__item-icon");
-                    }
+                    var classVal:String = "mdl-list__item-icon";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -268,11 +276,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-list__item-avatar");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-list__item-avatar");
-                    }
+                    var classVal:String = "mdl-list__item-avatar";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -298,13 +304,17 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-icon-toggle__label");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-icon-toggle__label");
-                    }
+                    var classVal:String = "mdl-icon-toggle__label";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
index 3d766af..52e0a8c 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabBarButtonItemRendererBase.as
@@ -24,7 +24,7 @@ package org.apache.royale.mdl.supportClasses
     {
         import org.apache.royale.core.WrappedHTMLElement;
         import org.apache.royale.html.util.addElementToWrapper;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -49,9 +49,15 @@ package org.apache.royale.mdl.supportClasses
         {
             super();
 
-           // className = "";
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _tabIdField:String;
         /**
 		 *  tabIdField.
@@ -92,11 +98,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -138,5 +142,11 @@ package org.apache.royale.mdl.supportClasses
         {
 			return addElementToWrapper(this,'a');
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
index bb666ab..b357c0a 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TabItemRendererBase.as
@@ -22,7 +22,7 @@ package org.apache.royale.mdl.supportClasses
 
     COMPILE::JS
     {
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
 
     /**
@@ -46,8 +46,16 @@ package org.apache.royale.mdl.supportClasses
         public function TabItemRendererBase()
         {
             super();
+
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
         }
 
+        COMPILE::JS
+        private var _classList:CSSClassList;
+
         private var _tabIdField:String;
         /**
          *  @copy org.apache.royale.mdl.supportClasses.ITabItemRenderer#tabIdField
@@ -89,11 +97,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-active");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-active");
-                    }
+                    var classVal:String = "is-active";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -124,5 +130,11 @@ package org.apache.royale.mdl.supportClasses
                 }
             }
         }
+
+        COMPILE::JS
+        override protected function computeFinalClassNames():String
+        {
+            return _classList.compute() + super.computeFinalClassNames();
+        }
     }
 }
diff --git a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as
index a0c0cb8..91341a8 100644
--- a/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as
+++ b/frameworks/projects/MaterialDesignLite/src/main/royale/org/apache/royale/mdl/supportClasses/TextFieldBase.as
@@ -19,16 +19,15 @@ package org.apache.royale.mdl.supportClasses
 {
 	import org.apache.royale.events.Event;
 	import org.apache.royale.html.TextInput;
-    import org.apache.royale.mdl.beads.ExpandableSearch;
     import org.apache.royale.core.IBead;
 
     import org.apache.royale.mdl.supportClasses.ITextField;
-    
+
     COMPILE::JS
     {
         import goog.events;
         import org.apache.royale.core.WrappedHTMLElement;
-        import org.apache.royale.html.util.addOrReplaceClassName;
+        import org.apache.royale.core.CSSClassList;
     }
     
     /**
@@ -53,11 +52,15 @@ package org.apache.royale.mdl.supportClasses
 		{
 			super();
 
-          //  className = ""; //set to empty string avoid 'undefined' output when no class selector is assigned by user;
+            COMPILE::JS
+            {
+                _classList = new CSSClassList();
+            }
 		}
 
         COMPILE::JS
         {
+            private var _classList:CSSClassList;
             private var _textNode:Text;
             /**
              *  @copy org.apache.royale.mdl.supportClasses.ITextField#textNode
@@ -152,11 +155,9 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("mdl-textfield--floating-label");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "mdl-textfield--floating-label");
-                    }
+                    var classVal:String = "mdl-textfield--floating-label";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
@@ -185,25 +186,17 @@ package org.apache.royale.mdl.supportClasses
 
                 COMPILE::JS
                 {
-                    element.classList.remove("is-invalid");
-                    if (value)
-                    {
-                        className = addOrReplaceClassName(className, "is-invalid");
-                    }
+                    var classVal:String = "is-invalid";
+                    value ? _classList.add(classVal) : _classList.remove(classVal);
+                    setClassName(computeFinalClassNames());
                 }
             }
         }
 
         COMPILE::JS
-        override public function addedToParent():void
+        override protected function computeFinalClassNames():String
         {
-            super.addedToParent();
-
-            var expandableSearch:IBead = getBeadByType(ExpandableSearch);
-            if (expandableSearch)
-            {
-                className = addOrReplaceClassName(className, "mdl-textfield--expandable");
-            }
+            return _classList.compute() + super.computeFinalClassNames();
         }
 	}
 }

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

[royale-asjs] 01/02: Merge branch 'develop' into feature/type_names_class_name_issue124

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

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

commit 8f2677127788065372d54c32be72884ae3efb16f
Merge: f21d7f2 e526d5f
Author: Piotr Zarzycki <pi...@gmail.com>
AuthorDate: Fri Mar 2 15:18:57 2018 +0100

    Merge branch 'develop' into feature/type_names_class_name_issue124

 RELEASE_NOTES.md                                   |   6 +
 .../royale/org/apache/royale/core/LayoutBase.as    |  83 ++--
 .../org/apache/royale/html/beads/AlertView.as      |   7 +-
 .../royale/html/beads/CSSImageAndTextButtonView.as |  60 +--
 .../apache/royale/html/beads/CSSTextButtonView.as  |  76 ++--
 .../org/apache/royale/html/beads/ContainerView.as  |  11 +-
 .../org/apache/royale/html/beads/GroupView.as      |  41 +-
 .../org/apache/royale/html/beads/PanelView.as      |   1 -
 .../royale/html/beads/PanelWithControlBarView.as   |   1 -
 .../apache/royale/html/beads/SimpleAlertView.as    |   7 +-
 .../org/apache/royale/html/beads/TextInputView.as  |  11 +-
 .../royale/html/beads/TextInputWithBorderView.as   |   6 +-
 .../royale/html/beads/layouts/DataGridLayout.as    |   8 +-
 .../layouts/FlexibleFirstChildHorizontalLayout.as  |   8 +-
 .../html/beads/layouts/HDividedContainerLayout.as  |   9 +-
 .../royale/html/beads/layouts/HScrollBarLayout.as  |   8 +-
 .../html/beads/layouts/HorizontalFlexLayout.as     |   8 +-
 .../html/beads/layouts/HorizontalFlowLayout.as     |   9 +-
 .../royale/html/beads/layouts/HorizontalLayout.as  |   7 +-
 .../layouts/HorizontalLayoutWithPaddingAndGap.as   |  12 +-
 .../layouts/OneFlexibleChildHorizontalLayout.as    |   7 +-
 .../OneFlexibleChildHorizontalLayoutForOverflow.as |   7 +-
 .../layouts/OneFlexibleChildVerticalLayout.as      |   7 +-
 .../OneFlexibleChildVerticalLayoutForOverflow.as   |   7 +-
 .../royale/html/beads/layouts/SimpleTableLayout.as |   6 +-
 .../royale/html/beads/layouts/TableCellLayout.as   |   8 +-
 .../royale/html/beads/layouts/TableHeaderLayout.as |   8 +-
 .../apache/royale/html/beads/layouts/TileLayout.as |   9 +-
 .../royale/html/beads/layouts/TreeGridLayout.as    |   8 +-
 .../html/beads/layouts/VDividedContainerLayout.as  |   9 +-
 .../royale/html/beads/layouts/VScrollBarLayout.as  |   7 +-
 .../html/beads/layouts/VerticalColumnLayout.as     |   6 +-
 .../html/beads/layouts/VerticalFlexLayout.as       |   7 +-
 .../royale/html/beads/layouts/VerticalLayout.as    |   7 +-
 .../layouts/VerticalLayoutWithPaddingAndGap.as     |  11 +-
 .../beads/layouts/VirtualListVerticalLayout.as     |   7 +-
 .../royale/html/beads/models/ViewportModel.as      |  14 +-
 .../royale/html/supportClasses/HScrollViewport.as  |   7 +-
 .../royale/html/supportClasses/OverflowViewport.as |   1 -
 .../html/supportClasses/ScrollingViewport.as       |   7 +-
 .../html/supportClasses/TextFieldItemRenderer.as   |   7 +-
 .../royale/html/supportClasses/VScrollViewport.as  |   6 +-
 .../apache/royale/html/supportClasses/Viewport.as  |   1 -
 .../org/apache/royale/charts/beads/ChartView.as    |   7 +-
 .../projects/Core/src/main/royale/CoreClasses.as   |   1 -
 .../org/apache/royale/core/AllCSSValuesImpl.as     | 498 ++++++++++++++++++++-
 .../royale/core/IBorderPaddingMarginValuesImpl.as  | 111 +++++
 .../org/apache/royale/core/IViewportModel.as       |  10 +-
 .../org/apache/royale/core/SimpleCSSValuesImpl.as  | 466 ++++++++++++++++++-
 .../org/apache/royale/core/layout/EdgeData.as      |  80 ++++
 .../org/apache/royale/core/layout/LayoutData.as    |  69 +++
 .../org/apache/royale/core/layout/MarginData.as    |  50 +++
 .../org/apache/royale/core/styles/BorderStyles.as  |  73 +++
 .../org/apache/royale/utils/CSSContainerUtils.as   | 194 --------
 .../royale/express/beads/layouts/DataGridLayout.as |   7 +-
 55 files changed, 1613 insertions(+), 496 deletions(-)


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