@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/SideSheet.js

@@ -0,0 +1,337 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_ANIMATION_TYPE, ELEMENT_STYLE_TYPE, EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import { isRtl } from '../core/dom.js';
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
+import FlexableMixin from '../mixins/FlexableMixin.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import Scrim from './Scrim.js';
+
+const SUPPORTS_SCROLLEND = 'onscrollend' in window;
+
+/**
+ * Side sheets may be static.
+ * Side sheets may be modal while retaining their own position.
+ * Side sheets can have different modal and static max-sizes.
+ * Side sheets can be themed with background color and ink.
+ * Side sheets can be shaped.
+ * Side sheets do not have states
+ * Side sheets can have roles
+ * Side sheets delegate focus
+ * Static side sheets push in and out content.
+ * Modal side sheets slide in and out over content.
+ * Modal side sheets anchor position does not need to match static position.
+ * Modal side sheets must become "dialog-like", blocking access to all other elements on the screen.
+ * Modal side sheets can display elevation
+ */
+/**
+ * Side sheets present content in a surface that slides in from an edge; they
+ * support modal and static modes and can be themed and shaped.
+ * @see https://m3.material.io/components/side-sheets/overview
+ */
+export default CustomElement
+  .extend()
+  .mixin(ThemableMixin)
+  .mixin(FlexableMixin)
+  .mixin(ElevationMixin)
+  .mixin(ShapeMixin)
+  .mixin(AriaReflectorMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(ResizeObserverMixin)
+  .observe({
+    /** When true the side sheet is fixed (non-modal/static), occupying layout space. */
+    fixed: 'boolean',
+    /** Whether the sheet is currently open (visible). */
+    open: 'boolean',
+    /** When true, position the sheet at the inline end edge. */
+    inlineEnd: 'boolean',
+    /** Last measured inline size (px) used for layout/translate calculations. */
+    _lastComputedInlineSize: {
+      type: 'float',
+      nullable: false,
+    },
+    /** Animation duration (ms) for sheet open/close transitions. */
+    _animationDuration: {
+      type: 'integer',
+      value: 0,
+    },
+    /** Animation easing keyword used for sheet transitions. */
+    _animationEasing: {
+      value: 'ease-out',
+    },
+    /** Current drag delta X (px) while user is swiping the sheet. */
+    _dragDeltaX: 'float',
+    /** Starting X coordinate (px) for a drag gesture. */
+    _dragStartX: 'float',
+    /** CSS translateX value used to animate the sheet position. */
+    _translateX: { value: '-100%' },
+    /** Timestamp of the last child scroll event (used to avoid gesture conflicts). */
+    _lastChildScrollTime: 'float',
+    /** Event handler invoked when the sheet toggles. */
+    ontoggle: EVENT_HANDLER_TYPE,
+    /** Event handler invoked when the sheet closes. */
+    onclose: EVENT_HANDLER_TYPE,
+    /** Optional auto-open minimum viewport inline-size (px); -1 disables. */
+    autoOpen: {
+      type: 'float',
+      empty: -1,
+    },
+    /** Optional auto-close maximum viewport inline-size (px); -1 disables. */
+    autoClose: {
+      type: 'float',
+      empty: -1,
+    },
+    /** Inline-size breakpoint (px) at which the sheet becomes `fixed`. */
+    fixedBreakpoint: {
+      type: 'float',
+      empty: 0,
+    },
+    /** Internal flag computed from directionality and `inlineEnd`. */
+    _isSideSheetRtl: 'boolean',
+    /** The theme color token used for the sheet background. */
+    color: 'string',
+    /** Optional fixed-mode color token applied when sheet is fixed. */
+    fixedColor: 'string',
+  })
+  .set({
+    /** @type {InstanceType<Scrim>} */
+    _scrim: null,
+  })
+  .observe({
+    /** Computed host style when `fixed` and `fixedColor` are set. */
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ fixed, fixedColor }) {
+        if (fixed && fixedColor) {
+          return { backgroundColor: `rgb(var(--mdw-color__${fixedColor}))` };
+        }
+      },
+    },
+    /** Computed animation/style object applied to the host for open/close. */
+    hostStyles: {
+      ...ELEMENT_ANIMATION_TYPE,
+      get({
+        open, fixed, _isSideSheetRtl, _lastComputedInlineSize, _translateX,
+        _animationDuration, _animationEasing,
+      }) {
+        const computedMargin = (open || !fixed) ? 0 : `${-1 * _lastComputedInlineSize}px`;
+        return {
+          styles: {
+            marginLeft: _isSideSheetRtl ? 0 : computedMargin,
+            marginRight: _isSideSheetRtl ? computedMargin : 0,
+            transform: fixed ? 'none' : `translateX(${_translateX})`,
+          },
+          timing: {
+            duration: _animationDuration,
+            easing: _animationEasing,
+          },
+        };
+      },
+    },
+  })
+  .html`<slot id=slot></slot>`
+  .methods({
+    /**
+     * Ensure a scrim is present when the sheet is modal (open && !fixed).
+     * When `animate` is true, keep the scrim around to run its fade-out.
+     */
+    checkForScrim(animate = false) {
+      let { open, fixed, _scrim } = this;
+      if (open && !fixed) {
+        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;
+      }
+    },
+    /** Evaluate drag state and decide whether to close or snap open. */
+    checkDragFinished() {
+      const { open, _dragDeltaX, _lastComputedInlineSize, fixed, _isSideSheetRtl } = this;
+      if (!open || fixed || _dragDeltaX == null) return;
+      const visibility = (_dragDeltaX + _lastComputedInlineSize) / _lastComputedInlineSize;
+      if (visibility < 0.5) {
+        // Should close
+        this._animationDuration = 200 * visibility;
+        this._animationEasing = 'ease-out';
+        this._translateX = _isSideSheetRtl ? '-100%' : '100%';
+        this.open = false;
+        this.dispatchEvent(new Event('close', { cancelable: false }));
+      } else {
+        // Should snap back to fully open
+        this._animationDuration = 250 * (0.5 * visibility);
+        this._translateX = '0';
+        this._animationEasing = 'ease-in';
+      }
+    },
+    /** Recompute `fixed`/`open` state based on the window width and breakpoints. */
+    onWindowResize() {
+      const { autoOpen, fixedBreakpoint, autoClose } = this;
+      const containerWidth = window.innerWidth;
+      const fixed = (containerWidth >= fixedBreakpoint);
+      this.open = fixed
+        && autoOpen >= 0
+        && (containerWidth >= autoOpen && (autoClose === -1 || containerWidth < autoClose));
+      this.fixed = fixed;
+    },
+  })
+  .overrides({
+    onResizeObserved(entry) {
+      this._lastComputedInlineSize = entry.borderBoxSize[0]?.inlineSize;
+    },
+  })
+  .events({
+    '~touchstart'(event) {
+      if (!event.touches.length) return;
+      const { open, fixed, _isSideSheetRtl } = this;
+      if (!open || fixed) return;
+      let [{ clientX, pageX }] = event.touches;
+      clientX ??= pageX - window.scrollX; // Safari
+      this._dragStartX = _isSideSheetRtl
+        ? window.innerWidth - clientX
+        : clientX;
+      this._dragDeltaX = 0;
+    },
+    '~touchmove'({ touches }) {
+      if (!touches.length) return;
+      const { open, fixed, _lastChildScrollTime, _dragStartX, _isSideSheetRtl } = this;
+      if (!open || fixed || _dragStartX == null) return;
+      if (_lastChildScrollTime && performance.now() - _lastChildScrollTime <= (SUPPORTS_SCROLLEND ? 5000 : 500)) {
+        // Assume still scrolling
+        return;
+      }
+      let [{ clientX, pageX }] = touches;
+      clientX ??= pageX - window.scrollX; // Safari
+
+      const delta = _isSideSheetRtl
+        ? Math.min((window.innerWidth - clientX) - _dragStartX, 0)
+        : Math.min((clientX - _dragStartX), 0);
+
+      this._animationDuration = 0;
+      this._dragDeltaX = delta;
+      this._translateX = `${_isSideSheetRtl ? (-1 * delta) : delta}px`;
+    },
+    touchcancel: 'checkDragFinished',
+    '~touchend': 'checkDragFinished',
+    /** Scroll events do no bubble but can be captured, passively */
+    '*~scroll'() {
+      if (this.fixed) return;
+      this.checkDragFinished();
+      this._lastChildScrollTime = performance.now();
+      // Wiping touch state
+      this._dragStartX = null;
+      this._dragDeltaX = null;
+    },
+    '*scrollend'() {
+      if (this.fixed) return;
+      this._lastChildScrollTime = null;
+    },
+  })
+  .on({
+    openChanged(previous, open) {
+      // No longer using initial animation timing of 0
+      this._animationDuration = open ? 250 : 200;
+      this._translateX = open ? '0' : (this.inlineEnd ? '100%' : '-100%');
+      this._animationEasing = open ? 'ease-in' : 'ease-out';
+      this.checkForScrim(true);
+      this.dispatchEvent(new Event('toggle'));
+    },
+    fixedChanged() {
+      this._animationDuration = 0;
+      this.checkForScrim(false);
+    },
+    constructed() {
+      window.addEventListener('resize', this.onWindowResize.bind(this));
+    },
+    connected() {
+      this.onWindowResize();
+    },
+    inlineEndChanged(previous, inlineEnd) {
+      this._isSideSheetRtl = isRtl(this) ? !inlineEnd : inlineEnd;
+      this._translateX = this.open ? '0' : (this.inlineEnd ? '100%' : '-100%');
+    },
+  })
+  .css`
+    :host {
+      --mdw-bg: var(--mdw-color__surface-container-low);
+      --mdw-ink: var(--mdw-color__on-surface-variant);
+
+      position: fixed;
+
+      inset-block: 0;
+      inset-inline: 0 auto;
+
+      display: inline-flex;
+
+      overflow-y:auto;
+
+      overscroll-behavior: none;
+      overscroll-behavior: contain;
+
+      box-sizing: border-box;
+      block-size: 100vh;
+      block-size: 100dvh;
+      min-block-size: 100vh;
+      min-block-size: 100dvh;
+      max-block-size: 100%;
+
+      max-inline-size: calc(100vw - 56px);
+      grid-column: 1;
+
+      transform: translateX(-100%);
+
+      visibility: hidden;
+
+      z-index: 24;
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+
+      transition: visibility 200ms;
+      will-change: transform, margin-inline-start, margin-inline-end, visibility;
+    }
+
+    :host(:where([open])) {
+      visibility: inherit;
+
+      transition-delay: 0s;
+    }
+
+    :host(:where[inline-end]) {
+      inset-inline: auto 0;
+
+      transform: translateX(100%);
+    }
+
+    :host(:where([fixed])) {
+      position: sticky;
+      inset-inline: auto;
+
+      max-inline-size: none;
+
+      transform: none;
+      z-index: auto;
+    }
+
+    :host(:where([inline-end][fixed])) {
+      grid-column: 3;
+    }
+  `
+  .autoRegister('mdw-side-sheet');

