@shortfuse/materialdesignweb 0.2.0 → 0.5.0

package/docs/pages/search.eta

@@ -0,0 +1,242 @@
+<% 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__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 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__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 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/pages/search.js

@@ -0,0 +1,226 @@
+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 { setTextNode } from '../../core/dom.js';
+
+/** @typedef {{line1:string, line2:string}} CustomSearchResult */
+
+/** @type {SearchAdapter<any>} */
+let searchDocsSimple;
+/** @type {SearchAdapter<any>} */
+let searchDocsMultiline;
+
+/**
+ * @param {string} [filter]
+ * @return {CustomSearchResult[]}
+ */
+function performFakeSearch(filter) {
+  const results = [];
+  // eslint-disable-next-line guard-for-in
+  for (const key in navigator) {
+    const navKey = /** @type {keyof Navigator} */ (key);
+    const value = navigator[navKey] && navigator[navKey].toString();
+    if (!filter || key.includes(filter) || (value && value.includes(filter))) {
+      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
+ * @return {void}
+ */
+function searchResultRenderer(listItemElement, result) {
+  if (!listItemElement.hasChildNodes()) {
+    const markup = `
+    <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>
+      </div>
+    </div>`;
+    listItemElement.innerHTML = markup;
+    ListItem.attach(listItemElement);
+  }
+  const lines = listItemElement.getElementsByClassName('mdw-list__text-line');
+  setTextNode(lines[0], result.line1);
+  setTextNode(lines[1], result.line2);
+}
+
+/** @return {void} */
+function buildCustomSearch1() {
+  const textfield = document.getElementById('search-textfield-custom1');
+  const list = document.getElementById('search-list-custom1');
+  const busyIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-busy-indicator')[0]);
+
+  // For purpose of this demo results are cached.
+  // Actual filter is performed by SearchAdapter
+
+  /** @type {ListAdapter<CustomSearchResult>} */
+  const customListAdapter = new ListAdapter({
+    element: list,
+    datasource: [],
+    render: searchResultRenderer,
+  });
+
+  /** @type {CustomSearchResult[]} */
+  let myCachedResults = null;
+
+  /** @type {SearchAdapter<CustomSearchResult>} */
+  const searchDocsCustom = new SearchAdapter({
+    textfield,
+    list,
+    searchOnFocus: false,
+    dropdown: true,
+    textFilter: 'startsWith',
+    suggestionMethod: 'append',
+    performSearch: async (input) => {
+      // Use precached results
+      if (myCachedResults != null) {
+        return myCachedResults;
+      }
+
+      // Display a busy indicator
+      showElement(busyIndicator);
+
+      // Add results to a cached search adapter
+      myCachedResults = performFakeSearch();
+
+      // Let busy indicator spin to illustrate loading
+      await setTimeout(() => { /* noop */ }, 2000);
+      return myCachedResults;
+    },
+    updateList: (searchResults) => {
+      // SearchAdapter signaling the UI is ready to update with search results
+
+      if (customListAdapter.datasource === searchResults) {
+        // Search results have already been mapped. Nothing to do.
+        // SearchAdapter handles item filtering.
+        return;
+      }
+
+      // Directly assign search results as ListAdapter's data source
+      customListAdapter.datasource = searchResults;
+
+      // Remove busy indicator
+      hideElement(busyIndicator);
+
+      // Tell ListAdapter to perform a full refresh
+      customListAdapter.refresh();
+    },
+  });
+
+  searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+    const listContentElement = /** @type {HTMLElement} */ (event.target);
+    const listItemElement = /** @type {HTMLLIElement} */ (listContentElement.parentElement);
+    const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
+    if (!selectedItem) throw new Error('Missing item!');
+    const text = `${selectedItem.line1}:${selectedItem.line2}`;
+    document.getElementById('search-result-custom1').textContent = text;
+  });
+}
+
+/** @return {void} */
+function buildCustomSearch2() {
+  const textfield = document.getElementById('search-textfield-custom2');
+  const list = document.getElementById('search-list-custom2');
+  const busyIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-busy-indicator')[0]);
+  const noResultsIndicator = /** @type {HTMLElement} */ (textfield.getElementsByClassName('custom-no-results-indicator')[0]);
+
+  /** @type {ListAdapter<CustomSearchResult>} */
+  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,
+    debounce: 300,
+    dropdown: true,
+    filterItems: false,
+    performSearch: async (searchTerm) => {
+      // Clear ListAdapter
+      customListAdapter.clear();
+
+      showElement(busyIndicator);
+      hideElement(noResultsIndicator);
+
+      const myData = performFakeSearch(searchTerm);
+      // Spin for 1000ms
+      await setTimeout(() => { /* noop */ }, 1000);
+      return myData;
+    },
+    updateList: (items) => {
+      hideElement(busyIndicator);
+
+      if (!items.length) {
+        showElement(noResultsIndicator);
+        return;
+      }
+
+      // Assign results to ListAdapter
+      customListAdapter.datasource = items;
+      customListAdapter.refresh();
+    },
+  });
+  searchDocsCustom.list.addEventListener(ListContent.ACTIVATE_EVENT, (event) => {
+    const listContentElement = /** @type {HTMLElement} */ (event.target);
+    const listItemElement = /** @type {HTMLLIElement} */ (listContentElement.parentElement);
+    const selectedItem = customListAdapter.elementDataMap.get(listItemElement);
+    const text = `${selectedItem.line1}:${selectedItem.line2}`;
+    document.getElementById('search-result-custom2').textContent = text;
+  });
+}
+
+/** @return {void} */
+function setupSearches() {
+  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();
+}
+
+/** @return {void} */
+function initializeMdwComponents() {
+  for (const element of document.querySelectorAll('.js .mdw-textfield')) { TextField.attach(element); }
+}
+
+initializeMdwComponents();
+setupSearches();

