From f880291b8790d5267a83fedf9be9979f5b0cb7cf Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Wed, 9 Oct 2013 13:57:13 -0700
Subject: [PATCH] separate `activeTheme` and `theme` concepts from theme-aware
 controls, so that an inherited theme is not expressed as an attribute

---
 polymer-ui-icon/polymer-ui-icon.html          |  4 +--
 polymer-ui-menu/polymer-ui-menu.html          | 17 +++++-----
 polymer-ui-sidebar-menu/metadata.html         |  4 +--
 .../polymer-ui-theme-aware.html               | 31 +++++++++++--------
 4 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/polymer-ui-icon/polymer-ui-icon.html b/polymer-ui-icon/polymer-ui-icon.html
index 5309863..8e99673 100644
--- a/polymer-ui-icon/polymer-ui-icon.html
+++ b/polymer-ui-icon/polymer-ui-icon.html
@@ -136,10 +136,10 @@
           this.style.backgroundImage = 'url(' + this.src + ')';
           this.updateIcon();
         },
-        themeChanged: function(old) {
+        activeThemeChanged: function(old) {
           this.super(arguments);
           this.style.backgroundPosition = '';
-          this.bx = calcThemeOffset(this.theme, this);
+          this.bx = calcThemeOffset(this.activeTheme, this);
           this.updateIcon();
         },
         updateIcon: function() {
diff --git a/polymer-ui-menu/polymer-ui-menu.html b/polymer-ui-menu/polymer-ui-menu.html
index b5b2cf0..ee0927d 100644
--- a/polymer-ui-menu/polymer-ui-menu.html
+++ b/polymer-ui-menu/polymer-ui-menu.html
@@ -57,22 +57,23 @@
 <link rel="import" href="../../polymer-elements/polymer-selector/polymer-selector.html">
 <link rel="import" href="../polymer-ui-theme-aware/polymer-ui-theme-aware.html">
 
-<polymer-element name="polymer-ui-menu" extends="polymer-selector"
-    attributes="theme" on-polymer-select="selectionChange">
+<polymer-element name="polymer-ui-menu" extends="polymer-selector" attributes="theme" on-polymer-select="selectionChange">
   <template>
     <link rel="stylesheet" href="polymer-ui-menu.css">
     <shadow></shadow>
   </template>
   <script>
     Polymer('polymer-ui-menu', {
+      activeTheme: '',
+      validateTheme: PolymerUI.validateTheme,
       enteredView: function() {
-        if (!this.theme) {
-          this.findTheme();
-        }
+        this.validateTheme();
+      },
+      themeChanged: function() {
+        this.activeTheme = this.theme;
       },
-      findTheme: PolymerUI.findTheme,
-      themeChanged: function(old) {
-        this.classList.switch(old, this.theme);
+      activeThemeChanged: function(old) {
+        this.classList.switch(old, this.activeTheme);
       },
       selectionChange: function(e, detail) {
         if (detail.isSelected) {
diff --git a/polymer-ui-sidebar-menu/metadata.html b/polymer-ui-sidebar-menu/metadata.html
index 252def3..49ec7a4 100644
--- a/polymer-ui-sidebar-menu/metadata.html
+++ b/polymer-ui-sidebar-menu/metadata.html
@@ -12,10 +12,10 @@
         <polymer-ui-menu-item label="Favorites 3"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Favorites 4"></polymer-ui-menu-item>
       </polymer-ui-submenu-item>
-      <polymer-ui-menu-item icon="settings" label="Explore">
+      <polymer-ui-submenu-item icon="settings" label="Explore">
         <polymer-ui-menu-item label="Explore 1"></polymer-ui-menu-item>
         <polymer-ui-menu-item label="Explore 2"></polymer-ui-menu-item>
-      </polymer-ui-menu-item>
+      </polymer-ui-submenu-item>
     </polymer-ui-sidebar-menu>
   </template>
   <template id="imports">
diff --git a/polymer-ui-theme-aware/polymer-ui-theme-aware.html b/polymer-ui-theme-aware/polymer-ui-theme-aware.html
index 924fa3e..3fa2ccb 100644
--- a/polymer-ui-theme-aware/polymer-ui-theme-aware.html
+++ b/polymer-ui-theme-aware/polymer-ui-theme-aware.html
@@ -5,25 +5,30 @@
 -->
 <polymer-element name="polymer-ui-theme-aware" attributes="theme">
   <script>
-    PolymerUI = { 
-      findTheme: function() {
-        var p = this, theme = null;
-        while (p && !theme) {
-          theme = p.getAttribute && p.getAttribute('theme');
-          p = p.parentNode || p.host;
+    PolymerUI = {
+      validateTheme: function() {
+        var theme = this.theme;
+        if (!theme) {
+          var p = this;
+          while (p && !theme) {
+            theme = p.getAttribute && p.getAttribute('theme');
+            p = p.parentNode || p.host;
+          }
         }
-        this.theme = theme;
+        this.activeTheme = this.theme || theme;
       }
     };
     Polymer('polymer-ui-theme-aware', {
+      activeTheme: '',
+      validateTheme: PolymerUI.validateTheme,
       enteredView: function() {
-        if (!this.theme) {
-          this.findTheme();
-        }
+        this.validateTheme();
+      },
+      themeChanged: function() {
+        this.activeTheme = this.theme;
       },
-      findTheme: PolymerUI.findTheme,
-      themeChanged: function(old) {
-        this.classList.switch(old, this.theme);
+      activeThemeChanged: function(old) {
+        this.classList.switch(old, this.activeTheme);
       }
     });
   </script>