@shortfuse/materialdesignweb 0.8.0 → 0.9.1

package/components/InputChip.js

@@ -0,0 +1,193 @@
+import { EVENT_HANDLER_TYPE } from '../core/customTypes.js';
+import DelegatesFocusMixin from '../mixins/DelegatesFocusMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
+import ShapeMixin from '../mixins/ShapeMixin.js';
+
+import Box from './Box.js';
+import './Button.js';
+import './Icon.js';
+import './IconButton.js';
+
+/**
+ * Input chips allow users to enter or edit information as a chip (tag-like).
+ * @see https://m3.material.io/components/chips/specs
+ */
+export default Box
+  .extend()
+  .mixin(ShapeMixin)
+  .mixin(DelegatesFocusMixin)
+  .mixin(HyperlinkMixin)
+  .observe({
+    /** Render the chip in avatar (larger) style. */
+    avatar: 'boolean',
+
+    /** Show a close action button inside the chip. */
+    closeButton: 'boolean',
+
+    /** Icon name to use for the close button (default: 'close'). */
+    closeIcon: { empty: 'close' },
+
+    /** Ink color used for the close icon (default: inherit). */
+    closeInk: { empty: 'inherit' },
+
+    /** Reflects the `readonly` attribute; prevents editing/closing when true. */
+    readOnly: { attr: 'readonly', type: 'boolean' },
+
+    /** Whether the chip is disabled. */
+    disabled: 'boolean',
+
+    /** Leading icon name for the chip. */
+    icon: 'string',
+
+    /** Ink color for the leading icon. */
+    iconInk: 'string',
+
+    /** Image `src` for an avatar or image-backed icon. */
+    src: 'string',
+
+    /** External SVG URL to render as the icon. */
+    svg: 'string',
+
+    /** SVG `viewBox` used for inline SVG rendering. */
+    viewBox: 'string',
+
+    /** SVG path data to render as the icon. */
+    svgPath: 'string',
+
+    /** Event handler/callback for the `close` event. */
+    onclose: EVENT_HANDLER_TYPE,
+
+    /** Selection state used by chip-selection patterns. */
+    selected: 'boolean',
+  })
+  .set({
+    outlined: true,
+  })
+  .expressions({
+    hasIcon({ icon, svg, src, svgPath } = this) {
+      return icon ?? svg ?? src ?? svgPath;
+    },
+    showCloseIcon({ disabled, readOnly, closeButton }) {
+      return closeButton && !disabled && !readOnly;
+    },
+  })
+  .html`
+    <mdw-button
+      role=none
+      tabindex=-1
+      href={href}
+      target={target}
+      download={download}
+      ping={ping}
+      rel={rel}
+      hreflang={hreflang}
+      referrerpolicy={referrerPolicy} id=action disabled={disabled}></mdw-button>
+    <mdw-icon mdw-if={hasIcon} id=icon ink={iconInk} disabled={disabled}
+      outlined={outlined} variation={iconVariation} aria-hidden=true svg={svg} src={src}
+      svg-path={svgPath} view-box={viewBox} icon={icon} avatar={avatar}></mdw-icon>
+    <mdw-icon-button role=none disabled={disabled} tabindex=-1 mdw-if={showCloseIcon} id=close class=button icon={closeIcon} ink={closeInk}>Close</mdw-icon-button>
+  `
+  .css`
+    /* https://m3.material.io/components/chips/specs */
+
+    :host {
+      --mdw-shape__size: 8px;
+      --mdw-ink: var(--mdw-color__on-surface);
+      position: relative;
+
+      display: inline-flex;
+      align-items: center;
+      flex-direction: row;
+      gap: 8px;
+
+      padding-block: calc(4px + (var(--mdw-density) * 2px));
+      padding-inline: calc(12px + (var(--mdw-density) * 2px));
+
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host(:where([icon])) {
+      padding-inline-start: calc(8px + (var(--mdw-density) * 2px));
+    }
+
+    :host(:where([avatar])) {
+      padding-inline-start: calc(4px + (var(--mdw-density) * 2px));
+    }
+
+    :host(:where([close-button]:not([disabled]):not([readonly]))) {
+      padding-inline-end: calc(8px + 18px + 8px + (var(--mdw-density) * 2px));
+    }
+
+    #action {
+      --mdw-shape__size: inherit;
+      position: absolute;
+      inset: 0;
+
+      padding: 0;
+    }
+
+    #close {
+      position: absolute;
+      inset-inline-end: calc(8px - 3px);
+      
+      padding: 3px; /* Pad to 24px */
+
+      font-size: 18px;
+    }
+
+    #icon {
+      font-size: 18px;
+    }
+
+    #icon[avatar] {
+      font-size: 24px;
+    }
+
+    #close::part(control) {
+      min-inline-size: calc(18px + (2 * 8px)); /* Reach up to edge of chip */
+    }
+
+    #outline {
+      --mdw-ink: rgb(var(--mdw-color__on-surface-variant));
+    }
+
+    #outline:is([ink],[color],[disabled]) {
+      /* stylelint-disable-next-line rule-selector-property-disallowed-list */
+      --mdw-ink: inherit;
+    }
+
+    :host([disabled]) {
+      color: rgba(var(--mdw-color__on-surface), 0.38);
+    }
+
+  `
+  .childEvents({
+    action: {
+      click() {
+        this.dispatchEvent(new Event('action'));
+      },
+    },
+    close: {
+      click() {
+        this.dispatchEvent(new Event('close'));
+      },
+    },
+  })
+  .on({
+    selectedChanged(previous, current) {
+      const action = /** @type {InstanceType<typeof import('./Button.js').default>} */ (this.refs.action);
+      action._focused = current;
+    },
+  })
+  .recompose(({ refs: { anchor, slot, icon, outline } }) => {
+    icon.after(slot);
+    anchor.remove();
+    slot.setAttribute('disabled', '{disabled}');
+    slot.removeAttribute('ink');
+    slot.removeAttribute('color');
+    outline.removeAttribute('mdw-if');
+    outline.setAttribute('ink', '{ink}');
+    outline.setAttribute('color', '{color}');
+    outline.setAttribute('disabled', '{disabled}');
+  })
+  .autoRegister('mdw-input-chip');

