@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/Snackbar.js

@@ -1,34 +1,58 @@
 // 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
+/**
+ * Snackbars provide brief messages about app processes and optional actions.
+ * @see https://m3.material.io/components/snackbar/specs
+ */
+export default CustomElement
   .extend()
+  .mixin(ThemableMixin)
+  .mixin(ShapeMixin)
   .mixin(DensityMixin)
   .mixin(AriaReflectorMixin)
+  .mixin(ElevationMixin)
   .set({
     _ariaRole: 'status',
     elevated: true,
   })
   .observe({
+    /** Whether the snackbar is visible. */
     open: 'boolean',
+    /** When true the snackbar does not auto-dismiss. */
     persistent: 'boolean',
+    /** Optional action label to display as a button. */
     action: 'string',
+    /** Ink token used for the action button (defaults to inverse-primary). */
     actionInk: { empty: 'inverse-primary' },
+    /** Typographic style used for the action (e.g. 'label-large'). */
     actionTypeStyle: { empty: 'label-large' },
+    /** Render a close icon button when true. */
     closeButton: 'boolean',
+    /** Icon name used for the close button. */
     closeIcon: { empty: 'close' },
+    /** Ink token used for the close icon. */
     closeInk: { empty: 'inherit' },
+    /** Event handler invoked when the action is triggered. */
     onaction: EVENT_HANDLER_TYPE,
+    /** Event handler invoked when the snackbar toggles open/closed. */
+    ontoggle: EVENT_HANDLER_TYPE,
   })
   .methods({
+    /**
+     * Close the snackbar. Dispatches a cancelable `close` event; if not
+     * prevented the snackbar will hide and await the closing transition.
+     */
     async close() {
       if (!this.dispatchEvent(new Event('close', { cancelable: true }))) return;
       if (!this.open) return;
@@ -38,25 +62,23 @@ export default Surface
         this.addEventListener('transitionend', resolve, { once: true });
       });
     },
+    /** Show the snackbar (set `open` true). */
     show() {
       this.open = true;
     },
-    /** @param {string} text */
+    /**
+     * Update the snackbar text content.
+     * @param {string} text
+     */
     update(text) {
       this.textContent = text;
     },
   })
   .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>
+    <mdw-icon-button mdw-if={closeButton} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-icon-button>
   `
-  .on({
-    composed() {
-      const { content, slot } = this.refs;
-      content.append(slot);
-    },
-  })
   .childEvents({
     action: {
       '~click'() {
@@ -70,26 +92,36 @@ export default Surface
       },
     },
   })
+  .on({
+    openChanged() {
+      this.dispatchEvent(new Event('toggle'));
+    },
+  })
   .css`
-    /* https://m3.material.io/components/snackbar/specs */
-
     :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 +144,7 @@ export default Surface
     :host([open]) {
       opacity: 1;
       transform: scale(1);
-      visibility: visible;
+      visibility: inherit;
     }
 
     #content {

package/components/SnackbarContainer.js

@@ -0,0 +1,51 @@
+import CustomElement from '../core/CustomElement.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+
+/**
+ * Snackbar container positions snackbars within the app window and manages
+ * layout and pointer-events for stacked snackbars.
+ * @see https://m3.material.io/components/snackbar/specs
+ */
+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;
+      }
+    }
+
+    #slot {
+      pointer-events: auto;
+    }
+
+  `
+  .autoRegister('mdw-snackbar-container');

package/components/Surface.js

@@ -1,32 +1,42 @@
 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';
 
+/**
+ * Surface represents a themed elevated surface used to display content with
+ * elevation, shape, and color tokens applied.
+ * @see https://m3.material.io/styles/elevation/overview
+ */
 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

@@ -5,6 +5,10 @@ import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
+/**
+ * Switch is a binary control that toggles between on and off states.
+ * @see https://m3.material.io/components/switch/specs
+ */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
@@ -13,15 +17,23 @@ export default CustomElement
   .mixin(TouchTargetMixin)
   // Switches have their own pressed animation (No ripple)
   .set({
+    /** The control `type` used for the underlying input element (always 'checkbox'). */
     type: 'checkbox',
+    /** Enables the state-layer visual treatment for pressed/hover states. */
     stateLayer: true,
   })
   .observe({
+    /** The icon name to show inside the thumb when provided. */
     icon: 'string',
+    /** The icon name to show when the switch is selected/on. */
     selectedIcon: 'string',
+    /** The icon name to show when the switch is unselected/off. */
     unselectedIcon: 'string',
+    /** The image `src` to show inside the thumb when provided. */
     src: 'string',
+    /** The image `src` to show when the switch is selected/on. */
     selectedSrc: 'string',
+    /** The image `src` to show when the switch is unselected/off. */
     unselectedSrc: 'string',
   })
   .html`
