@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/FilterChip.js

@@ -2,12 +2,21 @@ import './Icon.js';
 
 import Chip from './Chip.js';
 
+/**
+ * Filter chips use tags or descriptive words to filter content.
+ * They can be a good alternative to toggle buttons or checkboxes.
+ * @see https://m3.material.io/components/chips/specs
+ */
 export default Chip
   .extend()
   .observe({
+    /** Type of the chip; defaults to 'checkbox' for filter behavior. */
     type: { empty: 'checkbox' },
+    /** When true, shows a dropdown caret as the trailing icon. */
     dropdown: 'boolean',
+    /** Source URL for a trailing image/icon. */
     trailingSrc: 'string',
+    /** Name of the trailing icon to show. */
     trailingIcon: 'string',
   })
   .expressions({
@@ -17,33 +26,33 @@ export default Chip
       if (trailingSrc) return '';
       return null;
     },
+    iconVariation({ checked }) {
+      return checked ? 'filled' : null;
+    },
   })
   .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>
+    <mdw-icon mdw-if={!icon} id=check-icon disabled={disabledState} selected={checked} aria-hidden=true icon=check variation=filled></mdw-icon>
+    <mdw-icon mdw-if={computedTrailingIcon} id=trailing-icon aria-hidden=true src={trailingSrc} icon={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('mdw-if', '{icon}');
-      icon.setAttribute('ink', '{iconInk}');
+  .recompose(({ refs: { icon, control, outline, slot, trailingIcon, checkIcon } }) => {
+    icon.setAttribute('mdw-if', '{icon}');
+    icon.setAttribute('ink', '{iconInk}');
 
-      control.removeAttribute('role');
+    control.removeAttribute('role');
 
-      outline.removeAttribute('ink');
-      outline.removeAttribute('color');
-      outline.setAttribute('selected', '{checked}');
+    outline.removeAttribute('mdw-if');
+    outline.removeAttribute('ink');
+    outline.removeAttribute('color');
+    outline.setAttribute('selected', '{checked}');
+    outline.setAttribute('elevated', '{elevated}');
+    outline.setAttribute('icon', '');
+    outline.setAttribute('trailing-icon', '{computedTrailingIcon}');
 
-      slot.removeAttribute('ink');
-      slot.removeAttribute('color');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
 
-      slot.before(checkIcon);
-      slot.after(trailingIcon);
-    },
+    slot.before(checkIcon);
+    slot.after(trailingIcon);
   })
   .css`
     /* https://m3.material.io/components/chips/specs */
@@ -58,6 +67,8 @@ export default Chip
       padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
       padding-inline-end: max(12px, calc(16px + (var(--mdw-density) * 2px)));
 
+      background-color: transparent;
+
       color: rgb(var(--mdw-color__on-surface-variant));
 
     }
@@ -66,11 +77,9 @@ export default Chip
       --mdw-outline__rgb: var(--mdw-color__outline);
     }
 
-    #icon[selected] {
-      font-variation-settings: 'FILL' 1;
-    }
+    #outline {
+      z-index: -1;
 
-    #shape {
       background-color: transparent;
     }
 
@@ -78,22 +87,20 @@ export default Chip
       padding-inline-start: max(4px, calc(8px + (var(--mdw-density) * 2px)));
     }
 
-    #shape[elevated] {
-      background-color: rgb(var(--mdw-color__surface));
+    #outline[elevated] {
+      background-color: rgb(var(--mdw-color__surface-container-low));
+      border-color: transparent;
     }
 
-    #shape[selected] {
+    #outline[selected] {
       background-color: rgb(var(--mdw-bg));
+      border-color: transparent;
     }
 
     :host([selected]) {
       color: rgb(var(--mdw-ink));
     }
 
-    #outline[selected] {
-      opacity: 0;
-    }
-
     #trailing-icon {
       position: relative;
 
@@ -122,7 +129,11 @@ export default Chip
       color: rgba(var(--mdw-color__on-surface), 0.38);
     }
 
-    #shape[disabled]:is([elevated],[selected]) {
+    :host([disabled]:is([elevated], [filled])) {
+      background-color: transparent;
+    }
+
+    #outline[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/Grid.js

@@ -0,0 +1,187 @@
+import { ELEMENT_STYLE_TYPE } from '../core/customTypes.js';
+import ResizeObserverMixin from '../mixins/ResizeObserverMixin.js';
+
+import Box from './Box.js';
+
+/**
+ * Grid layout for arranging content into responsive columns.
+ * @see https://m3.material.io/foundations/layout/understanding-layout/parts-of-layout
+ */
+export default Box
+  .extend()
+  .mixin(ResizeObserverMixin)
+  .observe({
+    /** Enable CSS grid layout for children. */
+    grid: 'boolean',
+    /** Explicit number of columns; when set, disables auto column calculation. */
+    columns: 'integer',
+    /** Auto-calculated column count when `columns` is not provided. */
+    _autoColumns: {
+      type: 'integer',
+      empty: 4,
+    },
+    /** Last measured inline size (px) from ResizeObserver. */
+    _lastInlineSize: 'float',
+  })
+  .observe({
+    /** Whether resize observer should be active (disabled when explicit columns set). */
+    _resizeObserverEnabled: {
+      type: 'boolean',
+      get({ columns }) {
+        // Only use resize observer if using grid, not explicit columns
+        // and CSS containers are not supported.
+        return !columns;
+      },
+    },
+    /** Computed number of columns (either `columns` or `_autoColumns`). */
+    _computedColumns({ columns, _autoColumns }) {
+      if (columns) return columns;
+      if (_autoColumns) return _autoColumns;
+      return 4;
+    },
+  })
+  .overrides({
+    /** Update last observed inline size from ResizeObserver entry. */
+    onResizeObserved(entry) {
+      const { contentBoxSize } = entry;
+      if (!contentBoxSize.length) return;
+      const [{ inlineSize }] = contentBoxSize;
+      this._lastInlineSize = inlineSize;
+    },
+  })
+  .on({
+    _lastInlineSizeChanged(oldValue, inlineSize) {
+      if (inlineSize >= 840) {
+        this._autoColumns = 12;
+      } else if (inlineSize >= 600) {
+        this._autoColumns = 8;
+      } else {
+        this._autoColumns = 4;
+      }
+    },
+    connected() {
+      this._lastInlineSize = this.clientWidth;
+    },
+  })
+  .expressions({
+    _isFlex({ block, grid }) {
+      return !block && !grid;
+    },
+  })
+  .observe({
+    _styles: {
+      ...ELEMENT_STYLE_TYPE,
+      get({ _computedColumns }) {
+        if ((_computedColumns || 4) === 4) return '';
+        return { gridTemplateColumns: `repeat(${_computedColumns},1fr)` };
+      },
+    },
+  })
+  .recompose(({ refs: { slot } }) => {
+    slot.setAttribute('grid', '{grid}');
+    slot.setAttribute('flex', '{_isFlex}');
+    slot.setAttribute('columns', '{_computedColumns}');
+  })
+  .css`
+    :host {
+      display: grid;
+      column-gap: 16px; /* Gutters */
+      grid-auto-flow: row;
+      grid-template-columns: repeat(1fr, 4);
+    }
+
+    :host([y="start"]) { align-items: flex-start; }
+    :host([y="end"]) { align-items: flex-end; }
+    :host([y="center"]) { align-items: center; }
+    :host([y="between"]) { align-items: space-between; }
+    :host([y="around"]) { align-items: space-around; }
+    :host([y="stretch"]) { align-items: stretch; }
+    :host([x="start"]) { justify-content: flex-start; }
+    :host([x="end"]) { justify-content: flex-end; }
+    :host([x="center"]) { justify-content: center; }
+    :host([x="between"]) { justify-content: space-between; }
+    :host([x="stretch"]) { justify-content: stretch; }
+
+    #slot {
+      --mdw-grid__columns: 4;
+      --mdw-grid__columns__4: 1;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="4"] {
+      --mdw-grid__columns: 4;
+      --mdw-grid__columns__4: 1;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="8"] {
+      --mdw-grid__columns: 8;
+      --mdw-grid__columns__4: 0;
+      --mdw-grid__columns__8: 1;
+      --mdw-grid__columns__12: 0;
+    }
+
+    #slot[columns="12"] {
+      --mdw-grid__columns: 12;
+      --mdw-grid__columns__4: 0;
+      --mdw-grid__columns__8: 0;
+      --mdw-grid__columns__12: 1;
+    }
+
+    ::slotted(*) {
+      --mdw-grid__column-count: var(--mdw-grid__columns);
+      --mdw-grid__column-count__4: var(--mdw-grid__column-count);
+      --mdw-grid__column-count__8: var(--mdw-grid__column-count);
+      --mdw-grid__column-count__12: var(--mdw-grid__column-count);
+      grid-column: auto / span calc(
+        (min(var(--mdw-grid__column-count__4), 4) * var(--mdw-grid__columns__4))
+        + (min(var(--mdw-grid__column-count__8), 8) * var(--mdw-grid__columns__8))
+        + (min(var(--mdw-grid__column-count__12), 12) * var(--mdw-grid__columns__12))
+      );
+    }
+    ::slotted([col-span="1"]) { --mdw-grid__column-count: 1; }
+    ::slotted([col-span="2"]) { --mdw-grid__column-count: 2; }
+    ::slotted([col-span="3"]) { --mdw-grid__column-count: 3; }
+    ::slotted([col-span="4"]) { --mdw-grid__column-count: 4; }
+    ::slotted([col-span="5"]) { --mdw-grid__column-count: 5; }
+    ::slotted([col-span="6"]) { --mdw-grid__column-count: 6; }
+    ::slotted([col-span="7"]) { --mdw-grid__column-count: 7; }
+    ::slotted([col-span="8"]) { --mdw-grid__column-count: 8; }
+    ::slotted([col-span="9"]) { --mdw-grid__column-count: 9; }
+    ::slotted([col-span="10"]) { --mdw-grid__column-count: 10; }
+    ::slotted([col-span="11"]) { --mdw-grid__column-count: 11; }
+    ::slotted([col-span="12"]) { --mdw-grid__column-count: 12; }
+    
+    ::slotted([col-span="25%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns) / 4); }
+    ::slotted([col-span="50%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns) / 2); }
+    ::slotted([col-span="100%"]) { --mdw-grid__column-count: calc(var(--mdw-grid__columns)); }
+
+    ::slotted([col-span-4="1"]) { --mdw-grid__column-count__4: 1; }
+    ::slotted([col-span-4="2"]) { --mdw-grid__column-count__4: 2; }
+    ::slotted([col-span-4="3"]) { --mdw-grid__column-count__4: 3; }
+    ::slotted([col-span-4="4"]) { --mdw-grid__column-count__4: 4; }
+    ::slotted([col-span-8="1"]) { --mdw-grid__column-count__8: 1; }
+    ::slotted([col-span-8="2"]) { --mdw-grid__column-count__8: 2; }
+    ::slotted([col-span-8="3"]) { --mdw-grid__column-count__8: 3; }
+    ::slotted([col-span-8="4"]) { --mdw-grid__column-count__8: 4; }
+    ::slotted([col-span-8="5"]) { --mdw-grid__column-count__8: 5; }
+    ::slotted([col-span-8="6"]) { --mdw-grid__column-count__8: 6; }
+    ::slotted([col-span-8="7"]) { --mdw-grid__column-count__8: 7; }
+    ::slotted([col-span-8="8"]) { --mdw-grid__column-count__8: 8; }
+    ::slotted([col-span-12="1"]) { --mdw-grid__column-count__12: 1; }
+    ::slotted([col-span-12="2"]) { --mdw-grid__column-count__12: 2; }
+    ::slotted([col-span-12="3"]) { --mdw-grid__column-count__12: 3; }
+    ::slotted([col-span-12="4"]) { --mdw-grid__column-count__12: 4; }
+    ::slotted([col-span-12="5"]) { --mdw-grid__column-count__12: 5; }
+    ::slotted([col-span-12="6"]) { --mdw-grid__column-count__12: 6; }
+    ::slotted([col-span-12="7"]) { --mdw-grid__column-count__12: 7; }
+    ::slotted([col-span-12="8"]) { --mdw-grid__column-count__12: 8; }
+    ::slotted([col-span-12="9"]) { --mdw-grid__column-count__12: 9; }
+    ::slotted([col-span-12="10"]) { --mdw-grid__column-count__12: 10; }
+    ::slotted([col-span-12="11"]) { --mdw-grid__column-count__12: 11; }
+    ::slotted([col-span-12="12"]) { --mdw-grid__column-count__12: 12; }
+
+  `
+  .autoRegister('mdw-grid');

package/components/Headline.js

@@ -1,32 +1,13 @@
-import ThemableMixin from '../mixins/ThemableMixin.js';
+import Display from './Display.js';
 
-import Box from './Box.js';
-
-export default Box
+/**
+ * Material Design Type scale: Headline.
+ * @see https://m3.material.io/styles/typography/type-scale-tokens
+ */
+export default Display
   .extend()
-  .mixin(ThemableMixin)
-  .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}');
-    },
+  .set({
+    _baseAriaLevel: 4,
   })
   .css`
     :host {
@@ -42,6 +23,6 @@ export default Box
     :host([size="small"]) {
       font: var(--mdw-typescale__headline-small__font);
       letter-spacing: var(--mdw-typescale__headline-small__letter-spacing);
-    }  
+    }
   `
   .autoRegister('mdw-headline');

package/components/Icon.js

@@ -1,11 +1,6 @@
-// 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';
-
-/** @type {Map<string, {path:string, viewBox:string}>} */
-const svgAliasMap = new Map();
-const unaliased = new Set();
+import { svgAliasMap, unaliased } from '../services/svgAlias.js';
 
 const documentLoadedStyleSheets = new Set();
 
@@ -13,8 +8,13 @@ const documentLoadedStyleSheets = new Set();
 
 // https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement
 
-/** @implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>} */
-export default class Icon extends CustomElement
+/**
+ * Material system icons represent actions, objects, and concepts; prefer
+ * the Material icon system (SVG or Material Symbols) for consistent visual language.
+ * implements {Omit<HTMLImageElement,DeprecatedHTMLImageElementProperties>}
+ * @see https://m3.material.io/styles/icons
+ */
+export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .define({
@@ -30,39 +30,71 @@ export default class Icon extends CustomElement
     decode() { return this._img.decode; },
   })
   .observe({
-    _slottedText: 'string',
+    /** Icon name used with SVG aliases or font glyphs. */
+    icon: 'string',
+    /** Whether the icon is disabled; affects image appearance. */
     disabled: 'boolean',
+    /** Alternative text for image-backed icons. */
     alt: 'string',
+    /** Image source URL for an icon. */
     src: 'string',
+    /** URL to an external SVG resource. */
     svg: 'string',
+    /** Inline SVG path data to render as the icon. */
     svgPath: 'string',
+    /** Image `srcset` attribute for responsive icon images. */
     srcset: 'string',
+    /** Image `sizes` attribute for responsive icon images. */
     sizes: 'string',
+    /** Variation suffix used when resolving icon aliases (e.g., 'filled'). */
+    variation: 'string',
+    /** `crossorigin` attribute for image requests. */
     crossOrigin: { attr: 'crossorigin' },
+    /** `usemap` attribute for image maps. */
     useMap: { attr: 'usemap' },
+    /** `ismap` boolean attribute for image maps. */
     isMap: { type: 'boolean', attr: 'ismap' },
+    /** `referrerpolicy` attribute for image requests. */
     referrerPolicy: { attr: 'referrerpolicy' },
+    /** Preferred image decoding mode: 'async' | 'sync' | 'auto'. */
     decoding: { value: /** @type {'async'|'sync'|'auto'} */ (null) },
+    /** Image loading hint: 'eager' | 'lazy'. */
     loading: { value: /** @type {'eager'|'lazy'} */ (null) },
+    /** Rendered width in CSS pixels. */
     width: 'integer',
+    /** Rendered height in CSS pixels. */
     height: 'integer',
+    /** Force using font glyphs instead of SVG when true. */
     forceFont: 'boolean',
     _linkLoaded: 'boolean',
+    /** viewBox used for SVG rendering. */
     viewBox: 'string',
+    /** CSS class applied to font-based icons. */
     fontClass: { empty: 'material-symbols-outlined' },
+    /** URL to Material Symbols CSS when using font-based icons. */
     fontLibrary: { empty: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&display=block' },
+    _isConnected: 'boolean',
   })
   .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])}`);
+      get({ icon, variation }) {
+        if (!icon) return null;
+        const iconName = icon.trim().toLowerCase();
+        const suffix = variation ? `#${variation}` : '';
+
+        const aliasName = `${iconName}${suffix}`;
+        if (svgAliasMap.has(aliasName)) {
+          return svgAliasMap.get(aliasName);
+        }
+        unaliased.add(aliasName);
+
+        // Fallback to base version
+        if (suffix && svgAliasMap.has(iconName)) {
+          return svgAliasMap.get(iconName);
         }
-        return result;
+
+        return null;
       },
     },
   })
