@shortfuse/materialdesignweb 0.7.6 → 0.8.0

package/components/Divider.js

@@ -1,15 +1,15 @@
+/* https://m3.material.io/components/dividers/specs */
+
 import CustomElement from '../core/CustomElement.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
 export default CustomElement
-  .mixin(ThemableMixin)
   .extend()
+  .mixin(ThemableMixin)
   .observe({
     vertical: 'boolean',
   })
   .css`
-    /* https://m3.material.io/components/dividers/specs */
-
     :host {
       --mdw-ink: var(--mdw-color__outline-variant);
       position: relative;

package/components/ExtendedFab.js

@@ -6,11 +6,9 @@ export default Button
     /* https://m3.material.io/components/extended-fab/specs */
 
     :host {
-      --mdw-bg: var(--mdw-color__primary-container);
-      --mdw-ink: var(--mdw-color__on-primary-container);
+      --mdw-bg: var(--mdw-color__surface-container-high);
+      --mdw-ink: var(--mdw-color__primary);
       --mdw-shape__size: 16px;
-      --mdw-surface__tint: var(--mdw-surface__tint__3);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__4);
       --mdw-surface__shadow__resting: var(--mdw-surface__shadow__3);
       --mdw-surface__shadow__raised: var(--mdw-surface__shadow__4);
       min-inline-size: 48px;
@@ -21,13 +19,11 @@ export default Button
       font-size: 24px;
     }
 
-    :host([lowered]) {
-      --mdw-surface__tint: var(--mdw-surface__tint__1);
-      --mdw-surface__tint__raised: var(--mdw-surface__tint__2);
+    :host(:where([lowered])) {
+      --mdw-bg: var(--mdw-color__surface-container-low);
       --mdw-surface__shadow__resting: var(--mdw-surface__shadow__1);
       --mdw-surface__shadow__raised: var(--mdw-surface__shadow__2);
     }
-
   `
   .observe({
     filled: { empty: 'tonal' },

package/components/Fab.js

@@ -3,8 +3,8 @@ import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 import ExtendedFab from './ExtendedFab.js';
 
 export default ExtendedFab
-  .mixin(TooltipTriggerMixin)
   .extend()
+  .mixin(TooltipTriggerMixin)
   .observe({
     fabSize: {
       /** @type {null|'small'|'large'} */
@@ -35,7 +35,6 @@ export default ExtendedFab
       --mdw-shape__size: 28px;
       padding: calc(30px + (var(--mdw-density) * 2px));
     }
-
   `
   .on({
     composed() {

package/components/FilterChip.js

@@ -18,9 +18,9 @@ export default Chip
       return null;
     },
   })
-  .html/* html */`
-    <mdw-icon _if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true>check</mdw-icon>
-    <mdw-icon _if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc}>{computedTrailingIcon}</mdw-icon>
+  .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>
   `
   .on({
     composed() {
@@ -29,7 +29,7 @@ export default Chip
       shape.setAttribute('selected', '{checked}');
       shape.setAttribute('icon', '');
       shape.setAttribute('trailing-icon', '{computedTrailingIcon}');
-      icon.setAttribute('_if', '{icon}');
+      icon.setAttribute('mdw-if', '{icon}');
       icon.setAttribute('ink', '{iconInk}');
 
       control.removeAttribute('role');

package/components/Headline.js

@@ -3,8 +3,8 @@ import ThemableMixin from '../mixins/ThemableMixin.js';
 import Box from './Box.js';
 
 export default Box
-  .mixin(ThemableMixin)
   .extend()
+  .mixin(ThemableMixin)
   .observe({
     ariaLevel: 'string',
     size: {

package/components/Icon.js

@@ -15,8 +15,8 @@ const documentLoadedStyleSheets = new Set();
 
 /** @implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
 export default class Icon extends CustomElement
-  .mixin(ThemableMixin)
   .extend()
+  .mixin(ThemableMixin)
   .define({
     _img() { return /** @type {HTMLImageElement} */ (this.refs.img); },
   })
@@ -48,7 +48,7 @@ export default class Icon extends CustomElement
     height: 'integer',
     forceFont: 'boolean',
     _linkLoaded: 'boolean',
-    viewBox: { attr: 'viewBox' },
+    viewBox: 'string',
     fontClass: { empty: 'material-symbols-outlined' },
     fontLibrary: { empty: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&display=block' },
   })
@@ -88,13 +88,13 @@ export default class Icon extends CustomElement
     },
 
   })
-  .html/* html */`
-    <link _if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
-    <svg _if="{showSVG}" id="svg" viewBox="{_computedViewBox}">
-      <use id="use" _if="{svg}" href="{svg}" fill="currentColor"/>
-      <path id="path" _if="{_computedSVGPath}" d="{_computedSVGPath}"/>
+  .html`
+    <link mdw-if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
+    <svg mdw-if="{showSVG}" id="svg" viewBox="{_computedViewBox}">
+      <use id="use" mdw-if="{svg}" href="{svg}" fill="currentColor"/>
+      <path id="path" mdw-if="{_computedSVGPath}" d="{_computedSVGPath}"/>
     </svg>
-    <img _if={src} id=img
+    <img mdw-if={src} id=img
       disabled={disabled}
       alt={alt} src={src} srcset={srcset} sizes={sizes}
       crossorigin={crossOrigin} usemap={useMap} ismap={isMap}

package/components/IconButton.js

@@ -3,8 +3,8 @@ import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
 import Button from './Button.js';
 
 export default Button
-  .mixin(TooltipTriggerMixin)
   .extend()
+  .mixin(TooltipTriggerMixin)
   .observe({
     _ariaPressed: {
       get({ type, checked }) {
@@ -41,21 +41,20 @@ export default Button
   })
   .on({
     composed() {
-      const { slot, shape, tooltipSlot, icon, label, surfaceTint, control, outline } = this.refs;
+      const { slot, shape, tooltipSlot, icon, control, outline, anchor } = this.refs;
       shape.classList.add('colored');
-      label.classList.add('colored');
-      for (const el of [shape, label, icon]) {
+      icon.classList.add('colored');
+      for (const el of [shape, icon]) {
         el.setAttribute('toggle', '{isToggle}');
         el.setAttribute('selected', '{checked}');
       }
       slot.remove();
-      icon.removeAttribute('_if');
+      icon.removeAttribute('mdw-if');
       tooltipSlot.removeAttribute('name');
 
-      surfaceTint.remove();
-
       control.setAttribute('aria-pressed', '{_ariaPressed}');
       control.setAttribute('aria-labelledby', 'tooltip');
+      anchor.setAttribute('aria-labelledby', 'tooltip');
 
       outline.setAttribute('selected', '{checked}');
     },
@@ -106,11 +105,6 @@ export default Button
       --mdw-ink: var(--mdw-color__inverse-on-surface);
     }
 
-    #label {
-      font-size: inherit;
-      letter-spacing: inherit;
-    }
-
     #shape[toggle] {
       background-color: transparent;
     }
@@ -125,7 +119,7 @@ export default Button
     }
 
     #shape[filled][toggle] {
-      background-color: rgb(var(--mdw-color__surface-variant));
+      background-color: rgb(var(--mdw-color__surface-container-highest));
     }
 
     .colored[filled][toggle] {
@@ -133,7 +127,8 @@ export default Button
     }
 
     #shape[filled="tonal"][toggle] {
-      background-color: rgb(var(--mdw-color__surface-variant));
+      /* Redundant */
+      /* background-color: rgb(var(--mdw-color__surface-container-highest)); */
     }
 
     .colored[filled="tonal"][toggle] {

package/components/Input.js

@@ -1,16 +1,288 @@
+/* https://www.w3.org/WAI/ARIA/apg/patterns/combobox/ */
+
 import CustomElement from '../core/CustomElement.js';
 import InputMixin from '../mixins/InputMixin.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import TextFieldMixin from '../mixins/TextFieldMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+import Popup from './Popup.js';
+
+/** @typedef {import('./Listbox.js').default} Listbox */
+
+/** @type {InstanceType<import('./Popup.js').default>} */
+let sharedPopup;
+
+/** @return {InstanceType<import('./Popup.js').default>} */
+function getSharedPopup() {
+  if (!sharedPopup) {
+    sharedPopup = new Popup();
+    sharedPopup.scrollable = true;
+    sharedPopup.shapeStyle = 'extra-small';
+    sharedPopup.color = 'surface';
+    sharedPopup.matchSourceWidth = true;
+  }
+  return sharedPopup;
+}
+
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(InputMixin)
   .mixin(TextFieldMixin)
-  .extend()
+  .mixin(ResizeObserverMixin)
+  .observe({
+    suggestInline: 'boolean',
+    _expanded: 'boolean',
+    _listbox: {
+      type: 'object',
+      /** @type {Listbox} */
+      value: null,
+    },
+    _focusedValue: 'string',
+    _focusedIndex: { value: -1 },
+    _focusedPosInSet: { value: -1 },
+    _listboxSize: { value: -1 },
+    _draftInput: { type: 'string', nullable: false },
+  })
+  .observe({
+    _hasListbox({ _listbox }) {
+      return _listbox ? 'listbox' : null;
+    },
+  })
+  .set({
+    _onListboxChangeListener: null,
+  })
   .define({
     stateTargetElement() { return this.refs.control; },
   })
+  .methods({
+    onResizeObserved() {
+      if (!this._expanded) return;
+      const popup = getSharedPopup();
+      popup.updatePopupPosition(this.refs.shape);
+    },
+    /**
+     * @param {Event} event
+     */
+    onListboxChange(event) {
+      const selectedItem = this._listbox.selectedOptions.item(0);
+      this.selectOption(selectedItem);
+      this.closeListbox();
+      // Revert focus back
+      this.refs.control.focus();
+    },
+    showListbox() {
+      // Move contents of list slot into top-layer
+      // Should only have one element
+
+      const { _listbox, refs } = this;
+      if (!_listbox) return;
+      this._expanded = true;
+      const { control, ariaListbox, shape } = refs;
+      control.setAttribute('role', 'combobox');
+      ariaListbox.setAttribute('aria-hidden', 'false');
+      const popup = getSharedPopup();
+      document.body.append(popup);
+      popup.replaceChildren(_listbox);
+      _listbox.selectedIndex = -1;
+      popup.showPopup(shape, false);
+    },
+    closeListbox() {
+      this._expanded = false;
+      const { _listbox } = this;
+      if (!_listbox) return;
+      const popup = getSharedPopup();
+      this.refs.ariaListbox.setAttribute('aria-hidden', 'true');
+      this.replaceChildren(_listbox);
+      popup.close(undefined, false);
+      // TODO: Animate
+      popup.remove();
+    },
+
+    /**
+     * @param {{label:string, value:string}} option
+     * @return {void}
+     */
+    selectOption(option) {
+      this.render({
+        selectedOption: option,
+      });
+
+      const { _draftInput, _value, _input } = this;
+      const { label: suggestion, value } = option;
+
+      if (_draftInput && suggestion && suggestion.toLowerCase().startsWith(_draftInput.toLowerCase())) {
+        _input.value = _draftInput + suggestion.slice(_draftInput.length);
+        _input.setSelectionRange(_value.length, suggestion.length);
+      } else {
+        _input.value = suggestion;
+        _input.setSelectionRange(suggestion.length, suggestion.length);
+      }
+      this._value = value;
+    },
+  })
+  .on({
+    _focusedIndexChanged(previous, current) {
+      const _listbox = this._listbox;
+      const previousItem = _listbox.item(previous);
+      if (previousItem) {
+        previousItem.focused = false;
+      }
+      const currentItem = _listbox.item(current);
+      if (currentItem) {
+        this._focusedPosInSet = current + 1;
+        currentItem.focused = true;
+        this.selectOption(currentItem);
+      } else {
+        this._focusedPosInSet = -1;
+      }
+    },
+  })
+  .childEvents({
+    control: {
+      input(event) {
+        if (!this._listbox) return;
+        // Intercept event and dispatch a new one.
+        // This allow authors to modify listbox (filter) and value (custom pattern)
+        event.stopPropagation();
+        this.dispatchEvent(new InputEvent('input', {
+          composed: true,
+          data: event.data,
+          bubbles: true,
+          dataTransfer: event.dataTransfer,
+          detail: event.detail,
+          inputType: event.inputType,
+          view: event.view,
+          targetRanges: event.getTargetRanges(),
+          isComposing: event.isComposing,
+        }));
+        this._draftInput = event.currentTarget.value;
+        this._focusedIndex = -1;
+        if (!this._expanded && this._listbox.length) {
+          this.showListbox();
+        }
+      },
+      keydown(event) {
+        switch (event.key) {
+          case 'ArrowUp':
+          case 'Up':
+            if (!this._expanded) return;
+            if (this._focusedIndex <= 0) {
+              this._focusedIndex = (this._listbox.length - 1);
+            } else {
+              this._focusedIndex--;
+            }
+            break;
+          case 'ArrowDown':
+          case 'Down':
+            if (this._expanded) {
+              if (this._focusedIndex >= this._listbox.length - 1) {
+                this._focusedIndex = 0;
+              } else {
+                this._focusedIndex++;
+              }
+            } else {
+              if (!this._listbox) return;
+              this.showListbox();
+              this._focusedIndex = 0;
+            }
+            break;
+          case 'Escape':
+            if (!this._expanded) return;
+            this.closeListbox();
+            break;
+          case 'Tab':
+            this.closeListbox();
+            event.stopPropagation();
+            return; // Don't prevent default
+          default:
+            return;
+        }
+        event.stopPropagation(); // Avoid kbd within kbd (sub menus)
+        event.preventDefault();
+      },
+    },
+    slot: {
+      /**
+       * @param {{currentTarget: HTMLSlotElement}} event
+       * @type {any}
+       */
+      slotchange({ currentTarget }) {
+        if (this._expanded) return;
+        /** @type {Listbox[]} */
+        const [listbox] = currentTarget.assignedElements();
+        const { _listbox } = this;
+        if (_listbox === listbox) {
+          // Internal already matches
+          return;
+        }
+        if (_listbox) {
+          // Unbind and release
+          _listbox.removeEventListener('change', this._onListboxChangeListener);
+          this._onListboxChangeListener = null;
+        }
+        if (listbox) {
+          // Bind and store
+          this._onListboxChangeListener = this.onListboxChange.bind(this);
+          listbox.addEventListener('change', this._onListboxChangeListener);
+        }
+        this._listbox = listbox;
+      },
+    },
+  })
+  .events({
+    blur({ relatedTarget }) {
+      if (!this._expanded) return;
+      // Ignore if focus lost to pop-up (likely pointerdown).
+      if (relatedTarget && getSharedPopup().contains(relatedTarget)) return;
+      this.closeListbox();
+    },
+  })
+  .expressions({
+    ariaExpandedAttrValue({ _hasListbox, _expanded }) {
+      return _hasListbox ? `${_expanded}` : null;
+    },
+    ariaControlsAttrValue({ _hasListbox }) {
+      return _hasListbox ? 'aria-listbox' : null;
+    },
+    ariaAutocompleteAttrValue({ _hasListbox, suggestInline }) {
+      return _hasListbox
+        ? (suggestInline ? 'both' : 'list')
+        : null;
+    },
+    ariaActiveDescendantAttrValue({ _hasListbox, _expanded, _focusedValue }) {
+      return _hasListbox
+        // eslint-disable-next-line unicorn/no-nested-ternary
+        ? ((_expanded && _focusedValue) ? 'aria-active' : '')
+        : null;
+    },
+  })
+  .on({
+    composed() {
+      const { control } = this.refs;
+      // Can't cross DOM boundaries
+      control.setAttribute('aria-activedescendant', '{ariaActiveDescendantAttrValue}');
+      control.setAttribute('aria-autocomplete', '{ariaAutocompleteAttrValue}');
+      control.setAttribute('aria-controls', '{ariaControlsAttrValue}');
+      control.setAttribute('aria-expanded', '{ariaExpandedAttrValue}');
+    },
+  })
+  .html`
+    <slot id=slot></slot>
+    <div id=aria-listbox role=listbox>
+      <div id=aria-active role=option aria-setsize="{_listbox.length}" aria-posinset={_focusedPosInSet} aria-label={selectedOption.label}></div>
+    </div>
+  `
+  .css`
+    #slot {
+      display: none;
+    }
+
+    #aria-listbox {
+      display: none;
+    }
+  `
   .autoRegister('mdw-input');