@shortfuse/materialdesignweb 0.4.0 → 0.7.0

package/components/Fab.js

@@ -0,0 +1,26 @@
+import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
+
+import ExtendedFab from './ExtendedFab.js';
+import styles from './Fab.css' assert { type: 'css' };
+
+export default ExtendedFab
+  .mixin(TooltipTriggerMixin)
+  .extend()
+  .observe({
+    fabSize: {
+      /** @type {null|'small'|'large'} */
+      value: null,
+    },
+  })
+  .css(styles)
+  .on({
+    composed() {
+      const { slot, tooltipSlot, control, shape, icon } = this.refs;
+      slot.remove();
+      tooltipSlot.removeAttribute('name');
+      control.setAttribute('aria-labelledby', 'tooltip');
+      shape.setAttribute('fab-size', '{fabSize}');
+      icon.setAttribute('fab-size', '{fabSize}');
+    },
+  })
+  .autoRegister('mdw-fab');

package/components/FilterChip.css

@@ -0,0 +1,80 @@
+/* https://m3.material.io/components/chips/specs */
+
+/* Filter Chips can be elevated */
+
+:host {
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+  --mdw-bg: var(--mdw-color__secondary-container);
+  gap: 8px;
+
+  padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
+  padding-inline-end: max(12px, calc(16px + (var(--mdw-density) * 2px)));
+
+  color: rgb(var(--mdw-color__on-surface-variant));
+
+}
+
+:host(:focus) {
+  --mdw-outline__rgb: var(--mdw-color__outline);
+}
+
+#icon[selected] {
+  font-variation-settings: 'FILL' 1;
+}
+
+#shape {
+  background-color: transparent;
+}
+
+:host(:where([trailing-icon],[dropdown],[trailing-src])) {
+  padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
+}
+
+#shape[elevated] {
+  background-color: rgb(var(--mdw-color__surface));
+}
+
+#shape[selected] {
+  background-color: rgb(var(--mdw-bg));
+}
+
+:host([selected]) {
+  color: rgb(var(--mdw-ink));
+}
+
+#outline[selected] {
+  opacity: 0;
+}
+
+#trailing-icon {
+  position: relative;
+
+  font-size: 18px;
+}
+
+.mdw-chip__checkbox {
+  position: absolute;
+
+  max-block-size: 0;
+  max-inline-size: 0;
+
+  appearance: none;
+  pointer-events: none;
+}
+
+#check-icon {
+  font-size: 0;
+}
+
+#check-icon[selected] {
+  font-size: 18px;
+}
+
+#check-icon[disabled] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#shape[disabled]:is([elevated],[selected]) {
+  background-color: rgba(var(--mdw-color__on-surface), 0.12);
+  /* color: rgba(var(--mdw-color__on-surface), 0.38); */
+}

package/components/FilterChip.js