package/components/Slider.js

@@ -1,8 +1,11 @@
 import CustomElement from '../core/CustomElement.js';
-import { isRtl } from '../core/dom.js';
+import { SAFARI_VERSION, isFocused, isRtl } from '../core/dom.js';
 import InputMixin from '../mixins/InputMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
+import { loadGlobalStyles } from '../services/rtl.js';
+
+loadGlobalStyles();
 
 /**
  * @param {string} value
@@ -29,6 +32,10 @@ function valueAsFraction(value, min, max) {
   return (nValue - nMin) / (nMax - nMin);
 }
 
+/**
+ * Slider allows users to select a value from a range by dragging a thumb.
+ * @see https://m3.material.io/components/sliders/specs
+ */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
@@ -39,15 +46,26 @@ export default CustomElement
     type: 'range',
   })
   .observe({
-    ticks: 'string',
-    showLabel: { type: 'boolean', reflect: false },
-    _previewValue: { nullable: false },
+    /** Number of tick marks to show along the track (integer). */
+    ticks: 'integer',
+    /** Internal string representation of the current value used for formatting. */
+    _valueAsText: { nullable: false },
+    /** Text to show in the thumb label; when null the numeric value is shown. */
+    thumbLabel: {
+      type: 'string',
+      reflect: 'read',
+    },
+    /** Rounded numeric value (used while dragging) tracked as a float. */
     _roundedValue: 'float',
+    /** True while the pointer is hovering the thumb (used to show the label). */
     _isHoveringThumb: 'boolean',
+    /** Last `value` string that produced a dispatched `change` event; used to avoid duplicates. */
     _lastDispatchedChangeValue: 'string',
   })
   .methods({
     /**
+     * Handle pointer or touch interactions on the native control to compute
+     * position and update the intermediate rounded value while dragging.
      * @param {(MouseEvent|TouchEvent) & {currentTarget:HTMLInputElement}} event
      * @return {void}
      */
@@ -120,7 +138,20 @@ export default CustomElement
         }
 
         this._roundedValue = roundedValue;
-        this._previewValue = roundedValue.toString(10);
+        this._valueAsText = roundedValue.toString(10);
+        if (isTouch && SAFARI_VERSION) {
+          // Safari does not update input when drag wasn't initiated at thumb
+          if (event.type === 'touchstart') {
+            // Default touch action on Safari is to magnify when on track
+            event.preventDefault();
+          }
+          const { _input } = this;
+          if (_input.valueAsNumber !== roundedValue) {
+            _input.valueAsNumber = roundedValue;
+            this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+          }
+        }
+
         return;
       }
 
