@shortfuse/materialdesignweb 0.8.0 → 0.9.0

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
@@ -40,8 +43,11 @@ export default CustomElement
   })
   .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',
@@ -120,7 +126,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;
       }
 
@@ -138,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;
     },
 
@@ -149,12 +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;
       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 +188,36 @@ 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}>
@@ -196,18 +227,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 +337,10 @@ export default CustomElement
       border-radius: 50%;
     }
 
+    #control[disabled] {
+      cursor: not-allowed;
+    }
+
     #track {
       --value: 0.5;
       position: absolute;
@@ -321,6 +355,7 @@ export default CustomElement
 
       background-color: rgb(var(--mdw-color__surface-container-highest));
       border-radius: inherit;
+      color: rgb(var(--mdw-bg));
     }
 
     #thumb {
@@ -340,7 +375,7 @@ export default CustomElement
 
       border-radius: 50%;
 
-      color: rgb(var(--mdw-bg));
+      color: currentColor;
     }
 
     #thumb::before {
@@ -354,7 +389,7 @@ export default CustomElement
       background-color: currentColor;
       border-radius: 50%;
 
-      transition: background-color 100ms;
+      transition: color 100ms, background-color 100ms;
     }
 
     /* Inactive ticks */
@@ -366,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 */
@@ -409,7 +443,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 +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: "";
 
@@ -489,7 +526,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] {

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)
+  .mixin(ElevationMixin)
   .set({
     _ariaRole: 'status',
     elevated: true,
@@ -47,16 +52,10 @@ export default Surface
     },
   })
   .html`
-    <div id=content></div>
+    <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,21 +74,28 @@ export default Surface
 
     :host {
       --mdw-shape__size: var(--mdw-shape__small);
-      --mdw-surface__shadow: var(--mdw-surface__shadow__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);
@@ -112,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`<slot id=slot></slot>`
-  .on({
-    composed() {
-      const { surface, shape } = this.refs;
-      surface.append(shape);
-    },
-  })
   .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

@@ -38,22 +38,9 @@ export default CustomElement
     </mdw-switch-icon>
     <slot id=slot></slot>
   `
