@shortfuse/materialdesignweb 0.3.0 → 0.4.0

package/{docs-src → docs}/pwa/pwa.pug

@@ -11,7 +11,6 @@ html.mdw-layout.mdw-theme(lang='en')
     meta(name="apple-mobile-web-app-capable" content="yes")
     link(rel='stylesheet' href="//fonts.googleapis.com/icon?family=Material+Icons")
     link(rel='stylesheet' href='pwa.min.css')
-    script(src='prerender.common.min.js')
     script(src='pwa-prerender.min.js')
   body.mdw-layout__body.mdw-theme(mdw-surface="background" mdw-sidesheet-toggle="dismissible" mdw-sidesheet-style="clipped")
     .mdw-layout__menus
@@ -20,8 +19,8 @@ html.mdw-layout.mdw-theme(lang='en')
       include ./_dialogs.pug
     .mdw-layout__navdrawer
       .mdw-layout__sheet-content.mdw-theme(mdw-surface="card" mdw-border-ink)
-        ul.mdw-list
-          li.mdw-list__item(role="none")
+        ul.mdw-list(mdw-margin-top mdw-margin-bottom)
+          li.mdw-list__item
             a.mdw-list__content
               .mdw-list__text Attractions
               .mdw-list__icon.mdw-theme.material-icons(mdw-ink="medium") local_activity
@@ -75,7 +74,7 @@ html.mdw-layout.mdw-theme(lang='en')
     .mdw-layout__appbar.mdw-appbar.mdw-theme(mdw-autohide="mobile tablet" mdw-surface="card")
       .mdw-layout__appbar-shape
         .mdw-layout__fab-cut-track
-          svg
+          svg(shape-rendering="geometricPrecision")
             mask#fabMask(maskContentUnits='objectBoundingBox', x='0', y='0', width='1', height='1')
               rect(fill='white', x='0', y='0', width='1', height='1')
               ellipse.mdw-layout__fab-mask-shape(cx='0.5', cy='0', rx='.5', ry='1', fill='black', style='transform-origin:0.5px 0')
@@ -120,282 +119,186 @@ html.mdw-layout.mdw-theme(lang='en')
     .mdw-layout__snackbar
       .mdw-layout__snackbar-anchor
         .mdw-snackbar__container
-          .mdw-snackbar.mdw-theme(aria-hidden="false" mdw-surface="background 900" mdw-dark)
-            span Extremely long snackbar action text. This should text-wrap automatically when it's too large
-            +mdwButton({ ink:'secondary' }) Action
     .mdw-layout__content
       .mdw-layout__content-page
-        .mdw-grid(mdw-margin-top mdw-margin-bottom)
-          .mdw-grid__item(mdw-colspan="4")
+        .mdw-grid(mdw-margin-top mdw-margin-bottom mdw-stretch)
+          .mdw-grid__item(mdw-colspan="6")
             .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink)
