@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/Button.js

@@ -1,31 +1,49 @@
 import './Icon.js';
 import CustomElement from '../core/CustomElement.js';
 import DensityMixin from '../mixins/DensityMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import InputMixin from '../mixins/InputMixin.js';
 import RippleMixin from '../mixins/RippleMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/* https://m3.material.io/components/buttons/specs */
+
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(DensityMixin)
-  .mixin(SurfaceMixin)
-  .mixin(ShapeMixin)
   .mixin(StateMixin)
+  .mixin(ElevationMixin)
+  .mixin(ShapeMixin)
   .mixin(RippleMixin)
   .mixin(InputMixin)
-  .extend()
+  .mixin(HyperlinkMixin)
   .define({
     stateTargetElement() { return this.refs.control; },
   })
   .set({
     stateLayer: true,
-    delegatesFocus: true,
+    _allowedTypes: ['button', 'submit', 'reset', 'file'],
   })
   .observe({
-    type: { empty: 'button' },
+    type: {
+      empty: 'button',
+      /**
+       * @param {string} value
+       * @param {*} internalSet
+       */
+      set(value, internalSet) {
+        const enumeratedValue = value?.toLowerCase() ?? 'button';
+        internalSet(
+          this._allowedTypes.includes(enumeratedValue)
+            ? enumeratedValue
+            : 'button',
+        );
+      },
+    },
     elevated: 'boolean',
     filled: 'string',
     outlined: 'boolean',
@@ -33,35 +51,41 @@ export default CustomElement
     iconInk: 'string',
     src: 'string',
     svg: 'string',
+    viewBox: 'string',
     svgPath: 'string',
   })
   .expressions({
-    hasIcon({ icon, svg, src, svgPath }) {
+    hasIcon({ icon, svg, src, svgPath } = this) {
       return icon ?? svg ?? src ?? svgPath;
     },
+    iconVariation({ outlined } = this) {
+      return outlined ? null : 'filled';
+    },
   })
-  .html/* html */`
-    <mdw-icon _if={hasIcon} id=icon ink={iconInk} disabled={disabledState} outlined={outlined} aria-hidden=true svg={svg} src={src} svg-path={svgPath}>{icon}</mdw-icon>
-    <slot id=slot disabled={disabledState}></slot>
-  `
-  .on({
-    composed() {
-      const {
-        shape, surfaceTint, state, rippleContainer,
-        surface, control, label, slot,
-        icon,
-      } = this.refs;
-      surface.append(shape);
-      shape.append(state, rippleContainer, surfaceTint);
-      label.append(icon, slot);
-
-      shape.setAttribute('filled', '{filled}');
-      control.setAttribute('role', 'button');
+  .methods({
+    /** @type {HTMLElement['focus']} */
+    focus(...options) {
+      if (this.href) {
+        this.refs.anchor.focus(...options);
+      } else {
+        this.refs.control.focus(...options);
+      }
     },
   })
+  .html`
+    <mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabledState}
+      outlined={outlined} variation={iconVariation} aria-hidden=true svg={svg} src={src}
+      svg-path={svgPath} view-box={viewBox} icon={icon}></mdw-icon>
+    <slot id=slot disabled={disabledState} aria-hidden=true>{_defaultValue}</slot>
+  `
+  .recompose(({ refs: { anchor, control } }) => {
+    control.setAttribute('mdw-if', '{!href}');
+    control.setAttribute('role', 'button');
+    anchor.setAttribute('mdw-if', '{href}');
+    anchor.setAttribute('aria-label', '{_computedAriaLabel}');
+    anchor.setAttribute('aria-labelledby', '{_computedAriaLabelledby}');
+  })
   .css`
-    /* https://m3.material.io/components/buttons/specs */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__full);
       --mdw-ink: var(--mdw-color__primary);
@@ -94,27 +118,39 @@ export default CustomElement
     }
 
     :host(:where([elevated],[filled])) {
-      will-change: filter;
+      transition: box-shadow 200ms;
+      will-change: box-shadow;
     }
 
     /** Elevated Color Defaults */
     :host(:where([elevated])) {
-      --mdw-bg: var(--mdw-color__surface);
+      --mdw-bg: var(--mdw-color__surface-container-low);
       --mdw-ink: var(--mdw-color__primary);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-      --mdw-surface__tint: var(--mdw-surface__tint__1);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+      box-shadow: var(--mdw-elevation__box-shadow__1);
     }
     /** Filled Color Defaults */
     :host(:where([filled])) {
       --mdw-bg: var(--mdw-color__primary);
       --mdw-ink: var(--mdw-color__on-primary);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
-      --mdw-surface__tint: 0;
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
+      box-shadow: var(--mdw-elevation__box-shadow__0);
     }
+
+    :host(:where([elevated]:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__2);
+    }
+
+    :host(:where([filled]:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__1);
+    }
+
+    :host(:where([elevated]:disabled)) {
+      box-shadow: var(--mdw-elevation__box-shadow__0);
+    }
+
+    :host(:where([filled]:disabled)) {
+      box-shadow: var(--mdw-elevation__box-shadow__0);
+    }
+
     /** Filled Tonal Color Defaults */
     :host(:where([filled="tonal"])) {
       --mdw-bg: var(--mdw-color__secondary-container);
@@ -141,7 +177,7 @@ export default CustomElement
       padding-inline: calc(16px + (var(--mdw-density) * 2px)) calc(24px + (var(--mdw-density) * 2px));
     }
 
-    #shape:where([elevated],[filled],[color]) {
+    :host(:where([elevated],[filled],[color])) {
       background-color: rgb(var(--mdw-bg));
     }
 
@@ -152,7 +188,15 @@ export default CustomElement
     }
 
     #control {
-      cursor: inherit;
+      cursor: pointer;
+    }
+
+    #anchor {
+      position: absolute;
+      inset: 0;
+
+      cursor: pointer;
+      outline: none;
     }
 
     :host([disabled]) {
@@ -161,7 +205,7 @@ export default CustomElement
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
 
-    #shape[disabled]:is([elevated], [filled]) {
+    :host([disabled]:is([elevated], [filled])) {
       background-color: rgba(var(--mdw-color__on-surface), 0.12);
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
@@ -172,11 +216,6 @@ export default CustomElement
 
     #icon {
       font-size: calc(18/14 * 1em);
-      font-variation-settings: 'FILL' 1;
-    }
-
-    #icon[outlined] {
-      font-variation-settings: 'FILL' 0;
     }
 
     #icon[disabled] {
@@ -185,47 +224,14 @@ export default CustomElement
       color: rgba(var(--mdw-color__on-surface));
     }
 
-    #label {
-      cursor: pointer;
-    }
-
-    #label[disabled] {
+    #control[form-disabled] {
       cursor: not-allowed;
     }
 
     @media (any-pointer: coarse) {
       #touch-target {
-        visibility: visible;
+        visibility: inherit;
       }
     }
   `
-  .childEvents({
-    control: {
-      /**
-       * Duplicates button for form submission
-       * @see https://github.com/WICG/webcomponents/issues/814
-       * @param {{currentTarget:HTMLInputElement}} event
-       * @type {any}
-       */
-      '~click'({ currentTarget }) {
-        if (currentTarget.disabled) return;
-        if (currentTarget.type !== 'submit') return;
-        if (this.disabled) return;
-        const { value } = currentTarget;
-        const form = this.elementInternals?.form;
-        if (!form) return;
-        this.elementInternals.setFormValue(value);
-        if ((currentTarget.type ?? 'submit') !== 'submit') return;
-        const duplicatedButton = /** @type {HTMLInputElement} */ (currentTarget.cloneNode());
-        duplicatedButton.hidden = true;
-        form.append(duplicatedButton);
-        if ('requestSubmit' in form) {
-          form.requestSubmit(duplicatedButton);
-        } else {
-          duplicatedButton.click();
-        }
-        duplicatedButton.remove();
-      },
-    },
-  })
   .autoRegister('mdw-button');

package/components/Button.md

@@ -41,17 +41,17 @@
 
 ## Custom
 ```html
-  <mdw-button class=mdw-custom ink=yellow>Custom text</mdw-button>
-  <mdw-button class=mdw-custom elevated ink=yellow>Custom elevated</mdw-button>
-  <mdw-button class=mdw-custom filled color=yellow>Custom filled</mdw-button>
-  <mdw-button class=mdw-custom filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
-  <mdw-button class=mdw-custom outlined ink=yellow>Custom outlined</mdw-button>
+  <mdw-button ink=yellow>Custom text</mdw-button>
+  <mdw-button elevated ink=yellow>Custom elevated</mdw-button>
+  <mdw-button filled color=yellow>Custom filled</mdw-button>
+  <mdw-button filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
+  <mdw-button outlined ink=yellow>Custom outlined</mdw-button>
   <mdw-button disabled outlined>Outlined (Disabled)</mdw-button>
   <mdw-button disabled outlined icon=add>Outlined icon (Disabled)</mdw-button>
-  <mdw-button disabled class=mdw-custom ink=yellow>Custom text</mdw-button>
-  <mdw-button disabled class=mdw-custom elevated=yellow>Custom elevated</mdw-button>
-  <mdw-button disabled filled class=mdw-custom color=yellow>Custom filled</mdw-button>
-  <mdw-button disabled filled=tonal class=mdw-custom icon=add color=yellow-container>Custom tonal</mdw-button>
+  <mdw-button disabled ink=yellow>Custom text</mdw-button>
+  <mdw-button disabled elevated=yellow>Custom elevated</mdw-button>
+  <mdw-button disabled filled color=yellow>Custom filled</mdw-button>
+  <mdw-button disabled filled=tonal icon=add color=yellow-container>Custom tonal</mdw-button>
 ```
 
 ```js

package/components/Card.js

@@ -1,31 +1,32 @@
-import CustomElement from '../core/CustomElement.js';
 import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
-import FlexableMixin from '../mixins/FlexableMixin.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import ElevationMixin from '../mixins/ElevationMixin.js';
 import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
-import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import Box from './Box.js';
+
+/* https://m3.material.io/components/cards/specs */
 
 const SUPPORTS_INERT = 'inert' in HTMLElement.prototype;
 
-export default CustomElement
-  .mixin(ThemableMixin)
-  .mixin(FlexableMixin)
-  .mixin(SurfaceMixin)
+export default Box
+  .extend()
+  .mixin(StateMixin)
+  .mixin(ElevationMixin)
   .mixin(ShapeMixin)
   .mixin(FormAssociatedMixin) // Tap into FormAssociated for disabledState
-  .mixin(StateMixin)
   .mixin(AriaReflectorMixin)
-  .extend()
-  .setStatic({
-    delegatesFocus: true,
-  })
+  .mixin(DelegatesFocusMixin)
+  .mixin(HyperlinkMixin)
   .set({
     _ariaRole: 'figure',
   })
   .observe({
+    elevated: 'boolean',
     filled: 'boolean',
     actionable: 'boolean',
     actionLabel: 'string',
@@ -35,7 +36,8 @@ export default CustomElement
     stateTargetElement() { return this.actionable ? this.refs.action : this; },
   })
   .expressions({
-    showBlocker: ({ disabledState }) => !SUPPORTS_INERT && disabledState,
+    showBlocker: ({ disabledState, disabled }) => disabledState && (!disabled || !SUPPORTS_INERT),
+    showButton: ({ actionable, href }) => Boolean(actionable || href),
   })
   .methods({
     focus() {
@@ -43,75 +45,63 @@ export default CustomElement
       if (this.actionable) this.refs.action.focus();
     },
   })
-  .html/* html */`
-    <mdw-button _if={actionable} aria-label={actionLabel} id=action disabled={disabledState}></mdw-button>
-    <div _if={showBlocker} id=inert-blocker></div>
-    <slot id=slot disabled={disabledState}></slot>
+  .html`
+    <mdw-button mdw-if={showButton} aria-label={actionLabel} href={href}
+      target={target}
+      download={download}
+      ping={ping}
+      rel={rel}
+      hreflang={hreflang}
+      referrerpolicy={referrerPolicy} id=action disabled={disabledState}></mdw-button>
+    <div mdw-if={showBlocker} id=inert-blocker></div>
   `
+  .recompose(({ refs: { anchor, inertBlocker, slot } }) => {
+    anchor.remove();
+    slot.setAttribute('disabled', '{disabledState}');
+    inertBlocker.before(slot);
+  })
   .css`
-    /* https://m3.material.io/components/cards/specs */
-
     :host {
-      --mdw-shape__size: 12px;
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint);
+      --mdw-shape__size: var(--mdw-shape__medium);
 
-      --mdw-surface__shadow__resting: none;
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
       /* padding-inline: 12px; */
 
       --mdw-bg: var(--mdw-color__surface);
       --mdw-ink: var(--mdw-color__on-surface);
       position: relative;
 
-      display: block;
-
-      color: rgb(var(--mdw-ink));
-
       font: var(--mdw-type__font);
       letter-spacing: var(--mdw-type__letter-spacing);
-    }
 
-    #shape:where([elevated],[filled],[color]) {
-      background-color: rgb(var(--mdw-bg));
+      transition: filter 200ms;
+      will-change: filter;
     }
 
-    :host(:where([filled])) {
-      --mdw-bg: var(--mdw-color__surface-variant);
-      --mdw-ink: var(--mdw-color__on-surface-variant);
+    :host(:where([elevated],[filled],[outlined])) {
+      background-color: rgb(var(--mdw-bg));
     }
 
     :host(:where([elevated])) {
-      --mdw-bg: var(--mdw-color__surface);
+      --mdw-bg: var(--mdw-color__surface-container-low);
       --mdw-ink: var(--mdw-color__on-surface);
+      filter: var(--mdw-elevation__drop-shadow__1);
     }
 
-    :host([filled]) {
-      --mdw-surface__tint: var(--mdw-surface__tint__0);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__0);
+    :host(:where([filled])) {
+      --mdw-bg: var(--mdw-color__surface-container-highest);
+      --mdw-ink: var(--mdw-color__on-surface-variant);
     }
 
-    :host([filled][actionable]) {
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__1);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__1);
+    :host(:where([filled][actionable])) {
+      filter: var(--mdw-elevation__drop-shadow__0);
     }
 
-    :host([elevated]) {
-      --mdw-surface__tint: var(--mdw-surface__tint__1);
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
+    :host(:where([elevated][actionable]:hover:not(:active))) {
+      filter: var(--mdw-elevation__drop-shadow__2);
     }
 
-    :host([elevated][actionable]) {
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
-    }
-
-    #shape[disabled] {
-
-      /* Works on images */
-      filter: grayscale();
-
-      color: rgb(var(--mdw-color__on-surface));
+    :host(:where([filled][actionable]:hover:not(:active))) {
+      filter: var(--mdw-elevation__drop-shadow__1);
     }
 
     :host([disabled]) {
@@ -119,6 +109,8 @@ export default CustomElement
 
       filter: grayscale();
       opacity: 0.38;
+
+      color: rgb(var(--mdw-color__on-surface));
     }
 
     #slot[disabled] {
@@ -141,8 +133,12 @@ export default CustomElement
       z-index: 99;
     }
 
-    #shape[disabled][elevated] {
-      background-color: rgba(var(--mdw-color__surface-variant));
+    :host([disabled][elevated]) {
+      background-color: rgba(var(--mdw-color__surface-container-highest));
+    }
+
+    :host([disabled][filled]) {
+      background-color: rgba(var(--mdw-color__surface));
     }
 
     #action {
@@ -159,20 +155,12 @@ export default CustomElement
       color: inherit
     }
   `
-  .on({
-    composed() {
-      const { slot, surface, surfaceTint, shape, outline } = this.refs;
-      shape.append(surfaceTint);
-      surface.append(shape);
-      outline.removeAttribute('pressed');
-      outline.removeAttribute('focused');
-
-      shape.setAttribute('filled', '{filled}');
-      slot.setAttribute('inert', '{disabledState}');
-      slot.setAttribute('disabled', '{disabledState}');
-      // shape.setAttribute('disabled', '{disabledState}');
-      // shape.setAttribute('filled', '{filled}');
-    },
+  .recompose(({ refs: { slot, outline } }) => {
+    outline.removeAttribute('pressed');
+    outline.removeAttribute('focused');
+
+    slot.setAttribute('inert', '{disabledState}');
+    slot.setAttribute('disabled', '{disabledState}');
   })
   .childEvents({
     action: {

package/components/Checkbox.js

@@ -8,12 +8,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import TouchTargetMixin from '../mixins/TouchTargetMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(InputMixin)
   .mixin(TouchTargetMixin)
-  .extend()
   .set({
     stateLayer: true,
     type: 'checkbox',
@@ -21,16 +21,25 @@ export default CustomElement
   .observe({
     icon: { value: 'check' },
     indeterminateIcon: { value: 'check_indeterminate_small' },
-    /** Reflected property */
-    indeterminate: 'boolean',
   })
-  .observe({
-    _ariaChecked({ indeterminate, checked }) {
-      return (indeterminate ? 'mixed' : `${!!checked}`);
-    },
+  .expressions({
     _determinateIcon({ indeterminate, indeterminateIcon, icon }) {
       return (indeterminate ? indeterminateIcon : icon);
     },
+    _iconSelectedState({ checked, indeterminate }) {
+      return checked || indeterminate;
+    },
+  })
+  .html`
+    <div id=checkbox errored={erroredState} selected={checked}>
+      <mdw-checkbox-icon id=icon errored={erroredState} disabled={disabledState}
+        icon={_determinateIcon} selected={_iconSelectedState}>
+      </mdw-checkbox-icon>
+    </div>
+    <slot id=slot></slot>
+  `
+  .recompose(({ refs: { checkbox, state, rippleContainer } }) => {
+    checkbox.append(state, rippleContainer);
   })
   .css`
     /* https://m3.material.io/components/checkbox/specs */
@@ -50,7 +59,15 @@ export default CustomElement
       transition: none 100ms cubic-bezier(0.4, 0.0, 1, 1);
     }
 
-    :host([disabled]) {
+    :host(:disabled) {
+      cursor: not-allowed;
+
+      opacity: 0.38;
+    }
+
+    :host([internals-disabled]) {
+      cursor: not-allowed;
+
       opacity: 0.38;
     }
 
@@ -60,28 +77,18 @@ export default CustomElement
       line-height: 18px;
     }
 
-    :host(:empty) #checkbox {
-      transform: none;
-    }
-
     #control {
       grid-column: 1/1;
 
       cursor: inherit;
     }
 
-    #label {
-      cursor: inherit;
-    }
-
-    #label[disabled] {
-      cursor: not-allowed;
-    }
-
     #state,
     #ripple-container {
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
 
       block-size: 40px;
       inline-size: 40px;
@@ -117,30 +124,14 @@ export default CustomElement
       color: rgb(var(--mdw-color__error));
     }
 
+    :host(:empty) #checkbox {
+      transform: none;
+    }
+
     #icon {
       --mdw-ink: inherit;
       --mdw-bg: inherit;
       --disabled-opacity: 1;
     }
   `
-  .on({
-    composed({ html }) {
-      const { label, control, state, rippleContainer, touchTarget } = this.refs;
-      label.append(html`
-        ${touchTarget}
-        ${control}
-        <div id=checkbox errored={erroredState} selected={checked}>
-          <mdw-checkbox-icon id=icon errored={erroredState} disabled={disabledState}
-            icon={_determinateIcon} selected={checked}>
-          </mdw-checkbox-icon>
-          ${state}
-          ${rippleContainer}
-        </div>
-        <slot id=slot></slot>
-      `);
-
-      // Indeterminate must be manually expressed for ARIA
-      control.setAttribute('aria-checked', '{_ariaChecked}');
-    },
-  })
   .autoRegister('mdw-checkbox');