package/components/Label.js

@@ -1,7 +1,14 @@
+import TypographyMixin from '../mixins/TypographyMixin.js';
+
 import Box from './Box.js';
 
+/**
+ * Material Design Type scale: Label.
+ * @see https://m3.material.io/styles/typography/type-scale-tokens
+ */
 export default Box
   .extend()
+  .mixin(TypographyMixin)
   .css`
     :host {
       font: var(--mdw-typescale__label-large__font);

package/components/List.js

@@ -5,26 +5,32 @@ import Box from './Box.js';
 
 /** @typedef {'compact'} DeprecatedHTMLMenuElementProperties */
 
+/**
+ * Lists present a single column of related content, such as options or navigation.
+ * @see https://m3.material.io/components/lists/specs
+ */
 export default Box
   .extend()
   .mixin(DensityMixin)
   .mixin(AriaReflectorMixin)
   .set({
+    /** ARIA role applied to the host element (default: 'list'). */
     _ariaRole: 'list',
+
+    /**
+     * Visual color token for list surfaces. Default is `surface` to match
+     * Material surface theming.
+     */
     color: { empty: 'surface' },
   })
   .css`
     /* https://m3.material.io/components/lists/specs */
 
     :host {
-      --mdw-bg: var(--mdw-color__surface);
-      --mdw-ink: var(--mdw-color__on-surface);
-      display: flex;
-      flex-direction: column;
+      display: block;
 
       padding-block: 8px;
 
-      background-color: rgb(var(--mdw-bg));
       color: rgb(var(--mdw-ink));
     }
 

package/components/ListItem.js

@@ -1,5 +1,6 @@
 // https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 
