@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/README.md

@@ -51,16 +51,24 @@ document.body.append(button);
 
 # Support
 
-
-| Feature                                                                                               | Chrome | Edge | Firefox | Safari |
-| ----------------------------------------------------------------------------------------------------- | -----: | ---: | ------: | -----: |
-| [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)                             |     53 |   79 |      63 |     10 |
-| [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)   |     84 |   84 |      79 |   14.1 |
-| [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)†                |     77 |   79 |      93 |   16.4 |
-| [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)†         |     53 |   79 |      94 |     15 |
-| [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)* |     73 |   79 |     101 |   16.4 |
-|                                                                                                       |        |      |         |        |
-| Supported                                                                                             |     84 |   84 |      93 |   16.4 |
+Compatibility is kept for as long possible by including browser-version-based patches. Ultimately, compatiblity may be dropped as new features get added. Bugs present in supported browsers should always be fixed.
+
+| Feature                                                                                                |                                                                                                                                                                                            Chrome |                                                                                                                                                                                            Edge |                                                                                                                                                                                          Firefox |                                                                                                                                                                                        Safari |
+| ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| [ShadowRoot](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot)                              |                                                                                                                                                                                                53 |                                                                                                                                                                                              79 |                                                                                                                                                                                               63 |                                                                                                                                                                                            10 |
+| [WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)    |                                                                                                                                                                                                84 |                                                                                                                                                                                              84 |                                                                                                                                                                                               79 |                                                                                                                                                                                          14.1 |
+| [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where)                                    |                                                                                                                                                                                                88 |                                                                                                                                                                                              88 |                                                                                                                                                                                               78 |                                                                                                                                                                                            14 |
+|                                                                                                        |                                                                                                                                                                                                   |                                                                                                                                                                                                 |                                                                                                                                                                                                  |                                                                                                                                                                                               |
+| [Array.at](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)† |                                                                                                                                                                                                92 |                                                                                                                                                                                              92 |                                                                                                                                                                                               90 |                                                                                                                                                                                          15.4 |
+| [replaceChildren](https://developer.mozilla.org/en-US/docs/Web/API/Element/replaceChildren)†           |                                                                                                                                                                                                84 |                                                                                                                                                                                              86 |                                                                                                                                                                                               79 |                                                                                                                                                                                          14.1 |
+| [ElementInternals](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)†                 |                                                                                                                                                                                                77 |                                                                                                                                                                                              79 |                                                                                                                                                                                               93 |                                                                                                                                                                                          16.4 |
+| [delegatesFocus](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)†          |                                                                                                                                                                                                53 |                                                                                                                                                                                              79 |                                                                                                                                                                                               94 |                                                                                                                                                                                            15 |
+| [AdoptedStyleSheets](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/adoptedStyleSheets)*  |                                                                                                                                                                                                73 |                                                                                                                                                                                              79 |                                                                                                                                                                                              101 |                                                                                                                                                                                          16.4 |
+| [CSS container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_container_queries)*       |                                                                                                                                                                                               106 |                                                                                                                                                                                             106 |                                                                                                                                                                                              110 |                                                                                                                                                                                          16.0 |
+|                                                                                                        |
+| Compatibility                                                                                          |                                                                                                                                                                                                88 |                                                                                                                                                                                              88 |                                                                                                                                                                                               78 |                                                                                                                                                                                          16.4 |
+| Support                                                                                                |                                                                                                                     [Latest ChromeOS LTS Release](https://chromeos.dev/en/education/chromeos-lts) |                                                          [Microsoft Edge Extended Stable Channel](https://learn.microsoft.com/en-us/DeployEdge/microsoft-edge-channels#extended-stable-channel) |                                                                                                                                                                                          ESR 115 |                                                                                                                                                                               Last 2 Versions |
+| Status                                                                                                 | [![Chrome](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [![Edge](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-chromium.yml) | [![Firefox](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-firefox.yml) | [![Safari](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml/badge.svg)](https://github.com/clshortfuse/materialdesignweb/actions/workflows/test-webkit.yml) |
 
 *Optional
 
@@ -103,6 +111,7 @@ Notes:
 | [Progress Indicators](components/Progress.js)                | [:crayon:](# "Ink") [:wheelchair:](# "ARIA Progress")                                                                                                                                                |     [:heavy_check_mark:](# "Ready")      |                                                                                                                                                                                                                                                                                                                                                                                                                                               ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Progress.js?compression=gzip&softmax=2048&max=4096&label=Progress) |
 | [Search](components/Search.js)                               | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Toolbar")                                             | [:construction:](# "Under Construction") |                                                                                                                                                                                                                                                                                                                                                                                                                                                   ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Search.js?compression=gzip&softmax=2048&max=4096&label=Search) |
 | [Radio](components/Radio.js)                                 | [:crayon:](# "Ink") [:a:](# "Font") [:large_blue_diamond:](# "Shape") [:wheelchair:](# "ARIA Radio")                                                                                                 |     [:heavy_check_mark:](# "Ready")      |                                                                                                                                                                                                                                                                                                 ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Radio.js?compression=gzip&softmax=2048&max=4096&label=Radio) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/RadioIcon.js?compression=gzip&softmax=2048&max=4096&label=RadioIcon) |
+| [Side Sheet](components/SideSheet.js)                        |                                                                                                                                                                                                      | [:construction:](# "Under Construction") |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | [Slider](components/Slider.js)                               | [:crayon:](# "Ink")  [:wheelchair:](# "ARIA Slider")                                                                                                                                                 |         [:warning:](# "Issues")          |                                                                                                                                                                                                                                                                                                                                                                                                                                                   ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Slider.js?compression=gzip&softmax=2048&max=4096&label=Slider) |
 | [Snackbar](components/Snackbar.js)                           | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:o:](# "Outline") [:large_blue_diamond:](# "Shape") [:signal_strength:](# "Density") [:wheelchair:](# "ARIA Status")                             |     [:heavy_check_mark:](# "Ready")      |                                                                                                                                                                                                                                                                                                                                                                                                                                               ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Snackbar.js?compression=gzip&softmax=2048&max=4096&label=Snackbar) |
 | [Switch](components/Switch.js)                               | [:paintbrush:](# "Background") [:crayon:](# "Ink") [:a:](# "Font") [:wheelchair:](# "ARIA Switch")                                                                                                   |     [:heavy_check_mark:](# "Ready")      |                                                                                                                                                                                                                                                                                             ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Switch.js?compression=gzip&softmax=2048&max=4096&label=Switch) ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/SwitchIcon.js?compression=gzip&softmax=2048&max=4096&label=SwitchIcon) |
@@ -116,18 +125,18 @@ Notes:
 
 # Additional
 
-| Component                          | Description                                         |                  Status                  |                                                                                                                                              Size |
-| :--------------------------------- | :-------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
-| [Box](components/Box.js)           | Simple themeable component with Flex and Grid options     |     [:heavy_check_mark:](# "Ready")      |           ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Box.js?compression=gzip&softmax=2048&max=4096&label=Box) |
-| [Layout](components/Layout.js)     | Manages page nav, and pane layouts                  | [:construction:](# "Under Construction") |        ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Layout.js?compression=gzip&softmax=2048&max=4096&label=Box) |
-| [Icon](components/Icon.js)         | Font-icon, SVG, and IMG support                     | [:construction:](# "Under Construction") |         ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip&softmax=2048&max=4096&label=Icon) |
-| [Body](components/Body.js)         | Box with Body typography                            |     [:heavy_check_mark:](# "Ready")      |         ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Body.js?compression=gzip&softmax=2048&max=4096&label=Body) |
-| [Label](components/Label.js)       | Box with Label typography                           |     [:heavy_check_mark:](# "Ready")      |       ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Label.js?compression=gzip&softmax=2048&max=4096&label=Label) |
-| [Headline](components/Headline.js) | Box with Headline typography                        |     [:heavy_check_mark:](# "Ready")      | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Headline.js?compression=gzip&softmax=2048&max=4096&label=Headline) |
-| [Title](components/Title.js)       | Box with Title typography                           |     [:heavy_check_mark:](# "Ready")      |       ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Title.js?compression=gzip&softmax=2048&max=4096&label=Title) |
-| [Ripple](components/Ripple.js)     | Ripple effect                                       |     [:heavy_check_mark:](# "Ready")      |     ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Ripple.js?compression=gzip&softmax=2048&max=4096&label=Ripple) |
-| [Shape](components/Shape.js)       | Themeable, flexable, shapeable element              |     [:heavy_check_mark:](# "Ready")      |     ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
-| [Surface](components/Surface.js)   | Themeable, flexable, shapeable, elevateable element |     [:heavy_check_mark:](# "Ready")      |   ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
+| Component                          | Description                                           |                  Status                  |                                                                                                                                              Size |
+| :--------------------------------- | :---------------------------------------------------- | :--------------------------------------: | ------------------------------------------------------------------------------------------------------------------------------------------------: |
+| [Box](components/Box.js)           | Simple themeable component with Flex and Grid options |     [:heavy_check_mark:](# "Ready")      |           ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Box.js?compression=gzip&softmax=2048&max=4096&label=Box) |
+| [Layout](components/Layout.js)     | Manages page nav, and pane layouts                    | [:construction:](# "Under Construction") |        ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Layout.js?compression=gzip&softmax=2048&max=4096&label=Box) |
+| [Icon](components/Icon.js)         | Font-icon, SVG, and IMG support                       | [:construction:](# "Under Construction") |         ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Icon.js?compression=gzip&softmax=2048&max=4096&label=Icon) |
+| [Body](components/Body.js)         | Box with Body typography                              |     [:heavy_check_mark:](# "Ready")      |         ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Body.js?compression=gzip&softmax=2048&max=4096&label=Body) |
+| [Label](components/Label.js)       | Box with Label typography                             |     [:heavy_check_mark:](# "Ready")      |       ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Label.js?compression=gzip&softmax=2048&max=4096&label=Label) |
+| [Headline](components/Headline.js) | Box with Headline typography                          |     [:heavy_check_mark:](# "Ready")      | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Headline.js?compression=gzip&softmax=2048&max=4096&label=Headline) |
+| [Title](components/Title.js)       | Box with Title typography                             |     [:heavy_check_mark:](# "Ready")      |       ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Title.js?compression=gzip&softmax=2048&max=4096&label=Title) |
+| [Ripple](components/Ripple.js)     | Ripple effect                                         |     [:heavy_check_mark:](# "Ready")      |     ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Ripple.js?compression=gzip&softmax=2048&max=4096&label=Ripple) |
+| [Shape](components/Shape.js)       | Themeable, flexable, shapeable element                |     [:heavy_check_mark:](# "Ready")      |     ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
+| [Surface](components/Surface.js)   | Themeable, flexable, shapeable, elevateable element   |     [:heavy_check_mark:](# "Ready")      |   ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/components/Surface.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
 
 
 # Mixins
@@ -147,7 +156,7 @@ Notes:
 | [RTLObserver](mixins/RTLObserverMixin.js)       | Shared RTL paoge observer                        |     [:heavy_check_mark:](# "Ready")      |       ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/RTLObserverMixin.js?compression=gzip&softmax=2048&max=4096&label=RTLObserver) |
 | [ScrollListener](mixins/ScrollListenerMixin.js) | Listen for horizontal and vertical scroll events |     [:heavy_check_mark:](# "Ready")      | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ScrollListenerMixin.js?compression=gzip&softmax=2048&max=4096&label=ScrollListener) |
 | [Shape](mixins/ShapeMixin.js)                   | Adds shape and outline layer to elements         |         [:warning:](# "Issues")          |                   ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/ShapeMixin.js?compression=gzip&softmax=2048&max=4096&label=Shape) |
-| [Surface](mixins/SurfaceMixin.js)               | Adds shadows to elements                        |         [:warning:](# "Issues")          |               ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/SurfaceMixin.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
+| [Surface](mixins/SurfaceMixin.js)               | Adds shadows to elements                         |         [:warning:](# "Issues")          |               ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/SurfaceMixin.js?compression=gzip&softmax=2048&max=4096&label=Surface) |
 | [TextField](mixins/TextFieldMixin.js)           | Shared text field functionality                  |     [:heavy_check_mark:](# "Ready")      |           ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TextFieldMixin.js?compression=gzip&softmax=2048&max=4096&label=TextField) |
 | [TooltipTrigger](mixins/TooltipTriggerMixin.js) | Triggers tooltips based on events                | [:construction:](# "Under Construction") | ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TooltipTriggerMixin.js?compression=gzip&softmax=2048&max=4096&label=TooltipTrigger) |
 | [TouchTarget](mixins/TouchTargetMixin.js)       | Adds extended touch target to controls           | [:construction:](# "Under Construction") |       ![Size](https://img.badgesize.io/clshortfuse/materialdesignweb/main/mixins/TouchTargetMixin.js?compression=gzip&softmax=2048&max=4096&label=TouchTarget) |
@@ -179,7 +188,6 @@ These components do not have official M3 guidelines
 | Banner       | [:construction:](# "Under Construction") |
 | Data Table   |          [:memo:](# "Planned")           |
 | Image List   |      [:grey_question:](# "Unknown")      |
-| Side Sheet   |      [:grey_question:](# "Unknown")      |
 
 
 # Legend

package/bin/mdw-css.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 
-import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../theming/index.js';
+import { generateThemeCSS, generateTypographyGlobalCSS, themeOptionsFromSearchParams } from '../services/theme.js';
 import { getSearchParams } from '../utils/cli.js';
 
 process.stdout.write(

package/components/Badge.js

@@ -3,6 +3,8 @@ import DensityMixin from '../mixins/DensityMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/* https://m3.material.io/components/badges/specs */
+
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
@@ -13,7 +15,7 @@ export default CustomElement
     :host {
       --mdw-shape__size: 8px;
       --mdw-ink: var(--mdw-color__on-error);
-      --mdw-shape__bg: rgb(var(--mdw-color__error));
+      --mdw-bg: 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;
@@ -24,8 +26,12 @@ export default CustomElement
       box-sizing: border-box;
       min-block-size: var(--mdw-typescale__label-small__line-height);
       min-inline-size: var(--mdw-typescale__label-small__line-height);
+
+      /* Ensure 16px min-height while keeping display:block */
+      padding-block: calc(8px - var(--mdw-typescale__body-small__line-height) / 2);
       padding-inline: max(4px, calc(4px + (var(--mdw-density) * 2px)));
     
+      background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     
       font: var(--mdw-type__font);
@@ -42,11 +48,12 @@ export default CustomElement
     }
     
     :host(:empty) {
-      vertical-align: middle;
+      min-block-size: 6px;
+      min-inline-size: 6px;
+      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
+      margin: 5px;
+      padding: 0
     }
     
-    :host(:empty) #shape {
-      inset: 5px;
-    }
   `
   .autoRegister('mdw-badge');

package/components/Body.js

@@ -1,7 +1,10 @@
+import TypographyMixin from '../mixins/TypographyMixin.js';
+
 import Box from './Box.js';
 
 export default Box
   .extend()
+  .mixin(TypographyMixin)
   .css`
     :host {
       font: var(--mdw-typescale__body-large__font);

package/components/BottomAppBar.js

@@ -1,4 +1,3 @@
-import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import AriaToolbarMixin from '../mixins/AriaToolbarMixin.js';
 
 import Surface from './Surface.js';
@@ -12,11 +11,6 @@ import Surface from './Surface.js';
 export default Surface
   .extend()
   .mixin(AriaToolbarMixin)
-  .mixin(AriaReflectorMixin)
-  .set({
-    elevated: true,
-    _ariaRole: 'toolbar',
-  })
   .observe({
     color: { empty: 'surface-container' },
   })
@@ -26,9 +20,8 @@ export default Surface
     :host {
       --mdw-bg: var(--mdw-color__surface-container);
       --mdw-ink: var(--mdw-color__on-surface);
-
-      display: flex;
       align-items: center;
+      flex-direction: row;
       gap: 8px;
       justify-content: flex-start;
 

package/components/BottomSheet.js

@@ -0,0 +1,424 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_ANIMATION_TYPE, EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import FlexableMixin from '../mixins/FlexableMixin.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import Scrim from './Scrim.js';
+
+const SUPPORTS_SCROLLEND = 'onscrollend' in window;
+
+/* Weak Collection of Events that cane from drag handle */
+const dragHandleEvent = new WeakSet();
+
+CustomElement
+  .extend()
+  .mixin(StateMixin)
+  .set({
+    stateLayer: true,
+  })
+  .html`
+    <div id=container>
+      <div id=icon aria-hidden=true></div>
+    </div>
+  `
+  .recompose(({ refs: { container, state } }) => {
+    container.prepend(state);
+  })
+  .css`
+      :host {
+        --mdw-state__hovered-opacity: 0;
+        --mdw-state__pressed-opacity: 0;
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline: 0;
+        align-self: stretch;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        cursor: grab;
+
+        outline:none;
+        pointer-events: auto;
+        user-select: none;
+        touch-action: none;
+
+        color: rgb(var(--mdw-color__on-surface-variant));
+      }
+
+      :host(:active) {
+        cursor: grabbing !important;
+      }
+
+      #container {
+        position: relative;
+
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        min-block-size: 48px;
+        min-inline-size: 48px;
+      }
+
+      #state {
+        border-radius: 50%;
+      }
+
+      #state[pointed] {
+        --mdw-state__focused-opacity: 0;
+      }
+      
+
+      #icon {
+        block-size: 4px;
+        inline-size: 32px;
+
+        background-color: currentColor;
+        border-radius: 8px;
+      }
+    `
+  .events({
+    touchmove(event) {
+      event.preventDefault();
+    },
+  })
+  .autoRegister('mdw-bottom-sheet-handle');
+
+export default CustomElement
+  .extend()
+  .mixin(ThemableMixin)
+  .mixin(FlexableMixin)
+  .mixin(ShapeMixin)
+  .mixin(AriaReflectorMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(ResizeObserverMixin)
+  .observe({
+    shapeTop: {
+      type: 'boolean',
+      empty: true,
+    },
+    modal: 'boolean',
+    open: 'boolean',
+    expanded: 'boolean',
+    _lastComputedBlockSize: {
+      type: 'float',
+      nullable: false,
+    },
+    _lastOffsetTop: {
+      type: 'float',
+      nullable: false,
+    },
+    _animationDuration: {
+      type: 'integer',
+      value: 0,
+    },
+    _animationEasing: {
+      value: 'ease-out',
+    },
+    _translateY: { value: '100%' },
+    _lastChildScrollTime: 'float',
+    _ariaValueNow: {
+      type: 'integer',
+    },
+    dragHandle: 'boolean',
+    onopen: EVENT_HANDLER_TYPE,
+    onclose: EVENT_HANDLER_TYPE,
+  })
+  .set({
+    _hasCheckedResize: false,
+    /** @type {InstanceType<Scrim>} */
+    _scrim: null,
+    _dragTimestamp: 0,
+    /** @type {number} */
+    _dragDeltaY: null,
+    /** @type {number} */
+    _dragStartY: null,
+  })
+  .observe({
+    hostStyles: {
+      ...ELEMENT_ANIMATION_TYPE,
+      get({
+        open, modal, _lastComputedBlockSize, _translateY,
+        _animationDuration, _animationEasing,
+      }) {
+        const computedMargin = (open || modal) ? 0 : `${-1 * _lastComputedBlockSize}px`;
+        return {
+          styles: {
+            marginBottom: computedMargin,
+            transform: modal ? `translateY(${_translateY})` : 'none',
+          },
+          timing: {
+            duration: _animationDuration,
+            easing: _animationEasing,
+          },
+        };
+      },
+    },
+  })
+  .html`
+    <mdw-bottom-sheet-handle id=drag-handle mdw-if={dragHandle} tabindex=0
+      role=separator aria-valuemin=-100 aria-valuemax=0 aria-valuenow={_ariaValueNow}></mdw-bottom-sheet-handle>
+    <slot id=slot></slot>
+  `
+  .methods({
+    checkForScrim(animate = false) {
+      let { open, modal, _scrim } = this;
+      if (open && modal) {
+        if (!_scrim) {
+          _scrim = new Scrim();
+          _scrim.addEventListener('click', () => {
+            this.open = false;
+            if (!this.dispatchEvent(new Event('close', { cancelable: true }))) {
+              // Revert if cancelled
+              this.open = true;
+            }
+          });
+          this._scrim = _scrim;
+        }
+        this.before(_scrim);
+        _scrim.hidden = false;
+      } else if (_scrim) {
+        if (!animate) {
+          _scrim.remove();
+        }
+        _scrim.hidden = true;
+      }
+    },
+    checkDragFinished() {
+      const { open, _dragStartY, _dragDeltaY, _lastComputedBlockSize, modal, _lastOffsetTop } = this;
+      if (!open || !modal || _dragStartY == null || _dragDeltaY == null) return;
+      const containerHeight = _lastOffsetTop + _lastComputedBlockSize - 72;
+      const min = (_lastComputedBlockSize > containerHeight)
+        ? _lastComputedBlockSize - containerHeight
+        : 0;
+      // visiblity = (max - position) / range
+      const visibility = (_lastComputedBlockSize - _dragDeltaY) / (_lastComputedBlockSize - min);
+      this._dragStartY = null;
+      if (visibility < 0.5) {
+        // Should close
+        this._animationDuration = 200 * visibility;
+        this._animationEasing = 'ease-out';
+        this._translateY = '100%';
+        this._dragDeltaY = null;
+        this.open = false;
+        this.dispatchEvent(new Event('close', { cancelable: false }));
+      } else {
+        // Should snap back to fully open
+        this._animationDuration = 250 * (0.5 * visibility);
+        this._dragDeltaY = min;
+        this._translateY = `${0}px`;
+        this._animationEasing = 'ease-in';
+        this.expanded = true;
+      }
+    },
+    /** @param {PointerEvent} event */
+    onDragHandleActive(event) {
+      if (!event.isTrusted) return;
+      if (!event.isPrimary) return;
+      if (event.pointerType === 'touch') return;
+      if (event.buttons !== 1) return;
+      dragHandleEvent.add(event);
+    },
+    /** @param {PointerEvent} event */
+    onDragHandleInactive(event) {
+      if (!event.isTrusted) return;
+      if (!event.isPrimary) return;
+      if (event.pointerType === 'touch') return;
+      if (event.type !== 'pointerup' && event.buttons !== 1) return;
+      this.checkDragFinished();
+    },
+    /** @param {PointerEvent|TouchEvent} event */
+    onPointerOrTouchMove(event) {
+      /** @type {{clientY:number,pageY:number}} */
+      let source;
+      const isTouch = (event.type === 'touchmove');
+      if (isTouch) {
+        const { touches } = /** @type {TouchEvent} */ (event);
+        if (!touches.length) return;
+        source = touches[0];
+      } else {
+        source = /** @type {PointerEvent} */ (event);
+        // if (!dragHandleEvent.has(event)) return;
+      }
+      const { open, _lastChildScrollTime, _dragStartY, _dragTimestamp, expanded } = this;
+      if (!open || _dragStartY == null) return;
+      if (_lastChildScrollTime && performance.now() - _lastChildScrollTime <= (SUPPORTS_SCROLLEND ? 5000 : 500)) {
+        // Assume still scrolling
+        return;
+      }
+      let { clientY, pageY } = source;
+      clientY ??= pageY - window.scrollY; // Safari
+      const { _lastOffsetTop, _lastComputedBlockSize } = this;
+      const containerHeight = _lastOffsetTop + _lastComputedBlockSize - 72;
+      const min = _lastComputedBlockSize > containerHeight
+        ? _lastComputedBlockSize - containerHeight
+        : 0;
+      const delta = Math.max((clientY - _dragStartY), min);
+      this._dragDeltaY = delta;
+
+      if (isTouch && expanded && performance.now() - _dragTimestamp < 100) {
+        // Store location, but don't animate until sure not scrolling
+        return;
+      }
+      if (expanded && delta !== min) {
+        // Buggy in demos
+        // this.expanded = false;
+      }
+
+      this._animationDuration = 0;
+      this._translateY = `${delta}px`;
+    },
+  })
+  .overrides({
+    onResizeObserved(entry) {
+      this._lastComputedBlockSize = entry.borderBoxSize[0]?.blockSize;
+      this._lastOffsetTop = this.offsetTop;
+    },
+  })
+  .events({
+    '~pointerdown'(event) {
+      if (event.pointerType !== 'touch') {
+        if (event.buttons !== 1) return;
+        // Pointer down isn't from drag-handle. Ignore
+        if (!dragHandleEvent.has(event)) return;
+      }
+      if (!this.open) return;
+      let { clientY, pageY } = event;
+      clientY ??= pageY - window.scrollY; // Safari
+      this._dragStartY = clientY - (this._dragDeltaY ?? 0);
+      this._dragDeltaY = 0;
+      this._dragTimestamp = performance.now();
+    },
+    '~pointermove': 'onPointerOrTouchMove',
+    '~pointerup'(event) {
+      if (event.pointerType === 'touch') return;
+      this.checkDragFinished();
+    },
+    'pointerleave'(event) {
+      if (event.pointerType === 'touch') return;
+      this.checkDragFinished();
+    },
+    '~touchmove': 'onPointerOrTouchMove',
+    touchcancel: 'checkDragFinished',
+    '~touchend': 'checkDragFinished',
+    /** Scroll events do no bubble but can be captured, passively */
+    '*~scroll'() {
+      if (!this.modal) return;
+      this.checkDragFinished();
+      this._lastChildScrollTime = performance.now();
+      // Wiping touch state
+      this._dragStartY = null;
+      this._dragDeltaY = null;
+    },
+    '*scrollend'() {
+      if (!this.modal) return;
+      this._lastChildScrollTime = null;
+    },
+  })
+  .childEvents({
+    dragHandle: {
+      '~pointerdown': 'onDragHandleActive',
+      '~pointermove': 'onDragHandleActive',
+    },
+  })
+  .on({
+    openChanged(previous, open) {
+      // Refresh metrics
+      const _lastOffsetTop = this.offsetTop;
+      this._lastOffsetTop = _lastOffsetTop;
+      // No longer using initial animation timing of 0
+      this._animationDuration = open ? 250 : 200;
+      if (open) {
+        let y = 0;
+        if (this.modal) {
+          const { _lastComputedBlockSize } = this;
+          const containerHeight = _lastOffsetTop + _lastComputedBlockSize;
+          if (_lastComputedBlockSize > containerHeight / 2) {
+          // Bottom Sheet is oversized, clamp to 50%
+            y = _lastComputedBlockSize - (containerHeight / 2);
+          }
+        }
+        this._translateY = `${y}px`;
+        this._dragDeltaY = y;
+      } else {
+        this._translateY = '100%';
+        this.expanded = false;
+      }
+      this._animationEasing = open ? 'ease-in' : 'ease-out';
+      this.checkForScrim(true);
+      if (open) this.focus();
+    },
+    modalChanged() {
+      this._animationDuration = 0;
+      this.checkForScrim(false);
+    },
+  })
+  .css`
+    :host {
+      --mdw-bg: var(--mdw-color__surface-container-low);
+      --mdw-ink: var(--mdw-color__on-surface);
+      --mdw-shape__size: var(--mdw-shape__extra-large);
+      --mdw-shape__size__bottom-start-size: 0px;
+      --mdw-shape__size__bottom-end-size: 0px;
+      position: sticky;
+      inset-block-end: 0;
+      inset-inline: 0;
+
+      overflow-y: clip;
+
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+
+      box-sizing: border-box;
+      max-inline-size: 640px;
+      margin-inline: auto;
+      padding-block-start: 16px;
+
+      pointer-events: none;
+
+      transform: translateY(100%);
+
+      visibility: hidden;
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+
+      transition: visibility 200ms;
+      
+      will-change: transform, margin-block-end, visibility;
+    }
+
+    :host(:where([open])) {
+      pointer-events: auto;
+
+      visibility: inherit;
+
+      transition: visibility 0s;
+    }
+
+    :host(:where([modal])) {
+      position: fixed; 
+
+      max-block-size: calc(100% - 72px);
+      touch-action: none;
+
+      z-index: 24;
+    }
+
+    :host(:where([expanded])) {
+      overflow-y:auto;
+      touch-action: auto;
+    }
+
+    :host(:where([drag-handle])) {
+      padding-block-start: 48px;
+    }
+  `
+  .autoRegister('mdw-bottom-sheet');