@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/docs/pages/search.eta

@@ -0,0 +1,246 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'search'}) %>
+<div class="comparison js">
+  <div class="render">
+    <div class="display-flex" style="padding:8px;">
+      <div class="flex-1 display-flex" flex-column>
+        <p>Text field dropdown with:</p>
+        <ul>
+          <li>one-time search on first input</li>
+          <li>startsWith text filter</li>
+          <li>append input on selection</li>
+        </ul>
+        <div>
+          <label class="mdw-textfield mdw-theme" id="search-textfield-custom1" mdw-ink="secondary">
+            <input class="mdw-textfield__input" placeholder=" " />
+            <div class="mdw-textfield__border">
+              <div class="mdw-textfield__outline-gap">
+                <div class="mdw-textfield__label">Property</div>
+              </div>
+            </div>
+            <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
+              <div class="custom-busy-indicator display-flex" flex-align-items="center">
+                <div class="mdw-progress-circle">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
+                  </svg>
+                </div>
+                <div>Searching...</div>
+              </div>
+              <div class="mdw-list" id="search-list-custom1"></div>
+            </div>
+          </label>
+        </div>
+        <p>Current Selection: <span id="search-result-custom1"></span></p>
+        <p>Text field dropdown with:</p>
+        <ul>
+          <li>input-based search</li>
+          <li>300ms debounce</li>
+          <li>replace input on selection</li>
+          <li>disabled item filter</li>
+        </ul>
+        <div>
+          <label class="mdw-textfield mdw-theme" id="search-textfield-custom2" mdw-ink="primary" mdw-outlined>
+            <input class="mdw-textfield__input" placeholder=" " />
+            <div class="mdw-textfield__border">
+              <div class="mdw-textfield__outline-gap">
+                <div class="mdw-textfield__label">Property</div>
+              </div>
+            </div>
+            <div class="mdw-textfield__dropdown mdw-theme" mdw-surface="card" mdw-type="list" mdw-hide>
+              <div class="custom-busy-indicator display-flex" flex-align-items="center">
+                <div class="mdw-progress-circle">
+                  <svg viewBox="0 0 24 24">
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12"></path>
+                    <path d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25"></path>
+                  </svg>
+                </div>
+                <div>Searching...</div>
+              </div>
+              <div class="custom-no-results-indicator display-flex" flex-align-items="center" style="display:none">No results found</div>
+              <div class="mdw-list" id="search-list-custom2"></div>
+            </div>
+          </label>
+        </div>
+        <p>Current Selection: <span id="search-result-custom2"></span></p>
+      </div>
+    </div>
+  </div>
+</div>
+<div class="comparison js">
+  <div class="render">
+    <div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark>
+      <div>12:30</div>
+      <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
+    </div>
+    <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
+      <div class="mdw-appbar__action">
+        <div class="mdw-appbar__start">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
+        </div>
+        <div class="mdw-appbar__title" mdw-custom>
+          <div class="mdw-textfield mdw-theme" id="search-textfield-simple" mdw-solo mdw-ink="secondary">
+            <input class="mdw-textfield__input" placeholder="Search" />
+          </div>
+        </div>
+        <div class="mdw-appbar__end">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="mdw-list" id="search-list-simple">
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Attractions</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Dining</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Education</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Family</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Health</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Office</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Promotions</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Radio</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Recipes</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Sports</a>
+        </li>
+        <li class="mdw-list__item">
+          <a class="mdw-list__content">Travel</a>
+        </li>
+      </ul>
+    </div>
+    <div class="androidnavbar">
+      <i class="material-icons back-button">&#xE3C8;</i>
+      <i class="material-icons">&#xE836;</i>
+      <i class="material-icons">&#xE835;</i>
+    </div>
+  </div>
+</div>
+<div class="comparison js">
+  <div class="render">
+    <div class="androidstatusbar mdw-theme" mdw-surface="primary 700" mdw-dark>
+      <div>12:30</div>
+      <i class="material-icons" style="letter-spacing:2px;padding:0 2px;">&#xE1BA;&#xE1C8;&#xE1A4;</i>
+    </div>
+    <div class="mdw-appbar mdw-theme" mdw-surface="primary 500" mdw-dark>
+      <div class="mdw-appbar__action">
+        <div class="mdw-appbar__start">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">arrow_back</a>
+        </div>
+        <div class="mdw-appbar__title" mdw-custom>
+          <div class="mdw-textfield mdw-theme" id="search-textfield-multiline" mdw-solo mdw-ink="secondary">
+            <input class="mdw-textfield__input" placeholder="Search" />
+          </div>
+        </div>
+        <div class="mdw-appbar__end">
+          <a class="mdw-button mdw-overlay mdw-ripple material-icons" mdw-icon tabindex="0">clear</a>
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <ul class="mdw-list" id="search-list-multiline">
+        <li class="mdw-list__subheader mdw-theme" mdw-ink="medium">Today</li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content mdw-overlay mdw-ripple">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Brunch this weekend?</div>
+              <div class="mdw-list__text-block">Ali Connors<span class="mdw-theme" mdw-ink="medium"> &mdash; I'll be in your neighborhood doing errands this weekend. Do you want to meet?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Summer BBQ<span class="mdw-theme" mdw-ink="medium"> 4</span></div>
+              <div class="mdw-list__text-block">to Alex, Scott, Jennifer<span class="mdw-theme" mdw-ink="medium"> &mdash; Wish I could come. but I'm out of town this weekend.</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Oui oui</div>
+              <div class="mdw-list__text-block">Sandra Adams<span class="mdw-theme" mdw-ink="medium"> &mdash; Do you have Paris recommendations? Have you ever been?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Birthday gift</div>
+              <div class="mdw-list__text-block">Trevor Hansen<span class="mdw-theme" mdw-ink="medium"> &mdash; Have any ideas about what we should get Heidi for her birthday?</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Recipe to try</div>
+              <div class="mdw-list__text-block">Britta Holt<span class="mdw-theme" mdw-ink="medium"> &mdash; We should eat this: Grated Squash, Corn, and tomatillo Tacos J</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Giants game</div>
+              <div class="mdw-list__text-block">David Park<span class="mdw-theme" mdw-ink="medium"> &mdash; Any interest in seeing</span></div>
+            </div>
+          </div>
+        </li>
+        <li class="mdw-list__item">
+          <div class="mdw-list__content">
+            <div class="mdw-list__avatar">
+              <i class="material-icons" style="font-size:40px;">&#xE853;</i>
+            </div>
+            <div class="mdw-list__text">
+              <div class="mdw-list__text-line">Montauk weekend</div>
+              <div class="mdw-list__text-block">-----</div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    <div class="androidnavbar">
+      <i class="material-icons back-button">&#xE3C8;</i>
+      <i class="material-icons">&#xE836;</i>
+      <i class="material-icons">&#xE835;</i>
+    </div>
+  </div>
+</div>
+<script src="search.min.js"></script>