+import './Box.js';
 import './CheckboxIcon.js';
 import './RadioIcon.js';
 import './Divider.js';
@@ -7,44 +8,98 @@ import './Icon.js';
 
 import CustomElement from '../core/CustomElement.js';
 import AriaReflectorMixin from '../mixins/AriaReflectorMixin.js';
+import HyperlinkMixin from '../mixins/HyperlinkMixin.js';
 import RippleMixin from '../mixins/RippleMixin.js';
 import StateMixin from '../mixins/StateMixin.js';
 import ThemableMixin from '../mixins/ThemableMixin.js';
 
+/**
+ * List item representing a single row in a list; supports leading/trailing
+ * content, selection, and accessibility features.
+ * @see https://m3.material.io/components/lists/specs
+ */
 export default CustomElement
   .extend()
   .mixin(ThemableMixin)
   .mixin(StateMixin)
   .mixin(RippleMixin)
   .mixin(AriaReflectorMixin)
+  .mixin(HyperlinkMixin)
   .set({
+    /** ARIA role applied to the host element (default: 'listitem'). */
     _ariaRole: 'listitem',
-    delegatesFocus: false,
+
+    /** When true, draw the Material state layer for interactive feedback. */
     stateLayer: true,
   })
   .observe({
+    /** Leading slot content or shorthand string. */
     leading: 'string',
+
+    /** Avatar label or shorthand content for a leading avatar. */
     avatar: 'string',
+
+    /** Color token used for the avatar container (default: primary-container). */
     avatarColor: { value: 'primary-container' },
+
+    /** Image source for the avatar. */
     avatarSrc: 'string',
+
+    /** Image source URL for a leading image in the list item. */
     src: 'string',
+
+    /** Alt text for the leading image. */
     alt: 'string',
+
+    /** Icon name for a leading icon. */
     icon: 'string',
-    href: 'string',
+
+    /** Ink/color token used for the leading icon. */
     iconInk: 'string',
+
+    /** External image/SVG source for the leading icon. */
     iconSrc: 'string',
+
+    /** Icon variation (e.g., 'filled'). */
+    iconVariation: 'string',
+
+    /** Checkbox shorthand name or placement class for a selectable leading checkbox. */
     checkbox: 'string',
+
+    /** Radio shorthand name or placement class for a selectable leading radio. */
     radio: 'string',
+
+    /** Selection color token used when item is selected (default: primary). */
     selectionColor: { value: 'primary' },
+
+    /** Selection state for the item. */
     selected: 'boolean',
+
+    /** Supporting text (secondary line) for the list item. */
     supporting: 'string',
+
+    /** Trailing text slot or shorthand. */
     trailing: 'string',
+
+    /** Trailing icon name. */
     trailingIcon: 'string',
+
+    /** Ink/color token for the trailing icon. */
     trailingIconInk: 'string',
+
+    /** External image/SVG source for the trailing icon. */
     trailingIconSrc: 'string',
-    divider: 'boolean',
+
+    /** Divider style identifier (e.g., 'inset'). */
+    divider: 'string',
+
+    /** If true, indicates the list item contains video content and adjusts layout. */
     video: 'boolean',
+
+    /** Number of text lines the item should reserve for content (integer). */
     lines: 'integer',
+
+    /** Internal flag set when supporting content is provided via slot. */
     _supportingSlotted: 'boolean',
   })
   .observe({
@@ -67,33 +122,36 @@ export default CustomElement
     radioClass() {
       return this.radio || 'leading';
     },
+    computedIconVariation({ iconVariation }) {
+      return iconVariation ?? 'filled';
+    },
   })
   .html`
-    <a id=anchor mdw-if={href} href={href} disabled={disabledState} aria-labelledby=content></a>
     <mdw-checkbox-icon id=checkbox mdw-if={checkbox} aria-hidden=true class={checkboxClass} color={selectionColor} disabled={disabledState} icon=check selected={selected}></mdw-checkbox-icon>
     <mdw-radio-icon id=radio mdw-if={radio} aria-hidden=true class={radioClass} disabled={disabledState} ink={selectionColor} selected={selected}></mdw-radio-icon>
-    <mdw-box mdw-if={avatar} id=avatar color={avatarColor} type-style=title-medium src={AvatarSrc}
+    <mdw-box mdw-if={avatar} id=avatar color={avatarColor} x=center y=center type-style=title-medium src={AvatarSrc}
       aria-hidden=true>{avatar}</mdw-box>
-    <mdw-icon mdw-if={icon} id=icon ink={iconInk} src={iconSrc} aria-hidden=true>{icon}</mdw-icon>
+    <mdw-icon mdw-if={icon} id=icon ink={iconInk} src={iconSrc} aria-hidden=true icon={icon} variation={computedIconVariation}></mdw-icon>
     <img id=img mdw-if={src} src={src} alt={alt} video={video} />
     <slot name=leading>{leading}</slot>
     <div id=content has-supporting={hasSupporting} lines={lines}>
       <slot id=slot></slot>
       <slot id=supporting name=supporting class=text lines={lines}>{supporting}</slot>
     </div>
-    <mdw-icon mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} src={trailingIconSrc} aria-hidden=true>{trailingIcon}</mdw-icon>
+    <mdw-icon mdw-if={trailingIcon} id=trailing-icon ink={trailingIconInk} src={trailingIconSrc} aria-hidden=true icon={trailingIcon}></mdw-icon>
     <slot id=trailing name=trailing role=note>{trailing}</slot>
-    <mdw-divider mdw-if={divider} id=divider divder={divider}></mdw-divider>
+    <mdw-divider mdw-if={divider} id=divider divider={divider}></mdw-divider>
   `
