@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/components/Tab.js

@@ -3,6 +3,9 @@
 import './Icon.js';
 
 import CustomElement from '../core/CustomElement.js';
+import { CHROME_VERSION } from '../core/dom.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import RippleMixin from '../mixins/RippleMixin.js';
 import ScrollListenerMixin from '../mixins/ScrollListenerMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
@@ -14,30 +17,18 @@ export default CustomElement
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(ScrollListenerMixin)
+  .mixin(HyperlinkMixin)
+  .mixin(DelegatesFocusMixin)
   .define({
     stateTargetElement() { return this.refs.anchor; },
-    /**
-     * Used to compute primary indicator size.
-     * Default to 24.
-     */
-    labelMetrics() {
-      const { slot, icon } = this.refs;
-      const target = slot.clientWidth ? slot : icon;
-      return {
-        width: target.clientWidth,
-        left: target.offsetLeft,
-      };
-    },
   })
   .set({
-    delegatesFocus: true,
     stateLayer: true,
   })
   .observe({
     active: 'boolean',
     icon: 'string',
     src: 'string',
-    href: 'string',
     ariaLabel: 'string',
   })
   .methods({
@@ -45,25 +36,48 @@ export default CustomElement
     focus(options) {
       this.refs.anchor.focus(options);
     },
+    computeLabelMetrics() {
+      const { slot, icon } = this.refs;
+      const target = slot.clientWidth ? slot : icon;
+      return {
+        width: target.clientWidth,
+        left: target.offsetLeft,
+      };
+    },
+  })
+  .expressions({
+    anchorAriaControls({ href }) {
+      return href?.startsWith('#') ? href.slice(1) : null;
+    },
+    anchorAriaSelected({ active }) {
+      return `${active}`;
+    },
+    anchorAriaDisabled({ disabledState }) {
+      return `${disabledState}`;
+    },
+    anchorHref({ href }) {
+      return href ?? '#';
+    },
+    iconIf({ icon, src }) {
+      return icon || src;
+    },
+    iconVariation({ active }) {
+      return active ? 'filled' : null;
+    },
   })
   .html`
-    <a id=anchor role=tab
-      aria-label={ariaLabel}
-      aria-controls=${({ href }) => (href?.startsWith('#') ? href.slice(1) : null)}
-      aria-selected=${({ active }) => (active ? 'true' : 'false')}
-      aria-disabled=${({ disabledState }) => `${disabledState}`}
-      disabled={disabledState}
-      href=${({ href }) => href ?? '#'}>
-      <mdw-icon mdw-if=${(data) => data.icon || data.src} id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
-      <slot id=slot></slot>
-    </a>
+    <mdw-icon mdw-if={iconIf} id=icon aria-hidden=true src={src} active={active} icon={icon} variation={iconVariation}></mdw-icon>
+    <slot id=slot></slot>
   `
-  .on({
-    composed() {
-      const { shape, rippleContainer, state } = this.refs;
-      shape.append(state, rippleContainer);
-      state.setAttribute('state-disabled', 'focus');
-    },
+  .recompose(({ refs: { anchor, icon, slot, state } }) => {
+    anchor.setAttribute('role', 'tab');
+    anchor.setAttribute('aria-label', '{ariaLabel}');
+    anchor.setAttribute('aria-controls', '{anchorAriaControls}');
+    anchor.setAttribute('aria-selected', '{anchorAriaSelected}');
+    anchor.setAttribute('aria-disabled', '{anchorAriaDisabled}');
+    anchor.setAttribute('disabled', '{disabledState}');
+    anchor.append(icon, slot);
+    state.setAttribute('state-disabled', 'focus');
   })
   .events({
     keydown(event) {
@@ -87,14 +101,24 @@ export default CustomElement
           return;
         }
         if (href.startsWith('#')) {
-          const root = /** @type {HTMLElement} */ this.getRootNode();
+          const root = /** @type {HTMLElement} */ (this.getRootNode());
+          /** @type {HTMLElement} */
           const el = root.querySelector(href);
           if (!el) {
             console.warn('Unknown element', href);
             return;
           }
           event.preventDefault();
-          el.scrollIntoView({ block: 'nearest', inline: 'start' });
+          // Chrome does not support scrolling two elements at the same time
+          // https://bugs.chromium.org/p/chromium/issues/detail?id=1430426
+          const behavior = CHROME_VERSION ? 'instant' : 'smooth';
+
+          el.scrollTo({ top: 0, behavior });
+          el.offsetParent.scrollTo({
+            // Scroll-snap will adjust with subpixel precision
+            left: el.offsetLeft,
+            behavior: 'smooth',
+          });
         }
       },
     },
@@ -106,6 +130,7 @@ export default CustomElement
       display: inline-flex;
 
       min-inline-size: 64px;
+      flex: none;
 
       cursor: pointer;
     }
@@ -136,8 +161,6 @@ export default CustomElement
       padding-block: 4px;
 
       font-size: 24px;
-      font-variation-settings: 'FILL' 0;
-
     }
 
     #shape[disabled],