package/{docs-src/components → docs/pages}/search.js

@@ -1,12 +1,16 @@
-import * as ListItem from '../../components/list/item';
-import * as ListContent from '../../components/list/content';
-import * as TextField from '../../components/textfield/index';
-import SearchAdapter from '../../adapters/search/index';
-import { iterateArrayLike, setTextNode } from '../../core/dom';
-import { ListAdapter } from '../../index';
+import ListAdapter from '../../adapters/list/index.js';
+import SearchAdapter from '../../adapters/search/index.js';
+import * as ListContent from '../../components/list/content.js';
+import * as ListItem from '../../components/list/item.js';
+import * as TextField from '../../components/textfield/index.js';
+import { iterateArrayLike, setTextNode } from '../../core/dom.js';
 
 /** @typedef {{line1:string, line2:string}} CustomSearchResult */
 
+/** @type {SearchAdapter<any>} */
+let searchDocsSimple;
+/** @type {SearchAdapter<any>} */
+let searchDocsMultiline;
 
 /**
  * @param {string} [filter]
@@ -15,15 +19,32 @@ import { ListAdapter } from '../../index';
 function performFakeSearch(filter) {
   const results = [];
   // eslint-disable-next-line guard-for-in, no-restricted-syntax
-  for (const key in window.navigator) {
-    const value = navigator[key] && navigator[key].toString();
+  for (const key in navigator) {
+    /** @type {keyof Navigator} */
+    const navKey = (key);
+    const value = navigator[navKey] && navigator[navKey].toString();
     if (!filter || key.indexOf(filter) !== -1 || (value && value.indexOf(filter) !== -1)) {
-      results.push({ line1: key, line2: navigator[key] });
+      results.push({ line1: key, line2: value });
     }
   }
   return results;
 }
 
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+function hideElement(element) {
+  element.style.setProperty('display', 'none');
+}
+/**
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+function showElement(element) {
+  element.style.setProperty('display', '');
+}
+
 /**
  * @param {HTMLLIElement} listItemElement
  * @param {CustomSearchResult} result
@@ -32,7 +53,7 @@ function performFakeSearch(filter) {
 function searchResultRenderer(listItemElement, result) {
   if (!listItemElement.children.length) {
     const markup = `
-    <div class="mdw-list__content">
+    <div class="mdw-list__content mdw-theme" mdw-ink="secondary" aria-selected="false">
       <div class="mdw-list__text">
         <div class="mdw-list__text-line"></div>
         <div class="mdw-list__text-line"></div>
@@ -58,12 +79,15 @@ function buildCustomSearch1() {
   // Actual filter is performed by SearchAdapter
 
   /** @type {ListAdapter<CustomSearchResult>} */
