@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/SwitchIcon.css

@@ -0,0 +1,177 @@
+/* https://m3.material.io/components/switch/specs */
+
+:host {
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-bg: var(--mdw-color__primary);
+  --mdw-shape__size: var(--mdw-shape__full);
+  --mdw-switch__value: 0;
+  container-type: inline-size;
+  container-name: switch-icon;
+
+  position: relative;
+
+  display: inline-block;
+
+  box-sizing: border-box;
+  block-size: 32px;
+  inline-size: 52px;
+}
+
+:host([selected]) {
+  --mdw-switch__value: 1;
+}
+
+:host([disabled]) {
+  opacity: 0.38;
+}
+
+#track{
+  position: absolute;
+  inset: 0;
+
+  background-color: rgb(var(--mdw-color__surface-variant));
+}
+
+#track[selected] {
+  background-color: rgb(var(--mdw-bg));
+}
+
+#track[disabled] {
+  opacity: calc(0.12/0.38);
+}
+
+#track[disabled][selected] {
+  background-color: rgb(var(--mdw-color__on-surface));
+}
+
+#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);
+
+  color: rgb(var(--mdw-color__outline));
+}
+
+#outline:is([pressed],[focused]) {
+  color: rgb(var(--mdw-color__outline));
+}
+
+#outline[disabled] {
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#outline[selected] {
+  color: transparent;
+}
+
+/** Thumb (state) **/
+
+#thumb {
+  --thumb-color: var(--mdw-ink);
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (52px - 100%)));
+
+  aspect-ratio: 1/1;
+}
+
+:dir(rtl) #thumb {
+  --mdw-dir: -1;
+}
+
+@supports(width: 1cqw) {
+  #thumb {
+    transform: translateX(calc(var(--mdw-dir, 1) * var(--mdw-switch__value) * (100cqw - 100%)));
+  }
+}
+
+#slot {
+  color: rgb(var(--mdw-color__on-surface));
+}
+
+#slot[selected] {
+  color: rgb(var(--mdw-bg));
+}
+
+/** Thumb Shape **/
+
+#thumb-shape {
+  --mdw-shape__size: inherit;
+
+  position: absolute;
+
+  inset: 2px;
+
+  transform: scale(calc(16/28));
+  z-index: 0;
+}
+
+#thumb-shape[icon] {
+  transform: scale(calc(24/28));
+}
+
+#thumb-shape:not([selected]) {
+  --mdw-bg: var(--mdw-color__outline);
+  --mdw-ink: var(--mdw-color__surface-variant);
+}
+
+#thumb-shape[selected] {
+  transform: scale(calc(24/28));
+}
+
+#thumb-shape[selected]:not([active]) {
+  --mdw-bg: var(--thumb-color);
+}
+
+#thumb-shape[pressed]:not([disabled]) {
+  transform: scale(1);
+}
+
+/** Thumb Icons **/
+
+.icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 50%;
+
+  opacity: 0;
+  transform: translateX(-50%) translateY(-50%);
+
+  font-size: 16px;
+
+  /* border-radius: 50%; */
+}
+
+.icon:not([src]):empty {
+  display: none;
+}
+
+#icon, #unselected-icon {
+  opacity: 1;
+
+  font-variation-settings: 'FILL' 0;
+}
+
+#unselected-icon[selected] {
+  opacity: 0;
+}
+
+#selected-icon[selected] {
+  opacity: 1;
+}
+
+#icon[selected] {
+  font-variation-settings: 'FILL' 1;
+}
+
+#thumb[disabled] {
+  color: rgb(var(--mdw-color__on-surface));
+}

package/components/SwitchIcon.js