@@ -0,0 +1,51 @@
+import './Icon.js';
+
+import Chip from './Chip.js';
+import styles from './FilterChip.css' assert { type: 'css' };
+
+export default Chip
+  .extend()
+  .observe({
+    type: { empty: 'checkbox' },
+    dropdown: 'boolean',
+    trailingSrc: 'string',
+    trailingIcon: 'string',
+  })
+  .expressions({
+    computedTrailingIcon: ({ trailingIcon, dropdown, trailingSrc }) => {
+      if (trailingIcon) return trailingIcon;
+      if (dropdown) return 'arrow_drop_down';
+      if (trailingSrc) return '';
+      return null;
+    },
+  })
+  .css(styles)
+  .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>
+  `
+  .on({
+    composed() {
+      const { shape, icon, control, outline, slot, trailingIcon, checkIcon } = this.refs;
+
+      shape.setAttribute('selected', '{checked}');
+      shape.setAttribute('icon', '');
+      shape.setAttribute('trailing-icon', '{computedTrailingIcon}');
+      icon.setAttribute('_if', '{icon}');
+      icon.setAttribute('ink', '{iconInk}');
+
+      control.removeAttribute('role');
+      control.setAttribute('type', 'checkbox');
+
+      outline.removeAttribute('ink');
+      outline.removeAttribute('color');
+      outline.setAttribute('selected', '{checked}');
+
+      slot.removeAttribute('ink');
+      slot.removeAttribute('color');
+
+      slot.before(checkIcon);
+      slot.after(trailingIcon);
+    },
+  })
+  .autoRegister('mdw-filter-chip');

package/components/Headline.css

@@ -0,0 +1,14 @@
+:host {
+  font: var(--mdw-typescale__headline-large__font);
+  letter-spacing: var(--mdw-typescale__headline-large__letter-spacing);
+}
+
+:host([size="medium"]) {
+  font: var(--mdw-typescale__headline-medium__font);
+  letter-spacing: var(--mdw-typescale__headline-medium__letter-spacing);
+}
+
+:host([size="small"]) {
+  font: var(--mdw-typescale__headline-small__font);
+  letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
+}

package/components/Headline.js

@@ -0,0 +1,33 @@
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import Box from './Box.js';
+import styles from './Headline.css' assert { type: 'css' };
+
+export default Box
+  .mixin(ThemableMixin)
+  .extend()
+  .css(styles)
+  .observe({
+    ariaLevel: 'string',
+    size: {
+      type: 'string',
+      /** @type {'large'|'medium'|'small'} */
+      empty: 'large',
+    },
+  })
+  .expressions({
+    computeAriaLevel({ ariaLevel, size }) {
+      if (ariaLevel) return ariaLevel;
+      if (size === 'medium') return '2';
+      if (size === 'small') return '3';
+      return '1';
+    },
+  })
+  .on({
+    composed() {
+      const { slot } = this.refs;
+      slot.setAttribute('role', 'heading');
+      slot.setAttribute('aria-level', '{computeAriaLevel}');
+    },
+  })
+  .autoRegister('mdw-headline');

package/components/Icon.css

@@ -0,0 +1,76 @@
+/* https://material.io/design/iconography/system-icons.html */
+
+:host {
+  display: inline-block;
+  vertical-align: -11.5%;
+
+  block-size: 1em;
+  inline-size: 1em;
+
+  -webkit-user-select: none;
+  user-select: none;
+
+  font-variation-settings: 'FILL' 1;
+
+  transition-duration: 200ms;
+  /* stylelint-disable-next-line liberty/use-logical-spec -- Safari does not animate inline-size */
+  transition-property: inline-size, width;
+}
+
+:host(:is([color],[ink])) {
+  color: rgb(var(--mdw-ink));
+}
+
+#icon {
+  /* Clip bounds in case font is not ready */
+  display: block;
+  overflow: clip;
+
+  block-size: 1em;
+  inline-size: 1em;
+
+  font-size: inherit;
+  font-variation-settings: inherit;
+
+  transition-delay: 1ms;
+  transition-duration: 200ms;
+
+  transition-property: font-variation-settings;
+}
+
+#icon[hidden] {
+  display: none;
+}
+
+#svg {
+  display: block;
+
+  block-size: inherit;
+  inline-size: inherit;
+
+  fill: currentColor;
+
+  object-fit: cover;
+}
+
+#img {
+  display: block;
+
+  block-size: inherit;
+  inline-size: inherit;
+
+  object-fit: cover;
+
+  transition-delay: 1ms;
+  transition-duration: 200ms;
+  transition-property: filter;
+}
+
+#img[disabled] {
+  filter: grayscale();
+}
+
+.material-symbols-outlined {
+  /* https://github.com/google/material-design-icons/issues/750 */
+  direction: inherit;
+}

package/components/Icon.js

@@ -0,0 +1,174 @@
+// import fontStyles from 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&display=block' assert { type: 'css'};
+
+import CustomElement from '../core/CustomElement.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+import styles from './Icon.css' assert { type: 'css' };
+
+/** @type {Map<string, {path:string, viewBox:string}>} */
+const svgAliasMap = new Map();
+const unaliased = new Set();
+
+const documentLoadedStyleSheets = new Set();
+
+/** @typedef {'align'|'border'|'hspace'|'longDesc'|'lowsrc'|'name'|'vspace'} DeprecatedHTMLImageElementProperties */
+
+// https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement
+
+/** @implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
+export default class Icon extends CustomElement
+  .mixin(ThemableMixin)
+  .extend()
+  .define({
+    _img() { return /** @type {HTMLImageElement} */ (this.refs.img); },
+  })
+  .define({
+    naturalWidth() { return this._img.naturalWidth; },
+    naturalHeight() { return this._img.naturalHeight; },
+    complete() { return this._img.complete; },
+    currentSrc() { return this._img.currentSrc; },
+    x() { return this._img.x; },
+    y() { return this._img.y; },
+    decode() { return this._img.decode; },
+  })
+  .observe({
+    _slottedText: 'string',
+    disabled: 'boolean',
+    alt: 'string',
+    src: 'string',
+    svg: 'string',
+    svgPath: 'string',
+    srcset: 'string',
+    sizes: 'string',
+    crossOrigin: { attr: 'crossorigin' },
+    useMap: { attr: 'usemap' },
+    isMap: { type: 'boolean', attr: 'ismap' },
+    referrerPolicy: { attr: 'referrerpolicy' },
+    decoding: { value: /** @type {'async'|'sync'|'auto'} */ (null) },
+    loading: { value: /** @type {'eager'|'lazy'} */ (null) },
+    width: 'integer',
+    height: 'integer',
+    forceFont: 'boolean',
+    _linkLoaded: 'boolean',
+    viewBox: { attr: 'viewBox' },
+    fontClass: { empty: 'material-symbols-outlined' },
+    fontLibrary: { empty: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&display=block' },
+  })
+  .observe({
+    _svgAlias: {
+      type: 'object',
+      get({ _slottedText }) {
+        if (!_slottedText) return null;
+        const result = svgAliasMap.get(_slottedText.trim().toLowerCase());
+        if (!result) {
+          unaliased.add(_slottedText);
+          console.warn(`Icon: No SVG alias for ${JSON.stringify([...unaliased])}`);
+        }
+        return result;
+      },
+    },
+  })
+  .observe({
+    _computedSVGPath({ svgPath, _svgAlias }) {
+      return svgPath || _svgAlias?.path;
+    },
+    _computedViewBox({ viewBox, _svgAlias }) {
+      return viewBox ?? _svgAlias?.viewBox ?? '0 0 24 24';
+    },
+  })
+  .observe({
+    _showSlot: {
+      type: 'boolean',
+      get({ _slottedText, svg, _computedSVGPath, src }) {
+        return _slottedText && !svg && !_computedSVGPath && !src;
+      },
+    },
+  })
+  .css(styles)
+  .expressions({
+    showSVG({ svg, _computedSVGPath }) {
+      return Boolean(svg || _computedSVGPath);
+    },
+
+  })
+  .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}"/>
+    </svg>
+    <img _if={src} id=img
+      disabled={disabled}
+      alt={alt} src={src} srcset={srcset} sizes={sizes}
+      crossorigin={crossOrigin} usemap={useMap} ismap={isMap}
+      referrerpolicy={referrerPolicy} decoding={decoding} loading={loading}
+      width={width} height={height}
+    />
+    <slot id=icon class={fontClass} hidden={!_showSlot} aria-hidden=true></slot>
+  `
+  .childEvents({
+    icon: {
+      slotchange() {
+        this._slottedText = this.textContent;
+      },
+    },
+    link: {
+      /**
+       * @param {{currentTarget: HTMLLinkElement}} event
+       * @type {any}
+       */
+      load({ currentTarget }) {
+        const { href, parentNode } = currentTarget;
+        if (!parentNode) {
+          console.warn('Icon: parentNode is blank');
+        }
+        if (documentLoadedStyleSheets.has(href)) return;
+        console.debug('Icon: Checking if link also in document', href);
+        for (const link of document.head.getElementsByTagName('link')) {
+          if (link.href === href) {
+            console.debug(`Icon: Found ${href} in document.`);
+            documentLoadedStyleSheets.add(href);
+            return;
+          }
+        }
+        console.debug(`Icon: Adding ${href} to document.`);
+        document.head.append(currentTarget.cloneNode());
+        documentLoadedStyleSheets.add(href);
+      },
+    },
+  }) {
+  static get svgAliasMap() { return svgAliasMap; }
+
+  static get svgUnaliased() { return unaliased; }
+
+  /**
+   * @param {string} name
+   * @param {string} path
+   * @param {string} [viewBox]
+   */
+  static addSVGAlias(name, path, viewBox = '0 0 24 24') {
+    name = name.toLowerCase();
+    if (path) {
+      svgAliasMap.set(name, { path, viewBox });
+    } else {
+      svgAliasMap.delete(name);
+    }
+  }
+
+  /**
+   * @param {number} [width]
+   * @param {number} [height]
+   */
+  constructor(width, height) {
+    super();
+
+    if (width != null) {
+      this.width = width;
+    }
+    if (height != null) {
+      this.height = height;
+    }
+  }
+}
+
+Icon.autoRegister('mdw-icon');