-  .rootEvents({
-    click(event) {
-      const { control } = this.refs;
-      if (event.target !== control) {
-        // Label-like click
-        event.stopPropagation();
-        control.click();
-      }
-    },
-  })
-  .on({
-    composed() {
-      const { switch: switchEl, state, control } = this.refs;
-      switchEl.append(state, control);
-      control.setAttribute('role', 'switch');
-    },
+  .recompose(({ refs: { switch: switchEl, state, control } }) => {
+    switchEl.append(state, control);
+    control.setAttribute('role', 'switch');
   })
   .methods({
     /**

package/components/SwitchIcon.js

@@ -3,6 +3,9 @@ import './Shape.js';
 import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
+import { loadGlobalStyles } from '../services/rtl.js';
+
+loadGlobalStyles();
 
 export default CustomElement
   .extend()
@@ -50,28 +53,29 @@ export default CustomElement
     hasIcon({ icon, src, unselectedIcon, unselectedSrc }) {
       return Boolean(icon || src || unselectedIcon || unselectedSrc);
     },
+    iconVariation({ selected }) {
+      return selected ? 'filled' : null;
+    },
   })
   .html`
-    <div id=thumb selected={checked} pressed={pressed} disabled={disabled}>
-      <mdw-shape id=thumb-shape shape-style=full selected={checked} pressed={pressed} hovered={hovered} focused={focused} icon={hasIcon}
-       color={_thumbColor} active={_active} ink={_thumbInk} disabled={disabled}></mdw-shape>
-      <mdw-icon ink={_iconInk} class=icon id=icon src={src} selected={checked}>{icon}</mdw-icon>
-      <mdw-icon ink={_iconInk} class=icon id=selected-icon src={selectedIconSrc} selected={checked}>{selectedIcon}</mdw-icon>
-      <mdw-icon ink={_iconInk} class=icon id=unselected-icon src={unselectedIconSrc} selected={checked}>{unselectedIcon}</mdw-icon>
-      <slot id=slot selected={checked}></slot>
+    <div id=track selected={checked} disabled={disabled}>
+      <div id=thumb selected={checked} pressed={pressed} disabled={disabled}>
+        <mdw-box block id=thumb-shape selected={checked} pressed={pressed} hovered={hovered} focused={focused} icon={hasIcon}
+        color={_thumbColor} active={_active} ink={_thumbInk} disabled={disabled}></mdw-box>
+        <mdw-icon ink={_iconInk} class=icon id=icon src={src} selected={checked} icon={icon} variation={iconVariation}></mdw-icon>
+        <mdw-icon ink={_iconInk} class=icon id=selected-icon src={selectedIconSrc} selected={checked} icon={selectedIcon} variation=filled></mdw-icon>
+        <mdw-icon ink={_iconInk} class=icon id=unselected-icon src={unselectedIconSrc} selected={checked} icon={unselectedIcon}></mdw-icon>
+        <slot id=slot selected={checked}></slot>
+      </div>
     </div>
   `
+  .recompose(({ refs: { outline } }) => {
+    outline.removeAttribute('mdw-if');
+    outline.setAttribute('selected', '{checked}');
+    outline.setAttribute('errored', '{errored}');
+    outline.setAttribute('disabled', '{disabled}');
+  })
   .on({
-    composed() {
-      const { outline, shape: track } = this.refs;
-      track.id = 'track';
-      track.setAttribute('selected', '{checked}');
-      track.setAttribute('disabled', '{disabled}');
-      outline.removeAttribute('mdw-if');
-      outline.setAttribute('selected', '{checked}');
-      outline.setAttribute('errored', '{errored}');
-      outline.setAttribute('disabled', '{disabled}');
-    },
     dragValueChanged(oldValue, newValue) {
       if (newValue == null) {
         this.refs.thumb.style.removeProperty('--mdw-switch__value');
@@ -116,6 +120,7 @@ export default CustomElement
       inset: 0;
 
       background-color: rgb(var(--mdw-color__surface-container-highest));
+      border-radius: inherit;
     }
 
     #track[selected] {
@@ -123,19 +128,17 @@ export default CustomElement
     }
 
     #track[disabled] {
-      opacity: calc(0.12/0.38);
+      background-color: rgba(var(--mdw-color__surface-container-highest), calc(0.12/0.38));
     }
 
     #track[disabled][selected] {
-      background-color: rgb(var(--mdw-color__on-surface));
+      background-color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
     }
 
     #outline {
-      filter:
-        drop-shadow(1px 0px 0px currentColor)
-        drop-shadow(0px 1px 0px currentColor)
-        drop-shadow(-1px 0px 0px currentColor)
-        drop-shadow(0px -1px 0px currentColor);
+      border-width: 2px;
+
+      z-index: 1;
 
       color: rgb(var(--mdw-color__outline));
     }
@@ -145,7 +148,7 @@ export default CustomElement
     }
 
     #outline[disabled] {
-      color: rgb(var(--mdw-color__on-surface));
+      color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
     }
 
     #outline[selected] {
@@ -166,6 +169,7 @@ export default CustomElement
 
       transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (52px - 100%)));
 
+      border-radius: inherit;
       aspect-ratio: 1/1;
     }
 
@@ -198,6 +202,8 @@ export default CustomElement
 
       transform: scale(calc(16/28));
       z-index: 0;
+
+      border-radius:inherit;
     }
 
     #thumb-shape[icon] {
@@ -221,6 +227,14 @@ export default CustomElement
       transform: scale(1);
     }
 
+    #thumb-shape[disabled] {
+      background-color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #thumb-shape[disabled][selected] {
+      background-color: rgb(var(--mdw-color__surface));
+    }
+
     /** Thumb Icons **/
 
     .icon {
@@ -239,13 +253,11 @@ export default CustomElement
     }
 
     .icon:not([src]):empty {
-      display: none;
+      /* display: none; */
     }
 
     #icon, #unselected-icon {
       opacity: 1;
-
-      font-variation-settings: 'FILL' 0;
     }
 
     #unselected-icon[selected] {
@@ -256,10 +268,6 @@ export default CustomElement
       opacity: 1;
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
-    }
-
     #thumb[disabled] {
       color: rgb(var(--mdw-color__on-surface));
     }