@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/SegmentedButton.js

@@ -2,6 +2,8 @@ import './Icon.js';
 
 import Button from './Button.js';
 
+/* https://m3.material.io/components/segmented-buttons/specs */
+
 export default Button
   .extend()
   .observe({
@@ -9,43 +11,35 @@ export default Button
     innerSegmentedButton: 'boolean',
   })
   .set({
+    outlined: true,
     focusableOnDisabled: true,
   })
-  .on({
-    composed({ html, inline }) {
-      const { shape, icon, outline, control, slot, state } = this.refs;
-
-      slot.before(html`
-        <div id=icons>
-          ${icon}
-          <mdw-icon selected={checked} id=check-icon aria-hidden=true>check</mdw-icon>
-        </div>
-      `);
-      shape.setAttribute('selected', '{checked}');
-
-      icon.removeAttribute('mdw-if');
-      icon.setAttribute('has-icon', '{hasIcon}');
-      icon.setAttribute('selected', '{checked}');
-      outline.setAttribute('inner-segmented-button', '{innerSegmentedButton}');
-      outline.setAttribute('shape-start', '{shapeStart}');
-      outline.setAttribute('shape-end', '{shapeEnd}');
-      control.setAttribute('role', 'option');
-      control.setAttribute('aria-checked', inline(
-        ({ type, checked }) => (type === 'checkbox' ? `${(!!checked)}` : null),
-      ));
-      control.setAttribute('aria-selected', inline(
-        ({ type, checked }) => (type === 'checkbox' ? null : `${!!checked}`),
-      ));
-
-      state.setAttribute('state-disabled', 'focus');
-    },
-    constructed() {
-      this.outlined = true;
-    },
+  .recompose(({ html, inline, refs: { icon, outline, control, slot, state } }) => {
+    slot.before(html`
+      <div id=icons>
+        ${icon}
+        <mdw-icon selected={checked} id=check-icon aria-hidden=true icon=check variation=filled></mdw-icon>
+      </div>
+    `);
+
+    icon.removeAttribute('mdw-if');
+    icon.setAttribute('has-icon', '{hasIcon}');
+    icon.setAttribute('selected', '{checked}');
+    outline.setAttribute('selected', '{checked}');
+    outline.setAttribute('inner-segmented-button', '{innerSegmentedButton}');
+    outline.setAttribute('shape-start', '{shapeStart}');
+    outline.setAttribute('shape-end', '{shapeEnd}');
+    control.setAttribute('role', 'option');
+    control.setAttribute('aria-checked', inline(
+      ({ type, checked }) => (type === 'checkbox' ? `${(!!checked)}` : null),
+    ));
+    control.setAttribute('aria-selected', inline(
+      ({ type, checked }) => (type === 'checkbox' ? null : `${!!checked}`),
+    ));
+
+    state.setAttribute('state-disabled', 'focus');
   })
   .css`
-    /* https://m3.material.io/components/segmented-buttons/specs */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__full);
       --mdw-ink: var(--mdw-color__on-surface);
@@ -64,13 +58,15 @@ export default Button
 
     #outline {
       inset-inline-end: -1px;
+
+      z-index: -1;
     }
 
     #outline[shape-end] {
       inset-inline-end: 0;
     }
 
-    #shape[selected] {
+    #outline[selected] {
       background-color: rgb(var(--mdw-bg));
     }
 
@@ -107,12 +103,13 @@ export default Button
 
       overflow: visible;
 
+      block-size: 100%;
+
       margin: 0;
 
       opacity: 0;
 
       font-size: 18px;
-      font-variation-settings: 'FILL' 1;
     }
 
     #check-icon[selected] {
@@ -125,7 +122,7 @@ export default Button
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
 
-    #shape[disabled][selected] {
+    #outline[disabled][selected] {
       background-color: rgba(var(--mdw-color__on-surface), 0.12);
     }
   `

package/components/SegmentedButtonGroup.js

@@ -1,4 +1,3 @@
-import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import KeyboardNav from '../mixins/KeyboardNavMixin.js';
 
 import Box from './Box.js';
@@ -9,7 +8,6 @@ import SegmentedButton from './SegmentedButton.js';
 export default Box
   .extend()
   .mixin(KeyboardNav)
-  .mixin(AriaReflectorMixin)
   .define({
     kbdNavQuery() {
       return SegmentedButton.elementName;
@@ -39,8 +37,15 @@ export default Box
       --mdw-ink: var(--mdw-color__on-secondary-container);
 
       display: inline-flex;
+      align-items: stretch;
+      flex-direction: row;
+      justify-content: initial;
       overflow-x: auto;
       overflow-y: hidden;
+
+      box-sizing: border-box;
+      min-inline-size: 100%;
+      flex:none;
     }
 
     :host([color]) {
@@ -49,6 +54,7 @@ export default Box
 
     #slot {
       display: grid;
+      grid-auto-columns: 1fr;
       grid-auto-flow: column;
 
       flex: none;
@@ -57,7 +63,7 @@ export default Box
   `
   .on({
     constructed() {
-      this.setAttribute('aria-orientation', 'horizontal');
+      this.updateAriaProperty('ariaOrientation', 'horizontal');
     },
   })
   .autoRegister('mdw-segmented-button-group');

package/components/Select.js

@@ -41,14 +41,13 @@ export default CustomElement
       },
     },
   })
+  .recompose(({ template, refs: { slot, prefix, suffix, control } }) => {
+    control.setAttribute('icon', '{icon}');
+    template.append(slot);
+    prefix.remove();
+    suffix.remove();
+  })
   .on({
-    composed({ template }) {
-      const { slot, prefix, suffix, control } = this.refs;
-      control.setAttribute('icon', '{icon}');
-      template.append(slot);
-      prefix.remove();
-      suffix.remove();
-    },
     _formResetChanged(oldValue, newValue) {
       if (!newValue) return;
       this._select.value = this.querySelector('option[selected]')?.value ?? '';

package/components/Shape.js

@@ -1,68 +1,8 @@
-import ShapeMixin from '../mixins/ShapeMixin.js';
+import CustomElement from '../core/CustomElement.js';
+import ShapeMaskedMixin from '../mixins/ShapeMaskedMixin.js';
 
-import Box from './Box.js';
-
-export default Box
+export default CustomElement
   .extend()
-  .mixin(ShapeMixin)
-  .on({
-    composed() {
-      const { shape, outline } = this.refs;
-      shape.before(outline);
-      shape.remove();
-    },
-  })
-  .css`
-    :host {
-      position: relative;
-
-      overflow: hidden;
-
-      z-index: auto;
-
-      background-color: var(--mdw-shape__bg, transparent);
-
-      border-start-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-start-size));
-      border-start-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__top-end-size));
-      border-end-start-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-start-size));
-      border-end-end-radius: calc(var(--mdw-shape__rounded) * var(--mdw-shape__size__bottom-end-size));
-
-      transition-delay: 1ms;
-      transition-duration: 200ms;
-      transition-property: background-color, color;
-      will-change: background-color, color;
-
-    }
-
-    :host([color]) {
-      background-color: rgb(var(--mdw-bg));
-    }
-
-    :host(:where([ink],[color])) {
-      color: rgb(var(--mdw-ink));
-    }
-
-    :host([outlined]) {
-      background-color: transparent;
-    }
-
-    :host(:is([color="none"], [color="transparent"])) {
-      background-color: transparent;
-    }
-
-    @supports(-webkit-mask-box-image: none) {
-      :host {
-        -webkit-mask-box-image: var(--mdw-shape__mask-border-source)
-          8 fill /
-          var(--mdw-shape__size)
-          stretch;
-
-        -webkit-mask: var(--mdw-shape__mask);
-
-        transition-duration: 200ms, 200ms, 200ms;
-        transition-property: background-color, color, -webkit-mask-box-image-width;
-        will-change: background-color, color, -webkit-mask-box-image;
-      }
-    }
-  `
+  .mixin(ShapeMaskedMixin)
+  .html`<slot id=slot></slot>`
   .autoRegister('mdw-shape');

package/components/SideSheet.js

@@ -0,0 +1,308 @@
+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
+ */
+export default CustomElement
+  .extend()
+  .mixin(ThemableMixin)
+  .mixin(FlexableMixin)
+  .mixin(ElevationMixin)
+  .mixin(ShapeMixin)
+  .mixin(AriaReflectorMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(ResizeObserverMixin)
+  .observe({
+    fixed: 'boolean',
+    open: 'boolean',
+    inlineEnd: 'boolean',
+    _lastComputedInlineSize: {
+      type: 'float',
+      nullable: false,
+    },
+    _animationDuration: {
+      type: 'integer',
+      value: 0,
+    },
+    _animationEasing: {
+      value: 'ease-out',
+    },
+    _dragDeltaX: 'float',
+    _dragStartX: 'float',
+    _translateX: { value: '-100%' },
+    _lastChildScrollTime: 'float',
+    ontoggle: EVENT_HANDLER_TYPE,
+    onclose: EVENT_HANDLER_TYPE,
+    autoOpen: {
+      type: 'float',
+      empty: -1,
+    },
+    autoClose: {
+      type: 'float',
+      empty: -1,
+    },
+    fixedBreakpoint: {
+      type: 'float',
+      empty: 0,
+    },
+    _isSideSheetRtl: 'boolean',
+    color: 'string',
+    fixedColor: 'string',
+  })
+  .set({
+    /** @type {InstanceType<Scrim>} */
+    _scrim: null,
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ fixed, fixedColor }) {
+        if (fixed && fixedColor) {
+          return { backgroundColor: `rgb(var(--mdw-color__${fixedColor}))` };
+        }
+      },
+    },
+    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({
+    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;
+      }
+    },
+    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';
+      }
+      this._dragDeltaY = null;
+      this._dragStartY = null;
+    },
+    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');