-                .mdw-card__start
-                  .mdw-card__thumbnail.material-icons(style="font-size:40px") web_asset
-                h6.mdw-card__header(mdw-two-line) App Bar
-                .mdw-card__subheader Informations and actions
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                ul.mdw-list
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="appbar-bottom" value="top" checked)
-                      .mdw-list__text.mdw-selection__label Top
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="appbar-bottom" value="bottom")
-                      .mdw-list__text.mdw-selection__label
-                        .mdw-list__text-line Bottom
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-bottom]
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="fab-cut" disabled)
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line FAB Cutout
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-cut]
-                      .mdw-selection__icon
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                ul.mdw-list
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary" mdw-switch)
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="use-appbar-autohide" checked)
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line Auto Hide
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide]
-                      .mdw-selection__icon
-                  .mdw-list__item-group
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="appbar-autohide" value="mobile")
-                        .mdw-list__text.mdw-selection__label
-                          .mdw-list__text-line Mobile Only
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide="mobile"]
-                        .mdw-selection__icon
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="appbar-autohide" value="tablet")
-                        .mdw-list__text.mdw-selection__label
-                          .mdw-list__text-line Tablet Only
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide="tablet"]
-                        .mdw-selection__icon
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="appbar-autohide" value="mobile tablet" checked)
-                        .mdw-list__text.mdw-selection__label
-                          .mdw-list__text-line Mobile + Tablet
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide="mobile tablet"]
-                        .mdw-selection__icon
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="appbar-autohide" value="")
-                        .mdw-list__text.mdw-selection__label
-                          .mdw-list__text-line All Devices
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autohide=""]
-                        .mdw-selection__icon
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                ul.mdw-list
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary" mdw-switch)
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="appbar-autoraise")
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line Auto Raise
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autoraise]
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary" mdw-switch)
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="appbar-autoprominent")
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line Auto Prominent
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autoprominent]
-                      .mdw-selection__icon
-          .mdw-grid__item(mdw-colspan="4")
+              .mdw-card__start
+                .mdw-card__thumbnail.material-icons(style="font-size:40px") web_asset
+              h6.mdw-card__header(mdw-two-line) App Bar
+              .mdw-card__subheader Informations and actions
+              .mdw-divider.mdw-theme(mdw-ink="divider")
+              ul.mdw-list(mdw-margin-top)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection.mdw-list__subheader(aria-checked="true" mdw-no-autocheck data-name="use-appbar-autohide")
+                    .mdw-list__text
+                      .mdw-list__text-line Auto Hide
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") Mobile and Tablet
+                    .mdw-divider__vertical.mdw-theme(mdw-ink="divider")
+                    .mdw-list__secondary(mdw-action)
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="appbar-autoraise")
+                    .mdw-selection__label.mdw-list__text
+                      .mdw-list__text-line Auto Raise
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autoraise]
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="appbar-autoprominent")
+                    .mdw-selection__label.mdw-list__text
+                      .mdw-list__text-line Auto Prominent
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-autoprominent]
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+              .mdw-list__subheader.mdw-theme(mdw-ink="medium") Position (Mobile)
+              ul.mdw-list(mdw-margin-bottom)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="appbar-bottom" data-value="bottom")
+                    .mdw-list__text.mdw-selection__label
+                      .mdw-list__text-line Bottom
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-bottom]
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="fab-cut" aria-disabled="true")
+                    .mdw-selection__label.mdw-list__text
+                      .mdw-list__text-line FAB Cutout
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-cut]
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-checkbox)
+          .mdw-grid__item(mdw-colspan="6")
             .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink)
-                .mdw-card__start
-                  .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleY(-1)") web_asset
-                h6.mdw-card__header(mdw-two-line) FAB
-                .mdw-card__subheader Floating Action Button
-                ul.mdw-list
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary" mdw-switch)
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="fab-show" checked)
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line Visible
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-show]
-                      .mdw-selection__icon
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                ul.mdw-list
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary" mdw-switch)
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="use-fab-mobile" checked)
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line Mobile
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile]
-                      .mdw-selection__icon
-                  .mdw-list__item-group
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="fab-mobile" value="")
-                        .mdw-selection__label.mdw-list__text
-                          .mdw-list__text-line End
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile=""]
-                        .mdw-selection__icon
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="fab-mobile" value="center" checked)
-                        .mdw-selection__label.mdw-list__text
-                          .mdw-list__text-line Center
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile="center"]
-                        .mdw-selection__icon
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="fab-mobile" value="full")
-                        .mdw-selection__label.mdw-list__text
-                          .mdw-list__text-line Full
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-mobile="full"]
-                        .mdw-selection__icon
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                ul.mdw-list
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary" mdw-switch)
-                      input.mdw-selection__input.mdw-overlay(type="checkbox" name="use-fab-desktop" checked)
-                      .mdw-selection__label.mdw-list__text
-                        .mdw-list__text-line Desktop
-                        .mdw-list__text-line.mdw-theme(mdw-ink="medium") [fab-desktop]
-                      .mdw-selection__icon
-                  .mdw-list__item-group
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="fab-desktop" value="" checked)
-                        .mdw-selection__label.mdw-list__text
-                          .mdw-list__text-line End
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [fab-desktop=""]
-                        .mdw-selection__icon
-                    li.mdw-list__item
-                      label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                        input.mdw-selection__input.mdw-overlay(type="radio" name="fab-desktop" value="appbar")
-                        .mdw-selection__label.mdw-list__text
-                          .mdw-list__text-line App Bar
-                          .mdw-list__text-line.mdw-theme(mdw-ink="medium") [fab-desktop="appbar"]
-                        .mdw-selection__icon
-          .mdw-grid__item(mdw-colspan="4")
+              .mdw-card__start
+                .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleY(-1)") web_asset
+              h6.mdw-card__header(mdw-two-line) FAB
+              .mdw-card__subheader Floating Action Button
+              .mdw-divider.mdw-theme(mdw-ink="divider")
+              ul.mdw-list(mdw-margin-top mdw-margin-bottom)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="true" data-name="fab-show")
+                    .mdw-selection__label.mdw-list__text
+                      .mdw-list__text-line Visible
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") [mdw-fab-show]
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="true" mdw-no-autocheck data-name="use-fab-mobile")
+                    .mdw-selection__label.mdw-list__text
+                      .mdw-list__text-line Mobile
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") Center
+                    .mdw-divider__vertical.mdw-theme(mdw-ink="divider")
+                    .mdw-list__secondary(mdw-action)
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="true" mdw-no-autocheck data-name="use-fab-desktop")
+                    .mdw-selection__label.mdw-list__text
+                      .mdw-list__text-line Desktop
+                      .mdw-list__text-line.mdw-theme(mdw-ink="medium") End
+                    .mdw-divider__vertical.mdw-theme(mdw-ink="divider ")
+                    .mdw-list__secondary(mdw-action)
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-switch)
+          .mdw-grid__item(mdw-colspan="6")
             .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink)