@@ -136,25 +167,32 @@ export default CustomElement
       this._isHoveringThumb = offsetX >= thumbMin && offsetX <= thumbMax;
     },
 
-    /** @param {Event} event */
+    /**
+     * Pointer leave/blur handler for the control; hides the thumb label when focus is lost.
+     * @param {Event} event
+     */
     onLeaveEvent({ currentTarget }) {
-      if (document.activeElement === currentTarget) return;
+      if (isFocused(/** @type {Element} */ (currentTarget))) return;
       this._isHoveringThumb = false;
     },
 
     /**
+     * Finalize interaction with the control: commit the rounded value to the
+     * native input and dispatch a `change` event if the value changed.
      * @param {(MouseEvent|TouchEvent) & {currentTarget:HTMLInputElement}} event
      * @return {void}
      */
     onControlFinish(event) {
       const input = event.currentTarget;
       if (input.disabled) return;
-      event.preventDefault();
+      if (event.type === 'click') {
+        event.preventDefault();
+      }
       input.valueAsNumber = this._roundedValue;
       this._value = input.value;
       if (this._lastDispatchedChangeValue !== this._value) {
         this._lastDispatchedChangeValue = this._value;
-        input.dispatchEvent(new Event('change', { bubbles: true }));
+        this.dispatchEvent(new Event('change', { bubbles: true }));
       }
     },
   })
