@shortfuse/materialdesignweb 0.7.6 → 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

@@ -6,24 +6,22 @@ import Box from './Box.js';
 /** @typedef {'compact'} DeprecatedHTMLMenuElementProperties */
 
 export default Box
+  .extend()
   .mixin(DensityMixin)
   .mixin(AriaReflectorMixin)
-  .extend()
   .set({
     _ariaRole: 'list',
+    color: { empty: 'surface' },
   })
   .css`
     /* https://m3.material.io/components/lists/specs */
 
     :host {
-      display: flex;
-      flex-direction: column;
+      display: block;
 
       padding-block: 8px;
-    }
 
-    :host(:focus) {
-      outline: 1px solid red;
+      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,19 +8,20 @@ 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';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(AriaReflectorMixin)
-  .extend()
+  .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',
@@ -59,7 +61,7 @@ export default CustomElement
       return href != null;
     },
     hasSupporting() {
-      return this.supporting || this._supportingSlotted;
+      return Boolean(this.supporting || this._supportingSlotted);
     },
     checkboxClass() {
       return this.checkbox || 'leading';
@@ -67,33 +69,36 @@ export default CustomElement
     radioClass() {
       return this.radio || 'leading';
     },
+    computedIconVariation({ iconVariation }) {
+      return iconVariation ?? 'filled';
+    },
   })
-  .html/* html */`
-    <a id=anchor _if={href} href={href} disabled={disabledState} aria-labelledby=content></a>
-    <mdw-checkbox-icon id=checkbox _if={checkbox} aria-hidden=true class={checkboxClass} color={selectionColor} disabled={disabledState} icon=check selected={selected}></mdw-checkbox-icon>
-    <mdw-radio-icon id=radio _if={radio} aria-hidden=true class={radioClass} disabled={disabledState} ink={selectionColor} selected={selected}></mdw-radio-icon>
-    <mdw-box _if={avatar} id=avatar color={avatarColor} type-style=title-medium src={AvatarSrc}
+  .html`
+    <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} x=center y=center type-style=title-medium src={AvatarSrc}
       aria-hidden=true>{avatar}</mdw-box>
-    <mdw-icon _if={icon} id=icon ink={iconInk} src={iconSrc} aria-hidden=true>{icon}</mdw-icon>
-    <img id=img _if={src} src={src} alt={alt} video={video} />
+    <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 _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 _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,10 +199,11 @@ export default CustomElement
     #divider {
       position: absolute;
       inset-block-end: 0;
+      inset-inline: 0;
 
       display: block;
 
-      color: rgb(var(--mdw-color__surface-variant));
+      color: rgb(var(--mdw-color__surface-container-highest));
     }
 
     #divider[divider="inset"] {
@@ -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,24 +1,26 @@
 // 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,
   })
   .observe({
     // ListOption.prototype._form = ListOption.prop('_form');
-    _label: { attr: 'label', nullParser: String },
+    _label: { attr: 'label', reflect: true, nullParser: String },
     defaultSelected: { attr: 'selected', reflect: true, type: 'boolean' },
     _selected: 'boolean',
     _value: { attr: 'value', reflect: true },
@@ -45,18 +47,18 @@ export default class ListOption extends ListItem
   })
   .define({
     index() { return this._index; },
-    form() { return /** @type {import('./ListSelect.js').default} */ (this.parentElement)?.form; },
+    form() { return /** @type {HTMLInputElement} */ (this.parentElement)?.form; },
     label: {
-      get() { return this._label; },
+      get() { return this._label ?? this.textContent; },
       /** @param {string} value */
       set(value) {
         this._label = value;
       },
     },
     value: {
-      get() { return this._value; },
+      get() { return this._value ?? this.textContent; },
       /** @param {string} value */
-      set(value) { this._label = value; },
+      set(value) { this._value = value; },
     },
   })
   .methods({
@@ -69,26 +71,52 @@ 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
+
+    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');
 
-      // Form Associated elements cannot receive focus unless using delegatesFocus
-      // Workaround by redirecting focus to an inner element
-      // Reuse HTMLAnchorElement with no HREF
+    // eslint-disable-next-line no-shadow
+    checkbox.setAttribute('mdw-if', inline(({ checkbox, icon }) => !icon && checkbox));
 
-      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('_if');
+    // eslint-disable-next-line no-shadow
+    radio.setAttribute('mdw-if', inline(({ radio, icon }) => !icon && radio));
 
-      content.setAttribute('selected', '{selected}');
+    content.setAttribute('aria-hidden', 'true');
+    content.setAttribute('selected', '{selected}');
 
-      state.setAttribute('state-disabled', 'focus');
+    state.setAttribute('state-disabled', 'focus');
+  })
+  .on({
+    selectedChanged(previous, current) {
+      // Used by HTMLCollection
+      this.classList.toggle('mdw-list-option__selected', current);
+      this.dispatchEvent(new Event('mdw-list-option:changed', { bubbles: true, composed: true }));
     },
   })
   .css`
@@ -99,7 +127,11 @@ export default class ListOption extends ListItem
     
       z-index: 0;
     }
-    
+
+    :host([hidden]) {
+      display: none;
+    }
+
     :host([href]) {
       cursor: pointer;
     }
@@ -112,6 +144,7 @@ export default class ListOption extends ListItem
     #content {
       -webkit-user-select: none;
       user-select: none;
+      pointer-events: none;
     }
     
     #content[selected] {
@@ -126,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;
+  `
+  .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;
+      }
     }
-    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');