-  const customListAdapter = new ListAdapter(list, [], searchResultRenderer);
+  const customListAdapter = new ListAdapter({
+    element: list,
+    datasource: [],
+    render: searchResultRenderer,
+  });
 
   /** @type {CustomSearchResult[]} */
   let myCachedResults = null;
 
-
   /** @type {SearchAdapter<CustomSearchResult>} */
   const searchDocsCustom = new SearchAdapter({
     textfield,
@@ -80,7 +104,7 @@ function buildCustomSearch1() {
       }
 
       // Display a busy indicator
-      busyIndicator.style.setProperty('display', '');
+      showElement(busyIndicator);
 
       // Add results to a cached search adapter
       myCachedResults = performFakeSearch();
@@ -105,7 +129,7 @@ function buildCustomSearch1() {
       customListAdapter.datasource = searchResults;
 
       // Remove busy indicator
-      busyIndicator.style.setProperty('display', 'none');
+      hideElement(busyIndicator);
 
       // Tell ListAdapter to perform a full refresh
       customListAdapter.refresh();
@@ -118,28 +142,12 @@ function buildCustomSearch1() {
     const listContentElement = (event.target);
     /** @type {HTMLLIElement} */
     const listItemElement = (listContentElement.parentElement);
-    const selectedItem = customListAdapter.elementMap.get(listItemElement);
+    const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
     const text = `${selectedItem.line1}:${selectedItem.line2}`;
     document.getElementById('search-result-custom1').textContent = text;
   });
 }
 
-
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-function hideElement(element) {
-  element.style.setProperty('display', 'none');
-}
-/**
- * @param {HTMLElement} element
- * @return {void}
- */
-function showElement(element) {
-  element.style.setProperty('display', '');
-}
-
 /** @return {void} */
 function buildCustomSearch2() {
   const textfield = document.getElementById('search-textfield-custom2');
@@ -150,11 +158,16 @@ function buildCustomSearch2() {
   const noResultsIndicator = (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
 
   /** @type {ListAdapter<CustomSearchResult>} */
-  const customListAdapter = new ListAdapter(list, [], searchResultRenderer);
+  const customListAdapter = new ListAdapter({
+    element: list,
+    datasource: [],
+    render: searchResultRenderer,
+  });
 
   // For purpose of this query is "searched" every time with no cache.
   // SearchAdapter performs no filter
 
+  /** @type {SearchAdapter<CustomSearchResult>} */
   const searchDocsCustom = new SearchAdapter({
     textfield,
     list,
@@ -195,7 +208,7 @@ function buildCustomSearch2() {
     const listContentElement = (event.target);
     /** @type {HTMLLIElement} */
     const listItemElement = (listContentElement.parentElement);
-    const selectedItem = customListAdapter.elementMap.get(listItemElement);
+    const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
     const text = `${selectedItem.line1}:${selectedItem.line2}`;
     document.getElementById('search-result-custom2').textContent = text;
   });
@@ -203,15 +216,19 @@ function buildCustomSearch2() {
 
 /** @return {void} */
 function setupSearches() {
-  const searchDocsSimple = new SearchAdapter({
-    textfield: document.getElementById('search-textfield-simple'),
-    list: document.getElementById('search-list-simple'),
-  });
-  const searchDocsMultiline = new SearchAdapter({
-    textfield: document.getElementById('search-textfield-multiline'),
-    list: document.getElementById('search-list-multiline'),
-    suggestionMethod: 'none',
-  });
+  if (!searchDocsSimple) {
+    searchDocsSimple = new SearchAdapter({
+      textfield: document.getElementById('search-textfield-simple'),
+      list: document.getElementById('search-list-simple'),
+    });
+  }
+  if (!searchDocsMultiline) {
+    searchDocsMultiline = new SearchAdapter({
+      textfield: document.getElementById('search-textfield-multiline'),
+      list: document.getElementById('search-list-multiline'),
+      suggestionMethod: 'none',
+    });
+  }
 
   buildCustomSearch1();
   buildCustomSearch2();

package/{docs-src/components → docs/pages}/search.pug

@@ -1,6 +1,55 @@
 include ../_mixins.pug
 
 +header("search")
+  .comparison.js
+    .render
+      .display-flex(style="padding:8px")
+        .flex-1.display-flex(flex-column)
+          p Text field dropdown with:
+          ul
+            li one-time search on first input
+            li startsWith text filter
+            li append input on selection
+          div
+            label.mdw-textfield#search-textfield-custom1.mdw-theme(mdw-ink="secondary")
+              input.mdw-textfield__input(placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Property
+              .mdw-textfield__dropdown.mdw-theme(mdw-surface="card" mdw-type="list" mdw-hide)
+                .custom-busy-indicator.display-flex(flex-align-items="center")
+                  .mdw-progress-circle
+                    svg(viewBox="0 0 24 24")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
+                  span Searching...
+                .mdw-list#search-list-custom1
+          p Current Selection: 
+            span#search-result-custom1
+          p Text field dropdown with:
+          ul
+            li input-based search
+            li 300ms debounce
+            li replace input on selection
+            li disabled item filter
+          div
+            label.mdw-textfield#search-textfield-custom2.mdw-theme(mdw-ink="primary" mdw-outlined)
+              input.mdw-textfield__input(placeholder=" ")
+              .mdw-textfield__border
+                .mdw-textfield__outline-gap
+                  .mdw-textfield__label Property
+              .mdw-textfield__dropdown.mdw-theme(mdw-surface="card" mdw-type="list" mdw-hide)
+                .custom-busy-indicator.display-flex(flex-align-items="center")
+                  .mdw-progress-circle
+                    svg(viewBox="0 0 24 24")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
+                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
+                  span Searching...
+                .custom-no-results-indicator.display-flex(flex-align-items="center" style="display:none")
+                  span No results found.
+                .mdw-list#search-list-custom2
+          p Current Selection: 
+            span#search-result-custom2
   .comparison.js
     .render
       +androidstatusbar('primary 700', 'dark')
@@ -38,7 +87,6 @@ include ../_mixins.pug
           li.mdw-list__item
             a.mdw-list__content Travel
       +androidnavbar
-    +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B5ZSepuCX1xObnc4ZFYybVRWY2s/single-action4.png')
 
   .comparison.js
     .render
@@ -112,55 +160,6 @@ include ../_mixins.pug
                 .mdw-list__text-line Montauk weekend
                 .mdw-list__text-block -----
       +androidnavbar
-    +target('https://storage.googleapis.com/material-design/publish/material_v_12/assets/0B5ZSepuCX1xObnc4ZFYybVRWY2s/single-action4.png')
 
-  .comparison.js
-    .render
-      .content.display-flex(style="padding:8px")
-        .flex-1.display-flex(flex-column)
-          p Text field dropdown with:
-          ul
-            li one-time search on first input
-            li startsWith text filter
-            li append input on selection
-          div
-            label.mdw-textfield#search-textfield-custom1.mdw-theme(mdw-ink="secondary")
-              input.mdw-textfield__input(placeholder=" ")
-              .mdw-textfield__border
-                .mdw-textfield__outline-gap
-                  .mdw-textfield__label Property
-              .mdw-textfield__dropdown.mdw-theme(mdw-surface="card" mdw-type="list" mdw-hide)
-                .custom-busy-indicator.display-flex(flex-align-items="center")
-                  .mdw-progress-circle
-                    svg(viewBox="0 0 24 24")
-                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
-                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
-                  span Searching...
-                .mdw-list#search-list-custom1
-          p Current Selection: 
-            span#search-result-custom1
-          p Text field dropdown with:
-          ul
-            li input-based search
-            li 300ms debounce
-            li replace input on selection
-            li disabled item filter
-          div
-            label.mdw-textfield#search-textfield-custom2.mdw-theme(mdw-ink="primary" mdw-outlined)
-              input.mdw-textfield__input(placeholder=" ")
-              .mdw-textfield__border
-                .mdw-textfield__outline-gap
-                  .mdw-textfield__label Property
-              .mdw-textfield__dropdown.mdw-theme(mdw-surface="card" mdw-type="list" mdw-hide)
-                .custom-busy-indicator.display-flex(flex-align-items="center")
-                  .mdw-progress-circle
-                    svg(viewBox="0 0 24 24")
-                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12")
-                      path(d="M12 3.25A8.75 8.75 0 1 1 3.25 12 A 8.75 8.75 0 0 1 12 3.25")
-                  span Searching...
-                .custom-no-results-indicator.display-flex(flex-align-items="center" style="display:none")
-                  span No results found.
-                .mdw-list#search-list-custom2
-          p Current Selection: 
-            span#search-result-custom2
+  
   script(src='search.min.js')

package/docs/pages/selection.eta

@@ -0,0 +1,111 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'selection'}) %>
+<div class="mdw-grid" mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <div class="render-fill">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
+        <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__title">Styled HTMLInputElement</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'blue', checked:true, prefix:true, type:'switch' , text:'Switch' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'blue', checked:true, prefix:true , text:'Prefixed' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', checked:true , text:'Suffixed' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', checked:true, disabled:true, text:'Disabled' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test', checked:true , text:'Option A' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test' , text:'Option B' }}) %>
+          </div>
+          <div class="display-flex" style="padding:16px;">
+            <%~ includeFile(T, { selection: { ink:'teal', type:'radio', name:'test', disabled:true , text:'Option C' }}) %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="mdw-grid__content">
+      <div class="render-fill">
+        <%~ includeFile('../_partials/_androidstatusbar.eta', { surface:'teal 700', dark:true }) %>
+        <div class="mdw-appbar mdw-theme" mdw-surface="teal 500" mdw-dark>
+          <div class="mdw-appbar__action">
+            <div class="mdw-appbar__title">aria-checked (JS)</div>
+          </div>
+        </div>
+        <div class="content">
+          <div class="mdw-list__subheader mdw-theme" id="docs-selection-subheader1" mdw-ink="medium">Switch</div>
+          <ul class="mdw-list" role="listbox" aria-labelledby="docs-selection-subheader1">
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">Android Switch</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-switch></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false" aria-disabled="true">
+                <div class="mdw-list__text mdw-selection__label">Android Switch Disabled</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal contrast" mdw-switch></div>
+              </a>
+            </li>
+          </ul>
+          <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">.mdw-list[role="radiogroup"]</div>
+          <ul class="mdw-list mdw-selection__radio-group" role="radiogroup">
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">
+                  <div class="mdw-list__text-line">Option 1</div>
+                  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Description</div>
+                </div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-radio></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false">
+                <div class="mdw-list__text mdw-selection__label">
+                  <div class="mdw-list__text-line">Option 2</div>
+                  <div class="mdw-list__text-line mdw-theme" mdw-ink="medium">Description</div>
+                </div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="blue" mdw-radio></div>
+              </a>
+            </li>
+          </ul>
+          <div class="mdw-list__subheader mdw-theme" mdw-ink="medium">Multiple check</div>
+          <ul class="mdw-list" role="listbox" aria-multiselectable="true">
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">Option 1</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="teal" mdw-checkbox></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="true">
+                <div class="mdw-list__text mdw-selection__label">Option 2</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="blue" mdw-checkbox></div>
+              </a>
+            </li>
+            <li class="mdw-list__item">
+              <a class="mdw-list__content mdw-selection mdw-overlay" aria-checked="false">
+                <div class="mdw-list__text mdw-selection__label">Option 3</div>
+                <div class="mdw-list__secondary mdw-selection__icon mdw-theme" mdw-ink="warn" mdw-checkbox></div>
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="selection.min.js"></script>