-                .mdw-card__start
-                  .mdw-card__thumbnail.material-icons.mdw-theme(style="font-size:40px;") vertical_split
-                h6.mdw-card__header(mdw-two-line) Navigation Drawer
-                .mdw-card__subheader App Destinations
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                .mdw-list
-                  .mdw-list__subheader.mdw-theme(mdw-ink="medium") Style (Desktop)
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-style" value="" checked)
-                      .mdw-list__text.mdw-selection__label Full-height
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-style" value="modal")
-                      .mdw-list__text.mdw-selection__label Modal
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-style" value="clipped")
-                      .mdw-list__text.mdw-selection__label Clipped
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-style" value="clipped floating")
-                      .mdw-list__text.mdw-selection__label Clipped Floating
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-style" value="clipped floating card")
-                      .mdw-list__text.mdw-selection__label Clipped Floating Card
-                      .mdw-selection__icon
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                .mdw-list
-                  .mdw-list__subheader.mdw-theme(mdw-ink="medium") Toggle (Desktop)
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-toggle" value="" checked)
+              .mdw-card__start
+                .mdw-card__thumbnail.material-icons.mdw-theme(style="font-size:40px;") vertical_split
+              h6.mdw-card__header(mdw-two-line) Navigation Drawer
+              .mdw-card__subheader App Destinations
+              .mdw-divider.mdw-theme(mdw-ink="divider")
+              .mdw-list__subheader.mdw-theme(mdw-ink="medium") Style (Desktop)
+              ul.mdw-list.mdw-selection__radio-group(role="radiogroup")
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="true" data-name="navdrawer-style" data-value="")
+                    .mdw-list__text.mdw-selection__label Full-height
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="navdrawer-style" data-value="modal")
+                    .mdw-list__text.mdw-selection__label Modal
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="navdrawer-style" data-value="clipped")
+                    .mdw-list__text.mdw-selection__label Clipped
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="navdrawer-style" data-value="clipped floating")
+                    .mdw-list__text.mdw-selection__label Clipped Floating
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="navdrawer-style" data-value="clipped floating card")
+                    .mdw-list__text.mdw-selection__label Clipped Floating Card
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+              .mdw-list__subheader.mdw-theme(mdw-ink="medium") Toggle (Desktop)
+              ul.mdw-list.mdw-selection__radio-group(role="radiogroup" mdw-margin-bottom)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="true" data-name="navdrawer-toggle" data-value="")
                       .mdw-list__text.mdw-selection__label None (Perminent)
-                      .mdw-selection__icon
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
                   li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-toggle" value="dismissible")
+                    a.mdw-list__content.mdw-selection(aria-checked="false" data-name="navdrawer-toggle" data-value="dismissible")
                       .mdw-list__text.mdw-selection__label Dismissible
-                      .mdw-selection__icon
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
                   li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="navdrawer-toggle" value="mini")
+                    a.mdw-list__content.mdw-selection(aria-checked="false" data-name="navdrawer-toggle" data-value="mini")
                       .mdw-list__text.mdw-selection__label Mini
-                      .mdw-selection__icon
-          .mdw-grid__item(mdw-colspan="4")
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+          .mdw-grid__item(mdw-colspan="6")
             .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink)