@@ -75,10 +107,10 @@ export default class Icon extends CustomElement
     },
   })
   .observe({
-    _showSlot: {
+    _showFontIcon: {
       type: 'boolean',
-      get({ _slottedText, svg, _computedSVGPath, src }) {
-        return _slottedText && !svg && !_computedSVGPath && !src;
+      get({ icon, svg, _computedSVGPath, src }) {
+        return icon && !svg && !_computedSVGPath && !src;
       },
     },
   })
@@ -89,7 +121,7 @@ export default class Icon extends CustomElement
 
   })
   .html`
-    <link mdw-if={_showSlot} id=link rel=stylesheet href={fontLibrary} />
+    <link mdw-if={_showFontIcon} 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}"/>
@@ -101,13 +133,12 @@ export default class Icon extends CustomElement
       referrerpolicy={referrerPolicy} decoding={decoding} loading={loading}
       width={width} height={height}
     />
-    <slot id=icon class={fontClass} hidden={!_showSlot} aria-hidden=true></slot>
+    <span id=icon class={fontClass} hidden={!_showFontIcon} aria-hidden=true>{icon}</span>
   `
   .css`
     /* https://material.io/design/iconography/system-icons.html */
 
     :host {
-      display: inline-block;
       vertical-align: -11.5%;
 
       block-size: 1em;
@@ -116,20 +147,25 @@ export default class Icon extends CustomElement
       -webkit-user-select: none;
       user-select: none;
 
-      font-variation-settings: 'FILL' 1;
+      line-height: 1;
+
+      font-variation-settings: 'FILL' 0;
 
       transition-duration: 200ms;
       /* stylelint-disable-next-line liberty/use-logical-spec -- Safari does not animate inline-size */
       transition-property: inline-size, width;
     }
 
+    :host([variation="fill"]) {
+      font-variation-settings: 'FILL' 1;
+    }
+
     :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;
@@ -149,8 +185,6 @@ export default class Icon extends CustomElement
     }
 
     #svg {
-      display: block;
-
       block-size: inherit;
       inline-size: inherit;
 
@@ -160,8 +194,6 @@ export default class Icon extends CustomElement
     }
 
     #img {
-      display: block;
-
       block-size: inherit;
       inline-size: inherit;
 
@@ -183,11 +215,6 @@ export default class Icon extends CustomElement
 
   `
   .childEvents({
-    icon: {
-      slotchange() {
-        this._slottedText = this.textContent;
-      },
-    },
     link: {
       /**
        * @param {{currentTarget: HTMLLinkElement}} event
@@ -199,52 +226,34 @@ export default class Icon extends CustomElement
           console.warn('Icon: parentNode is blank');
         }
         if (documentLoadedStyleSheets.has(href)) return;
-        console.debug('Icon: Checking if link also in document', href);
+        // 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.`);
+            // console.debug(`Icon: Found ${href} in document.`);
             documentLoadedStyleSheets.add(href);
             return;
           }
         }
-        console.debug(`Icon: Adding ${href} to document.`);
+        // 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;
+  })
+  .extend((BaseClass) => class extends BaseClass {
+    /**
+     * @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');
+  })
+  .autoRegister('mdw-icon');