+  .recompose(({ refs: { state, rippleContainer, anchor } }) => {
+    anchor.setAttribute('mdw-if', '{href}');
+    anchor.setAttribute('aria-labelledby', 'content');
+    anchor.append(
+      state,
+      rippleContainer,
+    );
+    state.setAttribute('state-disabled', 'focus hover');
+  })
   .on({
-    composed() {
-      const { state, rippleContainer, anchor } = this.refs;
-      anchor.append(
-        state,
-        rippleContainer,
-      );
-      state.setAttribute('state-disabled', 'focus hover');
-    },
     disabledStateChanged(oldValue, newValue) {
       this.updateAriaProperty('ariaDisabled', newValue ? 'true' : 'false');
     },
@@ -111,7 +169,7 @@ export default CustomElement
 
       border: none;
       padding-block: 8px;
-      padding-inline: 16px 24px;
+      padding-inline: 16px;
 
       cursor: auto;
 
@@ -122,6 +180,20 @@ export default CustomElement
       text-decoration: none;
     }
 
+    :host(:where([color])) {
+      background-color: rgb(var(--mdw-bg));
+      color: rgb(var(--mdw-ink));
+    }
+
+    :host(:is([color="none"],[color="transparent"])) {
+      background-color: transparent;
+      color: inherit;
+    }
+    
+    :host([ink]) {
+      color: rgb(var(--mdw-ink));
+    }
+
     :host([href]) {
       cursor: pointer;
     }
@@ -180,6 +252,7 @@ export default CustomElement
     #divider {
       position: absolute;
       inset-block-end: 0;
+      inset-inline: 0;
 
       display: block;
 
@@ -215,8 +288,8 @@ export default CustomElement
     #trailing {
       color: var(--mdw-color__on-surface-variant);
 
-      font: var(--mdw-typescale__body-medium__font);
-      letter-spacing: var(--mdw-typescale__body-medium__letter-spacing);
+      font: var(--mdw-typescale__label-small__font);
+      letter-spacing: var(--mdw-typescale__label-small__letter-spacing);
     }
 
     #slot, #supporting {
@@ -280,10 +353,6 @@ export default CustomElement
     }
 
     #avatar {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
       block-size: 40px;
       inline-size: 40px;