@shortfuse/materialdesignweb 0.7.6 → 0.9.0

package/components/SwitchIcon.js

@@ -3,11 +3,14 @@ import './Shape.js';
 import CustomElement from '../core/CustomElement.js';
 import ShapeMixin from '../mixins/ShapeMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
+import { loadGlobalStyles } from '../services/rtl.js';
+
+loadGlobalStyles();
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(ShapeMixin)
-  .extend()
   .observe({
     selected: 'boolean',
     icon: 'string',
@@ -41,7 +44,7 @@ export default CustomElement
       return _active ? `${color}-container` : '';
     },
     _iconInk({ disabled, selected, color }) {
-      if (!selected) return 'surface-variant';
+      if (!selected) return 'surface-container-highest';
       if (disabled) return 'on-surface';
       return `on-${color}-container`;
     },
@@ -50,28 +53,29 @@ export default CustomElement
     hasIcon({ icon, src, unselectedIcon, unselectedSrc }) {
       return Boolean(icon || src || unselectedIcon || unselectedSrc);
     },
+    iconVariation({ selected }) {
+      return selected ? 'filled' : null;
+    },
   })
-  .html/* html */`
-    <div id=thumb selected={checked} pressed={pressed} disabled={disabled}>
-      <mdw-shape id=thumb-shape shape-style=full selected={checked} pressed={pressed} hovered={hovered} focused={focused} icon={hasIcon}
-       color={_thumbColor} active={_active} ink={_thumbInk} disabled={disabled}></mdw-shape>
-      <mdw-icon ink={_iconInk} class=icon id=icon src={src} selected={checked}>{icon}</mdw-icon>
-      <mdw-icon ink={_iconInk} class=icon id=selected-icon src={selectedIconSrc} selected={checked}>{selectedIcon}</mdw-icon>
-      <mdw-icon ink={_iconInk} class=icon id=unselected-icon src={unselectedIconSrc} selected={checked}>{unselectedIcon}</mdw-icon>
-      <slot id=slot selected={checked}></slot>
+  .html`
+    <div id=track selected={checked} disabled={disabled}>
+      <div id=thumb selected={checked} pressed={pressed} disabled={disabled}>
+        <mdw-box block id=thumb-shape selected={checked} pressed={pressed} hovered={hovered} focused={focused} icon={hasIcon}
+        color={_thumbColor} active={_active} ink={_thumbInk} disabled={disabled}></mdw-box>
+        <mdw-icon ink={_iconInk} class=icon id=icon src={src} selected={checked} icon={icon} variation={iconVariation}></mdw-icon>
+        <mdw-icon ink={_iconInk} class=icon id=selected-icon src={selectedIconSrc} selected={checked} icon={selectedIcon} variation=filled></mdw-icon>
+        <mdw-icon ink={_iconInk} class=icon id=unselected-icon src={unselectedIconSrc} selected={checked} icon={unselectedIcon}></mdw-icon>
+        <slot id=slot selected={checked}></slot>
+      </div>
     </div>
   `
+  .recompose(({ refs: { outline } }) => {
+    outline.removeAttribute('mdw-if');
+    outline.setAttribute('selected', '{checked}');
+    outline.setAttribute('errored', '{errored}');
+    outline.setAttribute('disabled', '{disabled}');
+  })
   .on({
-    composed() {
-      const { outline, shape: track } = this.refs;
-      track.id = 'track';
-      track.setAttribute('selected', '{checked}');
-      track.setAttribute('disabled', '{disabled}');
-      outline.removeAttribute('_if');
-      outline.setAttribute('selected', '{checked}');
-      outline.setAttribute('errored', '{errored}');
-      outline.setAttribute('disabled', '{disabled}');
-    },
     dragValueChanged(oldValue, newValue) {
       if (newValue == null) {
         this.refs.thumb.style.removeProperty('--mdw-switch__value');
@@ -115,7 +119,8 @@ export default CustomElement
       position: absolute;
       inset: 0;
 
-      background-color: rgb(var(--mdw-color__surface-variant));
+      background-color: rgb(var(--mdw-color__surface-container-highest));
+      border-radius: inherit;
     }
 
     #track[selected] {
@@ -123,19 +128,17 @@ export default CustomElement
     }
 
     #track[disabled] {
-      opacity: calc(0.12/0.38);
+      background-color: rgba(var(--mdw-color__surface-container-highest), calc(0.12/0.38));
     }
 
     #track[disabled][selected] {
-      background-color: rgb(var(--mdw-color__on-surface));
+      background-color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
     }
 
     #outline {
-      filter:
-        drop-shadow(1px 0px 0px currentColor)
-        drop-shadow(0px 1px 0px currentColor)
-        drop-shadow(-1px 0px 0px currentColor)
-        drop-shadow(0px -1px 0px currentColor);
+      border-width: 2px;
+
+      z-index: 1;
 
       color: rgb(var(--mdw-color__outline));
     }
@@ -145,7 +148,7 @@ export default CustomElement
     }
 
     #outline[disabled] {
-      color: rgb(var(--mdw-color__on-surface));
+      color: rgba(var(--mdw-color__on-surface), calc(0.12/0.38));
     }
 
     #outline[selected] {
@@ -166,6 +169,7 @@ export default CustomElement
 
       transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (52px - 100%)));
 
+      border-radius: inherit;
       aspect-ratio: 1/1;
     }
 
@@ -198,6 +202,8 @@ export default CustomElement
 
       transform: scale(calc(16/28));
       z-index: 0;
+
+      border-radius:inherit;
     }
 
     #thumb-shape[icon] {
@@ -206,7 +212,7 @@ export default CustomElement
 
     #thumb-shape:not([selected]) {
       --mdw-bg: var(--mdw-color__outline);
-      --mdw-ink: var(--mdw-color__surface-variant);
+      --mdw-ink: var(--mdw-color__surface-container-highest);
     }
 
     #thumb-shape[selected] {
@@ -221,12 +227,22 @@ export default CustomElement
       transform: scale(1);
     }
 
+    #thumb-shape[disabled] {
+      background-color: rgb(var(--mdw-color__on-surface));
+    }
+
+    #thumb-shape[disabled][selected] {
+      background-color: rgb(var(--mdw-color__surface));
+    }
+
     /** Thumb Icons **/
 
     .icon {
       position: absolute;
-      inset-block-start: 50%;
-      inset-inline-start: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      top: 50%;
+      /* stylelint-disable-next-line liberty/use-logical-spec */
+      left: 50%;
 
       opacity: 0;
       transform: translateX(-50%) translateY(-50%);
@@ -237,13 +253,11 @@ export default CustomElement
     }
 
     .icon:not([src]):empty {
-      display: none;
+      /* display: none; */
     }
 
     #icon, #unselected-icon {
       opacity: 1;
-
-      font-variation-settings: 'FILL' 0;
     }
 
     #unselected-icon[selected] {
@@ -254,10 +268,6 @@ export default CustomElement
       opacity: 1;
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
-    }
-
     #thumb[disabled] {
       color: rgb(var(--mdw-color__on-surface));
     }

package/components/Tab.js

@@ -3,42 +3,32 @@
 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';
 import StateMixin from '../mixins/StateMixin.js';
 
 export default CustomElement
+  .extend()
   .mixin(ShapeMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(ScrollListenerMixin)
-  .extend()
+  .mixin(HyperlinkMixin)
+  .mixin(DelegatesFocusMixin)
   .define({
     stateTargetElement() { return this.refs.anchor; },
-    /**
-     * Used to compute primary indicator size.
-     * Default to 24.
-     */
-    labelMetrics() {
-      const slot = this.refs.slot;
-      let target = this.refs.slot;
-      if (!slot.clientWidth) target = this.refs.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({
@@ -46,26 +36,49 @@ 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,
+      };
+    },
   })
-  .html/* 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 _if=${(data) => data.icon || data.src} id=icon aria-hidden=true src={src} active={active}>{icon}</mdw-icon>
-      <slot id=slot></slot>
-    </a>
-  `
-  .on({
-    composed() {
-      const { shape, rippleContainer, state } = this.refs;
-      shape.append(state, rippleContainer);
-      state.setAttribute('state-disabled', 'focus');
+  .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`
+    <mdw-icon mdw-if={iconIf} id=icon aria-hidden=true src={src} active={active} icon={icon} variation={iconVariation}></mdw-icon>
+    <slot id=slot></slot>
+  `
+  .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) {
       if (event.key === ' ') {
@@ -88,11 +101,24 @@ export default CustomElement
           return;
         }
         if (href.startsWith('#')) {
-        /** @type {HTMLElement} */
-          const el = document.querySelector(href);
-          if (!el) { console.warn('Unknown element', href); }
+          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',
+          });
         }
       },
     },
