@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/Chip.js

@@ -1,13 +1,21 @@
 import Button from './Button.js';
 
+/**
+ * Chips help people enter information, make selections, filter content, or trigger actions.
+ * @see https://m3.material.io/components/chips/specs
+ */
 export default Button
   .extend()
   .observe({
+    /** When true, renders the chip as a suggestion variant. */
     suggestion: 'boolean',
   })
+  .expressions({
+    iconVariation({ elevated }) {
+      return elevated ? 'filled' : null;
+    },
+  })
   .css`
-    /* https://m3.material.io/components/chips/specs */
-
     :host {
       --mdw-shape__size: 8px;
       --mdw-ink: var(--mdw-color__on-surface);
@@ -43,16 +51,13 @@ export default Button
     }
 
   `
-  .on({
-    composed({ inline }) {
-      const { slot, outline, icon } = this.refs;
-      slot.setAttribute('disabled', '{disabledState}');
-      slot.removeAttribute('ink');
-      slot.removeAttribute('color');
-      outline.setAttribute('mdw-if', '{!elevated}');
-      outline.setAttribute('ink', '{ink}');
-      outline.setAttribute('color', '{color}');
-      icon.setAttribute('ink', inline(({ ink, iconInk }) => iconInk ?? ink ?? 'primary'));
-    },
+  .recompose(({ inline, refs: { slot, outline, icon } }) => {
+    slot.setAttribute('disabled', '{disabledState}');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
+    outline.setAttribute('mdw-if', '{!elevated}');
+    outline.setAttribute('ink', '{ink}');
+    outline.setAttribute('color', '{color}');
+    icon.setAttribute('ink', inline(({ ink, iconInk }) => iconInk ?? ink ?? 'primary'));
   })
   .autoRegister('mdw-chip');

package/components/Dialog.js

@@ -7,7 +7,6 @@ import CustomElement from '../core/CustomElement.js';
 import { attemptFocus } from '../core/dom.js';
 import PopupMixin from '../mixins/PopupMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
-import SurfaceMixin from '../mixins/SurfaceMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 /**
@@ -18,12 +17,12 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 function listTabbables(root) {
   const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
   const focusables = [];
-  /** @type {Element} */
+  /** @type {HTMLElement} */
   let node;
-  while ((node = treeWalker.nextNode())) {
+  while ((node = /** @type {HTMLElement} */ (treeWalker.nextNode()))) {
     if (node.tagName === 'SLOT') {
       for (const el of (/** @type {HTMLSlotElement} */ (node)).assignedElements()) {
-        if (el.tabIndex >= 0 && !el.matches(':disabled')) {
+        if ((/** @type {HTMLElement} */ (el)).tabIndex >= 0 && !el.matches(':disabled')) {
           focusables.push(el);
         }
         focusables.push(...listTabbables(el));
@@ -49,7 +48,7 @@ function focusOnTree(root, autofocus, forward = true) {
   const focusables = [];
   /** @type {Element} */
   let node;
-  while ((node = treeWalker.nextNode())) {
+  while ((node = /** @type {Element} */ (treeWalker.nextNode()))) {
     if (autofocus && node.hasAttribute('autofocus')) {
       if (attemptFocus(node)) return true;
       continue;
@@ -60,20 +59,26 @@ function focusOnTree(root, autofocus, forward = true) {
           if (attemptFocus(el)) return true;
           continue;
         }
+        // @ts-ignore Valid as long tabIndex isn't negative
         if (el.tabIndex >= 0) {
           // Can focus, add to later in case we find an autofocusable
           if (autofocus || !forward) {
             focusables.push(node);
-          } else if (attemptFocus(node)) return true;
+          } else if (attemptFocus(node)) {
+            return true;
+          }
         }
         if (focusOnTree(el, autofocus, forward)) return true;
       }
       // Step through
     }
+    // @ts-ignore Valid as long tabIndex isn't negative
     if (node.tabIndex >= 0) {
       if (autofocus || !forward) {
         focusables.push(node);
-      } else if (attemptFocus(node)) return true;
+      } else if (attemptFocus(node)) {
+        return true;
+      }
     }
   }
   for (const el of forward ? focusables : focusables.reverse()) {
@@ -82,36 +87,49 @@ function focusOnTree(root, autofocus, forward = true) {
   return false;
 }
 
+/**
+ * Dialogs provide important prompts in a user flow.
+ * @see https://m3.material.io/components/dialogs/specs
+ */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(SurfaceMixin)
   .mixin(ShapeMixin)
   .mixin(PopupMixin)
   .define({
+    /** Return the `returnValue` from the internal dialog element. */
     returnValue() {
       return /** @type {HTMLDialogElement} */ (this.refs.dialog).returnValue;
     },
   })
   .observe({
+    /** Divider style for the dialog: 'full', 'inset', or empty. */
     dividers: {
       /** @type {'full'|''|'inset'} */
       value: null,
     },
+    /** Headline text displayed in the dialog header. */
     headline: 'string',
+    /** Optional icon name shown in the dialog header. */
     icon: 'string',
+    /** Default action (value) for the dialog when submitting. */
     default: { value: 'confirm' },
+    /** Label for the cancel action button. */
     cancel: { value: 'Cancel' },
+    /** Label for the confirm action button. */
     confirm: { value: 'Confirm' },
   })
+  .define({
+    /** Dialogs are not anchored to source */
+    _anchor: {
+      get() { return null; },
+      set() { /* noop */ },
+    },
+  })
   .set({
+    flow: 'center',
     _useScrim: true,
   })
-  .overrides({
-    updatePopupPosition() {
-      // noop (keep centered);
-    },
-  })
   .methods({
     /**
      * @param {Event & {currentTarget: HTMLSlotElement}} event
@@ -123,30 +141,7 @@ export default CustomElement
       || (node.nodeType === node.TEXT_NODE && node.nodeValue.trim().length));
       currentTarget.toggleAttribute('slotted', hasContent);
     },
-
-    /**
-     * @param {SubmitEvent & {currentTarget: HTMLFormElement}} event
-     * @return {void}
-     */
-    onFormSubmit(event) {
-      if (event.currentTarget.assignedSlot) {
-        // Custom form.
-        // @ts-ignore Skip cast
-        const returnValue = event.submitter?.value;
-        this.close(returnValue);
-        event.preventDefault();
-      }
-    },
-
-    /**
-     * @param {Event & {currentTarget: HTMLFormElement}} event
-     * @return {void}
-     */
-    onFormSlotChange({ currentTarget }) {
-      /** @type {HTMLFormElement} */
-      const [form] = currentTarget.assignedNodes();
-      form?.addEventListener('submit', (e) => this.onFormSubmit(e));
-    },
+    /** Focus the first autofocusable or focusable element inside the dialog. */
     focus() {
       focusOnTree(this.shadowRoot, true, true);
     },
@@ -156,60 +151,41 @@ export default CustomElement
     confirmAutoFocus({ default: d }) { return d === 'confirm'; },
   })
   .html`
-    <div id=prepend>
-      <mdw-icon mdw-if={icon} id=icon class=content ink=secondary aria-hidden=true>{icon}</mdw-icon>
+    <div id=dialog-inner>
+      <mdw-icon mdw-if={icon} id=icon class=content ink=secondary aria-hidden=true icon={icon}></mdw-icon>
       <slot id=headline name=headline on-slotchange={onSlotChange} role=header>{headline}</slot>
       <slot id=fixed name=fixed class=content on-slotchange={onSlotChange}></slot>
       <mdw-divider id=divider-top size={dividers}></mdw-divider>
-    </div>
-    <div id=append>
+      <slot id=content name=content></slot>
       <mdw-divider id=divider-bottom size={dividers}></mdw-divider>
-      <slot name=form id=form-slot on-slotchange={onFormSlotChange}>
-        <form id=form method=dialog role=none on-submit={onFormSubmit}>
-          <mdw-dialog-actions>
-            <mdw-button id=cancel type=submit value=cancel
-              autofocus={cancelAutoFocus}>{cancel}</mdw-button>
-            <mdw-button id=confirm type=submit value=confirm
-              autofocus={confirmAutoFocus}>{confirm}</mdw-button>
-          </mdw-dialog-actions>
+      <slot id=actions name=actions>
+        <form method=dialog role=none>
+          <mdw-button id=cancel type=submit value=cancel autofocus={cancelAutoFocus} formnovalidate>{cancel}</mdw-button>
+          <mdw-button id=confirm type=submit value=confirm autofocus={confirmAutoFocus}>{confirm}</mdw-button>
         </form>
       </slot>
     </div>
   `
-  .on({
-    composed() {
-      const { prepend, append, surface, shape, dialog, slot } = this.refs;
-      dialog.setAttribute('aria-labelledby', 'headline');
-      dialog.setAttribute('aria-describedby', 'slot');
-      surface.append(shape);
-
-      slot.classList.add('content');
-
-      dialog.prepend(surface, ...prepend.childNodes);
-      dialog.append(...append.childNodes);
-      prepend.remove();
-      append.remove();
-    },
+  .recompose(({ refs: { dialog, dialogInner, content, slot } }) => {
+    dialog.setAttribute('aria-labelledby', 'headline');
+    dialog.setAttribute('aria-describedby', 'slot');
+
+    // Use content slot as content
+    // Use default slot as padded content
+    slot.classList.add('content');
+    content.append(slot);
+
+    dialog.prepend(...dialogInner.childNodes);
+    dialogInner.remove();
   })
   .css`
     /* https://m3.material.io/components/dialogs/specs */
 
     :host {
-      --mdw-shape__size: 28px;
-
-      --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
-      --mdw-surface__shadow__raised: var(--mdw-surface__shadow__resting);
-      /* padding-inline: 12px; */
-
       --mdw-bg: var(--mdw-color__surface-container-high);
       --mdw-ink: var(--mdw-color__on-surface);
       position: fixed;
 
-      /* stylelint-disable-next-line liberty/use-logical-spec */
-      top: 50%;
-      /* stylelint-disable-next-line liberty/use-logical-spec */
-      left: 50%;
-
       display: flex;
       align-items: flex-start;
       flex-direction: column;
@@ -219,33 +195,18 @@ export default CustomElement
       overscroll-behavior: none;
       overscroll-behavior: contain;
 
-      box-sizing: border-box;
       max-block-size: calc(100% - 40px);
       inline-size: max-content;
       min-inline-size: 280px;
       max-inline-size: min(560px, calc(100% - 40px));
-
       padding-block-start: 8px;
 
-      pointer-events: none;
-
-      opacity: 0;
-
-      transform: translateX(-50%) translateY(-50%) scale(0);
-      /* visiblity:hidden still registers events, hide from pointer with scale(0) */
-      transform-origin: top center;
-      visibility: hidden;
+      transform: translateY(-40px) scaleY(0);
+      transform-origin: top center !important;
 
+      background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
 
-      font: var(--mdw-type__font);
-      letter-spacing: var(--mdw-type__letter-spacing);
-
-      transition-delay: 0s, 200ms, 200ms;
-      transition-duration: 200ms, 0s, 0s;
-      transition-property: opacity, transform, visibility;
-      transition-timing-function: ease-out;
-      will-change: display, transform, opacity;
     }
 
     #dialog:modal {
@@ -256,10 +217,6 @@ export default CustomElement
       align-items: center;
     }
 
-    #shape {
-      background-color: rgb(var(--mdw-bg));
-    }
-
     #icon {
       padding-block-start: 16px;
 
@@ -335,14 +292,18 @@ export default CustomElement
       display: contents;
     }
 
-    #form-slot::slotted(form) {
-      display: contents;
+    #actions {
+      display: flex;
+      align-self: flex-end;
+
+      margin-block: 24px;
+      padding-inline: 24px;
     }
   `
   .events({
     keydown(event) {
       if (event.key === 'Tab') {
-        if (!this._isNativeModal) {
+        if (!this.native) {
           // Tab trap
           event.preventDefault();
           const tabbables = listTabbables(this.shadowRoot);
@@ -401,6 +362,15 @@ export default CustomElement
         this.close(undefined, false);
       });
     },
+    submit(event) {
+      if (event.defaultPrevented) return;
+      const form = event.target;
+      if (form instanceof HTMLFormElement === false) return;
+      if (form.method !== 'dialog') return;
+      const submitter = /** @type {HTMLInputElement|HTMLButtonElement} */ (event.submitter);
+      const returnValue = submitter?.value;
+      this.close(returnValue);
+    },
   })
   .childEvents({
     dialog: {
@@ -418,7 +388,7 @@ export default CustomElement
       '~click'(event) {
         // Track if click on backdrop
         if (event.target !== event.currentTarget) return;
-        if (!this._isNativeModal) return;
+        if (!this.native) return;
         if (event.offsetX >= 0 && event.offsetX < event.currentTarget.offsetWidth
         && event.offsetY >= 0 && event.offsetY < event.currentTarget.offsetHeight) return;
         const cancelEvent = new Event('cancel', { cancelable: true });

package/components/DialogActions.js

@@ -1,5 +1,9 @@
 import CustomElement from '../core/CustomElement.js';
 
+/**
+ * Dialog action regions contain primary and secondary actions for dialogs.
+ * @see https://m3.material.io/components/dialogs/specs
+ */
 export default CustomElement
   .extend()
   .css`

package/components/Display.js

@@ -0,0 +1,64 @@
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import TypographyMixin from '../mixins/TypographyMixin.js';
+
+import Box from './Box.js';
+
+/**
+ * Material Design Type scale: Display
+ * @see https://m3.material.io/styles/typography/type-scale-tokens
+ */
+export default Box
+  .extend()
+  .mixin(AriaReflectorMixin)
+  .mixin(TypographyMixin)
+  .set({
+    /** ARIA role applied to the host (default: 'heading'). */
+    _ariaRole: 'heading',
+    /** Base aria level used when computing the heading level. */
+    _baseAriaLevel: 1,
+  })
+  .observe({
+    /** Explicit aria-level; if set, overrides the computed level. */
+    ariaLevel: 'string',
+    /** Display size controlling typographic scale: 'large'|'medium'|'small'. */
+    size: {
+      type: 'string',
+      /** @type {'large'|'medium'|'small'} */
+      empty: 'large',
+    },
+  })
+  .observe({
+    /** Computed aria-level (string) derived from `ariaLevel` and `size`. */
+    _computedAriaLevel({ ariaLevel, size, _baseAriaLevel }) {
+      if (ariaLevel) return ariaLevel;
+      if (size === 'medium') return `${_baseAriaLevel + 1}`;
+      if (size === 'small') return `${_baseAriaLevel + 2}`;
+      return `${_baseAriaLevel}`;
+    },
+  })
+
+  .on({
+    _computedAriaLevelChanged(oldValue, newValue) {
+      this.updateAriaProperty('ariaLevel', newValue);
+    },
+    constructed() {
+      this.updateAriaProperty('ariaLevel', this._computedAriaLevel);
+    },
+  })
+  .css`
+    :host {
+      font: var(--mdw-typescale__display-large__font);
+      letter-spacing: var(--mdw-typescale__display-large__letter-spacing);
+    }
+    
+    :host([size="medium"]) {
+      font: var(--mdw-typescale__display-medium__font);
+      letter-spacing: var(--mdw-typescale__display-medium__letter-spacing);
+    }
+    
+    :host([size="small"]) {
+      font: var(--mdw-typescale__display-small__font);
+      letter-spacing: var(--mdw-typescale__display-small__letter-spacing);
+    }  
+  `
+  .autoRegister('mdw-display');

package/components/Divider.js

@@ -3,10 +3,15 @@
 import CustomElement from '../core/CustomElement.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/**
+ * Dividers are thin lines that group content in lists or other containers
+ * @see https://m3.material.io/components/divider/specs
+ */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .observe({
+    /** When true, render the divider vertically instead of horizontally. */
     vertical: 'boolean',
   })
   .css`

package/components/Fab.js

@@ -1,29 +1,94 @@
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
-import ExtendedFab from './ExtendedFab.js';
+import Button from './Button.js';
 
-export default ExtendedFab
+/**
+ * Floating action buttons (FABs) help people take primary actions.
+ * @see https://m3.material.io/components/floating-action-button/specs
+ * @see https://m3.material.io/components/extended-fab/specs
+ */
+export default Button
   .extend()
   .mixin(TooltipTriggerMixin)
   .observe({
+    /** When true, render the lowered FAB variant (reduced elevation). */
+    lowered: 'boolean',
+    /** When true, the FAB is extended and shows a text label. */
+    extended: 'boolean',
+    /** FAB size: `null` (default), 'small' or 'large'. */
     fabSize: {
       /** @type {null|'small'|'large'} */
       value: null,
     },
+    /** Filled variant; default is 'tonal' when omitted. */
+    filled: { empty: 'tonal' },
+    /** Whether the FAB uses elevated styling. */
+    elevated: { type: 'boolean', empty: true },
+  })
+  .observe({
+    /** Whether to show the tooltip automatically (true when not extended). */
+    autoTooltip({ extended }) {
+      return !extended;
+    },
+  })
+  .recompose(({ refs: { icon, slot } }) => {
+    icon.setAttribute('fab-size', '{fabSize}');
+    slot.setAttribute('extended', '{extended}');
+    slot.setAttribute('icon', '{icon}');
   })
   .css`
-    /* https://m3.material.io/components/floating-action-button/specs */
+    /* https://m3.material.io/components/extended-fab/specs */
 
     :host {
+      --mdw-bg: var(--mdw-color__surface-container-high);
+      --mdw-ink: var(--mdw-color__primary);
+      --mdw-shape__size: 16px;
+      gap: 0;
+      grid-area: fab;
+
       min-inline-size: 24px;
+      padding: calc(16px + (var(--mdw-density) * 2px));
+
+      background-color: rgb(var(--mdw-bg));
+
+      box-shadow: var(--mdw-elevation__box-shadow__3);
+      color: rgb(var(--mdw-ink));
+
+      transition-duration: 200ms;
+
+      transition-property: box-shadow, gap, min-inline-size;
     }
 
-    #icon {
-      font-size: 24px;
+    :host(:where([extended])) {
+      gap: 8px;
+
+      min-inline-size: 48px;
     }
 
-    #icon[fab-size="large"] {
-      font-size: 36px;
+    #slot {
+      display: inline-flex;
+      align-items: center;
+
+      min-block-size: 24px;
+
+      visibility: hidden;
+
+      color: transparent;
+
+      font-size: 0;
+      
+
+      transition: color 200ms, font-size 200ms, visibility 200ms;
+    }
+
+    #slot[extended] {
+      visibility: inherit;
+
+      color: inherit;
+
+      font-size: inherit;
+
+      transition: color 200ms, font-size 200ms, visibility 0ms;
     }
 
     :host([fab-size="small"]) {
@@ -35,15 +100,27 @@ export default ExtendedFab
       --mdw-shape__size: 28px;
       padding: calc(30px + (var(--mdw-density) * 2px));
     }
+
+    
+    #icon {
+      font-size: 24px;
+    }
+
+    #icon[fab-size="large"] {
+      font-size: 36px;
+    }
+
+    :host(:where([lowered])) {
+      --mdw-bg: var(--mdw-color__surface-container-low);
+      box-shadow: var(--mdw-elevation__box-shadow__1);
+    }
+
+    :host(:where(:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__4);
+    }
+
+    :host(:where([lowered]:hover:not(:active))) {
+      box-shadow: var(--mdw-elevation__box-shadow__2);
+    }
   `
-  .on({
-    composed() {
-      const { slot, tooltipSlot, control, shape, icon } = this.refs;
-      slot.remove();
-      tooltipSlot.removeAttribute('name');
-      control.setAttribute('aria-labelledby', 'tooltip');
-      shape.setAttribute('fab-size', '{fabSize}');
-      icon.setAttribute('fab-size', '{fabSize}');
-    },
-  })
   .autoRegister('mdw-fab');

package/components/FabContainer.js

@@ -0,0 +1,57 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+
+/**
+ * Container for Floating Action Buttons (FAB) used to position FABs.
+ * @see https://m3.material.io/components/floating-action-button/specs
+ */
+export default CustomElement
+  .extend()
+  .mixin(DelegatesFocusMixin)
+  .observe({
+    /** Hide the FAB container at this min-width (pixels). */
+    hideBreakpoint: { value: 728 },
+  })
+  .observe({
+    /**
+     * Computed element styles. Generates a media query that hides the
+     * container when `hideBreakpoint` is set.
+     */
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ hideBreakpoint }) {
+        if (hideBreakpoint) {
+          return `@media(min-width:${hideBreakpoint}px){:host{display:none}}`;
+        }
+        return undefined;
+      },
+    },
+  })
+  .html`<slot id=slot></slot>`
+  .css`
+    :host {
+      display: grid;
+      align-items: flex-end;
+      grid-template:
+        "fab" auto
+        / auto;
+      justify-content: flex-end;
+
+      margin: 16px;
+
+      pointer-events: none;
+
+    }
+
+    @media (min-width: 648px) {
+      :host {
+        margin: 24px;
+      }
+    }
+
+    #slot {
+      pointer-events: auto;
+    }
+  `
+  .autoRegister('mdw-fab-container');