@shortfuse/materialdesignweb 0.8.0 → 0.9.0

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;
@@ -85,7 +84,6 @@ function focusOnTree(root, autofocus, forward = true) {
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
-  .mixin(SurfaceMixin)
   .mixin(ShapeMixin)
   .mixin(PopupMixin)
   .define({
@@ -104,14 +102,17 @@ export default CustomElement
     cancel: { value: 'Cancel' },
     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 +124,6 @@ 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() {
       focusOnTree(this.shadowRoot, true, true);
     },
@@ -156,60 +133,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 +177,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 +199,6 @@ export default CustomElement
       align-items: center;
     }
 
-    #shape {
-      background-color: rgb(var(--mdw-bg));
-    }
-
     #icon {
       padding-block-start: 16px;
 
@@ -335,14 +274,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 +344,14 @@ 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 returnValue = event.submitter?.value;
+      this.close(returnValue);
+    },
   })
   .childEvents({
     dialog: {
@@ -418,7 +369,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/Display.js

@@ -0,0 +1,55 @@
+import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import TypographyMixin from '../mixins/TypographyMixin.js';
+
+import Box from './Box.js';
+
+export default Box
+  .extend()
+  .mixin(AriaReflectorMixin)
+  .mixin(TypographyMixin)
+  .set({
+    _ariaRole: 'heading',
+    _baseAriaLevel: 1,
+  })
+  .observe({
+    ariaLevel: 'string',
+    size: {
+      type: 'string',
+      /** @type {'large'|'medium'|'small'} */
+      empty: 'large',
+    },
+  })
+  .observe({
+    _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/Fab.js

@@ -1,29 +1,83 @@
 import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 
-import ExtendedFab from './ExtendedFab.js';
+import Button from './Button.js';
 
-export default ExtendedFab
+export default Button
   .extend()
   .mixin(TooltipTriggerMixin)
   .observe({
+    lowered: 'boolean',
+    extended: 'boolean',
     fabSize: {
       /** @type {null|'small'|'large'} */
       value: null,
     },
+    filled: { empty: 'tonal' },
+    elevated: { type: 'boolean', empty: true },
+  })
+  .observe({
+    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 +89,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,48 @@
+import CustomElement from '../core/CustomElement.js';
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+
+export default CustomElement
+  .extend()
+  .mixin(DelegatesFocusMixin)
+  .observe({
+    hideBreakpoint: { value: 728 },
+  })
+  .observe({
+    _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');

package/components/FilterChip.js

@@ -17,33 +17,33 @@ export default Chip
       if (trailingSrc) return '';
       return null;
     },
+    iconVariation({ checked }) {
+      return checked ? 'filled' : null;
+    },
   })
   .html`
-    <mdw-icon mdw-if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true>check</mdw-icon>
-    <mdw-icon mdw-if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc}>{computedTrailingIcon}</mdw-icon>
+    <mdw-icon mdw-if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true icon=check variation=filled></mdw-icon>
+    <mdw-icon mdw-if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc} icon={computedTrailingIcon}></mdw-icon>
   `
-  .on({
-    composed() {
-      const { shape, icon, control, outline, slot, trailingIcon, checkIcon } = this.refs;
-
-      shape.setAttribute('selected', '{checked}');
-      shape.setAttribute('icon', '');
-      shape.setAttribute('trailing-icon', '{computedTrailingIcon}');
-      icon.setAttribute('mdw-if', '{icon}');
-      icon.setAttribute('ink', '{iconInk}');
+  .recompose(({ refs: { icon, control, outline, slot, trailingIcon, checkIcon } }) => {
+    icon.setAttribute('mdw-if', '{icon}');
+    icon.setAttribute('ink', '{iconInk}');
 
-      control.removeAttribute('role');
+    control.removeAttribute('role');
 
-      outline.removeAttribute('ink');
-      outline.removeAttribute('color');
-      outline.setAttribute('selected', '{checked}');
+    outline.removeAttribute('mdw-if');
+    outline.removeAttribute('ink');
+    outline.removeAttribute('color');
+    outline.setAttribute('selected', '{checked}');
+    outline.setAttribute('elevated', '{elevated}');
+    outline.setAttribute('icon', '');
+    outline.setAttribute('trailing-icon', '{computedTrailingIcon}');
 
-      slot.removeAttribute('ink');
-      slot.removeAttribute('color');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
 
-      slot.before(checkIcon);
-      slot.after(trailingIcon);
-    },
+    slot.before(checkIcon);
+    slot.after(trailingIcon);
   })
   .css`
     /* https://m3.material.io/components/chips/specs */
@@ -58,6 +58,8 @@ export default Chip
       padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
       padding-inline-end: max(12px, calc(16px + (var(--mdw-density) * 2px)));
 
+      background-color: transparent;
+
       color: rgb(var(--mdw-color__on-surface-variant));
 
     }
@@ -66,11 +68,9 @@ export default Chip
       --mdw-outline__rgb: var(--mdw-color__outline);
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
-    }
+    #outline {
+      z-index: -1;
 
-    #shape {
       background-color: transparent;
     }
 
@@ -78,22 +78,20 @@ export default Chip
       padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
     }
 
-    #shape[elevated] {
-      background-color: rgb(var(--mdw-color__surface));
+    #outline[elevated] {
+      background-color: rgb(var(--mdw-color__surface-container-low));
+      border-color: transparent;
     }
 
-    #shape[selected] {
+    #outline[selected] {
       background-color: rgb(var(--mdw-bg));
+      border-color: transparent;
     }
 
     :host([selected]) {
       color: rgb(var(--mdw-ink));
     }
 
-    #outline[selected] {
-      opacity: 0;
-    }
-
     #trailing-icon {
       position: relative;
 
@@ -122,7 +120,11 @@ export default Chip
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
 
-    #shape[disabled]:is([elevated],[selected]) {
+    :host([disabled]:is([elevated], [filled])) {
+      background-color: transparent;
+    }
+
+    #outline[disabled]:is([elevated],[selected]) {
       background-color: rgba(var(--mdw-color__on-surface), 0.12);
       /* color: rgba(var(--mdw-color__on-surface), 0.38); */
     }