@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/InputChip.js

@@ -0,0 +1,161 @@
+import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+
+import Box from './Box.js';
+import './Button.js';
+import './Icon.js';
+import './IconButton.js';
+
+export default Box
+  .extend()
+  .mixin(ShapeMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(HyperlinkMixin)
+  .observe({
+    avatar: 'boolean',
+    closeButton: 'boolean',
+    closeIcon: { empty: 'close' },
+    closeInk: { empty: 'inherit' },
+    readOnly: { attr: 'readonly', type: 'boolean' },
+    disabled: 'boolean',
+    icon: 'string',
+    iconInk: 'string',
+    src: 'string',
+    svg: 'string',
+    viewBox: 'string',
+    svgPath: 'string',
+    onclose: EVENT_HANDLER_TYPE,
+    selected: 'boolean',
+  })
+  .set({
+    outlined: true,
+  })
+  .expressions({
+    hasIcon({ icon, svg, src, svgPath } = this) {
+      return icon ?? svg ?? src ?? svgPath;
+    },
+    showCloseIcon({ disabled, readOnly, closeButton }) {
+      return closeButton && !disabled && !readOnly;
+    },
+  })
+  .html`
+    <mdw-button
+      role=none
+      tabindex=-1
+      href={href}
+      target={target}
+      download={download}
+      ping={ping}
+      rel={rel}
+      hreflang={hreflang}
+      referrerpolicy={referrerPolicy} id=action disabled={disabled}></mdw-button>
+    <mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabled}
+      outlined={outlined} variation={iconVariation} aria-hidden=true svg={svg} src={src}
+      svg-path={svgPath} view-box={viewBox} icon={icon} avatar={avatar}></mdw-icon>
+    <mdw-icon-button role=none disabled={disabled} tabindex=-1 mdw-if={showCloseIcon} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-icon-button>
+  `
+  .css`
+    /* https://m3.material.io/components/chips/specs */
+
+    :host {
+      --mdw-shape__size: 8px;
+      --mdw-ink: var(--mdw-color__on-surface);
+      position: relative;
+
+      display: inline-flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+
+      padding-block: calc(4px + (var(--mdw-density) * 2px));
+      padding-inline: calc(12px + (var(--mdw-density) * 2px));
+
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host(:where([icon])) {
+      padding-inline-start: calc(8px + (var(--mdw-density) * 2px));
+    }
+
+    :host(:where([avatar])) {
+      padding-inline-start: calc(4px + (var(--mdw-density) * 2px));
+    }
+
+    :host(:where([close-button]:not([disabled]):not([readonly]))) {
+      padding-inline-end: calc(8px + 18px + 8px + (var(--mdw-density) * 2px));
+    }
+
+    #action {
+      --mdw-shape__size: inherit;
+      position: absolute;
+      inset: 0;
+
+      padding: 0;
+    }
+
+    #close {
+      position: absolute;
+      inset-inline-end: calc(8px - 3px);
+      
+      padding: 3px; /* Pad to 24px */
+
+      font-size: 18px;
+    }
+
+    #icon {
+      font-size: 18px;
+    }
+
+    #icon[avatar] {
+      font-size: 24px;
+    }
+
+    #close::part(control) {
+      min-inline-size: calc(18px + (2 * 8px)); /* Reach up to edge of chip */
+    }
+
+    #outline {
+      --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #outline:is([ink],[color],[disabled]) {
+      /* stylelint-disable-next-line rule-selector-property-disallowed-list */
+      --mdw-ink: inherit;
+    }
+
+    :host([disabled]) {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+  `
+  .childEvents({
+    action: {
+      click() {
+        this.dispatchEvent(new Event('action'));
+      },
+    },
+    close: {
+      click() {
+        this.dispatchEvent(new Event('close'));
+      },
+    },
+  })
+  .on({
+    selectedChanged(previous, current) {
+      this.refs.action._focused = current;
+    },
+  })
+  .recompose(({ refs: { anchor, slot, icon, outline } }) => {
+    icon.after(slot);
+    anchor.remove();
+    slot.setAttribute('disabled', '{disabled}');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
+    outline.removeAttribute('mdw-if');
+    outline.setAttribute('ink', '{ink}');
+    outline.setAttribute('color', '{color}');
+    outline.setAttribute('disabled', '{disabled}');
+  })
+  .autoRegister('mdw-input-chip');

package/components/Label.js

@@ -1,7 +1,10 @@
+import TypographyMixin from '../mixins/TypographyMixin.js';
+
 import Box from './Box.js';
 
 export default Box
   .extend()
+  .mixin(TypographyMixin)
   .css`
     :host {
       font: var(--mdw-typescale__label-large__font);

package/components/List.js

@@ -17,14 +17,10 @@ export default Box
     /* https://m3.material.io/components/lists/specs */
 
     :host {
-      --mdw-bg: var(--mdw-color__surface);
-      --mdw-ink: var(--mdw-color__on-surface);
-      display: flex;
-      flex-direction: column;
+      display: block;
 
       padding-block: 8px;
 
-      background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     }
 

package/components/ListItem.js

@@ -1,5 +1,6 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 
+import './Box.js';
 import './CheckboxIcon.js';
 import './RadioIcon.js';
 import './Divider.js';
@@ -7,6 +8,7 @@ import './Icon.js';
 
 import CustomElement from '../core/CustomElement.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import RippleMixin from '../mixins/RippleMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
@@ -17,9 +19,9 @@ export default CustomElement
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(AriaReflectorMixin)
+  .mixin(HyperlinkMixin)
   .set({
     _ariaRole: 'listitem',
-    delegatesFocus: false,
     stateLayer: true,
   })
   .observe({
@@ -30,9 +32,9 @@ export default CustomElement
     src: 'string',
     alt: 'string',
     icon: 'string',
-    href: 'string',
     iconInk: 'string',
     iconSrc: 'string',
+    iconVariation: 'string',
     checkbox: 'string',
     radio: 'string',
     selectionColor: { value: 'primary' },
@@ -42,7 +44,7 @@ export default CustomElement
     trailingIcon: 'string',
     trailingIconInk: 'string',
     trailingIconSrc: 'string',
-    divider: 'boolean',
+    divider: 'string',
     video: 'boolean',
     lines: 'integer',
     _supportingSlotted: 'boolean',
@@ -67,33 +69,36 @@ export default CustomElement
     radioClass() {
       return this.radio || 'leading';
     },
+    computedIconVariation({ iconVariation }) {
+      return iconVariation ?? 'filled';
+    },
   })
   .html`
-    <a id=anchor mdw-if={href} href={href} disabled={disabledState} aria-labelledby=content></a>
     <mdw-checkbox-icon id=checkbox mdw-if={checkbox} aria-hidden=true class={checkboxClass} color={selectionColor} disabled={disabledState} icon=check selected={selected}></mdw-checkbox-icon>
     <mdw-radio-icon id=radio mdw-if={radio} aria-hidden=true class={radioClass} disabled={disabledState} ink={selectionColor} selected={selected}></mdw-radio-icon>
-    <mdw-box mdw-if={avatar} id=avatar color={avatarColor} type-style=title-medium src={AvatarSrc}
+    <mdw-box mdw-if={avatar} id=avatar color={avatarColor} x=center y=center type-style=title-medium src={AvatarSrc}
       aria-hidden=true>{avatar}</mdw-box>
-    <mdw-icon mdw-if={icon} id=icon ink={iconInk} src={iconSrc} aria-hidden=true>{icon}</mdw-icon>
+    <mdw-icon mdw-if={icon} id=icon ink={iconInk} src={iconSrc} aria-hidden=true icon={icon} variation={computedIconVariation}></mdw-icon>
     <img id=img mdw-if={src} src={src} alt={alt} video={video} />
     <slot name=leading>{leading}</slot>
     <div id=content has-supporting={hasSupporting} lines={lines}>
       <slot id=slot></slot>
       <slot id=supporting name=supporting class=text lines={lines}>{supporting}</slot>
     </div>
-    <mdw-icon mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} src={trailingIconSrc} aria-hidden=true>{trailingIcon}</mdw-icon>
+    <mdw-icon mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} src={trailingIconSrc} aria-hidden=true icon={trailingIcon}></mdw-icon>
     <slot id=trailing name=trailing role=note>{trailing}</slot>