@@ -152,10 +175,6 @@ export default CustomElement
       color: rgb(var(--mdw-ink));
     }
 
-    #icon[active] {
-      font-variation-settings: 'FILL' 1;
-    }
-
     #slot {
       display: block;
       overflow-x: hidden;

package/components/TabContent.js

@@ -121,6 +121,7 @@ export default CustomElement
         // @ts-ignore Skip cast
         this._panelNodes = slot.assignedElements()
           .filter((el) => el.tagName === TabPanel.elementName.toUpperCase());
+        this._panelMetrics = null;
         this.updatePanels();
       },
     },

package/components/TabList.js

@@ -4,6 +4,7 @@ import CustomElement from '../core/CustomElement.js';
 import KeyboardNavMixin from '../mixins/KeyboardNavMixin.js';
 import RTLObserverMixin from '../mixins/RTLObserverMixin.js';
 import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+import SemiStickyMixin from '../mixins/SemiStickyMixin.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
@@ -16,6 +17,10 @@ export default CustomElement
   .mixin(ResizeObserverMixin)
   .mixin(RTLObserverMixin)
   .mixin(ShapeMixin)
+  .mixin(SemiStickyMixin)
+  .observe({
+    scrollable: 'boolean',
+  })
   .set({
     /** @type {WeakRef<HTMLElement>} */
     _tabContentRef: null,
@@ -29,6 +34,7 @@ export default CustomElement
      *  right:number,
      *  center: number,
      *  label: {left:number, width:number},
+     *  tab: InstanceType<Tab>,
      *  index: number,
      * }[]}
      */
