@shortfuse/materialdesignweb 0.5.0 → 0.7.1-0

package/README.md

@@ -1,86 +1,164 @@
 # materialdesignweb
 Material Design for Web
 
+# About
+
+A standards-focused, zero-dependency implemention of Material Design 3 (Material You).
+
+# Current status
+
+Working on:
+* Array rendering (sub templates)
+* * Nav Drawer list population
+* * Search results population
+* * Text Field Dropdown population
+* Cross-DOM-boundary custom colors
+
 # Demo
 
 https://clshortfuse.github.io/materialdesignweb/
 
 # Getting started
 
-npm: `npm install @shortfuse/materialdesignweb`
-
-# Core modules
-
-| Module | CSS-Only Support | Description | status
-| :-------- | :-: | :- | :- |
-| [aria](core/aria/) | :x: | Handles ARIA attributes, ARIA roles, tabindexes, and keyboard interaction | preRC
-| [document](core/document/) | :white_check_mark: | Applies color-scheme, standalone-window, and user agents detection | RC
-| [overlay](core/overlay/) | :white_check_mark: | Applies overlay states to components | RC
-| [ripple](core/ripple/) | :white_check_mark: | Applies press ripple on interactions | preRC
-| [theme](core/theme/) | :white_check_mark: | Applies ink and surface colors based on light/dark context | preRC
-| [transition](core/transition/) | :x: | Transitions shape and content between elements | preRC
-
-# Component Modules
-
-| Component | Integrations | CSS-Only Support | Keyboard Support | ARIA Role | ARIA Attributes | Status
-| :-------- | :----------: | :--------------: | :--------------: | :------:  | :-------------: | :-----
-| [appbar](components/appbar/) | button | :white_check_mark: | N/A | :x: | :x: | beta
-| backdrop | | | | | | *planned*
-| [banner](components/banner/) | button | :white_check_mark: | N/A | :x: | :x: | beta
-| [bottomnav](components/bottomnav/) | bottomnavitem† overlay | :x: | :white_check_mark: | tablist | aria-multiselectable aria-orientation | RC
-| [bottomnavitem](components/bottomnav/item.js) | overlay ripple | :x: | :white_check_mark: | [tab](utils/aria/tab.js) | aria-selected | RC
-| [button](components/button/) | overlay ripple | :white_check_mark: | :white_check_mark: | [button](utils/aria/button.js) | aria-disabled‡ aria-pressed‡ | stable
-| [card](components/card/) | button divider | :white_check_mark: | N/A | :x: | :x: | preRC
-| [chip](components/chip/) | chipitem | :white_check_mark: | :x: | :x: | :x: | alpha
-| [chipitem](components/chip/item.js) | :x: | :x: | :x: | :x: | :x: | alpha
-| [datatable](components/datatable/) | button | :white_check_mark: | :white_check_mark: | grid | aria-selected | preRC
-| [dialog](components/dialog/) | button | :white_check_mark: | :white_check_mark: | dialog | aria-modal | preRC
-| [divider](components/divider/) |  | :white_check_mark:| | separator‡ | | preRC
-| [elevation](components/elevation/) | | :white_check_mark: | | | | RC
-| [fab](components/fab/) | button†  | :white_check_mark:| :x: |:x: | :x: | beta
-| [grid](components/grid/) |  | :white_check_mark:| | :x: | :x: | preRC
-| imagelist | | | | | | *use grid*
-| [layout](components/layout/) | | :white_check_mark: | :x: |:x: | :x: | beta
-| [list](components/list/) | listitem† listexpander | :white_check_mark: | :white_check_mark: | group list listbox radiogroup tree | aria-orientation | preRC
-| [listcontent](components/list/content.js) | overlay ripple | :white_check_mark: | :white_check_mark: | listitem link option radio treeitem | aria-checked aria-selected | preRC
-| [listitem](components/list/item.js) | | :white_check_mark: | :white_check_mark: | treeitem none | aria-expanded aria-hidden | preRC
-| [listsecondary](components/list/secondary.js) |  | :white_check_mark: | :white_check_mark: | none‡ | | preRC
-| [menu](components/menu/) | divider menuitem† | :white_check_mark: | :white_check_mark: | menu | aria-hidden | preRC
-| [menuitem](components/menu/item.js) | overlay ripple | :white_check_mark: | :white_check_mark:| menuitem menuitemradio menuitemcheckbox | aria-disabled aria-checked | stable
-| navdrawer | | | | | | *use layout*
-| [progress](components/progress/) |  | :white_check_mark:| | :x: | :x: | beta
-| [selection](components/selection/) | | :white_check_mark: | :white_check_mark: | checkbox‡ radio‡ | aria-checked aria-disabled | preRC
-| sidesheet | | | | | | *use layout*
-| [slider](components/slider/) | | :white_check_mark: | :x: | :x: | :x: | alpha
-| [snackbar](components/snackbar/) | button | :white_check_mark: | :white_check_mark: | alert | aria-hidden | RC
-| [tab](components/tab/) | tablist tabcontent | :x: |  |  | | RC
-| [tabcontent](components/tab/content.js) | tabpanel† | :x: | :white_check_mark: | | | RC
-| [tabitem](components/tab/item.js) | overlay ripple | :x: | :white_check_mark: | [tab](utils/aria/tab.js) | aria-selected | RC
-| [tablist](components/tab/list.js) | tabitem† overlay | :x: | :white_check_mark: | tablist | aria-multiselectable aria-orientation | RC
-| [tabpanel](components/tab/panel.js) | | :x: | :white_check_mark: | tabpanel | aria-expanded aria-hidden | RC
-| [textfield](components/textfield/) | list | :white_check_mark: | :white_check_mark: | :x: | :x: | preRC
-| [tooltip](components/tooltip/) | | :white_check_mark: | | :x: | :x: | beta
-| [type](components/type/) | | :white_check_mark: | | | | RC
-
-# Adapter classes
-| Adapter | Components | Status
-| :-------- | :-- | :-
-| [datatable](adapters/datatable/) | button datatable† | preRC
-| [dom](adapters/dom/) | | preRC
-| [list](adapters/list/) | domadapter† listitem† | preRC
-| [search](adapters/search/) | list† textfield† | preRC
-
-## Legend
-
-* planned - Planned for later
-* draft - Not yet functional
-* alpha - Partially working
-* beta - Working but incomplete
-* preRC - Needs minor changes
-* RC - Needs testing as-is
-* stable - Production-ready
-
-
-* † - Required
-
-* ‡ - Apply manually
+````html
+<script type="module" src="https://unpkg.com/@shortfuse/materialdesignweb@0.7.0/theming/loader.js?color=6750A4&custom=yellow,orange:orange,green:0f0,alias:aqua&lightness=auto"></script>
+<script type="module" src="https://unpkg.com/@shortfuse/materialdesignweb@0.7.0/components/Button.js"></script>
+
+<mdw-button>Hello World!</mdw-button>
+````
+
+# Support
+
+* Unbundled: Chrome >=94
+* Bundled: >1% browsers *(polyfills not included)*
+
+# Legend
+
+* [:paintbrush:](# "Background") - Background Theming
+* [:crayon:](# "Ink") - Ink (Foreground) Theming	
+* [:o:](# "Outline") - Outline
+* [:a:](# "Font") - Font Theming	
+* [:large_blue_diamond:](# "Shape") - Shape Size Theming
+* [:signal_strength:](# "Density") - Density
+* [:arrow_up_down:](# "Flexable") - Flexable layout
+* [:wheelchair:](# "ARIA") - ARIA Role
+  
+* [:heavy_check_mark:](# "Ready") - Ready
+* [:warning:](# "Issues") - Issues
+* [:construction:](# "Under Construction") - Under Construction
+* [:memo:](# "Planned") - Planned
+* [:grey_question:](# "Unknown") - Unknown
+* [:skull:](# "Not planned") - Not planned
+
+# Components
+
+| Component                                                    | Features                                                                                                                                                                                                          |                  Status                  |
+| :----------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------: |
+| [Badge](components/Badge.js)                                 | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density")                                                          |     [:heavy_check_mark:](# "Ready")      |
+| [Bottom App Bar](components/BottomAppBar.js)                 | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape")  [:wheelchair:](# "ARIA Toolbar")                                                         |     [:heavy_check_mark:](# "Ready")      |
+| Bottom Sheet                                                 |                                                                                                                                                                                                                   |          [:memo:](# "Planned")           |
+| [Button](components/Button.md)                               | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button")                          |     [:heavy_check_mark:](# "Ready")      |
+| [Card](components/Card.js)                                   | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA Figure")                           |     [:heavy_check_mark:](# "Ready")      |
+| [Fab](components/Fab.js)                                     | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button")                          |     [:heavy_check_mark:](# "Ready")      |
+| [Fab - Extended](components/ExtendedFab.js)                  | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density")  [:wheelchair:](# "ARIA Button")                         |     [:heavy_check_mark:](# "Ready")      |
+| [Icon Button](components/IconButton.js)                      | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button \| Checkbox")              |     [:heavy_check_mark:](# "Ready")      |
+| [Segmented Button](components/SegmentedButton.js)            | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density")  [:wheelchair:](# "ARIA Option")                         |     [:heavy_check_mark:](# "Ready")      |
+| [Segmented Button Group](components/SegmentedButtonGroup.js) | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Listbox")                                                                                                                                                              |     [:heavy_check_mark:](# "Ready")      |
+| [Checkbox](components/Checkbox.js)                           | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Checkbox")                                                                            |     [:heavy_check_mark:](# "Ready")      |
+| [Chip](components/Chip.js)                                   | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Button")                          |     [:heavy_check_mark:](# "Ready")      |
+| [Chip - Filter](components/FilterChip.js)                    | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Checkbox \| Radio")               |     [:heavy_check_mark:](# "Ready")      |
+| Chip: Filter Dropdown                                        |                                                                                                                                                                                                                   | [:construction:](# "Under Construction") |
+| Chip: Input                                                  |                                                                                                                                                                                                                   | [:construction:](# "Under Construction") |
+| Date Picker                                                  |                                                                                                                                                                                                                   |      [:grey_question:](# "Unknown")      |
+| [Dialog](components/Dialog.js)                               | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Dialog")                                                           |     [:heavy_check_mark:](# "Ready")      |
+| Dialog: Full-screen                                          |                                                                                                                                                                                                                   |      [:grey_question:](# "Unknown")      |
+| [Divider](components/Divider.js)                             | [:crayon:](# "Ink")                                                                                                                                                                                               |     [:heavy_check_mark:](# "Ready")      |
+| [Icon](components/Icon.js)                                   | [:crayon:](# "Ink")                                                                                                                                                                                               |     [:heavy_check_mark:](# "Ready")      |
+| [List](components/List.js)                                   | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA List")                                                                                                 |     [:heavy_check_mark:](# "Ready")      |
+| [List Select](components/ListSelect.js)                      | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Option")                                                                                               |     [:heavy_check_mark:](# "Ready")      |
+| [Menu](components/Menu.js)                                   | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Menu")                                                                              |     [:heavy_check_mark:](# "Ready")      |
+| [Navigation Bar](components/NavBar.js)                       | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav")                                                                              |     [:heavy_check_mark:](# "Ready")      |
+| [Navigation Drawer](components/NavDrawer.js)                 | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav")                                                                              | [:construction:](# "Under Construction") |
+| [Navigation Rail](components/NavDrawer.js)                   | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Nav")                                                                              |     [:heavy_check_mark:](# "Ready")      |
+| [Progress Indicators](components/Progress.js)                | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress")                                                                                                                                                             |     [:heavy_check_mark:](# "Ready")      |
+| Search                                                       |                                                                                                                                                                                                                   |          [:memo:](# "Planned")           |
+| [Radio](components/Radio.js)                                 | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio")                                                                                                              |     [:heavy_check_mark:](# "Ready")      |
+| [Slider](components/Slider.js)                               | [:crayon:](# "Ink")  [:wheelchair:](# "ARIA Slider")                                                                                                                                                              |         [:warning:](# "Issues")          |
+| [Snackbar](components/Snackbar.js)                           | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status")                                          |     [:heavy_check_mark:](# "Ready")      |
+| [Switch](components/Switch.js)                               | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch")                                                                                                                |     [:heavy_check_mark:](# "Ready")      |
+| [Surface](components/Surface.js)                             | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:arrow_up_down:](# "Flexable")                                                           |     [:heavy_check_mark:](# "Ready")      |
+| [Tab](components/Tab.js)                                     | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tab List \| Tab \| Tab Panel")                                                     |     [:heavy_check_mark:](# "Ready")      |
+| [Text Input](components/Input.js)                            | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textbox")                         |     [:heavy_check_mark:](# "Ready")      |
+| [Text Area](components/TextArea.js)                          | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Textarea")                        |     [:heavy_check_mark:](# "Ready")      |
+| [Text Select](components/Select.js)                          | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Combobox")                        |     [:heavy_check_mark:](# "Ready")      |
+| Time Picker                                                  |                                                                                                                                                                                                                   |      [:grey_question:](# "Unknown")      |
+| [Tooltip](components/Tooltip.js)                             | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Tooltip")                                                                          |     [:heavy_check_mark:](# "Ready")      |
+| [Top App Bar](components/TopAppBar.js)                       | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:arrow_up_down:](# "Flexable") [:wheelchair:](# "ARIA") |     [:heavy_check_mark:](# "Ready")      |
+
+# Additional
+
+| Component                          | Description                                         |                  Status                  |
+| :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: |
+| [Box](components/Box.js)           | Simple themeable component with Flexbox options     |     [:heavy_check_mark:](# "Ready")      |
+| [Layout](components/Layout.js)     | Manages page nav, and pane layouts                  | [:construction:](# "Under Construction") |
+| [Pane](components/Pane.js)         | 12-column pane layout                               | [:construction:](# "Under Construction") |
+| [Icon](components/Icon.js)         | Font-icon, SVG, and IMG support                     | [:construction:](# "Under Construction") |
+| [Body](components/Body.js)         | Box with Body typography                            |     [:heavy_check_mark:](# "Ready")      |
+| [Label](components/Label.js)       | Box with Label typography                           |     [:heavy_check_mark:](# "Ready")      |
+| [Headline](components/Headline.js) | Box with Headline typography                        |     [:heavy_check_mark:](# "Ready")      |
+| [Title](components/Title.js)       | Box with Title typography                           |     [:heavy_check_mark:](# "Ready")      |
+| [Ripple](components/Ripple.js)     | Ripple effect                                       |     [:heavy_check_mark:](# "Ready")      |
+| [Surface](components/Surface.js)   | Themeable, flexable, shapeable, elevateable element |     [:heavy_check_mark:](# "Ready")      |
+
+
+# Mixins
+
+| Component                                        | Description                                      |                  Status                  |
+| :----------------------------------------------- | :----------------------------------------------- | :--------------------------------------: |
+| [ARIA Reflector](mixins/AriaReflectorMixin.js)   | Reflects ARIA Properties                         |     [:heavy_check_mark:](# "Ready")      |
+| [ARIA Toolbar](mixins/AriaToolbarMixin.js)       | Shared ARIA Toolbar functionality                |     [:heavy_check_mark:](# "Ready")      |
+| [Control](mixins/ControlMixin.js)                | HTML Control wrapper                             |     [:heavy_check_mark:](# "Ready")      |
+| [Density](mixins/DensityMixin.js)                | Component density options                        |     [:heavy_check_mark:](# "Ready")      |
+| [Flexable](mixins/FlexableMixin.js)              | Add flexbox options as attributes                |     [:heavy_check_mark:](# "Ready")      |
+| [Form Associated](mixins/FormAssociatedMixin.js) | Form-associated custom element support           |     [:heavy_check_mark:](# "Ready")      |
+| [Input](mixins/InputMixin.js)                    | HTMLInputElement wrapper                         |     [:heavy_check_mark:](# "Ready")      |
+| [Keyboard Nav](mixins/KeyboardNavMixin.js)       | Adds arrow key navigation and roving tab index   |         [:warning:](# "Issues")          |
+| [Resize Observer](mixins/ResizeObserverMixin.js) | Shared Eelement resize observer                  |     [:heavy_check_mark:](# "Ready")      |
+| [Ripple](mixins/RippleMixin.js)                  | Replaces pressed state with ripple effect        |     [:heavy_check_mark:](# "Ready")      |
+| [RTL Observer](mixins/RTLObserverMixin.js)       | Shared RTL paoge observer                        |     [:heavy_check_mark:](# "Ready")      |
+| [Scroll Listener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events |     [:heavy_check_mark:](# "Ready")      |
+| [Shape](mixins/ShapeMixin.js)                    | Adds shape and outline layer to elements         |         [:warning:](# "Issues")          |
+| [Surface](mixins/ShapeMixin.js)                  | Adds elevation tint and shadows to elements      |         [:warning:](# "Issues")          |
+| [Text Field](mixins/TextFieldMixin.js)           | Shared text field functionality                  |     [:heavy_check_mark:](# "Ready")      |
+| [Tooltip Trigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events                | [:construction:](# "Under Construction") |
+| [Touch Target](mixins/TouchTargetMixin.js)       | Adds extended touch target to controls           | [:construction:](# "Under Construction") |
+
+# Core
+
+| File                                   | Description                                                                |                  Status                  |
+| :------------------------------------- | :------------------------------------------------------------------------- | :--------------------------------------: |
+| [Composition](core/Composition.js)     | Composes templates based on styles, fragments, and watches. Renders data   | [:construction:](# "Under Construction") |
+| [CustomElement](core/CustomElement.js) | Handles ShadowDOM, ElementInternals, Property attributes, and compositions | [:construction:](# "Under Construction") |
+| [css](core/css.js)                     | CSS, CSSStyleSheet, HTMLStyleElement functions                             |     [:heavy_check_mark:](# "Ready")      |
+| [customTypes](core/customTypes.js)     | Non-primitive observable types                                             | [:construction:](# "Under Construction") |
+| [dom](core/dom.js)                     | DOM functions                                                              |         [:warning:](# "Issues")          |
+| [identify](core/identify.js)           | Node identification functions                                              | [:construction:](# "Under Construction") |
+| [observe](core/observe.js)             | Observable pattern for primitives and objects                              | [:construction:](# "Under Construction") |
+| [template](core/template.js)           | Template literals for CSS (CSSStyleSheet) and HTML (DocumentFragment)      |     [:heavy_check_mark:](# "Ready")      |
+
+
+# Other Components
+
+These components do not have official M3 guidelines
+
+| Component    |                  Status                  |
+| :----------- | :--------------------------------------: |
+| ~~Backdrop~~ |        [:skull:](# "Not planned")        |
+| Banner       | [:construction:](# "Under Construction") |
+| Data Table   |          [:memo:](# "Planned")           |
+| Image List   |      [:grey_question:](# "Unknown")      |
+| Side Sheet   |      [:grey_question:](# "Unknown")      |
+
+# Archive
+
+The Material Design 1/2 version has been archived in the [`archive-md2`](https://github.com/clshortfuse/materialdesignweb/tree/archive-md2) branch.

package/bin/generate-css.js

@@ -0,0 +1,12 @@
+import { generateLayoutGlobalCSS, generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../theming/index.js';
+import { getSearchParams } from '../utils/cli.js';
+
+process.stdout.write(
+  generateThemeCSS(
+    themeOptionsFromSearchParams(
+      getSearchParams(),
+    ),
+  ),
+);
+process.stdout.write(generateTypographyGlobalCSS());
+process.stdout.write(generateLayoutGlobalCSS());

package/components/Badge.css

@@ -0,0 +1,38 @@
+:host {
+  --mdw-shape__size: 8px;
+  --mdw-ink: var(--mdw-color__on-error);
+  --mdw-shape__bg: rgb(var(--mdw-color__error));
+  --mdw-type__font: var(--mdw-typescale__label-small__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
+  position: relative;
+
+  display: inline-block;
+  vertical-align: middle;
+
+  box-sizing: border-box;
+  min-block-size: var(--mdw-typescale__label-small__line-height);
+  min-inline-size: var(--mdw-typescale__label-small__line-height);
+  padding-inline: max(4px, calc(4px + (var(--mdw-density) * 2px)));
+
+  color: rgb(var(--mdw-ink));
+
+  font: var(--mdw-type__font);
+  letter-spacing: var(--mdw-type__letter-spacing);
+  text-align: center;
+}
+
+@supports (width: 1lh) {
+  :host {
+    min-block-size: 1lh; /* Clamps to 1:1 */
+    min-inline-size: 1lh; /* Clamps to 1:1 */
+    padding-inline: max(0.25lh, calc(0.25lh + (var(--mdw-density) * 2px)));
+  }
+}
+
+:host(:empty) {
+  vertical-align: middle;
+}
+
+:host(:empty) #shape {
+  inset: 5px;
+}

package/components/Badge.js

@@ -0,0 +1,15 @@
+import CustomElement from '../core/CustomElement.js';
+import DensityMixin from '../mixins/DensityMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Badge.css' assert { type: 'css'};
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(DensityMixin)
+  .mixin(ShapeMixin)
+  .extend()
+  .css(styles)
+  .html/* html */`<slot id=slot></slot>`
+  .autoRegister('mdw-badge');

package/components/Body.css

@@ -0,0 +1,14 @@
+:host {
+  font: var(--mdw-typescale__body-large__font);
+  letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+}
+
+:host([size="medium"]) {
+  font: var(--mdw-typescale__body-medium__font);
+  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+}
+
+:host([size="small"]) {
+  font: var(--mdw-typescale__body-small__font);
+  letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+}

package/components/Body.js

@@ -0,0 +1,7 @@
+import styles from './Body.css' assert { type: 'css' };
+import Box from './Box.js';
+
+export default Box
+  .extend()
+  .css(styles)
+  .autoRegister('mdw-body');

package/components/BottomAppBar.css

@@ -0,0 +1,23 @@
+/* https://m3.material.io/components/bottom-app-bar/specs */
+
+:host {
+  --mdw-surface__tint: var(--mdw-surface__tint__2);
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__on-surface);
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  justify-content: flex-start;
+
+  box-sizing: content-box;
+  /* Don't apply density */
+  block-size: 56px;
+  padding-block: 12px;
+  padding-inline: 8px 16px;
+
+  box-shadow: none;
+
+  direction: ltr;
+}

package/components/BottomAppBar.js

@@ -0,0 +1,25 @@
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import AriaToolbarMixin from '../mixins/AriaToolbarMixin.js';
+
+import styles from './BottomAppBar.css' assert { type: 'css' };
+import Surface from './Surface.js';
+
+/**
+ * Note: FAB does not exist inside because FABs can appear outside.
+ * Space will be maintained for the FAB to slide into position. FAB should be
+ * next on the DOM, so users can logically tab to it.
+ */
+
+export default Surface
+  .mixin(AriaToolbarMixin)
+  .mixin(AriaReflectorMixin)
+  .extend()
+  .set({
+    elevated: true,
+    _ariaRole: 'toolbar',
+  })
+  .observe({
+    color: { empty: 'surface' },
+  })
+  .css(styles)
+  .autoRegister('mdw-bottom-app-bar');

package/components/Box.css

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+}
+
+:host([inline]) {
+  display: inline-block;
+}
+
+:host([flex]:where([inline])) {
+  display: inline-flex;
+}
+
+:host([color]) {
+  background-color: rgb(var(--mdw-bg));
+  color: rgb(var(--mdw-ink));
+}
+
+:host([ink]) {
+  color: rgb(var(--mdw-ink));
+}
+
+:host([type-style]) {
+  font: var(--mdw-type__font);
+  letter-spacing: var(--mdw-type__letter-spacing);
+}
+
+#slot {
+  /* Passthrough from parent */
+  block-size: inherit;
+  inline-size: inherit;
+}

package/components/Box.js

@@ -0,0 +1,24 @@
+import CustomElement from '../core/CustomElement.js';
+import FlexableMixin from '../mixins/FlexableMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Box.css' assert { type: 'css' };
+
+/**
+ * Containers are stateless elements that may have a color and ink.
+ * They should have simple geometry for rendering and layout.
+ */
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(FlexableMixin)
+  .extend()
+  .observe({
+    inline: 'boolean',
+    block: {
+      type: 'boolean',
+      empty: true,
+    },
+  })
+  .css(styles)
+  .html/* html */`<slot id=slot type-style={typeStyle}></slot>`
+  .autoRegister('mdw-box');

package/components/Button.css

@@ -0,0 +1,147 @@
+/* https://m3.material.io/components/buttons/specs */
+
+:host {
+  --mdw-shape__size: var(--mdw-shape__full);
+  --mdw-ink: var(--mdw-color__primary);
+
+  --mdw-type__font: var(--mdw-typescale__label-large__font);
+  --mdw-type__letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+
+  display: inline-flex;
+
+  align-items: center;
+  gap: 0;
+  justify-content: center;
+  vertical-align: middle;
+
+  /* box-sizing: border-box; */
+  min-block-size: 24px;
+  min-inline-size: 24px;
+
+  padding-block: calc(8px + (var(--mdw-density) * 2px));
+  padding-inline: calc(12px + (var(--mdw-density) * 2px));
+
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+
+  color: rgb(var(--mdw-ink));
+
+  font: var(--mdw-type__font);
+  letter-spacing: var(--mdw-type__letter-spacing);
+}
+
+:host(:where([elevated],[filled])) {
+  will-change: filter;
+}
+
+/** Elevated Color Defaults */
+:host(:where([elevated])) {
+  --mdw-bg: var(--mdw-color__surface);
+  --mdw-ink: var(--mdw-color__primary);
+  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
+  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
+  --mdw-surface__tint: var(--mdw-surface__tint__1);
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+}
+/** Filled Color Defaults */
+:host(:where([filled])) {
+  --mdw-bg: var(--mdw-color__primary);
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
+  --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
+  --mdw-surface__tint: 0;
+  --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
+}
+/** Filled Tonal Color Defaults */
+:host(:where([filled="tonal"])) {
+  --mdw-bg: var(--mdw-color__secondary-container);
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+}
+/** Outlined Color Defaults */
+:host(:where([outlined])) {
+  --mdw-ink: var(--mdw-color__primary);
+}
+
+:host(:where([icon])) {
+  gap: 8px;
+
+  padding-inline: calc(12px + (var(--mdw-density) * 2px)) calc(16px + (var(--mdw-density) * 2px));
+}
+
+:host(:where([outlined], [elevated], [filled])) {
+  padding-inline: calc(24px + (var(--mdw-density) * 2px));
+}
+
+:host(:where([icon]):where([outlined], [elevated], [filled])) {
+  gap: 8px;
+
+  padding-inline: calc(16px + (var(--mdw-density) * 2px)) calc(24px + (var(--mdw-density) * 2px));
+}
+
+#shape:where([elevated],[filled],[color]) {
+  background-color: rgb(var(--mdw-bg));
+}
+
+#slot {
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+#control {
+  cursor: inherit;
+}
+
+:host([disabled]) {
+  /* cursor: not-allowed; */
+
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#shape[disabled]:is([elevated], [filled]) {
+  background-color: rgba(var(--mdw-color__on-surface), 0.12);
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#slot[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#icon {
+  font-size: calc(18/14 * 1em);
+  font-variation-settings: 'FILL' 1;
+}
+
+#icon[outlined] {
+  font-variation-settings: 'FILL' 0;
+}
+
+#icon[disabled] {
+  opacity: 0.38;
+
+  color: rgba(var(--mdw-color__on-surface));
+}
+
+#label {
+  cursor: pointer;
+}
+
+#label[disabled] {
+  cursor: not-allowed;
+}
+
+/*
+@media screen and (max-resolution: 0.75dppx) { #touch-target { --mdw-device-pixel-ratio: 0.75; } }
+@media screen and (max-resolution: 0.85dppx) { #touch-target { --mdw-device-pixel-ratio: 0.90; } }
+@media screen and (max-resolution: 0.90dppx) { #touch-target { --mdw-device-pixel-ratio: 0.90; } }
+@media screen and (min-resolution: 1.5dppx) { #touch-target { --mdw-device-pixel-ratio: 1.5; } }
+@media screen and (min-resolution: 1.75dppx) { #touch-target { --mdw-device-pixel-ratio: 1.75; } }
+@media screen and (min-resolution: 2dppx) { #touch-target { --mdw-device-pixel-ratio: 2; } }
+*/
+
+@media (any-pointer: coarse) {
+  #touch-target {
+    visibility: visible;
+  }
+}