@@ -104,6 +130,7 @@ export default CustomElement
       display: inline-flex;
 
       min-inline-size: 64px;
+      flex: none;
 
       cursor: pointer;
     }
@@ -134,8 +161,6 @@ export default CustomElement
       padding-block: 4px;
 
       font-size: 24px;
-      font-variation-settings: 'FILL' 0;
-
     }
 
     #shape[disabled],
@@ -150,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

@@ -5,8 +5,8 @@ import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
 import TabPanel from './TabPanel.js';
 
 export default CustomElement
-  .mixin(ResizeObserverMixin)
   .extend()
+  .mixin(ResizeObserverMixin)
   .set({
     /** @type {InstanceType<TabPanel>[]} */
     _panelNodes: [],
@@ -87,11 +87,12 @@ export default CustomElement
       },
     },
   })
-  .html/* html */`<slot id=slot></slot>`
+  .html`<slot id=slot></slot>`
   .methods({
     onResizeObserved() {
       this._panelMetrics = null;
-      // Resize should not change panel visibility
+      this.updatePanels();
+      // Resize should not change panel visibility (Chrome Bug?)
     },
     updatePanels() {
       const start = this.scrollLeft;
@@ -120,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,18 +4,23 @@ 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';
 
 import Tab from './Tab.js';
 
 export default CustomElement
+  .extend()
   .mixin(ThemableMixin)
   .mixin(KeyboardNavMixin)
   .mixin(ResizeObserverMixin)
   .mixin(RTLObserverMixin)
   .mixin(ShapeMixin)
-  .extend()
+  .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);
       }
 
@@ -257,8 +267,8 @@ export default CustomElement
   .set({
     ariaRole: 'tablist',
   })
-  .html/* html */`
-    <slot id=slot ink={ink} type-style={typeStyle}></slot>
+  .html`
+    <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

@@ -3,8 +3,8 @@ import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
 import Box from './Box.js';
 
 export default Box
-  .mixin(AriaReflectorMixin)
   .extend()
+  .mixin(AriaReflectorMixin)
   .set({
     _ariaRole: 'tabpanel',
   })
@@ -17,21 +17,24 @@ export default Box
     },
     peeking: 'boolean',
   })
-  .css/* css */`
+  .css`
     :host {
+      overflow-y: auto;
       scroll-snap-align: center;
-      min-inline-size: 100%;
-      max-inline-size: 100%;
+
       min-block-size: 100%;
       max-block-size: 100%;
-      overflow-y: auto;
-      will-change: visibility;
+      min-inline-size: 100%;
+      max-inline-size: 100%;
 
-      visibility: hidden; 
+      visibility: hidden;
+
+      will-change: visibility; 
     }
+
     :host(:is([active],[peeking])) {
       /* Safari bug: Visiblity not changing without !important or layout reflow */
-      visibility: visible !important;;
+      visibility: inherit !important;
     }
   `
   .autoRegister('mdw-tab-panel');