package/docs/pages/selection.eta

@@ -0,0 +1,107 @@
+<% 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__title">Styled HTMLInputElement</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__title">aria-checked (JS)</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>

package/docs/pages/selection.js

@@ -0,0 +1,12 @@
+import * as List from '../../components/list/index.js';
+import * as Selection from '../../components/selection/index.js';
+import * as SelectionRadioGroup from '../../components/selection/radiogroup.js';
+
+/** @return {void} */
+function initializeMdwComponents() {
+  for (const element of document.getElementsByClassName('mdw-selection')) Selection.attach(element);
+  for (const element of document.getElementsByClassName('mdw-selection__radio-group')) SelectionRadioGroup.attach(element);
+  for (const element of document.getElementsByClassName('mdw-list')) List.attach(element);
+}
+
+initializeMdwComponents();

package/docs/pages/slider.eta

@@ -0,0 +1,23 @@
+<% var T = '../../templates/index.eta' %>
+<% layout('../_partials/_header.eta', {page: 'slider'}) %>
+<div class="mdw-grid" mdw-margin-top mdw-margin-bottom mdw-stretch>
+  <div class="mdw-grid__item" mdw-colspan="100%">
+    <h5 class="mdw-type" mdw-baseline-next="36">Sliders allow users to make selections from a range of values.</h5>
+    <p class="mdw-type">Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.</p>
+  </div>
+  <div class="mdw-grid__item" mdw-colspan="4">
+    <div class="component-sample">
+      <div class="component-sample__container">
+        <label class="mdw-slider mdw-theme" mdw-ink="secondary">
+          <input class="mdw-slider__input" type="range" list="sample-list" />
+          <datalist id="sample-list">
+            <option value="0" label="None"></option>
+            <option value="50" label="Half"></option>
+            <option value="100" label="All"></option>
+          </datalist>
+        </label>
+      </div>
+    </div>
+  </div>
+</div>
+<script src="slider.min.js"></script>