-                .mdw-card__start
-                  .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleX(-1)") vertical_split
-                h6.mdw-card__header(mdw-two-line) Side Sheet
-                .mdw-card__subheader Supplementary content
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                .mdw-list
-                  .mdw-list__subheader.mdw-theme(mdw-ink="medium") Style (Desktop)
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-style" value="")
-                      .mdw-list__text.mdw-selection__label Full-height
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-style" value="modal")
-                      .mdw-list__text.mdw-selection__label Modal
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-style" value="clipped" checked)
-                      .mdw-list__text.mdw-selection__label Clipped
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-style" value="clipped floating")
-                      .mdw-list__text.mdw-selection__label Clipped Floating
-                      .mdw-selection__icon
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-style" value="clipped floating card")
-                      .mdw-list__text.mdw-selection__label Clipped Floating Card
-                      .mdw-selection__icon
-                .mdw-divider.mdw-theme(mdw-ink="divider")
-                .mdw-list
-                  .mdw-list__subheader.mdw-theme(mdw-ink="medium") Toggle (Desktop)
-                  li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-toggle" value="")
+              .mdw-card__start
+                .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleX(-1)") vertical_split
+              h6.mdw-card__header(mdw-two-line) Side Sheet
+              .mdw-card__subheader Supplementary content
+              .mdw-divider.mdw-theme(mdw-ink="divider")
+              .mdw-list__subheader.mdw-theme(mdw-ink="medium") Style (Desktop)
+              ul.mdw-list.mdw-selection__radio-group(role="radiogroup")
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="sidesheet-style" data-value="")
+                    .mdw-list__text.mdw-selection__label Full-height
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="sidesheet-style" data-value="modal")
+                    .mdw-list__text.mdw-selection__label Modal
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="true" data-name="sidesheet-style" data-value="clipped")
+                    .mdw-list__text.mdw-selection__label Clipped
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="sidesheet-style" data-value="clipped floating")
+                    .mdw-list__text.mdw-selection__label Clipped Floating
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="sidesheet-style" data-value="clipped floating card")
+                    .mdw-list__text.mdw-selection__label Clipped Floating Card
+                    .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+              .mdw-list__subheader.mdw-theme(mdw-ink="medium") Toggle (Desktop)
+              ul.mdw-list.mdw-selection__radio-group(role="radiogroup" mdw-margin-bottom)
+                li.mdw-list__item
+                  a.mdw-list__content.mdw-selection(aria-checked="false" data-name="sidesheet-toggle" data-value="")
                       .mdw-list__text.mdw-selection__label None (Perminent)
-                      .mdw-selection__icon
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
                   li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-toggle" value="dismissible" checked)
+                    a.mdw-list__content.mdw-selection(aria-checked="true" data-name="sidesheet-toggle" data-value="dismissible")
                       .mdw-list__text.mdw-selection__label Dismissible
-                      .mdw-selection__icon
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
                   li.mdw-list__item
-                    label.mdw-list__content.mdw-selection.mdw-theme(mdw-ink="secondary")
-                      input.mdw-selection__input.mdw-overlay(type="radio" name="sidesheet-toggle" value="mini")
+                    a.mdw-list__content.mdw-selection(aria-checked="false" data-name="sidesheet-toggle" data-value="mini")
                       .mdw-list__text.mdw-selection__label Mini
-                      .mdw-selection__icon
-          .mdw-grid__item(mdw-colspan="4")
+                      .mdw-selection__icon.mdw-theme(mdw-ink="secondary" mdw-radio)
+          .mdw-grid__item(mdw-colspan="6")
             .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink)
-                .mdw-card__start
-                  .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleX(-1)") vertical_split
-                h6.mdw-card__header(mdw-two-line) Dialogs
-                .mdw-card__subheader Supplementary content
-                .mdw-card__actions
-                  +mdwButton()#dialog-alert-button Show Dialog
-          .mdw-grid__item(mdw-colspan="4")
+              .mdw-card__start
+                .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleX(-1)") vertical_split
+              h6.mdw-card__header(mdw-two-line) Dialogs
+              .mdw-card__subheader Supplementary content
+              .mdw-divider.mdw-theme(mdw-ink="divider")
+              .mdw-card__actions
+                +mdwButton()#dialog-alert-button Alert Dialog
+                +mdwButton()#dialog-confirm-button Confirm Dialog
+          .mdw-grid__item(mdw-colspan="6")
             .mdw-grid__content.mdw-card.mdw-theme(mdw-surface="card" mdw-border-ink)
