@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/Slider.js

@@ -1,7 +1,11 @@
 import CustomElement from '../core/CustomElement.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,20 +33,24 @@ function valueAsFraction(value, min, max) {
 }
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(InputMixin)
-  .extend()
   .set({
     stateLayer: true,
     type: 'range',
   })
   .observe({
     ticks: 'string',
-    showLabel: { type: 'boolean', reflect: false },
-    _previewValue: { nullable: false },
+    _valueAsText: { nullable: false },
+    thumbLabel: {
+      type: 'string',
+      reflect: 'read',
+    },
     _roundedValue: 'float',
     _isHoveringThumb: 'boolean',
+    _lastDispatchedChangeValue: 'string',
   })
   .methods({
     /**
@@ -103,6 +111,9 @@ export default CustomElement
         const nMax = parseFloat(max, 100);
         const nStep = parseFloat(step, 1);
 
+        if (isRtl(this)) {
+          position = 1 - position;
+        }
         const currentValue = position * (nMax - nMin) + nMin;
         let roundedValue = Math.round(currentValue / nStep) * nStep;
 
@@ -115,13 +126,29 @@ 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;
       }
 
       if (isTouch) return;
 
-      const fractionalValue = valueAsFraction(this.value, this.min, this.max);
+      let fractionalValue = valueAsFraction(this.value, this.min, this.max);
+      if (isRtl(this)) {
+        fractionalValue = 1 - fractionalValue;
+      }
       const thumbOffset = fractionalValue * clientWidth;
       const thumbMin = thumbOffset - 20;
       const thumbMax = thumbOffset + 20;
@@ -130,7 +157,7 @@ export default CustomElement
 
     /** @param {Event} event */
     onLeaveEvent({ currentTarget }) {
-      if (document.activeElement === currentTarget) return;
+      if (isFocused(/** @type {Element} */ (currentTarget))) return;
       this._isHoveringThumb = false;
     },
 
@@ -141,11 +168,14 @@ export default CustomElement
     onControlFinish(event) {
       const input = event.currentTarget;
       if (input.disabled) return;
-      event.preventDefault();
+      if (event.type === 'click') {
+        event.preventDefault();
+      }
       input.valueAsNumber = this._roundedValue;
-      if (this._value !== input.value) {
-        this._value = input.value;
-        input.dispatchEvent(new Event('change', { bubbles: true }));
+      this._value = input.value;
+      if (this._lastDispatchedChangeValue !== this._value) {
+        this._lastDispatchedChangeValue = this._value;
+        this.dispatchEvent(new Event('change', { bubbles: true }));
       }
     },
   })
@@ -158,45 +188,56 @@ 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 }) {
+    computeTrackStyle({ ticks, _valueAsText, min, max }) {
       return [
         ticks ? `--ticks:${ticks}` : null,
-        `--value:${valueAsFraction(_previewValue, min, max)}`,
+        `--value:${valueAsFraction(_valueAsText, min, max)}`,
       ].filter(Boolean).join(';') || null;
     },
+    _thumbLabelHidden({ _isHoveringThumb, focusedState }) {
+      return (!_isHoveringThumb && !focusedState);
+    },
+    _computedThumbLabel({ thumbLabel, _valueAsText }) {
+      return thumbLabel ?? _valueAsText;
+    },
+  })
+  .html`
+    <div id=track style={computeTrackStyle} aria-hidden=true disabled={disabledState}>
+      <div mdw-if={ticks} id=ticks></div>
+      <div id=track-active></div>
+      <div id=thumb-anchor>
+        <div id=thumb></div>
+        <div id=thumb-label
+          hidden={_thumbLabelHidden}
+          text={_computedThumbLabel}></div>
+      </div>
+    </div>
+  `
+  .recompose(({ refs: { thumb, state, control } }) => {
+    thumb.append(state);
+    control.removeAttribute('aria-labelledby');
   })
   .on({
-    composed({ template, html }) {
-      const { state, label, control } = this.refs;
-      template.append(html`
-        <div id=track style={computeTrackStyle} aria-hidden=true disabled={disabledState}>
-          <div _if={ticks} id=ticks></div>
-          <div id=track-active></div>
-          <div id=thumb-anchor>
-            <div id=thumb>
-              ${state}
-            </div>
-            <div id=thumb-label
-              hidden=${({ _isHoveringThumb, focusedState }) => (!_isHoveringThumb && !focusedState)} 
-              text={_previewValue}></div>
-          </div>
-        </div>
-      `);
-      label.removeAttribute('aria-labelledby');
-    },
     valueChanged(oldValue, newValue) {
-      this._previewValue = newValue;
+      this._valueAsText = newValue;
     },
   })
   .css`
@@ -220,20 +261,6 @@ export default CustomElement
       background-color: transparent;
     }
 
-    #label {
-      position: absolute;
-      inset: 0;
-
-      display: block;
-
-      cursor: pointer;
-
-      z-index: 1;
-
-      /* border-radius: 50%; */
-      color: rgb(var(--mdw-bg));
-    }
-
     #control {
       inset:0;
 
@@ -246,12 +273,11 @@ export default CustomElement
 
       appearance: none;
 
-      cursor: inherit;
+      cursor: pointer;
 
       transform: none;
 
       background-color: transparent;
-      color: inherit;
     }
 
     #control::-webkit-slider-runnable-track {
@@ -311,6 +337,10 @@ export default CustomElement
       border-radius: 50%;
     }
 
+    #control[disabled] {
+      cursor: not-allowed;
+    }
+
     #track {
       --value: 0.5;
       position: absolute;
@@ -323,8 +353,9 @@ export default CustomElement
       pointer-events: none;
       user-select: none;
 
-      background-color: rgb(var(--mdw-color__surface-variant));
+      background-color: rgb(var(--mdw-color__surface-container-highest));
       border-radius: inherit;
+      color: rgb(var(--mdw-bg));
     }
 
     #thumb {
@@ -344,7 +375,7 @@ export default CustomElement
 
       border-radius: 50%;
 
-      color: rgb(var(--mdw-bg));
+      color: currentColor;
     }
 
     #thumb::before {
@@ -358,7 +389,7 @@ export default CustomElement
       background-color: currentColor;
       border-radius: 50%;
 
-      transition: background-color 100ms;
+      transition: color 100ms, background-color 100ms;
     }
 
     /* Inactive ticks */
@@ -370,28 +401,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 */
@@ -411,32 +441,32 @@ export default CustomElement
       inset: 0;
 
       transform: scaleX(var(--value));
-      transform-origin: 0 0;
+      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;
     }
 
     #thumb-anchor {
       position: absolute;
-      inset-inline: 0;
+
+      inset-inline-start: calc(var(--value) * 100%);
 
       display: flex;
       align-items: flex-start;
       flex-direction: column;
 
-      inline-size: 1%;
-
-      transform: translateX(calc(var(--value) * 100 * 100%));
-      transform-origin: 0 0;
       z-index: 24;
 
-      will-change: transform;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      will-change: inset-inline-start, left, right;
     }
 
     #thumb-label {
       position: absolute;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 0;
       inset-block-end: 14px;
 
       display: flex;
@@ -469,21 +499,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: "";
 
@@ -493,19 +526,16 @@ 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));
-    }
-
-    #track[disabled] {
-      background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
+      background-color: currentColor;
     }
 
-    #label[disabled],
     #track[disabled] {
       --mdw-bg: var(--mdw-color__on-surface);
       cursor: not-allowed;
 
       opacity: 0.38;
+
+      background-color: rgb(var(--mdw-color__on-surface), calc(0.12 / 0.38));
     }
   `
   .autoRegister('mdw-slider');