@@ -58,16 +64,7 @@ export default CustomElement
     },
   })
   .observe({
-    tabContentId: {
-      /**
-       * @param {string} oldValue
-       * @param {string} newValue
-       */
-      changedCallback(oldValue, newValue) {
-        // @ts-ignore Skip cast
-        this.tabContent = newValue ? document.getElementById(newValue) : null;
-      },
-    },
+    tabContentId: 'string',
     active: 'boolean',
     secondary: 'boolean',
     _indicatorStyle: { value: 'opacity: 0' },
@@ -108,14 +105,20 @@ export default CustomElement
     },
     tabMetrics() {
       // eslint-disable-next-line no-return-assign
-      return this._tabMetrics ??= [...this.tabs].map((tab, index) => ({
-        left: tab.offsetLeft,
-        width: tab.offsetWidth,
-        right: tab.offsetLeft + tab.offsetWidth,
-        center: tab.offsetLeft + (tab.offsetWidth / 2),
-        label: tab.labelMetrics,
-        index,
-      }));
+      return this._tabMetrics ??= [...this.tabs].map((tab, index) => {
+        if (!(tab instanceof Tab)) {
+          customElements.upgrade(tab);
+        }
+        return {
+          left: tab.offsetLeft,
+          width: tab.offsetWidth,
+          right: tab.offsetLeft + tab.offsetWidth,
+          center: tab.offsetLeft + (tab.offsetWidth / 2),
+          label: tab.computeLabelMetrics(),
+          tab,
+          index,
+        };
+      });
     },
     selectedIndex: {
       get() {
@@ -172,12 +175,19 @@ export default CustomElement
     clearCache() {
       this._tabMetrics = null;
     },
+    searchForTabContent() {
+      const { tabContentId, isConnected } = this;
+      if (!tabContentId) return;
+      if (!isConnected) return;
+      this.tabContent = this.getRootNode().getElementById(tabContentId);
+    },
     /** @param {InstanceType<Tab>} [tab] */
     updateIndicatorByTab(tab) {
       tab ??= this.selectedItem ?? this.tabs.item(0);
-
-      const width = this.secondary ? tab.clientWidth : tab.labelMetrics.width;
-      const position = this.secondary ? tab.offsetLeft : tab.offsetLeft + tab.labelMetrics.left;
+      const metrics = this.tabMetrics.find((m) => m.tab === tab);
+      if (!metrics) return;
+      const width = this.secondary ? metrics.width : metrics.label.width;
+      const position = this.secondary ? metrics.left : metrics.left + metrics.label.left;
       this._indicatorStyle = `--width: ${width}; --offset: ${position}px`;
     },
     updateIndicator(animate = false) {
@@ -208,7 +218,7 @@ export default CustomElement
       let center;
       if (leftMetrics === rightMetrics) {
         width = this.secondary ? leftMetrics.width : leftMetrics.label.width;
-        activeTab = this.tabs.item(leftIndex);
+        activeTab = leftMetrics.tab;
         center = leftMetrics.center;
       } else {
         const leftRatio = 1 - (decimalIndex - leftIndex);
@@ -218,7 +228,7 @@ export default CustomElement
         const activeIndex = leftRatio > rightRatio ? leftIndex : rightIndex;
         const distance = rightMetrics.center - leftMetrics.center;
         width = leftWidth + rightWidth;
-        activeTab = this.tabs.item(activeIndex);
+        activeTab = this.tabMetrics[activeIndex].tab;
         center = leftMetrics.center + (distance * rightRatio);
       }
 
@@ -258,7 +268,7 @@ export default CustomElement
     ariaRole: 'tablist',
   })
   .html`
-    <slot id=slot ink={ink} type-style={typeStyle}></slot>
+    <slot id=slot ink={ink} type-style={typeStyle} scrollable={scrollable}></slot>
     <div id=indicator aria-hidden=true style={_indicatorStyle} active={active} secondary={secondary}>
       <div id=indicator-start class=indicator-piece></div>
       <div id=indicator-center class=indicator-piece></div>
@@ -266,9 +276,11 @@ export default CustomElement
     </div>
   `
   .on({
-    composed() {
-      const { shape, indicator } = this.refs;
-      shape.append(indicator);
+    constructed() {
+      document.addEventListener('DOMContentLoaded', () => this.searchForTabContent(), { once: true });
+    },
+    connected() {
+      this.searchForTabContent();
     },
     pageIsRTLChanged() {
       this.clearCache();
@@ -286,6 +298,9 @@ export default CustomElement
     _selectedIndexChanged(oldValue, newValue) {
       this.updateIndicatorByIndex(newValue);
     },
+    tabContentIdChanged() {
+      this.searchForTabContent();
+    },
   })
   .events({
     '~click'({ target }) {
@@ -301,6 +316,7 @@ export default CustomElement
       slotchange() {
         this.clearCache();
         this.updateIndicator();
+        this.searchForTabContent();
       },
     },
   })
@@ -309,7 +325,7 @@ export default CustomElement
 
     :host {
       --mdw-ink: var(--mdw-color__primary);
-      --mdw-shape__bg: rgb(var(--mdw-color__surface));
+      --mdw-bg: var(--mdw-color__surface);
       position: relative;
       position: sticky;
       inset-block-start: 0;
@@ -327,6 +343,8 @@ export default CustomElement
       inline-size: 100%;
       flex:none;
 
+      z-index: 4;
+
       color: inherit;
 
       text-align: center;
@@ -334,6 +352,10 @@ export default CustomElement
       will-change: transform;
     }
 
+    :host(:where([color])) {
+      background-color: rgb(var(--mdw-bg));
+    }
+
     #indicator {
       --corner: 3;
       --width: 24;
@@ -428,11 +450,17 @@ export default CustomElement
     }
 
     :host([scrollable]) {
-      grid-auto-columns: max-content;
-      justify-content: flex-start;
-      overflow-x: auto;
+      display: flex;
+      justify-content: initial;
+    }
+
+    #slot[scrollable] {
+      display: inline-flex;
+
+      inline-size: 0;
+      flex: 1;
 
-      padding-inline: 48px
+      padding-inline: 48px;
     }
   `
   .autoRegister('mdw-tab-list');

package/components/TabPanel.js

@@ -34,7 +34,7 @@ export default Box
 
     :host(:is([active],[peeking])) {
       /* Safari bug: Visiblity not changing without !important or layout reflow */
-      visibility: visible !important;
+      visibility: inherit !important;
     }
   `
   .autoRegister('mdw-tab-panel');

package/components/Table.js

@@ -0,0 +1,116 @@
+import CustomElement from '../core/CustomElement.js';
+
+// https://html.spec.whatwg.org/multipage/tables.html#htmltableelement
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @return {Element?}
+ */
+function getByTagName(parent, tagName) {
+  for (const element of parent.children) {
+    if (element.tagName === tagName) {
+      return element;
+    }
+  }
+  return null;
+}
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @param {Element|null} value
+ * @param {string} errorMessage
+ * @return {Element?}
+ */
+function setByTagName(parent, tagName, value, errorMessage) {
+  const current = getByTagName(parent, tagName);
+  if (!value) {
+    current?.remove();
+    return undefined;
+  }
+  if (value === current) return value;
+  if (value instanceof HTMLElement && value.tagName === tagName) {
+    if (current) {
+      current.replaceWith(value);
+    } else {
+      this.prepend(value);
+    }
+    return value;
+  }
+  throw new TypeError(errorMessage);
+}
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @return {Element?}
+ */
+function createByTagName(parent, tagName) {
+  let element = this.getByTagName(parent, tagName);
+  if (element) return element;
+  element = document.createElement(tagName);
+  this.prepend(element);
+  return element;
+}
+
+/**
+ * @param {Element} parent
+ * @param {string} tagName
+ * @return {void}
+ */
+function deleteByTagName(parent, tagName) {
+  this.setByTagName(parent, tagName, null);
+}
+
+/** -implements {HTMLTableElement} */
+CustomElement
+  .extend()
+  .define({
+    caption: {
+      get() {
+        return getByTagName(this, 'mdw-caption');
+      },
+      set(value) {
+        return setByTagName(this, 'mdw-caption', value, "Failed to set the 'caption' property on 'MDWTableElement': Failed to convert value to 'MDWCaptionElement'.");
+      },
+    },
+    tHead: {
+      get() {
+        return getByTagName(this, 'mdw-thread');
+      },
+      set(value) {
+        return setByTagName(this, 'mdw-thead', value, "Failed to set the 'tHead' property on 'MDWTableElement': Failed to convert value to 'MDWTHeadElement'.");
+      },
+    },
+    tFoot: {
+      get() {
+        return getByTagName(this, 'mdw-tfoot');
+      },
+      set(value) {
+        return setByTagName(this, 'mdw-tfoot', value, "Failed to set the 'tFoot' property on 'MDWTableElement': Failed to convert value to 'MDWTFootElement'.");
+      },
+    },
+    tBodies() {
+      return this.getElementsByTagName('mdw-tbody');
+    },
+    rows() {
+      return this.getElementsByTagName('mdw-tr');
+    },
+  })
+  .methods({
+    createCaption() { return createByTagName(this, 'mdw-caption'); },
+    deleteCaption() { return deleteByTagName(this, 'mdw-caption'); },
+    createTHead() { return createByTagName(this, 'mdw-thead'); },
+    deleteTHead() { return deleteByTagName(this, 'mdw-thead'); },
+    createTFoot() { return createByTagName(this, 'mdw-tfoot'); },
+    deleteTFoot() { return deleteByTagName(this, 'mdw-tfoot'); },
+    createTBody() { return this.insertBefore(this.tFoot, document.createElement('mdw-tbody')); },
+  })
+  .html`<slot id=slot></slot>`
+  .css`
+    :host{
+      display:table;
+    }
+  `
+  .autoRegister('mdw-table');

package/components/TextArea.js

@@ -135,9 +135,7 @@ export default CustomElement
       this._resizing = false;
       // if (this.placeholder) textarea.setAttribute('placeholder', this.placeholder);
     },
-
-    /** @param {ResizeObserverEntry} entry */
-    onResizeObserved(entry) {
+    onResizeObserved() {
       if (this.matches(':active')) return;
       this.resize();
     },
@@ -167,19 +165,18 @@ export default CustomElement
       },
     },
   })