@@ -38,25 +50,14 @@ 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({
     /**
+     * Handle pointer/touch input on the native control to compute dragging
+     * position and update the thumb drag state.
      * @param {(MouseEvent|TouchEvent) & {currentTarget:HTMLInputElement}} event
      * @return {void}
      */
@@ -110,12 +111,14 @@ export default CustomElement
 
       // this._isHoveringThumb = true;
 
-      let currentValue = this.refs.switch.dragValue;
+      const switchIcon = /** @type {InstanceType<import('./SwitchIcon.js').default>} */ (this.refs.switch);
+
+      let currentValue = switchIcon.dragValue;
       if (currentValue == null) {
         currentValue = this.checked ? 1 : 0;
       }
       const pixels = offsetX - (clientWidth / 2);
-      const currentPixels = this.refs.switch.clientWidth - (this.refs.switch.clientHeight);
+      const currentPixels = switchIcon.clientWidth - (switchIcon.clientHeight);
       // console.log(pixels, currentPixels, currentPixels * currentValue, pixels / currentPixels);
       const newRatio = pixels / currentPixels;
       const newValue = Math.max(Math.min(currentValue + newRatio, 1), 0);

package/components/SwitchIcon.js

@@ -3,43 +3,67 @@ 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();
+
+/**
+ * Visual helper that renders the switch thumb and related visual states.
+ * @see https://m3.material.io/components/switch/specs
+ */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
   .observe({
+    /** Whether the switch is selected/on. */
     selected: 'boolean',
+    /** Named icon to render inside the thumb. */
     icon: 'string',
+    /** Whether the control is visually in an errored state. */
     errored: 'boolean',
+    /** Whether the control is disabled. */
     disabled: 'boolean',
+    /** Icon name to show when selected/on. */
     selectedIcon: 'string',
+    /** Icon name to show when unselected/off. */
     unselectedIcon: 'string',
+    /** Image `src` to render inside the thumb. */
     src: 'string',
+    /** Image `src` to render when selected/on. */
     selectedSrc: 'string',
+    /** Image `src` to render when unselected/off. */
     unselectedSrc: 'string',
+    /** Hover state for the thumb. */
     hovered: 'boolean',
+    /** Pressed state for the thumb. */
     pressed: 'boolean',
+    /** Focused state for the thumb. */
     focused: 'boolean',
+    /** Temporary drag position value (0..1) while the thumb is being dragged. */
     dragValue: 'float',
+    /** Color token to use for the thumb (defaults to primary). */
     color: { empty: 'primary' },
   })
   .observe({
-    /** Alias for Selected (QoL) */
+    /** Alias for `selected` to match common control naming. */
     checked: {
       type: 'boolean',
       get({ selected }) { return selected; },
       /** @param {boolean} value */
       set(value) { this.selected = value; },
     },
+    /** Whether the thumb is in an active interactive state (not disabled). */
     _active({ disabled, pressed, focused, hovered }) {
       return !disabled && (pressed || focused || hovered);
     },
   })
   .observe({
+    /** Thumb fill token (e.g. "primary-container") when active. */
     _thumbColor({ color, _active }) {
       return _active ? `${color}-container` : '';
     },
+    /** Ink token used for icons inside the thumb based on state. */
     _iconInk({ disabled, selected, color }) {
       if (!selected) return 'surface-container-highest';
       if (disabled) return 'on-surface';
@@ -50,28 +74,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 +141,7 @@ export default CustomElement
       inset: 0;
 
       background-color: rgb(var(--mdw-color__surface-container-highest));
+      border-radius: inherit;
     }
 
     #track[selected] {
@@ -123,19 +149,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 +169,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 +190,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 +223,8 @@ export default CustomElement
 
       transform: scale(calc(16/28));
       z-index: 0;
+
+      border-radius:inherit;
     }
 
     #thumb-shape[icon] {
@@ -221,6 +248,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 +274,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 +289,6 @@ export default CustomElement
       opacity: 1;
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
-    }
-
     #thumb[disabled] {
       color: rgb(var(--mdw-color__on-surface));
     }