package/components/Snackbar.js

@@ -1,18 +1,23 @@
 // https://w3c.github.io/aria/#status
 
+import CustomElement from '../core/CustomElement.js';
 import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import DensityMixin from '../mixins/DensityMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
 
 import './Button.js';
 import './IconButton.js';
 
-import Surface from './Surface.js';
-
-export default Surface
+export default CustomElement
+  .extend()
+  .mixin(ThemableMixin)
+  .mixin(ShapeMixin)
   .mixin(DensityMixin)
   .mixin(AriaReflectorMixin)
-  .extend()
+  .mixin(ElevationMixin)
   .set({
     _ariaRole: 'status',
     elevated: true,
@@ -46,17 +51,11 @@ export default Surface
       this.textContent = text;
     },
   })
-  .html/* html */`
-    <div id=content></div>
-    <mdw-button _if={action} id=action class=button ink={actionInk} type-style={actionTypeStyle}>{action}</mdw-button>
-    <mdw-icon-button _if={closeButton} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-button>
+  .html`
+    <div id=content><slot id=slot></div>
+    <mdw-button mdw-if={action} id=action class=button ink={actionInk} type-style={actionTypeStyle}>{action}</mdw-button>
+    <mdw-icon-button mdw-if={closeButton} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-button>
   `
-  .on({
-    composed() {
-      const { content, slot } = this.refs;
-      content.append(slot);
-    },
-  })
   .childEvents({
     action: {
       '~click'() {
@@ -75,22 +74,28 @@ export default Surface
 
     :host {
       --mdw-shape__size: var(--mdw-shape__small);
-      --mdw-surface__shadow: var(--mdw-surface__shadow__3);
-      --mdw-surface__tint: var(--mdw-surface__tint__3);
-      --mdw-shape__bg: rgb(var(--mdw-color__inverse-surface));
+      --mdw-bg: var(--mdw-color__inverse-surface);
       --mdw-ink: var(--mdw-color__inverse-on-surface);
-
       --mdw-type__line-height: var(--mdw-typescale__body-medium__line-height);
+
       display: flex;
       align-items: center;
 
-      padding-inline: 16px;
+      grid-area: snackbar;
+
+      padding-inline: 16px; 
 
+      pointer-events: auto;
+
+      filter: var(--mdw-elevation__drop-shadow__3);
       opacity: 0;
       transform: translateY(25%) scaleY(0.25);
       transform-origin: bottom center;
       visibility: hidden; /* Remove from tab order */
-      z-index: 24;
+      z-index: 22;
+
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
 
       font: var(--mdw-typescale__body-medium__font);
       letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
@@ -113,7 +118,7 @@ export default Surface
     :host([open]) {
       opacity: 1;
       transform: scale(1);
-      visibility: visible;
+      visibility: inherit;
     }
 
     #content {

package/components/SnackbarContainer.js

@@ -0,0 +1,42 @@
+import CustomElement from '../core/CustomElement.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+
+export default CustomElement
+  .extend()
+  .mixin(DelegatesFocusMixin)
+  .html`
+    <slot id=slot></slot>
+  `
+  .css`
+    :host {
+      display: grid;
+      align-items: flex-end;
+      grid-template:
+        "snackbar" auto
+        / minmax(auto, 60ch);
+      
+      justify-content: center;
+
+      margin: 16px;
+
+      pointer-events: none;
+
+    }
+
+    @media (min-width: 648px) {
+      :host {
+        grid-template-columns: minmax(auto, 1fr);
+
+        margin: 24px;
+      }
+    }
+
+    @media (min-width: 1248px) {
+      :host {
+        grid-template-columns: minmax(auto, 60ch);
+        justify-content: flex-start;
+      }
+    }
+
+  `
+  .autoRegister('mdw-snackbar-container');

package/components/Surface.js

@@ -1,32 +1,37 @@
 import CustomElement from '../core/CustomElement.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
 import FlexableMixin from '../mixins/FlexableMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(FlexableMixin)
-  .mixin(SurfaceMixin)
+  .mixin(ElevationMixin)
   .mixin(ShapeMixin)
-  .html/* html */`<slot id=slot></slot>`
-  .on({
-    composed() {
-      const { surface, shape, surfaceTint } = this.refs;
-      shape.append(surfaceTint);
-      surface.append(shape);
-    },
-  })
+  .html`<slot id=slot></slot>`
   .css`
     :host {
-      --mdw-shape__bg: rgb(var(--mdw-color__surface));
+      --mdw-bg: var(--mdw-color__surface);
       --mdw-ink: var(--mdw-color__on-surface);
       position: relative;
+
+      filter: var(--mdw-elevation__drop-shadow__0);
     
+      background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     
       font: var(--mdw-type__font);
       letter-spacing: var(--mdw-type__letter-spacing);
-    }  
+
+      transition: filter 200ms;
+    }
+
+    :host(:where([elevation="1"])) { filter: var(--mdw-elevation__drop-shadow__1); }
+    :host(:where([elevation="2"])) { filter: var(--mdw-elevation__drop-shadow__2); }
+    :host(:where([elevation="3"])) { filter: var(--mdw-elevation__drop-shadow__3); }
+    :host(:where([elevation="4"])) { filter: var(--mdw-elevation__drop-shadow__4); }
+    :host(:where([elevation="5"])) { filter: var(--mdw-elevation__drop-shadow__5); }
   `
   .autoRegister('mdw-surface');

package/components/Switch.js

@@ -6,12 +6,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(InputMixin) // Label as root
   .mixin(StateMixin)
   .mixin(TouchTargetMixin)
   // Switches have their own pressed animation (No ripple)
-  .extend()
   .set({
     type: 'checkbox',
     stateLayer: true,
@@ -24,27 +24,23 @@ export default CustomElement
     selectedSrc: 'string',
     unselectedSrc: 'string',
   })
-  .on({
-    composed({ html }) {
-      const { state, label, control, touchTarget } = this.refs;
-      label.append(html`
-        ${touchTarget}
-        <mdw-switch-icon id=switch
-          color={color} ink={ink} selected={checked} hovered={hoveredState} focused={focusedState} pressed={pressedState} disabled={disabledState}
-          icon={icon}
-          selected-icon={selectedIcon}
-          unselected-icon={unselectedIcon}
-          src={src}
-          selected-src={selectedSrc}
-          unselected-src={unselectedSrc}
-          >
-          ${state}
-          ${control}
-        </mdw-switch-icon>
-        <slot id=slot></slot>
-      `);
-      control.setAttribute('role', 'switch');
-    },
+  .html`
+    <mdw-switch-icon id=switch
+      color={color} ink={ink} selected={checked} hovered={hoveredState}
+      focused={focusedState} pressed={pressedState} disabled={disabledState}
+      icon={icon}
+      selected-icon={selectedIcon}
+      unselected-icon={unselectedIcon}
+      src={src}
+      selected-src={selectedSrc}
+      unselected-src={unselectedSrc}
+      >
+    </mdw-switch-icon>
+    <slot id=slot></slot>
+  `
+  .recompose(({ refs: { switch: switchEl, state, control } }) => {
+    switchEl.append(state, control);
+    control.setAttribute('role', 'switch');
   })
   .methods({
     /**
@@ -133,6 +129,11 @@ export default CustomElement
       gap: 12px;
       vertical-align: middle;
 
+      cursor: pointer;
+    }
+
+    #control {
+      cursor: inherit;
     }
 
     #touch-target {
@@ -161,7 +162,10 @@ export default CustomElement
 
     #state {
       position: absolute;
-      inset: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
 
       block-size: 100%;
       min-block-size: 40px;
@@ -175,9 +179,15 @@ export default CustomElement
       border-radius: 50%;
     }
 
+    #state[touched] {
+      /* Pressed state already has an animation */
+      /* stylelint-disable-next-line rule-selector-property-disallowed-list */
+      --mdw-state__pressed-opacity: 0;
+    }
+
     /** Disabled **/
 
-    #label[disabled] {
+    :host(:disabled) {
       --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
       --mdw-bg: var(--mdw-color__surface);
       cursor: not-allowed;
@@ -185,5 +195,16 @@ export default CustomElement
       opacity: 0.38;
     }
 
+    :host([internals-disabled]) {
+      --mdw-ink: var(--mdw-color__on-surface); /* selected icon */
+      --mdw-bg: var(--mdw-color__surface);
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+    #switch[disabled] {
+      opacity: 1;
+    }
   `
   .autoRegister('mdw-switch');