+  .recompose(({ refs: { control } }) => {
+    // Spec
+    control.removeAttribute('placeholder');
+    control.setAttribute('rows', '{rows}');
+
+    // Custom
+    control.setAttribute('input-prefix', '{inputPrefix}');
+    control.setAttribute('input-suffix', '{inputSuffix}');
+    control.setAttribute('fixed', '{fixed}');
+    control.setAttribute('icon', '{icon}');
+  })
   .on({
-    composed() {
-      const { control } = this.refs;
-      // Spec
-      control.removeAttribute('placeholder');
-      control.setAttribute('rows', '{rows}');
-
-      // Custom
-      control.setAttribute('input-prefix', '{inputPrefix}');
-      control.setAttribute('input-suffix', '{inputSuffix}');
-      control.setAttribute('fixed', '{fixed}');
-      control.setAttribute('icon', '{icon}');
-    },
     defaultValueAttrChanged(oldValue, newValue) {
       this.defaultValue = newValue;
     },
@@ -286,6 +283,10 @@ export default CustomElement
         max-block-size: calc((var(--max-rows) * var(--line-height)));
       }
 
+      #icon {
+        margin-inline-end: 16px;
+      }
+
       #control[icon] {
         padding-inline-start: 0;
       }

package/components/Title.js

@@ -1,14 +1,9 @@
-import Headline from './Headline.js';
+import Display from './Display.js';
 