@@ -0,0 +1,89 @@
+import './Icon.js';
+import './Shape.js';
+import CustomElement from '../core/CustomElement.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './SwitchIcon.css' assert {type: 'css'};
+import animations from './SwitchIconAnimations.css' assert {type:'css'};
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(ShapeMixin)
+  .observe({
+    selected: 'boolean',
+    icon: 'string',
+    errored: 'boolean',
+    disabled: 'boolean',
+    selectedIcon: 'string',
+    unselectedIcon: 'string',
+    src: 'string',
+    selectedSrc: 'string',
+    unselectedSrc: 'string',
+    hovered: 'boolean',
+    pressed: 'boolean',
+    focused: 'boolean',
+    dragValue: 'float',
+    color: { empty: 'primary' },
+  })
+  .observe({
+    /** Alias for Selected (QoL) */
+    checked: {
+      type: 'boolean',
+      get({ selected }) { return selected; },
+      /** @param {boolean} value */
+      set(value) { this.selected = value; },
+    },
+    _active({ disabled, pressed, focused, hovered }) {
+      return !disabled && (pressed || focused || hovered);
+    },
+  })
+  .observe({
+    _thumbColor({ color, _active }) {
+      return _active ? `${color}-container` : '';
+    },
+    _iconInk({ disabled, selected, color }) {
+      if (!selected) return 'surface-variant';
+      if (disabled) return 'on-surface';
+      return `on-${color}-container`;
+    },
+  })
+  .expressions({
+    hasIcon({ icon, src, unselectedIcon, unselectedSrc }) {
+      return Boolean(icon || src || unselectedIcon || unselectedSrc);
+    },
+  })
+  .css(styles, animations)
+  .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>
+    </div>
+  `
+  .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');
+        this.refs.thumb.style.removeProperty('transition-duration');
+      } else {
+        this.refs.thumb.style.setProperty('--mdw-switch__value', `${newValue}`);
+        this.refs.thumb.style.setProperty('transition-duration', '0s');
+      }
+    },
+  })
+  .extend()
+  .autoRegister('mdw-switch-icon');

package/components/SwitchIconAnimations.css

@@ -0,0 +1,89 @@
+/* https://m3.material.io/components/switch/specs */
+
+:host {
+  /*FastOutLinearInInterpolator*/
+  --mdw-switch__transition-timing__collapse: cubic-bezier(0.4, 0.0, 1, 1);
+  --mdw-switch__transition-duration__collapse: 375ms;
+  /*LinearOutSlowInInterpolator*/
+  --mdw-switch__transition-timing__expand: cubic-bezier(0.0, 0.0, 0.2, 1);
+  --mdw-switch__transition-duration__expand: 500ms;
+  --scale-delay: var(--mdw-switch__transition-duration);
+
+  --mdw-switch__transition-duration: var(--mdw-switch__transition-duration__collapse);
+  --mdw-switch__transition-timing: var(--mdw-switch__transition-timing__collapse);
+  --mdw-switch__transition-delay__color: calc(var(--mdw-switch__transition-duration) / 2);
+  --mdw-switch__transition-delay__translate: calc(var(--mdw-switch__transition-duration) / 2);
+  --mdw-switch__transition-delay__scale: calc(var(--mdw-switch__transition-duration) / 2);
+
+  transition-delay: var(--mdw-switch__transition-delay__color);
+  transition-duration: calc(var(--mdw-switch__transition-duration) / 2);
+  /* 2 legged animation */
+  transition-timing-function: var(--mdw-switch__transition-timing);
+}
+
+#track {
+  transition-delay: var(--mdw-switch__transition-delay__color);
+  transition-duration: inherit;
+  transition-property: background-color;
+  transition-timing-function: inherit;
+}
+
+#outline {
+  transition-delay: var(--mdw-switch__transition-delay__color);
+  transition-duration: inherit;
+  transition-property: background-color, color;
+  transition-timing-function: inherit;
+}
+
+#thumb {
+  transition-delay: var(--mdw-switch__transition-delay__translate);
+  transition-duration: inherit;
+  transition-property: transform;
+  transition-timing-function: inherit;
+}
+
+#thumb-shape, .icon {
+  /* (selected => unselected): stall color+scale */
+  transition-delay: var(--mdw-switch__transition-delay__scale), var(--mdw-switch__transition-delay__color), var(--mdw-switch__transition-delay__color);
+  transition-duration: inherit;
+  transition-property: transform, background-color, color;
+  transition-timing-function: inherit;
+}
+
+:host([icon]) {
+  --mdw-switch__transition-delay__translate: 0s;
+}
+
+.icon {
+  transition-property: transform, opacity, color;
+}
+
+/* unselected => selected  */
+:host([selected]) {
+  --mdw-switch__transition-delay__color: 0s;
+  --mdw-switch__transition-delay__scale: 0s;
+  /* --mdw-switch__transition-delay__translate: 0s; */
+  --mdw-switch__transition-duration: var(--mdw-switch__transition-duration__expand);
+  --mdw-switch__transition-timing: var(--mdw-switch__transition-timing__expand);
+}
+
+/* active => selected */
+:host([selected][pressed]) {
+  /* --mdw-switch__transition-delay__color: 0s; */
+  /* --mdw-switch__transition-delay__scale: 0s; */
+  --mdw-switch__transition-delay__translate: 0s;
+}
+
+/* selected => unselected */
+:host(:not([selected])) {
+  /* --mdw-switch__transition-delay__color: 0s; */
+  /* --mdw-switch__transition-delay__scale: 0s; */
+  --mdw-switch__transition-delay__translate: 0s;
+}
+
+/* unselected => active */
+:host([pressed]:not([selected])) {
+  /* --mdw-switch__transition-delay__color: 0s; */
+  --mdw-switch__transition-delay__scale: 0s;
+  /* --mdw-switch__transition-delay__translate: 0s; */
+}

package/components/Tab.css

@@ -0,0 +1,85 @@
+/* https://m3.material.io/components/tabs/specs */
+
+:host {
+  display: inline-flex;
+
+  min-inline-size: 64px;
+
+  cursor: pointer;
+}
+
+#anchor {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+
+  box-sizing: border-box;
+  block-size: 100%;
+  inline-size: 100%;
+  flex: 1;
+
+  padding-block: 6px;
+  padding-inline: 12px;
+
+  cursor: pointer;
+  outline: none;
+
+  color: inherit;
+
+  text-decoration: inherit;
+}
+
+#icon {
+  padding-block: 4px;
+
+  font-size: 24px;
+  font-variation-settings: 'FILL' 0;
+
+}
+
+#shape[disabled],
+#anchor[disabled] {
+  cursor: not-allowed;
+
+  background-color: rgba(var(--mdw-color__on-surface), 0.12);
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+:host([active]) {
+  color: rgb(var(--mdw-ink));
+}
+
+#icon[active] {
+  font-variation-settings: 'FILL' 1;
+}
+
+#slot {
+  display: block;
+  overflow-x: hidden;
+  overflow-y: hidden;
+
+  max-block-size: var(--mdw-typescale__title-small__line-height);
+
+  max-inline-size: 100%;
+
+  cursor: inherit;
+  outline: none;
+
+  opacity: var(--mdw-nav-item__anchor__opacity, 1);
+  transform: translateY(var(--mdw-nav-item__offset-y, 0));
+
+  color: inherit;
+
+  font: var(--mdw-typescale__title-small__font);
+  letter-spacing: var(--mdw-typescale__title-small__letter-spacing);
+  text-align: center;
+  text-decoration: inherit;
+  text-overflow: ellipsis;
+  text-transform: none;
+  white-space: nowrap;
+  word-break: break-word;
+
+  transition: opacity, color, transform 200ms;
+  will-change: opacity, transform;
+}

package/components/Tab.js

@@ -0,0 +1,103 @@
+// https://w3c.github.io/aria/#tab
+
+import './Icon.js';
+
+import CustomElement from '../core/CustomElement.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';
+
+import styles from './Tab.css' assert { type: 'css' };
+
+export default CustomElement
+  .mixin(ShapeMixin)
+  .mixin(StateMixin)
+  .mixin(RippleMixin)
+  .mixin(ScrollListenerMixin)
+  .extend()
+  .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({
+    /** @type {HTMLElement['focus']} */
+    focus(options) {
+      this.refs.anchor.focus(options);
+    },
+  })
+  .css(styles)
+  .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');
+    },
+  })
+  .events({
+    keydown(event) {
+      if (event.key === ' ') {
+        event.preventDefault(); // Avoid vertical scroll
+        this.refs.anchor.click();
+      }
+    },
+  })
+  .childEvents({
+    anchor: {
+      click(event) {
+        if (this.disabledState) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        const { href } = this;
+        if (!href) {
+          event.preventDefault();
+          return;
+        }
+        if (href.startsWith('#')) {
+        /** @type {HTMLElement} */
+          const el = document.querySelector(href);
+          if (!el) { console.warn('Unknown element', href); }
+          event.preventDefault();
+          el.scrollIntoView({ block: 'nearest', inline: 'start' });
+        }
+      },
+    },
+  })
+  .autoRegister('mdw-tab');

package/components/TabContent.js

@@ -0,0 +1,151 @@
+import './TabList.js'; /* TabList must register before TabContent */
+import CustomElement from '../core/CustomElement.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+
+import TabPanel from './TabPanel.js';
+
+export default CustomElement
+  .mixin(ResizeObserverMixin)
+  .extend()
+  .css`
+    :host {
+      display: grid;
+      grid-auto-columns: 100%;
+      grid-auto-flow: column;
+      grid-template-columns: 100%;
+      overflow-x: auto;
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+      scrollbar-width: none;
+
+      flex-grow: 1;
+      -webkit-scroll-snap-type-x: mandatory;
+      scroll-snap-type-x: mandatory;
+      -webkit-scroll-snap-points-x: repeat(100%);
+      scroll-snap-points-x: repeat(100%);
+      overscroll-behavior-x: none;
+
+      will-change: transform; /* Avoid repaint on scroll */
+    }
+  `
+  .set({
+    /** @type {InstanceType<TabPanel>[]} */
+    _panelNodes: [],
+    /**
+     * @type {{
+     *  left:number,
+     *  width:number,
+     *  right:number,
+     *  center: number,
+     *  index: number,
+     * }[]}
+     */
+    _panelMetrics: null,
+  })
+  .observe({
+    /** Internal observed property */
+    _selectedIndex: {
+      type: 'integer',
+      empty: -1,
+    },
+  })
+  .define({
+    panels() {
+      return this._panelNodes;
+    },
+    panelMetrics() {
+      // eslint-disable-next-line no-return-assign
+      return this._panelMetrics ??= [...this._panelNodes].map((panel, index) => ({
+        left: panel.offsetLeft,
+        width: panel.offsetWidth,
+        right: panel.offsetLeft + panel.offsetWidth,
+        center: panel.offsetLeft + (panel.offsetWidth / 2),
+        index,
+      }));
+    },
+  })
+  .define({
+    selectedIndex: {
+      get() {
+        let index = 0;
+        for (const panel of this.panels) {
+          if (panel.active) return index;
+          index++;
+        }
+        return -1;
+      },
+      set(value) {
+        let index = 0;
+        for (const el of this.panels) {
+          if (index === value) {
+            el.active = true;
+            this._selectedIndex = index;
+          } else {
+            el.active = false;
+          }
+          index++;
+        }
+      },
+    },
+  })
+  .define({
+    selectedPanel: {
+    /**
+     * @return {InstanceType<TabPanel>}
+     */
+      get() {
+        return this.panels.find((panel) => panel.active);
+      },
+      /**
+       * @param {InstanceType<TabPanel>} value
+       * @return {InstanceType<TabPanel>}
+       */
+      set(value) {
+        const index = this.panels.indexOf(value);
+        if (index === -1) return null;
+        this.selectedIndex = index;
+        return value;
+      },
+    },
+  })
+  .html/* html */`<slot id=slot></slot>`
+  .methods({
+    onResizeObserved() {
+      this._panelMetrics = null;
+      // Resize should not change panel visibility
+    },
+    updatePanels() {
+      const start = this.scrollLeft;
+      const width = this.clientWidth;
+      const end = start + width;
+      for (const metric of this.panelMetrics) {
+        const visibleWidth = (start > metric.right) || (end < metric.left) // Offscreen ?
+          ? 0
+          : (
+            (start >= metric.left) // Scroll at or over panel left point?
+              ? metric.right - start // Measure from panel right
+              : end - metric.left // Measure from panel left
+          );
+        const percentage = visibleWidth / width;
+        const panel = this.panels[metric.index];
+        panel.active = percentage >= 0.5;
+        // TODO: Investigate possible subpixel imprecision
+        panel.peeking = percentage > 0 && percentage < 0.5;
+      }
+    },
+  })
+  .childEvents({
+    slot: {
+      slotchange(event) {
+        const slot = /** @type {HTMLSlotElement} */ (event.currentTarget);
+        // @ts-ignore Skip cast
+        this._panelNodes = slot.assignedElements()
+          .filter((el) => el.tagName === TabPanel.elementName.toUpperCase());
+        this.updatePanels();
+      },
+    },
+  })
+  .events({
+    scroll: 'updatePanels',
+  })
+  .autoRegister('mdw-tab-content');