-                .mdw-card__start
-                  .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleX(-1)") vertical_split
-                h6.mdw-card__header(mdw-two-line) Menus
-                .mdw-card__subheader Supplementary content
-                .mdw-card__actions
-                  +mdwButton()#menu-button Show Menu
+              .mdw-card__start
+                .mdw-card__thumbnail.material-icons(style="font-size:40px;transform:scaleX(-1)") vertical_split
+              h6.mdw-card__header(mdw-two-line) Menus
+              .mdw-card__subheader Supplementary content
+              .mdw-divider.mdw-theme(mdw-ink="divider")
+              .mdw-card__actions
+                +mdwButton()#menu-button Show Menu
           .mdw-grid__item(mdw-colspan="100%")
             p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu vulputate turpis. Aliquam aliquet sagittis erat, non facilisis dolor auctor quis. Fusce risus diam, tincidunt in semper at, facilisis ut sapien. Integer dui tellus, condimentum rhoncus metus et, porttitor convallis erat. Proin eget dolor purus. Phasellus lorem odio, facilisis et commodo ut, aliquet non ligula. Aliquam erat volutpat. Pellentesque sollicitudin convallis dolor, non euismod ipsum maximus sit amet. Nullam sodales at tellus in rhoncus. Aliquam vel tempus nisl. Curabitur lacinia blandit orci quis pulvinar. Aliquam dignissim ex a diam volutpat, vitae vehicula tortor blandit. Aliquam laoreet mauris quis purus tempor mollis.
             p Quisque finibus justo et urna rutrum mollis. Duis non blandit purus. Etiam nec ante et enim molestie interdum pharetra sed dui. Pellentesque turpis tortor, dictum at congue ut, pretium eu mauris. Sed tempor lorem ac quam elementum blandit id vitae neque. Curabitur accumsan dapibus diam. Ut egestas efficitur est. Morbi ultrices metus eget turpis porta pulvinar id et justo. Pellentesque ultrices aliquet ex, non commodo sapien feugiat eget. Donec sed tincidunt purus. Maecenas scelerisque risus fringilla, posuere erat vehicula, ornare risus. Pellentesque vitae fermentum purus, molestie sollicitudin nibh. Donec auctor, lacus sed imperdiet varius, eros nisl eleifend neque, tincidunt dictum nibh metus commodo elit. Nulla facilisi.
@@ -418,5 +321,5 @@ html.mdw-layout.mdw-theme(lang='en')
             p Nullam vitae luctus neque. Maecenas non ultricies ante. Nam ac dui cursus, interdum nulla ut, pharetra ante. Etiam eu ultrices libero. Fusce sed erat pellentesque, molestie odio eget, luctus elit. Vivamus ultricies tortor ut purus facilisis, sed porta mi aliquam. Integer posuere augue euismod nisl tempus, at efficitur lacus fringilla.
             p Sed blandit diam nec nibh faucibus, a ultricies risus posuere. Vestibulum facilisis ultrices sem, eget aliquam libero fermentum id. Fusce imperdiet metus auctor feugiat tincidunt. Praesent sem elit, ullamcorper id bibendum ut, ullamcorper at diam. Ut non nulla euismod lorem facilisis eleifend et at leo. Mauris eget scelerisque libero, at porta eros. Ut vitae eros eu dui venenatis lacinia. Nulla ultricies tortor et ullamcorper ultricies. Integer placerat libero at ex euismod, vel vestibulum lacus accumsan. Suspendisse maximus id sapien et accumsan. Suspendisse porta enim tellus.
 
-    script(src='default.common.min.js')
     script(src='pwa.min.js')
+    script(src='entire-framework.min.js')

package/docs/pwa/pwa.scss

@@ -0,0 +1,26 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'deeppurple',
+  $secondary: 'deeporange',
+  $warn: 'red',
+  $background: 'bluegray',
+  $foreground: (#006064, #E0F7FA),
+);
+
+@use "../../core/color";
+@use "../../core/overlay";
+@use "../../core/ripple";
+
+@use "../../components/appbar";
+@use "../../components/banner";
+@use "../../components/button";
+@use "../../components/card";
+@use "../../components/dialog";
+@use "../../components/divider";
+@use "../../components/fab";
+@use "../../components/grid";
+@use "../../components/layout";
+@use "../../components/list";
+@use "../../components/menu";
+@use "../../components/selection";
+@use "../../components/snackbar";
+@use "../../components/type";

package/docs/spec.scss