-export default Headline
+export default Display
   .extend()
-  .expressions({
-    computeAriaLevel({ ariaLevel, size }) {
-      if (ariaLevel) return ariaLevel;
-      if (size === 'medium') return '5';
-      if (size === 'small') return '6';
-      return '4';
-    },
+  .set({
+    _baseAriaLevel: 7,
   })
   .css`
     :host {

package/components/Tooltip.js

@@ -1,9 +1,14 @@
+import CustomElement from '../core/CustomElement.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
 
-import Surface from './Surface.js';
+/* https://m3.material.io/components/tooltips/specs */
 
-export default Surface
+export default CustomElement
   .extend()
+  .mixin(ThemableMixin)
+  .mixin(ShapeMixin)
   .mixin(AriaReflectorMixin)
   .set({
     _ariaRole: 'tooltip',
@@ -15,48 +20,65 @@ export default Surface
         this.updateAriaProperty('ariaHidden', newValue ? 'true' : 'false');
       },
     },
-    touch: 'boolean',
   })
+  .html`
+    <div id=hover-target></div>
+    <slot id=slot></slot>
+    `
   .css`
-    /* https://m2.material.io/components/tooltips */
-
     :host {
       --mdw-shape__size: var(--mdw-shape__extra-small);
-      --mdw-ink: var(--mdw-color__on-surface-variant);
-      --mdw-shape__bg: rgb(var(--mdw-color__surface-container));
+      --mdw-ink: var(--mdw-color__inverse-on-surface);
+      --mdw-bg: var(--mdw-color__inverse-surface);
       display: block;
-      vertical-align: middle;
 
       box-sizing: border-box;
-      /* stylelint-disable-next-line declaration-property-value-disallowed-list */
-      margin-inline: auto;
-      padding-block: 4px;
+
+      /* Ensure 24px min-height while keeping display:block */
+      padding-block: calc(12px - var(--mdw-typescale__body-small__line-height) / 2);
       padding-inline: 8px;
 
       pointer-events: none;
 
       opacity: 0;
       transform: scale(0);
-      z-index: 24;
+      z-index: 28;
 
-      font: var(--mdw-typescale__label-medium__font);
-      letter-spacing: var(--mdw-typescale__label-medium__letter-spacing);
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
 
-      transition: transform 200ms, opacity 200ms;
+      font: var(--mdw-typescale__body-small__font);
+      letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
 
+      transition: transform 200ms, opacity 200ms;
     }
 
-    :host([touch]) {
-      padding-block: 6px;
-      padding-inline: 16px;
-
-      font: var(--mdw-typescale__label-large__font);
-      letter-spacing: var(--mdw-typescale__label-large__letter-spacing);
+    @supports(width: 1lh) {
+      :host {
+        padding-block: calc(12px - 0.5lh);
+      }
     }
 
     :host([open]) {
+      pointer-events: auto;
+
       opacity: 1;
       transform: scale(1);
     }
+
+    #hover-target {
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+
+      box-sizing: content-box;
+      block-size: 100%;
+      inline-size: 100%;
+      padding: 8px;
+
+      transform: translateX(-50%) translateY(-50%);
+      z-index: -1;
+      
+    }
   `
   .autoRegister('mdw-tooltip');