@@ -167,26 +205,39 @@ export default CustomElement
       '~mousedown': 'onControlMouseOrTouch',
       '~mousemove': 'onControlMouseOrTouch',
       '~mouseout': 'onControlMouseOrTouch',
+      touchstart: 'onControlMouseOrTouch',
       '~touchmove': 'onControlMouseOrTouch',
-      '~touchstart': 'onControlMouseOrTouch',
-      // @ts-expect-error Old spec
       '~touchleave': 'onControlMouseOrTouch',
       '~touchcancel': 'onControlMouseOrTouch',
       '~touchend': 'onControlMouseOrTouch',
       touchend: 'onControlFinish',
       click: 'onControlFinish',
+      '~change'(event) {
+        // Change event will be rethrown by ControlMixin
+        // Track value to avoid double dispatch
+        if (this._lastDispatchedChangeValue === this._value) {
+          event.stopPropagation();
+        }
+        this._lastDispatchedChangeValue = this._value;
+      },
     },
   })
   .expressions({
-    computeTrackStyle({ ticks, _previewValue, min, max }) {
+    /** Compute inline style variables for the track, including ticks and value fraction. */
+    computeTrackStyle({ ticks, _valueAsText, min, max }) {
       return [
         ticks ? `--ticks:${ticks}` : null,
-        `--value:${valueAsFraction(_previewValue, min, max)}`,
+        `--value:${valueAsFraction(_valueAsText, min, max)}`,
       ].filter(Boolean).join(';') || null;
     },
+    /** True when the thumb label should be hidden (not hovering and not focused). */
     _thumbLabelHidden({ _isHoveringThumb, focusedState }) {
       return (!_isHoveringThumb && !focusedState);
     },
+    /** Compute the label text to show in the thumb: explicit `thumbLabel` or numeric value. */
+    _computedThumbLabel({ thumbLabel, _valueAsText }) {
+      return thumbLabel ?? _valueAsText;
+    },
   })
   .html`
     <div id=track style={computeTrackStyle} aria-hidden=true disabled={disabledState}>
@@ -196,18 +247,17 @@ export default CustomElement
         <div id=thumb></div>
         <div id=thumb-label
           hidden={_thumbLabelHidden}
-          text={_previewValue}></div>
+          text={_computedThumbLabel}></div>
       </div>
     </div>
   `
+  .recompose(({ refs: { thumb, state, control } }) => {
+    thumb.append(state);
+    control.removeAttribute('aria-labelledby');
+  })
   .on({
-    composed() {
-      const { thumb, state, control } = this.refs;
-      thumb.append(state);
-      control.removeAttribute('aria-labelledby');
-    },
     valueChanged(oldValue, newValue) {
-      this._previewValue = newValue;
+      this._valueAsText = newValue;
     },
   })
   .css`
@@ -307,6 +357,10 @@ export default CustomElement
       border-radius: 50%;
     }
 
+    #control[disabled] {
+      cursor: not-allowed;
+    }
+
     #track {
       --value: 0.5;
       position: absolute;
@@ -321,6 +375,7 @@ export default CustomElement
 
       background-color: rgb(var(--mdw-color__surface-container-highest));
       border-radius: inherit;
+      color: rgb(var(--mdw-bg));
     }
 
     #thumb {
@@ -340,7 +395,7 @@ export default CustomElement
 
       border-radius: 50%;
 
-      color: rgb(var(--mdw-bg));
+      color: currentColor;
     }
 
     #thumb::before {
@@ -354,7 +409,7 @@ export default CustomElement
       background-color: currentColor;
       border-radius: 50%;
 
-      transition: background-color 100ms;
+      transition: color 100ms, background-color 100ms;
     }
 
     /* Inactive ticks */
@@ -366,28 +421,27 @@ export default CustomElement
       position: absolute;
       inset: 0;
 
-      padding-inline: 10px;
+      padding-inline: 2px;
 
       background-clip: content-box;
-      /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-      background-image: radial-gradient(circle at center, var(--tick-color) 0, var(--tick-color) 1px, transparent 0);
-      background-position: center center;
+      background-image: radial-gradient(circle at 1px, currentColor 0, currentColor 1px, transparent 0);
+      background-position: -1px 50%;
       background-repeat: repeat-x;
-      background-size: 0 100%;
-      background-size: calc(100% / var(--ticks, 0)) 2px;
+      background-size: calc(100% / (var(--ticks, 0) + 1)) 2px;
     }
 
     #ticks::before {
-      --tick-color: rgb(var(--mdw-color__on-surface-variant));
+      color: rgb(var(--mdw-color__on-surface-variant));
     }
 
     #ticks::after {
-      --tick-color: rgb(var(--mdw-ink));
       /* TODO: Use single-paint implementation */
       padding-inline-end: calc(100% - (100% * var(--value)) + 10px);
 
       z-index: 1;
 
+      color: rgb(var(--mdw-ink));
+
       will-change: padding-inline-end;
     }
     /* Active Indicator */
@@ -409,7 +463,7 @@ export default CustomElement
       transform: scaleX(var(--value));
       transform-origin: calc(100% * calc(-0.5 * var(--mdw-dir, 1) + 0.5)) 0;
 
-      background-color: rgb(var(--mdw-bg));
+      background-color: currentColor;
 
       will-change: transform;
     }
@@ -465,21 +519,24 @@ export default CustomElement
       align-items: center;
       justify-content: center;
 
+      box-sizing: border-box;
+
       min-block-size: 28px;
       min-inline-size: 28px;
+      padding: 4px;
 
       z-index: 1;
 
       background-color: rgb(var(--mdw-bg));
-      border-radius: 50%;
+      border-radius: 14px;
       color: rgb(var(--mdw-ink));
     }
 
     #thumb-label::after {
       /* Values from Figma SVG */
-      --x-start: 14.6446%; /*4.1005px*/
-      --x-end: 85.3554%;
-      --y: 70.7106%; /*24.0416px*/
+      --x-start: 4.1005px; /*4.1005px*/
+      --x-end: calc(100% - 4.1005px);
+      --y: calc(100% - 9.9584px); /*24.0416px*/
 
       content: "";
 
@@ -489,7 +546,7 @@ export default CustomElement
 
       clip-path: polygon(var(--x-start) var(--y), var(--x-end) var(--y), 50% 100%, var(--x-start) var(--y));
 
-      background-color: rgb(var(--mdw-bg));
+      background-color: currentColor;
     }
 
     #track[disabled] {