@@ -0,0 +1,26 @@
+@use "../core/color/_spec.scss" as color;
+@use "../core/overlay/_spec.scss" as overlay;
+@use "../core/ripple/_spec.scss" as ripple;
+@use "../components/appbar/_spec.scss" as appbar;
+@use "../components/banner/_spec.scss" as banner;
+@use "../components/bottomnav/_spec.scss" as bottomnav;
+@use "../components/button/_spec.scss" as button;
+@use "../components/card/_spec.scss" as card;
+@use "../components/chip/_spec.scss" as chip;
+@use "../components/datatable/_spec.scss" as datatable;
+@use "../components/dialog/_spec.scss" as dialog;
+@use "../components/divider/_spec.scss" as divider;
+@use "../components/elevation/_spec.scss" as elevation;
+@use "../components/fab/_spec.scss" as fab;
+@use "../components/grid/_spec.scss" as grid;
+@use "../components/layout/_spec.scss" as layout;
+@use "../components/list/_spec.scss" as list;
+@use "../components/menu/_spec.scss" as menu;
+@use "../components/progress/_spec.scss" as progress;
+@use "../components/selection/_spec.scss" as selection;
+@use "../components/slider/_spec.scss" as slider;
+@use "../components/snackbar/_spec.scss" as snackbar;
+@use "../components/tab/_spec.scss" as tab;
+@use "../components/textfield/_spec.scss" as textfield;
+@use "../components/tooltip/_spec.scss" as tooltip;
+@use "../components/type/_spec.scss" as type;

package/docs/themes/_component-themes.scss

@@ -0,0 +1,26 @@
+@use "../../core/color/_theme.scss" as color;
+@use "../../core/overlay/_theme.scss" as overlay;
+@use "../../core/ripple/_theme.scss" as ripple;
+@use "../../components/appbar/_theme.scss" as appbar;
+@use "../../components/banner/_theme.scss" as banner;
+@use "../../components/bottomnav/_theme.scss" as bottomnav;
+@use "../../components/button/_theme.scss" as button;
+@use "../../components/card/_theme.scss" as card;
+@use "../../components/chip/_theme.scss" as chip;
+@use "../../components/datatable/_theme.scss" as datatable;
+@use "../../components/dialog/_theme.scss" as dialog;
+@use "../../components/divider/_theme.scss" as divider;
+@use "../../components/elevation/_theme.scss" as elevation;
+@use "../../components/fab/_theme.scss" as fab;
+@use "../../components/grid/_theme.scss" as grid;
+@use "../../components/layout/_theme.scss" as layout;
+@use "../../components/list/_theme.scss" as list;
+@use "../../components/menu/_theme.scss" as menu;
+@use "../../components/progress/_theme.scss" as progress;
+@use "../../components/selection/_theme.scss" as selection;
+@use "../../components/slider/_theme.scss" as slider;
+@use "../../components/snackbar/_theme.scss" as snackbar;
+@use "../../components/tab/_theme.scss" as tab;
+@use "../../components/textfield/_theme.scss" as textfield;
+@use "../../components/tooltip/_theme.scss" as tooltip;
+@use "../../components/type/_theme.scss" as type;

package/docs/themes/theme-colored-fallbacks.scss

@@ -0,0 +1,17 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'deeppurple',
+  $secondary: 'deeporange',
+  $warn: 'red',
+  $background: 'bluegray',
+  $foreground: (#006064, #E0F7FA),
+  $inks: ('primary', 'secondary', 'warn', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $surfaces: ('primary', 'secondary', 'warn', 'background', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $cssvars: false,
+);
+
+@use "./_component-themes.scss";
+
+:root {
+  font-family: Merriweather, sans-serif;
+}
+

package/docs/themes/theme-colored.scss

@@ -0,0 +1,17 @@
+@use "../../core/theme/_config.scss" with (
+  $primary: 'deeppurple',
+  $secondary: 'deeporange',
+  $warn: 'red',
+  $background: 'bluegray',
+  $foreground: (#006064, #E0F7FA),
+  $inks: ('primary', 'secondary', 'warn', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $surfaces: ('primary', 'secondary', 'warn', 'background', 'amber', 'blue', 'cyan', 'red', 'green', 'deeppurple', 'purple', 'yellow', 'teal'),
+  $fallbacks: false,
+);
+
+@use "./_component-themes.scss";
+
+:root {
+  font-family: Merriweather, sans-serif;
+}
+