-    <mdw-divider mdw-if={divider} id=divider divder={divider}></mdw-divider>
+    <mdw-divider mdw-if={divider} id=divider divider={divider}></mdw-divider>
   `
+  .recompose(({ refs: { state, rippleContainer, anchor } }) => {
+    anchor.setAttribute('mdw-if', '{href}');
+    anchor.setAttribute('aria-labelledby', 'content');
+    anchor.append(
+      state,
+      rippleContainer,
+    );
+    state.setAttribute('state-disabled', 'focus hover');
+  })
   .on({
-    composed() {
-      const { state, rippleContainer, anchor } = this.refs;
-      anchor.append(
-        state,
-        rippleContainer,
-      );
-      state.setAttribute('state-disabled', 'focus hover');
-    },
     disabledStateChanged(oldValue, newValue) {
       this.updateAriaProperty('ariaDisabled', newValue ? 'true' : 'false');
     },
@@ -111,7 +116,7 @@ export default CustomElement
 
       border: none;
       padding-block: 8px;
-      padding-inline: 16px 24px;
+      padding-inline: 16px;
 
       cursor: auto;
 
@@ -122,6 +127,20 @@ export default CustomElement
       text-decoration: none;
     }
 
+    :host(:where([color])) {
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host(:is([color="none"],[color="transparent"])) {
+      background-color: transparent;
+      color: inherit;
+    }
+    
+    :host([ink]) {
+      color: rgb(var(--mdw-ink));
+    }
+
     :host([href]) {
       cursor: pointer;
     }
@@ -180,6 +199,7 @@ export default CustomElement
     #divider {
       position: absolute;
       inset-block-end: 0;
+      inset-inline: 0;
 
       display: block;
 
@@ -215,8 +235,8 @@ export default CustomElement
     #trailing {
       color: var(--mdw-color__on-surface-variant);
 
-      font: var(--mdw-typescale__body-medium__font);
-      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+      font: var(--mdw-typescale__label-small__font);
+      letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
     }
 
     #slot, #supporting {
@@ -280,10 +300,6 @@ export default CustomElement
     }
 
     #avatar {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
       block-size: 40px;
       inline-size: 40px;
 

package/components/ListOption.js

@@ -1,17 +1,19 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+
 import ListItem from './ListItem.js';
 
 // https://html.spec.whatwg.org/multipage/form-elements.html#htmloptionelement
 
-export default class ListOption extends ListItem
+export default ListItem
   .extend()
+  .mixin(DelegatesFocusMixin)
   .setStatic({
     formAssociated: true,
   })
   .set({
     _ariaRole: 'none',
-    delegatesFocus: true,
     _index: -1,
     _selectedDirty: false,
     isInteractive: true,
@@ -45,7 +47,7 @@ export default class ListOption extends ListItem
   })
   .define({
     index() { return this._index; },
-    form() { return (this.parentElement)?.form; },
+    form() { return /** @type {HTMLInputElement} */ (this.parentElement)?.form; },
     label: {
       get() { return this._label ?? this.textContent; },
       /** @param {string} value */
@@ -56,7 +58,7 @@ export default class ListOption extends ListItem
     value: {
       get() { return this._value ?? this.textContent; },
       /** @param {string} value */
-      set(value) { this._label = value; },
+      set(value) { this._value = value; },
     },
   })
   .methods({
@@ -69,38 +71,48 @@ export default class ListOption extends ListItem
       this.refs.anchor.focus(...options);
     },
   })
-  .on({
-    composed({ inline }) {
-      const { anchor, state, content } = this.refs;
+  .expressions({
+    anchorAriaLabelledBy({ _label }) {
+      return _label ? null : 'content';
+    },
+    anchorAriaDescribedBy({ _label }) {
+      return _label ? 'content' : null;
+    },
+    computedIconVariation({ iconVariation, selected }) {
+      if (iconVariation != null) return iconVariation;
+      return selected ? 'filled' : null;
+    },
+  })
+  .recompose(({ inline, refs: { checkbox, radio, anchor, state, content } }) => {
+    // Form Associated elements cannot receive focus unless using delegatesFocus
+    // Workaround by redirecting focus to an inner element
+    // Reuse HTMLAnchorElement with no HREF
+    // Issues: Siblings (images) are not contained within tree
 
-      // Form Associated elements cannot receive focus unless using delegatesFocus
-      // Workaround by redirecting focus to an inner element
-      // Reuse HTMLAnchorElement with no HREF
-      // Issues: Siblings (images) are not contained within tree
+    anchor.setAttribute('disabled', '{disabledState}');
+    anchor.setAttribute('role', 'option');
+    anchor.setAttribute('aria-disabled', inline(({ disabledState }) => `${disabledState}`));
+    anchor.setAttribute('tabindex', '0');
+    anchor.setAttribute('aria-selected', inline(({ selected }) => `${selected}`));
+    anchor.setAttribute('selected', '{selected}');
+    anchor.setAttribute('aria-labelledby', '{anchorAriaLabelledBy}');
+    anchor.setAttribute('aria-describedby', '{anchorAriaDescribedBy}');
+    anchor.setAttribute('aria-label', '{_label}');
+    anchor.removeAttribute('href');
+    anchor.removeAttribute('mdw-if');
 
-      anchor.setAttribute('disabled', '{disabledState}');
-      anchor.setAttribute('role', 'option');
-      anchor.setAttribute('aria-disabled', inline(({ disabledState }) => `${disabledState}`));
-      anchor.setAttribute('tabindex', '0');
-      anchor.setAttribute('aria-selected', inline(({ selected }) => `${selected}`));
-      anchor.setAttribute('selected', '{selected}');
-      anchor.removeAttribute('href');
-      anchor.removeAttribute('mdw-if');
+    // eslint-disable-next-line no-shadow
+    checkbox.setAttribute('mdw-if', inline(({ checkbox, icon }) => !icon && checkbox));
 
-      content.setAttribute('selected', '{selected}');
+    // eslint-disable-next-line no-shadow
+    radio.setAttribute('mdw-if', inline(({ radio, icon }) => !icon && radio));
 
-      state.setAttribute('state-disabled', 'focus');
-    },
-    _labelChanged(previous, current) {
-      const { anchor } = this.refs;
-      if (current == null) {
-        anchor.setAttribute('aria-labelledby', 'content');
-        anchor.removeAttribute('aria-label');
-      } else {
-        anchor.setAttribute('aria-label', current);
-        anchor.removeAttribute('aria-labelledby');
-      }
-    },
+    content.setAttribute('aria-hidden', 'true');
+    content.setAttribute('selected', '{selected}');
+
+    state.setAttribute('state-disabled', 'focus');
+  })
+  .on({
     selectedChanged(previous, current) {
       // Used by HTMLCollection
       this.classList.toggle('mdw-list-option__selected', current);
@@ -115,7 +127,11 @@ export default class ListOption extends ListItem
     
       z-index: 0;
     }
-    
+
+    :host([hidden]) {
+      display: none;
+    }
+
     :host([href]) {
       cursor: pointer;
     }
@@ -128,6 +144,7 @@ export default class ListOption extends ListItem
     #content {
       -webkit-user-select: none;
       user-select: none;
+      pointer-events: none;
     }
     
     #content[selected] {
@@ -142,35 +159,35 @@ export default class ListOption extends ListItem
       background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     }
-  ` {
-  static { this.autoRegister('mdw-list-option'); }
-
-  /**
-   * @param {string} [text]
-   * @param {string} [value]
-   * @param {boolean} [defaultSelected]
-   * @param {boolean} [selected]
-   */
-  constructor(text, value, defaultSelected, selected) {
-    super();
-    if (text !== undefined) {
-      this.text = text;
-    }
-    if (value !== undefined) {
-      this._value = value;
-    }
-    if (defaultSelected !== undefined) {
-      this.defaultSelected = defaultSelected;
-    }
-    if (selected !== undefined) {
-      this._selected = selected;
+  `
+  .extend((BaseClass) => class extends BaseClass {
+    /**
+     * @param {string} [text]
+     * @param {string} [value]
+     * @param {boolean} [defaultSelected]
+     * @param {boolean} [selected]
+     */
+    constructor(text, value, defaultSelected, selected) {
+      super();
+      if (text !== undefined) {
+        this.text = text;
+      }
+      if (value !== undefined) {
+        this._value = value;
+      }
+      if (defaultSelected !== undefined) {
+        this.defaultSelected = defaultSelected;
+      }
+      if (selected !== undefined) {
+        this._selected = selected;
+      }
     }
-  }
 
-  connectedCallback() {
-    super.connectedCallback();
-    if (!this.hasAttribute('tabindex')) {
-      this.tabIndex = 0;
+    connectedCallback() {
+      super.connectedCallback();
+      if (!this.hasAttribute('tabindex')) {
+        this.tabIndex = 0;
+      }
     }
-  }
-}
+  })
+  .autoRegister('mdw-list-option');

package/components/Listbox.js

@@ -1,4 +1,5 @@
 import { constructHTMLOptionsCollectionProxy } from '../dom/HTMLOptionsCollectionProxy.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
 import FormAssociatedMixin from '../mixins/FormAssociatedMixin.js';
 import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
@@ -6,25 +7,25 @@ import StateMixin from '../mixins/StateMixin.js';
 import List from './List.js';
 import ListOption from './ListOption.js';
 
-/** @implements {HTMLSelectElement} */
-// @ts-expect-error Can't implement index signatures (use `item()`)
+/** -implements {HTMLSelectElement} */
 export default List
   .extend()
   .mixin(StateMixin)
   .mixin(FormAssociatedMixin)
   .mixin(KeyboardNavMixin)
+  .mixin(DelegatesFocusMixin)
   .observe({
     multiple: 'boolean',
     size: { type: 'integer', empty: 0 },
   })
   .set({
     _ariaRole: 'listbox',
-    delegatesFocus: true,
-    /** @type {HTMLCollectionOf<ListOption> & HTMLOptionsCollection} */
+    /** @type {HTMLCollectionOf<InstanceType<ListOption>> & HTMLOptionsCollection} */
     _optionsCollection: null,
-    /** @type {HTMLCollectionOf<ListOption>} */
+    /** @type {HTMLCollectionOf<InstanceType<ListOption>>} */
     _selectedOptionsCollection: null,
     _handlingSelectedness: false,
+    _handleFormReset: true,
   })
   .define({
     options() {
@@ -39,17 +40,17 @@ export default List
       return this._optionsCollection;
     },
 
-    /** @return {HTMLCollectionOf<ListOption>} */
+    /** @return {HTMLCollectionOf<InstanceType<ListOption>>} */
     selectedOptions() {
       // eslint-disable-next-line no-return-assign
       return (this._selectedOptionsCollection
         ??= (
-          /** @type {HTMLCollectionOf<ListOption>} */
+          /** @type {HTMLCollectionOf<InstanceType<ListOption>>} */
           (this.getElementsByClassName('mdw-list-option__selected')))
       );
     },
 
-    type() { return 'select'; },
+    type() { return this.multiple ? 'select-multiple' : 'select-one'; },
 
     kbdNavQuery() { return ListOption.elementName; },
 
@@ -66,9 +67,11 @@ export default List
       },
       set(value) {
         const itemToSelect = this.options[value];
+        this._handlingSelectedness = true;
         for (const option of this.options) {
           option.selected = (option === itemToSelect);
         }
+        this._handlingSelectedness = false;
         this._value = this.value;
       },
     },
@@ -80,11 +83,13 @@ export default List
       set(v) {
         let newValue = '';
         const vString = `${v}`;
+        this._handlingSelectedness = true;
         for (const option of this.options) {
           if ((option.selected = (option.value === vString))) {
             newValue = vString;
           }
         }
+        this._handlingSelectedness = false;
         this._value = newValue;
       },
     },
@@ -99,7 +104,9 @@ export default List
       this.updateAriaProperty('ariaMultiSelectable', newValue ? 'true' : 'false');
     },
     _formResetChanged(oldValue, newValue) {
-      // TODO: Unset dirty
+      if (!newValue) return;
+      if (!this._handleFormReset) return;
+      this.value = this.defaultValue;
     },
     connected() {
       if (!this.hasAttribute('tabindex')) {
@@ -143,6 +150,7 @@ export default List
     onListboxClick(event) {
       const target = event.target;
       if (!(target instanceof ListOption)) return;
+      event.stopImmediatePropagation();
       event.stopPropagation();
       if (target.disabledState) return;
 
@@ -170,6 +178,7 @@ export default List
 
       this._value = this.value;
       this._handlingSelectedness = false;
+      this._updateFormAssociatedValue();
 
       if (sendUpdateNotifications) {
         this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
@@ -194,7 +203,7 @@ export default List
       if (this.multiple) return;
       if (this._handlingSelectedness) return;
 
-      const target = /** @type {ListOption} */ (/** @type {unknown} */ (event.target));
+      const target = /** @type {InstanceType<ListOption>} */ (/** @type {unknown} */ (event.target));
       if (target.selected) return;
       this._handlingSelectedness = true;