init to win it

src/components/action-menu/examples/action-menu-default/index.html

@@ -0,0 +1,18 @@
+
+  <div class="pane action-menu">
+
+    <div class="pane-backdrop"></div>
+
+    <div class="container">
+
+      <div class="content">
+        <div class="scroll-content">
+
+          <button class="button">Action button 1</button>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>

src/components/alert/examples/alert-default/index.html

@@ -0,0 +1,21 @@
+
+  <div class="pane alert">
+
+    <div class="pane-backdrop"></div>
+
+    <div class="container">
+
+      <div class="content">
+        <div class="scroll-content">
+
+          <p>Do you like cookies?</p>
+
+          <button class="button">Cancel</button>
+          <button class="button">Ok</button>
+
+        </div>
+      </div>
+
+    </div>
+
+  </div>

src/components/app/_scaffolding.scss

@@ -22,12 +22,12 @@ html {
     @include flex(1);
   }
 
-  .pane > .container.shared-pane {
+  .pane > .pane-container.pane-shared {
     position: absolute;
     width: 100%;
   }
 
-  .pane > .container {
+  .pane > .pane-container {
     position: relative;
     overflow: hidden;
 
@@ -37,12 +37,12 @@ html {
     @include flex-direction(column);
   }
 
-  .container > .pane {
+  .pane-container > .pane {
     position: absolute;
     min-height: 100%;
   }
 
-  .pane > .container > .content {
+  .pane > .pane-container > .content {
     position: relative;
     @include flex(1);
   }

src/components/app/_util.scss

@@ -4,6 +4,15 @@
 }
 
 
+.pane-backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: 0.3;
+}
+
+
 
 // Content Padding
 // --------------------------------------------------

src/components/checkbox/examples/checkbox-default/index.html

@@ -0,0 +1,18 @@
+
+<div class="item checkbox"
+     role="checkbox"
+     aria-label="Airplane Mode"
+     aria-checked="true"
+     aria-invalid="false">
+
+  <div class="item-container">
+
+    <div class="item-media"></div>
+
+    <div class="item-content">
+      Airplane Mode
+    </div>
+
+  </div>
+
+</div>

src/components/radio/examples/radio-default/index.html

@@ -0,0 +1,45 @@
+
+<div class="radio-group"
+     role="radiogroup"
+     aria-activedescendant="radio_1"
+     aria-invalid="false">
+
+  <div class="item radio"
+       role="radio"
+       id="radio_1"
+       value="Apple"
+       aria-checked="true"
+       aria-label="Apple">
+
+    <div class="item-container">
+
+      <div class="item-media"></div>
+
+      <div class="item-content">
+        Apple
+      </div>
+
+    </div>
+
+  </div>
+
+  <div class="item radio"
+       role="radio"
+       id="radio_2"
+       value="Banana"
+       aria-checked="false"
+       aria-label="Banana">
+
+    <div class="item-container">
+
+      <div class="item-media"></div>
+
+      <div class="item-content">
+        Banana
+      </div>
+
+    </div>
+
+  </div>
+
+</div>

src/components/switch/examples/basic/index.html

@@ -1 +0,0 @@
-<ion-switch></ion-switch>

src/components/switch/examples/switch-default/index.html

@@ -0,0 +1,18 @@
+
+<div class="item switch"
+     role="checkbox"
+     aria-label="Airplane Mode"
+     aria-checked="true"
+     aria-invalid="false">
+
+  <div class="item-container">
+
+    <div class="item-media"></div>
+
+    <div class="item-content">
+      Airplane Mode
+    </div>
+
+  </div>
+
+</div>

src/components/view/view.js

@@ -15,7 +15,7 @@ import {Ion} from '../ion'
       <content select="ion-nav-items[side=primary]"></content>
       <content select="ion-nav-items[side=secondary]"></content>
     </ion-toolbar>
-    <div class="container">
+    <div class="pane-container">
       <content></content>
     </div>`,
   directives: [Toolbar]