package/components/IconButton.css

@@ -0,0 +1,151 @@
+/* https://m3.material.io/components/icon-buttons/specs */
+
+:host {
+  --mdw-shape__size: var(--mdw-shape__full);
+  --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: max(8px, calc(8px + (var(--mdw-density) * 2px)));
+
+  background-color: transparent;
+
+  font-size: 24px;
+}
+
+:host(:where([type="checkbox"])) {
+  --mdw-ink: var(--mdw-color__primary);
+}
+
+/** Filled | Filled Checked */
+:host(:where([filled])) {
+  --mdw-ink: var(--mdw-color__on-primary);
+  --mdw-bg: var(--mdw-color__primary);
+  --mdw-surface__shadow__resting: none;
+  --mdw-surface__shadow__raised: none;
+}
+
+/** Tonal | Tonal Checked */
+:host(:where([filled="tonal"])) {
+  --mdw-ink: var(--mdw-color__on-secondary-container);
+  --mdw-bg: var(--mdw-color__secondary-container);
+}
+
+/** Outlined | Outlined Unchecked */
+:host(:where([outlined])) {
+  --mdw-ink: var(--mdw-color__on-surface-variant);
+}
+
+/** Outlined | Outlined Unchecked */
+:host(:where([outlined][type="checkbox"])) {
+  --mdw-bg: var(--mdw-color__inverse-surface);
+  --mdw-ink: var(--mdw-color__inverse-on-surface);
+}
+
+#label {
+  font-size: inherit;
+  letter-spacing: inherit;
+}
+
+#shape[toggle] {
+  background-color: transparent;
+}
+
+.colored[toggle] {
+  color: rgb(var(--mdw-color__on-surface-variant));
+}
+
+.colored[selected] {
+  /* background-color: rgb(var(--mdw-bg)); */
+  color: rgb(var(--mdw-ink));
+}
+
+#shape[filled][toggle] {
+  background-color: rgb(var(--mdw-color__surface-variant));
+}
+
+.colored[filled][toggle] {
+  color: rgb(var(--mdw-bg));
+}
+
+#shape[filled="tonal"][toggle] {
+  background-color: rgb(var(--mdw-color__surface-variant));
+}
+
+.colored[filled="tonal"][toggle] {
+  color: rgb(var(--mdw-color__on-surface-variant));
+}
+
+#shape[filled][selected] {
+  background-color: rgb(var(--mdw-bg));
+}
+
+.colored[filled][selected] {
+  color: rgb(var(--mdw-ink));
+}
+
+#shape[outlined] {
+  background-color: transparent;
+}
+
+.colored[outlined] {
+  color: inherit;
+}
+
+#shape[outlined][toggle] {
+  background-color: transparent;
+}
+
+.colored[outlined][toggle] {
+  color: rgb(var(--mdw-color__on-surface-variant));
+}
+
+#shape[outlined][selected] {
+  background-color: rgb(var(--mdw-bg));
+}
+
+.colored[outlined][selected] {
+  color: rgb(var(--mdw-ink));
+}
+
+#icon {
+  font-size: inherit;
+  font-variation-settings: 'FILL' 1;
+}
+
+#icon[toggle] {
+  font-variation-settings: 'FILL' 0;
+}
+
+#icon[selected] {
+  font-variation-settings: 'FILL' 1;
+}
+
+#outline[focused] {
+  opacity: 1;
+
+  color: inherit;
+}
+
+#outline[selected] {
+  opacity: 0;
+}
+
+/** Disabled */
+.colored[disabled] {
+  cursor: not-allowed;
+
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}
+
+#shape[disabled][filled],
+#shape[disabled][outlined][selected] {
+  background-color: rgba(var(--mdw-color__on-surface), 0.12);
+}
+
+.colored[disabled][filled],
+.colored[disabled][outlined][selected] {
+  color: rgba(var(--mdw-color__on-surface), 0.38);
+}

