From 16e8db8abf7aa6f8f26956291d0446f242b7f0ff Mon Sep 17 00:00:00 2001
From: Matt Claypotch <thepotch@gmail.com>
Date: Fri, 14 Feb 2014 13:42:14 -0800
Subject: [PATCH] 0.11.0

---
 VERSION                         |    2 +-
 bower.json                      |    2 +-
 build/demos.js                  |    2 +-
 demos/x-tag-appbar/index.html   |    2 +-
 demos/x-tag-calendar/index.html |    2 +-
 demos/x-tag-deck/demo.js        |   40 +-
 demos/x-tag-deck/index.html     |  121 +--
 demos/x-tag-flipbox/index.html  |    2 +-
 demos/x-tag-layout/index.html   |    2 +-
 demos/x-tag-slidebox/demo.css   |   26 -
 demos/x-tag-slidebox/demo.js    |   37 -
 demos/x-tag-slidebox/index.html |  140 ---
 demos/x-tag-slider/index.html   |    2 +-
 demos/x-tag-tabbar/index.html   |    4 +-
 demos/x-tag-toggle/index.html   |    9 +-
 demos/x-tag-tooltip/demo.css    |   47 -
 demos/x-tag-tooltip/demo.js     |  109 --
 demos/x-tag-tooltip/index.html  |  195 ----
 dist/brick.css                  |  758 +++++--------
 dist/brick.js                   | 1801 +++++--------------------------
 dist/brick.min.css              |  121 +--
 dist/brick.min.js               |    4 +-
 dist/x-tag-appbar.css           |    2 +-
 dist/x-tag-appbar.min.css       |    2 +-
 dist/x-tag-deck.css             |  358 +++---
 dist/x-tag-deck.js              |  666 +++---------
 dist/x-tag-deck.min.css         |   41 +-
 dist/x-tag-deck.min.js          |    2 +-
 dist/x-tag-slider.css           |   55 +-
 dist/x-tag-slider.js            |   62 +-
 dist/x-tag-slider.min.css       |   16 +-
 dist/x-tag-slider.min.js        |    2 +-
 dist/x-tag-tabbar.js            |    2 +-
 dist/x-tag-tabbar.min.js        |    2 +-
 dist/x-tag-toggle.css           |  137 ++-
 dist/x-tag-toggle.js            |  147 ++-
 dist/x-tag-toggle.min.css       |   34 +-
 dist/x-tag-toggle.min.js        |    2 +-
 docs.html                       |  438 ++------
 download.html                   |   28 +-
 index.html                      |    4 +-
 package.json                    |    2 +-
 sink.html                       |   14 +-
 site/css/main.css               |   11 +-
 skins/default/x-tag-appbar.styl |    2 +-
 skins/default/x-tag-slider.styl |   61 +-
 skins/default/x-tag-toggle.styl |   13 +-
 47 files changed, 1474 insertions(+), 4057 deletions(-)
 delete mode 100644 demos/x-tag-slidebox/demo.css
 delete mode 100644 demos/x-tag-slidebox/demo.js
 delete mode 100644 demos/x-tag-slidebox/index.html
 delete mode 100644 demos/x-tag-tooltip/demo.css
 delete mode 100644 demos/x-tag-tooltip/demo.js
 delete mode 100644 demos/x-tag-tooltip/index.html

diff --git a/VERSION b/VERSION
index 2774f858..142464bf 100644
--- a/VERSION
+++ b/VERSION
@@ -1 +1 @@
-0.10.0
\ No newline at end of file
+0.11.0
\ No newline at end of file
diff --git a/bower.json b/bower.json
index b3cd28fd..75fd1dac 100644
--- a/bower.json
+++ b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "brick",
   "description": "UI Web Components for Mobile Web Apps",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "keywords": [
     "brick",
     "custom",
diff --git a/build/demos.js b/build/demos.js
index 44ecdfd7..449e2222 100644
--- a/build/demos.js
+++ b/build/demos.js
@@ -22,7 +22,7 @@ var generateDemoPages = avow(function(fulfill, reject, components){
             }
             else{
                 // TODO: this should use bower list --json
-                var componentDemoPath = path.join("bower_components", componentName,
+                var componentDemoPath = path.join("dev-repos", componentName,
                                                   "demo");
                 processComponentTemplate(componentDemoPath, componentName).then(function(){
                     processComponent(n+1);
diff --git a/demos/x-tag-appbar/index.html b/demos/x-tag-appbar/index.html
index 8499850f..1f71b3b8 100644
--- a/demos/x-tag-appbar/index.html
+++ b/demos/x-tag-appbar/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
diff --git a/demos/x-tag-calendar/index.html b/demos/x-tag-calendar/index.html
index 8ed6d20d..694cf75b 100644
--- a/demos/x-tag-calendar/index.html
+++ b/demos/x-tag-calendar/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
diff --git a/demos/x-tag-deck/demo.js b/demos/x-tag-deck/demo.js
index 3f9417b4..7b039ad2 100644
--- a/demos/x-tag-deck/demo.js
+++ b/demos/x-tag-deck/demo.js
@@ -6,8 +6,7 @@ function updateDemoSect(demoSect, isInit){
     var deck = getDeck(demoSect);
     var markupEl = DemoHelpers.getMarkupEl(demoSect, "html");
 
-    var ignoreAttrs = ["style","card-anim-type","_before-animation",
-                        "reverse","selected","leaving", "class"];
+    var ignoreAttrs = ["style", "reverse","selected","hide", "class"];
     // to indicate that initializing selected-index is not required
     if(isInit) ignoreAttrs.push("selected-index");
 
@@ -26,13 +25,13 @@ function initShuffleButtons(){
         var demoSect = DemoHelpers.controlButtonToDemoSect(button);
         var deck = getDeck(demoSect);
         if(xtag.hasClass(button, "forward")){
-            deck.shufflePrev("forward");
+            deck.previousCard("forward");
         }
         else if(xtag.hasClass(button, "reverse")){
-            deck.shufflePrev("reverse");
+            deck.previousCard("reverse");
         }
         else{
-            deck.shufflePrev();
+            deck.previousCard();
         }
     });
 
@@ -43,18 +42,18 @@ function initShuffleButtons(){
         var deck = getDeck(demoSect);
 
         if(xtag.hasClass(button, "forward")){
-            deck.shuffleNext("forward");
+            deck.nextCard("forward");
         }
         else if(xtag.hasClass(button, "reverse")){
-            deck.shuffleNext("reverse");
+            deck.nextCard("reverse");
         }
         else{
-            deck.shuffleNext();
+            deck.nextCard();
         }
     });
 
     // set up global shuffle to handlers
-    xtag.addEvent(document, "click:delegate("+DemoHelpers.BUTTON_SELECTOR+".shuffleto)", function(e){
+    xtag.addEvent(document, "click:delegate("+DemoHelpers.BUTTON_SELECTOR+".showCard)", function(e){
         var button = this;
         var demoSect = DemoHelpers.controlButtonToDemoSect(button);
         var deck = getDeck(demoSect);
@@ -63,13 +62,13 @@ function initShuffleButtons(){
         target = parseInt(target);
 
         if(xtag.hasClass(button, "forward")){
-            deck.shuffleTo(target, "forward");
+            deck.showCard(target, "forward");
         }
         else if(xtag.hasClass(button, "reverse")){
-            deck.shuffleTo(target, "reverse");
+            deck.showCard(target, "reverse");
         }
         else{
-            deck.shuffleTo(target);
+            deck.showCard(target);
         }
     });
 }
@@ -81,14 +80,14 @@ function initCardAddRemoveButtons(){
         var deck = getDeck(demoSect);
 
         // deck.numCards retrieves the number of cards currently in the deck
-        var newIndex = deck.numCards;
+        var newIndex = deck.cards.length;
         var newCard = document.createElement("x-card");
         newCard.style.backgroundColor = DemoHelpers.randomColor();
         newCard.textContent = newIndex;
         deck.appendChild(newCard);
         if(!button.hasAttribute("noshuffle")){
             // for demo, shuffle to newly inserted card
-            deck.shuffleTo(newIndex);
+            deck.showCard(newIndex);
         }
     });
 
@@ -96,10 +95,11 @@ function initCardAddRemoveButtons(){
         var button = this;
         var demoSect = DemoHelpers.controlButtonToDemoSect(button);;
         var deck = getDeck(demoSect);
-
-        if(deck.numCards > 0){
+		var cards = deck.cards;
+		var length = cards.length;
+        if(length > 0){
             // deck.getCardAt retrieves the <x-card> at the given index
-            var lastCard = deck.getCardAt(deck.numCards-1);
+            var lastCard = cards[length-1];
             deck.removeChild(lastCard);            
         }
     });
@@ -112,7 +112,7 @@ function initRandomCardColors(){
 }
 
 function getInitEventCounter(eventDemo){
-    var keys = ["shufflestart", "shuffleend", "cardadd", "cardremove"];
+    var keys = ["show", "hide"];
     return new DemoHelpers.EventCounter(keys);
 }
 
@@ -139,7 +139,7 @@ document.addEventListener('DOMComponentsLoaded', function(){
             e.detail && e.detail.toggleProp === "transitionType")
         {
             var deck = demoSect.querySelector("x-deck");
-            deck.shuffleNext("forward");
+            deck.nextCard("forward");
         }
     });
 
@@ -148,5 +148,5 @@ document.addEventListener('DOMComponentsLoaded', function(){
     initShuffleButtons();
     initCardAddRemoveButtons();
     initRandomCardColors();
-    DemoHelpers.registerUpdateListeners(["shufflestart", "shuffleend", "cardadd", "cardremove"]);
+    DemoHelpers.registerUpdateListeners(["show", "hide"]);
 });
\ No newline at end of file
diff --git a/demos/x-tag-deck/index.html b/demos/x-tag-deck/index.html
index 7877fb87..d44ed089 100644
--- a/demos/x-tag-deck/index.html
+++ b/demos/x-tag-deck/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
@@ -59,12 +59,13 @@ <h1>x-deck</h1>
 <p><code class="prettyprint">&lt;x-deck&gt;</code>s are components that act similarly to slideshows or galleries where cards can be cycled independently of order with a variety of different transitions.</p>
     <section class="demo-wrap">
         <header><h2>Basic usage</h2></header>
-        <p>For basic transitions between <code class="prettyprint">&lt;x-card&gt;</code>s, simply call the <code class="prettyprint">.shufflePrev()</code> and <code class="prettyprint">.shuffleNext()</code> methods of the <code class="prettyprint">&lt;x-deck&gt;</code>.</p>
-        <p>Users can also call <code class="prettyprint">.shuffleTo(index)</code> if they already know the index of the target card in the deck.</p>
+        <p>For basic transitions between <code class="prettyprint">&lt;x-card&gt;</code>s, simply call the <code class="prettyprint">.previousCard()</code> and <code class="prettyprint">.nextCard()</code> methods of the <code class="prettyprint">&lt;x-deck&gt;</code>.</p>
+        <p>Users can also call <code class="prettyprint">.showCard(index)</code> if they already know the index of the target card in the deck.</p>
+        <p>The <code class="prettyprint">loop</code> attribute option allows the deck to loop around after reaching the first or last index.</p>
         <div class="two-up">
             <figure class="demo">
-                <x-deck>
-                    <x-card>
+                <x-deck id="deck_1">
+                    <x-card selected>
                         0<span>I'm the first card!</span>
                     </x-card>
                     <x-card>
@@ -80,46 +81,47 @@ <h1>x-deck</h1>
             <div class="controls">
                 <button class="btn btn-default prev">Previous card</button>
                 <button class="btn btn-default next">Next card</button>
-                <button class="btn btn-default shuffleto" target=1>Shuffle to card 1</button>
+                <button class="btn btn-default showCard" target=1>Show card 1</button>
+                <button class="btn btn-default" onclick="this.textContent = 'Loop: ' + (document.getElementById('deck_1').loop = !document.getElementById('deck_1').loop);">Loop: false</button>
             </div>
             <h3>Markup</h3>
             <pre class="prettyprint html"></pre>
             <h3>JavaScript</h3>
-            <pre class="prettyprint javascript">// assume prevButton, nextButton, toButton, and deck<br/>//are already defined as their respective DOM elements<br/>prevButton.addEventListener(&quot;click&quot;, function(){<br/>    deck.shufflePrev();<br/>});<br/>nextButton.addEventListener(&quot;click&quot;, function(){<br/>    deck.shuffleNext();<br/>});<br/>toButton.addEventListener(&quot;click&quot;, function(){<br/>    deck.shuffleTo(1);<br/>});</pre>
+            <pre class="prettyprint javascript">// assume prevButton, nextButton, toButton, and deck<br/>//are already defined as their respective DOM elements<br/>prevButton.addEventListener(&quot;click&quot;, function(){<br/>    deck.previousCard();<br/>});<br/>nextButton.addEventListener(&quot;click&quot;, function(){<br/>    deck.nextCard();<br/>});<br/>toButton.addEventListener(&quot;click&quot;, function(){<br/>    deck.showCard(1);<br/>});</pre>
         </div>
         <a href="#" class="top">Top</a>
     </section>
 
     <section class="demo-wrap">
         <header><h2>Specifying animation direction</h2></header>
-        <p>The <code>.shufflePrev()</code>, <code>.shuffleNext()</code>, and <code>.shuffleTo()</code> methods can also be called with an optional direction parameter of either <code>"forward"</code> or <code>"reverse"</code> to specify how animations should progress.
+        <p>The <code>.previousCard()</code>, <code>.nextCard()</code>, and <code>.showCard()</code> methods can also be called with an optional direction parameter of either <code>"forward"</code> or <code>"reverse"</code> to specify how animations should progress.
         </p>
-        <p>If this parameter is <code>"auto"</code> or not given, we automatically choose an animation direction depending on whether the new card is ahead of or behind the current card in the deck.</p>
+        <p>If this parameter is omitted, the animation direction defaults to <code>"forward"</code> if the new index is greater than the previously selected index, and <code>"reverse"</code> if less than the previously selected index.</p>
         <div class="two-up">
             <figure class="demo">
                 <x-deck>
-                    <x-card>0<span>First</span></x-card>
-                    <x-card>1<span>Second</span></x-card>
-                    <x-card>2<span>Third</span></x-card>
-                    <x-card>3<span>Fourth</span></x-card>
-                    <x-card>4<span>Fifth</span></x-card>
+                    <x-card selected transition-type="slide-right">0<span>First</span></x-card>
+                    <x-card transition-type="slide-left">1<span>Second</span></x-card>
+                    <x-card transition-type="fade-scale">2<span>Third</span></x-card>
+                    <x-card transition-type="slide-up">3<span>Fourth</span></x-card>
+                    <x-card transition-type="slide-down">4<span>Fifth</span></x-card>
                 </x-deck>
             </figure>
         </div>
         <div class="markup-wrap two-up">
             <div class="controls">
                 <h4>Automatic animation direction</h4>
-                <button class="btn btn-default prev"><code>.shufflePrev()</code></button>
-                <button class="btn btn-default next"><code>.shuffleNext()</code></button>
-                <button class="btn btn-default shuffleto" target=1><code>.shuffleTo(1)</code></button>
+                <button class="btn btn-default prev"><code>.previousCard()</code></button>
+                <button class="btn btn-default next"><code>.nextCard()</code></button>
+                <button class="btn btn-default showCard" target=1><code>.showCard(1)</code></button>
                 <h4>Reverse animation direction</h4>
-                <button class="btn btn-default prev reverse"><code>.shufflePrev("reverse")</code></button>
-                <button class="btn btn-default next reverse"><code>.shuffleNext("reverse")</code></button>
-                <button class="btn btn-default shuffleto reverse" target=1><code>.shuffleTo(1, "reverse")</code></button>
+                <button class="btn btn-default prev reverse"><code>.previousCard("reverse")</code></button>
+                <button class="btn btn-default next reverse"><code>.nextCard("reverse")</code></button>
+                <button class="btn btn-default showCard reverse" target=1><code>.showCard(1, "reverse")</code></button>
                 <h4>Forward animation direction</h4>
-                <button class="btn btn-default prev forward"><code>.shufflePrev("forward")</code></button>
-                <button class="btn btn-default next forward"><code>.shuffleNext("forward")</code></button>
-                <button class="btn btn-default shuffleto forward" target=1><code>.shuffleTo(1, "forward")</code></button>
+                <button class="btn btn-default prev forward"><code>.previousCard("forward")</code></button>
+                <button class="btn btn-default next forward"><code>.nextCard("forward")</code></button>
+                <button class="btn btn-default showCard forward" target=1><code>.showCard(1, "forward")</code></button>
             </div>
             <h3>Markup</h3>
             <pre class="prettyprint html"></pre>
@@ -132,28 +134,19 @@ <h3>Markup</h3>
         <p>The <code class="prettyprint">&lt;x-deck&gt;</code>'s <code>transition-type</code> attribute (also accessible by the <code>.transitionType</code> property) controls how all cards in the deck animate in and out.</p>
         <p>Valid options: 
             <code>
-                scrollLeft,
-                scrollUp,
-                scrollRight,
-                scrollDown,
-                flipX,
-                flipY,
-                coverLeft,
-                coverUp,
-                coverRight,
-                coverDown,
-                uncoverLeft,
-                uncoverUp,
-                uncoverRight,
-                uncoverDown,
-                none
+                slide-up,
+                slide-down,
+                slide-left,
+				slide-right,
+				fade-scale,
+				none
             </code>
         </p>
 
         <div class="two-up">
             <figure class="demo">
-                <x-deck class="simple-deck" transition-type="scrollLeft">
-                    <x-card>0</x-card>
+                <x-deck class="simple-deck" transition-type="slide-left">
+                    <x-card selected>0</x-card>
                     <x-card>1</x-card>
                     <x-card>2</x-card>
                     <x-card>3</x-card>
@@ -167,8 +160,7 @@ <h3>Markup</h3>
                 <button class="btn btn-default" 
                         data-toggle-prop="transitionType" 
                         data-toggle-target="x-deck" 
-                        data-toggle-options='["scrollLeft", "scrollUp", "scrollRight", "scrollDown","flipX", "flipY", "coverLeft", "coverUp", "coverRight", "coverDown","uncoverLeft", "uncoverUp", "uncoverRight", "uncoverDown", "none"]'
-                >
+                        data-toggle-options='["slide-up", "slide-down", "slide-left", "slide-right", "fade-scale", "none"]'>
                     Change <code>transition-type</code>
                 </button>
                 <button class="btn btn-default next">Next card</button>
@@ -176,22 +168,20 @@ <h3>Markup</h3>
             <h3>Markup</h3>
             <pre class="prettyprint html"></pre>
             <h3>JavaScript</h3>
-            <pre class="prettyprint javascript">// assume transitionButton and deck are already<br/>// defined as their respective DOM elements<br/>var types = [<br/>    &quot;scrollLeft&quot;, &quot;scrollUp&quot;, &quot;scrollRight&quot;, &quot;scrollDown&quot;,<br/>    &quot;flipX&quot;, &quot;flipY&quot;, <br/>    &quot;coverLeft&quot;, &quot;coverUp&quot;, &quot;coverRight&quot;, &quot;coverDown&quot;,<br/>    &quot;uncoverLeft&quot;, &quot;uncoverUp&quot;, &quot;uncoverRight&quot;, &quot;uncoverDown&quot;,<br/>    &quot;none&quot;<br/>];<br/>transitionButton.addEventListener(&quot;click&quot;, function(){<br/>    var oldType = deck.transitionType;<br/>    deck.transitionType = types[(types.indexOf(oldType)+1) % type.length];<br/><br/>    // force animation to make visible for demo<br/>    deck.shuffleNext(&quot;forward&quot;);<br/>});</pre>
+            <pre class="prettyprint javascript">// assume transitionButton and deck are already<br/>// defined as their respective DOM elements<br/>var types = [<br/> &quot;slide-up&quot;, &quot;slide-down&quot;, &quot;slide-left&quot;, &quot;slide-right&quot;,<br/>&quot;scale-fade&quot;,<br/>&quot;none&quot;<br/> ];<br/>transitionButton.addEventListener(&quot;click&quot;, function(){<br/>    var oldType = deck.transitionType;<br/>    deck.transitionType = types[(types.indexOf(oldType)+1) % type.length];<br/><br/>    // force animation to make visible for demo<br/>    deck.nextCard(&quot;forward&quot;);<br/>});</pre>
         </div>
         <a href="#" class="top">Top</a>
     </section>
 
     <section class="demo-wrap">
-        <header><h2>Specifying card-specific animations: <code>transition-override/.transitionOverride</code></h2></header>
-        <p>While the <code class="prettyprint">&lt;x-deck&gt;</code>'s <code>transition-type</code> attribute changes the animation of all cards, it is also possible to specify how a specific <code class="prettyprint">&lt;x-card&gt;</code> animates when entering the deck with the <code>transition-override</code> attribute (also accessible through the <code>.transitionOverride</code> property.</p>
-        <p>An <code class="prettyprint">&lt;x-card&gt;</code>'s <code>transition-override</code> attribute can take any of the same values as the <code class="prettyprint">&lt;x-deck&gt;</code>'s <code>transition-type</code> attribute.
-        </p>
+        <header><h2>Specifying card-specific animations: <code>transition-type/.transitionType</code></h2></header>
+        <p>While the <code class="prettyprint">&lt;x-deck&gt;</code>'s <code>transition-type</code> attribute changes the animation of all cards, it is also possible to specify how a specific <code class="prettyprint">&lt;x-card&gt;</code> animates by specifying a <code>transition-type</code> attribute on individual <code class="prettyprint">&lt;x-card&gt;</code> elements</p>
 
         <div class="two-up">
             <figure class="demo">
-                <x-deck class="simple-deck" transition-type="scrollLeft">
-                    <x-card>0</x-card>
-                    <x-card transition-override="flipY">1</x-card>
+                <x-deck class="simple-deck" transition-type="slide-left">
+                    <x-card selected>0</x-card>
+                    <x-card transition-type="slide-down">1</x-card>
                     <x-card>2</x-card>
                 </x-deck>
             </figure>
@@ -215,7 +205,7 @@ <h3>Markup</h3>
         <div class="two-up">
             <figure class="demo">
                 <x-deck class="simple-deck">
-                    <x-card>0</x-card>
+                    <x-card selected>0</x-card>
                     <x-card>1</x-card>
                     <x-card>2</x-card>
                 </x-deck>
@@ -231,7 +221,7 @@ <h3>Markup</h3>
             <h3>Markup</h3>
             <pre class="prettyprint html"></pre>
             <h3>JavaScript</h3>
-            <pre class="prettyprint javascript">// assume addButton, removeButton, and deck<br/>//are already defined as their respective DOM elements<br/>// also assume that .randomColor simply returns a random color rgb string<br/>addButton.addEventListener(&quot;click&quot;, function(){<br/>    // deck.numCards retrieves the number of cards currently in the deck<br/>    var newIndex = deck.numCards;<br/>    var newCard = document.createElement(&quot;x-card&quot;);<br/>    newCard.style.backgroundColor = randomColor();<br/>    newCard.textContent = newIndex;<br/>    deck.appendChild(newCard);<br/>    // for demo, shuffle to newly inserted card<br/>    deck.shuffleTo(newIndex);<br/>});<br/>removeButton.addEventListener(&quot;click&quot;, function(){<br/>    if(deck.numCards &gt; 0){<br/>        //deck.getCardAt retrieves the &lt;x-card&gt; at the given index<br/>        var lastCard = deck.getCardAt(deck.numCards-1);<br/>        deck.removeChild(lastCard);            <br/>    }<br/>});</pre>
+            <pre class="prettyprint javascript">// assume addButton, removeButton, and deck<br/>//are already defined as their respective DOM elements<br/>// also assume that .randomColor simply returns a random color rgb string<br/>addButton.addEventListener(&quot;click&quot;, function(){<br/>    // deck.numCards retrieves the number of cards currently in the deck<br/>    var newIndex = deck.numCards;<br/>    var newCard = document.createElement(&quot;x-card&quot;);<br/>    newCard.style.backgroundColor = randomColor();<br/>    newCard.textContent = newIndex;<br/>    deck.appendChild(newCard);<br/>    // for demo, shuffle to newly inserted card<br/>    deck.showCard(newIndex);<br/>});<br/>removeButton.addEventListener(&quot;click&quot;, function(){<br/>    if(deck.numCards &gt; 0){<br/>        //deck.getCardAt retrieves the &lt;x-card&gt; at the given index<br/>        var lastCard = deck.getCardAt(deck.numCards-1);<br/>        deck.removeChild(lastCard);            <br/>    }<br/>});</pre>
         </div>
         <a href="#" class="top">Top</a>
     </section>
@@ -240,13 +230,13 @@ <h3>JavaScript</h3>
         <header><h2>Styling deck appearances</h2></header>
         <p>Styling the <code class="prettyprint">&lt;x-deck&gt;</code> and <code class="prettyprint">&lt;x-card&gt;</code> elements can be done like any other DOM elements. (By default, the deck attempts to be 100% width and height of its parent element, but this can be overridden.)</p>
         <p>However, the deck also provides some CSS selectors to customize how cards appear during animations.</p>
-        <p>To style how a card appears as it is transitioning out of the deck, apply styles to <code class="prettyprint">x-card[leaving]</code></p>
+        <p>To style how a card appears as it is transitioning out of the deck, apply styles to <code class="prettyprint">x-card[hide]</code></p>
         <p>To style how a card appears when it is specifically selected in the deck, apply styles to <code class="prettyprint">x-card[selected]</code></p>
 
         <div class="two-up">
             <figure class="demo">
                 <x-deck id="custom-styles" class="simple-deck">
-                    <x-card>0</x-card>
+                    <x-card selected>0</x-card>
                     <x-card>1</x-card>
                     <x-card>2</x-card>
                 </x-deck>
@@ -260,33 +250,20 @@ <h3>JavaScript</h3>
             <h3>Markup</h3>
             <pre class="prettyprint html"></pre>
             <h3>Styling</h3>
-            <pre class="prettyprint css">/* grey out leaving card */<br/>#custom-styles x-card[leaving]{<br/>    text-shadow: none;<br/>    background-color: grey!important;<br/>    color: #ccc;<br/>    opacity: 0.6;<br/>}<br/>/* add caption to selected card */<br/>#custom-styles x-card[selected]:after{<br/>    content: &quot;selected&quot;;<br/>    display: block;<br/>    font-size: .2em;<br/>}</pre>
+            <pre class="prettyprint css">/* grey out hiding card */<br/>#custom-styles x-card[hide]{<br/>    text-shadow: none;<br/>    background-color: grey!important;<br/>    color: #ccc;<br/>    opacity: 0.6;<br/>}<br/>/* add caption to selected card */<br/>#custom-styles x-card[selected]:after{<br/>    content: &quot;selected&quot;;<br/>    display: block;<br/>    font-size: .2em;<br/>}</pre>
         </div>
         <a href="#" class="top">Top</a>
     </section>
 
     <section id="shuffleevents-demo" class="demo-wrap">
-        <header><h2>Handling events: <code>shufflestart</code>, <code>shuffleend</code>, <code>cardadd</code>, and <code>cardremove</code></h2></header>
+        <header><h2>Handling card switching events: <code>show</code>, <code> hide</code></h2></header>
         <p>When the deck is transitioning cards, it fires events in order to signal different stages of the animation.</p>
-        <p>The <code class="prettyprint">&lt;x-deck&gt;</code> fires a <code>shufflestart</code> event when it has finished setting all attributes of the deck and is about to start a transition animation. This event also provides the following information in <code>e.detail</code>: 
-<pre class="prettyprint">{
-    'oldCard': the previously selected x-card that the transition is animating away from,
-    'newCard': the x-card that the transition is animating towards
-}</pre></p>
-        <p>The <code class="prettyprint">&lt;x-deck&gt;</code> fires a <code>shuffleend</code> event when a transition animation has completed. Much like a <code>transitionend</code> event, the <code>shuffleend</code> event will not fire if interrupted by another transition, and will thus only fire on a full animation completion. This event also provides the following information in <code>e.detail</code>: 
-<pre class="prettyprint">{
-    'oldCard': the previously selected x-card that the transition just animated away from,
-    'newCard': the x-card that the transition animated towards (ie: the now-selected card)
-}</pre></p>
-        <p>In addition, when a deck's <code class="prettyprint">&lt;x-card&gt;</code>s are added or removed, the deck fires the <code>cardadd</code> and <code>cardremove</code>, respectively. Both of these events also provide the following information in <code>e.detail</code>: 
-<pre class="prettyprint">{
-    'card': the x-card that was just added or removed
-}</pre></p>
-
+        <p>An <code>show</code> event is fired from a card target after it has completed its show animation, and the show state has been finalized.</p>
+		<p>An <code>hide</code> event is fired from a card target after it has completed its hide animation, and the hide state has been finalized.</p>
         <div class="two-up">
             <figure class="demo">
                 <x-deck class="simple-deck">
-                    <x-card>0</x-card>
+                    <x-card selected>0</x-card>
                     <x-card>1</x-card>
                     <x-card>2</x-card>
                 </x-deck>
diff --git a/demos/x-tag-flipbox/index.html b/demos/x-tag-flipbox/index.html
index c0c7b540..9c3fc338 100644
--- a/demos/x-tag-flipbox/index.html
+++ b/demos/x-tag-flipbox/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
diff --git a/demos/x-tag-layout/index.html b/demos/x-tag-layout/index.html
index 0dde41a5..4312a431 100644
--- a/demos/x-tag-layout/index.html
+++ b/demos/x-tag-layout/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
diff --git a/demos/x-tag-slidebox/demo.css b/demos/x-tag-slidebox/demo.css
deleted file mode 100644
index 49475f3f..00000000
--- a/demos/x-tag-slidebox/demo.css
+++ /dev/null
@@ -1,26 +0,0 @@
-x-slide {
-  font-size: 3em;
-  line-height: 3em;
-  color: white;
-  text-align: center; }
-
-x-slide:nth-child(7n+1) {
-  background-color: #bf4040; }
-
-x-slide:nth-child(7n+2) {
-  background-color: #bf9240; }
-
-x-slide:nth-child(7n+3) {
-  background-color: #bfbf40; }
-
-x-slide:nth-child(7n+4) {
-  background-color: #206020; }
-
-x-slide:nth-child(7n+5) {
-  background-color: #4040bf; }
-
-x-slide:nth-child(7n+6) {
-  background-color: #462162; }
-
-x-slide:nth-child(7n) {
-  background-color: #602060; }
diff --git a/demos/x-tag-slidebox/demo.js b/demos/x-tag-slidebox/demo.js
deleted file mode 100644
index 1ab1cd03..00000000
--- a/demos/x-tag-slidebox/demo.js
+++ /dev/null
@@ -1,37 +0,0 @@
-function updateDemoSect(demoSect){
-    var contextEl = DemoHelpers.getContextEl(demoSect);
-    var markupEl = DemoHelpers.getMarkupEl(demoSect, "html");
-
-    var htmlMarkup = DemoHelpers.cleanHtmlSource(contextEl.innerHTML, ["style"]);
-    DemoHelpers.updatePrettyprintEl(markupEl, htmlMarkup);
-}
-
-document.addEventListener('DOMComponentsLoaded', function(){
-    xtag.addEvent(document, "update-demo:delegate("+DemoHelpers.DEMO_SECT_SELECTOR+")", function(e){
-        updateDemoSect(this);
-    });
-
-    xtag.addEvent(document, "click:delegate("+DemoHelpers.BUTTON_SELECTOR+".prev)", function(e){
-        var demoSect = DemoHelpers.controlButtonToDemoSect(this);
-        var slidebox = demoSect.querySelector("x-slidebox");
-        slidebox.slidePrevious();
-        updateDemoSect(demoSect);
-    });
-
-    xtag.addEvent(document, "click:delegate("+DemoHelpers.BUTTON_SELECTOR+".next)", function(e){
-        var demoSect = DemoHelpers.controlButtonToDemoSect(this);
-        var slidebox = demoSect.querySelector("x-slidebox");
-        slidebox.slideNext();
-        updateDemoSect(demoSect);
-    });
-
-    xtag.addEvent(document, "click:delegate("+DemoHelpers.BUTTON_SELECTOR+".slideto)", function(e){
-        var button = this;
-        var demoSect = DemoHelpers.controlButtonToDemoSect(button);
-        var slidebox = demoSect.querySelector("x-slidebox");
-        slidebox.slideTo(parseInt(button.getAttribute("data-slide-target")));
-        updateDemoSect(demoSect);
-    });
-
-    DemoHelpers.initializeDemos();
-});
\ No newline at end of file
diff --git a/demos/x-tag-slidebox/index.html b/demos/x-tag-slidebox/index.html
deleted file mode 100644
index cb7759ed..00000000
--- a/demos/x-tag-slidebox/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
-
-
-
-
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
-    <title>Brick x-slidebox demos</title>
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400">
-    <link rel="stylesheet" href="../../site/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../../dist/brick.css"/>
-    <link rel="stylesheet" href="../../site/css/main.css">
-    
-    <link rel="stylesheet" type="text/css" href="../../site/css/prettify.css">
-    <link rel="stylesheet" type="text/css" href="demo.css"/>
-
-  </head>
-  <body>
-    <header class="site-header">
-      
-<nav class="navbar navbar-default navbar-fixed-top grayshade" role="navigation">
-  <div class="container">
-    <div class="navbar-header">
-      <a class="navbar-brand" href="../../index.html">
-        <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
-      </a>
-    </div>
-    <ul class="navbar-nav nav">
-      <li><a href="../../docs.html">
-        <span class="succinct">Docs</span>
-        <span class="verbose">Documentation &amp; Demos</span>
-      </a></li>
-      <li><a href="../../download.html">
-        <span>Download</span>
-      </a></li>
-      <li><a href="http://github.com/mozilla/brick/">
-        <span>Github</span>
-      </a></li>
-      <li><a href="http://github.com/mozilla/brick/issues">
-        <span>Issues</span>
-      </a></li>
-    </ul>
-  </div>
-</nav>
-
-      
-      
-    </header>
-    <article class="container">
-      
-    <header>
-        <h1>x-slidebox</h1> 
-    </header>
-    <a href="../../docs.html">&laquo; Back to docs</a>
-    
-
-    <p>An <code class="prettyprint">&lt;x-slidebox&gt;</code> is similar to an <code class="prettyprint">&lt;x-deck&gt;</code>, in that it can slide between different slides of content.</p>
-    <p>However, the main difference is that <code class="prettyprint">&lt;x-slidebox&gt;</code> treats the slides as a coherent filmstrip instead of as independent cards, so transitioning from one slide to another displays all slides in between during the animation.
-    <section class="demo-wrap">
-        <header><h2>Basic usage</h2></header>
-        <div class="two-up">
-            <figure class="demo">
-                <x-slidebox>
-                    <x-slides>
-                        <x-slide>Slide 0</x-slide>
-                        <x-slide>Slide 1</x-slide>
-                        <x-slide>Slide 2</x-slide>
-                        <x-slide>Slide 3</x-slide>
-                        <x-slide>Slide 4</x-slide>
-                        <x-slide>Slide 5</x-slide>
-                        <x-slide>Slide 6</x-slide>
-                    </x-slides>
-                </x-slidebox>
-            </figure>
-        </div>
-        <div class="markup-wrap two-up">
-            <div class="controls">
-                <button class="btn btn-default prev">Previous</button>
-                <button class="btn btn-default slideto" data-slide-target=6>Slide to slide 6</button>
-                <button class="btn btn-default next">Next</button>
-            </div>
-            <h3>Markup</h3>
-            <pre class="prettyprint html">&lt;x-slidebox&gt;<br/>    &lt;x-slides&gt;<br/>        &lt;x-slide&gt;Slide 0&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 1&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 2&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 3&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 4&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 5&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 6&lt;/x-slide&gt;<br/>    &lt;/x-slides&gt;<br/>&lt;/x-slidebox&gt;</pre>
-            <h3>JavaScript</h3>
-            <pre class="prettyprint html">// assume prevButton, nextButton, slideToButton,<br/>// and slideBox are already defined as their <br/>// respective DOM elements<br/><br/>// go back a slide<br/>prevButton.addEventListener(&quot;click&quot;, function(){<br/>   slidebox.slidePrevious(); <br/>});<br/><br/>// go forward a slide<br/>nextButton.addEventListener(&quot;click&quot;, function(){<br/>   slidebox.slideNext(); <br/>});<br/><br/>// jump to slide 6<br/>slideToButton.addEventListener(&quot;click&quot;, function(){<br/>   slidebox.slideTo(6); <br/>});</pre>
-        </div>
-        <a href="#" class="top">Top</a>
-    </section>
-
-    <section class="demo-wrap">
-        <header><h2>Changing Slide Direction with <code>orientation</code></h2></header>
-        <p>To change whethe the slidebox slides horizontally or vertically, edit the <code>orientation</code> attribute of the <code class="prettyprint">&lt;x-slidebox&gt;</code>.</p>
-        <p>Valid options: <code class="prettyprint">"x"</code>, <code class="prettyprint">"y"</code>
-        </p>
-        <div class="two-up">
-            <figure class="demo">
-                <x-slidebox orientation="x">
-                    <x-slides>
-                        <x-slide>Slide 0</x-slide>
-                        <x-slide>Slide 1</x-slide>
-                        <x-slide>Slide 2</x-slide>
-                        <x-slide>Slide 3</x-slide>
-                        <x-slide>Slide 4</x-slide>
-                        <x-slide>Slide 5</x-slide>
-                        <x-slide>Slide 6</x-slide>
-                    </x-slides>
-                </x-slidebox>
-            </figure>
-        </div>
-        <div class="markup-wrap two-up">
-            <div class="controls">
-                <button class="btn btn-default prev">Previous</button>
-                <button class="btn btn-default" data-toggle-prop="orientation" data-toggle-target="x-slidebox" data-toggle-options='["x", "y"]'>Toggle <code class="prettyprint attr-status">orientation="x"</code></button>
-                <button class="btn btn-default next">Next</button>
-            </div>
-            <h3>Markup</h3>
-            <pre class="prettyprint html">&lt;x-slidebox&gt;<br/>    &lt;x-slides&gt;<br/>        &lt;x-slide&gt;Slide 0&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 1&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 2&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 3&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 4&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 5&lt;/x-slide&gt;<br/>        &lt;x-slide&gt;Slide 6&lt;/x-slide&gt;<br/>    &lt;/x-slides&gt;<br/>&lt;/x-slidebox&gt;</pre>
-        </div>
-        <a href="#" class="top">Top</a>
-    </section>
-
-
-      <footer class="row">
-        <div class="col-xs-8"></div>
-        <div class="col-xs-4">
-          <a class="moz" href="https://mozilla.org/"><img alt="mozilla" src="../../site/img/mozillaHTML5.png" title="built by Mozilla"></a>
-        </div>
-      </footer>
-    </article>
-    <script src="../../dist/brick.js"></script>
-     
-    <script type="text/javascript" src="../../site/js/prettify.js"></script>
-    <script type="text/javascript" src="../../site/js/demo-page-helpers.js"></script>
-    <script type="text/javascript" src="demo.js"></script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/demos/x-tag-slider/index.html b/demos/x-tag-slider/index.html
index ac8e81f6..0a8c94c9 100644
--- a/demos/x-tag-slider/index.html
+++ b/demos/x-tag-slider/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
diff --git a/demos/x-tag-tabbar/index.html b/demos/x-tag-tabbar/index.html
index 15e7a7f6..ddafe0b2 100644
--- a/demos/x-tag-tabbar/index.html
+++ b/demos/x-tag-tabbar/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
@@ -57,7 +57,7 @@ <h1>x-tabbar</h1>
     <a href="../../docs.html">&laquo; Back to docs</a>
     
   <p><code class="prettyprint">&lt;x-tabbar&gt;</code> elements are essentially containers for <code class="prettyprint">&lt;x-tabbar-tab&gt;</code> elements.<p>
-  <p>By default, whenever an <code class="prettyprint">&lt;x-tabbar-tab&gt;</code> element is clicked, it will fire a <code>show</code> event on its targeted elements. It is up to the element to respond to this event, but some components bundled in Brick have built in responses to <code>show</code> events.</p>
+  <p>By default, whenever an <code class="prettyprint">&lt;x-tabbar-tab&gt;</code> element is clicked, it will fire a <code>reveal</code> event on its targeted elements. It is up to the element to respond to this event, but some components bundled in Brick have built in responses to <code>reveal</code> events.</p>
   <p>Users can specify target elements by modifying the <code>target-selector</code> attribute or the <code>.targetSelector</code> property of the tabbar's tab with a document-relative CSS selector. This will essentially act as a delegation, so any elements matching the selector at the time of clicking the tab will be receive the event.</p>
   <p>However, we can also provide an unchanging list of elements to target by editing the <code>.targetElems</code> propery of the tabbar's tab.</p>
   <section class="demo-wrap">
diff --git a/demos/x-tag-toggle/index.html b/demos/x-tag-toggle/index.html
index 8d07d1d9..76c08ac0 100644
--- a/demos/x-tag-toggle/index.html
+++ b/demos/x-tag-toggle/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="../../index.html">
         <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
@@ -63,9 +63,8 @@ <h1>x-toggle</h1>
         <div class="two-up">
             <figure class="demo">
                 <x-toggle label="Basic toggle"></x-toggle>
-                <x-toggle label="Place markup in the <code>label</code>."></x-toggle>
-                <x-toggle label="<span style='vertical-align: middle;'>Any markup works!</span> <img src='../../site/img/grounds_keeping_it_real_s1.gif' style='vertical-align: middle;'/>"></x-toggle>
-                <x-toggle label="Escaped angle brackets: &amp;lt; &amp;gt;"></x-toggle>
+                <x-toggle label="Any text works!"></x-toggle>
+                <x-toggle label="Use Unicode: &#9889;"></x-toggle>
             </figure>
         </div>
         <div class="markup-wrap two-up">
@@ -153,7 +152,7 @@ <h3>CSS styling</h3>
         <p>To fully customize how the <code class="prettyprint">&lt;x-toggle&gt;</code> appear, utilize any of the following CSS selectors to customize specific parts of the toggle:
             <ul>
                 <li>To style the toggle as a whole, apply styles to <code class="prettyprint">x-toggle</code>.</li>
-                <li>To style the toggle's content/label area only, apply styles to <code class="prettyprint">x-toggle > .x-toggle-content</code>.</li>
+                <li>To set the text for a toggle's label, add a <code class="prettyprint">label</code> attribute (text shown using <code class="prettyprint">:after</code> pseudo element)</li>
                 <li>To style the toggle's checkbox/radiobutton only, apply styles to <code class="prettyprint">x-toggle > .x-toggle-check</code>.</li>
                 <li>To style checkbox-type toggles only, apply styles to <code class="prettyprint">x-toggle[type='checkbox']</code>.</li>
                 <li>To style radio-type toggles only, apply styles to <code class="prettyprint">x-toggle[type='radio']</code>.</li>
diff --git a/demos/x-tag-tooltip/demo.css b/demos/x-tag-tooltip/demo.css
deleted file mode 100644
index f6673c85..00000000
--- a/demos/x-tag-tooltip/demo.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.demo > .target-button{
-    position:relative;
-    border-radius: 4px;
-    background: tomato;
-    color: white;
-    box-shadow: 1px 1px 4px grey;
-
-    width: 80%;
-    padding: 5%;
-    margin: 0 auto;
-
-    text-align: center;
-}
-
-.demo > .target-button:only-of-type
-{
-    margin: 0;
-    position:absolute;
-    left: 50%;
-    top: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    -moz-transform: translate(-50%, -50%);
-    -ms-transform: translate(-50%, -50%);
-    -o-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-}
-
-.target-button.sibling-demo{
-    margin-top: 15%;
-}
-
-.target-button.sibling-demo img{
-    display: block;
-    margin: 0 auto;
-}
-
-x-tooltip code{
-    white-space: nowrap;
-}
-
-.sibling-demo[not-target]{
-    background-color: grey;
-}
-
-.sibling-demo[not-target] img[not-target]{
-    opacity: 0.5;
-}
\ No newline at end of file
diff --git a/demos/x-tag-tooltip/demo.js b/demos/x-tag-tooltip/demo.js
deleted file mode 100644
index 68c0fb7e..00000000
--- a/demos/x-tag-tooltip/demo.js
+++ /dev/null
@@ -1,109 +0,0 @@
-// updates the trigger-style demo's content. also manages custom handlers for 
-// trigger-style="custom" option
-var updateTriggerStyleDemoContent = function(){
-    var tooltip = document.getElementById("trigger-style-demo-tip");
-    if(!tooltip) return function(){};
-    
-    var demoSect = tooltip.parentNode.parentNode.parentNode;
-    var targetButton = demoSect.querySelector(".target-button span");
-
-    var _toggleListener = function(){
-        tooltip.toggle(); 
-    };
-
-    // update hidden status of custom source elements
-    var _updateSourceVisibility = function(){
-        xtag.query(demoSect, ".custom-source").forEach(function(customSourceEl){
-            if(tooltip.triggerStyle === "custom"){
-                customSourceEl.removeAttribute("hidden");
-            }
-            else{
-                customSourceEl.setAttribute("hidden", "true");
-            }
-        });
-    };
-
-    return function(){
-        var triggerStyle = tooltip.triggerStyle;
-
-        if(triggerStyle !== "custom"){
-            // remove custom toggle button handler first
-            var customToggleButton = targetButton.querySelector("#custom-toggle-button");
-            if(customToggleButton){
-                customToggleButton.removeEventListener("click", _toggleListener);
-            }
-
-            // set normal text
-            var cappedStyle = triggerStyle.charAt(0).toUpperCase() + 
-                              triggerStyle.substring(1);
-            targetButton.textContent = cappedStyle + " me!";
-            tooltip.contentEl.textContent = cappedStyle + " somewhere else to hide!";
-        }
-        else{
-            // set custom toggle button and add handler
-            tooltip.contentEl.textContent = "Click the button again to hide!";
-            targetButton.innerHTML = 
-                    "<button id='custom-toggle-button'>Click me!</button>" +
-                    "<br/>We are using custom handlers!";
-
-            var customToggleButton = targetButton.querySelector("#custom-toggle-button");
-            customToggleButton.addEventListener("click", _toggleListener);
-        }
-
-        _updateSourceVisibility();
-    };
-}();
-
-function lineBreakTooltip(markup){
-    var tooltipOpen = /<x-tooltip.*?>/.exec(markup);
-    var tooltipClose = /<\/x-tooltip>/.exec(markup);
-    var contentIndex = tooltipOpen.index + tooltipOpen[0].length;
-    return (markup.substring(0, contentIndex) +  "\n    " + 
-            markup.substring(contentIndex, tooltipClose.index) + "\n" +
-            markup.substring(tooltipClose.index));
-}
-
-function updateDemoSect(demoSect, toggleProp){
-    var contextEl = DemoHelpers.getContextEl(demoSect);
-    var markupEl = DemoHelpers.getMarkupEl(demoSect, "html");
-
-    var tooltip = contextEl.querySelector("x-tooltip");
-    if(tooltip && toggleProp){
-        switch(toggleProp){
-            case "orientation":
-                tooltip.contentEl.innerHTML = '<code>orientation="'+tooltip.orientation+'"</code>';
-                break;
-            case "targetSelector":
-                tooltip.contentEl.innerHTML = '<code>target-selector="'+tooltip.targetSelector+'"</code>';
-                break;
-            case "triggerStyle":
-                updateTriggerStyleDemoContent();
-                break;
-            default:
-                break;
-        }
-    }
-
-    var markup = contextEl.innerHTML;
-    if(tooltip){
-        markup = markup.replace(tooltip.innerHTML, tooltip.contentEl.innerHTML);
-    }
-
-    markup = DemoHelpers.cleanHtmlSource(markup, ["style", "_auto-orientation"]);
-    markup = lineBreakTooltip(markup)
-    DemoHelpers.updatePrettyprintEl(markupEl, markup);
-}
-
-document.addEventListener('DOMComponentsLoaded', function(){
-    xtag.addEvent(document, "update-demo:delegate("+DemoHelpers.DEMO_SECT_SELECTOR+")", function(e){
-        if(e.detail && e.detail.toggleProp){
-            updateDemoSect(this, e.detail.toggleProp);
-        }
-        else{
-            updateDemoSect(this);
-        }
-    });
-
-    updateTriggerStyleDemoContent();
-    DemoHelpers.initializeDemos();
-});
\ No newline at end of file
diff --git a/demos/x-tag-tooltip/index.html b/demos/x-tag-tooltip/index.html
deleted file mode 100644
index 06b64b2d..00000000
--- a/demos/x-tag-tooltip/index.html
+++ /dev/null
@@ -1,195 +0,0 @@
-
-
-
-
-<!doctype html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
-    <title>Brick x-tooltip demos</title>
-    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400">
-    <link rel="stylesheet" href="../../site/css/bootstrap.min.css">
-    <link rel="stylesheet" href="../../dist/brick.css"/>
-    <link rel="stylesheet" href="../../site/css/main.css">
-    
-    <link rel="stylesheet" type="text/css" href="../../site/css/prettify.css">
-    <link rel="stylesheet" type="text/css" href="demo.css"/>
-
-  </head>
-  <body>
-    <header class="site-header">
-      
-<nav class="navbar navbar-default navbar-fixed-top grayshade" role="navigation">
-  <div class="container">
-    <div class="navbar-header">
-      <a class="navbar-brand" href="../../index.html">
-        <img class="logo" src="../../site/img/logo.png">
-        Brick<small> 0.10.0</small>
-      </a>
-    </div>
-    <ul class="navbar-nav nav">
-      <li><a href="../../docs.html">
-        <span class="succinct">Docs</span>
-        <span class="verbose">Documentation &amp; Demos</span>
-      </a></li>
-      <li><a href="../../download.html">
-        <span>Download</span>
-      </a></li>
-      <li><a href="http://github.com/mozilla/brick/">
-        <span>Github</span>
-      </a></li>
-      <li><a href="http://github.com/mozilla/brick/issues">
-        <span>Issues</span>
-      </a></li>
-    </ul>
-  </div>
-</nav>
-
-      
-      
-    </header>
-    <article class="container">
-      
-    <header>
-        <h1>x-tooltip</h1> 
-    </header>
-    <a href="../../docs.html">&laquo; Back to docs</a>
-    
-
-    <section id="basic-demo" class="demo-wrap">
-        <header><h2>Basic usage</h2></header>
-        <p>In its most basic form, place the <code class="prettyprint">&lt;x-tooltip&gt;</code> in the markup immediately after the element that should trigger it. (You can specify the target element with an attribute, but the default is the previous sibling.)</p>
-        <p>By default, the <code class="prettyprint">&lt;x-tooltip&gt;</code> will trigger on a <code>click</code> event, and will be auto-oriented.</p>
-        <p>Note that the tooltip is not removed from its markup location, and will thus retain the same nesting and DOM ancestors that it started in.</p>
-        <div class="two-up">
-            <figure class="demo">
-                <div class="target-button">
-                    Click this div to see a tooltip!
-                </div>
-                <x-tooltip>You can include any markup here! <a href="#">(Wow!)</a></x-tooltip>
-            </figure>
-        </div>
-        <div class="markup-wrap two-up">
-            <h3>Markup</h3>
-            <pre class="prettyprint html">&lt;div class=&quot;target-button&quot;&gt;<br/>    Click this div to see a tooltip!<br/>&lt;/div&gt;<br/>&lt;x-tooltip&gt;You can include any markup here! &lt;a href=&quot;#&quot;&gt;(Wow!)&lt;/a&gt;&lt;/x-tooltip&gt;</pre>
-        </div>
-        <a href="#" class="top">Top</a>
-    </section>
-    <!-- orientation demo -->
-    <section class="demo-wrap">
-        <header><h2><code>orientation</code>: Specifying different positions</h2></header>
-        <p>Specifies where the <code class="prettyprint">&lt;x-tooltip&gt;</code> appears in relation to the target triggering element.</p>
-        <p>Valid options: <code class="prettyprint">"left","right","top","bottom","auto"</code></p>
-        <p>By default, the <code>orientation</code> is <code class"prettyprint">"auto"</code>, meaning that the <code class="prettyprint">&lt;x-tooltip&gt;</code> will attempt to place itself in the best position that doesn't overlap the triggering element.</p>
-        <div class="two-up">
-            <figure class="demo">
-                <div class="target-button">
-                    Click this div to see a tooltip!
-                </div>
-                <x-tooltip orientation="top" allow-overflow><code>orientation="top"</code></x-tooltip>
-            </figure>
-        </div>
-        <div class="markup-wrap two-up">
-            <div class="controls">
-                <button class="btn btn-default"
-                        data-toggle-prop="orientation"
-                        data-toggle-target="x-tooltip"
-                        data-toggle-options='["auto", "top", "left", "bottom", "right"]'>
-                    Toggle orientation
-                </button>
-            </div>
-            <h3>Markup</h3>
-            <pre class="prettyprint html"></pre>
-        </div>
-        <a href="#" class="top">Top</a>
-    </section>
-    <!-- target-selector demo -->
-    <section class="demo-wrap">
-        <header><h2><code>target-selector</code>: Specifying different targets</h2></header>
-        <p><code>target-selector</code> defines which elements a tooltip attaches to. Valid options:
-        </p>
-        <ul>
-            <li><code>_previousSibling</code> (default): This indicates that the tooltip is attached to the element directly preceding it in the HTML markup.
-            </li>
-            <li><code>_nextSibling</code>: This indicates that the tooltip is attached to the element directly following it in the HTML markup.
-            </li>
-            <li>CSS selectors relative to the <code>document</code> can also be used instead to specify a wider range of elements.
-            </li>
-        </ul>
-        <div class="two-up">
-            <figure class="demo">
-                <div class="sibling-demo target-button">
-                    <img src="http://placecage.com/100/30"/>
-                    I would be selected by _previousSibling!
-                </div>
-                <x-tooltip target-selector="_previousSibling"><code>target-selector="_previousSibling"</code></x-tooltip>
-                <div class="sibling-demo target-button">
-                    <img src="http://placecage.com/c/100/30"/>
-                    I would be selected by _nextSibling!
-                </div>
-            </figure>
-        </div>
-        <div class="markup-wrap two-up">
-            <div class="controls">
-                <button class="btn btn-default"
-                        data-toggle-prop="targetSelector"
-                        data-toggle-target="x-tooltip"
-                        data-toggle-options='["_previousSibling", "_nextSibling", ".sibling-demo img"]'>
-                    Toggle target-selector
-                </button>
-            </div>
-            <h3>Markup</h3>
-            <pre class="prettyprint html"></pre>
-        </div>
-        <a href="#" class="top">Top</a>
-    </section>
-    <!-- trigger-style demo -->
-    <section class="demo-wrap">
-        <header><h2><code>trigger-style</code>: Specifying how to trigger a tooltip</h2></header>
-        <p>This specifies what kind of interaction with a target element will
-           trigger the element. You can either specify <code>hover</code> or 
-           any native event type.
-        </p>
-        <p>You can also specify <code class="prettyprint">trigger-style="custom"</code> to turn off built-in handlers and use the tooltip's <code>.show</code>, <code>.hide</code>, and <code>.toggle</code> methods to build your own triggers.</p>
-        <div class="two-up">
-            <figure class="demo">
-                <div class="target-button">
-                    <span>Click this button!</span>
-                </div>
-                <x-tooltip trigger-style="click" id="trigger-style-demo-tip">Click somewhere else to hide!</x-tooltip>
-            </figure>
-        </div>
-        <div class="markup-wrap two-up">
-            <div class="controls">
-                <button class="btn btn-default" 
-                        data-toggle-prop="triggerStyle"
-                        data-toggle-target="x-tooltip"
-                        data-toggle-options='["click", "hover", "touchstart", "custom"]'>
-                    Toggle trigger-style
-                </button>
-            </div>
-            <h3>Markup</h3>
-            <pre class="prettyprint html"></pre>
-            <h3 class="custom-source" hidden>Custom trigger JavaScript</h3>
-            <pre class="prettyprint javascript custom-source" hidden>var toggleButton = document.getElementById(&quot;custom-toggle-button&quot;);<br/>toggleButton.addEventListener(&quot;click&quot;, function(){<br/>   var tooltip = document.getElementById(&quot;trigger-style-demo-tip&quot;);<br/>   tooltip.toggle(); <br/>});</pre>
-        </div>
-        <a href="#" class="top">Top</a>
-    </section>
-
-
-      <footer class="row">
-        <div class="col-xs-8"></div>
-        <div class="col-xs-4">
-          <a class="moz" href="https://mozilla.org/"><img alt="mozilla" src="../../site/img/mozillaHTML5.png" title="built by Mozilla"></a>
-        </div>
-      </footer>
-    </article>
-    <script src="../../dist/brick.js"></script>
-     
-    <script type="text/javascript" src="../../site/js/prettify.js"></script>
-    <script type="text/javascript" src="../../site/js/demo-page-helpers.js"></script>
-    <script type="text/javascript" src="demo.js"></script>
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/dist/brick.css b/dist/brick.css
index 6f39b6dd..00c185ee 100644
--- a/dist/brick.css
+++ b/dist/brick.css
@@ -147,249 +147,151 @@ x-calendar:not([active]) .next:hover {
   cursor: pointer;
 }
 
-x-deck,
-x-deck > x-card {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=flipX][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: perspective(800px) rotateX(180deg);
-  -moz-transform: perspective(800px) rotateX(180deg);
-  -ms-transform: perspective(800px) rotateX(180deg);
-  -o-transform: perspective(800px) rotateX(180deg);
-  transform: perspective(800px) rotateX(180deg);
-}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=flipX][reverse][selected][_before-animation] {
-  -webkit-transform: perspective(800px) rotateX(-180deg);
-  -moz-transform: perspective(800px) rotateX(-180deg);
-  -ms-transform: perspective(800px) rotateX(-180deg);
-  -o-transform: perspective(800px) rotateX(-180deg);
-  transform: perspective(800px) rotateX(-180deg);
-}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=flipY][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: perspective(800px) rotateY(180deg);
-  -moz-transform: perspective(800px) rotateY(180deg);
-  -ms-transform: perspective(800px) rotateY(180deg);
-  -o-transform: perspective(800px) rotateY(180deg);
-  transform: perspective(800px) rotateY(180deg);
-}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=flipY][reverse][selected][_before-animation] {
-  -webkit-transform: perspective(800px) rotateY(-180deg);
-  -moz-transform: perspective(800px) rotateY(-180deg);
-  -ms-transform: perspective(800px) rotateY(-180deg);
-  -o-transform: perspective(800px) rotateY(-180deg);
-  transform: perspective(800px) rotateY(-180deg);
-}
-x-deck > x-card[selected] {
-  z-index: 2;
-}
-x-deck > x-card[leaving] {
-  z-index: 1;
-}
-x-deck > x-card[card-anim-type=coverLeft][reverse][selected],
-x-deck > x-card[card-anim-type=coverRight][reverse][selected],
-x-deck > x-card[card-anim-type=coverUp][reverse][selected],
-x-deck > x-card[card-anim-type=coverDown][reverse][selected],
-x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[selected],
-x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[selected],
-x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[selected],
-x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[selected] {
-  z-index: 1;
-}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving],
-x-deck > x-card[card-anim-type=coverRight][reverse][leaving],
-x-deck > x-card[card-anim-type=coverUp][reverse][leaving],
-x-deck > x-card[card-anim-type=coverDown][reverse][leaving],
-x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving],
-x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving],
-x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving],
-x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving] {
-  z-index: 2;
-}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollRight][reverse][selected][_before-animation] {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollRight][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[selected][_before-animation] {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollDown][reverse][selected][_before-animation] {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollDown][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=scrollUp][reverse][selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[selected][_before-animation] {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=scrollUp][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
-x-deck > x-card[card-anim-type=coverLeft]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverRight][reverse][selected][_before-animation] {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=coverRight]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverLeft][reverse][selected][_before-animation] {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=coverUp]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverDown][reverse][selected][_before-animation] {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
-x-deck > x-card[card-anim-type=coverDown]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverUp][reverse][selected][_before-animation] {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=coverRight][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=coverDown][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=coverUp][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
 x-deck {
   display: block;
   position: relative;
   overflow: hidden;
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 x-deck > x-card {
+  display: none;
+  position: absolute !important;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 0;
+  opacity: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
+  -webkit-transform: translate(0%, 0%) scale(1);
+  -moz-transform: translate(0%, 0%) scale(1);
+  -ms-transform: translate(0%, 0%) scale(1);
+  -o-transform: translate(0%, 0%) scale(1);
+  transform: translate(0%, 0%) scale(1);
+}
+x-deck > x-card[selected],
+x-deck > x-card[transition] {
   display: block;
-  overflow: hidden;
-  position: absolute !important;
-  -webkit-transition-property: -webkit-transform;
-  -moz-transition-property: -moz-transform;
-  -ms-transition-property: -ms-transform;
-  -o-transition-property: -o-transform;
-  transition-property: transform;
-  -webkit-transition-duration: 0.5s;
-  -moz-transition-duration: 0.5s;
-  -ms-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: ease;
-  -moz-transition-timing-function: ease;
-  -ms-transition-timing-function: ease;
-  -o-transition-timing-function: ease;
-  transition-timing-function: ease;
-  -webkit-transition-delay: 0s;
-  -moz-transition-delay: 0s;
-  -ms-transition-delay: 0s;
-  -o-transition-delay: 0s;
-  transition-delay: 0s;
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  -o-backface-visibility: hidden;
-  backface-visibility: hidden;
-  height: 100%;
-  width: 100%;
-  left: 0px;
-  right: 0px;
-  z-index: 0;
-/** card animation types go here **/
 }
-x-deck > x-card:not([selected]):not([leaving]) {
-  visibility: hidden;
+/*** Default Transition ***/
+x-deck:not([transition-type]) > x-card:not([transition-type]),
+x-deck[transition-type="fade-scale"] > x-card,
+x-deck > x-card[transition-type="fade-scale"] {
   opacity: 0;
+  -webkit-transform: scale(0.85);
+  -moz-transform: scale(0.85);
+  -ms-transform: scale(0.85);
+  -o-transform: scale(0.85);
+  transform: scale(0.85);
+  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+  -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
+  -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
+  -o-transition: opacity 0.5s ease, -o-transform 0.5s ease;
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+x-deck > x-card[show][transition] {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+/*** General Slide Setup ***/
+x-deck[transition-type^="slide"] > x-card,
+x-deck > x-card[transition-type^="slide"] {
+  z-index: 1;
+}
+x-deck[transition-type^="slide"] > x-card[transition-direction="reverse"],
+x-deck > x-card[transition-type^="slide"][transition-direction="reverse"] {
+  z-index: 2;
+}
+x-deck[transition-type^="slide"] > x-card[show],
+x-deck > x-card[show][transition-type^="slide"],
+x-deck[transition-type^="slide"] > x-card[hide],
+x-deck > x-card[hide][transition-type^="slide"] {
+  -webkit-transition: -webkit-transform 0.6s ease;
+  -moz-transition: -moz-transform 0.6s ease;
+  -ms-transition: -ms-transform 0.6s ease;
+  -o-transition: -o-transform 0.6s ease;
+  transition: transform 0.6s ease;
+}
+/*** Right/Left Slide Styles ***/
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-right"],
+x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-right"],
+x-deck[transition-type="slide-left"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-left"],
+x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-left"] {
+  -webkit-transform: translate(-100%, 0);
+  -moz-transform: translate(-100%, 0);
+  -ms-transform: translate(-100%, 0);
+  -o-transform: translate(-100%, 0);
+  transform: translate(-100%, 0);
+}
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-right"],
+x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-right"],
+x-deck[transition-type="slide-left"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-left"],
+x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-left"] {
+  -webkit-transform: translate(100%, 0);
+  -moz-transform: translate(100%, 0);
+  -ms-transform: translate(100%, 0);
+  -o-transform: translate(100%, 0);
+  transform: translate(100%, 0);
+}
+/*** Up/Down Slide Styles ***/
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-up"],
+x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-up"],
+x-deck[transition-type="slide-down"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-down"],
+x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-down"] {
+  -webkit-transform: translate(0, -100%);
+  -moz-transform: translate(0, -100%);
+  -ms-transform: translate(0, -100%);
+  -o-transform: translate(0, -100%);
+  transform: translate(0, -100%);
+}
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-up"],
+x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-up"],
+x-deck[transition-type="slide-down"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-down"],
+x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-down"] {
+  -webkit-transform: translate(0, 100%);
+  -moz-transform: translate(0, 100%);
+  -ms-transform: translate(0, 100%);
+  -o-transform: translate(0, 100%);
+  transform: translate(0, 100%);
+}
+/*** General Slide Show State ***/
+x-deck[transition-type^="slide"] > x-card[show][transition],
+x-deck > x-card[show][transition][transition-type^="slide"] {
+  -webkit-transform: translate(0%, 0%);
+  -moz-transform: translate(0%, 0%);
+  -ms-transform: translate(0%, 0%);
+  -o-transform: translate(0%, 0%);
+  transform: translate(0%, 0%);
 }
 
 x-flipbox {
@@ -649,38 +551,6 @@ x-layout[maxcontent] > footer {
   transform: translateY(100%);
 }
 
-x-slidebox {
-  display: block;
-  overflow: hidden;
-  height: 100%;
-  width: 100%;
-}
-x-slides {
-  display: block;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  -o-transition: -o-transform 0.5s ease;
-  -ms-transition: -ms-transform 0.5s ease;
-  -moz-transition: -moz-transform 0.5s ease;
-  -webkit-transition: -webkit-transform 0.5s ease;
-  transition: transform 0.5s ease;
-}
-x-slides > x-slide {
-  display: block;
-  float: left;
-  height: 100%;
-  width: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  -ms-box-sizing: border-box;
-  -o-box-sizing: border-box;
-  box-sizing: border-box;
-  vertical-align: top;
-  overflow: hidden;
-}
-
 x-slider {
   display: inline-block;
   position: relative;
@@ -807,37 +677,25 @@ x-tabbar > x-tabbar-tab > *:only-child {
 
 x-toggle {
   display: inline-block;
-  position: relative;
-/* vertical centering ghost element */
-}
-x-toggle > .x-toggle-input-wrap {
   cursor: pointer;
-  position: absolute !important;
-  margin: 0px !important;
-  left: 0% !important;
-  top: 0% !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: inline-block !important;
-/* do not remove visibility or display because we still want tabbability
-       and submissability */
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)" !important;
-  opacity: 0.0001 !important;
-  z-index: 9999 !important;
 }
-x-toggle > .x-toggle-input-wrap > input {
-  cursor: pointer;
+x-toggle[focus] {
+  outline: 1px dashed rgba(0,0,0,0.3);
 }
-x-toggle .x-toggle-content {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0px;
+x-toggle[no-box] .x-toggle-check {
+  display: none;
 }
-x-toggle .x-toggle-content:after {
-  content: "";
+x-toggle input:checked + .x-toggle-check {
+  background: #000;
+}
+x-toggle[type="radio"] .x-toggle-check {
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  border-radius: 1em;
+}
+x-toggle:after {
+  content: attr(label);
   display: inline-block;
-  width: 0;
-  height: 100%;
   vertical-align: middle;
 }
 x-toggle .x-toggle-check {
@@ -851,190 +709,88 @@ x-toggle .x-toggle-check {
   color: #000;
   vertical-align: middle;
   border: 1px solid;
+  overflow: hidden !important;
 }
-
-x-tooltip,
-x-tooltip > .tooltip-content,
-x-tooltip > .tooltip-arrow {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-x-tooltip[orientation=top],
-x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=top] {
-  -webkit-transform: translate3d(0, 10px, 1px);
-  -moz-transform: translate3d(0, 10px, 1px);
-  -ms-transform: translate3d(0, 10px, 1px);
-  -o-transform: translate3d(0, 10px, 1px);
-  transform: translate3d(0, 10px, 1px);
-}
-x-tooltip[orientation=bottom],
-x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=bottom] {
-  -webkit-transform: translate3d(0, -10px, 1px);
-  -moz-transform: translate3d(0, -10px, 1px);
-  -ms-transform: translate3d(0, -10px, 1px);
-  -o-transform: translate3d(0, -10px, 1px);
-  transform: translate3d(0, -10px, 1px);
-}
-x-tooltip[orientation=left],
-x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=left] {
-  -webkit-transform: translate3d(10px, 0, 1px);
-  -moz-transform: translate3d(10px, 0, 1px);
-  -ms-transform: translate3d(10px, 0, 1px);
-  -o-transform: translate3d(10px, 0, 1px);
-  transform: translate3d(10px, 0, 1px);
-}
-x-tooltip[orientation=right],
-x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=right] {
-  -webkit-transform: translate3d(-10px, 0, 1px);
-  -moz-transform: translate3d(-10px, 0, 1px);
-  -ms-transform: translate3d(-10px, 0, 1px);
-  -o-transform: translate3d(-10px, 0, 1px);
-  transform: translate3d(-10px, 0, 1px);
-}
-x-tooltip {
-  -webkit-transition-property: visibility -webkit-transform opacity;
-  -moz-transition-property: visibility -moz-transform opacity;
-  -ms-transition-property: visibility -ms-transform opacity;
-  -o-transition-property: visibility -o-transform opacity;
-  transition-property: visibility transform opacity;
-  -webkit-transition-duration: 0.2s;
-  -moz-transition-duration: 0.2s;
-  -ms-transition-duration: 0.2s;
-  -o-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  -webkit-transition-timing-function: ease-in;
-  -moz-transition-timing-function: ease-in;
-  -ms-transition-timing-function: ease-in;
-  -o-transition-timing-function: ease-in;
-  transition-timing-function: ease-in;
-  -webkit-transition-delay: 0s;
-  -moz-transition-delay: 0s;
-  -ms-transition-delay: 0s;
-  -o-transition-delay: 0s;
-  transition-delay: 0s;
+x-toggle input {
   position: absolute;
-  margin: 0;
-  padding: 0;
-  left: 0px;
-  top: 0px;
-  display: block;
-  z-index: 2147483647;
-  overflow: visible;
+  outline: none;
+  z-index: -1;
+/* do not remove visibility or display because we still want tab-ability */
+  opacity: 0.0001 !important;
 }
-x-tooltip[_target-fixed] {
-  position: fixed;
+x-togglebar {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  border: 1px solid #000;
+  border-radius: 4px;
+  clear: both;
 }
-x-tooltip[ignore-tooltip-pointer-events] {
-  pointer-events: none;
+x-togglebar x-toggle {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  padding: 1px 4px 2px;
+  border-left: inherit;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  box-flex: 1;
+  flex: 1;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
-x-tooltip:not([allow-overflow]) {
-  max-width: 100%;
-  max-height: 100%;
+x-togglebar x-toggle:first-child {
+  border-left-color: transparent;
 }
-x-tooltip:not([visible]) {
-  visibility: hidden !important;
-  opacity: 0 !important;
+x-togglebar x-toggle[checked] {
+  background: rgba(0,0,0,0.2);
 }
-x-tooltip:not([visible]):not([_force-display]) {
-  width: 1px !important;
-  height: 1px !important;
-  left: 0px !important;
-  top: 0px !important;
-  margin: 0 !important;
-  border-width: 0px !important;
+x-togglebar x-toggle[focus] {
+  -webkit-box-shadow: 0 0 2px 0 transparent;
+  -moz-box-shadow: 0 0 2px 0 transparent;
+  box-shadow: 0 0 2px 0 transparent;
 }
-x-tooltip:not([visible]):not([_force-display]) > * {
-  display: none !important;
+x-togglebar x-toggle .x-toggle-check {
+  height: 10px;
+  width: 10px;
 }
-x-tooltip[visible] {
-  visibility: visible;
-  opacity: 1;
-  -webkit-transform: translate3d(0, 0, 1px);
-  -moz-transform: translate3d(0, 0, 1px);
-  -ms-transform: translate3d(0, 0, 1px);
-  -o-transform: translate3d(0, 0, 1px);
-  transform: translate3d(0, 0, 1px);
-}
-x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[visible] {
-  -webkit-transform: translate3d(0, 0, 1px);
-  -moz-transform: translate3d(0, 0, 1px);
-  -ms-transform: translate3d(0, 0, 1px);
-  -o-transform: translate3d(0, 0, 1px);
-  transform: translate3d(0, 0, 1px);
-}
-x-tooltip > .tooltip-content {
-  position: relative;
-  display: block;
-  overflow: auto;
-  max-width: inherit;
-  max-height: inherit;
-  z-index: 2;
+x-togglebar x-toggle[type="checkbox"] .x-toggle-check {
+  display: none;
 }
-x-tooltip[allow-overflow] {
-  white-space: nowrap;
+x-togglebar[orientation="vertical"] {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
 }
-x-tooltip > .tooltip-arrow {
-  position: absolute;
-  display: block;
-  margin: 0px;
-  padding: 0px;
-  vertical-align: top;
-  width: 1em;
-  height: 1em;
-  border: inherit;
-  background: inherit;
-  z-index: 1;
+x-togglebar[orientation="vertical"] x-toggle {
+  border-top: inherit;
+  border-left: none;
 }
-x-tooltip > .tooltip-arrow:not([arrow-direction=up]):not([arrow-direction=left]):not([arrow-direction=right]) {
-  top: 100%;
-  left: 50%;
-  -webkit-transform: translateY(-50%) rotate(45deg);
-  -moz-transform: translateY(-50%) rotate(45deg);
-  -ms-transform: translateY(-50%) rotate(45deg);
-  -o-transform: translateY(-50%) rotate(45deg);
-  transform: translateY(-50%) rotate(45deg);
-  border-top-color: transparent !important;
-  border-left-color: transparent !important;
-}
-x-tooltip > .tooltip-arrow[arrow-direction=up] {
-  bottom: 100%;
-  left: 50%;
-  -webkit-transform: translateY(50%) rotate(45deg);
-  -moz-transform: translateY(50%) rotate(45deg);
-  -ms-transform: translateY(50%) rotate(45deg);
-  -o-transform: translateY(50%) rotate(45deg);
-  transform: translateY(50%) rotate(45deg);
-  border-bottom-color: transparent !important;
-  border-right-color: transparent !important;
-}
-x-tooltip > .tooltip-arrow[arrow-direction=left] {
-  right: 100%;
-  top: 50%;
-  -webkit-transform: translateX(50%) rotate(45deg);
-  -moz-transform: translateX(50%) rotate(45deg);
-  -ms-transform: translateX(50%) rotate(45deg);
-  -o-transform: translateX(50%) rotate(45deg);
-  transform: translateX(50%) rotate(45deg);
-  border-top-color: transparent !important;
-  border-right-color: transparent !important;
-}
-x-tooltip > .tooltip-arrow[arrow-direction=right] {
-  left: 100%;
-  top: 50%;
-  -webkit-transform: translateX(-50%) rotate(45deg);
-  -moz-transform: translateX(-50%) rotate(45deg);
-  -ms-transform: translateX(-50%) rotate(45deg);
-  -o-transform: translateX(-50%) rotate(45deg);
-  transform: translateX(-50%) rotate(45deg);
-  border-bottom-color: transparent !important;
-  border-left-color: transparent !important;
-}
-x-tooltip {
-  border: 1px solid #808080;
-  background-color: #fff;
-  border-radius: 4px;
-  box-shadow: 1px 1px 3px #808080;
+x-togglebar[orientation="vertical"] x-toggle:first-child {
+  border-top: none;
 }
 
 x-appbar {
@@ -1068,7 +824,7 @@ x-appbar > button:hover {
   background-color: #00405d;
 }
 x-appbar > button::-moz-focus-inner {
-  bordr: 0;
+  border: 0;
   padding: 0;
 }
 x-appbar > header:after {
@@ -1114,19 +870,45 @@ body {
   min-height: 100%;
 }
 
-
 x-slider {
   height: 27px;
-  padding-bottom: 2px;
+}
+x-slider:not([polyfill]) .slider-thumb {
+  display: none;
+}
+x-slider:not([polyfill]) input {
+  z-index: 1;
+}
+x-slider[polyfill] input {
+  visibility: hidden;
+}
+x-slider .slider-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 3px;
+  background: #0095dd;
 }
 x-slider .slider-thumb,
-x-slider input::-moz-range-thumb {
+x-slider input[type='range']::-webkit-slider-thumb {
   background: #fff;
-  -moz-appearance: none;
   -webkit-appearance: none;
   border-radius: 13px;
-  border: 1px solid #979797;
-  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
+  border: 1px solid #acacac;
+  box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.2);
+  cursor: pointer;
+  display: block;
+  height: 25px;
+  width: 25px;
+}
+x-slider .slider-thumb,
+x-slider input[type='range']::-moz-range-thumb {
+  background: #fff;
+  -moz-appearance: none;
+  border-radius: 13px;
+  border: 1px solid #acacac;
+  box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.2);
   cursor: pointer;
   display: block;
   height: 25px;
@@ -1134,20 +916,30 @@ x-slider input::-moz-range-thumb {
 }
 x-slider .slider-track {
   background: #d8d8d8;
-  border-radius: 4px;
+  border-radius: 3px;
   height: 2px;
+  overflow: hidden;
 }
-x-slider > input::-moz-range-track,
-x-slider > input::-webkit-slider-runnable-track {
+x-slider input[type=range]::-moz-range-track {
+  -moz-appearance: none;
   background: #d8d8d8;
+  border: 0 !important;
+  outline: 0;
+  border-radius: 3px;
+  height: 2px;
+  box-shadow: 0 none;
+}
+x-slider input[type=range]::-moz-range-progress {
+  background: #0095dd;
+  border-radius: 3px;
 }
 x-slider input {
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   background: transparent;
   border: 0px solid transparent;
   color: transparent;
-  padding-bottom: 2px;
 }
 
 x-tabbar {
@@ -1173,6 +965,9 @@ x-tabbar > x-tabbar-tab > x-iconbutton:only-child {
   border: 0;
 }
 
+x-toggle[focus] {
+  outline: 0;
+}
 x-toggle .x-toggle-content {
   min-height: 22px;
   line-height: 24px;
@@ -1180,17 +975,21 @@ x-toggle .x-toggle-content {
 x-toggle .x-toggle-check {
   width: 22px;
   height: 22px;
-  border-radius: 50%;
+  border-radius: 3px;
   margin: 0px 3px 0px 0px;
   color: #000;
   vertical-align: middle;
   border: 1px solid #00202f;
   position: relative;
+  background: #fff;
 }
 x-toggle[no-box] .x-toggle-check {
   display: none !important;
 }
-x-toggle[type="radio"][checked] .x-toggle-check:after {
+x-toggle[type="radio"] input:checked + .x-toggle-check {
+  background: #fff;
+}
+x-toggle[type="radio"] input:checked + .x-toggle-check:after {
   content: '';
   display: block;
   position: absolute;
@@ -1204,11 +1003,11 @@ x-toggle[type="radio"][checked] .x-toggle-check:after {
   height: 14px;
   background: #0095dd;
 }
-x-toggle[type="checkbox"][checked] .x-toggle-check {
+x-toggle[type="checkbox"] input:checked + .x-toggle-check {
   border-width: 0;
   background: #0095dd;
 }
-x-toggle[type="checkbox"][checked] .x-toggle-check:after {
+x-toggle[type="checkbox"] input:checked + .x-toggle-check:after {
   content: '';
   display: block;
   position: absolute;
@@ -1227,16 +1026,3 @@ x-toggle[type="checkbox"][checked] .x-toggle-check:after {
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }
-
-x-tooltip {
-  border: 1px solid #808080;
-  background-color: #fff;
-  border-radius: 3px;
-  box-shadow: 0px 1px 2px rgba(0,0,0,0.5);
-}
-x-tooltip > .tooltip-arrow {
-  box-shadow: 2px 2px 2px -2px rgba(0,0,0,0.5);
-}
-x-tooltip > .tooltip-content {
-  padding: 1em;
-}
diff --git a/dist/brick.js b/dist/brick.js
index f1df362b..ffd21c39 100644
--- a/dist/brick.js
+++ b/dist/brick.js
@@ -2824,505 +2824,188 @@ if (typeof WeakMap === "undefined") {
 })();
 
 (function() {
-    var BEFORE_ANIM_ATTR = "_before-animation";
-    function HistoryStack(validatorFn, itemCap) {
-        this._historyStack = [];
-        this.currIndex = -1;
-        this._itemCap = undefined;
-        this.itemCap = itemCap;
-        this._validatorFn = validatorFn ? validatorFn : function() {
-            return true;
-        };
-    }
-    var HISTORYSTACK_PROTOTYPE = HistoryStack.prototype;
-    HISTORYSTACK_PROTOTYPE.pushState = function(newState) {
-        if (this.canRedo) {
-            this._historyStack.splice(this.currIndex + 1, this._historyStack.length - (this.currIndex + 1));
-        }
-        this._historyStack.push(newState);
-        this.currIndex = this._historyStack.length - 1;
-        this.sanitizeStack();
-        if (this._itemCap !== "none" && this._historyStack.length > this._itemCap) {
-            var len = this._historyStack.length;
-            this._historyStack.splice(0, len - this._itemCap);
-            this.currIndex = this._historyStack.length - 1;
-        }
-    };
-    HISTORYSTACK_PROTOTYPE.sanitizeStack = function() {
-        var validatorFn = this._validatorFn;
-        var lastValidState;
-        var i = 0;
-        while (i < this._historyStack.length) {
-            var state = this._historyStack[i];
-            if (state !== lastValidState && validatorFn(state)) {
-                lastValidState = state;
-                i++;
-            } else {
-                this._historyStack.splice(i, 1);
-                if (i <= this.currIndex) {
-                    this.currIndex--;
-                }
-            }
-        }
-    };
-    HISTORYSTACK_PROTOTYPE.forwards = function() {
-        if (this.canRedo) {
-            this.currIndex++;
-        }
-        this.sanitizeStack();
-    };
-    HISTORYSTACK_PROTOTYPE.backwards = function() {
-        if (this.canUndo) {
-            this.currIndex--;
-        }
-        this.sanitizeStack();
-    };
-    Object.defineProperties(HISTORYSTACK_PROTOTYPE, {
-        DEFAULT_CAP: {
-            value: 10
-        },
-        itemCap: {
-            get: function() {
-                return this._itemCap;
-            },
-            set: function(newCap) {
-                if (newCap === undefined) {
-                    this._itemCap = this.DEFAULT_CAP;
-                } else if (newCap === "none") {
-                    this._itemCap = "none";
-                } else {
-                    var num = parseInt(newCap, 10);
-                    if (isNaN(newCap) || newCap <= 0) {
-                        throw "attempted to set invalid item cap: " + newCap;
-                    }
-                    this._itemCap = num;
-                }
-            }
-        },
-        canUndo: {
-            get: function() {
-                return this.currIndex > 0;
-            }
-        },
-        canRedo: {
-            get: function() {
-                return this.currIndex < this._historyStack.length - 1;
-            }
-        },
-        numStates: {
-            get: function() {
-                return this._historyStack.length;
-            }
-        },
-        currState: {
-            get: function() {
-                var index = this.currIndex;
-                if (0 <= index && index < this._historyStack.length) {
-                    return this._historyStack[index];
-                }
-                return null;
-            }
+    var matchNum = /[1-9]/, replaceSpaces = / /g, captureTimes = /(\d|\d+?[.]?\d+?)(s|ms)(?!\w)/gi, transPre = "transition" in getComputedStyle(document.documentElement) ? "t" : xtag.prefix.js + "T", transDur = transPre + "ransitionDuration", transProp = transPre + "ransitionProperty", skipFrame = function(fn) {
+        xtag.requestFrame(function() {
+            xtag.requestFrame(fn);
+        });
+    }, ready = document.readyState == "complete" ? skipFrame(function() {
+        ready = false;
+    }) : xtag.addEvent(document, "readystatechange", function() {
+        if (document.readyState == "complete") {
+            skipFrame(function() {
+                ready = false;
+            });
+            xtag.removeEvent(document, "readystatechange", ready);
         }
     });
-    function getDurationStr(elem) {
-        var style = window.getComputedStyle(elem);
-        var browserDurationName = xtag.prefix.js + "TransitionDuration";
-        if (style.transitionDuration) {
-            return style.transitionDuration;
-        } else {
-            return style[browserDurationName];
-        }
-    }
-    function durationStrToMs(str) {
-        if (typeof str !== typeof "") {
-            return 0;
-        }
-        var reg = /^(\d*\.?\d+)(m?s)$/;
-        var matchInfo = str.toLowerCase().match(reg);
-        if (matchInfo) {
-            var strVal = matchInfo[1];
-            var unit = matchInfo[2];
-            var val = parseFloat(strVal);
-            if (isNaN(val)) {
-                throw "value error";
-            }
-            if (unit === "s") {
-                return val * 1e3;
-            } else if (unit === "ms") {
-                return val;
-            } else {
-                throw "unit error";
-            }
-        } else {
-            return 0;
-        }
-    }
-    function posModulo(x, divisor) {
-        return (x % divisor + divisor) % divisor;
-    }
-    function _getAllCards(elem) {
-        return xtag.queryChildren(elem, "x-card");
+    function getTransitions(node) {
+        node.__transitions__ = node.__transitions__ || {};
+        return node.__transitions__;
     }
-    function _getCardAt(deck, targetIndex) {
-        var cards = _getAllCards(deck);
-        return isNaN(parseInt(targetIndex, 10)) || targetIndex < 0 || targetIndex >= cards.length ? null : cards[targetIndex];
+    function startTransition(node, name, transitions) {
+        var style = getComputedStyle(node), after = transitions[name].after;
+        node.setAttribute("transition", name);
+        if (after && !style[transDur].match(matchNum)) after();
     }
-    function _getCardIndex(deck, card) {
-        var allCards = _getAllCards(deck);
-        return allCards.indexOf(card);
-    }
-    function _animateCardReplacement(deck, oldCard, newCard, cardAnimName, isReverse) {
-        deck.xtag._selectedCard = newCard;
-        var animTimeStamp = new Date();
-        deck.xtag._lastAnimTimestamp = animTimeStamp;
-        var _onComplete = function() {
-            if (animTimeStamp === deck.xtag._lastAnimTimestamp) {
-                _sanitizeCardAttrs(deck);
-                xtag.fireEvent(deck, "shuffleend", {
-                    detail: {
-                        oldCard: oldCard,
-                        newCard: newCard
-                    }
+    xtag.addEvents(document, {
+        transitionend: function(e) {
+            var node = e.target, name = node.getAttribute("transition");
+            if (name) {
+                var i = 0, max = 0, prop = null, style = getComputedStyle(node), transitions = getTransitions(node), props = style[transProp].replace(replaceSpaces, "").split(",");
+                style[transDur].replace(captureTimes, function(match, time, unit) {
+                    time = parseFloat(time) * (unit === "s" ? 1e3 : 1);
+                    if (time > max) prop = i, max = time;
+                    i++;
                 });
+                prop = props[prop];
+                if (!prop) throw new SyntaxError("No matching transition property found"); else if (e.propertyName == prop && transitions[name].after) transitions[name].after();
             }
-        };
-        if (newCard === oldCard) {
-            _onComplete();
-            return;
         }
-        var oldCardAnimReady = false;
-        var newCardAnimReady = false;
-        var animationStarted = false;
-        var _attemptBeforeCallback = function() {
-            if (oldCardAnimReady && newCardAnimReady) {
-                _getAllCards(deck).forEach(function(card) {
-                    card.removeAttribute("selected");
-                    card.removeAttribute("leaving");
-                });
-                oldCard.setAttribute("leaving", true);
-                newCard.setAttribute("selected", true);
-                deck.xtag._selectedCard = newCard;
-                deck.selectedIndex = _getCardIndex(deck, newCard);
-                if (isReverse) {
-                    oldCard.setAttribute("reverse", true);
-                    newCard.setAttribute("reverse", true);
-                }
-                xtag.fireEvent(deck, "shufflestart", {
-                    detail: {
-                        oldCard: oldCard,
-                        newCard: newCard
-                    }
-                });
-            }
-        };
-        var _attemptAnimation = function() {
-            if (animationStarted) {
-                return;
-            }
-            if (!(oldCardAnimReady && newCardAnimReady)) {
-                return;
-            }
-            _doAnimation();
-        };
-        var _doAnimation = function() {
-            animationStarted = true;
-            var oldCardDone = false;
-            var newCardDone = false;
-            var animationComplete = false;
-            var onTransitionComplete = function(e) {
-                if (animationComplete) {
-                    return;
-                }
-                if (e.target === oldCard) {
-                    oldCardDone = true;
-                    oldCard.removeEventListener("transitionend", onTransitionComplete);
-                } else if (e.target === newCard) {
-                    newCardDone = true;
-                    newCard.removeEventListener("transitionend", onTransitionComplete);
-                }
-                if (oldCardDone && newCardDone) {
-                    animationComplete = true;
-                    _onComplete();
-                }
-            };
-            oldCard.addEventListener("transitionend", onTransitionComplete);
-            newCard.addEventListener("transitionend", onTransitionComplete);
-            var oldDuration = durationStrToMs(getDurationStr(oldCard));
-            var newDuration = durationStrToMs(getDurationStr(newCard));
-            var maxDuration = Math.max(oldDuration, newDuration);
-            var waitMultiplier = 1.15;
-            var timeoutDuration = cardAnimName.toLowerCase() === "none" ? 0 : Math.ceil(maxDuration * waitMultiplier);
-            if (timeoutDuration === 0) {
-                animationComplete = true;
-                oldCard.removeEventListener("transitionend", onTransitionComplete);
-                newCard.removeEventListener("transitionend", onTransitionComplete);
-                oldCard.removeAttribute(BEFORE_ANIM_ATTR);
-                newCard.removeAttribute(BEFORE_ANIM_ATTR);
-                _onComplete();
-            } else {
-                oldCard.removeAttribute(BEFORE_ANIM_ATTR);
-                newCard.removeAttribute(BEFORE_ANIM_ATTR);
-                window.setTimeout(function() {
-                    if (animationComplete) {
-                        return;
-                    }
-                    animationComplete = true;
-                    oldCard.removeEventListener("transitionend", onTransitionComplete);
-                    newCard.removeEventListener("transitionend", onTransitionComplete);
-                    _onComplete();
-                }, timeoutDuration);
-            }
-        };
-        xtag.skipTransition(oldCard, function() {
-            oldCard.setAttribute("card-anim-type", cardAnimName);
-            oldCard.setAttribute(BEFORE_ANIM_ATTR, true);
-            oldCardAnimReady = true;
-            _attemptBeforeCallback();
-            return _attemptAnimation;
-        }, this);
-        xtag.skipTransition(newCard, function() {
-            newCard.setAttribute("card-anim-type", cardAnimName);
-            newCard.setAttribute(BEFORE_ANIM_ATTR, true);
-            newCardAnimReady = true;
-            _attemptBeforeCallback();
-            return _attemptAnimation;
-        }, this);
-    }
-    function _replaceCurrCard(deck, newCard, transitionType, progressType, ignoreHistory) {
-        var oldCard = deck.xtag._selectedCard;
-        if (oldCard === newCard) {
-            var eDetail = {
-                detail: {
-                    oldCard: oldCard,
-                    newCard: newCard
-                }
+    });
+    xtag.transition = function(node, name, obj) {
+        var transitions = getTransitions(node), options = transitions[name] = obj || {};
+        if (options.immediate) options.immediate();
+        if (options.before) {
+            options.before();
+            if (ready) xtag.skipTransition(node, function() {
+                startTransition(node, name, transitions);
+            }); else skipFrame(function() {
+                startTransition(node, name, transitions);
+            });
+        } else startTransition(node, name, transitions);
+    };
+    xtag.pseudos.transition = {
+        onCompiled: function(fn, pseudo) {
+            var options = {}, when = pseudo["arguments"][0] || "immediate", name = pseudo["arguments"][1] || pseudo.key.split(":")[0];
+            return function() {
+                var target = this, args = arguments;
+                if (this.hasAttribute("transition")) {
+                    options[when] = function() {
+                        return fn.apply(target, args);
+                    };
+                    xtag.transition(this, name, options);
+                } else return fn.apply(this, args);
             };
-            xtag.fireEvent(deck, "shufflestart", eDetail);
-            xtag.fireEvent(deck, "shuffleend", eDetail);
-            return;
-        }
-        _sanitizeCardAttrs(deck);
-        if (transitionType === undefined) {
-            transitionType = "none";
         }
-        var isReverse;
-        switch (progressType) {
-          case "forward":
-            isReverse = false;
-            break;
-
-          case "reverse":
-            isReverse = true;
-            break;
+    };
+})();
 
-          default:
-            if (!oldCard) {
-                isReverse = false;
-            }
-            var allCards = _getAllCards(deck);
-            if (allCards.indexOf(newCard) < allCards.indexOf(oldCard)) {
-                isReverse = true;
-            } else {
-                isReverse = false;
-            }
-            break;
-        }
-        if (newCard.hasAttribute("transition-override")) {
-            transitionType = newCard.getAttribute("transition-override");
-        }
-        if (!ignoreHistory) {
-            deck.xtag.history.pushState(newCard);
-        }
-        _animateCardReplacement(deck, oldCard, newCard, transitionType, isReverse);
+(function() {
+    var sides = {
+        next: [ "nextElementSibling", "firstElementChild" ],
+        previous: [ "previousElementSibling", "lastElementChild" ]
+    };
+    function indexOfCard(deck, card) {
+        return Array.prototype.indexOf.call(deck.children, card);
     }
-    function _replaceWithIndex(deck, targetIndex, transitionType, progressType) {
-        var newCard = _getCardAt(deck, targetIndex);
-        if (!newCard) {
-            throw "no card at index " + targetIndex;
-        }
-        _replaceCurrCard(deck, newCard, transitionType, progressType);
+    function getCard(deck, item) {
+        return item && item.nodeName ? item : isNaN(item) ? xtag.queryChildren(deck, item) : deck.children[item];
     }
-    function _sanitizeCardAttrs(deck) {
-        if (!deck.xtag._initialized) {
-            return;
-        }
-        var cards = _getAllCards(deck);
-        var currCard = deck.xtag._selectedCard;
-        if (!currCard || currCard.parentNode !== deck) {
-            if (cards.length > 0) {
-                if (deck.xtag.history && deck.xtag.history.numStates > 0) {
-                    currCard = deck.xtag.history.currState;
-                } else {
-                    currCard = cards[0];
-                }
-            } else {
-                currCard = null;
-            }
-        }
-        cards.forEach(function(card) {
-            card.removeAttribute("leaving");
-            card.removeAttribute(BEFORE_ANIM_ATTR);
-            card.removeAttribute("card-anim-type");
-            card.removeAttribute("reverse");
-            if (card !== currCard) {
-                card.removeAttribute("selected");
-            } else {
-                card.setAttribute("selected", true);
-            }
-        });
-        deck.xtag._selectedCard = currCard;
-        deck.selectedIndex = _getCardIndex(deck, currCard);
+    function checkCard(deck, card, selected) {
+        return card && (selected ? card == deck.xtag.selected : card != deck.xtag.selected) && deck == card.parentNode && card.nodeName == "X-CARD";
+    }
+    function shuffle(deck, side, direction) {
+        var getters = sides[side], selected = deck.xtag.selected && deck.xtag.selected[getters[0]];
+        if (selected) deck.showCard(selected, direction); else if (deck.loop || deck.selectedIndex == -1) deck.showCard(deck[getters[1]], direction);
     }
     xtag.register("x-deck", {
-        lifecycle: {
-            created: function() {
-                var self = this;
-                self.xtag._initialized = true;
-                var _historyValidator = function(card) {
-                    return card.parentNode === self;
-                };
-                self.xtag.history = new HistoryStack(_historyValidator, HistoryStack.DEFAULT_CAP);
-                self.xtag._selectedCard = self.xtag._selectedCard ? self.xtag._selectedCard : null;
-                self.xtag._lastAnimTimestamp = null;
-                self.xtag.transitionType = "scrollLeft";
-                var initCard = self.getCardAt(self.getAttribute("selected-index"));
-                if (initCard) {
-                    self.xtag._selectedCard = initCard;
-                }
-                _sanitizeCardAttrs(self);
-                var currCard = self.xtag._selectedCard;
-                if (currCard) {
-                    self.xtag.history.pushState(currCard);
-                }
-            }
-        },
         events: {
-            "show:delegate(x-card)": function() {
-                var card = this;
-                card.show();
+            "reveal:delegate(x-card)": function(e) {
+                if (this.parentNode == e.currentTarget) e.currentTarget.showCard(this);
             }
         },
         accessors: {
-            transitionType: {
+            loop: {
                 attribute: {
-                    name: "transition-type"
-                },
+                    "boolean": true
+                }
+            },
+            cards: {
+                get: function() {
+                    return xtag.queryChildren(this, "x-card");
+                }
+            },
+            selectedCard: {
                 get: function() {
-                    return this.xtag.transitionType;
+                    return this.xtag.selected || null;
                 },
-                set: function(newType) {
-                    this.xtag.transitionType = newType;
+                set: function(card) {
+                    this.showCard(card);
                 }
             },
             selectedIndex: {
                 attribute: {
-                    skip: true,
-                    name: "selected-index"
+                    name: "selected-index",
+                    unlink: true
                 },
                 get: function() {
-                    return _getCardIndex(this, this.xtag._selectedCard);
+                    return this.hasAttribute("selected-index") ? Number(this.getAttribute("selected-index")) : -1;
                 },
-                set: function(newIndex) {
-                    if (this.selectedIndex !== newIndex) {
-                        _replaceWithIndex(this, newIndex, "none");
+                set: function(value) {
+                    var index = Number(value), card = this.cards[index];
+                    if (card) {
+                        this.setAttribute("selected-index", index);
+                        if (card != this.xtag.selected) this.showCard(card);
+                    } else {
+                        this.removeAttribute("selected-index");
+                        if (this.xtag.selected) this.hideCard(this.xtag.selected);
                     }
-                    this.setAttribute("selected-index", newIndex);
                 }
             },
-            historyCap: {
+            transitionType: {
                 attribute: {
-                    name: "history-cap"
-                },
-                get: function() {
-                    return this.xtag.history.itemCap;
+                    name: "transition-type"
                 },
-                set: function(itemCap) {
-                    this.xtag.history.itemCap = itemCap;
-                }
-            },
-            numCards: {
-                get: function() {
-                    return this.getAllCards().length;
-                }
-            },
-            currHistorySize: {
-                get: function() {
-                    return this.xtag.history.numStates;
-                }
-            },
-            currHistoryIndex: {
-                get: function() {
-                    return this.xtag.history.currIndex;
-                }
-            },
-            cards: {
                 get: function() {
-                    return this.getAllCards();
-                }
-            },
-            selectedCard: {
-                get: function() {
-                    return this.getSelectedCard();
+                    return this.getAttribute("transition-type") || "fade-scale";
                 }
             }
         },
         methods: {
-            shuffleTo: function(index, progressType) {
-                var targetCard = _getCardAt(this, index);
-                if (!targetCard) {
-                    throw "invalid shuffleTo index " + index;
-                }
-                var transitionType = this.xtag.transitionType;
-                _replaceWithIndex(this, index, transitionType, progressType);
-            },
-            shuffleNext: function(progressType) {
-                progressType = progressType ? progressType : "auto";
-                var cards = _getAllCards(this);
-                var currCard = this.xtag._selectedCard;
-                var currIndex = cards.indexOf(currCard);
-                if (currIndex > -1) {
-                    this.shuffleTo(posModulo(currIndex + 1, cards.length), progressType);
-                }
-            },
-            shufflePrev: function(progressType) {
-                progressType = progressType ? progressType : "auto";
-                var cards = _getAllCards(this);
-                var currCard = this.xtag._selectedCard;
-                var currIndex = cards.indexOf(currCard);
-                if (currIndex > -1) {
-                    this.shuffleTo(posModulo(currIndex - 1, cards.length), progressType);
-                }
-            },
-            getAllCards: function() {
-                return _getAllCards(this);
-            },
-            getSelectedCard: function() {
-                return this.xtag._selectedCard;
-            },
-            getCardIndex: function(card) {
-                return _getCardIndex(this, card);
-            },
-            getCardAt: function(index) {
-                return _getCardAt(this, index);
-            },
-            historyBack: function(progressType) {
-                var history = this.xtag.history;
-                if (history.canUndo) {
-                    history.backwards();
-                    var newCard = history.currState;
-                    if (newCard) {
-                        _replaceCurrCard(this, newCard, this.transitionType, progressType, true);
-                    }
+            nextCard: function(direction) {
+                shuffle(this, "next", direction);
+            },
+            previousCard: function(direction) {
+                shuffle(this, "previous", direction);
+            },
+            showCard: function(item, direction) {
+                var card = getCard(this, item);
+                if (checkCard(this, card, false)) {
+                    var selected = this.xtag.selected, nextIndex = indexOfCard(this, card);
+                    direction = direction || (nextIndex > indexOfCard(this, selected) ? "forward" : "reverse");
+                    if (selected) this.hideCard(selected, direction);
+                    this.xtag.selected = card;
+                    this.selectedIndex = nextIndex;
+                    if (!card.hasAttribute("selected")) card.selected = true;
+                    xtag.transition(card, "show", {
+                        before: function() {
+                            card.setAttribute("show", "");
+                            card.setAttribute("transition-direction", direction);
+                        },
+                        after: function() {
+                            xtag.fireEvent(card, "show");
+                        }
+                    });
                 }
             },
-            historyForward: function(progressType) {
-                var history = this.xtag.history;
-                if (history.canRedo) {
-                    history.forwards();
-                    var newCard = history.currState;
-                    if (newCard) {
-                        _replaceCurrCard(this, newCard, this.transitionType, progressType, true);
-                    }
+            hideCard: function(item, direction) {
+                var card = getCard(this, item);
+                if (checkCard(this, card, true)) {
+                    this.xtag.selected = null;
+                    if (card.hasAttribute("selected")) card.selected = false;
+                    xtag.transition(card, "hide", {
+                        before: function() {
+                            card.removeAttribute("show");
+                            card.setAttribute("hide", "");
+                            card.setAttribute("transition-direction", direction || "reverse");
+                        },
+                        after: function() {
+                            card.removeAttribute("hide");
+                            card.removeAttribute("transition");
+                            card.removeAttribute("transition-direction");
+                            xtag.fireEvent(card, "hide");
+                        }
+                    });
                 }
             }
         }
@@ -3330,53 +3013,38 @@ if (typeof WeakMap === "undefined") {
     xtag.register("x-card", {
         lifecycle: {
             inserted: function() {
-                var self = this;
-                var deckContainer = self.parentNode;
-                if (deckContainer) {
-                    if (deckContainer.tagName.toLowerCase() === "x-deck") {
-                        _sanitizeCardAttrs(deckContainer);
-                        self.xtag.parentDeck = deckContainer;
-                        xtag.fireEvent(deckContainer, "cardadd", {
-                            detail: {
-                                card: self
-                            }
-                        });
-                    }
-                }
-            },
-            created: function() {
-                var deckContainer = this.parentNode;
-                if (deckContainer && deckContainer.tagName.toLowerCase() === "x-deck") {
-                    this.xtag.parentDeck = deckContainer;
+                var deck = this.parentNode;
+                if (deck.nodeName == "X-DECK") {
+                    this.xtag.deck = deck;
+                    if (this != deck.selected && this.selected) deck.showCard(this);
                 }
             },
             removed: function() {
-                var self = this;
-                if (!self.xtag.parentDeck) {
-                    return;
+                var deck = this.xtag.deck;
+                if (deck) {
+                    if (this == deck.xtag.selected) {
+                        deck.xtag.selected = null;
+                        deck.removeAttribute("selected-index");
+                    } else deck.showCard(deck.selectedCard);
+                    this.xtag.deck = null;
                 }
-                var deck = self.xtag.parentDeck;
-                deck.xtag.history.sanitizeStack();
-                _sanitizeCardAttrs(deck);
-                xtag.fireEvent(deck, "cardremove", {
-                    detail: {
-                        card: self
-                    }
-                });
             }
         },
         accessors: {
-            transitionOverride: {
+            transitionType: {
                 attribute: {
-                    name: "transition-override"
+                    name: "transition-type"
                 }
-            }
-        },
-        methods: {
-            show: function() {
-                var deck = this.parentNode;
-                if (deck === this.xtag.parentDeck) {
-                    deck.shuffleTo(deck.getCardIndex(this));
+            },
+            selected: {
+                attribute: {
+                    "boolean": true
+                },
+                set: function(val) {
+                    var deck = this.xtag.deck;
+                    if (deck) {
+                        if (val && this != deck.selected) deck.showCard(this); else if (!val && this == deck.selected) deck.hideCard(this);
+                    }
                 }
             }
         }
@@ -3608,118 +3276,6 @@ if (typeof WeakMap === "undefined") {
     });
 })();
 
-(function() {
-    var transform = xtag.prefix.js + "Transform";
-    function getState(el) {
-        var selected = xtag.query(el, "x-slides > x-slide[selected]")[0] || 0;
-        return [ selected ? xtag.query(el, "x-slides > x-slide").indexOf(selected) : selected, el.firstElementChild.children.length - 1 ];
-    }
-    function slide(el, index) {
-        var slides = xtag.toArray(el.firstElementChild.children);
-        slides.forEach(function(slide) {
-            slide.removeAttribute("selected");
-        });
-        slides[index || 0].setAttribute("selected", true);
-        var translate = "translate" + (el.getAttribute("orientation") || "x") + "(" + (index || 0) * (-100 / slides.length) + "%)";
-        el.firstElementChild.style[transform] = translate;
-        el.firstElementChild.style.transform = translate;
-    }
-    function init(toSelected) {
-        var slides = this.firstElementChild;
-        if (!slides || !slides.children.length || slides.tagName.toLowerCase() != "x-slides") {
-            return;
-        }
-        var children = xtag.toArray(slides.children);
-        var size = 100 / (children.length || 1);
-        var orient = this.getAttribute("orientation") || "x";
-        var style = orient == "x" ? [ "width", "height" ] : [ "height", "width" ];
-        slides.style[style[1]] = "100%";
-        slides.style[style[0]] = children.length * 100 + "%";
-        slides.style[transform] = "translate" + orient + "(0%)";
-        slides.style.transform = "translate" + orient + "(0%)";
-        children.forEach(function(slide) {
-            slide.style[style[0]] = size + "%";
-            slide.style[style[1]] = "100%";
-        });
-        if (toSelected) {
-            var selected = slides.querySelector("[selected]");
-            if (selected) {
-                slide(this, children.indexOf(selected) || 0);
-            }
-        }
-    }
-    xtag.register("x-slidebox", {
-        lifecycle: {
-            created: function() {
-                init();
-            }
-        },
-        events: {
-            transitionend: function(e) {
-                if (e.target == this.firstElementChild) {
-                    xtag.fireEvent(this, "slideend");
-                }
-            },
-            "reveal:delegate(x-slidebox > x-slides > x-slide)": function(e) {
-                var slide = e.target;
-                if (e.target.parentNode.parentNode == e.currentTarget) {
-                    var slideWrap = slide.parentNode;
-                    var box = slideWrap.parentNode;
-                    var slides = xtag.query(slideWrap, "x-slide");
-                    box.slideTo(slides.indexOf(slide));
-                }
-            }
-        },
-        accessors: {
-            orientation: {
-                get: function() {
-                    return this.getAttribute("orientation");
-                },
-                set: function(value) {
-                    var slidebox = this;
-                    xtag.skipTransition(slidebox.firstElementChild, function() {
-                        slidebox.setAttribute("orientation", value.toLowerCase());
-                        init.call(slidebox, true);
-                    });
-                }
-            }
-        },
-        methods: {
-            slideTo: function(index) {
-                slide(this, index);
-            },
-            slideNext: function() {
-                var shift = getState(this);
-                shift[0]++;
-                slide(this, shift[0] > shift[1] ? 0 : shift[0]);
-            },
-            slidePrevious: function() {
-                var shift = getState(this);
-                shift[0]--;
-                slide(this, shift[0] < 0 ? shift[1] : shift[0]);
-            }
-        }
-    });
-    xtag.register("x-slide", {
-        lifecycle: {
-            inserted: function() {
-                var ancestor = this.parentNode.parentNode;
-                if (ancestor.tagName.toLowerCase() == "x-slidebox") {
-                    init.call(ancestor, true);
-                }
-            },
-            created: function() {
-                if (this.parentNode) {
-                    var ancestor = this.parentNode.parentNode;
-                    if (ancestor.tagName.toLowerCase() == "x-slidebox") {
-                        init.call(ancestor, true);
-                    }
-                }
-            }
-        }
-    });
-})();
-
 (function() {
     var KEYCODES = {
         33: "PAGE_UP",
@@ -3779,7 +3335,7 @@ if (typeof WeakMap === "undefined") {
         return constrainToSteppedRange(roundedVal, slider.min, slider.max, slider.step);
     }
     function _positionThumb(slider, value) {
-        var thumb = slider.xtag.polyFillSliderThumb;
+        var thumb = slider.xtag.sliderThumb;
         if (!thumb) {
             return;
         }
@@ -3794,6 +3350,7 @@ if (typeof WeakMap === "undefined") {
         var finalPercentage = newThumbX / sliderWidth;
         thumb.style[vertical ? "left" : "top"] = 0;
         thumb.style[vertical ? "top" : "left"] = finalPercentage * 100 + "%";
+        slider.xtag.sliderProgress.style[vertical ? "height" : "width"] = fraction * 100 + "%";
     }
     function _redraw(slider) {
         _positionThumb(slider, slider.value);
@@ -3801,8 +3358,9 @@ if (typeof WeakMap === "undefined") {
     function _onMouseInput(slider, pageX, pageY) {
         var inputEl = slider.xtag.rangeInputEl;
         var inputOffsets = inputEl.getBoundingClientRect();
-        var inputClickX = pageX - inputOffsets.left;
-        var divideby = inputOffsets.width;
+        var thumbWidth = slider.xtag.sliderThumb.getBoundingClientRect().width;
+        var inputClickX = pageX - inputOffsets.left - thumbWidth / 2;
+        var divideby = inputOffsets.width - thumbWidth / 2;
         if (slider.vertical) {
             divideby = inputOffsets.height;
             inputClickX = pageY - inputOffsets.top;
@@ -3822,7 +3380,7 @@ if (typeof WeakMap === "undefined") {
         _addBodyListener("touchmove", callbacks.onTouchDragMove);
         _addBodyListener("mouseup", callbacks.onDragEnd);
         _addBodyListener("touchend", callbacks.onDragEnd);
-        var thumb = slider.xtag.polyFillSliderThumb;
+        var thumb = slider.xtag.sliderThumb;
         if (thumb) {
             thumb.setAttribute("active", true);
         }
@@ -3868,7 +3426,7 @@ if (typeof WeakMap === "undefined") {
                 _removeBodyListener("touchmove", callbacks.onTouchDragMove);
                 _removeBodyListener("mouseup", callbacks.onDragEnd);
                 _removeBodyListener("touchend", callbacks.onDragEnd);
-                var thumb = slider.xtag.polyFillSliderThumb;
+                var thumb = slider.xtag.sliderThumb;
                 if (thumb) {
                     thumb.removeAttribute("active");
                 }
@@ -3945,16 +3503,40 @@ if (typeof WeakMap === "undefined") {
                 input.setAttribute("value", initVal);
                 self.xtag.rangeInputEl = input;
                 self.appendChild(self.xtag.rangeInputEl);
-                self.xtag.polyFillSliderThumb = null;
+                var sliderTrack = document.createElement("div");
+                xtag.addClass(sliderTrack, "slider-track");
+                this.xtag.sliderTrack = sliderTrack;
+                this.appendChild(sliderTrack);
+                var sliderProgress = document.createElement("div");
+                xtag.addClass(sliderProgress, "slider-progress");
+                this.xtag.sliderProgress = sliderProgress;
+                sliderTrack.appendChild(sliderProgress);
+                var sliderThumb = document.createElement("span");
+                xtag.addClass(sliderThumb, "slider-thumb");
+                this.xtag.sliderThumb = sliderThumb;
+                this.appendChild(sliderThumb);
                 if (input.type !== "range" || self.hasAttribute("polyfill")) {
                     self.setAttribute("polyfill", true);
                 } else {
                     self.removeAttribute("polyfill");
                 }
-                _redraw(self);
+                this.addEventListener("mousedown", self.xtag.callbackFns.onMouseDragStart);
+                this.addEventListener("touchstart", self.xtag.callbackFns.onTouchDragStart);
+                this.addEventListener("keydown", self.xtag.callbackFns.onKeyDown);
+                self.setAttribute("value", initVal);
+            },
+            inserted: function() {
+                var self = this;
+                xtag.requestFrame(function() {
+                    xtag.requestFrame(function() {
+                        _redraw(self);
+                    });
+                });
             },
-            attributeChanged: function() {
-                _redraw(this);
+            attributeChanged: function(property) {
+                if (property == "min" || property == "max" || property == "step") {
+                    _redraw(this);
+                }
             }
         },
         events: {
@@ -3990,29 +3572,11 @@ if (typeof WeakMap === "undefined") {
                         this.setAttribute("tabindex", 0);
                         this.xtag.rangeInputEl.setAttribute("tabindex", -1);
                         this.xtag.rangeInputEl.setAttribute("readonly", true);
-                        if (!this.xtag.polyFillSliderTrack) {
-                            var sliderTrack = document.createElement("div");
-                            xtag.addClass(sliderTrack, "slider-track");
-                            this.xtag.polyFillSliderTrack = sliderTrack;
-                            this.appendChild(sliderTrack);
-                        }
-                        if (!this.xtag.polyFillSliderThumb) {
-                            var sliderThumb = document.createElement("span");
-                            xtag.addClass(sliderThumb, "slider-thumb");
-                            this.xtag.polyFillSliderThumb = sliderThumb;
-                            this.appendChild(sliderThumb);
-                        }
                         _redraw(this);
-                        this.addEventListener("mousedown", callbackFns.onMouseDragStart);
-                        this.addEventListener("touchstart", callbackFns.onTouchDragStart);
-                        this.addEventListener("keydown", callbackFns.onKeyDown);
                     } else {
                         this.removeAttribute("tabindex");
                         this.xtag.rangeInputEl.removeAttribute("tabindex");
                         this.xtag.rangeInputEl.removeAttribute("readonly");
-                        this.removeEventListener("mousedown", callbackFns.onMouseDragStart);
-                        this.removeEventListener("touchstart", callbackFns.onTouchDragStart);
-                        this.removeEventListener("keydown", callbackFns.onKeyDown);
                     }
                 }
             },
@@ -4125,7 +3689,7 @@ if (typeof WeakMap === "undefined") {
     xtag.register("x-tabbar", {
         lifecycle: {
             created: function() {
-                this.xtag.overallEventToFire = "show";
+                this.xtag.overallEventToFire = "reveal";
             }
         },
         events: {
@@ -4244,12 +3808,8 @@ if (typeof WeakMap === "undefined") {
 
 (function() {
     function setScope(toggle) {
-        var form = toggle.xtag.inputEl.form;
-        if (form) {
-            toggle.removeAttribute("x-toggle-no-form");
-        } else {
-            toggle.setAttribute("x-toggle-no-form", "");
-        }
+        var form = toggle.xtag.input.form;
+        if (form) toggle.removeAttribute("x-toggle-no-form"); else toggle.setAttribute("x-toggle-no-form", "");
         toggle.xtag.scope = toggle.parentNode ? form || document : null;
     }
     function updateScope(scope) {
@@ -4261,7 +3821,7 @@ if (typeof WeakMap === "undefined") {
                 var named = xtag.query(scope, 'x-toggle[name="' + name + '"]' + docSelector);
                 var type = named.length > 1 ? "radio" : "checkbox";
                 named.forEach(function(toggle) {
-                    if (toggle.xtag && toggle.xtag.inputEl) {
+                    if (toggle.xtag && toggle.xtag.input) {
                         toggle.type = type;
                     }
                 });
@@ -4269,6 +3829,35 @@ if (typeof WeakMap === "undefined") {
             }
         });
     }
+    function toggleGroup(toggle) {
+        if (shifted && toggle.group && toggle.type != "radio") {
+            var toggles = toggle.groupToggles;
+            var selector = 'x-toggle[group="' + toggle.group + '"][active]';
+            var active = toggle.xtag.scope.querySelector(selector);
+            if (active && toggle != active) {
+                toggle.checked = active.checked;
+                var state = active.checked;
+                var index = toggles.indexOf(toggle);
+                var activeIndex = toggles.indexOf(active);
+                var minIndex = Math.min(index, activeIndex);
+                var maxIndex = Math.max(index, activeIndex);
+                toggles.slice(minIndex, maxIndex + 1).forEach(function(toggle) {
+                    if (toggle != active) toggle.checked = state;
+                });
+                return true;
+            }
+        }
+    }
+    function activateToggle(toggle) {
+        if (inTogglebar(toggle)) return;
+        toggle.groupToggles.forEach(function(node) {
+            node.active = false;
+        });
+        toggle.active = true;
+    }
+    function inTogglebar(toggle) {
+        return toggle.parentNode && toggle.parentNode.nodeName == "X-TOGGLEBAR";
+    }
     var shifted = false;
     xtag.addEvents(document, {
         DOMComponentsLoaded: function() {
@@ -4285,62 +3874,41 @@ if (typeof WeakMap === "undefined") {
         keyup: function(e) {
             shifted = e.shiftKey;
         },
-        "focus:delegate(x-toggle)": function() {
-            this.setAttribute("focus", "");
+        "focus:delegate(x-toggle)": function(e) {
+            this.focus = true;
+            this.xtag.input.focus();
         },
-        "blur:delegate(x-toggle)": function() {
-            this.removeAttribute("focus");
+        "blur:delegate(x-toggle)": function(e) {
+            this.focus = false;
         },
-        "tap:delegate(x-toggle)": function() {
-            if (shifted && this.group) {
-                var toggles = this.groupToggles;
-                var selector = 'x-toggle[group="' + this.group + '"][active]';
-                var active = this.xtag.scope.querySelector(selector);
-                if (active && this != active) {
-                    var self = this;
-                    var state = active.checked;
-                    var index = toggles.indexOf(this);
-                    var activeIndex = toggles.indexOf(active);
-                    var minIndex = Math.min(index, activeIndex);
-                    var maxIndex = Math.max(index, activeIndex);
-                    toggles.slice(minIndex, maxIndex).forEach(function(toggler) {
-                        if (toggler != self) {
-                            toggler.checked = state;
-                        }
-                    });
-                }
+        "tap:delegate(x-toggle)": function(e) {
+            var input = this.xtag.input;
+            if (input.type == "radio" ? !this.checked : true) {
+                input.checked = !input.checked;
+                var change = document.createEvent("Event");
+                change.initEvent("change", true, false);
+                input.dispatchEvent(change);
             }
+            input.focus();
         },
-        "change:delegate(x-toggle)": function() {
-            var selector = 'x-toggle[group="' + this.group + '"][active]';
-            var active = this.xtag.scope.querySelector(selector);
-            if (shifted && active && this != active) {
-                this.checked = active.checked;
-            } else {
-                this.checked = this.xtag.inputEl.checked;
-            }
-            if (this.group) {
-                this.groupToggles.forEach(function(toggle) {
-                    toggle.active = false;
-                });
-                this.active = true;
-            }
+        "change:delegate(x-toggle)": function(e) {
+            this.xtag.input.focus();
+            if (inTogglebar(this) || !toggleGroup(this) && this.type != "radio") this.checked = this.xtag.input.checked;
+            activateToggle(this);
         }
     });
+    var template = xtag.createFragment('<input /><div class="x-toggle-check"></div>');
     xtag.register("x-toggle", {
         lifecycle: {
             created: function() {
-                this.innerHTML = '<label class="x-toggle-input-wrap">' + '<input type="checkbox"></input>' + "</label>" + '<div class="x-toggle-check"></div>' + '<div class="x-toggle-content"></div>';
-                this.xtag.inputWrapEl = this.querySelector(".x-toggle-input-wrap");
-                this.xtag.inputEl = this.xtag.inputWrapEl.querySelector("input");
-                this.xtag.contentWrapEl = this.querySelector(".x-toggle-content-wrap");
+                this.appendChild(template.cloneNode(true));
+                this.xtag.input = this.querySelector("input");
                 this.xtag.checkEl = this.querySelector(".x-toggle-check");
-                this.xtag.contentEl = this.querySelector(".x-toggle-content");
                 this.type = "checkbox";
                 setScope(this);
                 var name = this.getAttribute("name");
                 if (name) {
-                    this.xtag.inputEl.name = this.getAttribute("name");
+                    this.xtag.input.name = this.getAttribute("name");
                 }
                 if (this.hasAttribute("checked")) {
                     this.checked = true;
@@ -4348,15 +3916,6 @@ if (typeof WeakMap === "undefined") {
             },
             inserted: function() {
                 setScope(this);
-                if (this.parentNode && this.parentNode.nodeName.toLowerCase() === "x-togglegroup") {
-                    if (this.parentNode.hasAttribute("name")) {
-                        this.name = this.parentNode.getAttribute("name");
-                    }
-                    if (this.parentNode.hasAttribute("group")) {
-                        this.group = this.parentNode.getAttribute("group");
-                    }
-                    this.setAttribute("no-box", true);
-                }
                 if (this.name) {
                     updateScope(this.xtag.scope);
                 }
@@ -4371,22 +3930,20 @@ if (typeof WeakMap === "undefined") {
                 attribute: {
                     name: "no-box",
                     "boolean": true
-                },
-                set: function() {}
+                }
             },
             type: {
                 attribute: {},
-                set: function(newType) {
-                    this.xtag.inputEl.type = newType;
+                set: function(type) {
+                    this.xtag.input.type = type;
                 }
             },
             label: {
-                attribute: {},
-                get: function() {
-                    return this.xtag.contentEl.innerHTML;
-                },
-                set: function(newLabelContent) {
-                    this.xtag.contentEl.innerHTML = newLabelContent;
+                attribute: {}
+            },
+            focus: {
+                attribute: {
+                    "boolean": true
                 }
             },
             active: {
@@ -4406,9 +3963,6 @@ if (typeof WeakMap === "undefined") {
                 attribute: {
                     skip: true
                 },
-                get: function() {
-                    return this.getAttribute("name");
-                },
                 set: function(name) {
                     if (name === null) {
                         this.removeAttribute("name");
@@ -4416,13 +3970,13 @@ if (typeof WeakMap === "undefined") {
                     } else {
                         this.setAttribute("name", name);
                     }
-                    this.xtag.inputEl.name = name;
+                    this.xtag.input.name = name;
                     updateScope(this.xtag.scope);
                 }
             },
             checked: {
                 get: function() {
-                    return this.xtag.inputEl.checked;
+                    return this.xtag.input.checked;
                 },
                 set: function(value) {
                     var name = this.name, state = value === "true" || value === true;
@@ -4434,7 +3988,7 @@ if (typeof WeakMap === "undefined") {
                             previous.removeAttribute("checked");
                         }
                     }
-                    this.xtag.inputEl.checked = state;
+                    this.xtag.input.checked = state;
                     if (state) {
                         this.setAttribute("checked", "");
                     } else {
@@ -4445,830 +3999,15 @@ if (typeof WeakMap === "undefined") {
             value: {
                 attribute: {},
                 get: function() {
-                    return this.xtag.inputEl.value;
+                    return this.xtag.input.value;
                 },
-                set: function(newVal) {
-                    this.xtag.inputEl.value = newVal;
+                set: function(value) {
+                    this.xtag.input.value = value;
                 }
             }
         }
     });
-})();
-
-(function() {
-    var TIP_ORIENT_ARROW_DIR_MAP = {
-        top: "down",
-        bottom: "up",
-        left: "right",
-        right: "left"
-    };
-    var OUTER_TRIGGER_MANAGER;
-    var PRESET_STYLE_LISTENERFNS;
-    var PREV_SIB_SELECTOR = "_previousSibling";
-    var NEXT_SIB_SELECTOR = "_nextSibling";
-    var ARROW_DIR_ATTR = "arrow-direction";
-    var AUTO_ORIENT_ATTR = "_auto-orientation";
-    function isValidOrientation(orient) {
-        return orient in TIP_ORIENT_ARROW_DIR_MAP;
-    }
-    function getWindowViewport() {
-        var docElem = document.documentElement;
-        var rect = {
-            left: docElem.scrollLeft || document.body.scrollLeft || 0,
-            top: docElem.scrollTop || document.body.scrollTop || 0,
-            width: docElem.clientWidth,
-            height: docElem.clientHeight
-        };
-        rect.right = rect.left + rect.width;
-        rect.bottom = rect.top + rect.height;
-        return rect;
-    }
-    function getRect(el) {
-        var rect = el.getBoundingClientRect();
-        var viewport = getWindowViewport();
-        var docScrollLeft = viewport.left;
-        var docScrollTop = viewport.top;
-        return {
-            left: rect.left + docScrollLeft,
-            right: rect.right + docScrollLeft,
-            top: rect.top + docScrollTop,
-            bottom: rect.bottom + docScrollTop,
-            width: rect.width,
-            height: rect.height
-        };
-    }
-    function getScale(el, rect) {
-        rect = rect !== undefined ? rect : getRect(el);
-        return {
-            x: el.offsetWidth ? rect.width / el.offsetWidth : 1,
-            y: el.offsetHeight ? rect.height / el.offsetHeight : 1
-        };
-    }
-    function getRectIntersection(rectA, rectB) {
-        if (rectA.right < rectB.left || rectB.right < rectA.left || rectA.bottom < rectB.top || rectB.bottom < rectA.top) {
-            return null;
-        }
-        var intersection = {
-            left: Math.max(rectA.left, rectB.left),
-            top: Math.max(rectA.top, rectB.top),
-            right: Math.min(rectA.right, rectB.right),
-            bottom: Math.min(rectA.bottom, rectB.bottom)
-        };
-        intersection.width = intersection.right - intersection.left;
-        intersection.height = intersection.bottom - intersection.top;
-        if (intersection.width < 0 || intersection.height < 0) {
-            return null;
-        }
-        return intersection;
-    }
-    function CachedListener(elem, eventType, listenerFn) {
-        this.eventType = eventType;
-        this.listenerFn = listenerFn;
-        this.elem = elem;
-        this._attachedFn = null;
-    }
-    CachedListener.prototype.attachListener = function() {
-        if (!this._attachedFn) {
-            this._attachedFn = xtag.addEvent(this.elem, this.eventType, this.listenerFn);
-        }
-    };
-    CachedListener.prototype.removeListener = function() {
-        if (this._attachedFn) {
-            xtag.removeEvent(this.elem, this.eventType, this._attachedFn);
-            this._attachedFn = null;
-        }
-    };
-    function OuterTriggerEventStruct(eventType) {
-        this._cachedListener = null;
-        this._tooltips = [];
-        var struct = this;
-        var outerTriggerListener = function(e) {
-            struct._tooltips.forEach(function(tooltip) {
-                if (!tooltip.xtag._skipOuterClick && tooltip.hasAttribute("visible") && !tooltip.ignoreOuterTrigger && !hasParentNode(e.target, tooltip)) {
-                    _hideTooltip(tooltip);
-                }
-                tooltip.xtag._skipOuterClick = false;
-            });
-        };
-        var cachedListener = this._cachedListener = new CachedListener(document, eventType, outerTriggerListener);
-        cachedListener.attachListener();
-    }
-    OuterTriggerEventStruct.prototype.destroy = function() {
-        this._cachedListener.removeListener();
-        this._cachedListener = null;
-        this._tooltips = null;
-    };
-    OuterTriggerEventStruct.prototype.containsTooltip = function(tooltip) {
-        return this._tooltips.indexOf(tooltip) !== -1;
-    };
-    OuterTriggerEventStruct.prototype.addTooltip = function(tooltip) {
-        if (!this.containsTooltip(tooltip)) {
-            this._tooltips.push(tooltip);
-        }
-    };
-    OuterTriggerEventStruct.prototype.removeTooltip = function(tooltip) {
-        if (this.containsTooltip(tooltip)) {
-            this._tooltips.splice(this._tooltips.indexOf(tooltip), 1);
-        }
-    };
-    Object.defineProperties(OuterTriggerEventStruct.prototype, {
-        numTooltips: {
-            get: function() {
-                return this._tooltips.length;
-            }
-        }
-    });
-    function OuterTriggerManager() {
-        this.eventStructDict = {};
-    }
-    OuterTriggerManager.prototype.registerTooltip = function(eventType, tooltip) {
-        if (eventType in this.eventStructDict) {
-            var eventStruct = this.eventStructDict[eventType];
-            if (!eventStruct.containsTooltip(tooltip)) {
-                eventStruct.addTooltip(tooltip);
-            }
-        } else {
-            this.eventStructDict[eventType] = new OuterTriggerEventStruct(eventType);
-            this.eventStructDict[eventType].addTooltip(tooltip);
-        }
-    };
-    OuterTriggerManager.prototype.unregisterTooltip = function(eventType, tooltip) {
-        if (eventType in this.eventStructDict && this.eventStructDict[eventType].containsTooltip(tooltip)) {
-            var eventStruct = this.eventStructDict[eventType];
-            eventStruct.removeTooltip(tooltip);
-            if (eventStruct.numTooltips === 0) {
-                eventStruct.destroy();
-                delete this.eventStructDict[eventType];
-            }
-        }
-    };
-    OUTER_TRIGGER_MANAGER = new OuterTriggerManager();
-    function _mkPrevSiblingTargetListener(tooltip, eventName, callback) {
-        var filteredCallback = function(e) {
-            if (callback && hasParentNode(e.target, tooltip.previousElementSibling)) {
-                callback.call(tooltip.previousElementSibling, e);
-            }
-        };
-        return new CachedListener(document.documentElement, eventName, filteredCallback);
-    }
-    function _mkNextSiblingTargetListener(tooltip, eventName, callback) {
-        var eventDelegateStr = eventName + ":delegate(x-tooltip+*)";
-        var filteredCallback = function(e) {
-            if (callback && this === tooltip.nextElementSibling) {
-                callback.call(this, e);
-            }
-        };
-        return new CachedListener(document.documentElement, eventDelegateStr, filteredCallback);
-    }
-    function _getTargetDelegatedListener(tooltip, targetSelector, eventName, targetCallback) {
-        if (targetSelector === PREV_SIB_SELECTOR) {
-            return _mkPrevSiblingTargetListener(tooltip, eventName, targetCallback);
-        } else if (targetSelector === NEXT_SIB_SELECTOR) {
-            return _mkNextSiblingTargetListener(tooltip, eventName, targetCallback);
-        } else {
-            var delegateEventStr = eventName + ":delegate(" + targetSelector + ")";
-            return new CachedListener(document.documentElement, delegateEventStr, function(e) {
-                var delegatedElem = this;
-                if (!hasParentNode(delegatedElem, tooltip)) {
-                    targetCallback.call(delegatedElem, e);
-                }
-            });
-        }
-    }
-    PRESET_STYLE_LISTENERFNS = {
-        custom: function() {
-            return [];
-        },
-        hover: function(tooltip, targetSelector) {
-            var createdListeners = [];
-            var hoverOutTimer = null;
-            var hideDelay = 200;
-            var cancelTimerFn = function() {
-                if (hoverOutTimer) {
-                    window.clearTimeout(hoverOutTimer);
-                }
-                hoverOutTimer = null;
-            };
-            var showTipTargetFn = mkIgnoreSubchildrenFn(function(e) {
-                cancelTimerFn();
-                var delegatedElem = this;
-                var fromElem = e.relatedTarget || e.toElement;
-                if (!hasParentNode(fromElem, tooltip)) {
-                    _showTooltip(tooltip, delegatedElem);
-                }
-            });
-            var hideTipTargetFn = mkIgnoreSubchildrenFn(function(e) {
-                cancelTimerFn();
-                var toElem = e.relatedTarget || e.toElement;
-                if (!hasParentNode(toElem, tooltip)) {
-                    hoverOutTimer = window.setTimeout(function() {
-                        if (tooltip.triggerStyle === "hover") {
-                            _hideTooltip(tooltip);
-                        }
-                    }, hideDelay);
-                }
-            });
-            var targetEnterListener = _getTargetDelegatedListener(tooltip, targetSelector, "enter", showTipTargetFn);
-            var targetExitListener = _getTargetDelegatedListener(tooltip, targetSelector, "leave", hideTipTargetFn);
-            createdListeners.push(targetEnterListener);
-            createdListeners.push(targetExitListener);
-            var showTipTooltipFn = mkIgnoreSubchildrenFn(function(e) {
-                cancelTimerFn();
-                var fromElem = e.relatedTarget || e.toElement;
-                var lastTarget = tooltip.xtag.lastTargetElem;
-                if (!tooltip.hasAttribute("visible") && lastTarget && !hasParentNode(fromElem, lastTarget)) {
-                    _showTooltip(tooltip, lastTarget);
-                }
-            });
-            var hideTipTooltipFn = mkIgnoreSubchildrenFn(function(e) {
-                cancelTimerFn();
-                var toElem = e.relatedTarget || e.toElement;
-                var lastTarget = tooltip.xtag.lastTargetElem;
-                if (lastTarget && !hasParentNode(toElem, lastTarget)) {
-                    hoverOutTimer = window.setTimeout(function() {
-                        if (tooltip.triggerStyle === "hover") {
-                            _hideTooltip(tooltip);
-                        }
-                    }, hideDelay);
-                }
-            });
-            createdListeners.push(new CachedListener(tooltip, "enter", showTipTooltipFn));
-            createdListeners.push(new CachedListener(tooltip, "leave", hideTipTooltipFn));
-            return createdListeners;
-        }
-    };
-    function mkGenericListeners(tooltip, targetSelector, eventName) {
-        var createdListeners = [];
-        var targetTriggerFn = function() {
-            var delegatedElem = this;
-            tooltip.xtag._skipOuterClick = true;
-            if (tooltip.hasAttribute("visible")) {
-                if (delegatedElem === tooltip.xtag.lastTargetElem) {
-                    _hideTooltip(tooltip);
-                } else {
-                    _showTooltip(tooltip, delegatedElem);
-                }
-            } else {
-                _showTooltip(tooltip, delegatedElem);
-            }
-        };
-        var delegatedTargetListener = _getTargetDelegatedListener(tooltip, targetSelector, eventName, targetTriggerFn);
-        createdListeners.push(delegatedTargetListener);
-        return createdListeners;
-    }
-    function searchAncestors(elem, conditionFn) {
-        while (elem) {
-            if (conditionFn(elem)) {
-                return elem;
-            }
-            elem = elem.parentNode;
-        }
-        return null;
-    }
-    function hasParentNode(elem, parent) {
-        if (parent.contains) {
-            return parent.contains(elem);
-        } else {
-            var condition = function(el) {
-                return el === parent;
-            };
-            return !!searchAncestors(elem, condition);
-        }
-    }
-    function mkIgnoreSubchildrenFn(callback) {
-        return function(e) {
-            var containerElem = this;
-            var relElem = e.relatedTarget || e.toElement;
-            if (relElem) {
-                if (!hasParentNode(relElem, containerElem)) {
-                    callback.call(this, e);
-                }
-            } else {
-                callback.call(this, e);
-            }
-        };
-    }
-    function _selectorToElems(tooltip, selector) {
-        var elems = [];
-        if (selector === PREV_SIB_SELECTOR) {
-            elems = tooltip.previousElementSibling ? [ tooltip.previousElementSibling ] : [];
-        } else if (selector === NEXT_SIB_SELECTOR) {
-            elems = tooltip.nextElementSibling ? [ tooltip.nextElementSibling ] : [];
-        } else {
-            elems = xtag.query(document, selector);
-        }
-        var i = 0;
-        while (i < elems.length) {
-            var elem = elems[i];
-            if (hasParentNode(elem, tooltip)) {
-                elems.splice(i, 1);
-            } else {
-                i++;
-            }
-        }
-        return elems;
-    }
-    function overlaps(elemA, elemB) {
-        var _pointIsInRect = function(x, y, rect) {
-            return rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom;
-        };
-        var rectA = getRect(elemA);
-        var rectB = getRect(elemB);
-        var _cornersOverlapBox = function(rectA, rectB) {
-            return _pointIsInRect(rectA.left, rectA.top, rectB) || _pointIsInRect(rectA.right, rectA.top, rectB) || _pointIsInRect(rectA.right, rectA.bottom, rectB) || _pointIsInRect(rectA.left, rectA.bottom, rectB);
-        };
-        var _isCrossIntersect = function(rectA, rectB) {
-            return rectA.top <= rectB.top && rectB.bottom <= rectA.bottom && rectB.left <= rectA.left && rectA.right <= rectB.right;
-        };
-        return _cornersOverlapBox(rectA, rectB) || _cornersOverlapBox(rectB, rectA) || _isCrossIntersect(rectA, rectB) || _isCrossIntersect(rectB, rectA);
-    }
-    function getRotationDims(width, height, degrees) {
-        var radians = degrees * (Math.PI / 180);
-        var rotatedHeight = width * Math.sin(radians) + height * Math.cos(radians);
-        var rotatedWidth = width * Math.cos(radians) + height * Math.sin(radians);
-        return {
-            height: rotatedHeight,
-            width: rotatedWidth
-        };
-    }
-    function constrainNum(num, min, max) {
-        var output = num;
-        output = min !== undefined && min !== null ? Math.max(min, output) : output;
-        output = max !== undefined && max !== null ? Math.min(max, output) : output;
-        return output;
-    }
-    function _coordsRelToNewContext(x, y, oldContext, newContext, contextScale) {
-        var viewportX, viewportY;
-        if (oldContext === window) {
-            viewportX = x;
-            viewportY = y;
-        } else {
-            var oldContextRect = getRect(oldContext);
-            viewportX = x - oldContextRect.left;
-            viewportY = y - oldContextRect.top;
-        }
-        var newContextRect = getRect(newContext);
-        contextScale = contextScale ? contextScale : getScale(newContext, newContextRect);
-        var borderTop = newContext.clientTop * contextScale.y;
-        var borderLeft = newContext.clientLeft * contextScale.x;
-        var scrollTop = newContext.scrollTop * contextScale.y;
-        var scrollLeft = newContext.scrollLeft * contextScale.x;
-        var translatedCoords = {
-            left: viewportX - newContextRect.left - borderLeft,
-            top: viewportY - newContextRect.top - borderTop
-        };
-        if (!hasParentNode(document.body, newContext) && hasParentNode(newContext, document.body)) {
-            translatedCoords.top += scrollTop;
-            translatedCoords.left += scrollLeft;
-        }
-        return translatedCoords;
-    }
-    function _getTooltipConstraints(tooltip, contextRect) {
-        if (!contextRect) {
-            contextRect = getRect(tooltip.offsetParent || tooltip.parentNode);
-        }
-        var viewport = getWindowViewport();
-        var bounds = viewport;
-        if (!tooltip.allowOverflow) {
-            bounds = getRectIntersection(viewport, contextRect);
-            if (!bounds) {
-                bounds = contextRect;
-            }
-        }
-        return bounds;
-    }
-    function _pickBestTooltipOrient(tooltip, validPositionDataList) {
-        if (validPositionDataList.length === 0) {
-            return null;
-        }
-        var bounds = _getTooltipConstraints(tooltip);
-        var minX = bounds.left;
-        var minY = bounds.top;
-        var maxX = bounds.right;
-        var maxY = bounds.bottom;
-        var inContextData = [];
-        var notInContextData = [];
-        for (var i = 0; i < validPositionDataList.length; i++) {
-            var data = validPositionDataList[i];
-            var rect = data.rect;
-            if (rect.left < minX || rect.top < minY || rect.right > maxX || rect.bottom > maxY) {
-                notInContextData.push(data);
-            } else {
-                inContextData.push(data);
-            }
-        }
-        var filterDataList = inContextData.length > 0 ? inContextData : notInContextData;
-        return filterDataList[0].orient;
-    }
-    function _forceDisplay(elem) {
-        elem.setAttribute("_force-display", true);
-    }
-    function _unforceDisplay(elem) {
-        elem.removeAttribute("_force-display");
-    }
-    function _autoPositionTooltip(tooltip, targetElem) {
-        tooltip.removeAttribute(AUTO_ORIENT_ATTR);
-        var arrow = tooltip.xtag.arrowEl, positionRect = null;
-        var validOrientDataList = [];
-        for (var tmpOrient in TIP_ORIENT_ARROW_DIR_MAP) {
-            arrow.setAttribute(ARROW_DIR_ATTR, TIP_ORIENT_ARROW_DIR_MAP[tmpOrient]);
-            positionRect = _positionTooltip(tooltip, targetElem, tmpOrient);
-            if (!positionRect) {
-                continue;
-            }
-            _forceDisplay(tooltip);
-            if (!overlaps(tooltip, targetElem)) {
-                validOrientDataList.push({
-                    orient: tmpOrient,
-                    rect: positionRect
-                });
-            }
-            _unforceDisplay(tooltip);
-        }
-        var bestOrient = _pickBestTooltipOrient(tooltip, validOrientDataList);
-        if (!bestOrient) {
-            bestOrient = "top";
-        }
-        tooltip.setAttribute(AUTO_ORIENT_ATTR, bestOrient);
-        arrow.setAttribute(ARROW_DIR_ATTR, TIP_ORIENT_ARROW_DIR_MAP[bestOrient]);
-        if (isValidOrientation(bestOrient) && bestOrient !== tmpOrient) {
-            return _positionTooltip(tooltip, targetElem, bestOrient);
-        } else {
-            return positionRect;
-        }
-    }
-    function _positionTooltip(tooltip, targetElem, orientation, reattemptDepth) {
-        if (!tooltip.parentNode) {
-            tooltip.left = "";
-            tooltip.top = "";
-            return null;
-        }
-        reattemptDepth = reattemptDepth === undefined ? 0 : reattemptDepth;
-        var arrow = tooltip.xtag.arrowEl;
-        if (!isValidOrientation(orientation)) {
-            return _autoPositionTooltip(tooltip, targetElem);
-        }
-        var tipContext = tooltip.offsetParent ? tooltip.offsetParent : tooltip.parentNode;
-        if (!reattemptDepth) {
-            tooltip.style.top = "";
-            tooltip.style.left = "";
-            arrow.style.top = "";
-            arrow.style.left = "";
-        }
-        _forceDisplay(tooltip);
-        var viewport = getWindowViewport();
-        var contextRect = getRect(tipContext);
-        var contextScale = getScale(tipContext, contextRect);
-        var contextViewWidth = tipContext.clientWidth * contextScale.x;
-        var contextViewHeight = tipContext.clientHeight * contextScale.y;
-        var targetRect = getRect(targetElem);
-        var targetWidth = targetRect.width;
-        var targetHeight = targetRect.height;
-        var tooltipRect = getRect(tooltip);
-        var tooltipScale = getScale(tooltip, tooltipRect);
-        var origTooltipWidth = tooltipRect.width;
-        var origTooltipHeight = tooltipRect.height;
-        var renderedTooltipWidth = tooltipRect.width;
-        var renderedTooltipHeight = tooltipRect.height;
-        var tipPlacementOffsetX = (renderedTooltipWidth - origTooltipWidth) / 2;
-        var tipPlacementOffsetY = (renderedTooltipHeight - origTooltipHeight) / 2;
-        var arrowWidth = arrow.offsetWidth * tooltipScale.x;
-        var arrowHeight = arrow.offsetHeight * tooltipScale.y;
-        var arrowRotationDegs = 45;
-        var arrowDims = getRotationDims(arrowWidth, arrowHeight, arrowRotationDegs);
-        arrowWidth = arrowDims.width;
-        arrowHeight = arrowDims.height;
-        if (orientation === "top" || orientation === "bottom") {
-            arrowHeight /= 2;
-        } else {
-            arrowWidth /= 2;
-        }
-        var bounds = _getTooltipConstraints(tooltip, contextRect);
-        var minRawLeft = bounds.left;
-        var minRawTop = bounds.top;
-        var maxRawLeft = bounds.right - origTooltipWidth;
-        var maxRawTop = bounds.bottom - origTooltipHeight;
-        var idealTipCenterAlignCoords = {
-            left: targetRect.left + (targetWidth - origTooltipWidth) / 2,
-            top: targetRect.top + (targetHeight - origTooltipHeight) / 2
-        };
-        var idealRawLeft = idealTipCenterAlignCoords.left;
-        var idealRawTop = idealTipCenterAlignCoords.top;
-        if (orientation === "top") {
-            idealRawTop = targetRect.top - renderedTooltipHeight - arrowHeight;
-            maxRawTop -= arrowHeight;
-        } else if (orientation === "bottom") {
-            idealRawTop = targetRect.top + targetHeight + arrowHeight;
-            maxRawTop -= arrowHeight;
-        } else if (orientation === "left") {
-            idealRawLeft = targetRect.left - renderedTooltipWidth - arrowWidth;
-            maxRawLeft -= arrowWidth;
-        } else if (orientation === "right") {
-            idealRawLeft = targetRect.left + targetWidth + arrowWidth;
-            maxRawLeft -= arrowWidth;
-        } else {
-            throw "invalid orientation " + orientation;
-        }
-        var rawLeft = constrainNum(idealRawLeft, minRawLeft, maxRawLeft);
-        var rawTop = constrainNum(idealRawTop, minRawTop, maxRawTop);
-        rawLeft += tipPlacementOffsetX;
-        rawTop += tipPlacementOffsetY;
-        var _isFixed = function(el) {
-            if (!window.getComputedStyle || el === document || el === document.documentElement) {
-                return false;
-            }
-            var styles;
-            try {
-                styles = window.getComputedStyle(el);
-            } catch (e) {
-                return false;
-            }
-            return styles && styles.position === "fixed";
-        };
-        var newLeft;
-        var newTop;
-        var fixedAncestor = searchAncestors(targetElem, _isFixed);
-        if (fixedAncestor && !hasParentNode(tooltip, fixedAncestor)) {
-            newLeft = rawLeft - viewport.left;
-            newTop = rawTop - viewport.top;
-            tooltip.setAttribute("_target-fixed", true);
-        } else {
-            var relativeCoords = _coordsRelToNewContext(rawLeft, rawTop, window, tipContext, contextScale);
-            newLeft = relativeCoords.left;
-            newTop = relativeCoords.top;
-            tooltip.removeAttribute("_target-fixed");
-        }
-        tooltip.style.top = newTop + "px";
-        tooltip.style.left = newLeft + "px";
-        var maxVal;
-        var arrowParentSize;
-        var arrowStyleProp;
-        var rawArrowCenter;
-        var tipTargetDiff;
-        if (orientation === "top" || orientation === "bottom") {
-            rawArrowCenter = (targetWidth - arrowWidth) / 2;
-            tipTargetDiff = targetRect.left - rawLeft;
-            maxVal = origTooltipWidth - arrowWidth;
-            arrowParentSize = origTooltipWidth;
-            arrowStyleProp = "left";
-        } else {
-            rawArrowCenter = (targetHeight - arrowHeight) / 2;
-            tipTargetDiff = targetRect.top - rawTop;
-            maxVal = origTooltipHeight - arrowHeight;
-            arrowParentSize = origTooltipHeight;
-            arrowStyleProp = "top";
-        }
-        var arrowVal = constrainNum(rawArrowCenter + tipTargetDiff, 0, maxVal);
-        var arrowFrac = arrowParentSize ? arrowVal / arrowParentSize : 0;
-        arrow.style[arrowStyleProp] = arrowFrac * 100 + "%";
-        var newTooltipWidth = tooltip.offsetWidth * tooltipScale.x;
-        var newTooltipHeight = tooltip.offsetHeight * tooltipScale.y;
-        var newContextViewWidth = tipContext.clientWidth * contextScale.x;
-        var newContextViewHeight = tipContext.clientHeight * contextScale.y;
-        _unforceDisplay(tooltip);
-        var recursionLimit = 2;
-        if (reattemptDepth < recursionLimit && (origTooltipWidth !== newTooltipWidth || origTooltipHeight !== newTooltipHeight || contextViewWidth !== newContextViewWidth || contextViewHeight !== newContextViewHeight)) {
-            return _positionTooltip(tooltip, targetElem, orientation, reattemptDepth + 1);
-        } else {
-            return {
-                left: rawLeft,
-                top: rawTop,
-                width: newTooltipWidth,
-                height: newTooltipHeight,
-                right: rawLeft + newTooltipWidth,
-                bottom: rawTop + newTooltipHeight
-            };
-        }
-    }
-    function _showTooltip(tooltip, triggerElem) {
-        if (triggerElem === tooltip) {
-            console.warn("The tooltip's target element is the tooltip itself!" + " Is this intentional?");
-        }
-        var arrow = tooltip.xtag.arrowEl;
-        if (!arrow.parentNode) {
-            console.warn("The inner component DOM of the tooltip " + "appears to be missing. Make sure to edit tooltip" + " contents through the .contentEl property instead of" + "directly on the x-tooltip to avoid " + "clobbering the component's internals.");
-        }
-        var targetOrient = tooltip.orientation;
-        var _readyToShowFn = function() {
-            _unforceDisplay(tooltip);
-            tooltip.setAttribute("visible", true);
-            xtag.fireEvent(tooltip, "tooltipshown", {
-                triggerElem: triggerElem
-            });
-        };
-        if (triggerElem) {
-            tooltip.xtag.lastTargetElem = triggerElem;
-            xtag.skipTransition(tooltip, function() {
-                _positionTooltip(tooltip, triggerElem, targetOrient);
-                _forceDisplay(tooltip);
-                return _readyToShowFn;
-            });
-        } else {
-            tooltip.style.top = "";
-            tooltip.style.left = "";
-            arrow.style.top = "";
-            arrow.style.left = "";
-            _readyToShowFn();
-        }
-    }
-    function _hideTooltip(tooltip) {
-        if (isValidOrientation(tooltip.orientation)) {
-            tooltip.removeAttribute(AUTO_ORIENT_ATTR);
-        }
-        if (tooltip.hasAttribute("visible")) {
-            _forceDisplay(tooltip);
-            tooltip.xtag._hideTransitionFlag = true;
-            tooltip.removeAttribute("visible");
-        }
-    }
-    function _destroyListeners(tooltip) {
-        var cachedListeners = tooltip.xtag.cachedListeners;
-        cachedListeners.forEach(function(cachedListener) {
-            cachedListener.removeListener();
-        });
-        tooltip.xtag.cachedListeners = [];
-        OUTER_TRIGGER_MANAGER.unregisterTooltip(tooltip.triggerStyle, tooltip);
-    }
-    function _updateTriggerListeners(tooltip, newTargetSelector, newTriggerStyle) {
-        if (!tooltip.parentNode) {
-            return;
-        }
-        if (newTargetSelector === undefined || newTargetSelector === null) {
-            newTargetSelector = tooltip.targetSelector;
-        }
-        if (newTriggerStyle === undefined || newTriggerStyle === null) {
-            newTriggerStyle = tooltip.triggerStyle;
-        }
-        var newTriggerElems = _selectorToElems(tooltip, newTargetSelector);
-        if (newTriggerElems.indexOf(tooltip.xtag.lastTargetElem) === -1) {
-            tooltip.xtag.lastTargetElem = newTriggerElems.length > 0 ? newTriggerElems[0] : null;
-            _positionTooltip(tooltip, tooltip.xtag.lastTargetElem, tooltip.orientation);
-        }
-        _destroyListeners(tooltip);
-        var listeners;
-        if (newTriggerStyle in PRESET_STYLE_LISTENERFNS) {
-            var getListenersFn = PRESET_STYLE_LISTENERFNS[newTriggerStyle];
-            listeners = getListenersFn(tooltip, newTargetSelector);
-        } else {
-            listeners = mkGenericListeners(tooltip, newTargetSelector, newTriggerStyle);
-            OUTER_TRIGGER_MANAGER.registerTooltip(newTriggerStyle, tooltip);
-        }
-        listeners.forEach(function(listener) {
-            listener.attachListener();
-        });
-        tooltip.xtag.cachedListeners = listeners;
-        _hideTooltip(tooltip);
-    }
-    xtag.register("x-tooltip", {
-        lifecycle: {
-            created: function() {
-                var self = this;
-                self.xtag.contentEl = document.createElement("div");
-                self.xtag.arrowEl = document.createElement("span");
-                xtag.addClass(self.xtag.contentEl, "tooltip-content");
-                xtag.addClass(self.xtag.arrowEl, "tooltip-arrow");
-                self.xtag.contentEl.innerHTML = self.innerHTML;
-                self.innerHTML = "";
-                self.appendChild(self.xtag.contentEl);
-                self.appendChild(self.xtag.arrowEl);
-                self.xtag._orientation = "auto";
-                self.xtag._targetSelector = PREV_SIB_SELECTOR;
-                self.xtag._triggerStyle = "click";
-                var triggeringElems = _selectorToElems(self, self.xtag._targetSelector);
-                self.xtag.lastTargetElem = triggeringElems.length > 0 ? triggeringElems[0] : null;
-                self.xtag.cachedListeners = [];
-                self.xtag._hideTransitionFlag = false;
-                self.xtag._skipOuterClick = false;
-            },
-            inserted: function() {
-                _updateTriggerListeners(this, this.xtag._targetSelector, this.xtag._triggerStyle);
-            },
-            removed: function() {
-                _destroyListeners(this);
-            }
-        },
-        events: {
-            transitionend: function(e) {
-                var tooltip = e.currentTarget;
-                if (tooltip.xtag._hideTransitionFlag && !tooltip.hasAttribute("visible")) {
-                    tooltip.xtag._hideTransitionFlag = false;
-                    xtag.fireEvent(tooltip, "tooltiphidden");
-                }
-                _unforceDisplay(tooltip);
-            }
-        },
-        accessors: {
-            orientation: {
-                attribute: {},
-                get: function() {
-                    return this.xtag._orientation;
-                },
-                set: function(newOrientation) {
-                    newOrientation = newOrientation.toLowerCase();
-                    var arrow = this.querySelector(".tooltip-arrow");
-                    var newArrowDir = null;
-                    if (isValidOrientation(newOrientation)) {
-                        newArrowDir = TIP_ORIENT_ARROW_DIR_MAP[newOrientation];
-                        arrow.setAttribute(ARROW_DIR_ATTR, newArrowDir);
-                        this.removeAttribute(AUTO_ORIENT_ATTR);
-                    } else {
-                        arrow.removeAttribute(ARROW_DIR_ATTR);
-                    }
-                    this.xtag._orientation = newOrientation;
-                    this.refreshPosition();
-                }
-            },
-            triggerStyle: {
-                attribute: {
-                    name: "trigger-style"
-                },
-                get: function() {
-                    return this.xtag._triggerStyle;
-                },
-                set: function(newTriggerStyle) {
-                    _updateTriggerListeners(this, this.targetSelector, newTriggerStyle);
-                    this.xtag._triggerStyle = newTriggerStyle;
-                }
-            },
-            targetSelector: {
-                attribute: {
-                    name: "target-selector"
-                },
-                get: function() {
-                    return this.xtag._targetSelector;
-                },
-                set: function(newSelector) {
-                    _updateTriggerListeners(this, newSelector, this.triggerStyle);
-                    this.xtag._targetSelector = newSelector;
-                }
-            },
-            ignoreOuterTrigger: {
-                attribute: {
-                    "boolean": true,
-                    name: "ignore-outer-trigger"
-                }
-            },
-            ignoreTooltipPointerEvents: {
-                attribute: {
-                    "boolean": true,
-                    name: "ignore-tooltip-pointer-events"
-                }
-            },
-            allowOverflow: {
-                attribute: {
-                    "boolean": true,
-                    name: "allow-overflow"
-                },
-                set: function() {
-                    this.refreshPosition();
-                }
-            },
-            contentEl: {
-                get: function() {
-                    return this.xtag.contentEl;
-                },
-                set: function(newContentElem) {
-                    var oldContent = this.xtag.contentEl;
-                    xtag.addClass(newContentElem, "tooltip-content");
-                    this.replaceChild(newContentElem, oldContent);
-                    this.xtag.contentEl = newContentElem;
-                    this.refreshPosition();
-                }
-            },
-            presetTriggerStyles: {
-                get: function() {
-                    var output = [];
-                    for (var presetName in PRESET_STYLE_LISTENERFNS) {
-                        output.push(presetName);
-                    }
-                    return output;
-                }
-            },
-            targetElems: {
-                get: function() {
-                    return _selectorToElems(this, this.targetSelector);
-                }
-            }
-        },
-        methods: {
-            refreshPosition: function() {
-                if (this.xtag.lastTargetElem) {
-                    _positionTooltip(this, this.xtag.lastTargetElem, this.orientation);
-                }
-            },
-            show: function() {
-                _showTooltip(this, this.xtag.lastTargetElem);
-            },
-            hide: function() {
-                _hideTooltip(this);
-            },
-            toggle: function() {
-                if (this.hasAttribute("visible")) {
-                    this.hide();
-                } else {
-                    this.show();
-                }
-            }
-        }
+    xtag.register("x-togglebar", {
+        events: {}
     });
 })();
\ No newline at end of file
diff --git a/dist/brick.min.css b/dist/brick.min.css
index 2dc9ab2a..2888e791 100644
--- a/dist/brick.min.css
+++ b/dist/brick.min.css
@@ -20,34 +20,19 @@ x-calendar .prev,x-calendar .next{position:absolute;top:0;max-width:3em}
 x-calendar .prev{left:0}
 x-calendar .next{right:0}
 x-calendar:not([active]) .day:hover,x-calendar:not([active]) .prev:hover,x-calendar:not([active]) .next:hover{cursor:pointer}
-x-deck,x-deck > x-card{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=flipX][reverse][leaving]:not([_before-animation]){-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=flipX][reverse][selected][_before-animation]{-webkit-transform:perspective(800px) rotateX(-180deg);-moz-transform:perspective(800px) rotateX(-180deg);-ms-transform:perspective(800px) rotateX(-180deg);-o-transform:perspective(800px) rotateX(-180deg);transform:perspective(800px) rotateX(-180deg)}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=flipY][reverse][leaving]:not([_before-animation]){-webkit-transform:perspective(800px) rotateY(180deg);-moz-transform:perspective(800px) rotateY(180deg);-ms-transform:perspective(800px) rotateY(180deg);-o-transform:perspective(800px) rotateY(180deg);transform:perspective(800px) rotateY(180deg)}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=flipY][reverse][selected][_before-animation]{-webkit-transform:perspective(800px) rotateY(-180deg);-moz-transform:perspective(800px) rotateY(-180deg);-ms-transform:perspective(800px) rotateY(-180deg);-o-transform:perspective(800px) rotateY(-180deg);transform:perspective(800px) rotateY(-180deg)}
-x-deck > x-card[selected]{z-index:2}
-x-deck > x-card[leaving]{z-index:1}
-x-deck > x-card[card-anim-type=coverLeft][reverse][selected],x-deck > x-card[card-anim-type=coverRight][reverse][selected],x-deck > x-card[card-anim-type=coverUp][reverse][selected],x-deck > x-card[card-anim-type=coverDown][reverse][selected],x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[selected],x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[selected],x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[selected],x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[selected]{z-index:1}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving],x-deck > x-card[card-anim-type=coverRight][reverse][leaving],x-deck > x-card[card-anim-type=coverUp][reverse][leaving],x-deck > x-card[card-anim-type=coverDown][reverse][leaving],x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving],x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving],x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving],x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving]{z-index:2}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=scrollRight][reverse][selected][_before-animation]{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollRight][reverse][leaving]:not([_before-animation]){-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][selected][_before-animation],x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[selected][_before-animation]{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=scrollDown][reverse][selected][_before-animation]{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollDown][reverse][leaving]:not([_before-animation]){-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=scrollUp][reverse][selected][_before-animation],x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[selected][_before-animation]{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=scrollUp][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck > x-card[card-anim-type=coverLeft]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverRight][reverse][selected][_before-animation]{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=coverRight]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverLeft][reverse][selected][_before-animation]{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=coverUp]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverDown][reverse][selected][_before-animation]{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck > x-card[card-anim-type=coverDown]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverUp][reverse][selected][_before-animation]{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=coverRight][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=coverDown][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=coverUp][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck{display:block;position:relative;overflow:hidden;width:100%;height:100%}
-x-deck > x-card{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;display:block;overflow:hidden;position:absolute !important;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-ms-transition-property:-ms-transform;-o-transition-property:-o-transform;transition-property:transform;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-ms-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-ms-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0;-moz-transition-delay:0;-ms-transition-delay:0;-o-transition-delay:0;transition-delay:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;height:100%;width:100%;left:0;right:0;z-index:0;}
-x-deck > x-card:not([selected]):not([leaving]){visibility:hidden;opacity:0}
+x-deck{display:block;position:relative;overflow:hidden;height:100%;width:100%}
+x-deck > x-card{display:none;position:absolute !important;left:0;right:0;height:100%;width:100%;overflow:hidden;z-index:0;opacity:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate(0%,0%) scale(1);-moz-transform:translate(0%,0%) scale(1);-ms-transform:translate(0%,0%) scale(1);-o-transform:translate(0%,0%) scale(1);transform:translate(0%,0%) scale(1)}
+x-deck > x-card[selected],x-deck > x-card[transition]{display:block}
+x-deck:not([transition-type]) > x-card:not([transition-type]),x-deck[transition-type="fade-scale"] > x-card,x-deck > x-card[transition-type="fade-scale"]{opacity:0;-webkit-transform:scale(.85);-moz-transform:scale(.85);-ms-transform:scale(.85);-o-transform:scale(.85);transform:scale(.85);-webkit-transition:opacity .5s ease,-webkit-transform .5s ease;-moz-transition:opacity .5s ease,-moz-transform .5s ease;-ms-transition:opacity .5s ease,-ms-transform .5s ease;-o-transition:opacity .5s ease,-o-transform .5s ease;transition:opacity .5s ease,transform .5s ease}
+x-deck > x-card[show][transition]{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
+x-deck[transition-type^="slide"] > x-card,x-deck > x-card[transition-type^="slide"]{z-index:1}
+x-deck[transition-type^="slide"] > x-card[transition-direction="reverse"],x-deck > x-card[transition-type^="slide"][transition-direction="reverse"]{z-index:2}
+x-deck[transition-type^="slide"] > x-card[show],x-deck > x-card[show][transition-type^="slide"],x-deck[transition-type^="slide"] > x-card[hide],x-deck > x-card[hide][transition-type^="slide"]{-webkit-transition:-webkit-transform .6s ease;-moz-transition:-moz-transform .6s ease;-ms-transition:-ms-transform .6s ease;-o-transition:-o-transform .6s ease;transition:transform .6s ease}
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-right"],x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-right"],x-deck[transition-type="slide-left"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-left"],x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-left"]{-webkit-transform:translate(-100%,0);-moz-transform:translate(-100%,0);-ms-transform:translate(-100%,0);-o-transform:translate(-100%,0);transform:translate(-100%,0)}
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-right"],x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-right"],x-deck[transition-type="slide-left"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-left"],x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-left"]{-webkit-transform:translate(100%,0);-moz-transform:translate(100%,0);-ms-transform:translate(100%,0);-o-transform:translate(100%,0);transform:translate(100%,0)}
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-up"],x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-up"],x-deck[transition-type="slide-down"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-down"],x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-down"]{-webkit-transform:translate(0,-100%);-moz-transform:translate(0,-100%);-ms-transform:translate(0,-100%);-o-transform:translate(0,-100%);transform:translate(0,-100%)}
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-up"],x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-up"],x-deck[transition-type="slide-down"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-down"],x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-down"]{-webkit-transform:translate(0,100%);-moz-transform:translate(0,100%);-ms-transform:translate(0,100%);-o-transform:translate(0,100%);transform:translate(0,100%)}
+x-deck[transition-type^="slide"] > x-card[show][transition],x-deck > x-card[show][transition][transition-type^="slide"]{-webkit-transform:translate(0%,0%);-moz-transform:translate(0%,0%);-ms-transform:translate(0%,0%);-o-transform:translate(0%,0%);transform:translate(0%,0%)}
 x-flipbox{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;position:relative;height:100%;width:100%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
 x-flipbox > *{display:block;position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-ms-transition-property:-ms-transform;-o-transition-property:-o-transform;transition-property:transform;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;-ms-transition-duration:.25s;-o-transition-duration:.25s;transition-duration:.25s;-webkit-transition-timing-function:linear;-moz-transition-timing-function:linear;-ms-transition-timing-function:linear;-o-transition-timing-function:linear;transition-timing-function:linear;-webkit-transition-delay:0;-moz-transition-delay:0;-ms-transition-delay:0;-o-transition-delay:0;transition-delay:0;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d}
 x-flipbox > *:first-child{-webkit-transform:perspective(800px) rotateY(0) translate3d(0,0,2px);-moz-transform:perspective(800px) rotateY(0) translate3d(0,0,2px);-ms-transform:perspective(800px) rotateY(0) translate3d(0,0,2px);-o-transform:perspective(800px) rotateY(0) translate3d(0,0,2px);transform:perspective(800px) rotateY(0) translate3d(0,0,2px);z-index:2}
@@ -72,9 +57,6 @@ x-layout:not([content-maximizing]):not([maxcontent]) > section{margin:0 !importa
 x-layout > section > *:only-child{height:100%;position:absolute}
 x-layout[content-maximizing] > header,x-layout[content-maximized] > header,x-layout[maxcontent] > header{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
 x-layout[content-maximizing] > footer,x-layout[content-maximized] > footer,x-layout[maxcontent] > footer{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}
-x-slidebox{display:block;overflow:hidden;height:100%;width:100%}
-x-slides{display:block;position:relative;height:100%;width:100%;overflow:hidden;-o-transition:-o-transform .5s ease;-ms-transition:-ms-transform .5s ease;-moz-transition:-moz-transform .5s ease;-webkit-transition:-webkit-transform .5s ease;transition:transform .5s ease}
-x-slides > x-slide{display:block;float:left;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;vertical-align:top;overflow:hidden}
 x-slider{display:inline-block;position:relative;margin:0;padding:0}
 x-slider > input{margin:0;padding:0;position:relative;overflow:hidden;vertical-align:middle;width:100%;min-height:100%}
 x-slider .slider-track{position:absolute;display:block;left:0;right:0;bottom:0;top:0;width:100%;height:4px;margin:auto;pointer-events:none}
@@ -88,40 +70,30 @@ x-slider:not([polyfill]) > .slider-thumb{visibility:hidden !important}
 x-tabbar{display:block;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;width:100%;overflow:hidden;white-space:nowrap;text-align:center}
 x-tabbar > x-tabbar-tab{min-width:auto;min-height:auto;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;box-flex:1;flex:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:inline-block;min-width:auto;min-height:auto;vertical-align:middle}
 x-tabbar > x-tabbar-tab > *:only-child{vertical-align:top;height:100%;width:100%;margin:0 !important}
-x-toggle{display:inline-block;position:relative;}
-x-toggle > .x-toggle-input-wrap{cursor:pointer;position:absolute !important;margin:0 !important;left:0% !important;top:0% !important;width:100% !important;height:100% !important;display:inline-block !important;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)" !important;opacity:.0001 !important;z-index:9999 !important}
-x-toggle > .x-toggle-input-wrap > input{cursor:pointer}
-x-toggle .x-toggle-content{display:inline-block;vertical-align:middle;margin:0}
-x-toggle .x-toggle-content:after{content:"";display:inline-block;width:0;height:100%;vertical-align:middle}
-x-toggle .x-toggle-check{display:inline-block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:16px;height:16px;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid}
-x-tooltip,x-tooltip > .tooltip-content,x-tooltip > .tooltip-arrow{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
-x-tooltip[orientation=top],x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=top]{-webkit-transform:translate3d(0,10px,1px);-moz-transform:translate3d(0,10px,1px);-ms-transform:translate3d(0,10px,1px);-o-transform:translate3d(0,10px,1px);transform:translate3d(0,10px,1px)}
-x-tooltip[orientation=bottom],x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=bottom]{-webkit-transform:translate3d(0,-10px,1px);-moz-transform:translate3d(0,-10px,1px);-ms-transform:translate3d(0,-10px,1px);-o-transform:translate3d(0,-10px,1px);transform:translate3d(0,-10px,1px)}
-x-tooltip[orientation=left],x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=left]{-webkit-transform:translate3d(10px,0,1px);-moz-transform:translate3d(10px,0,1px);-ms-transform:translate3d(10px,0,1px);-o-transform:translate3d(10px,0,1px);transform:translate3d(10px,0,1px)}
-x-tooltip[orientation=right],x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[_auto-orientation=right]{-webkit-transform:translate3d(-10px,0,1px);-moz-transform:translate3d(-10px,0,1px);-ms-transform:translate3d(-10px,0,1px);-o-transform:translate3d(-10px,0,1px);transform:translate3d(-10px,0,1px)}
-x-tooltip{-webkit-transition-property:visibility -webkit-transform opacity;-moz-transition-property:visibility -moz-transform opacity;-ms-transition-property:visibility -ms-transform opacity;-o-transition-property:visibility -o-transform opacity;transition-property:visibility transform opacity;-webkit-transition-duration:.2s;-moz-transition-duration:.2s;-ms-transition-duration:.2s;-o-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-in;-moz-transition-timing-function:ease-in;-ms-transition-timing-function:ease-in;-o-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transition-delay:0;-moz-transition-delay:0;-ms-transition-delay:0;-o-transition-delay:0;transition-delay:0;position:absolute;margin:0;padding:0;left:0;top:0;display:block;z-index:2147483647;overflow:visible}
-x-tooltip[_target-fixed]{position:fixed}
-x-tooltip[ignore-tooltip-pointer-events]{pointer-events:none}
-x-tooltip:not([allow-overflow]){max-width:100%;max-height:100%}
-x-tooltip:not([visible]){visibility:hidden !important;opacity:0 !important}
-x-tooltip:not([visible]):not([_force-display]){width:1px !important;height:1px !important;left:0 !important;top:0 !important;margin:0 !important;border-width:0 !important}
-x-tooltip:not([visible]):not([_force-display]) > *{display:none !important}
-x-tooltip[visible]{visibility:visible;opacity:1;-webkit-transform:translate3d(0,0,1px);-moz-transform:translate3d(0,0,1px);-ms-transform:translate3d(0,0,1px);-o-transform:translate3d(0,0,1px);transform:translate3d(0,0,1px)}
-x-tooltip:not([orientation=top]):not([orientation=bottom]):not([orientation=left]):not([orientation=right])[visible]{-webkit-transform:translate3d(0,0,1px);-moz-transform:translate3d(0,0,1px);-ms-transform:translate3d(0,0,1px);-o-transform:translate3d(0,0,1px);transform:translate3d(0,0,1px)}
-x-tooltip > .tooltip-content{position:relative;display:block;overflow:auto;max-width:inherit;max-height:inherit;z-index:2}
-x-tooltip[allow-overflow]{white-space:nowrap}
-x-tooltip > .tooltip-arrow{position:absolute;display:block;margin:0;padding:0;vertical-align:top;width:1em;height:1em;border:inherit;background:inherit;z-index:1}
-x-tooltip > .tooltip-arrow:not([arrow-direction=up]):not([arrow-direction=left]):not([arrow-direction=right]){top:100%;left:50%;-webkit-transform:translateY(-50%) rotate(45deg);-moz-transform:translateY(-50%) rotate(45deg);-ms-transform:translateY(-50%) rotate(45deg);-o-transform:translateY(-50%) rotate(45deg);transform:translateY(-50%) rotate(45deg);border-top-color:transparent !important;border-left-color:transparent !important}
-x-tooltip > .tooltip-arrow[arrow-direction=up]{bottom:100%;left:50%;-webkit-transform:translateY(50%) rotate(45deg);-moz-transform:translateY(50%) rotate(45deg);-ms-transform:translateY(50%) rotate(45deg);-o-transform:translateY(50%) rotate(45deg);transform:translateY(50%) rotate(45deg);border-bottom-color:transparent !important;border-right-color:transparent !important}
-x-tooltip > .tooltip-arrow[arrow-direction=left]{right:100%;top:50%;-webkit-transform:translateX(50%) rotate(45deg);-moz-transform:translateX(50%) rotate(45deg);-ms-transform:translateX(50%) rotate(45deg);-o-transform:translateX(50%) rotate(45deg);transform:translateX(50%) rotate(45deg);border-top-color:transparent !important;border-right-color:transparent !important}
-x-tooltip > .tooltip-arrow[arrow-direction=right]{left:100%;top:50%;-webkit-transform:translateX(-50%) rotate(45deg);-moz-transform:translateX(-50%) rotate(45deg);-ms-transform:translateX(-50%) rotate(45deg);-o-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);border-bottom-color:transparent !important;border-left-color:transparent !important}
-x-tooltip{border:1px solid #808080;background-color:#fff;border-radius:4px;box-shadow:1px 1px 3px #808080}
+x-toggle{display:inline-block;cursor:pointer}
+x-toggle[focus]{outline:1px dashed rgba(0,0,0,0.3)}
+x-toggle[no-box] .x-toggle-check{display:none}
+x-toggle input:checked + .x-toggle-check{background:#000}
+x-toggle[type="radio"] .x-toggle-check{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em}
+x-toggle:after{content:attr(label);display:inline-block;vertical-align:middle}
+x-toggle .x-toggle-check{display:inline-block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:16px;height:16px;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid;overflow:hidden !important}
+x-toggle input{position:absolute;outline:none;z-index:-1;opacity:.0001 !important}
+x-togglebar{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;border:1px solid #000;border-radius:4px;clear:both}
+x-togglebar x-toggle{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;padding:1px 4px 2px;border-left:inherit;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;box-flex:1;flex:1;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
+x-togglebar x-toggle:first-child{border-left-color:transparent}
+x-togglebar x-toggle[checked]{background:rgba(0,0,0,0.2)}
+x-togglebar x-toggle[focus]{-webkit-box-shadow:0 0 2px 0 transparent;-moz-box-shadow:0 0 2px 0 transparent;box-shadow:0 0 2px 0 transparent}
+x-togglebar x-toggle .x-toggle-check{height:10px;width:10px}
+x-togglebar x-toggle[type="checkbox"] .x-toggle-check{display:none}
+x-togglebar[orientation="vertical"]{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
+x-togglebar[orientation="vertical"] x-toggle{border-top:inherit;border-left:none}
+x-togglebar[orientation="vertical"] x-toggle:first-child{border-top:none}
 x-appbar{background-color:#00202f;color:#fff;font-family:"Fira Sans","Fira Sans","Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;font-size:17px;height:45px;line-height:45px}
 x-appbar > header{font-weight:600}
 x-appbar > *{color:#fff;font-family:"Fira Sans","Fira Sans","Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;font-size:inherit;line-height:inherit;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
 x-appbar > button{cursor:pointer;padding-left:2px;padding-right:2px;min-width:45px;background:transparent}
 x-appbar > button:hover{background-color:#00405d}
-x-appbar > button::-moz-focus-inner{bordr:0;padding:0}
+x-appbar > button::-moz-focus-inner{border:0;padding:0}
 x-appbar > header:after{padding-left:6px;font-size:60%}
 x-calendar{border:1px solid #cecece;border-radius:3px;font-size:1em;font-family:"Fira Sans","Fira Sans","Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;background-color:#fff;color:#444}
 x-calendar .weekday-label{opacity:.8}
@@ -132,22 +104,27 @@ x-calendar .day.today{font-weight:bold}
 x-calendar:not([active]) .prev:hover,x-calendar:not([active]) .next:hover{background-color:#f9f9f9;opacity:.7}
 x-calendar:not([active]) .day:not(.chosen):hover{background:#ccc}
 html,body{min-height:100%}
-x-slider{height:27px;padding-bottom:2px}
-x-slider .slider-thumb,x-slider input::-moz-range-thumb{background:#fff;-moz-appearance:none;-webkit-appearance:none;border-radius:13px;border:1px solid #979797;box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);cursor:pointer;display:block;height:25px;width:25px}
-x-slider .slider-track{background:#d8d8d8;border-radius:4px;height:2px}
-x-slider > input::-moz-range-track,x-slider > input::-webkit-slider-runnable-track{background:#d8d8d8}
-x-slider input{-webkit-appearance:none;-moz-appearance:none;background:transparent;border:0 solid transparent;color:transparent;padding-bottom:2px}
+x-slider{height:27px}
+x-slider:not([polyfill]) .slider-thumb{display:none}
+x-slider:not([polyfill]) input{z-index:1}
+x-slider[polyfill] input{visibility:hidden}
+x-slider .slider-progress{position:absolute;top:0;left:0;height:100%;border-radius:3px;background:#0095dd}
+x-slider .slider-thumb,x-slider input[type='range']::-webkit-slider-thumb{background:#fff;-webkit-appearance:none;border-radius:13px;border:1px solid #acacac;box-shadow:0 .5px 1px 0 rgba(0,0,0,0.2);cursor:pointer;display:block;height:25px;width:25px}
+x-slider .slider-thumb,x-slider input[type='range']::-moz-range-thumb{background:#fff;-moz-appearance:none;border-radius:13px;border:1px solid #acacac;box-shadow:0 .5px 1px 0 rgba(0,0,0,0.2);cursor:pointer;display:block;height:25px;width:25px}
+x-slider .slider-track{background:#d8d8d8;border-radius:3px;height:2px;overflow:hidden}
+x-slider input[type=range]::-moz-range-track{-moz-appearance:none;background:#d8d8d8;border:0 !important;outline:0;border-radius:3px;height:2px;box-shadow:0 none}
+x-slider input[type=range]::-moz-range-progress{background:#0095dd;border-radius:3px}
+x-slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0 solid transparent;color:transparent}
 x-tabbar{background:#00202f;color:#fff;font-family:"Fira Sans","Fira Sans","Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;height:45px;line-height:45px}
 x-tabbar > x-tabbar-tab{letter-spacing:normal;overflow:hidden;cursor:pointer}
 x-tabbar > x-tabbar-tab:hover{background-color:#00405d;color:#eaeaea}
 x-tabbar > x-tabbar-tab:active{color:#f2f2f2}
 x-tabbar > x-tabbar-tab > x-iconbutton:only-child{border:0}
+x-toggle[focus]{outline:0}
 x-toggle .x-toggle-content{min-height:22px;line-height:24px}
-x-toggle .x-toggle-check{width:22px;height:22px;border-radius:50%;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid #00202f;position:relative}
+x-toggle .x-toggle-check{width:22px;height:22px;border-radius:3px;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid #00202f;position:relative;background:#fff}
 x-toggle[no-box] .x-toggle-check{display:none !important}
-x-toggle[type="radio"][checked] .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;border-radius:50%;width:14px;height:14px;background:#0095dd}
-x-toggle[type="checkbox"][checked] .x-toggle-check{border-width:0;background:#0095dd}
-x-toggle[type="checkbox"][checked] .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:3.2px;right:0;margin:auto;width:10px;height:5px;border:solid #fff;border-width:0 0 2px 2px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
-x-tooltip{border:1px solid #808080;background-color:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,0.5)}
-x-tooltip > .tooltip-arrow{box-shadow:2px 2px 2px -2px rgba(0,0,0,0.5)}
-x-tooltip > .tooltip-content{padding:1em}
+x-toggle[type="radio"] input:checked + .x-toggle-check{background:#fff}
+x-toggle[type="radio"] input:checked + .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;border-radius:50%;width:14px;height:14px;background:#0095dd}
+x-toggle[type="checkbox"] input:checked + .x-toggle-check{border-width:0;background:#0095dd}
+x-toggle[type="checkbox"] input:checked + .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:3.2px;right:0;margin:auto;width:10px;height:5px;border:solid #fff;border-width:0 0 2px 2px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
diff --git a/dist/brick.min.js b/dist/brick.min.js
index 45c01cfe..25924fb3 100644
--- a/dist/brick.min.js
+++ b/dist/brick.min.js
@@ -1,3 +1,3 @@
 window.Platform={};var logFlags={};!function(){function a(a){if(this._element=a,a.className!=this._classCache){if(this._classCache=a.className,!this._classCache)return;var b,c=this._classCache.replace(/^\s+|\s+$/g,"").split(/\s+/);for(b=0;b<c.length;b++)g.call(this,c[b])}}function b(a,b){a.className=b.join(" ")}function c(a,b,c){Object.defineProperty?Object.defineProperty(a,b,{get:c}):a.__defineGetter__(b,c)}if(!("undefined"==typeof window.Element||"classList"in document.documentElement)){var d=Array.prototype,e=d.indexOf,f=d.slice,g=d.push,h=d.splice,i=d.join;a.prototype={add:function(a){this.contains(a)||(g.call(this,a),b(this._element,f.call(this,0)))},contains:function(a){return-1!==e.call(this,a)},item:function(a){return this[a]||null},remove:function(a){var c=e.call(this,a);-1!==c&&(h.call(this,c,1),b(this._element,f.call(this,0)))},toString:function(){return i.call(this," ")},toggle:function(a){-1===e.call(this,a)?this.add(a):this.remove(a)}},window.DOMTokenList=a,c(Element.prototype,"classList",function(){return new a(this)})}}(),"undefined"==typeof WeakMap&&!function(){var a=Object.defineProperty,b=Date.now()%1e9,c=function(){this.name="__st"+(1e9*Math.random()>>>0)+(b++ +"__")};c.prototype={set:function(b,c){var d=b[this.name];d&&d[0]===b?d[1]=c:a(b,this.name,{value:[b,c],writable:!0})},get:function(a){var b;return(b=a[this.name])&&b[0]===a?b[1]:void 0},"delete":function(a){this.set(a,void 0)}},window.WeakMap=c}(),function(a){function b(a){u.push(a),t||(t=!0,q(d))}function c(a){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(a)||a}function d(){t=!1;var a=u;u=[],a.sort(function(a,b){return a.uid_-b.uid_});var b=!1;a.forEach(function(a){var c=a.takeRecords();e(a),c.length&&(a.callback_(c,a),b=!0)}),b&&d()}function e(a){a.nodes_.forEach(function(b){var c=p.get(b);c&&c.forEach(function(b){b.observer===a&&b.removeTransientObservers()})})}function f(a,b){for(var c=a;c;c=c.parentNode){var d=p.get(c);if(d)for(var e=0;e<d.length;e++){var f=d[e],g=f.options;if(c===a||g.subtree){var h=b(g);h&&f.enqueue(h)}}}}function g(a){this.callback_=a,this.nodes_=[],this.records_=[],this.uid_=++v}function h(a,b){this.type=a,this.target=b,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function i(a){var b=new h(a.type,a.target);return b.addedNodes=a.addedNodes.slice(),b.removedNodes=a.removedNodes.slice(),b.previousSibling=a.previousSibling,b.nextSibling=a.nextSibling,b.attributeName=a.attributeName,b.attributeNamespace=a.attributeNamespace,b.oldValue=a.oldValue,b}function j(a,b){return w=new h(a,b)}function k(a){return x?x:(x=i(w),x.oldValue=a,x)}function l(){w=x=void 0}function m(a){return a===x||a===w}function n(a,b){return a===b?a:x&&m(a)?x:null}function o(a,b,c){this.observer=a,this.target=b,this.options=c,this.transientObservedNodes=[]}var p=new WeakMap,q=window.msSetImmediate;if(!q){var r=[],s=String(Math.random());window.addEventListener("message",function(a){if(a.data===s){var b=r;r=[],b.forEach(function(a){a()})}}),q=function(a){r.push(a),window.postMessage(s,"*")}}var t=!1,u=[],v=0;g.prototype={observe:function(a,b){if(a=c(a),!b.childList&&!b.attributes&&!b.characterData||b.attributeOldValue&&!b.attributes||b.attributeFilter&&b.attributeFilter.length&&!b.attributes||b.characterDataOldValue&&!b.characterData)throw new SyntaxError;var d=p.get(a);d||p.set(a,d=[]);for(var e,f=0;f<d.length;f++)if(d[f].observer===this){e=d[f],e.removeListeners(),e.options=b;break}e||(e=new o(this,a,b),d.push(e),this.nodes_.push(a)),e.addListeners()},disconnect:function(){this.nodes_.forEach(function(a){for(var b=p.get(a),c=0;c<b.length;c++){var d=b[c];if(d.observer===this){d.removeListeners(),b.splice(c,1);break}}},this),this.records_=[]},takeRecords:function(){var a=this.records_;return this.records_=[],a}};var w,x;o.prototype={enqueue:function(a){var c=this.observer.records_,d=c.length;if(c.length>0){var e=c[d-1],f=n(e,a);if(f)return c[d-1]=f,void 0}else b(this.observer);c[d]=a},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(a){var b=this.options;b.attributes&&a.addEventListener("DOMAttrModified",this,!0),b.characterData&&a.addEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.addEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(a){var b=this.options;b.attributes&&a.removeEventListener("DOMAttrModified",this,!0),b.characterData&&a.removeEventListener("DOMCharacterDataModified",this,!0),b.childList&&a.removeEventListener("DOMNodeInserted",this,!0),(b.childList||b.subtree)&&a.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(a){if(a!==this.target){this.addListeners_(a),this.transientObservedNodes.push(a);var b=p.get(a);b||p.set(a,b=[]),b.push(this)}},removeTransientObservers:function(){var a=this.transientObservedNodes;this.transientObservedNodes=[],a.forEach(function(a){this.removeListeners_(a);for(var b=p.get(a),c=0;c<b.length;c++)if(b[c]===this){b.splice(c,1);break}},this)},handleEvent:function(a){switch(a.stopImmediatePropagation(),a.type){case"DOMAttrModified":var b=a.attrName,c=a.relatedNode.namespaceURI,d=a.target,e=new j("attributes",d);e.attributeName=b,e.attributeNamespace=c;var g=a.attrChange===MutationEvent.ADDITION?null:a.prevValue;f(d,function(a){return!a.attributes||a.attributeFilter&&a.attributeFilter.length&&-1===a.attributeFilter.indexOf(b)&&-1===a.attributeFilter.indexOf(c)?void 0:a.attributeOldValue?k(g):e});break;case"DOMCharacterDataModified":var d=a.target,e=j("characterData",d),g=a.prevValue;f(d,function(a){return a.characterData?a.characterDataOldValue?k(g):e:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(a.target);case"DOMNodeInserted":var h,i,d=a.relatedNode,m=a.target;"DOMNodeInserted"===a.type?(h=[m],i=[]):(h=[],i=[m]);var n=m.previousSibling,o=m.nextSibling,e=j("childList",d);e.addedNodes=h,e.removedNodes=i,e.previousSibling=n,e.nextSibling=o,f(d,function(a){return a.childList?e:void 0})}l()}},a.JsMutationObserver=g,!a.MutationObserver&&a.WebKitMutationObserver&&(a.MutationObserver=a.WebKitMutationObserver),a.MutationObserver||(a.MutationObserver=g)}(this),function(a){function b(b,f){var g=f||{};if(!b)throw new Error("document.register: first argument `name` must not be empty");if(b.indexOf("-")<0)throw new Error("document.register: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(b)+"'.");if(g.name=b,!g.prototype)throw new Error("Options missing required prototype property");return g.lifecycle=g.lifecycle||{},g.ancestry=c(g.extends),d(g),e(g),k(g.prototype),m(b,g),g.ctor=n(g),g.ctor.prototype=g.prototype,g.prototype.constructor=g.ctor,a.ready&&a.upgradeAll(document),g.ctor}function c(a){var b=v[a];return b?c(b.extends).concat([b]):[]}function d(a){for(var b,c=a.extends,d=0;b=a.ancestry[d];d++)c=b.is&&b.tag;a.tag=c||a.name,c&&(a.is=a.name)}function e(a){if(!Object.__proto__){var b=HTMLElement.prototype;if(a.is){var c=document.createElement(a.tag);b=Object.getPrototypeOf(c)}for(var d,e=a.prototype;e&&e!==b;){var d=Object.getPrototypeOf(e);e.__proto__=d,e=d}}a.native=b}function f(a){return g(w(a.tag),a)}function g(b,c){return c.is&&b.setAttribute("is",c.is),b.removeAttribute("unresolved"),h(b,c),b.__upgraded__=!0,a.upgradeSubtree(b),j(b),b}function h(a,b){Object.__proto__?a.__proto__=b.prototype:(i(a,b.prototype,b.native),a.__proto__=b.prototype)}function i(a,b,c){for(var d={},e=b;e!==c&&e!==HTMLUnknownElement.prototype;){for(var f,g=Object.getOwnPropertyNames(e),h=0;f=g[h];h++)d[f]||(Object.defineProperty(a,f,Object.getOwnPropertyDescriptor(e,f)),d[f]=1);e=Object.getPrototypeOf(e)}}function j(a){a.createdCallback&&a.createdCallback()}function k(a){if(!a.setAttribute._polyfilled){var b=a.setAttribute;a.setAttribute=function(a,c){l.call(this,a,c,b)};var c=a.removeAttribute;a.removeAttribute=function(a){l.call(this,a,null,c)},a.setAttribute._polyfilled=!0}}function l(a,b,c){var d=this.getAttribute(a);c.apply(this,arguments);var e=this.getAttribute(a);this.attributeChangedCallback&&e!==d&&this.attributeChangedCallback(a,d,e)}function m(a,b){v[a]=b}function n(a){return function(){return f(a)}}function o(a,b){var c=v[b||a];return c?new c.ctor:w(a)}function p(a){if(!a.__upgraded__&&a.nodeType===Node.ELEMENT_NODE){var b=a.getAttribute("is")||a.localName,c=v[b];return c&&g(a,c)}}function q(b){var c=x.call(this,b);return a.upgradeAll(c),c}a||(a=window.CustomElements={flags:{}});var r=a.flags,s=Boolean(document.register),t=!r.register&&s;if(t){var u=function(){};a.registry={},a.upgradeElement=u,a.watchShadow=u,a.upgrade=u,a.upgradeAll=u,a.upgradeSubtree=u,a.observeDocument=u,a.upgradeDocument=u,a.takeRecords=u}else{var v={},w=document.createElement.bind(document),x=Node.prototype.cloneNode;document.register=b,document.createElement=o,Node.prototype.cloneNode=q,a.registry=v,a.upgrade=p}a.hasNative=s,a.useNative=t}(window.CustomElements),function(a){function b(a,c,d){var e=a.firstElementChild;if(!e)for(e=a.firstChild;e&&e.nodeType!==Node.ELEMENT_NODE;)e=e.nextSibling;for(;e;)c(e,d)!==!0&&b(e,c,d),e=e.nextElementSibling;return null}function c(a,b){for(var c=a.shadowRoot;c;)d(c,b),c=c.olderShadowRoot}function d(a,d){b(a,function(a){return d(a)?!0:(c(a,d),void 0)}),c(a,d)}function e(a){return h(a)?(i(a),!0):(l(a),void 0)}function f(a){d(a,function(a){return e(a)?!0:void 0})}function g(a){return e(a)||f(a)}function h(b){if(!b.__upgraded__&&b.nodeType===Node.ELEMENT_NODE){var c=b.getAttribute("is")||b.localName,d=a.registry[c];if(d)return y.dom&&console.group("upgrade:",b.localName),a.upgrade(b),y.dom&&console.groupEnd(),!0}}function i(a){l(a),q(a)&&d(a,function(a){l(a)})}function j(a){if(B.push(a),!A){A=!0;var b=window.Platform&&window.Platform.endOfMicrotask||setTimeout;b(k)}}function k(){A=!1;for(var a,b=B,c=0,d=b.length;d>c&&(a=b[c]);c++)a();B=[]}function l(a){z?j(function(){m(a)}):m(a)}function m(a){(a.enteredViewCallback||a.__upgraded__&&y.dom)&&(y.dom&&console.group("inserted:",a.localName),q(a)&&(a.__inserted=(a.__inserted||0)+1,a.__inserted<1&&(a.__inserted=1),a.__inserted>1?y.dom&&console.warn("inserted:",a.localName,"insert/remove count:",a.__inserted):a.enteredViewCallback&&(y.dom&&console.log("inserted:",a.localName),a.enteredViewCallback())),y.dom&&console.groupEnd())}function n(a){o(a),d(a,function(a){o(a)})}function o(a){z?j(function(){p(a)}):p(a)}function p(a){(a.leftViewCallback||a.__upgraded__&&y.dom)&&(y.dom&&console.log("removed:",a.localName),q(a)||(a.__inserted=(a.__inserted||0)-1,a.__inserted>0&&(a.__inserted=0),a.__inserted<0?y.dom&&console.warn("removed:",a.localName,"insert/remove count:",a.__inserted):a.leftViewCallback&&a.leftViewCallback()))}function q(a){for(var b=a,c=window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(document)||document;b;){if(b==c)return!0;b=b.parentNode||b.host}}function r(a){if(a.shadowRoot&&!a.shadowRoot.__watched){y.dom&&console.log("watching shadow-root for: ",a.localName);for(var b=a.shadowRoot;b;)s(b),b=b.olderShadowRoot}}function s(a){a.__watched||(v(a),a.__watched=!0)}function t(a){if(y.dom){var b=a[0];if(b&&"childList"===b.type&&b.addedNodes&&b.addedNodes){for(var c=b.addedNodes[0];c&&c!==document&&!c.host;)c=c.parentNode;var d=c&&(c.URL||c._URL||c.host&&c.host.localName)||"";d=d.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",a.length,d||"")}a.forEach(function(a){"childList"===a.type&&(D(a.addedNodes,function(a){a.localName&&g(a)}),D(a.removedNodes,function(a){a.localName&&n(a)}))}),y.dom&&console.groupEnd()}function u(){t(C.takeRecords()),k()}function v(a){C.observe(a,{childList:!0,subtree:!0})}function w(a){v(a)}function x(a){y.dom&&console.group("upgradeDocument: ",(a.URL||a._URL||"").split("/").pop()),g(a),y.dom&&console.groupEnd()}var y=window.logFlags||{},z=!window.MutationObserver||window.MutationObserver===window.JsMutationObserver;a.hasPolyfillMutations=z;var A=!1,B=[],C=new MutationObserver(t),D=Array.prototype.forEach.call.bind(Array.prototype.forEach);a.watchShadow=r,a.upgradeAll=g,a.upgradeSubtree=f,a.observeDocument=w,a.upgradeDocument=x,a.takeRecords=u}(window.CustomElements),function(){function a(a){return"link"===a.localName&&a.getAttribute("rel")===b}var b=window.HTMLImports?HTMLImports.IMPORT_LINK_TYPE:"none",c={selectors:["link[rel="+b+"]"],map:{link:"parseLink"},parse:function(a){if(!a.__parsed){a.__parsed=!0;var b=a.querySelectorAll(c.selectors);d(b,function(a){c[c.map[a.localName]](a)}),CustomElements.upgradeDocument(a),CustomElements.observeDocument(a)}},parseLink:function(b){a(b)&&this.parseImport(b)},parseImport:function(a){a.content&&c.parse(a.content)}},d=Array.prototype.forEach.call.bind(Array.prototype.forEach);CustomElements.parser=c}(),function(a){function b(){CustomElements.parser.parse(document),CustomElements.upgradeDocument(document);var a=window.Platform&&Platform.endOfMicrotask?Platform.endOfMicrotask:setTimeout;a(function(){CustomElements.ready=!0,CustomElements.readyTime=Date.now(),window.HTMLImports&&(CustomElements.elapsed=CustomElements.readyTime-HTMLImports.readyTime),document.body.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})}if("function"!=typeof window.CustomEvent&&(window.CustomEvent=function(a){var b=document.createEvent("HTMLEvents");return b.initEvent(a,!0,!0),b}),"complete"===document.readyState||a.flags.eager)b();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var c=window.HTMLImports?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(c,b)}else b()}(window.CustomElements),function(){function a(a){var b=K.call(a);return J[b]||(J[b]=b.match(L)[1].toLowerCase())}function b(c,d){var e=b[d||a(c)];return e?e(c):c}function c(b){return-1==M.indexOf(a(b))?Array.prototype.slice.call(b,0):[b]}function d(a,b){return(b||N).length?c(a.querySelectorAll(b)):[]}function e(a,b){var c={added:[],removed:[]};b.forEach(function(b){b._mutation=!0;for(var d in c)for(var e=a._records["added"==d?"inserted":"removed"],f=b[d+"Nodes"],g=f.length,h=0;g>h&&-1==c[d].indexOf(f[h]);h++)c[d].push(f[h]),e.forEach(function(a){a(f[h],b)})})}function f(c,d,e){var f=a(e);return"object"==f&&"object"==a(c[d])?S.merge(c[d],e):c[d]=b(e,f),c}function g(a,b,c,d,e){e[b]="function"!=typeof e[b]?d:S.wrap(e[b],S.applyPseudos(c,d,a.pseudos))}function h(a,b,c,d){if(d){var e={};for(var f in c)e[f.split(":")[0]]=f;for(f in b)g(a,e[f.split(":")[0]]||f,f,b[f],c)}else for(var h in b)g(a,h+":__mixin__("+O++ +")",h,b[h],c)}function i(a){return a.mixins.forEach(function(b){var c=S.mixins[b];for(var d in c){var e=c[d],f=a[d];if(f)switch(d){case"accessors":case"prototype":for(var g in e)f[g]?h(a,e[g],f[g],!0):f[g]=e[g];break;default:h(a,e,f,"events"!=d)}else a[d]=e}}),a}function j(a,b){var c,d=b.target;if(!d.tagName)return null;if(S.matchSelector(d,a.value))c=d;else if(S.matchSelector(d,a.value+" *"))for(var e=d.parentNode;!c;)S.matchSelector(e,a.value)&&(c=e),e=e.parentNode;return c?a.listener=a.listener.bind(c):null}function k(a){if(a.type.match("touch"))a.target.__touched__=!0;else if(a.target.__touched__&&a.type.match("mouse"))return delete a.target.__touched__,void 0;return!0}function l(a){var b="over"==a;return{attach:"OverflowEvent"in y?"overflowchanged":[],condition:function(c){return c.flow=a,c.type==a+"flow"||0===c.orient&&c.horizontalOverflow==b||1==c.orient&&c.verticalOverflow==b||2==c.orient&&c.horizontalOverflow==b&&c.verticalOverflow==b}}}function m(a,b,c,d){d?b[a]=c[a]:Object.defineProperty(b,a,{writable:!0,enumerable:!0,value:c[a]})}function n(a,b){var c=Object.getOwnPropertyDescriptor(a,"target");for(var d in b)P[d]||m(d,a,b,c);a.baseEvent=b}function o(a,b){return{value:a.boolean?"":b,method:a.boolean&&!b?"removeAttribute":"setAttribute"}}function p(a,b,c,d){var e=o(b,d);a[e.method](c,e.value)}function q(a,b,c,d,e){for(var f=b.property?[a.xtag[b.property]]:b.selector?S.query(a,b.selector):[],g=f.length;g--;)f[g][e](c,d)}function r(a,b,c){a.__view__&&a.__view__.updateBindingValue(a,b,c)}function s(a,b,c,d,e,f){var g=c.split(":"),h=g[0];if("get"==h)g[0]=b,a.prototype[b].get=S.applyPseudos(g.join(":"),d[c],a.pseudos);else if("set"==h){g[0]=b;var i=a.prototype[b].set=S.applyPseudos(g.join(":"),e?function(a){this.xtag._skipSet=!0,this.xtag._skipAttr||p(this,e,f,a),this.xtag._skipAttr&&e.skip&&delete this.xtag._skipAttr,d[c].call(this,e.boolean?!!a:a),r(this,f,a),delete this.xtag._skipSet}:d[c]?function(a){d[c].call(this,a),r(this,f,a)}:null,a.pseudos);e&&(e.setter=i)}else a.prototype[b][c]=d[c]}function t(a,b){a.prototype[b]={};var c=a.accessors[b],d=c.attribute,e=d&&d.name?d.name.toLowerCase():b;d&&(d.key=b,a.attributes[e]=d);for(var f in c)s(a,b,f,c,d,e);if(d){if(!a.prototype[b].get){var g=(d.boolean?"has":"get")+"Attribute";a.prototype[b].get=function(){return this[g](e)}}a.prototype[b].set||(a.prototype[b].set=function(a){p(this,d,e,a),r(this,e,a)})}}function u(a){R[a]=(R[a]||[]).filter(function(b){return(b.tags=b.tags.filter(function(b){return b!=a&&!S.tags[b]})).length||b.fn()})}function v(a,b,c){a.__tap__||(a.__tap__={click:"mousedown"==c.type},a.__tap__.click?a.addEventListener("click",b.observer):(a.__tap__.scroll=b.observer.bind(a),window.addEventListener("scroll",a.__tap__.scroll,!0),a.addEventListener("touchmove",b.observer),a.addEventListener("touchcancel",b.observer),a.addEventListener("touchend",b.observer))),a.__tap__.click||(a.__tap__.x=c.touches[0].pageX,a.__tap__.y=c.touches[0].pageY)}function w(a,b){a.__tap__&&(a.__tap__.click?a.removeEventListener("click",b.observer):(window.removeEventListener("scroll",a.__tap__.scroll,!0),a.removeEventListener("touchmove",b.observer),a.removeEventListener("touchcancel",b.observer),a.removeEventListener("touchend",b.observer)),delete a.__tap__)}function x(a,b,c){var d=c.changedTouches[0],e=b.gesture.tolerance;return d.pageX<a.__tap__.x+e&&d.pageX>a.__tap__.x-e&&d.pageY<a.__tap__.y+e&&d.pageY>a.__tap__.y-e?!0:void 0}var y=window,z=document,A=function(){},B=function(){return!0},C=/([\w-]+(?:\([^\)]+\))?)/g,D=/(\w*)(?:\(([^\)]*)\))?/,E=/(\d+)/g,F={action:function(a,b){return a.value.match(E).indexOf(String(b.keyCode))>-1==("keypass"==a.name)||null}},G=function(){var a=y.getComputedStyle(z.documentElement,""),b=(Array.prototype.slice.call(a).join("").match(/-(moz|webkit|ms)-/)||""===a.OLink&&["","o"])[1];return{dom:"ms"==b?"MS":b,lowercase:b,css:"-"+b+"-",js:"ms"==b?b:b[0].toUpperCase()+b.substr(1)}}(),H=Element.prototype.matchesSelector||Element.prototype[G.lowercase+"MatchesSelector"],I=y.MutationObserver||y[G.js+"MutationObserver"],J={},K=J.toString,L=/\s([a-zA-Z]+)/;b.object=function(a){var c={};for(var d in a)c[d]=b(a[d]);return c},b.array=function(a){for(var c=a.length,d=new Array(c);c--;)d[c]=b(a[c]);return d};var M=["undefined","null","number","boolean","string","function"],N="",O=0,P={};for(var Q in document.createEvent("CustomEvent"))P[Q]=1;var R={},S={tags:{},defaultOptions:{pseudos:[],mixins:[],events:{},methods:{},accessors:{},lifecycle:{},attributes:{},prototype:{xtag:{get:function(){return this.__xtag__?this.__xtag__:this.__xtag__={data:{}}}}}},register:function(a,b){var d;if("string"==typeof a){d=a.toLowerCase();var e=b.prototype;delete b.prototype;var f=S.tags[d]=i(S.merge({},S.defaultOptions,b));for(var g in f.events)f.events[g]=S.parseEvent(g,f.events[g]);for(g in f.lifecycle)f.lifecycle[g.split(":")[0]]=S.applyPseudos(g,f.lifecycle[g],f.pseudos);for(g in f.methods)f.prototype[g.split(":")[0]]={value:S.applyPseudos(g,f.methods[g],f.pseudos),enumerable:!0};for(g in f.accessors)t(f,g);var h=f.lifecycle.created||f.lifecycle.ready;f.prototype.createdCallback={enumerable:!0,value:function(){var a=this;S.addEvents(this,f.events),f.mixins.forEach(function(b){S.mixins[b].events&&S.addEvents(a,S.mixins[b].events)});var b=h?h.apply(this,c(arguments)):null;for(var d in f.attributes){var e=f.attributes[d],g=this.hasAttribute(d);(g||e.boolean)&&(this[e.key]=e.boolean?g:this.getAttribute(d))}return f.pseudos.forEach(function(b){b.onAdd.call(a,b)}),b}},f.lifecycle.inserted&&(f.prototype.enteredViewCallback={value:f.lifecycle.inserted,enumerable:!0}),f.lifecycle.removed&&(f.prototype.leftViewCallback={value:f.lifecycle.removed,enumerable:!0}),f.lifecycle.attributeChanged&&(f.prototype.attributeChangedCallback={value:f.lifecycle.attributeChanged,enumerable:!0});var j=f.prototype.setAttribute||HTMLElement.prototype.setAttribute;f.prototype.setAttribute={writable:!0,enumberable:!0,value:function(a,b){var c=f.attributes[a.toLowerCase()];this.xtag._skipAttr||j.call(this,a,c&&c.boolean?"":b),c&&(c.setter&&!this.xtag._skipSet&&(this.xtag._skipAttr=!0,c.setter.call(this,c.boolean?!0:b)),b=c.skip?c.boolean?this.hasAttribute(a):this.getAttribute(a):b,q(this,c,a,c.boolean?"":b,"setAttribute")),delete this.xtag._skipAttr}};var k=f.prototype.removeAttribute||HTMLElement.prototype.removeAttribute;f.prototype.removeAttribute={writable:!0,enumberable:!0,value:function(a){var b=f.attributes[a.toLowerCase()];this.xtag._skipAttr||k.call(this,a),b&&(b.setter&&!this.xtag._skipSet&&(this.xtag._skipAttr=!0,b.setter.call(this,b.boolean?!1:void 0)),q(this,b,a,void 0,"removeAttribute")),delete this.xtag._skipAttr}};var l=e?e:b["extends"]?Object.create(z.createElement(b["extends"]).constructor).prototype:y.HTMLElement.prototype,m={prototype:Object.create(l,f.prototype)};b["extends"]&&(m["extends"]=b["extends"]);var n=z.register(d,m);return u(d),n}},ready:function(a,b){var d={tags:c(a),fn:b};d.tags.reduce(function(a,b){return S.tags[b]?a:((R[b]=R[b]||[]).push(d),void 0)},!0)&&b()},mixins:{},prefix:G,captureEvents:["focus","blur","scroll","underflow","overflow","overflowchanged","DOMMouseScroll"],customEvents:{overflow:l("over"),underflow:l("under"),animationstart:{attach:[G.dom+"AnimationStart"]},animationend:{attach:[G.dom+"AnimationEnd"]},transitionend:{attach:[G.dom+"TransitionEnd"]},move:{attach:["mousemove","touchmove"],condition:k},enter:{attach:["mouseover","touchenter"],condition:k},leave:{attach:["mouseout","touchleave"],condition:k},scrollwheel:{attach:["DOMMouseScroll","mousewheel"],condition:function(a){return a.delta=a.wheelDelta?a.wheelDelta/40:Math.round(-1*(a.detail/3.5)),!0}},tapstart:{observe:{mousedown:z,touchstart:z},condition:k},tapend:{observe:{mouseup:z,touchend:z},condition:k},tapmove:{attach:["tapstart","dragend","touchcancel"],condition:function(a,b){switch(a.type){case"move":return!0;case"dragover":var c=b.lastDrag||{};return b.lastDrag=a,c.pageX!=a.pageX&&c.pageY!=a.pageY||null;case"tapstart":b.move||(b.current=this,b.move=S.addEvents(this,{move:b.listener,dragover:b.listener}),b.tapend=S.addEvent(z,"tapend",b.listener));break;case"tapend":case"dragend":case"touchcancel":a.touches.length||(b.move&&S.removeEvents(b.current,b.move||{}),b.tapend&&S.removeEvent(z,b.tapend||{}),delete b.lastDrag,delete b.current,delete b.tapend,delete b.move)}}}},pseudos:{__mixin__:{},keypass:F,keyfail:F,delegate:{action:j},within:{action:j,onAdd:function(a){var b=a.source.condition;b&&(a.source.condition=function(c,d){return S.query(this,a.value).filter(function(a){return a==c.target||a.contains?a.contains(c.target):null})[0]?b.call(this,c,d):null})}},preventable:{action:function(a,b){return!b.defaultPrevented}}},clone:b,typeOf:a,toArray:c,wrap:function(a,b){return function(){var d=c(arguments),e=a.apply(this,d);return b.apply(this,d),e}},merge:function(b,c,d){if("string"==a(c))return f(b,c,d);for(var e=1,g=arguments.length;g>e;e++){var h=arguments[e];for(var i in h)f(b,i,h[i])}return b},uid:function(){return Math.random().toString(36).substr(2,10)},query:d,skipTransition:function(a,b){var c=G.js+"TransitionProperty";a.style[c]=a.style.transitionProperty="none";var d=b();return S.requestFrame(function(){S.requestFrame(function(){a.style[c]=a.style.transitionProperty="",d&&S.requestFrame(d)})})},requestFrame:function(){var a=y.requestAnimationFrame||y[G.lowercase+"RequestAnimationFrame"]||function(a){return y.setTimeout(a,20)};return function(b){return a(b)}}(),cancelFrame:function(){var a=y.cancelAnimationFrame||y[G.lowercase+"CancelAnimationFrame"]||y.clearTimeout;return function(b){return a(b)}}(),matchSelector:function(a,b){return H.call(a,b)},set:function(a,b,c){a[b]=c,window.CustomElements&&CustomElements.upgradeAll(a)},innerHTML:function(a,b){S.set(a,"innerHTML",b)},hasClass:function(a,b){return a.className.split(" ").indexOf(b.trim())>-1},addClass:function(a,b){var c=a.className.trim().split(" ");return b.trim().split(" ").forEach(function(a){~c.indexOf(a)||c.push(a)}),a.className=c.join(" ").trim(),a},removeClass:function(a,b){var c=b.trim().split(" ");return a.className=a.className.trim().split(" ").filter(function(a){return a&&!~c.indexOf(a)}).join(" "),a},toggleClass:function(a,b){return S[S.hasClass(a,b)?"removeClass":"addClass"].call(null,a,b)},queryChildren:function(a,b){var d=a.id,e=a.id=d||"x_"+S.uid(),f="#"+e+" > ";b=f+(b+"").replace(",",","+f,"g");var g=a.parentNode.querySelectorAll(b);return d||a.removeAttribute("id"),c(g)},createFragment:function(a){var b=z.createDocumentFragment();if(a){for(var d=b.appendChild(z.createElement("div")),e=c(a.nodeName?arguments:!(d.innerHTML=a)||d.children),f=e.length,g=0;f>g;)b.insertBefore(e[g++],d);b.removeChild(d)}return b},manipulate:function(a,b){var c=a.nextSibling,d=a.parentNode,e=z.createDocumentFragment(),f=b.call(e.appendChild(a),e)||a;c?d.insertBefore(f,c):d.appendChild(f)},applyPseudos:function(a,b,d,e){var f=b,g={};if(a.match(":"))for(var h=a.match(C),i=h.length;--i;)h[i].replace(D,function(b,j,k){if(!S.pseudos[j])throw"pseudo not found: "+j+" "+h;var l=g[i]=Object.create(S.pseudos[j]);l.key=a,l.name=j,l.value=k,l.arguments=(k||"").split(","),l.action=l.action||B,l.source=e;var m=f;f=function(){var b=c(arguments),d={key:a,name:j,value:k,source:e,arguments:l.arguments,listener:m},f=l.action.apply(this,[d].concat(b));return null===f||f===!1?f:d.listener.apply(this,b)},d&&l.onAdd&&(d.nodeName?l.onAdd.call(d,l):d.push(l))});for(var j in g)g[j].onCompiled&&(f=g[j].onCompiled(f,g[j])||f);return f},removePseudos:function(a,b){b.forEach(function(b){b.onRemove&&b.onRemove.call(a,b)})},parseEvent:function(a,b){var d=a.split(":"),e=d.shift(),f=S.customEvents[e],g=S.merge({type:e,stack:A,condition:B,attach:[],_attach:[],pseudos:"",_pseudos:[],onAdd:A,onRemove:A},f||{});g.attach=c(g.base||g.attach),g.chain=e+(g.pseudos.length?":"+g.pseudos:"")+(d.length?":"+d.join(":"):"");var h=g.condition;g.condition=function(a){return a.touches,a.targetTouches,h.apply(this,c(arguments))};var i=S.applyPseudos(g.chain,b,g._pseudos,g);if(g.stack=function(a){a.touches,a.targetTouches;var b=a.detail||{};return b.__stack__?b.__stack__==i?(a.stopPropagation(),a.cancelBubble=!0,i.apply(this,c(arguments))):void 0:i.apply(this,c(arguments))},g.listener=function(a){var b=c(arguments),d=g.condition.apply(this,b.concat([g]));return d?a.type==e?g.stack.apply(this,b):(S.fireEvent(a.target,e,{baseEvent:a,detail:d!==!0&&(d.__stack__=i)?d:{__stack__:i}}),void 0):d},g.attach.forEach(function(a){g._attach.push(S.parseEvent(a,g.listener))}),f&&f.observe&&!f.__observing__){f.observer=function(a){var b=g.condition.apply(this,c(arguments).concat([f]));return b?(S.fireEvent(a.target,e,{baseEvent:a,detail:b!==!0?b:{}}),void 0):b};for(var j in f.observe)S.addEvent(f.observe[j]||document,j,f.observer,!0);f.__observing__=!0}return g},addEvent:function(a,b,c,d){var e="function"==typeof c?S.parseEvent(b,c):c;return e._pseudos.forEach(function(b){b.onAdd.call(a,b)}),e._attach.forEach(function(b){S.addEvent(a,b.type,b)}),e.onAdd.call(a,e,e.listener),a.addEventListener(e.type,e.stack,d||S.captureEvents.indexOf(e.type)>-1),e},addEvents:function(a,b){var c={};for(var d in b)c[d]=S.addEvent(a,d,b[d]);return c},removeEvent:function(a,b,c){c=c||b,c.onRemove.call(a,c,c.listener),S.removePseudos(a,c._pseudos),c._attach.forEach(function(b){S.removeEvent(a,b)}),a.removeEventListener(c.type,c.stack)},removeEvents:function(a,b){for(var c in b)S.removeEvent(a,b[c])},fireEvent:function(a,b,c,d){var e=z.createEvent("CustomEvent");c=c||{},d&&console.warn("fireEvent has been modified"),e.initCustomEvent(b,c.bubbles!==!1,c.cancelable!==!1,c.detail),c.baseEvent&&n(e,c.baseEvent);try{a.dispatchEvent(e)}catch(f){console.warn("This error may have been caused by a change in the fireEvent method",f)}},addObserver:function(a,b,c){a._records||(a._records={inserted:[],removed:[]},I?(a._observer=new I(function(b){e(a,b)}),a._observer.observe(a,{subtree:!0,childList:!0,attributes:!1,characterData:!1})):["Inserted","Removed"].forEach(function(b){a.addEventListener("DOMNode"+b,function(c){c._mutation=!0,a._records[b.toLowerCase()].forEach(function(a){a(c.target,c)})},!1)})),-1==a._records[b].indexOf(c)&&a._records[b].push(c)},removeObserver:function(a,b,c){var d=a._records;d&&c?d[b].splice(d[b].indexOf(c),1):d[b]=[]}},T=!1,U=null;z.addEventListener("mousedown",function(a){T=!0,U=a.target},!0),z.addEventListener("mouseup",function(){T=!1,U=null},!0),z.addEventListener("dragend",function(){T=!1,U=null},!0);var V={touches:{configurable:!0,get:function(){return this.__touches__||(this.identifier=0)||(this.__touches__=T?[this]:[])}},targetTouches:{configurable:!0,get:function(){return this.__targetTouches__||(this.__targetTouches__=T&&this.currentTarget&&(this.currentTarget==U||this.currentTarget.contains&&this.currentTarget.contains(U))?(this.identifier=0)||[this]:[])}},changedTouches:{configurable:!0,get:function(){return this.__changedTouches__||(this.identifier=0)||(this.__changedTouches__=[this])}}};for(Q in V)UIEvent.prototype[Q]=V[Q],Object.defineProperty(UIEvent.prototype,Q,V[Q]);S.customEvents.tap={observe:{mousedown:document,touchstart:document},gesture:{tolerance:8},condition:function(a,b){var c=a.target;switch(a.type){case"touchstart":return c.__tap__&&c.__tap__.click&&w(c,b),v(c,b,a),void 0;case"mousedown":return c.__tap__||v(c,b,a),void 0;case"scroll":case"touchcancel":return w(this,b),void 0;case"touchmove":case"touchend":return this.__tap__&&!x(this,b,a)?(w(this,b),void 0):"touchend"==a.type||null;case"click":return w(this,b),!0}}},y.xtag=S,"function"==typeof define&&define.amd&&define(S),z.addEventListener("WebComponentsReady",function(){S.fireEvent(z.body,"DOMComponentsLoaded")})}(),function(){xtag.register("x-appbar",{lifecycle:{created:function(){var a=xtag.queryChildren(this,"header")[0];a||(a=document.createElement("header"),this.appendChild(a)),this.xtag.data.header=a,this.subheading=this.subheading}},accessors:{heading:{attribute:{},get:function(){return this.xtag.data.header.innerHTML},set:function(a){this.xtag.data.header.innerHTML=a}},subheading:{attribute:{},get:function(){return this.getAttribute("subheading")||""},set:function(a){this.xtag.data.header.setAttribute("subheading",a)}}}})}(),function(){function a(a){var b=new Date(a.valueOf());return b.setHours(0),b.setMinutes(0),b.setSeconds(0),b.setMilliseconds(0),b}function b(a,b){a.appendChild(b)}function c(a){return parseInt(a,10)}function d(a){var b=c(a);return b===a&&!isNaN(b)&&b>=0&&6>=b}function e(a){return a instanceof Date&&!!a.getTime&&!isNaN(a.getTime())}function f(a){return a&&a.isArray?a.isArray():"[object Array]"===Object.prototype.toString.call(a)}function g(a){var b=a.split("."),c=b.shift(),d=document.createElement(c);return d[W]=b.join(" "),d}function h(){var a=document.documentElement,b={left:a.scrollLeft||document.body.scrollLeft||0,top:a.scrollTop||document.body.scrollTop||0,width:a.clientWidth,height:a.clientHeight};return b.right=b.left+b.width,b.bottom=b.top+b.height,b}function i(a){var b=a.getBoundingClientRect(),c=h(),d=c.left,e=c.top;return{left:b.left+d,right:b.right+d,top:b.top+e,bottom:b.bottom+e,width:b.width,height:b.height}}function j(a,b){xtag.addClass(a,b)}function k(a,b){xtag.removeClass(a,b)}function l(a,b){return xtag.hasClass(a,b)}function m(a){return a.getFullYear()}function n(a){return a.getMonth()
-}function o(a){return a.getDate()}function p(a){return a.getDay()}function q(a,b){var c=a.toString(),d=new Array(b).join("0");return(d+c).substr(-b)}function r(a){return[q(m(a),4),q(n(a)+1,2),q(o(a),2)].join("-")}function s(b){if(e(b))return b;var c=X.exec(b);return c?a(new Date(c[1],c[2]-1,c[3])):null}function t(b){if(e(b))return b;var c=s(b);if(c)return c;var d=Date.parse(b);return isNaN(d)?null:a(new Date(d))}function u(a){var b;if(f(a))b=a.slice(0);else{if(e(a))return[a];if(!("string"==typeof a&&a.length>0))return null;try{if(b=JSON.parse(a),!f(b))return null}catch(c){var d=t(a);return d?[d]:null}}for(var g=0;g<b.length;g++){var h=b[g];if(!e(h))if("string"==typeof h){var i=t(h);if(!i)return null;b[g]=i}else{if(!f(h)||2!==h.length)return null;var j=t(h[0]);if(!j)return null;var k=t(h[1]);if(!k)return null;if(j.valueOf()>k.valueOf())return null;b[g]=[j,k]}}return b}function v(b,c,d,e){return void 0===c&&(c=m(b)),void 0===d&&(d=n(b)),void 0===e&&(e=o(b)),a(new Date(c,d,e))}function w(a,b){return b||(b=(new Date).getFullYear()),new Date(b,a+1,0).getDate()}function x(a,b,c,d){return v(a,m(a)+b,n(a)+c,o(a)+d)}function y(a){var b=a.getDate(),c=w(a.getMonth()+1,a.getFullYear());return b>c&&(b=c),new Date(a.getFullYear(),a.getMonth()+1,b)}function z(a){var b=a.getDate(),c=w(a.getMonth()-1,a.getFullYear());return b>c&&(b=c),new Date(a.getFullYear(),a.getMonth()-1,b)}function A(a,b){b=c(b),d(b)||(b=0);for(var e=0;7>e;e++){if(p(a)===b)return a;a=F(a)}throw"unable to find week start"}function B(a,b){b=c(b),d(b)||(b=6);for(var e=0;7>e;e++){if(p(a)===b)return a;a=E(a)}throw"unable to find week end"}function C(b){return b=new Date(b.valueOf()),b.setDate(1),a(b)}function D(a){return F(x(a,0,1,0))}function E(a){return x(a,0,0,1)}function F(a){return x(a,0,0,-1)}function G(a,b){if(b){b=void 0===b.length?[b]:b;var c=!1;return b.forEach(function(b){2===b.length?H(b[0],b[1],a)&&(c=!0):r(b)===r(a)&&(c=!0)}),c}}function H(a,b,c){return r(a)<=r(c)&&r(c)<=r(b)}function I(a){a.sort(function(a,b){var c=e(a)?a:a[0],d=e(b)?b:b[0];return c.valueOf()-d.valueOf()})}function J(a){var c=g("div.controls"),d=g("span.prev"),e=g("span.next");return d.innerHTML=a.prev,e.innerHTML=a.next,b(c,d),b(c,e),c}function K(a){var b=this;a=a||{},b._span=a.span||1,b._multiple=a.multiple||!1,b._viewDate=b._sanitizeViewDate(a.view,a.chosen),b._chosenRanges=b._sanitizeChosenRanges(a.chosen,a.view),b._firstWeekdayNum=a.firstWeekdayNum||0,b._el=g("div.calendar"),b._labels=R(),b._customRenderFn=null,b._renderRecursionFlag=!1,b.render(!0)}function L(a){a=a.slice(0),I(a);for(var b=[],c=0;c<a.length;c++){var d,f,g,h,i=a[c],j=b.length>0?b[b.length-1]:null;if(e(i)?d=f=i:(d=i[0],f=i[1]),i=G(d,f)?d:[d,f],e(j))g=h=j;else{if(!j){b.push(i);continue}g=j[0],h=j[1]}if(G(d,[j])||G(F(d),[j])){var k=g.valueOf()<d.valueOf()?g:d,l=h.valueOf()>f.valueOf()?h:f,m=G(k,l)?k:[k,l];b[b.length-1]=m}else b.push(i)}return b}function M(a,b){var c,d=b.getAttribute("data-date"),e=t(d);l(b,V)?(a.xtag.dragType=U,c="datetoggleoff"):(a.xtag.dragType=T,c="datetoggleon"),a.xtag.dragStartEl=b,a.xtag.dragAllowTap=!0,a.noToggle||xtag.fireEvent(a,c,{detail:{date:e,iso:d}}),a.setAttribute("active",!0),b.setAttribute("active",!0)}function N(a,b){var c=b.getAttribute("data-date"),d=t(c);b!==a.xtag.dragStartEl&&(a.xtag.dragAllowTap=!1),a.noToggle||(a.xtag.dragType!==T||l(b,V)?a.xtag.dragType===U&&l(b,V)&&xtag.fireEvent(a,"datetoggleoff",{detail:{date:d,iso:c}}):xtag.fireEvent(a,"datetoggleon",{detail:{date:d,iso:c}})),a.xtag.dragType&&b.setAttribute("active",!0)}function O(){for(var a=xtag.query(document,"x-calendar"),b=0;b<a.length;b++){var c=a[b];c.xtag.dragType=null,c.xtag.dragStartEl=null,c.xtag.dragAllowTap=!1,c.removeAttribute("active")}for(var d=xtag.query(document,"x-calendar .day[active]"),e=0;e<d.length;e++)d[e].removeAttribute("active")}function P(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom}var Q=0,R=function(){return{prev:"←",next:"→",months:["January","February","March","April","May","June","July","August","September","October","November","December"],weekdays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}},S=a(new Date),T="add",U="remove",V="chosen",W="className",X=/(\d{4})[^\d]?(\d{2})[^\d]?(\d{2})/,Y=K.prototype;Y.makeMonth=function(a){if(!e(a))throw"Invalid view date!";var c=this.firstWeekdayNum,d=this.chosen,f=this.labels,h=n(a),i=A(C(a),c),k=g("div.month"),l=g("div.month-label");l.textContent=f.months[h]+" "+m(a),b(k,l);for(var p=g("div.weekday-labels"),q=0;7>q;q++){var s=(c+q)%7,t=g("span.weekday-label");t.textContent=f.weekdays[s],b(p,t)}b(k,p);var u=g("div.week"),v=i,w=42;for(q=0;w>q;q++){var x=g("span.day");if(x.setAttribute("data-date",r(v)),x.textContent=o(v),n(v)!==h&&j(x,"badmonth"),G(v,d)&&j(x,V),G(v,S)&&j(x,"today"),b(u,x),v=E(v),0===(q+1)%7){b(k,u),u=g("div.week");var y=n(v)>h||n(v)<h&&m(v)>m(i);if(y)break}}return k},Y._sanitizeViewDate=function(a,b){b=void 0===b?this.chosen:b;var c;if(e(a))c=a;else if(e(b))c=b;else if(f(b)&&b.length>0){var d=b[0];c=e(d)?d:d[0]}else c=S;return c},Y._sanitizeChosenRanges=function(a,b){b=void 0===b?this.view:b;var c;c=e(a)?[a]:f(a)?a:null!==a&&void 0!==a&&b?[b]:[];var d=L(c);if(!this.multiple&&d.length>0){var g=d[0];return e(g)?[g]:[g[0]]}return d},Y.addDate=function(a,b){e(a)&&(b?(this.chosen.push(a),this.chosen=this.chosen):this.chosen=[a])},Y.removeDate=function(a){if(e(a))for(var b=this.chosen.slice(0),c=0;c<b.length;c++){var d=b[c];if(G(a,[d])){if(b.splice(c,1),f(d)){var g=d[0],h=d[1],i=F(a),j=E(a);G(i,[d])&&b.push([g,i]),G(j,[d])&&b.push([j,h])}this.chosen=L(b);break}}},Y.hasChosenDate=function(a){return G(a,this._chosenRanges)},Y.hasVisibleDate=function(a,b){var c=b?this.firstVisibleMonth:this.firstVisibleDate,d=b?D(this.lastVisibleMonth):this.lastVisibleDate;return G(a,[[c,d]])},Y.render=function(a){var c,d=this._span;if(a){var e,f=xtag.query(this.el,".day");for(c=0;c<f.length;c++)if(e=f[c],e.hasAttribute("data-date")){var g=e.getAttribute("data-date"),h=s(g);h&&(G(h,this._chosenRanges)?j(e,V):k(e,V),G(h,[S])?j(e,"today"):k(e,"today"))}}else{this.el.innerHTML="";var i=this.firstVisibleMonth;for(c=0;d>c;c++)b(this.el,this.makeMonth(i)),i=x(i,0,1,0)}this._callCustomRenderer()},Y._callCustomRenderer=function(){if(this._customRenderFn){if(this._renderRecursionFlag)throw"Error: customRenderFn causes recursive loop of rendering calendar; make sure your custom rendering function doesn't modify attributes of the x-calendar that would require a re-render!";for(var a=xtag.query(this.el,".day"),b=0;b<a.length;b++){var c=a[b],d=c.getAttribute("data-date"),e=s(d);this._renderRecursionFlag=!0,this._customRenderFn(c,e?e:null,d),this._renderRecursionFlag=!1}}},Object.defineProperties(Y,{el:{get:function(){return this._el}},multiple:{get:function(){return this._multiple},set:function(a){this._multiple=a,this.chosen=this._sanitizeChosenRanges(this.chosen),this.render(!0)}},span:{get:function(){return this._span},set:function(a){var b=c(a);this._span=!isNaN(b)&&b>=0?b:0,this.render(!1)}},view:{attribute:{},get:function(){return this._viewDate},set:function(a){var b=this._sanitizeViewDate(a),c=this._viewDate;this._viewDate=b,this.render(n(c)===n(b)&&m(c)===m(b))}},chosen:{get:function(){return this._chosenRanges},set:function(a){this._chosenRanges=this._sanitizeChosenRanges(a),this.render(!0)}},firstWeekdayNum:{get:function(){return this._firstWeekdayNum},set:function(a){a=c(a),d(a)||(a=0),this._firstWeekdayNum=a,this.render(!1)}},lastWeekdayNum:{get:function(){return(this._firstWeekdayNum+6)%7}},customRenderFn:{get:function(){return this._customRenderFn},set:function(a){this._customRenderFn=a,this.render(!0)}},chosenString:{get:function(){if(this.multiple){for(var a=this.chosen.slice(0),b=0;b<a.length;b++){var c=a[b];a[b]=e(c)?r(c):[r(c[0]),r(c[1])]}return JSON.stringify(a)}return this.chosen.length>0?r(this.chosen[0]):""}},firstVisibleMonth:{get:function(){return C(this.view)}},lastVisibleMonth:{get:function(){return x(this.firstVisibleMonth,0,Math.max(0,this.span-1),0)}},firstVisibleDate:{get:function(){return A(this.firstVisibleMonth,this.firstWeekdayNum)}},lastVisibleDate:{get:function(){return B(D(this.lastVisibleMonth),this.lastWeekdayNum)}},labels:{get:function(){return this._labels},set:function(a){var b=this.labels;for(var c in b)if(c in a){var d=this._labels[c],e=a[c];if(f(d)){if(!f(e)||d.length!==e.length)throw"invalid label given for '"+c+"': expected array of "+d.length+" labels, got "+JSON.stringify(e);e=e.slice(0);for(var g=0;g<e.length;g++)e[g]=e[g].toString?e[g].toString():String(e[g])}else e=String(e);b[c]=e}this.render(!1)}}});var Z=null,$=null;xtag.register("x-calendar",{lifecycle:{created:function(){this.innerHTML="";var a=this.getAttribute("chosen");this.xtag.calObj=new K({span:this.getAttribute("span"),view:t(this.getAttribute("view")),chosen:u(a),multiple:this.hasAttribute("multiple"),firstWeekdayNum:this.getAttribute("first-weekday-num")}),b(this,this.xtag.calObj.el),this.xtag.calControls=null,this.xtag.dragType=null,this.xtag.dragStartEl=null,this.xtag.dragAllowTap=!1},inserted:function(){Z||(Z=xtag.addEvent(document,"mouseup",O)),$||($=xtag.addEvent(document,"touchend",O)),this.render(!1)},removed:function(){0===xtag.query(document,"x-calendar").length&&(Z&&(xtag.removeEvent(document,"mouseup",Z),Z=null),$&&(xtag.removeEvent(document,"touchend",$),$=null))}},events:{"tap:delegate(.next)":function(a){var b=a.currentTarget;b.nextMonth(),xtag.fireEvent(b,"nextmonth")},"tap:delegate(.prev)":function(a){var b=a.currentTarget;b.prevMonth(),xtag.fireEvent(b,"prevmonth")},"tapstart:delegate(.day)":function(a){(a.touches||!a.button||a.button===Q)&&(a.preventDefault(),a.baseEvent&&a.baseEvent.preventDefault(),M(a.currentTarget,this))},touchmove:function(a){if(a.touches&&a.touches.length>0){var b=a.currentTarget;if(b.xtag.dragType)for(var c=a.touches[0],d=xtag.query(b,".day"),e=0;e<d.length;e++){var f=d[e];P(c.pageX,c.pageY,i(f))?N(b,f):f.removeAttribute("active")}}},"mouseover:delegate(.day)":function(a){var b=a.currentTarget,c=this;N(b,c)},"mouseout:delegate(.day)":function(){var a=this;a.removeAttribute("active")},"tapend:delegate(.day)":function(a){var b=a.currentTarget;if(b.xtag.dragAllowTap){var c=this,d=c.getAttribute("data-date"),e=t(d);xtag.fireEvent(b,"datetap",{detail:{date:e,iso:d}})}},datetoggleon:function(a){var b=this;b.toggleDateOn(a.detail.date,b.multiple)},datetoggleoff:function(a){var b=this;b.toggleDateOff(a.detail.date)}},accessors:{controls:{attribute:{"boolean":!0},set:function(a){a&&!this.xtag.calControls&&(this.xtag.calControls=J(this.xtag.calObj.labels),b(this,this.xtag.calControls))}},multiple:{attribute:{"boolean":!0},get:function(){return this.xtag.calObj.multiple},set:function(a){this.xtag.calObj.multiple=a,this.chosen=this.chosen}},span:{attribute:{},get:function(){return this.xtag.calObj.span},set:function(a){this.xtag.calObj.span=a}},view:{attribute:{},get:function(){return this.xtag.calObj.view},set:function(a){var b=t(a);b&&(this.xtag.calObj.view=b)}},chosen:{attribute:{skip:!0},get:function(){var a=this.xtag.calObj.chosen;if(this.multiple)return this.xtag.calObj.chosen;if(a.length>0){var b=a[0];return e(b)?b:b[0]}return null},set:function(a){var b=this.multiple?u(a):t(a);this.xtag.calObj.chosen=b?b:null,this.xtag.calObj.chosenString?this.setAttribute("chosen",this.xtag.calObj.chosenString):this.removeAttribute("chosen")}},firstWeekdayNum:{attribute:{name:"first-weekday-num"},set:function(a){this.xtag.calObj.firstWeekdayNum=a}},noToggle:{attribute:{"boolean":!0,name:"notoggle"},set:function(a){a&&(this.chosen=null)}},firstVisibleMonth:{get:function(){return this.xtag.calObj.firstVisibleMonth}},lastVisibleMonth:{get:function(){return this.xtag.calObj.lastVisibleMonth}},firstVisibleDate:{get:function(){return this.xtag.calObj.firstVisibleDate}},lastVisibleDate:{get:function(){return this.xtag.calObj.lastVisibleDate}},customRenderFn:{get:function(){return this.xtag.calObj.customRenderFn},set:function(a){this.xtag.calObj.customRenderFn=a}},labels:{get:function(){return JSON.parse(JSON.stringify(this.xtag.calObj.labels))},set:function(a){this.xtag.calObj.labels=a;var b=this.xtag.calObj.labels,c=this.querySelector(".controls > .prev");c&&(c.textContent=b.prev);var d=this.querySelector(".controls > .next");d&&(d.textContent=b.next)}}},methods:{render:function(a){this.xtag.calObj.render(a)},prevMonth:function(){var a=this.xtag.calObj;a.view=z(a.view)},nextMonth:function(){var a=this.xtag.calObj;a.view=y(a.view)},toggleDateOn:function(a,b){this.xtag.calObj.addDate(a,b),this.chosen=this.chosen},toggleDateOff:function(a){this.xtag.calObj.removeDate(a),this.chosen=this.chosen},toggleDate:function(a,b){this.xtag.calObj.hasChosenDate(a)?this.toggleDateOff(a):this.toggleDateOn(a,b)},hasVisibleDate:function(a,b){return this.xtag.calObj.hasVisibleDate(a,b)}}})}(),function(){function a(a,b){this._historyStack=[],this.currIndex=-1,this._itemCap=void 0,this.itemCap=b,this._validatorFn=a?a:function(){return!0}}function b(a){var b=window.getComputedStyle(a),c=xtag.prefix.js+"TransitionDuration";return b.transitionDuration?b.transitionDuration:b[c]}function c(a){if("string"!=typeof a)return 0;var b=/^(\d*\.?\d+)(m?s)$/,c=a.toLowerCase().match(b);if(c){var d=c[1],e=c[2],f=parseFloat(d);if(isNaN(f))throw"value error";if("s"===e)return 1e3*f;if("ms"===e)return f;throw"unit error"}return 0}function d(a,b){return(a%b+b)%b}function e(a){return xtag.queryChildren(a,"x-card")}function f(a,b){var c=e(a);return isNaN(parseInt(b,10))||0>b||b>=c.length?null:c[b]}function g(a,b){var c=e(a);return c.indexOf(b)}function h(a,d,f,h,i){a.xtag._selectedCard=f;var j=new Date;a.xtag._lastAnimTimestamp=j;var m=function(){j===a.xtag._lastAnimTimestamp&&(k(a),xtag.fireEvent(a,"shuffleend",{detail:{oldCard:d,newCard:f}}))};if(f===d)return m(),void 0;var n=!1,o=!1,p=!1,q=function(){n&&o&&(e(a).forEach(function(a){a.removeAttribute("selected"),a.removeAttribute("leaving")}),d.setAttribute("leaving",!0),f.setAttribute("selected",!0),a.xtag._selectedCard=f,a.selectedIndex=g(a,f),i&&(d.setAttribute("reverse",!0),f.setAttribute("reverse",!0)),xtag.fireEvent(a,"shufflestart",{detail:{oldCard:d,newCard:f}}))},r=function(){p||n&&o&&s()},s=function(){p=!0;var a=!1,e=!1,g=!1,i=function(b){g||(b.target===d?(a=!0,d.removeEventListener("transitionend",i)):b.target===f&&(e=!0,f.removeEventListener("transitionend",i)),a&&e&&(g=!0,m()))};d.addEventListener("transitionend",i),f.addEventListener("transitionend",i);var j=c(b(d)),k=c(b(f)),n=Math.max(j,k),o=1.15,q="none"===h.toLowerCase()?0:Math.ceil(n*o);0===q?(g=!0,d.removeEventListener("transitionend",i),f.removeEventListener("transitionend",i),d.removeAttribute(l),f.removeAttribute(l),m()):(d.removeAttribute(l),f.removeAttribute(l),window.setTimeout(function(){g||(g=!0,d.removeEventListener("transitionend",i),f.removeEventListener("transitionend",i),m())},q))};xtag.skipTransition(d,function(){return d.setAttribute("card-anim-type",h),d.setAttribute(l,!0),n=!0,q(),r},this),xtag.skipTransition(f,function(){return f.setAttribute("card-anim-type",h),f.setAttribute(l,!0),o=!0,q(),r},this)}function i(a,b,c,d,f){var g=a.xtag._selectedCard;if(g===b){var i={detail:{oldCard:g,newCard:b}};return xtag.fireEvent(a,"shufflestart",i),xtag.fireEvent(a,"shuffleend",i),void 0}k(a),void 0===c&&(c="none");var j;switch(d){case"forward":j=!1;break;case"reverse":j=!0;break;default:g||(j=!1);var l=e(a);j=l.indexOf(b)<l.indexOf(g)?!0:!1}b.hasAttribute("transition-override")&&(c=b.getAttribute("transition-override")),f||a.xtag.history.pushState(b),h(a,g,b,c,j)}function j(a,b,c,d){var e=f(a,b);if(!e)throw"no card at index "+b;i(a,e,c,d)}function k(a){if(a.xtag._initialized){var b=e(a),c=a.xtag._selectedCard;c&&c.parentNode===a||(c=b.length>0?a.xtag.history&&a.xtag.history.numStates>0?a.xtag.history.currState:b[0]:null),b.forEach(function(a){a.removeAttribute("leaving"),a.removeAttribute(l),a.removeAttribute("card-anim-type"),a.removeAttribute("reverse"),a!==c?a.removeAttribute("selected"):a.setAttribute("selected",!0)}),a.xtag._selectedCard=c,a.selectedIndex=g(a,c)}}var l="_before-animation",m=a.prototype;m.pushState=function(a){if(this.canRedo&&this._historyStack.splice(this.currIndex+1,this._historyStack.length-(this.currIndex+1)),this._historyStack.push(a),this.currIndex=this._historyStack.length-1,this.sanitizeStack(),"none"!==this._itemCap&&this._historyStack.length>this._itemCap){var b=this._historyStack.length;this._historyStack.splice(0,b-this._itemCap),this.currIndex=this._historyStack.length-1}},m.sanitizeStack=function(){for(var a,b=this._validatorFn,c=0;c<this._historyStack.length;){var d=this._historyStack[c];d!==a&&b(d)?(a=d,c++):(this._historyStack.splice(c,1),c<=this.currIndex&&this.currIndex--)}},m.forwards=function(){this.canRedo&&this.currIndex++,this.sanitizeStack()},m.backwards=function(){this.canUndo&&this.currIndex--,this.sanitizeStack()},Object.defineProperties(m,{DEFAULT_CAP:{value:10},itemCap:{get:function(){return this._itemCap},set:function(a){if(void 0===a)this._itemCap=this.DEFAULT_CAP;else if("none"===a)this._itemCap="none";else{var b=parseInt(a,10);if(isNaN(a)||0>=a)throw"attempted to set invalid item cap: "+a;this._itemCap=b}}},canUndo:{get:function(){return this.currIndex>0}},canRedo:{get:function(){return this.currIndex<this._historyStack.length-1}},numStates:{get:function(){return this._historyStack.length}},currState:{get:function(){var a=this.currIndex;return a>=0&&a<this._historyStack.length?this._historyStack[a]:null}}}),xtag.register("x-deck",{lifecycle:{created:function(){var b=this;b.xtag._initialized=!0;var c=function(a){return a.parentNode===b};b.xtag.history=new a(c,a.DEFAULT_CAP),b.xtag._selectedCard=b.xtag._selectedCard?b.xtag._selectedCard:null,b.xtag._lastAnimTimestamp=null,b.xtag.transitionType="scrollLeft";var d=b.getCardAt(b.getAttribute("selected-index"));d&&(b.xtag._selectedCard=d),k(b);var e=b.xtag._selectedCard;e&&b.xtag.history.pushState(e)}},events:{"show:delegate(x-card)":function(){var a=this;a.show()}},accessors:{transitionType:{attribute:{name:"transition-type"},get:function(){return this.xtag.transitionType},set:function(a){this.xtag.transitionType=a}},selectedIndex:{attribute:{skip:!0,name:"selected-index"},get:function(){return g(this,this.xtag._selectedCard)},set:function(a){this.selectedIndex!==a&&j(this,a,"none"),this.setAttribute("selected-index",a)}},historyCap:{attribute:{name:"history-cap"},get:function(){return this.xtag.history.itemCap},set:function(a){this.xtag.history.itemCap=a}},numCards:{get:function(){return this.getAllCards().length}},currHistorySize:{get:function(){return this.xtag.history.numStates}},currHistoryIndex:{get:function(){return this.xtag.history.currIndex}},cards:{get:function(){return this.getAllCards()}},selectedCard:{get:function(){return this.getSelectedCard()}}},methods:{shuffleTo:function(a,b){var c=f(this,a);if(!c)throw"invalid shuffleTo index "+a;var d=this.xtag.transitionType;j(this,a,d,b)},shuffleNext:function(a){a=a?a:"auto";var b=e(this),c=this.xtag._selectedCard,f=b.indexOf(c);f>-1&&this.shuffleTo(d(f+1,b.length),a)},shufflePrev:function(a){a=a?a:"auto";var b=e(this),c=this.xtag._selectedCard,f=b.indexOf(c);f>-1&&this.shuffleTo(d(f-1,b.length),a)},getAllCards:function(){return e(this)},getSelectedCard:function(){return this.xtag._selectedCard},getCardIndex:function(a){return g(this,a)},getCardAt:function(a){return f(this,a)},historyBack:function(a){var b=this.xtag.history;if(b.canUndo){b.backwards();var c=b.currState;c&&i(this,c,this.transitionType,a,!0)}},historyForward:function(a){var b=this.xtag.history;if(b.canRedo){b.forwards();var c=b.currState;c&&i(this,c,this.transitionType,a,!0)}}}}),xtag.register("x-card",{lifecycle:{inserted:function(){var a=this,b=a.parentNode;b&&"x-deck"===b.tagName.toLowerCase()&&(k(b),a.xtag.parentDeck=b,xtag.fireEvent(b,"cardadd",{detail:{card:a}}))},created:function(){var a=this.parentNode;a&&"x-deck"===a.tagName.toLowerCase()&&(this.xtag.parentDeck=a)},removed:function(){var a=this;if(a.xtag.parentDeck){var b=a.xtag.parentDeck;b.xtag.history.sanitizeStack(),k(b),xtag.fireEvent(b,"cardremove",{detail:{card:a}})}}},accessors:{transitionOverride:{attribute:{name:"transition-override"}}},methods:{show:function(){var a=this.parentNode;a===this.xtag.parentDeck&&a.shuffleTo(a.getCardIndex(this))}}})}(),function(){function a(a){var b=a.currentTarget;this.parentNode==b&&(this.parentNode.firstElementChild==this?b.flipped=!1:this.parentNode.lastElementChild==this&&(b.flipped=!0))}xtag.register("x-flipbox",{lifecycle:{created:function(){this.firstElementChild&&xtag.skipTransition(this.firstElementChild,function(){}),this.lastElementChild&&xtag.skipTransition(this.lastElementChild,function(){}),this.hasAttribute("direction")||(this.xtag._direction="right")}},events:{"transitionend:delegate(x-flipbox > *:first-child)":function(a){var b=a.currentTarget;this.parentNode==b&&xtag.fireEvent(b,"flipend")},"reveal:delegate(x-flipbox > *)":a},accessors:{direction:{attribute:{},get:function(){return this.xtag._direction},set:function(a){var b=this;xtag.skipTransition(this.firstElementChild,function(){return b.setAttribute("_anim-direction",a),function(){}}),xtag.skipTransition(this.lastElementChild,function(){b.setAttribute("_anim-direction",a)}),this.xtag._direction=a}},flipped:{attribute:{"boolean":!0}}},methods:{toggle:function(){this.flipped=!this.flipped},showFront:function(){this.flipped=!1},showBack:function(){this.flipped=!0}}})}(),function(){function a(a){var b=a.firstElementChild;if(!b)return{header:null,section:null,footer:null};var c=b.nextElementSibling;return{header:"HEADER"==b.nodeName?b:null,section:"SECTION"==b.nodeName?b:c&&"SECTION"==c.nodeName?c:null,footer:"FOOTER"==a.lastElementChild.nodeName?a.lastElementChild:null}}function b(a,b){var c=b.__layoutScroll__=b.__layoutScroll__||Object.defineProperty(b,"__layoutScroll__",{value:{last:b.scrollTop}}).__layoutScroll__,d=b.scrollTop,e=a.scrollBuffer;return c.max=c.max||Math.max(d+e,e),c.min=c.min||Math.max(d-e,e),c}function c(a,b){a.setAttribute("content-maximizing",null),b.section&&(b.header&&(b.section.style.marginTop="-"+b.header.getBoundingClientRect().height+"px"),b.footer&&(b.section.style.marginBottom="-"+b.footer.getBoundingClientRect().height+"px"))}function d(a,b){a.removeAttribute("content-maximized"),a.removeAttribute("content-maximizing"),b.section&&(b.section.style.marginTop="",b.section.style.marginBottom="")}function e(e){if(!e.currentTarget.hasAttribute("content-maximizing")){var f=e.target,g=e.currentTarget;if(this.scrollhide&&(f.parentNode==g||xtag.matchSelector(f,g.scrollTarget))){var h=f.scrollTop,i=g.scrollBuffer,j=a(g),k=b(g,f);h>k.last?k.min=Math.max(h-i,i):h<k.last&&(k.max=Math.max(h+i,i)),g.maxcontent||(h>k.max&&!g.hasAttribute("content-maximized")?c(g,j):h<k.min&&d(g,j)),k.last=h}}}xtag.register("x-layout",{lifecycle:{created:function(){}},events:{scroll:e,transitionend:function(b){var c=a(this);!this.hasAttribute("content-maximizing")||b.target!=c.header&&b.target!=c.section&&b.target!=c.footer||(this.setAttribute("content-maximized",null),this.removeAttribute("content-maximizing"))},"tap:delegate(section)":function(b){var e=b.currentTarget;if(e.taphide&&this.parentNode==e){var f=a(e);e.hasAttribute("content-maximizing")||e.hasAttribute("content-maximized")?e.maxcontent||d(e,f):c(e,f)}},"mouseover:delegate(section)":function(b){var d=b.currentTarget;!d.hoverhide||this.parentNode!=d||d.hasAttribute("content-maximized")||d.hasAttribute("content-maximizing")||b.relatedTarget&&!this.contains(b.target)||c(d,a(d))},"mouseout:delegate(section)":function(b){var c=b.currentTarget;!c.hoverhide||this.parentNode!=c||!c.hasAttribute("content-maximized")&&!c.hasAttribute("content-maximizing")||c!=b.relatedTarget&&c.contains(b.relatedTarget)||d(c,a(c))}},accessors:{scrollTarget:{attribute:{name:"scroll-target"}},scrollBuffer:{attribute:{name:"scroll-buffer"},get:function(){return Number(this.getAttribute("scroll-buffer"))||30}},taphide:{attribute:{"boolean":!0}},hoverhide:{attribute:{"boolean":!0}},scrollhide:{attribute:{"boolean":!0}},maxcontent:{attribute:{"boolean":!0},set:function(b){var e=a(this);b?c(this,e):this.hasAttribute("content-maximizing")||d(this,e)}}}})}(),function(){function a(a){var b=xtag.query(a,"x-slides > x-slide[selected]")[0]||0;return[b?xtag.query(a,"x-slides > x-slide").indexOf(b):b,a.firstElementChild.children.length-1]}function b(a,b){var c=xtag.toArray(a.firstElementChild.children);c.forEach(function(a){a.removeAttribute("selected")}),c[b||0].setAttribute("selected",!0);var e="translate"+(a.getAttribute("orientation")||"x")+"("+(b||0)*(-100/c.length)+"%)";a.firstElementChild.style[d]=e,a.firstElementChild.style.transform=e}function c(a){var c=this.firstElementChild;if(c&&c.children.length&&"x-slides"==c.tagName.toLowerCase()){var e=xtag.toArray(c.children),f=100/(e.length||1),g=this.getAttribute("orientation")||"x",h="x"==g?["width","height"]:["height","width"];if(c.style[h[1]]="100%",c.style[h[0]]=100*e.length+"%",c.style[d]="translate"+g+"(0%)",c.style.transform="translate"+g+"(0%)",e.forEach(function(a){a.style[h[0]]=f+"%",a.style[h[1]]="100%"}),a){var i=c.querySelector("[selected]");i&&b(this,e.indexOf(i)||0)}}}var d=xtag.prefix.js+"Transform";xtag.register("x-slidebox",{lifecycle:{created:function(){c()}},events:{transitionend:function(a){a.target==this.firstElementChild&&xtag.fireEvent(this,"slideend")},"reveal:delegate(x-slidebox > x-slides > x-slide)":function(a){var b=a.target;if(a.target.parentNode.parentNode==a.currentTarget){var c=b.parentNode,d=c.parentNode,e=xtag.query(c,"x-slide");d.slideTo(e.indexOf(b))}}},accessors:{orientation:{get:function(){return this.getAttribute("orientation")},set:function(a){var b=this;xtag.skipTransition(b.firstElementChild,function(){b.setAttribute("orientation",a.toLowerCase()),c.call(b,!0)})}}},methods:{slideTo:function(a){b(this,a)},slideNext:function(){var c=a(this);c[0]++,b(this,c[0]>c[1]?0:c[0])},slidePrevious:function(){var c=a(this);c[0]--,b(this,c[0]<0?c[1]:c[0])}}}),xtag.register("x-slide",{lifecycle:{inserted:function(){var a=this.parentNode.parentNode;"x-slidebox"==a.tagName.toLowerCase()&&c.call(a,!0)},created:function(){if(this.parentNode){var a=this.parentNode.parentNode;"x-slidebox"==a.tagName.toLowerCase()&&c.call(a,!0)}}}})}(),function(){function a(a){return!isNaN(parseFloat(a))}function b(b,c){return b.hasAttribute(c)&&a(b.getAttribute(c))}function c(b,c,d,e){if(e=e?e:Math.round,d=a(d)?d:0,!a(b))throw"invalid value "+b;if(!a(c)||0>=+c)throw"invalid step "+c;return e((b-d)/c)*c+d}function d(a,b,d,e){return b>a?b:a>d?Math.max(b,c(d,e,b,Math.floor)):a}function e(a,b,e){var f=c((b-a)/2+a,e,a);return d(f,a,b,e)}function f(a,b){var c=a.min,d=a.max;return(b-c)/(d-c)}function g(a,b){var c=a.min,d=a.max;return(d-c)*b+c}function h(a,b){b=Math.min(Math.max(0,b),1);var e=g(a,b),f=c(e,a.step,a.min);return d(f,a.min,a.max,a.step)}function i(a,b){var c=a.xtag.polyFillSliderThumb;if(c){var d=a.getBoundingClientRect(),e=c.getBoundingClientRect(),g=f(a,b),h=a.vertical,i=d[h?"height":"width"],j=e[h?"height":"width"],k=Math.max(i-j,0),l=k*g,m=l/i;c.style[h?"left":"top"]=0,c.style[h?"top":"left"]=100*m+"%"}}function j(a){i(a,a.value)}function k(a,b,c){var d=a.xtag.rangeInputEl,e=d.getBoundingClientRect(),f=b-e.left,g=e.width;a.vertical&&(g=e.height,f=c-e.top),a.value=h(a,f/g),xtag.fireEvent(a,"input"),j(a)}function l(a,b,c){a.xtag.dragInitVal=a.value,k(a,b,c);var d=a.xtag.callbackFns,e=function(a,b){document.body.addEventListener(a,b)};e("mousemove",d.onMouseDragMove),e("touchmove",d.onTouchDragMove),e("mouseup",d.onDragEnd),e("touchend",d.onDragEnd);var f=a.xtag.polyFillSliderThumb;f&&f.setAttribute("active",!0)}function m(a,b,c){k(a,b,c)}function n(a){return{onMouseDragStart:function(b){b.button===p&&(l(a,b.pageX,b.pageY),b.preventDefault())},onTouchDragStart:function(b){var c=b.targetTouches;1===c.length&&(l(a,c[0].pageX,c[0].pageY),b.preventDefault())},onMouseDragMove:function(b){m(a,b.pageX,b.pageY),b.preventDefault()},onTouchDragMove:function(b){var c=b.targetTouches;1===c.length&&(m(a,c[0].pageX,c[0].pageY),b.preventDefault())},onDragEnd:function(b){var c=a.xtag.callbackFns,d=function(a,b){document.body.removeEventListener(a,b)};d("mousemove",c.onMouseDragMove),d("touchmove",c.onTouchDragMove),d("mouseup",c.onDragEnd),d("touchend",c.onDragEnd);var e=a.xtag.polyFillSliderThumb;e&&e.removeAttribute("active"),a.value!==a.xtag.dragInitVal&&xtag.fireEvent(a,"change"),a.xtag.dragInitVal=null,b.preventDefault()},onKeyDown:function(a){var b=a.keyCode;if(b in o){var c=this.value,d=this.min,e=this.max,f=this.step,g=Math.max(0,e-d),h=Math.max(g/10,f);switch(o[b]){case"LEFT_ARROW":case"DOWN_ARROW":this.value=Math.max(c-f,d);break;case"RIGHT_ARROW":case"UP_ARROW":this.value=Math.min(c+f,e);break;case"HOME":this.value=d;break;case"END":this.value=e;break;case"PAGE_DOWN":this.value=Math.max(c-h,d);break;case"PAGE_UP":this.value=Math.min(c+h,e)}this.value!==c&&xtag.fireEvent(this,"change"),a.preventDefault()}}}}var o={33:"PAGE_UP",34:"PAGE_DOWN",35:"END",36:"HOME",37:"LEFT_ARROW",38:"UP_ARROW",39:"RIGHT_ARROW",40:"DOWN_ARROW"},p=0;xtag.register("x-slider",{lifecycle:{created:function(){var a=this;a.xtag.callbackFns=n(a),a.xtag.dragInitVal=null;var c=document.createElement("input");xtag.addClass(c,"input"),c.setAttribute("type","range");var d=b(a,"max")?+a.getAttribute("max"):100,f=b(a,"min")?+a.getAttribute("min"):0,g=b(a,"step")?+a.getAttribute("step"):1;g=g>0?g:1;var h=b(a,"value")?+a.getAttribute("value"):e(f,d,g);c.setAttribute("max",d),c.setAttribute("min",f),c.setAttribute("step",g),c.setAttribute("value",h),a.xtag.rangeInputEl=c,a.appendChild(a.xtag.rangeInputEl),a.xtag.polyFillSliderThumb=null,"range"!==c.type||a.hasAttribute("polyfill")?a.setAttribute("polyfill",!0):a.removeAttribute("polyfill"),j(a)},attributeChanged:function(){j(this)}},events:{"change:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"change")},"input:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"input")},"focus:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"focus",{},{bubbles:!1})},"blur:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"blur",{},{bubbles:!1})}},accessors:{polyfill:{attribute:{"boolean":!0},set:function(a){var b=this.xtag.callbackFns;if(a){if(this.setAttribute("tabindex",0),this.xtag.rangeInputEl.setAttribute("tabindex",-1),this.xtag.rangeInputEl.setAttribute("readonly",!0),!this.xtag.polyFillSliderTrack){var c=document.createElement("div");xtag.addClass(c,"slider-track"),this.xtag.polyFillSliderTrack=c,this.appendChild(c)}if(!this.xtag.polyFillSliderThumb){var d=document.createElement("span");xtag.addClass(d,"slider-thumb"),this.xtag.polyFillSliderThumb=d,this.appendChild(d)}j(this),this.addEventListener("mousedown",b.onMouseDragStart),this.addEventListener("touchstart",b.onTouchDragStart),this.addEventListener("keydown",b.onKeyDown)}else this.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("readonly"),this.removeEventListener("mousedown",b.onMouseDragStart),this.removeEventListener("touchstart",b.onTouchDragStart),this.removeEventListener("keydown",b.onKeyDown)}},vertical:{attribute:{"boolean":!0},set:function(){j(this)}},max:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("max")}},min:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("min")}},step:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("step")}},name:{attribute:{selector:"input[type=range]"},set:function(a){var b=this.xtag.rangeInputEl;null===a||void 0===a?b.removeAttribute("name"):b.setAttribute("name",a)}},value:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.value},set:function(b){a(b)||(b=e(this.min,this.max,this.step)),b=+b;
-var f=this.min,g=this.max,h=this.step,i=c(b,h,f),k=d(i,f,g,h);this.xtag.rangeInputEl.value=k,j(this)}},inputElem:{get:function(){return this.xtag.rangeInputEl}}},methods:{}})}(),function(){function a(){var a=document.documentElement,b={left:a.scrollLeft||document.body.scrollLeft||0,top:a.scrollTop||document.body.scrollTop||0,width:a.clientWidth,height:a.clientHeight};return b.right=b.left+b.width,b.bottom=b.top+b.height,b}function b(b){var c=b.getBoundingClientRect(),d=a(),e=d.left,f=d.top;return{left:c.left+e,right:c.right+e,top:c.top+f,bottom:c.bottom+f,width:c.width,height:c.height}}function c(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom}function d(a){if("x-tabbar"===a.parentNode.nodeName.toLowerCase()){var b=a.targetEvent,c=a.targetSelector?xtag.query(document,a.targetSelector):a.targetElems;c.forEach(function(a){xtag.fireEvent(a,b)})}}xtag.register("x-tabbar",{lifecycle:{created:function(){this.xtag.overallEventToFire="show"}},events:{"tap:delegate(x-tabbar-tab)":function(){var a=xtag.query(this.parentNode,"x-tabbar-tab[selected]");a.length&&a.forEach(function(a){a.removeAttribute("selected")}),this.setAttribute("selected",!0)}},accessors:{tabs:{get:function(){return xtag.queryChildren(this,"x-tabbar-tab")}},targetEvent:{attribute:{name:"target-event"},get:function(){return this.xtag.overallEventToFire},set:function(a){this.xtag.overallEventToFire=a}}},methods:{}}),xtag.register("x-tabbar-tab",{lifecycle:{created:function(){this.xtag.targetSelector=null,this.xtag.overrideTargetElems=null,this.xtag.targetEvent=null}},events:{tap:function(a){var e=a.currentTarget;if(a.changedTouches&&a.changedTouches.length>0){var f=a.changedTouches[0],g=b(e);c(f.pageX,f.pageY,g)&&d(e)}else d(e)}},accessors:{targetSelector:{attribute:{name:"target-selector"},get:function(){return this.xtag.targetSelector},set:function(a){this.xtag.targetSelector=a,a&&(this.xtag.overrideTargetElems=null)}},targetElems:{get:function(){return this.targetSelector?xtag.query(document,this.targetSelector):null!==this.xtag.overrideTargetElems?this.xtag.overrideTargetElems:[]},set:function(a){this.removeAttribute("target-selector"),this.xtag.overrideTargetElems=a}},targetEvent:{attribute:{name:"target-event"},get:function(){if(this.xtag.targetEvent)return this.xtag.targetEvent;if("x-tabbar"===this.parentNode.nodeName.toLowerCase())return this.parentNode.targetEvent;throw"tabbar-tab is missing event to fire"},set:function(a){this.xtag.targetEvent=a}}},methods:{}})}(),function(){function a(a){var b=a.xtag.inputEl.form;b?a.removeAttribute("x-toggle-no-form"):a.setAttribute("x-toggle-no-form",""),a.xtag.scope=a.parentNode?b||document:null}function b(a){var b={},c=a==document?"[x-toggle-no-form]":"";xtag.query(a,"x-toggle[name]"+c).forEach(function(d){var e=d.name;if(e&&!b[e]){var f=xtag.query(a,'x-toggle[name="'+e+'"]'+c),g=f.length>1?"radio":"checkbox";f.forEach(function(a){a.xtag&&a.xtag.inputEl&&(a.type=g)}),b[e]=!0}})}var c=!1;xtag.addEvents(document,{DOMComponentsLoaded:function(){b(document),xtag.toArray(document.forms).forEach(b)},WebComponentsReady:function(){b(document),xtag.toArray(document.forms).forEach(b)},keydown:function(a){c=a.shiftKey},keyup:function(a){c=a.shiftKey},"focus:delegate(x-toggle)":function(){this.setAttribute("focus","")},"blur:delegate(x-toggle)":function(){this.removeAttribute("focus")},"tap:delegate(x-toggle)":function(){if(c&&this.group){var a=this.groupToggles,b='x-toggle[group="'+this.group+'"][active]',d=this.xtag.scope.querySelector(b);if(d&&this!=d){var e=this,f=d.checked,g=a.indexOf(this),h=a.indexOf(d),i=Math.min(g,h),j=Math.max(g,h);a.slice(i,j).forEach(function(a){a!=e&&(a.checked=f)})}}},"change:delegate(x-toggle)":function(){var a='x-toggle[group="'+this.group+'"][active]',b=this.xtag.scope.querySelector(a);this.checked=c&&b&&this!=b?b.checked:this.xtag.inputEl.checked,this.group&&(this.groupToggles.forEach(function(a){a.active=!1}),this.active=!0)}}),xtag.register("x-toggle",{lifecycle:{created:function(){this.innerHTML='<label class="x-toggle-input-wrap"><input type="checkbox"></input></label><div class="x-toggle-check"></div><div class="x-toggle-content"></div>',this.xtag.inputWrapEl=this.querySelector(".x-toggle-input-wrap"),this.xtag.inputEl=this.xtag.inputWrapEl.querySelector("input"),this.xtag.contentWrapEl=this.querySelector(".x-toggle-content-wrap"),this.xtag.checkEl=this.querySelector(".x-toggle-check"),this.xtag.contentEl=this.querySelector(".x-toggle-content"),this.type="checkbox",a(this);var b=this.getAttribute("name");b&&(this.xtag.inputEl.name=this.getAttribute("name")),this.hasAttribute("checked")&&(this.checked=!0)},inserted:function(){a(this),this.parentNode&&"x-togglegroup"===this.parentNode.nodeName.toLowerCase()&&(this.parentNode.hasAttribute("name")&&(this.name=this.parentNode.getAttribute("name")),this.parentNode.hasAttribute("group")&&(this.group=this.parentNode.getAttribute("group")),this.setAttribute("no-box",!0)),this.name&&b(this.xtag.scope)},removed:function(){b(this.xtag.scope),a(this)}},accessors:{noBox:{attribute:{name:"no-box","boolean":!0},set:function(){}},type:{attribute:{},set:function(a){this.xtag.inputEl.type=a}},label:{attribute:{},get:function(){return this.xtag.contentEl.innerHTML},set:function(a){this.xtag.contentEl.innerHTML=a}},active:{attribute:{"boolean":!0}},group:{attribute:{}},groupToggles:{get:function(){return xtag.query(this.xtag.scope,'x-toggle[group="'+this.group+'"]')}},name:{attribute:{skip:!0},get:function(){return this.getAttribute("name")},set:function(a){null===a?(this.removeAttribute("name"),this.type="checkbox"):this.setAttribute("name",a),this.xtag.inputEl.name=a,b(this.xtag.scope)}},checked:{get:function(){return this.xtag.inputEl.checked},set:function(a){var b=this.name,c="true"===a||a===!0;if(b){var d=this.xtag.scope==document?"[x-toggle-no-form]":"",e='x-toggle[checked][name="'+b+'"]'+d,f=this.xtag.scope.querySelector(e);f&&f.removeAttribute("checked")}this.xtag.inputEl.checked=c,c?this.setAttribute("checked",""):this.removeAttribute("checked")}},value:{attribute:{},get:function(){return this.xtag.inputEl.value},set:function(a){this.xtag.inputEl.value=a}}}})}(),function(){function a(a){return a in G}function b(){var a=document.documentElement,b={left:a.scrollLeft||document.body.scrollLeft||0,top:a.scrollTop||document.body.scrollTop||0,width:a.clientWidth,height:a.clientHeight};return b.right=b.left+b.width,b.bottom=b.top+b.height,b}function c(a){var c=a.getBoundingClientRect(),d=b(),e=d.left,f=d.top;return{left:c.left+e,right:c.right+e,top:c.top+f,bottom:c.bottom+f,width:c.width,height:c.height}}function d(a,b){return b=void 0!==b?b:c(a),{x:a.offsetWidth?b.width/a.offsetWidth:1,y:a.offsetHeight?b.height/a.offsetHeight:1}}function e(a,b){if(a.right<b.left||b.right<a.left||a.bottom<b.top||b.bottom<a.top)return null;var c={left:Math.max(a.left,b.left),top:Math.max(a.top,b.top),right:Math.min(a.right,b.right),bottom:Math.min(a.bottom,b.bottom)};return c.width=c.right-c.left,c.height=c.bottom-c.top,c.width<0||c.height<0?null:c}function f(a,b,c){this.eventType=b,this.listenerFn=c,this.elem=a,this._attachedFn=null}function g(a){this._cachedListener=null,this._tooltips=[];var b=this,c=function(a){b._tooltips.forEach(function(b){b.xtag._skipOuterClick||!b.hasAttribute("visible")||b.ignoreOuterTrigger||n(a.target,b)||B(b),b.xtag._skipOuterClick=!1})},d=this._cachedListener=new f(document,a,c);d.attachListener()}function h(){this.eventStructDict={}}function i(a,b,c){var d=function(b){c&&n(b.target,a.previousElementSibling)&&c.call(a.previousElementSibling,b)};return new f(document.documentElement,b,d)}function j(a,b,c){var d=b+":delegate(x-tooltip+*)",e=function(b){c&&this===a.nextElementSibling&&c.call(this,b)};return new f(document.documentElement,d,e)}function k(a,b,c,d){if(b===H)return i(a,c,d);if(b===I)return j(a,c,d);var e=c+":delegate("+b+")";return new f(document.documentElement,e,function(b){var c=this;n(c,a)||d.call(c,b)})}function l(a,b,c){var d=[],e=function(){var b=this;a.xtag._skipOuterClick=!0,a.hasAttribute("visible")?b===a.xtag.lastTargetElem?B(a):A(a,b):A(a,b)},f=k(a,b,c,e);return d.push(f),d}function m(a,b){for(;a;){if(b(a))return a;a=a.parentNode}return null}function n(a,b){if(b.contains)return b.contains(a);var c=function(a){return a===b};return!!m(a,c)}function o(a){return function(b){var c=this,d=b.relatedTarget||b.toElement;d?n(d,c)||a.call(this,b):a.call(this,b)}}function p(a,b){var c=[];c=b===H?a.previousElementSibling?[a.previousElementSibling]:[]:b===I?a.nextElementSibling?[a.nextElementSibling]:[]:xtag.query(document,b);for(var d=0;d<c.length;){var e=c[d];n(e,a)?c.splice(d,1):d++}return c}function q(a,b){var d=function(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom},e=c(a),f=c(b),g=function(a,b){return d(a.left,a.top,b)||d(a.right,a.top,b)||d(a.right,a.bottom,b)||d(a.left,a.bottom,b)},h=function(a,b){return a.top<=b.top&&b.bottom<=a.bottom&&b.left<=a.left&&a.right<=b.right};return g(e,f)||g(f,e)||h(e,f)||h(f,e)}function r(a,b,c){var d=c*(Math.PI/180),e=a*Math.sin(d)+b*Math.cos(d),f=a*Math.cos(d)+b*Math.sin(d);return{height:e,width:f}}function s(a,b,c){var d=a;return d=void 0!==b&&null!==b?Math.max(b,d):d,d=void 0!==c&&null!==c?Math.min(c,d):d}function t(a,b,e,f,g){var h,i;if(e===window)h=a,i=b;else{var j=c(e);h=a-j.left,i=b-j.top}var k=c(f);g=g?g:d(f,k);var l=f.clientTop*g.y,m=f.clientLeft*g.x,o=f.scrollTop*g.y,p=f.scrollLeft*g.x,q={left:h-k.left-m,top:i-k.top-l};return!n(document.body,f)&&n(f,document.body)&&(q.top+=o,q.left+=p),q}function u(a,d){d||(d=c(a.offsetParent||a.parentNode));var f=b(),g=f;return a.allowOverflow||(g=e(f,d),g||(g=d)),g}function v(a,b){if(0===b.length)return null;for(var c=u(a),d=c.left,e=c.top,f=c.right,g=c.bottom,h=[],i=[],j=0;j<b.length;j++){var k=b[j],l=k.rect;l.left<d||l.top<e||l.right>f||l.bottom>g?i.push(k):h.push(k)}var m=h.length>0?h:i;return m[0].orient}function w(a){a.setAttribute("_force-display",!0)}function x(a){a.removeAttribute("_force-display")}function y(b,c){b.removeAttribute(K);var d=b.xtag.arrowEl,e=null,f=[];for(var g in G)d.setAttribute(J,G[g]),e=z(b,c,g),e&&(w(b),q(b,c)||f.push({orient:g,rect:e}),x(b));var h=v(b,f);return h||(h="top"),b.setAttribute(K,h),d.setAttribute(J,G[h]),a(h)&&h!==g?z(b,c,h):e}function z(e,f,g,h){if(!e.parentNode)return e.left="",e.top="",null;h=void 0===h?0:h;var i=e.xtag.arrowEl;if(!a(g))return y(e,f);var j=e.offsetParent?e.offsetParent:e.parentNode;h||(e.style.top="",e.style.left="",i.style.top="",i.style.left=""),w(e);var k=b(),l=c(j),o=d(j,l),p=j.clientWidth*o.x,q=j.clientHeight*o.y,v=c(f),A=v.width,B=v.height,C=c(e),D=d(e,C),E=C.width,F=C.height,G=C.width,H=C.height,I=(G-E)/2,J=(H-F)/2,K=i.offsetWidth*D.x,L=i.offsetHeight*D.y,M=45,N=r(K,L,M);K=N.width,L=N.height,"top"===g||"bottom"===g?L/=2:K/=2;var O=u(e,l),P=O.left,Q=O.top,R=O.right-E,S=O.bottom-F,T={left:v.left+(A-E)/2,top:v.top+(B-F)/2},U=T.left,V=T.top;if("top"===g)V=v.top-H-L,S-=L;else if("bottom"===g)V=v.top+B+L,S-=L;else if("left"===g)U=v.left-G-K,R-=K;else{if("right"!==g)throw"invalid orientation "+g;U=v.left+A+K,R-=K}var W=s(U,P,R),X=s(V,Q,S);W+=I,X+=J;var Y,Z,$=function(a){if(!window.getComputedStyle||a===document||a===document.documentElement)return!1;var b;try{b=window.getComputedStyle(a)}catch(c){return!1}return b&&"fixed"===b.position},_=m(f,$);if(_&&!n(e,_))Y=W-k.left,Z=X-k.top,e.setAttribute("_target-fixed",!0);else{var ab=t(W,X,window,j,o);Y=ab.left,Z=ab.top,e.removeAttribute("_target-fixed")}e.style.top=Z+"px",e.style.left=Y+"px";var bb,cb,db,eb,fb;"top"===g||"bottom"===g?(eb=(A-K)/2,fb=v.left-W,bb=E-K,cb=E,db="left"):(eb=(B-L)/2,fb=v.top-X,bb=F-L,cb=F,db="top");var gb=s(eb+fb,0,bb),hb=cb?gb/cb:0;i.style[db]=100*hb+"%";var ib=e.offsetWidth*D.x,jb=e.offsetHeight*D.y,kb=j.clientWidth*o.x,lb=j.clientHeight*o.y;x(e);var mb=2;return mb>h&&(E!==ib||F!==jb||p!==kb||q!==lb)?z(e,f,g,h+1):{left:W,top:X,width:ib,height:jb,right:W+ib,bottom:X+jb}}function A(a,b){b===a&&console.warn("The tooltip's target element is the tooltip itself! Is this intentional?");var c=a.xtag.arrowEl;c.parentNode||console.warn("The inner component DOM of the tooltip appears to be missing. Make sure to edit tooltip contents through the .contentEl property instead ofdirectly on the x-tooltip to avoid clobbering the component's internals.");var d=a.orientation,e=function(){x(a),a.setAttribute("visible",!0),xtag.fireEvent(a,"tooltipshown",{triggerElem:b})};b?(a.xtag.lastTargetElem=b,xtag.skipTransition(a,function(){return z(a,b,d),w(a),e})):(a.style.top="",a.style.left="",c.style.top="",c.style.left="",e())}function B(b){a(b.orientation)&&b.removeAttribute(K),b.hasAttribute("visible")&&(w(b),b.xtag._hideTransitionFlag=!0,b.removeAttribute("visible"))}function C(a){var b=a.xtag.cachedListeners;b.forEach(function(a){a.removeListener()}),a.xtag.cachedListeners=[],E.unregisterTooltip(a.triggerStyle,a)}function D(a,b,c){if(a.parentNode){(void 0===b||null===b)&&(b=a.targetSelector),(void 0===c||null===c)&&(c=a.triggerStyle);var d=p(a,b);-1===d.indexOf(a.xtag.lastTargetElem)&&(a.xtag.lastTargetElem=d.length>0?d[0]:null,z(a,a.xtag.lastTargetElem,a.orientation)),C(a);var e;if(c in F){var f=F[c];e=f(a,b)}else e=l(a,b,c),E.registerTooltip(c,a);e.forEach(function(a){a.attachListener()}),a.xtag.cachedListeners=e,B(a)}}var E,F,G={top:"down",bottom:"up",left:"right",right:"left"},H="_previousSibling",I="_nextSibling",J="arrow-direction",K="_auto-orientation";f.prototype.attachListener=function(){this._attachedFn||(this._attachedFn=xtag.addEvent(this.elem,this.eventType,this.listenerFn))},f.prototype.removeListener=function(){this._attachedFn&&(xtag.removeEvent(this.elem,this.eventType,this._attachedFn),this._attachedFn=null)},g.prototype.destroy=function(){this._cachedListener.removeListener(),this._cachedListener=null,this._tooltips=null},g.prototype.containsTooltip=function(a){return-1!==this._tooltips.indexOf(a)},g.prototype.addTooltip=function(a){this.containsTooltip(a)||this._tooltips.push(a)},g.prototype.removeTooltip=function(a){this.containsTooltip(a)&&this._tooltips.splice(this._tooltips.indexOf(a),1)},Object.defineProperties(g.prototype,{numTooltips:{get:function(){return this._tooltips.length}}}),h.prototype.registerTooltip=function(a,b){if(a in this.eventStructDict){var c=this.eventStructDict[a];c.containsTooltip(b)||c.addTooltip(b)}else this.eventStructDict[a]=new g(a),this.eventStructDict[a].addTooltip(b)},h.prototype.unregisterTooltip=function(a,b){if(a in this.eventStructDict&&this.eventStructDict[a].containsTooltip(b)){var c=this.eventStructDict[a];c.removeTooltip(b),0===c.numTooltips&&(c.destroy(),delete this.eventStructDict[a])}},E=new h,F={custom:function(){return[]},hover:function(a,b){var c=[],d=null,e=200,g=function(){d&&window.clearTimeout(d),d=null},h=o(function(b){g();var c=this,d=b.relatedTarget||b.toElement;n(d,a)||A(a,c)}),i=o(function(b){g();var c=b.relatedTarget||b.toElement;n(c,a)||(d=window.setTimeout(function(){"hover"===a.triggerStyle&&B(a)},e))}),j=k(a,b,"enter",h),l=k(a,b,"leave",i);c.push(j),c.push(l);var m=o(function(b){g();var c=b.relatedTarget||b.toElement,d=a.xtag.lastTargetElem;a.hasAttribute("visible")||!d||n(c,d)||A(a,d)}),p=o(function(b){g();var c=b.relatedTarget||b.toElement,f=a.xtag.lastTargetElem;f&&!n(c,f)&&(d=window.setTimeout(function(){"hover"===a.triggerStyle&&B(a)},e))});return c.push(new f(a,"enter",m)),c.push(new f(a,"leave",p)),c}},xtag.register("x-tooltip",{lifecycle:{created:function(){var a=this;a.xtag.contentEl=document.createElement("div"),a.xtag.arrowEl=document.createElement("span"),xtag.addClass(a.xtag.contentEl,"tooltip-content"),xtag.addClass(a.xtag.arrowEl,"tooltip-arrow"),a.xtag.contentEl.innerHTML=a.innerHTML,a.innerHTML="",a.appendChild(a.xtag.contentEl),a.appendChild(a.xtag.arrowEl),a.xtag._orientation="auto",a.xtag._targetSelector=H,a.xtag._triggerStyle="click";var b=p(a,a.xtag._targetSelector);a.xtag.lastTargetElem=b.length>0?b[0]:null,a.xtag.cachedListeners=[],a.xtag._hideTransitionFlag=!1,a.xtag._skipOuterClick=!1},inserted:function(){D(this,this.xtag._targetSelector,this.xtag._triggerStyle)},removed:function(){C(this)}},events:{transitionend:function(a){var b=a.currentTarget;b.xtag._hideTransitionFlag&&!b.hasAttribute("visible")&&(b.xtag._hideTransitionFlag=!1,xtag.fireEvent(b,"tooltiphidden")),x(b)}},accessors:{orientation:{attribute:{},get:function(){return this.xtag._orientation},set:function(b){b=b.toLowerCase();var c=this.querySelector(".tooltip-arrow"),d=null;a(b)?(d=G[b],c.setAttribute(J,d),this.removeAttribute(K)):c.removeAttribute(J),this.xtag._orientation=b,this.refreshPosition()}},triggerStyle:{attribute:{name:"trigger-style"},get:function(){return this.xtag._triggerStyle},set:function(a){D(this,this.targetSelector,a),this.xtag._triggerStyle=a}},targetSelector:{attribute:{name:"target-selector"},get:function(){return this.xtag._targetSelector},set:function(a){D(this,a,this.triggerStyle),this.xtag._targetSelector=a}},ignoreOuterTrigger:{attribute:{"boolean":!0,name:"ignore-outer-trigger"}},ignoreTooltipPointerEvents:{attribute:{"boolean":!0,name:"ignore-tooltip-pointer-events"}},allowOverflow:{attribute:{"boolean":!0,name:"allow-overflow"},set:function(){this.refreshPosition()}},contentEl:{get:function(){return this.xtag.contentEl},set:function(a){var b=this.xtag.contentEl;xtag.addClass(a,"tooltip-content"),this.replaceChild(a,b),this.xtag.contentEl=a,this.refreshPosition()}},presetTriggerStyles:{get:function(){var a=[];for(var b in F)a.push(b);return a}},targetElems:{get:function(){return p(this,this.targetSelector)}}},methods:{refreshPosition:function(){this.xtag.lastTargetElem&&z(this,this.xtag.lastTargetElem,this.orientation)},show:function(){A(this,this.xtag.lastTargetElem)},hide:function(){B(this)},toggle:function(){this.hasAttribute("visible")?this.hide():this.show()}}})}();
\ No newline at end of file
+}function o(a){return a.getDate()}function p(a){return a.getDay()}function q(a,b){var c=a.toString(),d=new Array(b).join("0");return(d+c).substr(-b)}function r(a){return[q(m(a),4),q(n(a)+1,2),q(o(a),2)].join("-")}function s(b){if(e(b))return b;var c=X.exec(b);return c?a(new Date(c[1],c[2]-1,c[3])):null}function t(b){if(e(b))return b;var c=s(b);if(c)return c;var d=Date.parse(b);return isNaN(d)?null:a(new Date(d))}function u(a){var b;if(f(a))b=a.slice(0);else{if(e(a))return[a];if(!("string"==typeof a&&a.length>0))return null;try{if(b=JSON.parse(a),!f(b))return null}catch(c){var d=t(a);return d?[d]:null}}for(var g=0;g<b.length;g++){var h=b[g];if(!e(h))if("string"==typeof h){var i=t(h);if(!i)return null;b[g]=i}else{if(!f(h)||2!==h.length)return null;var j=t(h[0]);if(!j)return null;var k=t(h[1]);if(!k)return null;if(j.valueOf()>k.valueOf())return null;b[g]=[j,k]}}return b}function v(b,c,d,e){return void 0===c&&(c=m(b)),void 0===d&&(d=n(b)),void 0===e&&(e=o(b)),a(new Date(c,d,e))}function w(a,b){return b||(b=(new Date).getFullYear()),new Date(b,a+1,0).getDate()}function x(a,b,c,d){return v(a,m(a)+b,n(a)+c,o(a)+d)}function y(a){var b=a.getDate(),c=w(a.getMonth()+1,a.getFullYear());return b>c&&(b=c),new Date(a.getFullYear(),a.getMonth()+1,b)}function z(a){var b=a.getDate(),c=w(a.getMonth()-1,a.getFullYear());return b>c&&(b=c),new Date(a.getFullYear(),a.getMonth()-1,b)}function A(a,b){b=c(b),d(b)||(b=0);for(var e=0;7>e;e++){if(p(a)===b)return a;a=F(a)}throw"unable to find week start"}function B(a,b){b=c(b),d(b)||(b=6);for(var e=0;7>e;e++){if(p(a)===b)return a;a=E(a)}throw"unable to find week end"}function C(b){return b=new Date(b.valueOf()),b.setDate(1),a(b)}function D(a){return F(x(a,0,1,0))}function E(a){return x(a,0,0,1)}function F(a){return x(a,0,0,-1)}function G(a,b){if(b){b=void 0===b.length?[b]:b;var c=!1;return b.forEach(function(b){2===b.length?H(b[0],b[1],a)&&(c=!0):r(b)===r(a)&&(c=!0)}),c}}function H(a,b,c){return r(a)<=r(c)&&r(c)<=r(b)}function I(a){a.sort(function(a,b){var c=e(a)?a:a[0],d=e(b)?b:b[0];return c.valueOf()-d.valueOf()})}function J(a){var c=g("div.controls"),d=g("span.prev"),e=g("span.next");return d.innerHTML=a.prev,e.innerHTML=a.next,b(c,d),b(c,e),c}function K(a){var b=this;a=a||{},b._span=a.span||1,b._multiple=a.multiple||!1,b._viewDate=b._sanitizeViewDate(a.view,a.chosen),b._chosenRanges=b._sanitizeChosenRanges(a.chosen,a.view),b._firstWeekdayNum=a.firstWeekdayNum||0,b._el=g("div.calendar"),b._labels=R(),b._customRenderFn=null,b._renderRecursionFlag=!1,b.render(!0)}function L(a){a=a.slice(0),I(a);for(var b=[],c=0;c<a.length;c++){var d,f,g,h,i=a[c],j=b.length>0?b[b.length-1]:null;if(e(i)?d=f=i:(d=i[0],f=i[1]),i=G(d,f)?d:[d,f],e(j))g=h=j;else{if(!j){b.push(i);continue}g=j[0],h=j[1]}if(G(d,[j])||G(F(d),[j])){var k=g.valueOf()<d.valueOf()?g:d,l=h.valueOf()>f.valueOf()?h:f,m=G(k,l)?k:[k,l];b[b.length-1]=m}else b.push(i)}return b}function M(a,b){var c,d=b.getAttribute("data-date"),e=t(d);l(b,V)?(a.xtag.dragType=U,c="datetoggleoff"):(a.xtag.dragType=T,c="datetoggleon"),a.xtag.dragStartEl=b,a.xtag.dragAllowTap=!0,a.noToggle||xtag.fireEvent(a,c,{detail:{date:e,iso:d}}),a.setAttribute("active",!0),b.setAttribute("active",!0)}function N(a,b){var c=b.getAttribute("data-date"),d=t(c);b!==a.xtag.dragStartEl&&(a.xtag.dragAllowTap=!1),a.noToggle||(a.xtag.dragType!==T||l(b,V)?a.xtag.dragType===U&&l(b,V)&&xtag.fireEvent(a,"datetoggleoff",{detail:{date:d,iso:c}}):xtag.fireEvent(a,"datetoggleon",{detail:{date:d,iso:c}})),a.xtag.dragType&&b.setAttribute("active",!0)}function O(){for(var a=xtag.query(document,"x-calendar"),b=0;b<a.length;b++){var c=a[b];c.xtag.dragType=null,c.xtag.dragStartEl=null,c.xtag.dragAllowTap=!1,c.removeAttribute("active")}for(var d=xtag.query(document,"x-calendar .day[active]"),e=0;e<d.length;e++)d[e].removeAttribute("active")}function P(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom}var Q=0,R=function(){return{prev:"←",next:"→",months:["January","February","March","April","May","June","July","August","September","October","November","December"],weekdays:["Sun","Mon","Tue","Wed","Thu","Fri","Sat"]}},S=a(new Date),T="add",U="remove",V="chosen",W="className",X=/(\d{4})[^\d]?(\d{2})[^\d]?(\d{2})/,Y=K.prototype;Y.makeMonth=function(a){if(!e(a))throw"Invalid view date!";var c=this.firstWeekdayNum,d=this.chosen,f=this.labels,h=n(a),i=A(C(a),c),k=g("div.month"),l=g("div.month-label");l.textContent=f.months[h]+" "+m(a),b(k,l);for(var p=g("div.weekday-labels"),q=0;7>q;q++){var s=(c+q)%7,t=g("span.weekday-label");t.textContent=f.weekdays[s],b(p,t)}b(k,p);var u=g("div.week"),v=i,w=42;for(q=0;w>q;q++){var x=g("span.day");if(x.setAttribute("data-date",r(v)),x.textContent=o(v),n(v)!==h&&j(x,"badmonth"),G(v,d)&&j(x,V),G(v,S)&&j(x,"today"),b(u,x),v=E(v),0===(q+1)%7){b(k,u),u=g("div.week");var y=n(v)>h||n(v)<h&&m(v)>m(i);if(y)break}}return k},Y._sanitizeViewDate=function(a,b){b=void 0===b?this.chosen:b;var c;if(e(a))c=a;else if(e(b))c=b;else if(f(b)&&b.length>0){var d=b[0];c=e(d)?d:d[0]}else c=S;return c},Y._sanitizeChosenRanges=function(a,b){b=void 0===b?this.view:b;var c;c=e(a)?[a]:f(a)?a:null!==a&&void 0!==a&&b?[b]:[];var d=L(c);if(!this.multiple&&d.length>0){var g=d[0];return e(g)?[g]:[g[0]]}return d},Y.addDate=function(a,b){e(a)&&(b?(this.chosen.push(a),this.chosen=this.chosen):this.chosen=[a])},Y.removeDate=function(a){if(e(a))for(var b=this.chosen.slice(0),c=0;c<b.length;c++){var d=b[c];if(G(a,[d])){if(b.splice(c,1),f(d)){var g=d[0],h=d[1],i=F(a),j=E(a);G(i,[d])&&b.push([g,i]),G(j,[d])&&b.push([j,h])}this.chosen=L(b);break}}},Y.hasChosenDate=function(a){return G(a,this._chosenRanges)},Y.hasVisibleDate=function(a,b){var c=b?this.firstVisibleMonth:this.firstVisibleDate,d=b?D(this.lastVisibleMonth):this.lastVisibleDate;return G(a,[[c,d]])},Y.render=function(a){var c,d=this._span;if(a){var e,f=xtag.query(this.el,".day");for(c=0;c<f.length;c++)if(e=f[c],e.hasAttribute("data-date")){var g=e.getAttribute("data-date"),h=s(g);h&&(G(h,this._chosenRanges)?j(e,V):k(e,V),G(h,[S])?j(e,"today"):k(e,"today"))}}else{this.el.innerHTML="";var i=this.firstVisibleMonth;for(c=0;d>c;c++)b(this.el,this.makeMonth(i)),i=x(i,0,1,0)}this._callCustomRenderer()},Y._callCustomRenderer=function(){if(this._customRenderFn){if(this._renderRecursionFlag)throw"Error: customRenderFn causes recursive loop of rendering calendar; make sure your custom rendering function doesn't modify attributes of the x-calendar that would require a re-render!";for(var a=xtag.query(this.el,".day"),b=0;b<a.length;b++){var c=a[b],d=c.getAttribute("data-date"),e=s(d);this._renderRecursionFlag=!0,this._customRenderFn(c,e?e:null,d),this._renderRecursionFlag=!1}}},Object.defineProperties(Y,{el:{get:function(){return this._el}},multiple:{get:function(){return this._multiple},set:function(a){this._multiple=a,this.chosen=this._sanitizeChosenRanges(this.chosen),this.render(!0)}},span:{get:function(){return this._span},set:function(a){var b=c(a);this._span=!isNaN(b)&&b>=0?b:0,this.render(!1)}},view:{attribute:{},get:function(){return this._viewDate},set:function(a){var b=this._sanitizeViewDate(a),c=this._viewDate;this._viewDate=b,this.render(n(c)===n(b)&&m(c)===m(b))}},chosen:{get:function(){return this._chosenRanges},set:function(a){this._chosenRanges=this._sanitizeChosenRanges(a),this.render(!0)}},firstWeekdayNum:{get:function(){return this._firstWeekdayNum},set:function(a){a=c(a),d(a)||(a=0),this._firstWeekdayNum=a,this.render(!1)}},lastWeekdayNum:{get:function(){return(this._firstWeekdayNum+6)%7}},customRenderFn:{get:function(){return this._customRenderFn},set:function(a){this._customRenderFn=a,this.render(!0)}},chosenString:{get:function(){if(this.multiple){for(var a=this.chosen.slice(0),b=0;b<a.length;b++){var c=a[b];a[b]=e(c)?r(c):[r(c[0]),r(c[1])]}return JSON.stringify(a)}return this.chosen.length>0?r(this.chosen[0]):""}},firstVisibleMonth:{get:function(){return C(this.view)}},lastVisibleMonth:{get:function(){return x(this.firstVisibleMonth,0,Math.max(0,this.span-1),0)}},firstVisibleDate:{get:function(){return A(this.firstVisibleMonth,this.firstWeekdayNum)}},lastVisibleDate:{get:function(){return B(D(this.lastVisibleMonth),this.lastWeekdayNum)}},labels:{get:function(){return this._labels},set:function(a){var b=this.labels;for(var c in b)if(c in a){var d=this._labels[c],e=a[c];if(f(d)){if(!f(e)||d.length!==e.length)throw"invalid label given for '"+c+"': expected array of "+d.length+" labels, got "+JSON.stringify(e);e=e.slice(0);for(var g=0;g<e.length;g++)e[g]=e[g].toString?e[g].toString():String(e[g])}else e=String(e);b[c]=e}this.render(!1)}}});var Z=null,$=null;xtag.register("x-calendar",{lifecycle:{created:function(){this.innerHTML="";var a=this.getAttribute("chosen");this.xtag.calObj=new K({span:this.getAttribute("span"),view:t(this.getAttribute("view")),chosen:u(a),multiple:this.hasAttribute("multiple"),firstWeekdayNum:this.getAttribute("first-weekday-num")}),b(this,this.xtag.calObj.el),this.xtag.calControls=null,this.xtag.dragType=null,this.xtag.dragStartEl=null,this.xtag.dragAllowTap=!1},inserted:function(){Z||(Z=xtag.addEvent(document,"mouseup",O)),$||($=xtag.addEvent(document,"touchend",O)),this.render(!1)},removed:function(){0===xtag.query(document,"x-calendar").length&&(Z&&(xtag.removeEvent(document,"mouseup",Z),Z=null),$&&(xtag.removeEvent(document,"touchend",$),$=null))}},events:{"tap:delegate(.next)":function(a){var b=a.currentTarget;b.nextMonth(),xtag.fireEvent(b,"nextmonth")},"tap:delegate(.prev)":function(a){var b=a.currentTarget;b.prevMonth(),xtag.fireEvent(b,"prevmonth")},"tapstart:delegate(.day)":function(a){(a.touches||!a.button||a.button===Q)&&(a.preventDefault(),a.baseEvent&&a.baseEvent.preventDefault(),M(a.currentTarget,this))},touchmove:function(a){if(a.touches&&a.touches.length>0){var b=a.currentTarget;if(b.xtag.dragType)for(var c=a.touches[0],d=xtag.query(b,".day"),e=0;e<d.length;e++){var f=d[e];P(c.pageX,c.pageY,i(f))?N(b,f):f.removeAttribute("active")}}},"mouseover:delegate(.day)":function(a){var b=a.currentTarget,c=this;N(b,c)},"mouseout:delegate(.day)":function(){var a=this;a.removeAttribute("active")},"tapend:delegate(.day)":function(a){var b=a.currentTarget;if(b.xtag.dragAllowTap){var c=this,d=c.getAttribute("data-date"),e=t(d);xtag.fireEvent(b,"datetap",{detail:{date:e,iso:d}})}},datetoggleon:function(a){var b=this;b.toggleDateOn(a.detail.date,b.multiple)},datetoggleoff:function(a){var b=this;b.toggleDateOff(a.detail.date)}},accessors:{controls:{attribute:{"boolean":!0},set:function(a){a&&!this.xtag.calControls&&(this.xtag.calControls=J(this.xtag.calObj.labels),b(this,this.xtag.calControls))}},multiple:{attribute:{"boolean":!0},get:function(){return this.xtag.calObj.multiple},set:function(a){this.xtag.calObj.multiple=a,this.chosen=this.chosen}},span:{attribute:{},get:function(){return this.xtag.calObj.span},set:function(a){this.xtag.calObj.span=a}},view:{attribute:{},get:function(){return this.xtag.calObj.view},set:function(a){var b=t(a);b&&(this.xtag.calObj.view=b)}},chosen:{attribute:{skip:!0},get:function(){var a=this.xtag.calObj.chosen;if(this.multiple)return this.xtag.calObj.chosen;if(a.length>0){var b=a[0];return e(b)?b:b[0]}return null},set:function(a){var b=this.multiple?u(a):t(a);this.xtag.calObj.chosen=b?b:null,this.xtag.calObj.chosenString?this.setAttribute("chosen",this.xtag.calObj.chosenString):this.removeAttribute("chosen")}},firstWeekdayNum:{attribute:{name:"first-weekday-num"},set:function(a){this.xtag.calObj.firstWeekdayNum=a}},noToggle:{attribute:{"boolean":!0,name:"notoggle"},set:function(a){a&&(this.chosen=null)}},firstVisibleMonth:{get:function(){return this.xtag.calObj.firstVisibleMonth}},lastVisibleMonth:{get:function(){return this.xtag.calObj.lastVisibleMonth}},firstVisibleDate:{get:function(){return this.xtag.calObj.firstVisibleDate}},lastVisibleDate:{get:function(){return this.xtag.calObj.lastVisibleDate}},customRenderFn:{get:function(){return this.xtag.calObj.customRenderFn},set:function(a){this.xtag.calObj.customRenderFn=a}},labels:{get:function(){return JSON.parse(JSON.stringify(this.xtag.calObj.labels))},set:function(a){this.xtag.calObj.labels=a;var b=this.xtag.calObj.labels,c=this.querySelector(".controls > .prev");c&&(c.textContent=b.prev);var d=this.querySelector(".controls > .next");d&&(d.textContent=b.next)}}},methods:{render:function(a){this.xtag.calObj.render(a)},prevMonth:function(){var a=this.xtag.calObj;a.view=z(a.view)},nextMonth:function(){var a=this.xtag.calObj;a.view=y(a.view)},toggleDateOn:function(a,b){this.xtag.calObj.addDate(a,b),this.chosen=this.chosen},toggleDateOff:function(a){this.xtag.calObj.removeDate(a),this.chosen=this.chosen},toggleDate:function(a,b){this.xtag.calObj.hasChosenDate(a)?this.toggleDateOff(a):this.toggleDateOn(a,b)},hasVisibleDate:function(a,b){return this.xtag.calObj.hasVisibleDate(a,b)}}})}(),function(){function a(a){return a.__transitions__=a.__transitions__||{},a.__transitions__}function b(a,b,d){var e=getComputedStyle(a),f=d[b].after;a.setAttribute("transition",b),f&&!e[g].match(c)&&f()}var c=/[1-9]/,d=/ /g,e=/(\d|\d+?[.]?\d+?)(s|ms)(?!\w)/gi,f="transition"in getComputedStyle(document.documentElement)?"t":xtag.prefix.js+"T",g=f+"ransitionDuration",h=f+"ransitionProperty",i=function(a){xtag.requestFrame(function(){xtag.requestFrame(a)})},j="complete"==document.readyState?i(function(){j=!1}):xtag.addEvent(document,"readystatechange",function(){"complete"==document.readyState&&(i(function(){j=!1}),xtag.removeEvent(document,"readystatechange",j))});xtag.addEvents(document,{transitionend:function(b){var c=b.target,f=c.getAttribute("transition");if(f){var i=0,j=0,k=null,l=getComputedStyle(c),m=a(c),n=l[h].replace(d,"").split(",");if(l[g].replace(e,function(a,b,c){b=parseFloat(b)*("s"===c?1e3:1),b>j&&(k=i,j=b),i++}),k=n[k],!k)throw new SyntaxError("No matching transition property found");b.propertyName==k&&m[f].after&&m[f].after()}}}),xtag.transition=function(c,d,e){var f=a(c),g=f[d]=e||{};g.immediate&&g.immediate(),g.before?(g.before(),j?xtag.skipTransition(c,function(){b(c,d,f)}):i(function(){b(c,d,f)})):b(c,d,f)},xtag.pseudos.transition={onCompiled:function(a,b){var c={},d=b.arguments[0]||"immediate",e=b.arguments[1]||b.key.split(":")[0];return function(){var b=this,f=arguments;return this.hasAttribute("transition")?(c[d]=function(){return a.apply(b,f)},xtag.transition(this,e,c),void 0):a.apply(this,f)}}}}(),function(){function a(a,b){return Array.prototype.indexOf.call(a.children,b)}function b(a,b){return b&&b.nodeName?b:isNaN(b)?xtag.queryChildren(a,b):a.children[b]}function c(a,b,c){return b&&(c?b==a.xtag.selected:b!=a.xtag.selected)&&a==b.parentNode&&"X-CARD"==b.nodeName}function d(a,b,c){var d=e[b],f=a.xtag.selected&&a.xtag.selected[d[0]];f?a.showCard(f,c):(a.loop||-1==a.selectedIndex)&&a.showCard(a[d[1]],c)}var e={next:["nextElementSibling","firstElementChild"],previous:["previousElementSibling","lastElementChild"]};xtag.register("x-deck",{events:{"reveal:delegate(x-card)":function(a){this.parentNode==a.currentTarget&&a.currentTarget.showCard(this)}},accessors:{loop:{attribute:{"boolean":!0}},cards:{get:function(){return xtag.queryChildren(this,"x-card")}},selectedCard:{get:function(){return this.xtag.selected||null},set:function(a){this.showCard(a)}},selectedIndex:{attribute:{name:"selected-index",unlink:!0},get:function(){return this.hasAttribute("selected-index")?Number(this.getAttribute("selected-index")):-1},set:function(a){var b=Number(a),c=this.cards[b];c?(this.setAttribute("selected-index",b),c!=this.xtag.selected&&this.showCard(c)):(this.removeAttribute("selected-index"),this.xtag.selected&&this.hideCard(this.xtag.selected))}},transitionType:{attribute:{name:"transition-type"},get:function(){return this.getAttribute("transition-type")||"fade-scale"}}},methods:{nextCard:function(a){d(this,"next",a)},previousCard:function(a){d(this,"previous",a)},showCard:function(d,e){var f=b(this,d);if(c(this,f,!1)){var g=this.xtag.selected,h=a(this,f);e=e||(h>a(this,g)?"forward":"reverse"),g&&this.hideCard(g,e),this.xtag.selected=f,this.selectedIndex=h,f.hasAttribute("selected")||(f.selected=!0),xtag.transition(f,"show",{before:function(){f.setAttribute("show",""),f.setAttribute("transition-direction",e)},after:function(){xtag.fireEvent(f,"show")}})}},hideCard:function(a,d){var e=b(this,a);c(this,e,!0)&&(this.xtag.selected=null,e.hasAttribute("selected")&&(e.selected=!1),xtag.transition(e,"hide",{before:function(){e.removeAttribute("show"),e.setAttribute("hide",""),e.setAttribute("transition-direction",d||"reverse")},after:function(){e.removeAttribute("hide"),e.removeAttribute("transition"),e.removeAttribute("transition-direction"),xtag.fireEvent(e,"hide")}}))}}}),xtag.register("x-card",{lifecycle:{inserted:function(){var a=this.parentNode;"X-DECK"==a.nodeName&&(this.xtag.deck=a,this!=a.selected&&this.selected&&a.showCard(this))},removed:function(){var a=this.xtag.deck;a&&(this==a.xtag.selected?(a.xtag.selected=null,a.removeAttribute("selected-index")):a.showCard(a.selectedCard),this.xtag.deck=null)}},accessors:{transitionType:{attribute:{name:"transition-type"}},selected:{attribute:{"boolean":!0},set:function(a){var b=this.xtag.deck;b&&(a&&this!=b.selected?b.showCard(this):a||this!=b.selected||b.hideCard(this))}}}})}(),function(){function a(a){var b=a.currentTarget;this.parentNode==b&&(this.parentNode.firstElementChild==this?b.flipped=!1:this.parentNode.lastElementChild==this&&(b.flipped=!0))}xtag.register("x-flipbox",{lifecycle:{created:function(){this.firstElementChild&&xtag.skipTransition(this.firstElementChild,function(){}),this.lastElementChild&&xtag.skipTransition(this.lastElementChild,function(){}),this.hasAttribute("direction")||(this.xtag._direction="right")}},events:{"transitionend:delegate(x-flipbox > *:first-child)":function(a){var b=a.currentTarget;this.parentNode==b&&xtag.fireEvent(b,"flipend")},"reveal:delegate(x-flipbox > *)":a},accessors:{direction:{attribute:{},get:function(){return this.xtag._direction},set:function(a){var b=this;xtag.skipTransition(this.firstElementChild,function(){return b.setAttribute("_anim-direction",a),function(){}}),xtag.skipTransition(this.lastElementChild,function(){b.setAttribute("_anim-direction",a)}),this.xtag._direction=a}},flipped:{attribute:{"boolean":!0}}},methods:{toggle:function(){this.flipped=!this.flipped},showFront:function(){this.flipped=!1},showBack:function(){this.flipped=!0}}})}(),function(){function a(a){var b=a.firstElementChild;if(!b)return{header:null,section:null,footer:null};var c=b.nextElementSibling;return{header:"HEADER"==b.nodeName?b:null,section:"SECTION"==b.nodeName?b:c&&"SECTION"==c.nodeName?c:null,footer:"FOOTER"==a.lastElementChild.nodeName?a.lastElementChild:null}}function b(a,b){var c=b.__layoutScroll__=b.__layoutScroll__||Object.defineProperty(b,"__layoutScroll__",{value:{last:b.scrollTop}}).__layoutScroll__,d=b.scrollTop,e=a.scrollBuffer;return c.max=c.max||Math.max(d+e,e),c.min=c.min||Math.max(d-e,e),c}function c(a,b){a.setAttribute("content-maximizing",null),b.section&&(b.header&&(b.section.style.marginTop="-"+b.header.getBoundingClientRect().height+"px"),b.footer&&(b.section.style.marginBottom="-"+b.footer.getBoundingClientRect().height+"px"))}function d(a,b){a.removeAttribute("content-maximized"),a.removeAttribute("content-maximizing"),b.section&&(b.section.style.marginTop="",b.section.style.marginBottom="")}function e(e){if(!e.currentTarget.hasAttribute("content-maximizing")){var f=e.target,g=e.currentTarget;if(this.scrollhide&&(f.parentNode==g||xtag.matchSelector(f,g.scrollTarget))){var h=f.scrollTop,i=g.scrollBuffer,j=a(g),k=b(g,f);h>k.last?k.min=Math.max(h-i,i):h<k.last&&(k.max=Math.max(h+i,i)),g.maxcontent||(h>k.max&&!g.hasAttribute("content-maximized")?c(g,j):h<k.min&&d(g,j)),k.last=h}}}xtag.register("x-layout",{lifecycle:{created:function(){}},events:{scroll:e,transitionend:function(b){var c=a(this);!this.hasAttribute("content-maximizing")||b.target!=c.header&&b.target!=c.section&&b.target!=c.footer||(this.setAttribute("content-maximized",null),this.removeAttribute("content-maximizing"))},"tap:delegate(section)":function(b){var e=b.currentTarget;if(e.taphide&&this.parentNode==e){var f=a(e);e.hasAttribute("content-maximizing")||e.hasAttribute("content-maximized")?e.maxcontent||d(e,f):c(e,f)}},"mouseover:delegate(section)":function(b){var d=b.currentTarget;!d.hoverhide||this.parentNode!=d||d.hasAttribute("content-maximized")||d.hasAttribute("content-maximizing")||b.relatedTarget&&!this.contains(b.target)||c(d,a(d))},"mouseout:delegate(section)":function(b){var c=b.currentTarget;!c.hoverhide||this.parentNode!=c||!c.hasAttribute("content-maximized")&&!c.hasAttribute("content-maximizing")||c!=b.relatedTarget&&c.contains(b.relatedTarget)||d(c,a(c))}},accessors:{scrollTarget:{attribute:{name:"scroll-target"}},scrollBuffer:{attribute:{name:"scroll-buffer"},get:function(){return Number(this.getAttribute("scroll-buffer"))||30}},taphide:{attribute:{"boolean":!0}},hoverhide:{attribute:{"boolean":!0}},scrollhide:{attribute:{"boolean":!0}},maxcontent:{attribute:{"boolean":!0},set:function(b){var e=a(this);b?c(this,e):this.hasAttribute("content-maximizing")||d(this,e)}}}})}(),function(){function a(a){return!isNaN(parseFloat(a))}function b(b,c){return b.hasAttribute(c)&&a(b.getAttribute(c))}function c(b,c,d,e){if(e=e?e:Math.round,d=a(d)?d:0,!a(b))throw"invalid value "+b;if(!a(c)||0>=+c)throw"invalid step "+c;return e((b-d)/c)*c+d}function d(a,b,d,e){return b>a?b:a>d?Math.max(b,c(d,e,b,Math.floor)):a}function e(a,b,e){var f=c((b-a)/2+a,e,a);return d(f,a,b,e)}function f(a,b){var c=a.min,d=a.max;return(b-c)/(d-c)}function g(a,b){var c=a.min,d=a.max;return(d-c)*b+c}function h(a,b){b=Math.min(Math.max(0,b),1);var e=g(a,b),f=c(e,a.step,a.min);return d(f,a.min,a.max,a.step)}function i(a,b){var c=a.xtag.sliderThumb;if(c){var d=a.getBoundingClientRect(),e=c.getBoundingClientRect(),g=f(a,b),h=a.vertical,i=d[h?"height":"width"],j=e[h?"height":"width"],k=Math.max(i-j,0),l=k*g,m=l/i;c.style[h?"left":"top"]=0,c.style[h?"top":"left"]=100*m+"%",a.xtag.sliderProgress.style[h?"height":"width"]=100*g+"%"}}function j(a){i(a,a.value)}function k(a,b,c){var d=a.xtag.rangeInputEl,e=d.getBoundingClientRect(),f=a.xtag.sliderThumb.getBoundingClientRect().width,g=b-e.left-f/2,i=e.width-f/2;a.vertical&&(i=e.height,g=c-e.top),a.value=h(a,g/i),xtag.fireEvent(a,"input"),j(a)}function l(a,b,c){a.xtag.dragInitVal=a.value,k(a,b,c);var d=a.xtag.callbackFns,e=function(a,b){document.body.addEventListener(a,b)};e("mousemove",d.onMouseDragMove),e("touchmove",d.onTouchDragMove),e("mouseup",d.onDragEnd),e("touchend",d.onDragEnd);var f=a.xtag.sliderThumb;f&&f.setAttribute("active",!0)}function m(a,b,c){k(a,b,c)}function n(a){return{onMouseDragStart:function(b){b.button===p&&(l(a,b.pageX,b.pageY),b.preventDefault())},onTouchDragStart:function(b){var c=b.targetTouches;1===c.length&&(l(a,c[0].pageX,c[0].pageY),b.preventDefault())},onMouseDragMove:function(b){m(a,b.pageX,b.pageY),b.preventDefault()},onTouchDragMove:function(b){var c=b.targetTouches;1===c.length&&(m(a,c[0].pageX,c[0].pageY),b.preventDefault())},onDragEnd:function(b){var c=a.xtag.callbackFns,d=function(a,b){document.body.removeEventListener(a,b)};d("mousemove",c.onMouseDragMove),d("touchmove",c.onTouchDragMove),d("mouseup",c.onDragEnd),d("touchend",c.onDragEnd);var e=a.xtag.sliderThumb;e&&e.removeAttribute("active"),a.value!==a.xtag.dragInitVal&&xtag.fireEvent(a,"change"),a.xtag.dragInitVal=null,b.preventDefault()},onKeyDown:function(a){var b=a.keyCode;if(b in o){var c=this.value,d=this.min,e=this.max,f=this.step,g=Math.max(0,e-d),h=Math.max(g/10,f);switch(o[b]){case"LEFT_ARROW":case"DOWN_ARROW":this.value=Math.max(c-f,d);break;case"RIGHT_ARROW":case"UP_ARROW":this.value=Math.min(c+f,e);break;case"HOME":this.value=d;break;case"END":this.value=e;break;case"PAGE_DOWN":this.value=Math.max(c-h,d);break;case"PAGE_UP":this.value=Math.min(c+h,e)}this.value!==c&&xtag.fireEvent(this,"change"),a.preventDefault()}}}}var o={33:"PAGE_UP",34:"PAGE_DOWN",35:"END",36:"HOME",37:"LEFT_ARROW",38:"UP_ARROW",39:"RIGHT_ARROW",40:"DOWN_ARROW"},p=0;xtag.register("x-slider",{lifecycle:{created:function(){var a=this;a.xtag.callbackFns=n(a),a.xtag.dragInitVal=null;var c=document.createElement("input");xtag.addClass(c,"input"),c.setAttribute("type","range");var d=b(a,"max")?+a.getAttribute("max"):100,f=b(a,"min")?+a.getAttribute("min"):0,g=b(a,"step")?+a.getAttribute("step"):1;g=g>0?g:1;var h=b(a,"value")?+a.getAttribute("value"):e(f,d,g);c.setAttribute("max",d),c.setAttribute("min",f),c.setAttribute("step",g),c.setAttribute("value",h),a.xtag.rangeInputEl=c,a.appendChild(a.xtag.rangeInputEl);var i=document.createElement("div");xtag.addClass(i,"slider-track"),this.xtag.sliderTrack=i,this.appendChild(i);var j=document.createElement("div");xtag.addClass(j,"slider-progress"),this.xtag.sliderProgress=j,i.appendChild(j);var k=document.createElement("span");xtag.addClass(k,"slider-thumb"),this.xtag.sliderThumb=k,this.appendChild(k),"range"!==c.type||a.hasAttribute("polyfill")?a.setAttribute("polyfill",!0):a.removeAttribute("polyfill"),this.addEventListener("mousedown",a.xtag.callbackFns.onMouseDragStart),this.addEventListener("touchstart",a.xtag.callbackFns.onTouchDragStart),this.addEventListener("keydown",a.xtag.callbackFns.onKeyDown),a.setAttribute("value",h)},inserted:function(){var a=this;xtag.requestFrame(function(){xtag.requestFrame(function(){j(a)})})},attributeChanged:function(a){("min"==a||"max"==a||"step"==a)&&j(this)}},events:{"change:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"change")},"input:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"input")},"focus:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"focus",{},{bubbles:!1})},"blur:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"blur",{},{bubbles:!1})}},accessors:{polyfill:{attribute:{"boolean":!0},set:function(a){this.xtag.callbackFns,a?(this.setAttribute("tabindex",0),this.xtag.rangeInputEl.setAttribute("tabindex",-1),this.xtag.rangeInputEl.setAttribute("readonly",!0),j(this)):(this.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("readonly"))}},vertical:{attribute:{"boolean":!0},set:function(){j(this)}},max:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("max")}},min:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("min")}},step:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("step")}},name:{attribute:{selector:"input[type=range]"},set:function(a){var b=this.xtag.rangeInputEl;null===a||void 0===a?b.removeAttribute("name"):b.setAttribute("name",a)}},value:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.value},set:function(b){a(b)||(b=e(this.min,this.max,this.step)),b=+b;var f=this.min,g=this.max,h=this.step,i=c(b,h,f),k=d(i,f,g,h);this.xtag.rangeInputEl.value=k,j(this)}},inputElem:{get:function(){return this.xtag.rangeInputEl}}},methods:{}})}(),function(){function a(){var a=document.documentElement,b={left:a.scrollLeft||document.body.scrollLeft||0,top:a.scrollTop||document.body.scrollTop||0,width:a.clientWidth,height:a.clientHeight};return b.right=b.left+b.width,b.bottom=b.top+b.height,b}function b(b){var c=b.getBoundingClientRect(),d=a(),e=d.left,f=d.top;return{left:c.left+e,right:c.right+e,top:c.top+f,bottom:c.bottom+f,width:c.width,height:c.height}}function c(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom}function d(a){if("x-tabbar"===a.parentNode.nodeName.toLowerCase()){var b=a.targetEvent,c=a.targetSelector?xtag.query(document,a.targetSelector):a.targetElems;c.forEach(function(a){xtag.fireEvent(a,b)})}}xtag.register("x-tabbar",{lifecycle:{created:function(){this.xtag.overallEventToFire="reveal"}},events:{"tap:delegate(x-tabbar-tab)":function(){var a=xtag.query(this.parentNode,"x-tabbar-tab[selected]");a.length&&a.forEach(function(a){a.removeAttribute("selected")}),this.setAttribute("selected",!0)}},accessors:{tabs:{get:function(){return xtag.queryChildren(this,"x-tabbar-tab")}},targetEvent:{attribute:{name:"target-event"},get:function(){return this.xtag.overallEventToFire},set:function(a){this.xtag.overallEventToFire=a}}},methods:{}}),xtag.register("x-tabbar-tab",{lifecycle:{created:function(){this.xtag.targetSelector=null,this.xtag.overrideTargetElems=null,this.xtag.targetEvent=null}},events:{tap:function(a){var e=a.currentTarget;if(a.changedTouches&&a.changedTouches.length>0){var f=a.changedTouches[0],g=b(e);c(f.pageX,f.pageY,g)&&d(e)}else d(e)}},accessors:{targetSelector:{attribute:{name:"target-selector"},get:function(){return this.xtag.targetSelector},set:function(a){this.xtag.targetSelector=a,a&&(this.xtag.overrideTargetElems=null)}},targetElems:{get:function(){return this.targetSelector?xtag.query(document,this.targetSelector):null!==this.xtag.overrideTargetElems?this.xtag.overrideTargetElems:[]},set:function(a){this.removeAttribute("target-selector"),this.xtag.overrideTargetElems=a}},targetEvent:{attribute:{name:"target-event"},get:function(){if(this.xtag.targetEvent)return this.xtag.targetEvent;if("x-tabbar"===this.parentNode.nodeName.toLowerCase())return this.parentNode.targetEvent;throw"tabbar-tab is missing event to fire"},set:function(a){this.xtag.targetEvent=a}}},methods:{}})}(),function(){function a(a){var b=a.xtag.input.form;b?a.removeAttribute("x-toggle-no-form"):a.setAttribute("x-toggle-no-form",""),a.xtag.scope=a.parentNode?b||document:null}function b(a){var b={},c=a==document?"[x-toggle-no-form]":"";xtag.query(a,"x-toggle[name]"+c).forEach(function(d){var e=d.name;if(e&&!b[e]){var f=xtag.query(a,'x-toggle[name="'+e+'"]'+c),g=f.length>1?"radio":"checkbox";f.forEach(function(a){a.xtag&&a.xtag.input&&(a.type=g)}),b[e]=!0}})}function c(a){if(f&&a.group&&"radio"!=a.type){var b=a.groupToggles,c='x-toggle[group="'+a.group+'"][active]',d=a.xtag.scope.querySelector(c);if(d&&a!=d){a.checked=d.checked;var e=d.checked,g=b.indexOf(a),h=b.indexOf(d),i=Math.min(g,h),j=Math.max(g,h);return b.slice(i,j+1).forEach(function(a){a!=d&&(a.checked=e)}),!0}}}function d(a){e(a)||(a.groupToggles.forEach(function(a){a.active=!1}),a.active=!0)}function e(a){return a.parentNode&&"X-TOGGLEBAR"==a.parentNode.nodeName}var f=!1;xtag.addEvents(document,{DOMComponentsLoaded:function(){b(document),xtag.toArray(document.forms).forEach(b)},WebComponentsReady:function(){b(document),xtag.toArray(document.forms).forEach(b)},keydown:function(a){f=a.shiftKey},keyup:function(a){f=a.shiftKey},"focus:delegate(x-toggle)":function(){this.focus=!0,this.xtag.input.focus()},"blur:delegate(x-toggle)":function(){this.focus=!1},"tap:delegate(x-toggle)":function(){var a=this.xtag.input;if("radio"==a.type?!this.checked:!0){a.checked=!a.checked;var b=document.createEvent("Event");b.initEvent("change",!0,!1),a.dispatchEvent(b)}a.focus()},"change:delegate(x-toggle)":function(){this.xtag.input.focus(),(e(this)||!c(this)&&"radio"!=this.type)&&(this.checked=this.xtag.input.checked),d(this)}});var g=xtag.createFragment('<input /><div class="x-toggle-check"></div>');xtag.register("x-toggle",{lifecycle:{created:function(){this.appendChild(g.cloneNode(!0)),this.xtag.input=this.querySelector("input"),this.xtag.checkEl=this.querySelector(".x-toggle-check"),this.type="checkbox",a(this);var b=this.getAttribute("name");b&&(this.xtag.input.name=this.getAttribute("name")),this.hasAttribute("checked")&&(this.checked=!0)},inserted:function(){a(this),this.name&&b(this.xtag.scope)},removed:function(){b(this.xtag.scope),a(this)}},accessors:{noBox:{attribute:{name:"no-box","boolean":!0}},type:{attribute:{},set:function(a){this.xtag.input.type=a}},label:{attribute:{}},focus:{attribute:{"boolean":!0}},active:{attribute:{"boolean":!0}},group:{attribute:{}},groupToggles:{get:function(){return xtag.query(this.xtag.scope,'x-toggle[group="'+this.group+'"]')
+}},name:{attribute:{skip:!0},set:function(a){null===a?(this.removeAttribute("name"),this.type="checkbox"):this.setAttribute("name",a),this.xtag.input.name=a,b(this.xtag.scope)}},checked:{get:function(){return this.xtag.input.checked},set:function(a){var b=this.name,c="true"===a||a===!0;if(b){var d=this.xtag.scope==document?"[x-toggle-no-form]":"",e='x-toggle[checked][name="'+b+'"]'+d,f=this.xtag.scope.querySelector(e);f&&f.removeAttribute("checked")}this.xtag.input.checked=c,c?this.setAttribute("checked",""):this.removeAttribute("checked")}},value:{attribute:{},get:function(){return this.xtag.input.value},set:function(a){this.xtag.input.value=a}}}}),xtag.register("x-togglebar",{events:{}})}();
\ No newline at end of file
diff --git a/dist/x-tag-appbar.css b/dist/x-tag-appbar.css
index 33220d40..dfa07d37 100644
--- a/dist/x-tag-appbar.css
+++ b/dist/x-tag-appbar.css
@@ -71,7 +71,7 @@ x-appbar > button:hover {
   background-color: #00405d;
 }
 x-appbar > button::-moz-focus-inner {
-  bordr: 0;
+  border: 0;
   padding: 0;
 }
 x-appbar > header:after {
diff --git a/dist/x-tag-appbar.min.css b/dist/x-tag-appbar.min.css
index a28f410d..d991ba16 100644
--- a/dist/x-tag-appbar.min.css
+++ b/dist/x-tag-appbar.min.css
@@ -7,5 +7,5 @@ x-appbar > header{font-weight:600}
 x-appbar > *{color:#fff;font-family:"Fira Sans","Fira Sans","Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;font-size:inherit;line-height:inherit;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
 x-appbar > button{cursor:pointer;padding-left:2px;padding-right:2px;min-width:45px;background:transparent}
 x-appbar > button:hover{background-color:#00405d}
-x-appbar > button::-moz-focus-inner{bordr:0;padding:0}
+x-appbar > button::-moz-focus-inner{border:0;padding:0}
 x-appbar > header:after{padding-left:6px;font-size:60%}
diff --git a/dist/x-tag-deck.css b/dist/x-tag-deck.css
index ee94a50e..cb49b8f0 100644
--- a/dist/x-tag-deck.css
+++ b/dist/x-tag-deck.css
@@ -1,244 +1,146 @@
-x-deck,
-x-deck > x-card {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=flipX][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: perspective(800px) rotateX(180deg);
-  -moz-transform: perspective(800px) rotateX(180deg);
-  -ms-transform: perspective(800px) rotateX(180deg);
-  -o-transform: perspective(800px) rotateX(180deg);
-  transform: perspective(800px) rotateX(180deg);
-}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=flipX][reverse][selected][_before-animation] {
-  -webkit-transform: perspective(800px) rotateX(-180deg);
-  -moz-transform: perspective(800px) rotateX(-180deg);
-  -ms-transform: perspective(800px) rotateX(-180deg);
-  -o-transform: perspective(800px) rotateX(-180deg);
-  transform: perspective(800px) rotateX(-180deg);
-}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=flipY][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: perspective(800px) rotateY(180deg);
-  -moz-transform: perspective(800px) rotateY(180deg);
-  -ms-transform: perspective(800px) rotateY(180deg);
-  -o-transform: perspective(800px) rotateY(180deg);
-  transform: perspective(800px) rotateY(180deg);
-}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=flipY][reverse][selected][_before-animation] {
-  -webkit-transform: perspective(800px) rotateY(-180deg);
-  -moz-transform: perspective(800px) rotateY(-180deg);
-  -ms-transform: perspective(800px) rotateY(-180deg);
-  -o-transform: perspective(800px) rotateY(-180deg);
-  transform: perspective(800px) rotateY(-180deg);
-}
-x-deck > x-card[selected] {
-  z-index: 2;
-}
-x-deck > x-card[leaving] {
-  z-index: 1;
-}
-x-deck > x-card[card-anim-type=coverLeft][reverse][selected],
-x-deck > x-card[card-anim-type=coverRight][reverse][selected],
-x-deck > x-card[card-anim-type=coverUp][reverse][selected],
-x-deck > x-card[card-anim-type=coverDown][reverse][selected],
-x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[selected],
-x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[selected],
-x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[selected],
-x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[selected] {
-  z-index: 1;
-}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving],
-x-deck > x-card[card-anim-type=coverRight][reverse][leaving],
-x-deck > x-card[card-anim-type=coverUp][reverse][leaving],
-x-deck > x-card[card-anim-type=coverDown][reverse][leaving],
-x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving],
-x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving],
-x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving],
-x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving] {
-  z-index: 2;
-}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollRight][reverse][selected][_before-animation] {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollRight][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[selected][_before-animation] {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollDown][reverse][selected][_before-animation] {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollDown][reverse][leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=scrollUp][reverse][selected][_before-animation],
-x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[selected][_before-animation] {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=scrollUp][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
-x-deck > x-card[card-anim-type=coverLeft]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverRight][reverse][selected][_before-animation] {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=coverRight]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverLeft][reverse][selected][_before-animation] {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=coverUp]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverDown][reverse][selected][_before-animation] {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
-x-deck > x-card[card-anim-type=coverDown]:not([reverse])[selected][_before-animation],
-x-deck > x-card[card-anim-type=uncoverUp][reverse][selected][_before-animation] {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=coverRight][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(-100%);
-  -moz-transform: translateX(-100%);
-  -ms-transform: translateX(-100%);
-  -o-transform: translateX(-100%);
-  transform: translateX(-100%);
-}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateX(100%);
-  -moz-transform: translateX(100%);
-  -ms-transform: translateX(100%);
-  -o-transform: translateX(100%);
-  transform: translateX(100%);
-}
-x-deck > x-card[card-anim-type=coverDown][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(-100%);
-  -moz-transform: translateY(-100%);
-  -ms-transform: translateY(-100%);
-  -o-transform: translateY(-100%);
-  transform: translateY(-100%);
-}
-x-deck > x-card[card-anim-type=coverUp][reverse][leaving]:not([_before-animation]),
-x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving]:not([_before-animation]) {
-  -webkit-transform: translateY(100%);
-  -moz-transform: translateY(100%);
-  -ms-transform: translateY(100%);
-  -o-transform: translateY(100%);
-  transform: translateY(100%);
-}
 x-deck {
   display: block;
   position: relative;
   overflow: hidden;
-  width: 100%;
   height: 100%;
+  width: 100%;
 }
 x-deck > x-card {
+  display: none;
+  position: absolute !important;
+  left: 0;
+  right: 0;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  z-index: 0;
+  opacity: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  -ms-box-sizing: border-box;
+  box-sizing: border-box;
   -webkit-transform-style: preserve-3d;
   -moz-transform-style: preserve-3d;
   -ms-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;
+  -webkit-transform: translate(0%, 0%) scale(1);
+  -moz-transform: translate(0%, 0%) scale(1);
+  -ms-transform: translate(0%, 0%) scale(1);
+  -o-transform: translate(0%, 0%) scale(1);
+  transform: translate(0%, 0%) scale(1);
+}
+x-deck > x-card[selected],
+x-deck > x-card[transition] {
   display: block;
-  overflow: hidden;
-  position: absolute !important;
-  -webkit-transition-property: -webkit-transform;
-  -moz-transition-property: -moz-transform;
-  -ms-transition-property: -ms-transform;
-  -o-transition-property: -o-transform;
-  transition-property: transform;
-  -webkit-transition-duration: 0.5s;
-  -moz-transition-duration: 0.5s;
-  -ms-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: ease;
-  -moz-transition-timing-function: ease;
-  -ms-transition-timing-function: ease;
-  -o-transition-timing-function: ease;
-  transition-timing-function: ease;
-  -webkit-transition-delay: 0s;
-  -moz-transition-delay: 0s;
-  -ms-transition-delay: 0s;
-  -o-transition-delay: 0s;
-  transition-delay: 0s;
-  -webkit-backface-visibility: hidden;
-  -moz-backface-visibility: hidden;
-  -ms-backface-visibility: hidden;
-  -o-backface-visibility: hidden;
-  backface-visibility: hidden;
-  height: 100%;
-  width: 100%;
-  left: 0px;
-  right: 0px;
-  z-index: 0;
-/** card animation types go here **/
 }
-x-deck > x-card:not([selected]):not([leaving]) {
-  visibility: hidden;
+/*** Default Transition ***/
+x-deck:not([transition-type]) > x-card:not([transition-type]),
+x-deck[transition-type="fade-scale"] > x-card,
+x-deck > x-card[transition-type="fade-scale"] {
   opacity: 0;
+  -webkit-transform: scale(0.85);
+  -moz-transform: scale(0.85);
+  -ms-transform: scale(0.85);
+  -o-transform: scale(0.85);
+  transform: scale(0.85);
+  -webkit-transition: opacity 0.5s ease, -webkit-transform 0.5s ease;
+  -moz-transition: opacity 0.5s ease, -moz-transform 0.5s ease;
+  -ms-transition: opacity 0.5s ease, -ms-transform 0.5s ease;
+  -o-transition: opacity 0.5s ease, -o-transform 0.5s ease;
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+x-deck > x-card[show][transition] {
+  opacity: 1;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -ms-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+}
+/*** General Slide Setup ***/
+x-deck[transition-type^="slide"] > x-card,
+x-deck > x-card[transition-type^="slide"] {
+  z-index: 1;
+}
+x-deck[transition-type^="slide"] > x-card[transition-direction="reverse"],
+x-deck > x-card[transition-type^="slide"][transition-direction="reverse"] {
+  z-index: 2;
+}
+x-deck[transition-type^="slide"] > x-card[show],
+x-deck > x-card[show][transition-type^="slide"],
+x-deck[transition-type^="slide"] > x-card[hide],
+x-deck > x-card[hide][transition-type^="slide"] {
+  -webkit-transition: -webkit-transform 0.6s ease;
+  -moz-transition: -moz-transform 0.6s ease;
+  -ms-transition: -ms-transform 0.6s ease;
+  -o-transition: -o-transform 0.6s ease;
+  transition: transform 0.6s ease;
+}
+/*** Right/Left Slide Styles ***/
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-right"],
+x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-right"],
+x-deck[transition-type="slide-left"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-left"],
+x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-left"] {
+  -webkit-transform: translate(-100%, 0);
+  -moz-transform: translate(-100%, 0);
+  -ms-transform: translate(-100%, 0);
+  -o-transform: translate(-100%, 0);
+  transform: translate(-100%, 0);
+}
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-right"],
+x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-right"],
+x-deck[transition-type="slide-left"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-left"],
+x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-left"] {
+  -webkit-transform: translate(100%, 0);
+  -moz-transform: translate(100%, 0);
+  -ms-transform: translate(100%, 0);
+  -o-transform: translate(100%, 0);
+  transform: translate(100%, 0);
+}
+/*** Up/Down Slide Styles ***/
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-up"],
+x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-up"],
+x-deck[transition-type="slide-down"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-down"],
+x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-down"] {
+  -webkit-transform: translate(0, -100%);
+  -moz-transform: translate(0, -100%);
+  -ms-transform: translate(0, -100%);
+  -o-transform: translate(0, -100%);
+  transform: translate(0, -100%);
+}
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="forward"],
+x-deck > x-card[show][transition-direction="forward"][transition-type="slide-up"],
+x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="reverse"],
+x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-up"],
+x-deck[transition-type="slide-down"] > x-card[show][transition-direction="reverse"],
+x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-down"],
+x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="forward"],
+x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-down"] {
+  -webkit-transform: translate(0, 100%);
+  -moz-transform: translate(0, 100%);
+  -ms-transform: translate(0, 100%);
+  -o-transform: translate(0, 100%);
+  transform: translate(0, 100%);
+}
+/*** General Slide Show State ***/
+x-deck[transition-type^="slide"] > x-card[show][transition],
+x-deck > x-card[show][transition][transition-type^="slide"] {
+  -webkit-transform: translate(0%, 0%);
+  -moz-transform: translate(0%, 0%);
+  -ms-transform: translate(0%, 0%);
+  -o-transform: translate(0%, 0%);
+  transform: translate(0%, 0%);
 }
diff --git a/dist/x-tag-deck.js b/dist/x-tag-deck.js
index 95b3f7df..2b6e2e45 100644
--- a/dist/x-tag-deck.js
+++ b/dist/x-tag-deck.js
@@ -1,503 +1,186 @@
 (function() {
-    var BEFORE_ANIM_ATTR = "_before-animation";
-    function HistoryStack(validatorFn, itemCap) {
-        this._historyStack = [];
-        this.currIndex = -1;
-        this._itemCap = undefined;
-        this.itemCap = itemCap;
-        this._validatorFn = validatorFn ? validatorFn : function() {
-            return true;
-        };
-    }
-    var HISTORYSTACK_PROTOTYPE = HistoryStack.prototype;
-    HISTORYSTACK_PROTOTYPE.pushState = function(newState) {
-        if (this.canRedo) {
-            this._historyStack.splice(this.currIndex + 1, this._historyStack.length - (this.currIndex + 1));
-        }
-        this._historyStack.push(newState);
-        this.currIndex = this._historyStack.length - 1;
-        this.sanitizeStack();
-        if (this._itemCap !== "none" && this._historyStack.length > this._itemCap) {
-            var len = this._historyStack.length;
-            this._historyStack.splice(0, len - this._itemCap);
-            this.currIndex = this._historyStack.length - 1;
-        }
-    };
-    HISTORYSTACK_PROTOTYPE.sanitizeStack = function() {
-        var validatorFn = this._validatorFn;
-        var lastValidState;
-        var i = 0;
-        while (i < this._historyStack.length) {
-            var state = this._historyStack[i];
-            if (state !== lastValidState && validatorFn(state)) {
-                lastValidState = state;
-                i++;
-            } else {
-                this._historyStack.splice(i, 1);
-                if (i <= this.currIndex) {
-                    this.currIndex--;
-                }
-            }
-        }
-    };
-    HISTORYSTACK_PROTOTYPE.forwards = function() {
-        if (this.canRedo) {
-            this.currIndex++;
-        }
-        this.sanitizeStack();
-    };
-    HISTORYSTACK_PROTOTYPE.backwards = function() {
-        if (this.canUndo) {
-            this.currIndex--;
-        }
-        this.sanitizeStack();
-    };
-    Object.defineProperties(HISTORYSTACK_PROTOTYPE, {
-        DEFAULT_CAP: {
-            value: 10
-        },
-        itemCap: {
-            get: function() {
-                return this._itemCap;
-            },
-            set: function(newCap) {
-                if (newCap === undefined) {
-                    this._itemCap = this.DEFAULT_CAP;
-                } else if (newCap === "none") {
-                    this._itemCap = "none";
-                } else {
-                    var num = parseInt(newCap, 10);
-                    if (isNaN(newCap) || newCap <= 0) {
-                        throw "attempted to set invalid item cap: " + newCap;
-                    }
-                    this._itemCap = num;
-                }
-            }
-        },
-        canUndo: {
-            get: function() {
-                return this.currIndex > 0;
-            }
-        },
-        canRedo: {
-            get: function() {
-                return this.currIndex < this._historyStack.length - 1;
-            }
-        },
-        numStates: {
-            get: function() {
-                return this._historyStack.length;
-            }
-        },
-        currState: {
-            get: function() {
-                var index = this.currIndex;
-                if (0 <= index && index < this._historyStack.length) {
-                    return this._historyStack[index];
-                }
-                return null;
-            }
+    var matchNum = /[1-9]/, replaceSpaces = / /g, captureTimes = /(\d|\d+?[.]?\d+?)(s|ms)(?!\w)/gi, transPre = "transition" in getComputedStyle(document.documentElement) ? "t" : xtag.prefix.js + "T", transDur = transPre + "ransitionDuration", transProp = transPre + "ransitionProperty", skipFrame = function(fn) {
+        xtag.requestFrame(function() {
+            xtag.requestFrame(fn);
+        });
+    }, ready = document.readyState == "complete" ? skipFrame(function() {
+        ready = false;
+    }) : xtag.addEvent(document, "readystatechange", function() {
+        if (document.readyState == "complete") {
+            skipFrame(function() {
+                ready = false;
+            });
+            xtag.removeEvent(document, "readystatechange", ready);
         }
     });
-    function getDurationStr(elem) {
-        var style = window.getComputedStyle(elem);
-        var browserDurationName = xtag.prefix.js + "TransitionDuration";
-        if (style.transitionDuration) {
-            return style.transitionDuration;
-        } else {
-            return style[browserDurationName];
-        }
-    }
-    function durationStrToMs(str) {
-        if (typeof str !== typeof "") {
-            return 0;
-        }
-        var reg = /^(\d*\.?\d+)(m?s)$/;
-        var matchInfo = str.toLowerCase().match(reg);
-        if (matchInfo) {
-            var strVal = matchInfo[1];
-            var unit = matchInfo[2];
-            var val = parseFloat(strVal);
-            if (isNaN(val)) {
-                throw "value error";
-            }
-            if (unit === "s") {
-                return val * 1e3;
-            } else if (unit === "ms") {
-                return val;
-            } else {
-                throw "unit error";
-            }
-        } else {
-            return 0;
-        }
-    }
-    function posModulo(x, divisor) {
-        return (x % divisor + divisor) % divisor;
-    }
-    function _getAllCards(elem) {
-        return xtag.queryChildren(elem, "x-card");
+    function getTransitions(node) {
+        node.__transitions__ = node.__transitions__ || {};
+        return node.__transitions__;
     }
-    function _getCardAt(deck, targetIndex) {
-        var cards = _getAllCards(deck);
-        return isNaN(parseInt(targetIndex, 10)) || targetIndex < 0 || targetIndex >= cards.length ? null : cards[targetIndex];
+    function startTransition(node, name, transitions) {
+        var style = getComputedStyle(node), after = transitions[name].after;
+        node.setAttribute("transition", name);
+        if (after && !style[transDur].match(matchNum)) after();
     }
-    function _getCardIndex(deck, card) {
-        var allCards = _getAllCards(deck);
-        return allCards.indexOf(card);
-    }
-    function _animateCardReplacement(deck, oldCard, newCard, cardAnimName, isReverse) {
-        deck.xtag._selectedCard = newCard;
-        var animTimeStamp = new Date();
-        deck.xtag._lastAnimTimestamp = animTimeStamp;
-        var _onComplete = function() {
-            if (animTimeStamp === deck.xtag._lastAnimTimestamp) {
-                _sanitizeCardAttrs(deck);
-                xtag.fireEvent(deck, "shuffleend", {
-                    detail: {
-                        oldCard: oldCard,
-                        newCard: newCard
-                    }
+    xtag.addEvents(document, {
+        transitionend: function(e) {
+            var node = e.target, name = node.getAttribute("transition");
+            if (name) {
+                var i = 0, max = 0, prop = null, style = getComputedStyle(node), transitions = getTransitions(node), props = style[transProp].replace(replaceSpaces, "").split(",");
+                style[transDur].replace(captureTimes, function(match, time, unit) {
+                    time = parseFloat(time) * (unit === "s" ? 1e3 : 1);
+                    if (time > max) prop = i, max = time;
+                    i++;
                 });
+                prop = props[prop];
+                if (!prop) throw new SyntaxError("No matching transition property found"); else if (e.propertyName == prop && transitions[name].after) transitions[name].after();
             }
-        };
-        if (newCard === oldCard) {
-            _onComplete();
-            return;
         }
-        var oldCardAnimReady = false;
-        var newCardAnimReady = false;
-        var animationStarted = false;
-        var _attemptBeforeCallback = function() {
-            if (oldCardAnimReady && newCardAnimReady) {
-                _getAllCards(deck).forEach(function(card) {
-                    card.removeAttribute("selected");
-                    card.removeAttribute("leaving");
-                });
-                oldCard.setAttribute("leaving", true);
-                newCard.setAttribute("selected", true);
-                deck.xtag._selectedCard = newCard;
-                deck.selectedIndex = _getCardIndex(deck, newCard);
-                if (isReverse) {
-                    oldCard.setAttribute("reverse", true);
-                    newCard.setAttribute("reverse", true);
-                }
-                xtag.fireEvent(deck, "shufflestart", {
-                    detail: {
-                        oldCard: oldCard,
-                        newCard: newCard
-                    }
-                });
-            }
-        };
-        var _attemptAnimation = function() {
-            if (animationStarted) {
-                return;
-            }
-            if (!(oldCardAnimReady && newCardAnimReady)) {
-                return;
-            }
-            _doAnimation();
-        };
-        var _doAnimation = function() {
-            animationStarted = true;
-            var oldCardDone = false;
-            var newCardDone = false;
-            var animationComplete = false;
-            var onTransitionComplete = function(e) {
-                if (animationComplete) {
-                    return;
-                }
-                if (e.target === oldCard) {
-                    oldCardDone = true;
-                    oldCard.removeEventListener("transitionend", onTransitionComplete);
-                } else if (e.target === newCard) {
-                    newCardDone = true;
-                    newCard.removeEventListener("transitionend", onTransitionComplete);
-                }
-                if (oldCardDone && newCardDone) {
-                    animationComplete = true;
-                    _onComplete();
-                }
-            };
-            oldCard.addEventListener("transitionend", onTransitionComplete);
-            newCard.addEventListener("transitionend", onTransitionComplete);
-            var oldDuration = durationStrToMs(getDurationStr(oldCard));
-            var newDuration = durationStrToMs(getDurationStr(newCard));
-            var maxDuration = Math.max(oldDuration, newDuration);
-            var waitMultiplier = 1.15;
-            var timeoutDuration = cardAnimName.toLowerCase() === "none" ? 0 : Math.ceil(maxDuration * waitMultiplier);
-            if (timeoutDuration === 0) {
-                animationComplete = true;
-                oldCard.removeEventListener("transitionend", onTransitionComplete);
-                newCard.removeEventListener("transitionend", onTransitionComplete);
-                oldCard.removeAttribute(BEFORE_ANIM_ATTR);
-                newCard.removeAttribute(BEFORE_ANIM_ATTR);
-                _onComplete();
-            } else {
-                oldCard.removeAttribute(BEFORE_ANIM_ATTR);
-                newCard.removeAttribute(BEFORE_ANIM_ATTR);
-                window.setTimeout(function() {
-                    if (animationComplete) {
-                        return;
-                    }
-                    animationComplete = true;
-                    oldCard.removeEventListener("transitionend", onTransitionComplete);
-                    newCard.removeEventListener("transitionend", onTransitionComplete);
-                    _onComplete();
-                }, timeoutDuration);
-            }
-        };
-        xtag.skipTransition(oldCard, function() {
-            oldCard.setAttribute("card-anim-type", cardAnimName);
-            oldCard.setAttribute(BEFORE_ANIM_ATTR, true);
-            oldCardAnimReady = true;
-            _attemptBeforeCallback();
-            return _attemptAnimation;
-        }, this);
-        xtag.skipTransition(newCard, function() {
-            newCard.setAttribute("card-anim-type", cardAnimName);
-            newCard.setAttribute(BEFORE_ANIM_ATTR, true);
-            newCardAnimReady = true;
-            _attemptBeforeCallback();
-            return _attemptAnimation;
-        }, this);
-    }
-    function _replaceCurrCard(deck, newCard, transitionType, progressType, ignoreHistory) {
-        var oldCard = deck.xtag._selectedCard;
-        if (oldCard === newCard) {
-            var eDetail = {
-                detail: {
-                    oldCard: oldCard,
-                    newCard: newCard
-                }
+    });
+    xtag.transition = function(node, name, obj) {
+        var transitions = getTransitions(node), options = transitions[name] = obj || {};
+        if (options.immediate) options.immediate();
+        if (options.before) {
+            options.before();
+            if (ready) xtag.skipTransition(node, function() {
+                startTransition(node, name, transitions);
+            }); else skipFrame(function() {
+                startTransition(node, name, transitions);
+            });
+        } else startTransition(node, name, transitions);
+    };
+    xtag.pseudos.transition = {
+        onCompiled: function(fn, pseudo) {
+            var options = {}, when = pseudo["arguments"][0] || "immediate", name = pseudo["arguments"][1] || pseudo.key.split(":")[0];
+            return function() {
+                var target = this, args = arguments;
+                if (this.hasAttribute("transition")) {
+                    options[when] = function() {
+                        return fn.apply(target, args);
+                    };
+                    xtag.transition(this, name, options);
+                } else return fn.apply(this, args);
             };
-            xtag.fireEvent(deck, "shufflestart", eDetail);
-            xtag.fireEvent(deck, "shuffleend", eDetail);
-            return;
-        }
-        _sanitizeCardAttrs(deck);
-        if (transitionType === undefined) {
-            transitionType = "none";
         }
-        var isReverse;
-        switch (progressType) {
-          case "forward":
-            isReverse = false;
-            break;
-
-          case "reverse":
-            isReverse = true;
-            break;
+    };
+})();
 
-          default:
-            if (!oldCard) {
-                isReverse = false;
-            }
-            var allCards = _getAllCards(deck);
-            if (allCards.indexOf(newCard) < allCards.indexOf(oldCard)) {
-                isReverse = true;
-            } else {
-                isReverse = false;
-            }
-            break;
-        }
-        if (newCard.hasAttribute("transition-override")) {
-            transitionType = newCard.getAttribute("transition-override");
-        }
-        if (!ignoreHistory) {
-            deck.xtag.history.pushState(newCard);
-        }
-        _animateCardReplacement(deck, oldCard, newCard, transitionType, isReverse);
+(function() {
+    var sides = {
+        next: [ "nextElementSibling", "firstElementChild" ],
+        previous: [ "previousElementSibling", "lastElementChild" ]
+    };
+    function indexOfCard(deck, card) {
+        return Array.prototype.indexOf.call(deck.children, card);
     }
-    function _replaceWithIndex(deck, targetIndex, transitionType, progressType) {
-        var newCard = _getCardAt(deck, targetIndex);
-        if (!newCard) {
-            throw "no card at index " + targetIndex;
-        }
-        _replaceCurrCard(deck, newCard, transitionType, progressType);
+    function getCard(deck, item) {
+        return item && item.nodeName ? item : isNaN(item) ? xtag.queryChildren(deck, item) : deck.children[item];
     }
-    function _sanitizeCardAttrs(deck) {
-        if (!deck.xtag._initialized) {
-            return;
-        }
-        var cards = _getAllCards(deck);
-        var currCard = deck.xtag._selectedCard;
-        if (!currCard || currCard.parentNode !== deck) {
-            if (cards.length > 0) {
-                if (deck.xtag.history && deck.xtag.history.numStates > 0) {
-                    currCard = deck.xtag.history.currState;
-                } else {
-                    currCard = cards[0];
-                }
-            } else {
-                currCard = null;
-            }
-        }
-        cards.forEach(function(card) {
-            card.removeAttribute("leaving");
-            card.removeAttribute(BEFORE_ANIM_ATTR);
-            card.removeAttribute("card-anim-type");
-            card.removeAttribute("reverse");
-            if (card !== currCard) {
-                card.removeAttribute("selected");
-            } else {
-                card.setAttribute("selected", true);
-            }
-        });
-        deck.xtag._selectedCard = currCard;
-        deck.selectedIndex = _getCardIndex(deck, currCard);
+    function checkCard(deck, card, selected) {
+        return card && (selected ? card == deck.xtag.selected : card != deck.xtag.selected) && deck == card.parentNode && card.nodeName == "X-CARD";
+    }
+    function shuffle(deck, side, direction) {
+        var getters = sides[side], selected = deck.xtag.selected && deck.xtag.selected[getters[0]];
+        if (selected) deck.showCard(selected, direction); else if (deck.loop || deck.selectedIndex == -1) deck.showCard(deck[getters[1]], direction);
     }
     xtag.register("x-deck", {
-        lifecycle: {
-            created: function() {
-                var self = this;
-                self.xtag._initialized = true;
-                var _historyValidator = function(card) {
-                    return card.parentNode === self;
-                };
-                self.xtag.history = new HistoryStack(_historyValidator, HistoryStack.DEFAULT_CAP);
-                self.xtag._selectedCard = self.xtag._selectedCard ? self.xtag._selectedCard : null;
-                self.xtag._lastAnimTimestamp = null;
-                self.xtag.transitionType = "scrollLeft";
-                var initCard = self.getCardAt(self.getAttribute("selected-index"));
-                if (initCard) {
-                    self.xtag._selectedCard = initCard;
-                }
-                _sanitizeCardAttrs(self);
-                var currCard = self.xtag._selectedCard;
-                if (currCard) {
-                    self.xtag.history.pushState(currCard);
-                }
-            }
-        },
         events: {
-            "show:delegate(x-card)": function() {
-                var card = this;
-                card.show();
+            "reveal:delegate(x-card)": function(e) {
+                if (this.parentNode == e.currentTarget) e.currentTarget.showCard(this);
             }
         },
         accessors: {
-            transitionType: {
+            loop: {
                 attribute: {
-                    name: "transition-type"
-                },
+                    "boolean": true
+                }
+            },
+            cards: {
+                get: function() {
+                    return xtag.queryChildren(this, "x-card");
+                }
+            },
+            selectedCard: {
                 get: function() {
-                    return this.xtag.transitionType;
+                    return this.xtag.selected || null;
                 },
-                set: function(newType) {
-                    this.xtag.transitionType = newType;
+                set: function(card) {
+                    this.showCard(card);
                 }
             },
             selectedIndex: {
                 attribute: {
-                    skip: true,
-                    name: "selected-index"
+                    name: "selected-index",
+                    unlink: true
                 },
                 get: function() {
-                    return _getCardIndex(this, this.xtag._selectedCard);
+                    return this.hasAttribute("selected-index") ? Number(this.getAttribute("selected-index")) : -1;
                 },
-                set: function(newIndex) {
-                    if (this.selectedIndex !== newIndex) {
-                        _replaceWithIndex(this, newIndex, "none");
+                set: function(value) {
+                    var index = Number(value), card = this.cards[index];
+                    if (card) {
+                        this.setAttribute("selected-index", index);
+                        if (card != this.xtag.selected) this.showCard(card);
+                    } else {
+                        this.removeAttribute("selected-index");
+                        if (this.xtag.selected) this.hideCard(this.xtag.selected);
                     }
-                    this.setAttribute("selected-index", newIndex);
                 }
             },
-            historyCap: {
+            transitionType: {
                 attribute: {
-                    name: "history-cap"
-                },
-                get: function() {
-                    return this.xtag.history.itemCap;
+                    name: "transition-type"
                 },
-                set: function(itemCap) {
-                    this.xtag.history.itemCap = itemCap;
-                }
-            },
-            numCards: {
-                get: function() {
-                    return this.getAllCards().length;
-                }
-            },
-            currHistorySize: {
-                get: function() {
-                    return this.xtag.history.numStates;
-                }
-            },
-            currHistoryIndex: {
-                get: function() {
-                    return this.xtag.history.currIndex;
-                }
-            },
-            cards: {
                 get: function() {
-                    return this.getAllCards();
-                }
-            },
-            selectedCard: {
-                get: function() {
-                    return this.getSelectedCard();
+                    return this.getAttribute("transition-type") || "fade-scale";
                 }
             }
         },
         methods: {
-            shuffleTo: function(index, progressType) {
-                var targetCard = _getCardAt(this, index);
-                if (!targetCard) {
-                    throw "invalid shuffleTo index " + index;
-                }
-                var transitionType = this.xtag.transitionType;
-                _replaceWithIndex(this, index, transitionType, progressType);
-            },
-            shuffleNext: function(progressType) {
-                progressType = progressType ? progressType : "auto";
-                var cards = _getAllCards(this);
-                var currCard = this.xtag._selectedCard;
-                var currIndex = cards.indexOf(currCard);
-                if (currIndex > -1) {
-                    this.shuffleTo(posModulo(currIndex + 1, cards.length), progressType);
-                }
-            },
-            shufflePrev: function(progressType) {
-                progressType = progressType ? progressType : "auto";
-                var cards = _getAllCards(this);
-                var currCard = this.xtag._selectedCard;
-                var currIndex = cards.indexOf(currCard);
-                if (currIndex > -1) {
-                    this.shuffleTo(posModulo(currIndex - 1, cards.length), progressType);
-                }
-            },
-            getAllCards: function() {
-                return _getAllCards(this);
-            },
-            getSelectedCard: function() {
-                return this.xtag._selectedCard;
-            },
-            getCardIndex: function(card) {
-                return _getCardIndex(this, card);
-            },
-            getCardAt: function(index) {
-                return _getCardAt(this, index);
-            },
-            historyBack: function(progressType) {
-                var history = this.xtag.history;
-                if (history.canUndo) {
-                    history.backwards();
-                    var newCard = history.currState;
-                    if (newCard) {
-                        _replaceCurrCard(this, newCard, this.transitionType, progressType, true);
-                    }
-                }
-            },
-            historyForward: function(progressType) {
-                var history = this.xtag.history;
-                if (history.canRedo) {
-                    history.forwards();
-                    var newCard = history.currState;
-                    if (newCard) {
-                        _replaceCurrCard(this, newCard, this.transitionType, progressType, true);
-                    }
+            nextCard: function(direction) {
+                shuffle(this, "next", direction);
+            },
+            previousCard: function(direction) {
+                shuffle(this, "previous", direction);
+            },
+            showCard: function(item, direction) {
+                var card = getCard(this, item);
+                if (checkCard(this, card, false)) {
+                    var selected = this.xtag.selected, nextIndex = indexOfCard(this, card);
+                    direction = direction || (nextIndex > indexOfCard(this, selected) ? "forward" : "reverse");
+                    if (selected) this.hideCard(selected, direction);
+                    this.xtag.selected = card;
+                    this.selectedIndex = nextIndex;
+                    if (!card.hasAttribute("selected")) card.selected = true;
+                    xtag.transition(card, "show", {
+                        before: function() {
+                            card.setAttribute("show", "");
+                            card.setAttribute("transition-direction", direction);
+                        },
+                        after: function() {
+                            xtag.fireEvent(card, "show");
+                        }
+                    });
+                }
+            },
+            hideCard: function(item, direction) {
+                var card = getCard(this, item);
+                if (checkCard(this, card, true)) {
+                    this.xtag.selected = null;
+                    if (card.hasAttribute("selected")) card.selected = false;
+                    xtag.transition(card, "hide", {
+                        before: function() {
+                            card.removeAttribute("show");
+                            card.setAttribute("hide", "");
+                            card.setAttribute("transition-direction", direction || "reverse");
+                        },
+                        after: function() {
+                            card.removeAttribute("hide");
+                            card.removeAttribute("transition");
+                            card.removeAttribute("transition-direction");
+                            xtag.fireEvent(card, "hide");
+                        }
+                    });
                 }
             }
         }
@@ -505,53 +188,38 @@
     xtag.register("x-card", {
         lifecycle: {
             inserted: function() {
-                var self = this;
-                var deckContainer = self.parentNode;
-                if (deckContainer) {
-                    if (deckContainer.tagName.toLowerCase() === "x-deck") {
-                        _sanitizeCardAttrs(deckContainer);
-                        self.xtag.parentDeck = deckContainer;
-                        xtag.fireEvent(deckContainer, "cardadd", {
-                            detail: {
-                                card: self
-                            }
-                        });
-                    }
-                }
-            },
-            created: function() {
-                var deckContainer = this.parentNode;
-                if (deckContainer && deckContainer.tagName.toLowerCase() === "x-deck") {
-                    this.xtag.parentDeck = deckContainer;
+                var deck = this.parentNode;
+                if (deck.nodeName == "X-DECK") {
+                    this.xtag.deck = deck;
+                    if (this != deck.selected && this.selected) deck.showCard(this);
                 }
             },
             removed: function() {
-                var self = this;
-                if (!self.xtag.parentDeck) {
-                    return;
+                var deck = this.xtag.deck;
+                if (deck) {
+                    if (this == deck.xtag.selected) {
+                        deck.xtag.selected = null;
+                        deck.removeAttribute("selected-index");
+                    } else deck.showCard(deck.selectedCard);
+                    this.xtag.deck = null;
                 }
-                var deck = self.xtag.parentDeck;
-                deck.xtag.history.sanitizeStack();
-                _sanitizeCardAttrs(deck);
-                xtag.fireEvent(deck, "cardremove", {
-                    detail: {
-                        card: self
-                    }
-                });
             }
         },
         accessors: {
-            transitionOverride: {
+            transitionType: {
                 attribute: {
-                    name: "transition-override"
+                    name: "transition-type"
                 }
-            }
-        },
-        methods: {
-            show: function() {
-                var deck = this.parentNode;
-                if (deck === this.xtag.parentDeck) {
-                    deck.shuffleTo(deck.getCardIndex(this));
+            },
+            selected: {
+                attribute: {
+                    "boolean": true
+                },
+                set: function(val) {
+                    var deck = this.xtag.deck;
+                    if (deck) {
+                        if (val && this != deck.selected) deck.showCard(this); else if (!val && this == deck.selected) deck.hideCard(this);
+                    }
                 }
             }
         }
diff --git a/dist/x-tag-deck.min.css b/dist/x-tag-deck.min.css
index 456cf2df..51721031 100644
--- a/dist/x-tag-deck.min.css
+++ b/dist/x-tag-deck.min.css
@@ -1,28 +1,13 @@
-x-deck,x-deck > x-card{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=flipX][reverse][leaving]:not([_before-animation]){-webkit-transform:perspective(800px) rotateX(180deg);-moz-transform:perspective(800px) rotateX(180deg);-ms-transform:perspective(800px) rotateX(180deg);-o-transform:perspective(800px) rotateX(180deg);transform:perspective(800px) rotateX(180deg)}
-x-deck > x-card[card-anim-type=flipX]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=flipX][reverse][selected][_before-animation]{-webkit-transform:perspective(800px) rotateX(-180deg);-moz-transform:perspective(800px) rotateX(-180deg);-ms-transform:perspective(800px) rotateX(-180deg);-o-transform:perspective(800px) rotateX(-180deg);transform:perspective(800px) rotateX(-180deg)}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=flipY][reverse][leaving]:not([_before-animation]){-webkit-transform:perspective(800px) rotateY(180deg);-moz-transform:perspective(800px) rotateY(180deg);-ms-transform:perspective(800px) rotateY(180deg);-o-transform:perspective(800px) rotateY(180deg);transform:perspective(800px) rotateY(180deg)}
-x-deck > x-card[card-anim-type=flipY]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=flipY][reverse][selected][_before-animation]{-webkit-transform:perspective(800px) rotateY(-180deg);-moz-transform:perspective(800px) rotateY(-180deg);-ms-transform:perspective(800px) rotateY(-180deg);-o-transform:perspective(800px) rotateY(-180deg);transform:perspective(800px) rotateY(-180deg)}
-x-deck > x-card[selected]{z-index:2}
-x-deck > x-card[leaving]{z-index:1}
-x-deck > x-card[card-anim-type=coverLeft][reverse][selected],x-deck > x-card[card-anim-type=coverRight][reverse][selected],x-deck > x-card[card-anim-type=coverUp][reverse][selected],x-deck > x-card[card-anim-type=coverDown][reverse][selected],x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[selected],x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[selected],x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[selected],x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[selected]{z-index:1}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving],x-deck > x-card[card-anim-type=coverRight][reverse][leaving],x-deck > x-card[card-anim-type=coverUp][reverse][leaving],x-deck > x-card[card-anim-type=coverDown][reverse][leaving],x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving],x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving],x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving],x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving]{z-index:2}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=scrollRight][reverse][selected][_before-animation]{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=scrollLeft]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollRight][reverse][leaving]:not([_before-animation]){-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][selected][_before-animation],x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[selected][_before-animation]{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=scrollLeft][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollRight]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=scrollDown][reverse][selected][_before-animation]{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck > x-card[card-anim-type=scrollUp]:not([reverse])[leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollDown][reverse][leaving]:not([_before-animation]){-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=scrollUp][reverse][selected][_before-animation],x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[selected][_before-animation]{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=scrollUp][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=scrollDown]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck > x-card[card-anim-type=coverLeft]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverRight][reverse][selected][_before-animation]{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=coverRight]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverLeft][reverse][selected][_before-animation]{-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=coverUp]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverDown][reverse][selected][_before-animation]{-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck > x-card[card-anim-type=coverDown]:not([reverse])[selected][_before-animation],x-deck > x-card[card-anim-type=uncoverUp][reverse][selected][_before-animation]{-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=coverRight][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverLeft]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%)}
-x-deck > x-card[card-anim-type=coverLeft][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverRight]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%)}
-x-deck > x-card[card-anim-type=coverDown][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverUp]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateY(-100%);-moz-transform:translateY(-100%);-ms-transform:translateY(-100%);-o-transform:translateY(-100%);transform:translateY(-100%)}
-x-deck > x-card[card-anim-type=coverUp][reverse][leaving]:not([_before-animation]),x-deck > x-card[card-anim-type=uncoverDown]:not([reverse])[leaving]:not([_before-animation]){-webkit-transform:translateY(100%);-moz-transform:translateY(100%);-ms-transform:translateY(100%);-o-transform:translateY(100%);transform:translateY(100%)}
-x-deck{display:block;position:relative;overflow:hidden;width:100%;height:100%}
-x-deck > x-card{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;display:block;overflow:hidden;position:absolute !important;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-ms-transition-property:-ms-transform;-o-transition-property:-o-transform;transition-property:transform;-webkit-transition-duration:.5s;-moz-transition-duration:.5s;-ms-transition-duration:.5s;-o-transition-duration:.5s;transition-duration:.5s;-webkit-transition-timing-function:ease;-moz-transition-timing-function:ease;-ms-transition-timing-function:ease;-o-transition-timing-function:ease;transition-timing-function:ease;-webkit-transition-delay:0;-moz-transition-delay:0;-ms-transition-delay:0;-o-transition-delay:0;transition-delay:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;height:100%;width:100%;left:0;right:0;z-index:0;}
-x-deck > x-card:not([selected]):not([leaving]){visibility:hidden;opacity:0}
+x-deck{display:block;position:relative;overflow:hidden;height:100%;width:100%}
+x-deck > x-card{display:none;position:absolute !important;left:0;right:0;height:100%;width:100%;overflow:hidden;z-index:0;opacity:1;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate(0%,0%) scale(1);-moz-transform:translate(0%,0%) scale(1);-ms-transform:translate(0%,0%) scale(1);-o-transform:translate(0%,0%) scale(1);transform:translate(0%,0%) scale(1)}
+x-deck > x-card[selected],x-deck > x-card[transition]{display:block}
+x-deck:not([transition-type]) > x-card:not([transition-type]),x-deck[transition-type="fade-scale"] > x-card,x-deck > x-card[transition-type="fade-scale"]{opacity:0;-webkit-transform:scale(.85);-moz-transform:scale(.85);-ms-transform:scale(.85);-o-transform:scale(.85);transform:scale(.85);-webkit-transition:opacity .5s ease,-webkit-transform .5s ease;-moz-transition:opacity .5s ease,-moz-transform .5s ease;-ms-transition:opacity .5s ease,-ms-transform .5s ease;-o-transition:opacity .5s ease,-o-transform .5s ease;transition:opacity .5s ease,transform .5s ease}
+x-deck > x-card[show][transition]{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}
+x-deck[transition-type^="slide"] > x-card,x-deck > x-card[transition-type^="slide"]{z-index:1}
+x-deck[transition-type^="slide"] > x-card[transition-direction="reverse"],x-deck > x-card[transition-type^="slide"][transition-direction="reverse"]{z-index:2}
+x-deck[transition-type^="slide"] > x-card[show],x-deck > x-card[show][transition-type^="slide"],x-deck[transition-type^="slide"] > x-card[hide],x-deck > x-card[hide][transition-type^="slide"]{-webkit-transition:-webkit-transform .6s ease;-moz-transition:-moz-transform .6s ease;-ms-transition:-ms-transform .6s ease;-o-transition:-o-transform .6s ease;transition:transform .6s ease}
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-right"],x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-right"],x-deck[transition-type="slide-left"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-left"],x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-left"]{-webkit-transform:translate(-100%,0);-moz-transform:translate(-100%,0);-ms-transform:translate(-100%,0);-o-transform:translate(-100%,0);transform:translate(-100%,0)}
+x-deck[transition-type="slide-right"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-right"],x-deck[transition-type="slide-right"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-right"],x-deck[transition-type="slide-left"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-left"],x-deck[transition-type="slide-left"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-left"]{-webkit-transform:translate(100%,0);-moz-transform:translate(100%,0);-ms-transform:translate(100%,0);-o-transform:translate(100%,0);transform:translate(100%,0)}
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-up"],x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-up"],x-deck[transition-type="slide-down"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-down"],x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-down"]{-webkit-transform:translate(0,-100%);-moz-transform:translate(0,-100%);-ms-transform:translate(0,-100%);-o-transform:translate(0,-100%);transform:translate(0,-100%)}
+x-deck[transition-type="slide-up"] > x-card[show][transition-direction="forward"],x-deck > x-card[show][transition-direction="forward"][transition-type="slide-up"],x-deck[transition-type="slide-up"] > x-card[hide][transition-direction="reverse"],x-deck > x-card[hide][transition-direction="reverse"][transition-type="slide-up"],x-deck[transition-type="slide-down"] > x-card[show][transition-direction="reverse"],x-deck > x-card[show][transition-direction="reverse"][transition-type="slide-down"],x-deck[transition-type="slide-down"] > x-card[hide][transition-direction="forward"],x-deck > x-card[hide][transition-direction="forward"][transition-type="slide-down"]{-webkit-transform:translate(0,100%);-moz-transform:translate(0,100%);-ms-transform:translate(0,100%);-o-transform:translate(0,100%);transform:translate(0,100%)}
+x-deck[transition-type^="slide"] > x-card[show][transition],x-deck > x-card[show][transition][transition-type^="slide"]{-webkit-transform:translate(0%,0%);-moz-transform:translate(0%,0%);-ms-transform:translate(0%,0%);-o-transform:translate(0%,0%);transform:translate(0%,0%)}
diff --git a/dist/x-tag-deck.min.js b/dist/x-tag-deck.min.js
index 0b4e55fe..85ef3782 100644
--- a/dist/x-tag-deck.min.js
+++ b/dist/x-tag-deck.min.js
@@ -1 +1 @@
-!function(){function a(a,b){this._historyStack=[],this.currIndex=-1,this._itemCap=void 0,this.itemCap=b,this._validatorFn=a?a:function(){return!0}}function b(a){var b=window.getComputedStyle(a),c=xtag.prefix.js+"TransitionDuration";return b.transitionDuration?b.transitionDuration:b[c]}function c(a){if("string"!=typeof a)return 0;var b=/^(\d*\.?\d+)(m?s)$/,c=a.toLowerCase().match(b);if(c){var d=c[1],e=c[2],f=parseFloat(d);if(isNaN(f))throw"value error";if("s"===e)return 1e3*f;if("ms"===e)return f;throw"unit error"}return 0}function d(a,b){return(a%b+b)%b}function e(a){return xtag.queryChildren(a,"x-card")}function f(a,b){var c=e(a);return isNaN(parseInt(b,10))||0>b||b>=c.length?null:c[b]}function g(a,b){var c=e(a);return c.indexOf(b)}function h(a,d,f,h,i){a.xtag._selectedCard=f;var j=new Date;a.xtag._lastAnimTimestamp=j;var m=function(){j===a.xtag._lastAnimTimestamp&&(k(a),xtag.fireEvent(a,"shuffleend",{detail:{oldCard:d,newCard:f}}))};if(f===d)return m(),void 0;var n=!1,o=!1,p=!1,q=function(){n&&o&&(e(a).forEach(function(a){a.removeAttribute("selected"),a.removeAttribute("leaving")}),d.setAttribute("leaving",!0),f.setAttribute("selected",!0),a.xtag._selectedCard=f,a.selectedIndex=g(a,f),i&&(d.setAttribute("reverse",!0),f.setAttribute("reverse",!0)),xtag.fireEvent(a,"shufflestart",{detail:{oldCard:d,newCard:f}}))},r=function(){p||n&&o&&s()},s=function(){p=!0;var a=!1,e=!1,g=!1,i=function(b){g||(b.target===d?(a=!0,d.removeEventListener("transitionend",i)):b.target===f&&(e=!0,f.removeEventListener("transitionend",i)),a&&e&&(g=!0,m()))};d.addEventListener("transitionend",i),f.addEventListener("transitionend",i);var j=c(b(d)),k=c(b(f)),n=Math.max(j,k),o=1.15,q="none"===h.toLowerCase()?0:Math.ceil(n*o);0===q?(g=!0,d.removeEventListener("transitionend",i),f.removeEventListener("transitionend",i),d.removeAttribute(l),f.removeAttribute(l),m()):(d.removeAttribute(l),f.removeAttribute(l),window.setTimeout(function(){g||(g=!0,d.removeEventListener("transitionend",i),f.removeEventListener("transitionend",i),m())},q))};xtag.skipTransition(d,function(){return d.setAttribute("card-anim-type",h),d.setAttribute(l,!0),n=!0,q(),r},this),xtag.skipTransition(f,function(){return f.setAttribute("card-anim-type",h),f.setAttribute(l,!0),o=!0,q(),r},this)}function i(a,b,c,d,f){var g=a.xtag._selectedCard;if(g===b){var i={detail:{oldCard:g,newCard:b}};return xtag.fireEvent(a,"shufflestart",i),xtag.fireEvent(a,"shuffleend",i),void 0}k(a),void 0===c&&(c="none");var j;switch(d){case"forward":j=!1;break;case"reverse":j=!0;break;default:g||(j=!1);var l=e(a);j=l.indexOf(b)<l.indexOf(g)?!0:!1}b.hasAttribute("transition-override")&&(c=b.getAttribute("transition-override")),f||a.xtag.history.pushState(b),h(a,g,b,c,j)}function j(a,b,c,d){var e=f(a,b);if(!e)throw"no card at index "+b;i(a,e,c,d)}function k(a){if(a.xtag._initialized){var b=e(a),c=a.xtag._selectedCard;c&&c.parentNode===a||(c=b.length>0?a.xtag.history&&a.xtag.history.numStates>0?a.xtag.history.currState:b[0]:null),b.forEach(function(a){a.removeAttribute("leaving"),a.removeAttribute(l),a.removeAttribute("card-anim-type"),a.removeAttribute("reverse"),a!==c?a.removeAttribute("selected"):a.setAttribute("selected",!0)}),a.xtag._selectedCard=c,a.selectedIndex=g(a,c)}}var l="_before-animation",m=a.prototype;m.pushState=function(a){if(this.canRedo&&this._historyStack.splice(this.currIndex+1,this._historyStack.length-(this.currIndex+1)),this._historyStack.push(a),this.currIndex=this._historyStack.length-1,this.sanitizeStack(),"none"!==this._itemCap&&this._historyStack.length>this._itemCap){var b=this._historyStack.length;this._historyStack.splice(0,b-this._itemCap),this.currIndex=this._historyStack.length-1}},m.sanitizeStack=function(){for(var a,b=this._validatorFn,c=0;c<this._historyStack.length;){var d=this._historyStack[c];d!==a&&b(d)?(a=d,c++):(this._historyStack.splice(c,1),c<=this.currIndex&&this.currIndex--)}},m.forwards=function(){this.canRedo&&this.currIndex++,this.sanitizeStack()},m.backwards=function(){this.canUndo&&this.currIndex--,this.sanitizeStack()},Object.defineProperties(m,{DEFAULT_CAP:{value:10},itemCap:{get:function(){return this._itemCap},set:function(a){if(void 0===a)this._itemCap=this.DEFAULT_CAP;else if("none"===a)this._itemCap="none";else{var b=parseInt(a,10);if(isNaN(a)||0>=a)throw"attempted to set invalid item cap: "+a;this._itemCap=b}}},canUndo:{get:function(){return this.currIndex>0}},canRedo:{get:function(){return this.currIndex<this._historyStack.length-1}},numStates:{get:function(){return this._historyStack.length}},currState:{get:function(){var a=this.currIndex;return a>=0&&a<this._historyStack.length?this._historyStack[a]:null}}}),xtag.register("x-deck",{lifecycle:{created:function(){var b=this;b.xtag._initialized=!0;var c=function(a){return a.parentNode===b};b.xtag.history=new a(c,a.DEFAULT_CAP),b.xtag._selectedCard=b.xtag._selectedCard?b.xtag._selectedCard:null,b.xtag._lastAnimTimestamp=null,b.xtag.transitionType="scrollLeft";var d=b.getCardAt(b.getAttribute("selected-index"));d&&(b.xtag._selectedCard=d),k(b);var e=b.xtag._selectedCard;e&&b.xtag.history.pushState(e)}},events:{"show:delegate(x-card)":function(){var a=this;a.show()}},accessors:{transitionType:{attribute:{name:"transition-type"},get:function(){return this.xtag.transitionType},set:function(a){this.xtag.transitionType=a}},selectedIndex:{attribute:{skip:!0,name:"selected-index"},get:function(){return g(this,this.xtag._selectedCard)},set:function(a){this.selectedIndex!==a&&j(this,a,"none"),this.setAttribute("selected-index",a)}},historyCap:{attribute:{name:"history-cap"},get:function(){return this.xtag.history.itemCap},set:function(a){this.xtag.history.itemCap=a}},numCards:{get:function(){return this.getAllCards().length}},currHistorySize:{get:function(){return this.xtag.history.numStates}},currHistoryIndex:{get:function(){return this.xtag.history.currIndex}},cards:{get:function(){return this.getAllCards()}},selectedCard:{get:function(){return this.getSelectedCard()}}},methods:{shuffleTo:function(a,b){var c=f(this,a);if(!c)throw"invalid shuffleTo index "+a;var d=this.xtag.transitionType;j(this,a,d,b)},shuffleNext:function(a){a=a?a:"auto";var b=e(this),c=this.xtag._selectedCard,f=b.indexOf(c);f>-1&&this.shuffleTo(d(f+1,b.length),a)},shufflePrev:function(a){a=a?a:"auto";var b=e(this),c=this.xtag._selectedCard,f=b.indexOf(c);f>-1&&this.shuffleTo(d(f-1,b.length),a)},getAllCards:function(){return e(this)},getSelectedCard:function(){return this.xtag._selectedCard},getCardIndex:function(a){return g(this,a)},getCardAt:function(a){return f(this,a)},historyBack:function(a){var b=this.xtag.history;if(b.canUndo){b.backwards();var c=b.currState;c&&i(this,c,this.transitionType,a,!0)}},historyForward:function(a){var b=this.xtag.history;if(b.canRedo){b.forwards();var c=b.currState;c&&i(this,c,this.transitionType,a,!0)}}}}),xtag.register("x-card",{lifecycle:{inserted:function(){var a=this,b=a.parentNode;b&&"x-deck"===b.tagName.toLowerCase()&&(k(b),a.xtag.parentDeck=b,xtag.fireEvent(b,"cardadd",{detail:{card:a}}))},created:function(){var a=this.parentNode;a&&"x-deck"===a.tagName.toLowerCase()&&(this.xtag.parentDeck=a)},removed:function(){var a=this;if(a.xtag.parentDeck){var b=a.xtag.parentDeck;b.xtag.history.sanitizeStack(),k(b),xtag.fireEvent(b,"cardremove",{detail:{card:a}})}}},accessors:{transitionOverride:{attribute:{name:"transition-override"}}},methods:{show:function(){var a=this.parentNode;a===this.xtag.parentDeck&&a.shuffleTo(a.getCardIndex(this))}}})}();
\ No newline at end of file
+!function(){function a(a){return a.__transitions__=a.__transitions__||{},a.__transitions__}function b(a,b,d){var e=getComputedStyle(a),f=d[b].after;a.setAttribute("transition",b),f&&!e[g].match(c)&&f()}var c=/[1-9]/,d=/ /g,e=/(\d|\d+?[.]?\d+?)(s|ms)(?!\w)/gi,f="transition"in getComputedStyle(document.documentElement)?"t":xtag.prefix.js+"T",g=f+"ransitionDuration",h=f+"ransitionProperty",i=function(a){xtag.requestFrame(function(){xtag.requestFrame(a)})},j="complete"==document.readyState?i(function(){j=!1}):xtag.addEvent(document,"readystatechange",function(){"complete"==document.readyState&&(i(function(){j=!1}),xtag.removeEvent(document,"readystatechange",j))});xtag.addEvents(document,{transitionend:function(b){var c=b.target,f=c.getAttribute("transition");if(f){var i=0,j=0,k=null,l=getComputedStyle(c),m=a(c),n=l[h].replace(d,"").split(",");if(l[g].replace(e,function(a,b,c){b=parseFloat(b)*("s"===c?1e3:1),b>j&&(k=i,j=b),i++}),k=n[k],!k)throw new SyntaxError("No matching transition property found");b.propertyName==k&&m[f].after&&m[f].after()}}}),xtag.transition=function(c,d,e){var f=a(c),g=f[d]=e||{};g.immediate&&g.immediate(),g.before?(g.before(),j?xtag.skipTransition(c,function(){b(c,d,f)}):i(function(){b(c,d,f)})):b(c,d,f)},xtag.pseudos.transition={onCompiled:function(a,b){var c={},d=b.arguments[0]||"immediate",e=b.arguments[1]||b.key.split(":")[0];return function(){var b=this,f=arguments;return this.hasAttribute("transition")?(c[d]=function(){return a.apply(b,f)},xtag.transition(this,e,c),void 0):a.apply(this,f)}}}}(),function(){function a(a,b){return Array.prototype.indexOf.call(a.children,b)}function b(a,b){return b&&b.nodeName?b:isNaN(b)?xtag.queryChildren(a,b):a.children[b]}function c(a,b,c){return b&&(c?b==a.xtag.selected:b!=a.xtag.selected)&&a==b.parentNode&&"X-CARD"==b.nodeName}function d(a,b,c){var d=e[b],f=a.xtag.selected&&a.xtag.selected[d[0]];f?a.showCard(f,c):(a.loop||-1==a.selectedIndex)&&a.showCard(a[d[1]],c)}var e={next:["nextElementSibling","firstElementChild"],previous:["previousElementSibling","lastElementChild"]};xtag.register("x-deck",{events:{"reveal:delegate(x-card)":function(a){this.parentNode==a.currentTarget&&a.currentTarget.showCard(this)}},accessors:{loop:{attribute:{"boolean":!0}},cards:{get:function(){return xtag.queryChildren(this,"x-card")}},selectedCard:{get:function(){return this.xtag.selected||null},set:function(a){this.showCard(a)}},selectedIndex:{attribute:{name:"selected-index",unlink:!0},get:function(){return this.hasAttribute("selected-index")?Number(this.getAttribute("selected-index")):-1},set:function(a){var b=Number(a),c=this.cards[b];c?(this.setAttribute("selected-index",b),c!=this.xtag.selected&&this.showCard(c)):(this.removeAttribute("selected-index"),this.xtag.selected&&this.hideCard(this.xtag.selected))}},transitionType:{attribute:{name:"transition-type"},get:function(){return this.getAttribute("transition-type")||"fade-scale"}}},methods:{nextCard:function(a){d(this,"next",a)},previousCard:function(a){d(this,"previous",a)},showCard:function(d,e){var f=b(this,d);if(c(this,f,!1)){var g=this.xtag.selected,h=a(this,f);e=e||(h>a(this,g)?"forward":"reverse"),g&&this.hideCard(g,e),this.xtag.selected=f,this.selectedIndex=h,f.hasAttribute("selected")||(f.selected=!0),xtag.transition(f,"show",{before:function(){f.setAttribute("show",""),f.setAttribute("transition-direction",e)},after:function(){xtag.fireEvent(f,"show")}})}},hideCard:function(a,d){var e=b(this,a);c(this,e,!0)&&(this.xtag.selected=null,e.hasAttribute("selected")&&(e.selected=!1),xtag.transition(e,"hide",{before:function(){e.removeAttribute("show"),e.setAttribute("hide",""),e.setAttribute("transition-direction",d||"reverse")},after:function(){e.removeAttribute("hide"),e.removeAttribute("transition"),e.removeAttribute("transition-direction"),xtag.fireEvent(e,"hide")}}))}}}),xtag.register("x-card",{lifecycle:{inserted:function(){var a=this.parentNode;"X-DECK"==a.nodeName&&(this.xtag.deck=a,this!=a.selected&&this.selected&&a.showCard(this))},removed:function(){var a=this.xtag.deck;a&&(this==a.xtag.selected?(a.xtag.selected=null,a.removeAttribute("selected-index")):a.showCard(a.selectedCard),this.xtag.deck=null)}},accessors:{transitionType:{attribute:{name:"transition-type"}},selected:{attribute:{"boolean":!0},set:function(a){var b=this.xtag.deck;b&&(a&&this!=b.selected?b.showCard(this):a||this!=b.selected||b.hideCard(this))}}}})}();
\ No newline at end of file
diff --git a/dist/x-tag-slider.css b/dist/x-tag-slider.css
index 6ab97ddb..5e76664d 100644
--- a/dist/x-tag-slider.css
+++ b/dist/x-tag-slider.css
@@ -88,16 +88,43 @@ x-slider:not([polyfill]) > .slider-thumb {
 
 x-slider {
   height: 27px;
-  padding-bottom: 2px;
+}
+x-slider:not([polyfill]) .slider-thumb {
+  display: none;
+}
+x-slider:not([polyfill]) input {
+  z-index: 1;
+}
+x-slider[polyfill] input {
+  visibility: hidden;
+}
+x-slider .slider-progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  border-radius: 3px;
+  background: #0095dd;
 }
 x-slider .slider-thumb,
-x-slider input::-moz-range-thumb {
+x-slider input[type='range']::-webkit-slider-thumb {
   background: #fff;
-  -moz-appearance: none;
   -webkit-appearance: none;
   border-radius: 13px;
-  border: 1px solid #979797;
-  box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.5);
+  border: 1px solid #acacac;
+  box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.2);
+  cursor: pointer;
+  display: block;
+  height: 25px;
+  width: 25px;
+}
+x-slider .slider-thumb,
+x-slider input[type='range']::-moz-range-thumb {
+  background: #fff;
+  -moz-appearance: none;
+  border-radius: 13px;
+  border: 1px solid #acacac;
+  box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.2);
   cursor: pointer;
   display: block;
   height: 25px;
@@ -105,18 +132,28 @@ x-slider input::-moz-range-thumb {
 }
 x-slider .slider-track {
   background: #d8d8d8;
-  border-radius: 4px;
+  border-radius: 3px;
   height: 2px;
+  overflow: hidden;
 }
-x-slider > input::-moz-range-track,
-x-slider > input::-webkit-slider-runnable-track {
+x-slider input[type=range]::-moz-range-track {
+  -moz-appearance: none;
   background: #d8d8d8;
+  border: 0 !important;
+  outline: 0;
+  border-radius: 3px;
+  height: 2px;
+  box-shadow: 0 none;
+}
+x-slider input[type=range]::-moz-range-progress {
+  background: #0095dd;
+  border-radius: 3px;
 }
 x-slider input {
   -webkit-appearance: none;
   -moz-appearance: none;
+  appearance: none;
   background: transparent;
   border: 0px solid transparent;
   color: transparent;
-  padding-bottom: 2px;
 }
diff --git a/dist/x-tag-slider.js b/dist/x-tag-slider.js
index 7b9f3ad1..f04bce6b 100644
--- a/dist/x-tag-slider.js
+++ b/dist/x-tag-slider.js
@@ -57,7 +57,7 @@
         return constrainToSteppedRange(roundedVal, slider.min, slider.max, slider.step);
     }
     function _positionThumb(slider, value) {
-        var thumb = slider.xtag.polyFillSliderThumb;
+        var thumb = slider.xtag.sliderThumb;
         if (!thumb) {
             return;
         }
@@ -72,6 +72,7 @@
         var finalPercentage = newThumbX / sliderWidth;
         thumb.style[vertical ? "left" : "top"] = 0;
         thumb.style[vertical ? "top" : "left"] = finalPercentage * 100 + "%";
+        slider.xtag.sliderProgress.style[vertical ? "height" : "width"] = fraction * 100 + "%";
     }
     function _redraw(slider) {
         _positionThumb(slider, slider.value);
@@ -79,8 +80,9 @@
     function _onMouseInput(slider, pageX, pageY) {
         var inputEl = slider.xtag.rangeInputEl;
         var inputOffsets = inputEl.getBoundingClientRect();
-        var inputClickX = pageX - inputOffsets.left;
-        var divideby = inputOffsets.width;
+        var thumbWidth = slider.xtag.sliderThumb.getBoundingClientRect().width;
+        var inputClickX = pageX - inputOffsets.left - thumbWidth / 2;
+        var divideby = inputOffsets.width - thumbWidth / 2;
         if (slider.vertical) {
             divideby = inputOffsets.height;
             inputClickX = pageY - inputOffsets.top;
@@ -100,7 +102,7 @@
         _addBodyListener("touchmove", callbacks.onTouchDragMove);
         _addBodyListener("mouseup", callbacks.onDragEnd);
         _addBodyListener("touchend", callbacks.onDragEnd);
-        var thumb = slider.xtag.polyFillSliderThumb;
+        var thumb = slider.xtag.sliderThumb;
         if (thumb) {
             thumb.setAttribute("active", true);
         }
@@ -146,7 +148,7 @@
                 _removeBodyListener("touchmove", callbacks.onTouchDragMove);
                 _removeBodyListener("mouseup", callbacks.onDragEnd);
                 _removeBodyListener("touchend", callbacks.onDragEnd);
-                var thumb = slider.xtag.polyFillSliderThumb;
+                var thumb = slider.xtag.sliderThumb;
                 if (thumb) {
                     thumb.removeAttribute("active");
                 }
@@ -223,16 +225,40 @@
                 input.setAttribute("value", initVal);
                 self.xtag.rangeInputEl = input;
                 self.appendChild(self.xtag.rangeInputEl);
-                self.xtag.polyFillSliderThumb = null;
+                var sliderTrack = document.createElement("div");
+                xtag.addClass(sliderTrack, "slider-track");
+                this.xtag.sliderTrack = sliderTrack;
+                this.appendChild(sliderTrack);
+                var sliderProgress = document.createElement("div");
+                xtag.addClass(sliderProgress, "slider-progress");
+                this.xtag.sliderProgress = sliderProgress;
+                sliderTrack.appendChild(sliderProgress);
+                var sliderThumb = document.createElement("span");
+                xtag.addClass(sliderThumb, "slider-thumb");
+                this.xtag.sliderThumb = sliderThumb;
+                this.appendChild(sliderThumb);
                 if (input.type !== "range" || self.hasAttribute("polyfill")) {
                     self.setAttribute("polyfill", true);
                 } else {
                     self.removeAttribute("polyfill");
                 }
-                _redraw(self);
+                this.addEventListener("mousedown", self.xtag.callbackFns.onMouseDragStart);
+                this.addEventListener("touchstart", self.xtag.callbackFns.onTouchDragStart);
+                this.addEventListener("keydown", self.xtag.callbackFns.onKeyDown);
+                self.setAttribute("value", initVal);
             },
-            attributeChanged: function() {
-                _redraw(this);
+            inserted: function() {
+                var self = this;
+                xtag.requestFrame(function() {
+                    xtag.requestFrame(function() {
+                        _redraw(self);
+                    });
+                });
+            },
+            attributeChanged: function(property) {
+                if (property == "min" || property == "max" || property == "step") {
+                    _redraw(this);
+                }
             }
         },
         events: {
@@ -268,29 +294,11 @@
                         this.setAttribute("tabindex", 0);
                         this.xtag.rangeInputEl.setAttribute("tabindex", -1);
                         this.xtag.rangeInputEl.setAttribute("readonly", true);
-                        if (!this.xtag.polyFillSliderTrack) {
-                            var sliderTrack = document.createElement("div");
-                            xtag.addClass(sliderTrack, "slider-track");
-                            this.xtag.polyFillSliderTrack = sliderTrack;
-                            this.appendChild(sliderTrack);
-                        }
-                        if (!this.xtag.polyFillSliderThumb) {
-                            var sliderThumb = document.createElement("span");
-                            xtag.addClass(sliderThumb, "slider-thumb");
-                            this.xtag.polyFillSliderThumb = sliderThumb;
-                            this.appendChild(sliderThumb);
-                        }
                         _redraw(this);
-                        this.addEventListener("mousedown", callbackFns.onMouseDragStart);
-                        this.addEventListener("touchstart", callbackFns.onTouchDragStart);
-                        this.addEventListener("keydown", callbackFns.onKeyDown);
                     } else {
                         this.removeAttribute("tabindex");
                         this.xtag.rangeInputEl.removeAttribute("tabindex");
                         this.xtag.rangeInputEl.removeAttribute("readonly");
-                        this.removeEventListener("mousedown", callbackFns.onMouseDragStart);
-                        this.removeEventListener("touchstart", callbackFns.onTouchDragStart);
-                        this.removeEventListener("keydown", callbackFns.onKeyDown);
                     }
                 }
             },
diff --git a/dist/x-tag-slider.min.css b/dist/x-tag-slider.min.css
index 37de2e7b..5ba983cb 100644
--- a/dist/x-tag-slider.min.css
+++ b/dist/x-tag-slider.min.css
@@ -8,8 +8,14 @@ x-slider[polyfill] > input::-webkit-slider-thumb{visibility:hidden}
 x-slider[polyfill] > input::-moz-range-thumb{width:0;height:0}
 x-slider[polyfill] > input::-moz-range-track{height:0;width:0}
 x-slider:not([polyfill]) > .slider-thumb{visibility:hidden !important}
-x-slider{height:27px;padding-bottom:2px}
-x-slider .slider-thumb,x-slider input::-moz-range-thumb{background:#fff;-moz-appearance:none;-webkit-appearance:none;border-radius:13px;border:1px solid #979797;box-shadow:0 1px 2px 0 rgba(0,0,0,0.5);cursor:pointer;display:block;height:25px;width:25px}
-x-slider .slider-track{background:#d8d8d8;border-radius:4px;height:2px}
-x-slider > input::-moz-range-track,x-slider > input::-webkit-slider-runnable-track{background:#d8d8d8}
-x-slider input{-webkit-appearance:none;-moz-appearance:none;background:transparent;border:0 solid transparent;color:transparent;padding-bottom:2px}
+x-slider{height:27px}
+x-slider:not([polyfill]) .slider-thumb{display:none}
+x-slider:not([polyfill]) input{z-index:1}
+x-slider[polyfill] input{visibility:hidden}
+x-slider .slider-progress{position:absolute;top:0;left:0;height:100%;border-radius:3px;background:#0095dd}
+x-slider .slider-thumb,x-slider input[type='range']::-webkit-slider-thumb{background:#fff;-webkit-appearance:none;border-radius:13px;border:1px solid #acacac;box-shadow:0 .5px 1px 0 rgba(0,0,0,0.2);cursor:pointer;display:block;height:25px;width:25px}
+x-slider .slider-thumb,x-slider input[type='range']::-moz-range-thumb{background:#fff;-moz-appearance:none;border-radius:13px;border:1px solid #acacac;box-shadow:0 .5px 1px 0 rgba(0,0,0,0.2);cursor:pointer;display:block;height:25px;width:25px}
+x-slider .slider-track{background:#d8d8d8;border-radius:3px;height:2px;overflow:hidden}
+x-slider input[type=range]::-moz-range-track{-moz-appearance:none;background:#d8d8d8;border:0 !important;outline:0;border-radius:3px;height:2px;box-shadow:0 none}
+x-slider input[type=range]::-moz-range-progress{background:#0095dd;border-radius:3px}
+x-slider input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0 solid transparent;color:transparent}
diff --git a/dist/x-tag-slider.min.js b/dist/x-tag-slider.min.js
index c4591330..8084617a 100644
--- a/dist/x-tag-slider.min.js
+++ b/dist/x-tag-slider.min.js
@@ -1 +1 @@
-!function(){function a(a){return!isNaN(parseFloat(a))}function b(b,c){return b.hasAttribute(c)&&a(b.getAttribute(c))}function c(b,c,d,e){if(e=e?e:Math.round,d=a(d)?d:0,!a(b))throw"invalid value "+b;if(!a(c)||0>=+c)throw"invalid step "+c;return e((b-d)/c)*c+d}function d(a,b,d,e){return b>a?b:a>d?Math.max(b,c(d,e,b,Math.floor)):a}function e(a,b,e){var f=c((b-a)/2+a,e,a);return d(f,a,b,e)}function f(a,b){var c=a.min,d=a.max;return(b-c)/(d-c)}function g(a,b){var c=a.min,d=a.max;return(d-c)*b+c}function h(a,b){b=Math.min(Math.max(0,b),1);var e=g(a,b),f=c(e,a.step,a.min);return d(f,a.min,a.max,a.step)}function i(a,b){var c=a.xtag.polyFillSliderThumb;if(c){var d=a.getBoundingClientRect(),e=c.getBoundingClientRect(),g=f(a,b),h=a.vertical,i=d[h?"height":"width"],j=e[h?"height":"width"],k=Math.max(i-j,0),l=k*g,m=l/i;c.style[h?"left":"top"]=0,c.style[h?"top":"left"]=100*m+"%"}}function j(a){i(a,a.value)}function k(a,b,c){var d=a.xtag.rangeInputEl,e=d.getBoundingClientRect(),f=b-e.left,g=e.width;a.vertical&&(g=e.height,f=c-e.top),a.value=h(a,f/g),xtag.fireEvent(a,"input"),j(a)}function l(a,b,c){a.xtag.dragInitVal=a.value,k(a,b,c);var d=a.xtag.callbackFns,e=function(a,b){document.body.addEventListener(a,b)};e("mousemove",d.onMouseDragMove),e("touchmove",d.onTouchDragMove),e("mouseup",d.onDragEnd),e("touchend",d.onDragEnd);var f=a.xtag.polyFillSliderThumb;f&&f.setAttribute("active",!0)}function m(a,b,c){k(a,b,c)}function n(a){return{onMouseDragStart:function(b){b.button===p&&(l(a,b.pageX,b.pageY),b.preventDefault())},onTouchDragStart:function(b){var c=b.targetTouches;1===c.length&&(l(a,c[0].pageX,c[0].pageY),b.preventDefault())},onMouseDragMove:function(b){m(a,b.pageX,b.pageY),b.preventDefault()},onTouchDragMove:function(b){var c=b.targetTouches;1===c.length&&(m(a,c[0].pageX,c[0].pageY),b.preventDefault())},onDragEnd:function(b){var c=a.xtag.callbackFns,d=function(a,b){document.body.removeEventListener(a,b)};d("mousemove",c.onMouseDragMove),d("touchmove",c.onTouchDragMove),d("mouseup",c.onDragEnd),d("touchend",c.onDragEnd);var e=a.xtag.polyFillSliderThumb;e&&e.removeAttribute("active"),a.value!==a.xtag.dragInitVal&&xtag.fireEvent(a,"change"),a.xtag.dragInitVal=null,b.preventDefault()},onKeyDown:function(a){var b=a.keyCode;if(b in o){var c=this.value,d=this.min,e=this.max,f=this.step,g=Math.max(0,e-d),h=Math.max(g/10,f);switch(o[b]){case"LEFT_ARROW":case"DOWN_ARROW":this.value=Math.max(c-f,d);break;case"RIGHT_ARROW":case"UP_ARROW":this.value=Math.min(c+f,e);break;case"HOME":this.value=d;break;case"END":this.value=e;break;case"PAGE_DOWN":this.value=Math.max(c-h,d);break;case"PAGE_UP":this.value=Math.min(c+h,e)}this.value!==c&&xtag.fireEvent(this,"change"),a.preventDefault()}}}}var o={33:"PAGE_UP",34:"PAGE_DOWN",35:"END",36:"HOME",37:"LEFT_ARROW",38:"UP_ARROW",39:"RIGHT_ARROW",40:"DOWN_ARROW"},p=0;xtag.register("x-slider",{lifecycle:{created:function(){var a=this;a.xtag.callbackFns=n(a),a.xtag.dragInitVal=null;var c=document.createElement("input");xtag.addClass(c,"input"),c.setAttribute("type","range");var d=b(a,"max")?+a.getAttribute("max"):100,f=b(a,"min")?+a.getAttribute("min"):0,g=b(a,"step")?+a.getAttribute("step"):1;g=g>0?g:1;var h=b(a,"value")?+a.getAttribute("value"):e(f,d,g);c.setAttribute("max",d),c.setAttribute("min",f),c.setAttribute("step",g),c.setAttribute("value",h),a.xtag.rangeInputEl=c,a.appendChild(a.xtag.rangeInputEl),a.xtag.polyFillSliderThumb=null,"range"!==c.type||a.hasAttribute("polyfill")?a.setAttribute("polyfill",!0):a.removeAttribute("polyfill"),j(a)},attributeChanged:function(){j(this)}},events:{"change:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"change")},"input:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"input")},"focus:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"focus",{},{bubbles:!1})},"blur:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"blur",{},{bubbles:!1})}},accessors:{polyfill:{attribute:{"boolean":!0},set:function(a){var b=this.xtag.callbackFns;if(a){if(this.setAttribute("tabindex",0),this.xtag.rangeInputEl.setAttribute("tabindex",-1),this.xtag.rangeInputEl.setAttribute("readonly",!0),!this.xtag.polyFillSliderTrack){var c=document.createElement("div");xtag.addClass(c,"slider-track"),this.xtag.polyFillSliderTrack=c,this.appendChild(c)}if(!this.xtag.polyFillSliderThumb){var d=document.createElement("span");xtag.addClass(d,"slider-thumb"),this.xtag.polyFillSliderThumb=d,this.appendChild(d)}j(this),this.addEventListener("mousedown",b.onMouseDragStart),this.addEventListener("touchstart",b.onTouchDragStart),this.addEventListener("keydown",b.onKeyDown)}else this.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("readonly"),this.removeEventListener("mousedown",b.onMouseDragStart),this.removeEventListener("touchstart",b.onTouchDragStart),this.removeEventListener("keydown",b.onKeyDown)}},vertical:{attribute:{"boolean":!0},set:function(){j(this)}},max:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("max")}},min:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("min")}},step:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("step")}},name:{attribute:{selector:"input[type=range]"},set:function(a){var b=this.xtag.rangeInputEl;null===a||void 0===a?b.removeAttribute("name"):b.setAttribute("name",a)}},value:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.value},set:function(b){a(b)||(b=e(this.min,this.max,this.step)),b=+b;var f=this.min,g=this.max,h=this.step,i=c(b,h,f),k=d(i,f,g,h);this.xtag.rangeInputEl.value=k,j(this)}},inputElem:{get:function(){return this.xtag.rangeInputEl}}},methods:{}})}();
\ No newline at end of file
+!function(){function a(a){return!isNaN(parseFloat(a))}function b(b,c){return b.hasAttribute(c)&&a(b.getAttribute(c))}function c(b,c,d,e){if(e=e?e:Math.round,d=a(d)?d:0,!a(b))throw"invalid value "+b;if(!a(c)||0>=+c)throw"invalid step "+c;return e((b-d)/c)*c+d}function d(a,b,d,e){return b>a?b:a>d?Math.max(b,c(d,e,b,Math.floor)):a}function e(a,b,e){var f=c((b-a)/2+a,e,a);return d(f,a,b,e)}function f(a,b){var c=a.min,d=a.max;return(b-c)/(d-c)}function g(a,b){var c=a.min,d=a.max;return(d-c)*b+c}function h(a,b){b=Math.min(Math.max(0,b),1);var e=g(a,b),f=c(e,a.step,a.min);return d(f,a.min,a.max,a.step)}function i(a,b){var c=a.xtag.sliderThumb;if(c){var d=a.getBoundingClientRect(),e=c.getBoundingClientRect(),g=f(a,b),h=a.vertical,i=d[h?"height":"width"],j=e[h?"height":"width"],k=Math.max(i-j,0),l=k*g,m=l/i;c.style[h?"left":"top"]=0,c.style[h?"top":"left"]=100*m+"%",a.xtag.sliderProgress.style[h?"height":"width"]=100*g+"%"}}function j(a){i(a,a.value)}function k(a,b,c){var d=a.xtag.rangeInputEl,e=d.getBoundingClientRect(),f=a.xtag.sliderThumb.getBoundingClientRect().width,g=b-e.left-f/2,i=e.width-f/2;a.vertical&&(i=e.height,g=c-e.top),a.value=h(a,g/i),xtag.fireEvent(a,"input"),j(a)}function l(a,b,c){a.xtag.dragInitVal=a.value,k(a,b,c);var d=a.xtag.callbackFns,e=function(a,b){document.body.addEventListener(a,b)};e("mousemove",d.onMouseDragMove),e("touchmove",d.onTouchDragMove),e("mouseup",d.onDragEnd),e("touchend",d.onDragEnd);var f=a.xtag.sliderThumb;f&&f.setAttribute("active",!0)}function m(a,b,c){k(a,b,c)}function n(a){return{onMouseDragStart:function(b){b.button===p&&(l(a,b.pageX,b.pageY),b.preventDefault())},onTouchDragStart:function(b){var c=b.targetTouches;1===c.length&&(l(a,c[0].pageX,c[0].pageY),b.preventDefault())},onMouseDragMove:function(b){m(a,b.pageX,b.pageY),b.preventDefault()},onTouchDragMove:function(b){var c=b.targetTouches;1===c.length&&(m(a,c[0].pageX,c[0].pageY),b.preventDefault())},onDragEnd:function(b){var c=a.xtag.callbackFns,d=function(a,b){document.body.removeEventListener(a,b)};d("mousemove",c.onMouseDragMove),d("touchmove",c.onTouchDragMove),d("mouseup",c.onDragEnd),d("touchend",c.onDragEnd);var e=a.xtag.sliderThumb;e&&e.removeAttribute("active"),a.value!==a.xtag.dragInitVal&&xtag.fireEvent(a,"change"),a.xtag.dragInitVal=null,b.preventDefault()},onKeyDown:function(a){var b=a.keyCode;if(b in o){var c=this.value,d=this.min,e=this.max,f=this.step,g=Math.max(0,e-d),h=Math.max(g/10,f);switch(o[b]){case"LEFT_ARROW":case"DOWN_ARROW":this.value=Math.max(c-f,d);break;case"RIGHT_ARROW":case"UP_ARROW":this.value=Math.min(c+f,e);break;case"HOME":this.value=d;break;case"END":this.value=e;break;case"PAGE_DOWN":this.value=Math.max(c-h,d);break;case"PAGE_UP":this.value=Math.min(c+h,e)}this.value!==c&&xtag.fireEvent(this,"change"),a.preventDefault()}}}}var o={33:"PAGE_UP",34:"PAGE_DOWN",35:"END",36:"HOME",37:"LEFT_ARROW",38:"UP_ARROW",39:"RIGHT_ARROW",40:"DOWN_ARROW"},p=0;xtag.register("x-slider",{lifecycle:{created:function(){var a=this;a.xtag.callbackFns=n(a),a.xtag.dragInitVal=null;var c=document.createElement("input");xtag.addClass(c,"input"),c.setAttribute("type","range");var d=b(a,"max")?+a.getAttribute("max"):100,f=b(a,"min")?+a.getAttribute("min"):0,g=b(a,"step")?+a.getAttribute("step"):1;g=g>0?g:1;var h=b(a,"value")?+a.getAttribute("value"):e(f,d,g);c.setAttribute("max",d),c.setAttribute("min",f),c.setAttribute("step",g),c.setAttribute("value",h),a.xtag.rangeInputEl=c,a.appendChild(a.xtag.rangeInputEl);var i=document.createElement("div");xtag.addClass(i,"slider-track"),this.xtag.sliderTrack=i,this.appendChild(i);var j=document.createElement("div");xtag.addClass(j,"slider-progress"),this.xtag.sliderProgress=j,i.appendChild(j);var k=document.createElement("span");xtag.addClass(k,"slider-thumb"),this.xtag.sliderThumb=k,this.appendChild(k),"range"!==c.type||a.hasAttribute("polyfill")?a.setAttribute("polyfill",!0):a.removeAttribute("polyfill"),this.addEventListener("mousedown",a.xtag.callbackFns.onMouseDragStart),this.addEventListener("touchstart",a.xtag.callbackFns.onTouchDragStart),this.addEventListener("keydown",a.xtag.callbackFns.onKeyDown),a.setAttribute("value",h)},inserted:function(){var a=this;xtag.requestFrame(function(){xtag.requestFrame(function(){j(a)})})},attributeChanged:function(a){("min"==a||"max"==a||"step"==a)&&j(this)}},events:{"change:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"change")},"input:delegate(input[type=range])":function(a){a.stopPropagation(),xtag.fireEvent(a.currentTarget,"input")},"focus:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"focus",{},{bubbles:!1})},"blur:delegate(input[type=range])":function(a){var b=a.currentTarget;xtag.fireEvent(b,"blur",{},{bubbles:!1})}},accessors:{polyfill:{attribute:{"boolean":!0},set:function(a){this.xtag.callbackFns,a?(this.setAttribute("tabindex",0),this.xtag.rangeInputEl.setAttribute("tabindex",-1),this.xtag.rangeInputEl.setAttribute("readonly",!0),j(this)):(this.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("tabindex"),this.xtag.rangeInputEl.removeAttribute("readonly"))}},vertical:{attribute:{"boolean":!0},set:function(){j(this)}},max:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("max")}},min:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("min")}},step:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.getAttribute("step")}},name:{attribute:{selector:"input[type=range]"},set:function(a){var b=this.xtag.rangeInputEl;null===a||void 0===a?b.removeAttribute("name"):b.setAttribute("name",a)}},value:{attribute:{selector:"input[type=range]"},get:function(){return+this.xtag.rangeInputEl.value},set:function(b){a(b)||(b=e(this.min,this.max,this.step)),b=+b;var f=this.min,g=this.max,h=this.step,i=c(b,h,f),k=d(i,f,g,h);this.xtag.rangeInputEl.value=k,j(this)}},inputElem:{get:function(){return this.xtag.rangeInputEl}}},methods:{}})}();
\ No newline at end of file
diff --git a/dist/x-tag-tabbar.js b/dist/x-tag-tabbar.js
index 1908b852..f8e67687 100644
--- a/dist/x-tag-tabbar.js
+++ b/dist/x-tag-tabbar.js
@@ -31,7 +31,7 @@
     xtag.register("x-tabbar", {
         lifecycle: {
             created: function() {
-                this.xtag.overallEventToFire = "show";
+                this.xtag.overallEventToFire = "reveal";
             }
         },
         events: {
diff --git a/dist/x-tag-tabbar.min.js b/dist/x-tag-tabbar.min.js
index 924a3a28..ca99d097 100644
--- a/dist/x-tag-tabbar.min.js
+++ b/dist/x-tag-tabbar.min.js
@@ -1 +1 @@
-!function(){function a(){var a=document.documentElement,b={left:a.scrollLeft||document.body.scrollLeft||0,top:a.scrollTop||document.body.scrollTop||0,width:a.clientWidth,height:a.clientHeight};return b.right=b.left+b.width,b.bottom=b.top+b.height,b}function b(b){var c=b.getBoundingClientRect(),d=a(),e=d.left,f=d.top;return{left:c.left+e,right:c.right+e,top:c.top+f,bottom:c.bottom+f,width:c.width,height:c.height}}function c(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom}function d(a){if("x-tabbar"===a.parentNode.nodeName.toLowerCase()){var b=a.targetEvent,c=a.targetSelector?xtag.query(document,a.targetSelector):a.targetElems;c.forEach(function(a){xtag.fireEvent(a,b)})}}xtag.register("x-tabbar",{lifecycle:{created:function(){this.xtag.overallEventToFire="show"}},events:{"tap:delegate(x-tabbar-tab)":function(){var a=xtag.query(this.parentNode,"x-tabbar-tab[selected]");a.length&&a.forEach(function(a){a.removeAttribute("selected")}),this.setAttribute("selected",!0)}},accessors:{tabs:{get:function(){return xtag.queryChildren(this,"x-tabbar-tab")}},targetEvent:{attribute:{name:"target-event"},get:function(){return this.xtag.overallEventToFire},set:function(a){this.xtag.overallEventToFire=a}}},methods:{}}),xtag.register("x-tabbar-tab",{lifecycle:{created:function(){this.xtag.targetSelector=null,this.xtag.overrideTargetElems=null,this.xtag.targetEvent=null}},events:{tap:function(a){var e=a.currentTarget;if(a.changedTouches&&a.changedTouches.length>0){var f=a.changedTouches[0],g=b(e);c(f.pageX,f.pageY,g)&&d(e)}else d(e)}},accessors:{targetSelector:{attribute:{name:"target-selector"},get:function(){return this.xtag.targetSelector},set:function(a){this.xtag.targetSelector=a,a&&(this.xtag.overrideTargetElems=null)}},targetElems:{get:function(){return this.targetSelector?xtag.query(document,this.targetSelector):null!==this.xtag.overrideTargetElems?this.xtag.overrideTargetElems:[]},set:function(a){this.removeAttribute("target-selector"),this.xtag.overrideTargetElems=a}},targetEvent:{attribute:{name:"target-event"},get:function(){if(this.xtag.targetEvent)return this.xtag.targetEvent;if("x-tabbar"===this.parentNode.nodeName.toLowerCase())return this.parentNode.targetEvent;throw"tabbar-tab is missing event to fire"},set:function(a){this.xtag.targetEvent=a}}},methods:{}})}();
\ No newline at end of file
+!function(){function a(){var a=document.documentElement,b={left:a.scrollLeft||document.body.scrollLeft||0,top:a.scrollTop||document.body.scrollTop||0,width:a.clientWidth,height:a.clientHeight};return b.right=b.left+b.width,b.bottom=b.top+b.height,b}function b(b){var c=b.getBoundingClientRect(),d=a(),e=d.left,f=d.top;return{left:c.left+e,right:c.right+e,top:c.top+f,bottom:c.bottom+f,width:c.width,height:c.height}}function c(a,b,c){return c.left<=a&&a<=c.right&&c.top<=b&&b<=c.bottom}function d(a){if("x-tabbar"===a.parentNode.nodeName.toLowerCase()){var b=a.targetEvent,c=a.targetSelector?xtag.query(document,a.targetSelector):a.targetElems;c.forEach(function(a){xtag.fireEvent(a,b)})}}xtag.register("x-tabbar",{lifecycle:{created:function(){this.xtag.overallEventToFire="reveal"}},events:{"tap:delegate(x-tabbar-tab)":function(){var a=xtag.query(this.parentNode,"x-tabbar-tab[selected]");a.length&&a.forEach(function(a){a.removeAttribute("selected")}),this.setAttribute("selected",!0)}},accessors:{tabs:{get:function(){return xtag.queryChildren(this,"x-tabbar-tab")}},targetEvent:{attribute:{name:"target-event"},get:function(){return this.xtag.overallEventToFire},set:function(a){this.xtag.overallEventToFire=a}}},methods:{}}),xtag.register("x-tabbar-tab",{lifecycle:{created:function(){this.xtag.targetSelector=null,this.xtag.overrideTargetElems=null,this.xtag.targetEvent=null}},events:{tap:function(a){var e=a.currentTarget;if(a.changedTouches&&a.changedTouches.length>0){var f=a.changedTouches[0],g=b(e);c(f.pageX,f.pageY,g)&&d(e)}else d(e)}},accessors:{targetSelector:{attribute:{name:"target-selector"},get:function(){return this.xtag.targetSelector},set:function(a){this.xtag.targetSelector=a,a&&(this.xtag.overrideTargetElems=null)}},targetElems:{get:function(){return this.targetSelector?xtag.query(document,this.targetSelector):null!==this.xtag.overrideTargetElems?this.xtag.overrideTargetElems:[]},set:function(a){this.removeAttribute("target-selector"),this.xtag.overrideTargetElems=a}},targetEvent:{attribute:{name:"target-event"},get:function(){if(this.xtag.targetEvent)return this.xtag.targetEvent;if("x-tabbar"===this.parentNode.nodeName.toLowerCase())return this.parentNode.targetEvent;throw"tabbar-tab is missing event to fire"},set:function(a){this.xtag.targetEvent=a}}},methods:{}})}();
\ No newline at end of file
diff --git a/dist/x-tag-toggle.css b/dist/x-tag-toggle.css
index a6aba263..e0810ecd 100644
--- a/dist/x-tag-toggle.css
+++ b/dist/x-tag-toggle.css
@@ -1,36 +1,24 @@
 x-toggle {
   display: inline-block;
-  position: relative;
-/* vertical centering ghost element */
-}
-x-toggle > .x-toggle-input-wrap {
   cursor: pointer;
-  position: absolute !important;
-  margin: 0px !important;
-  left: 0% !important;
-  top: 0% !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: inline-block !important;
-/* do not remove visibility or display because we still want tabbability
-       and submissability */
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)" !important;
-  opacity: 0.0001 !important;
-  z-index: 9999 !important;
 }
-x-toggle > .x-toggle-input-wrap > input {
-  cursor: pointer;
+x-toggle[focus] {
+  outline: 1px dashed rgba(0,0,0,0.3);
 }
-x-toggle .x-toggle-content {
-  display: inline-block;
-  vertical-align: middle;
-  margin: 0px;
+x-toggle[no-box] .x-toggle-check {
+  display: none;
 }
-x-toggle .x-toggle-content:after {
-  content: "";
+x-toggle input:checked + .x-toggle-check {
+  background: #000;
+}
+x-toggle[type="radio"] .x-toggle-check {
+  -webkit-border-radius: 1em;
+  -moz-border-radius: 1em;
+  border-radius: 1em;
+}
+x-toggle:after {
+  content: attr(label);
   display: inline-block;
-  width: 0;
-  height: 100%;
   vertical-align: middle;
 }
 x-toggle .x-toggle-check {
@@ -44,8 +32,93 @@ x-toggle .x-toggle-check {
   color: #000;
   vertical-align: middle;
   border: 1px solid;
+  overflow: hidden !important;
+}
+x-toggle input {
+  position: absolute;
+  outline: none;
+  z-index: -1;
+/* do not remove visibility or display because we still want tab-ability */
+  opacity: 0.0001 !important;
+}
+x-togglebar {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  border: 1px solid #000;
+  border-radius: 4px;
+  clear: both;
+}
+x-togglebar x-toggle {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  padding: 1px 4px 2px;
+  border-left: inherit;
+  text-align: center;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-flex: 1;
+  -moz-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  box-flex: 1;
+  flex: 1;
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+}
+x-togglebar x-toggle:first-child {
+  border-left-color: transparent;
+}
+x-togglebar x-toggle[checked] {
+  background: rgba(0,0,0,0.2);
+}
+x-togglebar x-toggle[focus] {
+  -webkit-box-shadow: 0 0 2px 0 transparent;
+  -moz-box-shadow: 0 0 2px 0 transparent;
+  box-shadow: 0 0 2px 0 transparent;
+}
+x-togglebar x-toggle .x-toggle-check {
+  height: 10px;
+  width: 10px;
+}
+x-togglebar x-toggle[type="checkbox"] .x-toggle-check {
+  display: none;
+}
+x-togglebar[orientation="vertical"] {
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+x-togglebar[orientation="vertical"] x-toggle {
+  border-top: inherit;
+  border-left: none;
+}
+x-togglebar[orientation="vertical"] x-toggle:first-child {
+  border-top: none;
 }
 
+x-toggle[focus] {
+  outline: 0;
+}
 x-toggle .x-toggle-content {
   min-height: 22px;
   line-height: 24px;
@@ -53,17 +126,21 @@ x-toggle .x-toggle-content {
 x-toggle .x-toggle-check {
   width: 22px;
   height: 22px;
-  border-radius: 50%;
+  border-radius: 3px;
   margin: 0px 3px 0px 0px;
   color: #000;
   vertical-align: middle;
   border: 1px solid #00202f;
   position: relative;
+  background: #fff;
 }
 x-toggle[no-box] .x-toggle-check {
   display: none !important;
 }
-x-toggle[type="radio"][checked] .x-toggle-check:after {
+x-toggle[type="radio"] input:checked + .x-toggle-check {
+  background: #fff;
+}
+x-toggle[type="radio"] input:checked + .x-toggle-check:after {
   content: '';
   display: block;
   position: absolute;
@@ -77,11 +154,11 @@ x-toggle[type="radio"][checked] .x-toggle-check:after {
   height: 14px;
   background: #0095dd;
 }
-x-toggle[type="checkbox"][checked] .x-toggle-check {
+x-toggle[type="checkbox"] input:checked + .x-toggle-check {
   border-width: 0;
   background: #0095dd;
 }
-x-toggle[type="checkbox"][checked] .x-toggle-check:after {
+x-toggle[type="checkbox"] input:checked + .x-toggle-check:after {
   content: '';
   display: block;
   position: absolute;
diff --git a/dist/x-tag-toggle.js b/dist/x-tag-toggle.js
index 9eda9f22..c03ea2e5 100644
--- a/dist/x-tag-toggle.js
+++ b/dist/x-tag-toggle.js
@@ -1,11 +1,7 @@
 (function() {
     function setScope(toggle) {
-        var form = toggle.xtag.inputEl.form;
-        if (form) {
-            toggle.removeAttribute("x-toggle-no-form");
-        } else {
-            toggle.setAttribute("x-toggle-no-form", "");
-        }
+        var form = toggle.xtag.input.form;
+        if (form) toggle.removeAttribute("x-toggle-no-form"); else toggle.setAttribute("x-toggle-no-form", "");
         toggle.xtag.scope = toggle.parentNode ? form || document : null;
     }
     function updateScope(scope) {
@@ -17,7 +13,7 @@
                 var named = xtag.query(scope, 'x-toggle[name="' + name + '"]' + docSelector);
                 var type = named.length > 1 ? "radio" : "checkbox";
                 named.forEach(function(toggle) {
-                    if (toggle.xtag && toggle.xtag.inputEl) {
+                    if (toggle.xtag && toggle.xtag.input) {
                         toggle.type = type;
                     }
                 });
@@ -25,6 +21,35 @@
             }
         });
     }
+    function toggleGroup(toggle) {
+        if (shifted && toggle.group && toggle.type != "radio") {
+            var toggles = toggle.groupToggles;
+            var selector = 'x-toggle[group="' + toggle.group + '"][active]';
+            var active = toggle.xtag.scope.querySelector(selector);
+            if (active && toggle != active) {
+                toggle.checked = active.checked;
+                var state = active.checked;
+                var index = toggles.indexOf(toggle);
+                var activeIndex = toggles.indexOf(active);
+                var minIndex = Math.min(index, activeIndex);
+                var maxIndex = Math.max(index, activeIndex);
+                toggles.slice(minIndex, maxIndex + 1).forEach(function(toggle) {
+                    if (toggle != active) toggle.checked = state;
+                });
+                return true;
+            }
+        }
+    }
+    function activateToggle(toggle) {
+        if (inTogglebar(toggle)) return;
+        toggle.groupToggles.forEach(function(node) {
+            node.active = false;
+        });
+        toggle.active = true;
+    }
+    function inTogglebar(toggle) {
+        return toggle.parentNode && toggle.parentNode.nodeName == "X-TOGGLEBAR";
+    }
     var shifted = false;
     xtag.addEvents(document, {
         DOMComponentsLoaded: function() {
@@ -41,62 +66,41 @@
         keyup: function(e) {
             shifted = e.shiftKey;
         },
-        "focus:delegate(x-toggle)": function() {
-            this.setAttribute("focus", "");
+        "focus:delegate(x-toggle)": function(e) {
+            this.focus = true;
+            this.xtag.input.focus();
         },
-        "blur:delegate(x-toggle)": function() {
-            this.removeAttribute("focus");
+        "blur:delegate(x-toggle)": function(e) {
+            this.focus = false;
         },
-        "tap:delegate(x-toggle)": function() {
-            if (shifted && this.group) {
-                var toggles = this.groupToggles;
-                var selector = 'x-toggle[group="' + this.group + '"][active]';
-                var active = this.xtag.scope.querySelector(selector);
-                if (active && this != active) {
-                    var self = this;
-                    var state = active.checked;
-                    var index = toggles.indexOf(this);
-                    var activeIndex = toggles.indexOf(active);
-                    var minIndex = Math.min(index, activeIndex);
-                    var maxIndex = Math.max(index, activeIndex);
-                    toggles.slice(minIndex, maxIndex).forEach(function(toggler) {
-                        if (toggler != self) {
-                            toggler.checked = state;
-                        }
-                    });
-                }
+        "tap:delegate(x-toggle)": function(e) {
+            var input = this.xtag.input;
+            if (input.type == "radio" ? !this.checked : true) {
+                input.checked = !input.checked;
+                var change = document.createEvent("Event");
+                change.initEvent("change", true, false);
+                input.dispatchEvent(change);
             }
+            input.focus();
         },
-        "change:delegate(x-toggle)": function() {
-            var selector = 'x-toggle[group="' + this.group + '"][active]';
-            var active = this.xtag.scope.querySelector(selector);
-            if (shifted && active && this != active) {
-                this.checked = active.checked;
-            } else {
-                this.checked = this.xtag.inputEl.checked;
-            }
-            if (this.group) {
-                this.groupToggles.forEach(function(toggle) {
-                    toggle.active = false;
-                });
-                this.active = true;
-            }
+        "change:delegate(x-toggle)": function(e) {
+            this.xtag.input.focus();
+            if (inTogglebar(this) || !toggleGroup(this) && this.type != "radio") this.checked = this.xtag.input.checked;
+            activateToggle(this);
         }
     });
+    var template = xtag.createFragment('<input /><div class="x-toggle-check"></div>');
     xtag.register("x-toggle", {
         lifecycle: {
             created: function() {
-                this.innerHTML = '<label class="x-toggle-input-wrap">' + '<input type="checkbox"></input>' + "</label>" + '<div class="x-toggle-check"></div>' + '<div class="x-toggle-content"></div>';
-                this.xtag.inputWrapEl = this.querySelector(".x-toggle-input-wrap");
-                this.xtag.inputEl = this.xtag.inputWrapEl.querySelector("input");
-                this.xtag.contentWrapEl = this.querySelector(".x-toggle-content-wrap");
+                this.appendChild(template.cloneNode(true));
+                this.xtag.input = this.querySelector("input");
                 this.xtag.checkEl = this.querySelector(".x-toggle-check");
-                this.xtag.contentEl = this.querySelector(".x-toggle-content");
                 this.type = "checkbox";
                 setScope(this);
                 var name = this.getAttribute("name");
                 if (name) {
-                    this.xtag.inputEl.name = this.getAttribute("name");
+                    this.xtag.input.name = this.getAttribute("name");
                 }
                 if (this.hasAttribute("checked")) {
                     this.checked = true;
@@ -104,15 +108,6 @@
             },
             inserted: function() {
                 setScope(this);
-                if (this.parentNode && this.parentNode.nodeName.toLowerCase() === "x-togglegroup") {
-                    if (this.parentNode.hasAttribute("name")) {
-                        this.name = this.parentNode.getAttribute("name");
-                    }
-                    if (this.parentNode.hasAttribute("group")) {
-                        this.group = this.parentNode.getAttribute("group");
-                    }
-                    this.setAttribute("no-box", true);
-                }
                 if (this.name) {
                     updateScope(this.xtag.scope);
                 }
@@ -127,22 +122,20 @@
                 attribute: {
                     name: "no-box",
                     "boolean": true
-                },
-                set: function() {}
+                }
             },
             type: {
                 attribute: {},
-                set: function(newType) {
-                    this.xtag.inputEl.type = newType;
+                set: function(type) {
+                    this.xtag.input.type = type;
                 }
             },
             label: {
-                attribute: {},
-                get: function() {
-                    return this.xtag.contentEl.innerHTML;
-                },
-                set: function(newLabelContent) {
-                    this.xtag.contentEl.innerHTML = newLabelContent;
+                attribute: {}
+            },
+            focus: {
+                attribute: {
+                    "boolean": true
                 }
             },
             active: {
@@ -162,9 +155,6 @@
                 attribute: {
                     skip: true
                 },
-                get: function() {
-                    return this.getAttribute("name");
-                },
                 set: function(name) {
                     if (name === null) {
                         this.removeAttribute("name");
@@ -172,13 +162,13 @@
                     } else {
                         this.setAttribute("name", name);
                     }
-                    this.xtag.inputEl.name = name;
+                    this.xtag.input.name = name;
                     updateScope(this.xtag.scope);
                 }
             },
             checked: {
                 get: function() {
-                    return this.xtag.inputEl.checked;
+                    return this.xtag.input.checked;
                 },
                 set: function(value) {
                     var name = this.name, state = value === "true" || value === true;
@@ -190,7 +180,7 @@
                             previous.removeAttribute("checked");
                         }
                     }
-                    this.xtag.inputEl.checked = state;
+                    this.xtag.input.checked = state;
                     if (state) {
                         this.setAttribute("checked", "");
                     } else {
@@ -201,12 +191,15 @@
             value: {
                 attribute: {},
                 get: function() {
-                    return this.xtag.inputEl.value;
+                    return this.xtag.input.value;
                 },
-                set: function(newVal) {
-                    this.xtag.inputEl.value = newVal;
+                set: function(value) {
+                    this.xtag.input.value = value;
                 }
             }
         }
     });
+    xtag.register("x-togglebar", {
+        events: {}
+    });
 })();
\ No newline at end of file
diff --git a/dist/x-tag-toggle.min.css b/dist/x-tag-toggle.min.css
index 9e0b892c..02eb9d17 100644
--- a/dist/x-tag-toggle.min.css
+++ b/dist/x-tag-toggle.min.css
@@ -1,12 +1,26 @@
-x-toggle{display:inline-block;position:relative;}
-x-toggle > .x-toggle-input-wrap{cursor:pointer;position:absolute !important;margin:0 !important;left:0% !important;top:0% !important;width:100% !important;height:100% !important;display:inline-block !important;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0.0001)" !important;opacity:.0001 !important;z-index:9999 !important}
-x-toggle > .x-toggle-input-wrap > input{cursor:pointer}
-x-toggle .x-toggle-content{display:inline-block;vertical-align:middle;margin:0}
-x-toggle .x-toggle-content:after{content:"";display:inline-block;width:0;height:100%;vertical-align:middle}
-x-toggle .x-toggle-check{display:inline-block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:16px;height:16px;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid}
+x-toggle{display:inline-block;cursor:pointer}
+x-toggle[focus]{outline:1px dashed rgba(0,0,0,0.3)}
+x-toggle[no-box] .x-toggle-check{display:none}
+x-toggle input:checked + .x-toggle-check{background:#000}
+x-toggle[type="radio"] .x-toggle-check{-webkit-border-radius:1em;-moz-border-radius:1em;border-radius:1em}
+x-toggle:after{content:attr(label);display:inline-block;vertical-align:middle}
+x-toggle .x-toggle-check{display:inline-block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:16px;height:16px;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid;overflow:hidden !important}
+x-toggle input{position:absolute;outline:none;z-index:-1;opacity:.0001 !important}
+x-togglebar{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;border:1px solid #000;border-radius:4px;clear:both}
+x-togglebar x-toggle{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;padding:1px 4px 2px;border-left:inherit;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;box-flex:1;flex:1;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}
+x-togglebar x-toggle:first-child{border-left-color:transparent}
+x-togglebar x-toggle[checked]{background:rgba(0,0,0,0.2)}
+x-togglebar x-toggle[focus]{-webkit-box-shadow:0 0 2px 0 transparent;-moz-box-shadow:0 0 2px 0 transparent;box-shadow:0 0 2px 0 transparent}
+x-togglebar x-toggle .x-toggle-check{height:10px;width:10px}
+x-togglebar x-toggle[type="checkbox"] .x-toggle-check{display:none}
+x-togglebar[orientation="vertical"]{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;box-orient:vertical;-webkit-flex-direction:column;-moz-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
+x-togglebar[orientation="vertical"] x-toggle{border-top:inherit;border-left:none}
+x-togglebar[orientation="vertical"] x-toggle:first-child{border-top:none}
+x-toggle[focus]{outline:0}
 x-toggle .x-toggle-content{min-height:22px;line-height:24px}
-x-toggle .x-toggle-check{width:22px;height:22px;border-radius:50%;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid #00202f;position:relative}
+x-toggle .x-toggle-check{width:22px;height:22px;border-radius:3px;margin:0 3px 0 0;color:#000;vertical-align:middle;border:1px solid #00202f;position:relative;background:#fff}
 x-toggle[no-box] .x-toggle-check{display:none !important}
-x-toggle[type="radio"][checked] .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;border-radius:50%;width:14px;height:14px;background:#0095dd}
-x-toggle[type="checkbox"][checked] .x-toggle-check{border-width:0;background:#0095dd}
-x-toggle[type="checkbox"][checked] .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:3.2px;right:0;margin:auto;width:10px;height:5px;border:solid #fff;border-width:0 0 2px 2px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
+x-toggle[type="radio"] input:checked + .x-toggle-check{background:#fff}
+x-toggle[type="radio"] input:checked + .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:0;right:0;margin:auto;border-radius:50%;width:14px;height:14px;background:#0095dd}
+x-toggle[type="checkbox"] input:checked + .x-toggle-check{border-width:0;background:#0095dd}
+x-toggle[type="checkbox"] input:checked + .x-toggle-check:after{content:'';display:block;position:absolute;left:0;top:0;bottom:3.2px;right:0;margin:auto;width:10px;height:5px;border:solid #fff;border-width:0 0 2px 2px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}
diff --git a/dist/x-tag-toggle.min.js b/dist/x-tag-toggle.min.js
index f031064f..5e209fcd 100644
--- a/dist/x-tag-toggle.min.js
+++ b/dist/x-tag-toggle.min.js
@@ -1 +1 @@
-!function(){function a(a){var b=a.xtag.inputEl.form;b?a.removeAttribute("x-toggle-no-form"):a.setAttribute("x-toggle-no-form",""),a.xtag.scope=a.parentNode?b||document:null}function b(a){var b={},c=a==document?"[x-toggle-no-form]":"";xtag.query(a,"x-toggle[name]"+c).forEach(function(d){var e=d.name;if(e&&!b[e]){var f=xtag.query(a,'x-toggle[name="'+e+'"]'+c),g=f.length>1?"radio":"checkbox";f.forEach(function(a){a.xtag&&a.xtag.inputEl&&(a.type=g)}),b[e]=!0}})}var c=!1;xtag.addEvents(document,{DOMComponentsLoaded:function(){b(document),xtag.toArray(document.forms).forEach(b)},WebComponentsReady:function(){b(document),xtag.toArray(document.forms).forEach(b)},keydown:function(a){c=a.shiftKey},keyup:function(a){c=a.shiftKey},"focus:delegate(x-toggle)":function(){this.setAttribute("focus","")},"blur:delegate(x-toggle)":function(){this.removeAttribute("focus")},"tap:delegate(x-toggle)":function(){if(c&&this.group){var a=this.groupToggles,b='x-toggle[group="'+this.group+'"][active]',d=this.xtag.scope.querySelector(b);if(d&&this!=d){var e=this,f=d.checked,g=a.indexOf(this),h=a.indexOf(d),i=Math.min(g,h),j=Math.max(g,h);a.slice(i,j).forEach(function(a){a!=e&&(a.checked=f)})}}},"change:delegate(x-toggle)":function(){var a='x-toggle[group="'+this.group+'"][active]',b=this.xtag.scope.querySelector(a);this.checked=c&&b&&this!=b?b.checked:this.xtag.inputEl.checked,this.group&&(this.groupToggles.forEach(function(a){a.active=!1}),this.active=!0)}}),xtag.register("x-toggle",{lifecycle:{created:function(){this.innerHTML='<label class="x-toggle-input-wrap"><input type="checkbox"></input></label><div class="x-toggle-check"></div><div class="x-toggle-content"></div>',this.xtag.inputWrapEl=this.querySelector(".x-toggle-input-wrap"),this.xtag.inputEl=this.xtag.inputWrapEl.querySelector("input"),this.xtag.contentWrapEl=this.querySelector(".x-toggle-content-wrap"),this.xtag.checkEl=this.querySelector(".x-toggle-check"),this.xtag.contentEl=this.querySelector(".x-toggle-content"),this.type="checkbox",a(this);var b=this.getAttribute("name");b&&(this.xtag.inputEl.name=this.getAttribute("name")),this.hasAttribute("checked")&&(this.checked=!0)},inserted:function(){a(this),this.parentNode&&"x-togglegroup"===this.parentNode.nodeName.toLowerCase()&&(this.parentNode.hasAttribute("name")&&(this.name=this.parentNode.getAttribute("name")),this.parentNode.hasAttribute("group")&&(this.group=this.parentNode.getAttribute("group")),this.setAttribute("no-box",!0)),this.name&&b(this.xtag.scope)},removed:function(){b(this.xtag.scope),a(this)}},accessors:{noBox:{attribute:{name:"no-box","boolean":!0},set:function(){}},type:{attribute:{},set:function(a){this.xtag.inputEl.type=a}},label:{attribute:{},get:function(){return this.xtag.contentEl.innerHTML},set:function(a){this.xtag.contentEl.innerHTML=a}},active:{attribute:{"boolean":!0}},group:{attribute:{}},groupToggles:{get:function(){return xtag.query(this.xtag.scope,'x-toggle[group="'+this.group+'"]')}},name:{attribute:{skip:!0},get:function(){return this.getAttribute("name")},set:function(a){null===a?(this.removeAttribute("name"),this.type="checkbox"):this.setAttribute("name",a),this.xtag.inputEl.name=a,b(this.xtag.scope)}},checked:{get:function(){return this.xtag.inputEl.checked},set:function(a){var b=this.name,c="true"===a||a===!0;if(b){var d=this.xtag.scope==document?"[x-toggle-no-form]":"",e='x-toggle[checked][name="'+b+'"]'+d,f=this.xtag.scope.querySelector(e);f&&f.removeAttribute("checked")}this.xtag.inputEl.checked=c,c?this.setAttribute("checked",""):this.removeAttribute("checked")}},value:{attribute:{},get:function(){return this.xtag.inputEl.value},set:function(a){this.xtag.inputEl.value=a}}}})}();
\ No newline at end of file
+!function(){function a(a){var b=a.xtag.input.form;b?a.removeAttribute("x-toggle-no-form"):a.setAttribute("x-toggle-no-form",""),a.xtag.scope=a.parentNode?b||document:null}function b(a){var b={},c=a==document?"[x-toggle-no-form]":"";xtag.query(a,"x-toggle[name]"+c).forEach(function(d){var e=d.name;if(e&&!b[e]){var f=xtag.query(a,'x-toggle[name="'+e+'"]'+c),g=f.length>1?"radio":"checkbox";f.forEach(function(a){a.xtag&&a.xtag.input&&(a.type=g)}),b[e]=!0}})}function c(a){if(f&&a.group&&"radio"!=a.type){var b=a.groupToggles,c='x-toggle[group="'+a.group+'"][active]',d=a.xtag.scope.querySelector(c);if(d&&a!=d){a.checked=d.checked;var e=d.checked,g=b.indexOf(a),h=b.indexOf(d),i=Math.min(g,h),j=Math.max(g,h);return b.slice(i,j+1).forEach(function(a){a!=d&&(a.checked=e)}),!0}}}function d(a){e(a)||(a.groupToggles.forEach(function(a){a.active=!1}),a.active=!0)}function e(a){return a.parentNode&&"X-TOGGLEBAR"==a.parentNode.nodeName}var f=!1;xtag.addEvents(document,{DOMComponentsLoaded:function(){b(document),xtag.toArray(document.forms).forEach(b)},WebComponentsReady:function(){b(document),xtag.toArray(document.forms).forEach(b)},keydown:function(a){f=a.shiftKey},keyup:function(a){f=a.shiftKey},"focus:delegate(x-toggle)":function(){this.focus=!0,this.xtag.input.focus()},"blur:delegate(x-toggle)":function(){this.focus=!1},"tap:delegate(x-toggle)":function(){var a=this.xtag.input;if("radio"==a.type?!this.checked:!0){a.checked=!a.checked;var b=document.createEvent("Event");b.initEvent("change",!0,!1),a.dispatchEvent(b)}a.focus()},"change:delegate(x-toggle)":function(){this.xtag.input.focus(),(e(this)||!c(this)&&"radio"!=this.type)&&(this.checked=this.xtag.input.checked),d(this)}});var g=xtag.createFragment('<input /><div class="x-toggle-check"></div>');xtag.register("x-toggle",{lifecycle:{created:function(){this.appendChild(g.cloneNode(!0)),this.xtag.input=this.querySelector("input"),this.xtag.checkEl=this.querySelector(".x-toggle-check"),this.type="checkbox",a(this);var b=this.getAttribute("name");b&&(this.xtag.input.name=this.getAttribute("name")),this.hasAttribute("checked")&&(this.checked=!0)},inserted:function(){a(this),this.name&&b(this.xtag.scope)},removed:function(){b(this.xtag.scope),a(this)}},accessors:{noBox:{attribute:{name:"no-box","boolean":!0}},type:{attribute:{},set:function(a){this.xtag.input.type=a}},label:{attribute:{}},focus:{attribute:{"boolean":!0}},active:{attribute:{"boolean":!0}},group:{attribute:{}},groupToggles:{get:function(){return xtag.query(this.xtag.scope,'x-toggle[group="'+this.group+'"]')}},name:{attribute:{skip:!0},set:function(a){null===a?(this.removeAttribute("name"),this.type="checkbox"):this.setAttribute("name",a),this.xtag.input.name=a,b(this.xtag.scope)}},checked:{get:function(){return this.xtag.input.checked},set:function(a){var b=this.name,c="true"===a||a===!0;if(b){var d=this.xtag.scope==document?"[x-toggle-no-form]":"",e='x-toggle[checked][name="'+b+'"]'+d,f=this.xtag.scope.querySelector(e);f&&f.removeAttribute("checked")}this.xtag.input.checked=c,c?this.setAttribute("checked",""):this.removeAttribute("checked")}},value:{attribute:{},get:function(){return this.xtag.input.value},set:function(a){this.xtag.input.value=a}}}}),xtag.register("x-togglebar",{events:{}})}();
\ No newline at end of file
diff --git a/docs.html b/docs.html
index b3222563..a3802292 100644
--- a/docs.html
+++ b/docs.html
@@ -24,7 +24,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="index.html">
         <img class="logo" src="site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
@@ -69,16 +69,12 @@
           
           <a class="list-group-item scrollnav" href="#x-tag-layout">layout</a>
           
-          <a class="list-group-item scrollnav" href="#x-tag-slidebox">slidebox</a>
-          
           <a class="list-group-item scrollnav" href="#x-tag-slider">slider</a>
           
           <a class="list-group-item scrollnav" href="#x-tag-tabbar">tabbar</a>
           
           <a class="list-group-item scrollnav" href="#x-tag-toggle">toggle</a>
           
-          <a class="list-group-item scrollnav" href="#x-tag-tooltip">tooltip</a>
-          
         </div>
       </div>
     </div>
@@ -86,7 +82,7 @@
       <section id="usage">
         <h1>Usage</h1>
         <p>To include Brick in your project, include your downloaded stylesheet and script files in your project's page like normal:
-          <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;brick-0.10.0.css&quot;/&gt;<br/>&lt;script type=&quot;text/javascript&quot; src=&quot;brick-0.10.0.js&quot;&gt;&lt;/script&gt;</pre>
+          <pre class="prettyprint">&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;brick-0.11.0.css&quot;/&gt;<br/>&lt;script type=&quot;text/javascript&quot; src=&quot;brick-0.11.0.js&quot;&gt;&lt;/script&gt;</pre>
         </p>
         <p>Using any of Brick's components is as simple as including the respective tag in your HTML markup. (See individual component docs for details.)</p>
         <p><b>Important:</b> To run code relying on any of Brick's tags, make sure to wait until the x-tags library's <code class="prettyprint">"DOMComponentsLoaded"</code> event instead of just <code>window.onload</code>:</p>
@@ -99,6 +95,16 @@ <h1>appbar
               <small><a href="demos/x-tag-appbar/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-appbar</small></span>
+            <span>Version: <small>0.2.8</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/appbar.git">
+              http://github.com/x-tag/appbar
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-appbar</small></span>
+          </h5>
           <p>An x-appbar is a simple component emulating the standard layout of a header seen at the top of a mobile application.</p>
 
           
@@ -157,6 +163,16 @@ <h1>calendar
               <small><a href="demos/x-tag-calendar/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-calendar</small></span>
+            <span>Version: <small>0.1.6</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/calendar.git">
+              http://github.com/x-tag/calendar
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-calendar</small></span>
+          </h5>
           <p>A component acting as a calendar widget that can be manipulated with minimal user-written code/layout.</p>
 
           
@@ -361,29 +377,34 @@ <h1>deck
               <small><a href="demos/x-tag-deck/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-deck</small></span>
+            <span>Version: <small>0.2.0</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/deck.git">
+              http://github.com/x-tag/deck
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-deck</small></span>
+          </h5>
           <p>A box in which &lt;x-card&gt; elements can be cycled independently of order with a variety of different transitions</p>
 
           
             <h2>Attributes</h2>
             
             <dl>
-              <dt><code>transition-type</code></dt>
-              <dd>Defines the kind of transition animation that is used when cycling cards. Valid options: &#39;scrollLeft&#39;, &#39;scrollUp&#39;, &#39;scrollRight&#39;, &#39;scrollDown&#39;, &#39;flipX&#39;, &#39;flipY&#39;, &#39;coverLeft&#39;, &#39;coverUp&#39;, &#39;coverRight&#39;, &#39;coverDown&#39;, &#39;uncoverLeft&#39;, &#39;uncoverUp&#39;, &#39;uncoverRight&#39;, &#39;uncoverDown&#39;, &#39;none&#39;. Defaults to &#39;scrollLeft&#39;</dd>
+              <dt><code>loop</code></dt>
+              <dd>A boolean attribute that turns on/off the auto-looping feature when the x-deck has reached the beginning or end of its card index</dd>
             </dl>
             
             <dl>
-              <dt><code>selected-index</code></dt>
-              <dd>Defines which card index will be displayed. If set in the initial markup, this will initialize the given card as the selected card. Defaults to 0.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>history-cap</code></dt>
-              <dd>Defines how many cards to keep in history to allow developers to simply return to the previously displayed card. Defaults to 10.</dd>
+              <dt><code>transition-type</code></dt>
+              <dd>Allows the user to set a default animation type for cards. If this attribute is added to an individual single &lt;x-card&gt; element, the animation specified will be used in place of the &lt;x-deck&gt;&#39;s default card animation. Valid options are the same as the &lt;x-deck&gt;&#39;s transition-type attribute.</dd>
             </dl>
             
             <dl>
-              <dt><code>x-card: transition-override</code></dt>
-              <dd>If transition-override is defined on a card, the animation used to transition to this card will be what is given here instead of the deck&#39;s animation. Valid options are the same as the &lt;x-deck&gt;&#39;s transition-type attribute.</dd>
+              <dt><code>selected-index</code></dt>
+              <dd>Defines which card index will be displayed. If set in the initial markup, this will initialize the given card as the selected card.</dd>
             </dl>
             
           
@@ -392,48 +413,23 @@ <h2>Attributes</h2>
             <h2>Methods</h2>
             
               <dl>
-                <dt><code>shuffleTo([progressType])</code></dt>
-                <dd>Transitions to the x-card at the given index. If given a progressType of &#39;forward&#39;, will perform the forwards animation. If given &#39;reverse&#39;, will performs the reverse animation. If the progressType is &#39;auto&#39; or omitted, will perform forward animation if going to a larger index, and will perform reverse animation if going to a smaller index.</dd>
+                <dt><code>showCard(index||element, [direction])</code></dt>
+                <dd>Transitions an x-card element to the shown state via index or card element reference. If given a direction of &#39;forward&#39;, will perform the forwards animation. If given &#39;reverse&#39;, will performs the reverse animation.</dd>
               </dl>
             
               <dl>
-                <dt><code>shuffleNext([progressType])</code></dt>
-                <dd>Transitions to the next x-card in the deck. Takes an optional progressType of &#39;forward&#39;, &#39;reverse&#39;, or &#39;auto&#39;. Also takes an optional callback function.</dd>
+                <dt><code>hideCard(index||element, [direction])</code></dt>
+                <dd>Transitions an x-card element to the hidden state via index or card element reference. If given a direction of &#39;forward&#39;, will perform the forwards animation. If given &#39;reverse&#39;, will performs the reverse animation.</dd>
               </dl>
             
               <dl>
-                <dt><code>shufflePrev([progressType])</code></dt>
-                <dd>Transitions to the previous x-card in the deck. Takes an optional progressType of &#39;forward&#39;, &#39;reverse&#39;, or &#39;auto&#39;. Also takes an optional callback function.</dd>
+                <dt><code>nextCard(index||element, [direction])</code></dt>
+                <dd>Transitions to the next x-card in the deck. Takes an optional direction of &#39;forward&#39; or &#39;reverse&#39;.</dd>
               </dl>
             
               <dl>
-                <dt><code>getAllCards()</code></dt>
-                <dd>Returns a list of all x-card elements in the deck.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>getSelectedCard()</code></dt>
-                <dd>Returns the currently selected x-card in the deck.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>getCardIndex(cardEl)</code></dt>
-                <dd>Given an x-card element, returns its index in this deck, if it is a child element.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>getCardAt(index)</code></dt>
-                <dd>Returns the x-card at the given index.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>historyBack([progressType])</code></dt>
-                <dd>Transitions to the previously displayed card in the deck&#39;s history. progressType parameter acts similarly to shuffleTo&#39;s progressType parameter.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>historyForward([progressType])</code></dt>
-                <dd>Transitions to the more recently displayed card in the deck&#39;s history. progressType parameter acts similarly to shuffleTo&#39;s progressType parameter.</dd>
+                <dt><code>previousCard(index||element, [direction])</code></dt>
+                <dd>Transitions to the previous x-card in the deck. Takes an optional direction of &#39;forward&#39; or &#39;reverse&#39;.</dd>
               </dl>
             
           
@@ -442,28 +438,13 @@ <h2>Methods</h2>
             <h2>Events</h2>
             
             <dl>
-              <dt><code>shufflestart</code></dt>
-              <dd>A shufflestart event is fired by the &lt;x-deck&gt; element when, during the process of transitioning between cards, the two cards are in position to start animating, but have not yet begun the actual animation.<br/><br/>The event also receives the following custom datamap in `e.detail`:<br/>{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#39;oldCard&#39;: the previously selected x-card node that the transition is animating away from,<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#39;newCard&#39;: the x-card node that the transition is animating towards<br/>}</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>shuffleend</code></dt>
-              <dd>A `shuffleend` event is fired by the &amp;lt;x-deck&amp;gt; element when a cycle from one card to another has been completed.<br/><br/>**Note:** Much like the `transitionend` event, this is not guaranteed to fire after every transition that fires a shufflestart. For example, if two transitions are queued up, with the second occurring during the first transition, only the second transition&#39;s `shuffleend` will fire, due to the first transition being interrupted.<br/><br/>The event also receives the following custom datamap in `e.detail`:<br/><br/>{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#39;oldCard&#39;: the previously selected x-card node that the transition is animating away from,<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#39;newCard&#39;: the x-card node that the transition is animating towards<br/>}</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>cardadd</code></dt>
-              <dd>Fired by the x-deck whenever an x-card is added.<br/><br/>Receives the following datamap in `e.detail`:<br/><br/>{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#39;card&#39;: the x-card that was just added<br/>}</dd>
+              <dt><code>show</code></dt>
+              <dd>Fired from a card target after it has completed its show animation, and the show state has been finalized.</dd>
             </dl>
             
             <dl>
-              <dt><code>cardremove</code></dt>
-              <dd>Fired by the x-deck whenever an x-card is removed.<br/><br/>Receives the following datamap in `e.detail`:<br/><br/>{<br/>&nbsp;&nbsp;&nbsp;&nbsp;&#39;card&#39;: the x-card that was just removed<br/>}</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>show</code></dt>
-              <dd>If an &lt;x-card&gt; element receives a &#39;show&#39; event, the deck will automatically transition to the card that received the event. <br/> This event is not fired by the x-deck itself.</dd>
+              <dt><code>hide</code></dt>
+              <dd>Fired from a card target after it has completed its hide animation, and the hide state has been finalized.</dd>
             </dl>
             
           
@@ -472,8 +453,8 @@ <h2>Events</h2>
             <h2>Getters</h2>
             
             <dl>
-              <dt><code>numCards</code></dt>
-              <dd>Returns the number of cards currently in the deck.</dd>
+              <dt><code>cards</code></dt>
+              <dd>Returns an array of all &lt;x-card&gt; elements within the &lt;x-deck&gt;.</dd>
             </dl>
             
             <dl>
@@ -481,11 +462,6 @@ <h2>Getters</h2>
               <dd>Returns the &lt;x-card&gt; currently displayed in the deck.</dd>
             </dl>
             
-            <dl>
-              <dt><code>cards</code></dt>
-              <dd>Returns an array of all &lt;x-card&gt;s in the deck.</dd>
-            </dl>
-            
             <dl>
               <dt><code>transitionType</code></dt>
               <dd>Returns the value of the &#39;transition-type&#39; attribute.</dd>
@@ -496,48 +472,23 @@ <h2>Getters</h2>
               <dd>Returns the value of the &#39;selected-index&#39; attribute.</dd>
             </dl>
             
-            <dl>
-              <dt><code>historyCap</code></dt>
-              <dd>Returns the value of the &#39;history-cap&#39; attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>currHistorySize</code></dt>
-              <dd>Returns the number of cards currently stored in the deck&#39;s history.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>currHistoryIndex</code></dt>
-              <dd>Returns the deck&#39;s current index in its history stack.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>transitionOverride (on <x-card> element)</code></dt>
-              <dd>Returns the transition override of the card.</dd>
-            </dl>
-            
           
 
           
             <h2>Setters</h2>
             
             <dl>
-              <dt><code>transitionType</code></dt>
-              <dd>Sets the value of the &#39;transition-type&#39; attribute.</dd>
+              <dt><code>selectedCard</code></dt>
+              <dd>Sets the provided &lt;x-card&gt; element as the selected card, and shows the element.</dd>
             </dl>
             
             <dl>
               <dt><code>selectedIndex</code></dt>
-              <dd>Sets the value of the &#39;selected-index&#39; attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>historyCap</code></dt>
-              <dd>Sets the value of the &#39;history-cap&#39; attribute.</dd>
+              <dd>Sets the value of the &#39;selected-index&#39; attribute, and shows the card at that index</dd>
             </dl>
             
             <dl>
-              <dt><code>transitionOverride (on <x-card> element)</code></dt>
+              <dt><code>transitionType (also available on <x-card> elements)</code></dt>
               <dd>Sets the transition override of the card.</dd>
             </dl>
             
@@ -550,6 +501,16 @@ <h1>flipbox
               <small><a href="demos/x-tag-flipbox/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-flipbox</small></span>
+            <span>Version: <small>0.2.7</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/flipbox.git">
+              http://github.com/x-tag/flipbox
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-flipbox</small></span>
+          </h5>
           <p>Flips between two content elements with a CSS Animation, similar to flipping a playing card. The front face defaults to the first direct child element of the &lt;x-flipbox&gt;, and the back face defaults to the last direct child element.</p>
 
           
@@ -639,6 +600,16 @@ <h1>layout
               <small><a href="demos/x-tag-layout/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-layout</small></span>
+            <span>Version: <small>0.1.5</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/layout.git">
+              http://github.com/x-tag/layout
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-layout</small></span>
+          </h5>
           <p>A simple layout element that automatically stretches to fill the parent, with optional toggleable header and footer elements.</p>
 
           
@@ -674,67 +645,6 @@ <h2>Setters</h2>
             </dl>
             
           
-        </section>
-      
-        <section id="x-tag-slidebox" class="main-sect">
-          <h1>slidebox
-            
-              <small><a href="demos/x-tag-slidebox/index.html">View Demo &raquo;</a></small>
-            
-          </h1>
-          <p>A container that allows animated transitions between content panes, displaying all slides along the way. Think of the component as a filmstrip of slides that moves around in a viewport.</p>
-
-          
-            <h2>Attributes</h2>
-            
-            <dl>
-              <dt><code>orientation</code></dt>
-              <dd>Slide axis. Set as &#39;x&#39; for horizontal animations, and set as &#39;y&#39; for vertical animations.</dd>
-            </dl>
-            
-          
-
-          
-            <h2>Methods</h2>
-            
-              <dl>
-                <dt><code>slideTo</code></dt>
-                <dd>Slides to a specific element index.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>slideNext</code></dt>
-                <dd>Slides to the next slide element.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>slidePrevious</code></dt>
-                <dd>Slides to the previous slide element.</dd>
-              </dl>
-            
-          
-
-          
-            <h2>Events</h2>
-            
-            <dl>
-              <dt><code>slideend</code></dt>
-              <dd>Fires at the end of each slide transition.</dd>
-            </dl>
-            
-          
-
-          
-
-          
-            <h2>Setters</h2>
-            
-            <dl>
-              <dt><code>orientation</code></dt>
-              <dd>Sets the slide axis as either &#39;x&#39; or &#39;y&#39;.</dd>
-            </dl>
-            
-          
         </section>
       
         <section id="x-tag-slider" class="main-sect">
@@ -743,6 +653,16 @@ <h1>slider
               <small><a href="demos/x-tag-slider/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-slider</small></span>
+            <span>Version: <small>0.1.7</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/slider.git">
+              http://github.com/x-tag/slider
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-slider</small></span>
+          </h5>
           <p>Polyfill on top of input type=&#39;range&#39;, providing a consistent UI regardless of whether type=&#39;range&#39; is supported or not.</p>
 
           
@@ -859,6 +779,16 @@ <h1>tabbar
               <small><a href="demos/x-tag-tabbar/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-tabbar</small></span>
+            <span>Version: <small>0.1.8</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/tabbar.git">
+              http://github.com/x-tag/tabbar
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-tabbar</small></span>
+          </h5>
           <p>Tab bars are used to display an app-level navigation/tabbing bar (usually at the bottom of the UI) that shows different content depending on which tab is selected.</p>
 
           
@@ -877,7 +807,7 @@ <h2>Attributes</h2>
             <h2>Events</h2>
             
             <dl>
-              <dt><code>show</code></dt>
+              <dt><code>reveal</code></dt>
               <dd>The default event that a x-tabbar-tab will fire on its selected elements if not overridden by &#39;target-event&#39;</dd>
             </dl>
             
@@ -945,6 +875,16 @@ <h1>toggle
               <small><a href="demos/x-tag-toggle/index.html">View Demo &raquo;</a></small>
             
           </h1>
+          <h5 class="details">
+            <span>Tag: <small>x-toggle</small></span>
+            <span>Version: <small>0.2.8</small></span>
+            
+            <span>Source: <small><a href="http://github.com/x-tag/toggle.git">
+              http://github.com/x-tag/toggle
+            </a></small></span>
+            
+            <span>Bower: <small>x-tag-toggle</small></span>
+          </h5>
           <p>A polyfill merging radiobutton/checkbox inputs into a single tag to provide a consistent UI and simplify markup. Automatically switches between radiobutton and checkbox depending on name attribute.</p>
 
           
@@ -1067,170 +1007,6 @@ <h2>Setters</h2>
           
         </section>
       
-        <section id="x-tag-tooltip" class="main-sect">
-          <h1>tooltip
-            
-              <small><a href="demos/x-tag-tooltip/index.html">View Demo &raquo;</a></small>
-            
-          </h1>
-          <p>Content callout that appears in current context to point at an element and is associated with a triggering element and interaction-style in the underlying content</p>
-
-          
-            <h2>Attributes</h2>
-            
-            <dl>
-              <dt><code>orientation</code></dt>
-              <dd>Determines where the tooltip appears in relation to the triggering element. Valid options are &#39;top&#39;, &#39;bottom&#39;, &#39;left&#39;, &#39;right&#39;. If not provided, or if invalid, defaults to auto placement of tooltip.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>trigger-style</code></dt>
-              <dd>Indicates how the tooltip is triggered. Valid presets are &#39;hover&#39; and &#39;custom&#39;. When set to &#39;hover&#39;, the tooltip is triggered when the user moves their cursor over a triggering element, and dismissed when moved off. When set to &#39;custom&#39;, no default behavior is implemented for triggering the tooltip. This is useful when you want to define your own triggering system using the .show(), .hide(), and .toggle() API calls without any default behaviors getting in the way. If set to anything else, the tooltip will use this as the event name to listen for on targeted elems to show the tooltip.  (defaults to &#39;click&#39;)</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>trigger-selector</code></dt>
-              <dd>Indicates how to select elements that would trigger the tooltip. If given a selector of &#39;_previousSibling&#39;, the tooltip will use the immediately preceding sibling element in the DOM tree as its triggering element. Similarly, when set to &#39;_nextSibling&#39;, the tooltip will use its next DOM sibling as its triggering element. Otherwise, the selector will be applied to the tooltip&#39;s parent node as a search query, and any elements that are not part of the tooltip itself will act as triggering elements for the tooltip. (For example, if you were to provide &#39;.fancy-selector&#39; as this attribute&#39;s value, and foo is your tooltip element, the elements you would get back would be same as those found from foo.parentNode.querySelectorAll(&#39;.fancy-selector&#39;).)</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>ignore-outer-trigger</code></dt>
-              <dd>If present, for non-&#39;hover&#39; and non-&#39;custom&#39; trigger styles, indicates whether an event firing outside of a targeting element should close the tooltip. Has no effect on preset trigger styles</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>ignore-tooltip-pointer-events</code></dt>
-              <dd>If present, pointer events on the tooltip will be ignored, keeping it from blocking interaction with underlying elements.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>allow-overflow</code></dt>
-              <dd>By default, the tooltip will always try to place the tooltip in a way that is constrained by both the container element and the window&#39;s viewport (ie: accounting for scrolling).<br/><br/>If `allow-overflow` set, this will instead allow the tooltip to be placed freely, even if it overflows the containing element (However, the tooltip will still be constrained by the window&#39;s viewport).</dd>
-            </dl>
-            
-          
-
-          
-            <h2>Methods</h2>
-            
-              <dl>
-                <dt><code>refreshPosition()</code></dt>
-                <dd>This method immediately repositions the tooltip to recenter on the triggering element. This is useful if the tooltip&#39;s contents are changed and need to be immediately visually repositioned.</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>show()</code></dt>
-                <dd>This method forces the tooltip to display (this will fire a &#39;tooltipshown&#39; event).</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>hide()</code></dt>
-                <dd>This method forces the tooltip to hide (this will fire a &#39;tooltiphidden&#39; event).</dd>
-              </dl>
-            
-              <dl>
-                <dt><code>toggle()</code></dt>
-                <dd>This method forces the tooltip to toggle whether it is visible or not (this will fire a &#39;tooltipshown&#39; or &#39;tooltiphidden&#39; event, whichever is appropriate).</dd>
-              </dl>
-            
-          
-
-          
-            <h2>Events</h2>
-            
-            <dl>
-              <dt><code>tooltipshown</code></dt>
-              <dd>Fired by the x-tooltip element when tooltip is shown</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>tooltiphidden</code></dt>
-              <dd>Fired by the x-tooltip element when tooltip is hidden</dd>
-            </dl>
-            
-          
-
-          
-            <h2>Getters</h2>
-            
-            <dl>
-              <dt><code>presetTriggerStyles</code></dt>
-              <dd>Returns a list of the valid preset style types for the &#39;trigger-style&#39; attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>targetElems</code></dt>
-              <dd>Returns a list of all DOM elements currently selected as a target of the tooltip.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>orientation</code></dt>
-              <dd>This will provide the current value of the orientation attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>triggerStyle</code></dt>
-              <dd>This will provide the current value of the trigger-style attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>triggerSelector</code></dt>
-              <dd>This will provide the current value of the trigger-selector attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>content</code></dt>
-              <dd>This will provide the DOM element that is acting as the content area of the tooltip.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>ignoreOuterTrigger</code></dt>
-              <dd>This will provide the current value of the ignore-outer-trigger attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>ignoreTooltipPointerEvents</code></dt>
-              <dd>This will provide the current value of the ignore-tooltip-pointer-events attribute.</dd>
-            </dl>
-            
-          
-
-          
-            <h2>Setters</h2>
-            
-            <dl>
-              <dt><code>orientation</code></dt>
-              <dd>This will change the value of the tooltip&#39;s orientation attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>triggerStyle</code></dt>
-              <dd>This will change the value of the tooltip&#39;s trigger-style attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>triggerSelector</code></dt>
-              <dd>This will change the value of the tooltip&#39;s trigger-selector attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>content</code></dt>
-              <dd>This will replace the DOM element for the tooltip&#39;s content area with an entirely new DOM element, destroying the old one.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>ignoreOuterTrigger</code></dt>
-              <dd>This will change the current value of the ignore-outer-trigger attribute.</dd>
-            </dl>
-            
-            <dl>
-              <dt><code>ignoreTooltipPointerEvents</code></dt>
-              <dd>This will change the current value of the ignore-tooltip-pointer-events attribute.</dd>
-            </dl>
-            
-          
-        </section>
-      
     </div>
   </div>
 
diff --git a/download.html b/download.html
index e6ce13bc..c084250b 100644
--- a/download.html
+++ b/download.html
@@ -23,7 +23,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="index.html">
         <img class="logo" src="site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
@@ -58,9 +58,9 @@ <h1>Download</h1>
   <section class="row">
     <div class="col-md-4">
       <h2>All Components</h2>
-      <a class="download" href="https://github.com/mozilla/brick/releases/download/0.10.0/brick-0.10.0.zip">
+      <a class="download" href="https://github.com/mozilla/brick/releases/download/0.11.0/brick-0.11.0.zip">
         <h3>Download Brick</h3>
-        <small>version 0.10.0 &mdash; 239K</small>
+        <small>version 0.11.0 &mdash; 182K</small>
       </a>
     </div>
     <div class="col-md-8">
@@ -112,14 +112,6 @@ <h2>Build Your Own Bundle</h2>
               </label>
             </div>
           
-            <div class="col-sm-6">
-              <label>
-                slidebox
-                <input type="checkbox" value="x-tag-slidebox"
-                       data-dependencies="">
-              </label>
-            </div>
-          
             <div class="col-sm-6">
               <label>
                 slider
@@ -144,14 +136,6 @@ <h2>Build Your Own Bundle</h2>
               </label>
             </div>
           
-            <div class="col-sm-6">
-              <label>
-                tooltip
-                <input type="checkbox" value="x-tag-tooltip"
-                       data-dependencies="">
-              </label>
-            </div>
-          
           </div>
           <div class="panel-footer c">
             <input type="submit" id="buildBundle"
@@ -391,8 +375,8 @@ <h2>Build Your Own Bundle</h2>
     function makeZip(js, css, extraFileInfo) {
       var zip = new JSZip();
 
-      zip.file('brick-0.10.0.byob'+(minifed?'.min.':'.')+'js', js);
-      zip.file('brick-0.10.0.byob'+(minifed?'.min.':'.')+'css', css);
+      zip.file('brick-0.11.0.byob'+(minifed?'.min.':'.')+'js', js);
+      zip.file('brick-0.11.0.byob'+(minifed?'.min.':'.')+'css', css);
 
       for(var i=0; i < extraFileInfo.length; i++){
         var fileData = extraFileInfo[i];
@@ -406,7 +390,7 @@ <h2>Build Your Own Bundle</h2>
 
       var blob = zip.generate({type:"blob"});
       console.log(blob);
-      zipLink.setAttribute('download', 'brick-0.10.0-byob.zip');
+      zipLink.setAttribute('download', 'brick-0.11.0-byob.zip');
       zipLink.style.display = 'inline-block';
       zipLink.setAttribute('href', window.URL.createObjectURL(blob));
     }
diff --git a/index.html b/index.html
index 2f249718..2468e40e 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@
     <div class="navbar-header">
       <a class="navbar-brand" href="index.html">
         <img class="logo" src="site/img/logo.png">
-        Brick<small> 0.10.0</small>
+        Brick<small> 0.11.0</small>
       </a>
     </div>
     <ul class="navbar-nav nav">
@@ -106,7 +106,7 @@ <h3>JavaScript</h3>
       <h1>Start Stacking</h1>
         <a class="download" href="download.html">
           <h3>Download Brick</h3>
-          <small>version 0.10.0 &mdash; 239K</small>
+          <small>version 0.11.0 &mdash; 182K</small>
         </a>
     </div>
     <div class="col-sm-6">
diff --git a/package.json b/package.json
index d1976e13..eaa52d64 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "brick",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "UI Web Components for Mobile Web Apps",
   "main": "index.js",
   "scripts": {
diff --git a/sink.html b/sink.html
index 7a50870d..8b5a75c9 100644
--- a/sink.html
+++ b/sink.html
@@ -103,25 +103,13 @@
     <script src="dist/brick.js"></script>
     <script>
       document.addEventListener('DOMComponentsLoaded', function(){
-        var slidebox = document.querySelector('x-slidebox');
         var slides = document.querySelectorAll('x-slide');
         var flipbox = document.querySelector('x-flipbox');
 
-        document.body.addEventListener('click', function (e) {
-          switch (e.target.className) {
-            case 'rand':
-              slidebox.slideTo(Math.random() * slides.length | 0);
-              break;
-            case 'flip':
-              flipbox.toggle();
-              break;
-          }
-        });
-
         var loc = location.hash;
         loc = parseInt(loc.substring(1));
         if (loc) {
-          document.querySelector('x-deck').shuffleTo(loc);
+          document.querySelector('x-deck').showCard(loc);
         }
       });
     </script>
diff --git a/site/css/main.css b/site/css/main.css
index cf72241f..9d595d0f 100644
--- a/site/css/main.css
+++ b/site/css/main.css
@@ -4,10 +4,11 @@ body {
 }
 
 .jumbotron {
-    background-image: linear-gradient(to bottom right, rgba(170,34,0,1), rgba(170,34,0,.5)), url(../img/bgtile.png);
-    background-size: auto, 636px auto;
+    background-color: #a20;
     color: #fff;
-    text-shadow: 0 0 2px #000;
+}
+.jumbotron h1 {
+  font-size: 4em;
 }
 
 .moz img {
@@ -125,6 +126,10 @@ section.demo-wrap:not(.clean){
 .jumbotron {
   margin-top: -21px;
   padding-bottom: 64px;
+  text-align: center;
+}
+.jumbotron h1 {
+  font-size: ;
 }
 
 footer {
diff --git a/skins/default/x-tag-appbar.styl b/skins/default/x-tag-appbar.styl
index ca93745d..044737a5 100644
--- a/skins/default/x-tag-appbar.styl
+++ b/skins/default/x-tag-appbar.styl
@@ -31,7 +31,7 @@ x-appbar {
       background-color: lighten($darkBG, 10%);
     }
     &::-moz-focus-inner {
-      bordr: 0;
+      border: 0;
       padding: 0;
     }
   }
diff --git a/skins/default/x-tag-slider.styl b/skins/default/x-tag-slider.styl
index d63e7100..bc3f45e8 100644
--- a/skins/default/x-tag-slider.styl
+++ b/skins/default/x-tag-slider.styl
@@ -10,15 +10,48 @@ $trackSize = 3px;
 x-slider {
 
     height: $thumbSize + 2;
-    padding-bottom: 2px;
 
-    .slider-thumb, input::-moz-range-thumb {
+    &:not([polyfill]) {
+        .slider-thumb {
+            display: none;
+        }
+        input {
+            z-index: 1;
+        }
+    }
+    &[polyfill] input {
+        visibility: hidden;
+    }
+
+    .slider-progress {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        border-radius: 3px;
+        background: $highlight;
+    }
+
+    .slider-thumb,
+    input[type='range']::-webkit-slider-thumb {
         background: $barFG;
-        -moz-appearance: none;
         -webkit-appearance: none;
         border-radius: 13px;
-        border: 1px solid #979797;
-        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.50);
+        border: 1px solid lighten(#979797, 20%);
+        box-shadow: 0px .5px 1px 0px rgba(0,0,0,0.20);
+        cursor: pointer;
+        display: block;
+        height: $thumbSize;
+        width: $thumbSize;
+    }
+
+    .slider-thumb,
+    input[type='range']::-moz-range-thumb {
+        background: $barFG;
+        -moz-appearance: none;
+        border-radius: 13px;
+        border: 1px solid lighten(#979797, 20%);
+        box-shadow: 0px .5px 1px 0px rgba(0,0,0,0.20);
         cursor: pointer;
         display: block;
         height: $thumbSize;
@@ -27,22 +60,32 @@ x-slider {
 
     .slider-track {
         background: #d8d8d8;
-        border-radius: 4px;
+        border-radius: 3px;
         height: 2px;
+        overflow: hidden;
     }
 
-    & > input::-moz-range-track,
-    & > input::-webkit-slider-runnable-track {
+    input[type=range]::-moz-range-track {
+        -moz-appearance: none;
         background: #d8d8d8;
+        border: 0 !important;
+        outline: 0;
+        border-radius: 3px;
+        height: 2px;
+        box-shadow: 0 none;
     }
 
+    input[type=range]::-moz-range-progress {
+        background: $highlight;
+        border-radius: 3px;
+    }
 
     input {
         -webkit-appearance: none;
         -moz-appearance: none;
+        appearance: none;
         background: transparent;
         border: 0px solid transparent;
         color: transparent;
-        padding-bottom: 2px;
     }
 }
\ No newline at end of file
diff --git a/skins/default/x-tag-toggle.styl b/skins/default/x-tag-toggle.styl
index 64540cda..bb46290b 100644
--- a/skins/default/x-tag-toggle.styl
+++ b/skins/default/x-tag-toggle.styl
@@ -4,6 +4,11 @@
 $toggleSize = 22px;
 
 x-toggle {
+
+  &[focus] {
+    outline: 0;
+  }
+
   .x-toggle-content {
     min-height: $toggleSize;
     line-height: $toggleSize + 2;
@@ -12,19 +17,21 @@ x-toggle {
   .x-toggle-check {
     width: $toggleSize;
     height: $toggleSize;
-    border-radius: 50%;
+    border-radius: 3px;
     margin: 0px 3px 0px 0px;
     color: #000;
     vertical-align: middle;
     border: 1px solid $darkBG;
     position: relative;
+    background: #fff;
   }
 
   &[no-box] .x-toggle-check {
     display: none !important;
   }
 
-  &[type="radio"][checked] .x-toggle-check {
+  &[type="radio"] input:checked + .x-toggle-check {
+    background: #fff;
 
     &:after {
       content: '';
@@ -42,7 +49,7 @@ x-toggle {
     }
   }
 
-  &[type="checkbox"][checked] .x-toggle-check {
+  &[type="checkbox"] input:checked + .x-toggle-check {
     border-width: 0;
     background: $highlight;