package/components/IconButton.js

@@ -0,0 +1,65 @@
+import TooltipTriggerMixin from '../mixins/TooltipTriggerMixin.js';
+
+import Button from './Button.js';
+import styles from './IconButton.css' assert { type: 'css' };
+
+export default Button
+  .mixin(TooltipTriggerMixin)
+  .extend()
+  .css(styles)
+  .observe({
+    _ariaPressed: {
+      get({ type, checked }) {
+        if (type !== 'checkbox') return null;
+        return checked ? 'true' : 'false';
+      },
+    },
+  })
+  .expressions({
+    isToggle({ type }) {
+      return type === 'checkbox';
+    },
+  })
+  .childEvents({
+    control: {
+      keydown(event) {
+        if (event.key !== 'Enter') return;
+        const input = /** @type {HTMLInputElement} */ (event.currentTarget);
+        if (input.type !== 'checkbox') return;
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+        event.preventDefault();
+        if (input.disabled) return;
+
+        // Simulate click
+        const clickEvent = new Event('click', { bubbles: true, cancelable: true, composed: true });
+        if (!input.dispatchEvent(clickEvent)) return;
+
+        // Toggle check and signal
+        input.checked = !input.checked;
+        input.dispatchEvent(new Event('change', { bubbles: true }));
+      },
+    },
+  })
+  .on({
+    composed() {
+      const { slot, shape, tooltipSlot, icon, label, surfaceTint, control, outline } = this.refs;
+      shape.classList.add('colored');
+      label.classList.add('colored');
+      for (const el of [shape, label, icon]) {
+        el.setAttribute('toggle', '{isToggle}');
+        el.setAttribute('selected', '{checked}');
+      }
+      slot.remove();
+      icon.removeAttribute('_if');
+      tooltipSlot.removeAttribute('name');
+
+      surfaceTint.remove();
+
+      control.setAttribute('aria-pressed', '{_ariaPressed}');
+      control.setAttribute('aria-labelledby', 'tooltip');
+
+      outline.setAttribute('selected', '{checked}');
+    },
+  })
+  .autoRegister('mdw-icon-button');

package/components/Input.js

@@ -0,0 +1,16 @@
+import CustomElement from '../core/CustomElement.js';
+import InputMixin from '../mixins/InputMixin.js';
+import StateMixin from '../mixins/StateMixin.js';
+import TextFieldMixin from '../mixins/TextFieldMixin.js';
+import ThemableMixin from '../mixins/ThemableMixin.js';
+
+export default CustomElement
+  .mixin(ThemableMixin)
+  .mixin(StateMixin)
+  .mixin(InputMixin)
+  .mixin(TextFieldMixin)
+  .extend()
+  .define({
+    stateTargetElement() { return this.refs.control; },
+  })
+  .autoRegister('mdw-input');

package/components/Label.css

@@ -0,0 +1,14 @@
+:host {
+  font: var(--mdw-typescale__label-large__font);
+  letter-spacing: var(--mdw-typescale__body-large__letter-spacing);
+}
+
+:host([size="medium"]) {
+  font: var(--mdw-typescale__label-medium__font);
+  letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+}
+
+:host([size="small"]) {
+  font: var(--mdw-typescale__label-small__font);
+  letter-spacing: var(--mdw-typescale__body-small__letter-spacing);
+}