@m3e/web 2.3.1 → 2.3.2

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 matraic
+Copyright (c) 2025–2026 matraic
 Contact: matraic@yahoo.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

package/dist/all.js

@@ -1,6 +1,6 @@
 /**
  * @license MIT
- * Copyright (c) 2025 matraic
+ * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
 import { __classPrivateFieldGet, __decorate, __classPrivateFieldSet } from 'tslib';
@@ -5670,7 +5670,7 @@ M3eFilterChipElement.formAssociated = true;
 M3eFilterChipElement.styles = [M3eChipElement.styles, css`:host([selected]:not(:state(-hide-selection))) .wrapper { padding-inline-start: var(--m3e-chip-with-icon-padding-start, 0.5rem); } .icon { display: flex; align-items: center; justify-content: center; } .check { width: 1em; font-size: var(--m3e-chip-icon-size, 1.125rem); } :host(:not(:disabled):not([disabled-interactive])) .check { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-chip-with-icon-padding-start, 0.5rem)); transition: margin-inline-start ${DesignToken$1.motion.spring.fastEffects}; } :host([selected]) .icon { margin-inline-start: 0; } :host([selected]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base { color: var(--m3e-chip-unselected-label-text-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-ripple-color: var(--m3e-chip-unselected-ripple-color, ${DesignToken$1.color.onSurfaceVariant}); --m3e-state-layer-focus-color: var( --m3e-chip-unselected-state-layer-focus-color, ${DesignToken$1.color.onSurfaceVariant} ); --m3e-state-layer-hover-color: var( --m3e-chip-unselected-state-layer-hover-color, ${DesignToken$1.color.onSurfaceVariant} ); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]) { color: var(--m3e-chip-unselected-leading-icon-color, ${DesignToken$1.color.primary}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-unselected-trailing-icon-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: unset; outline-width: var(--m3e-chip-selected-outline-thickness, 0); color: var(--m3e-chip-selected-label-text-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-chip-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-chip-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-chip-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-elevation-hover-level: var(--m3e-chip-selected-hover-elevation, ${DesignToken$1.elevation.level1}); --m3e-ripple-color: var(--m3e-chip-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-chip-selected-state-layer-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-chip-selected-state-layer-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); } :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]) { color: var(--m3e-chip-selected-leading-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: var(--m3e-chip-selected-trailing-icon-color, ${DesignToken$1.color.onSecondaryContainer}); } @media (prefers-reduced-motion) { .base, :host(:not(:state(-with-icon))) .icon { transition: none; } } @media (forced-colors: active) { :host(:not(:disabled):not([disabled-interactive]):not([selected])) .base, :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive]):not([selected])) ::slotted([slot="trailing-icon"]) { color: CanvasText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base, :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="icon"]), :host(:not(:disabled):not([disabled-interactive])[selected]) ::slotted([slot="trailing-icon"]), :host(:not(:disabled):not([disabled-interactive])) .check { color: ButtonText; } :host(:not(:disabled):not([disabled-interactive])[selected]) .base { outline-offset: calc(0px - var(--m3e-outlined-chip-outline-thickness, 1px)); outline-width: var(--m3e-outlined-chip-outline-thickness, 1px); outline-color: ButtonText; } }`];
 M3eFilterChipElement = __decorate([customElement$1("m3e-filter-chip")], M3eFilterChipElement);
 
-var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalitySubscription, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a$9;
+var _M3eFilterChipSetElement_instances, _M3eFilterChipSetElement_directionalitySubscription, _M3eFilterChipSetElement_handleSlotChange, _M3eFilterChipSetElement_handleKeyDown, _M3eFilterChipSetElement_handleChange, _M3eFilterChipSetElement_updateChipRole, _a$a;
 /**
  * A container that organizes filter chips into a cohesive group, enabling selection and
  * deselection of values used to refine content or trigger contextual behavior.
@@ -5715,7 +5715,7 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled$1(D
     /** @private */
     _M3eFilterChipSetElement_directionalitySubscription.set(this, void 0);
     /** @internal */
-    this[_a$9] = new SelectionManager().onActiveItemChange(() => this[selectionManager].activeItem?.focus()).withWrap().withDirectionality(M3eDirectionality.current);
+    this[_a$a] = new SelectionManager().onActiveItemChange(() => this[selectionManager].activeItem?.focus()).withWrap().withDirectionality(M3eDirectionality.current);
     /**
      * Whether multiple chips can be selected.
      * @default false
@@ -5748,7 +5748,7 @@ let M3eFilterChipSetElement = class M3eFilterChipSetElement extends Labelled$1(D
     }
   }
   /** @inheritdoc @internal */
-  get [(_M3eFilterChipSetElement_directionalitySubscription = new WeakMap(), _M3eFilterChipSetElement_instances = new WeakSet(), _a$9 = selectionManager, formValue$1)]() {
+  get [(_M3eFilterChipSetElement_directionalitySubscription = new WeakMap(), _M3eFilterChipSetElement_instances = new WeakSet(), _a$a = selectionManager, formValue$1)]() {
     const values = this.value;
     if (Array.isArray(values)) {
       const data = new FormData();
@@ -10283,7 +10283,7 @@ var _M3eElevationElement_instances, _M3eElevationElement_hoverController, _M3eEl
  * The component can also be attached to another element using the `for` attribute.  When attached, elevation will
  * be lifted by 1 level on hover. This can be disabled using the `disabled` attribute.
  *
- * Alternately, use the `attach` and `detach` methods to programmatically attach and detach this element to another.
+ * Alternatively, use the `attach` and `detach` methods to programmatically attach and detach this element to another.
  *
  * @example
  * The following example illustrates basic markup. Note how the parenting element's position is `relative`. A parenting
@@ -10461,7 +10461,7 @@ var _M3eFocusRingElement_instances, _M3eFocusRingElement_focusController, _M3eFo
  * The focus ring is displayed when the interactive element receives visible focus and hidden when focus is lost.
  * This can be disabled using the `disabled` attribute.
  *
- * Alternately, you can use the `show` and `hide` methods to programmatically control the focus ring.
+ * Alternatively, you can use the `show` and `hide` methods to programmatically control the focus ring.
  *
  * @example
  * The following example illustrates attaching a focus ring to an interactive element. In this example, the parenting div
@@ -10690,7 +10690,7 @@ var _M3eRippleElement_instances, _M3eRippleElement_ripple, _M3eRippleElement_pre
  *
  * The pressed state actives either using both pointer and keyboard events. For keyboard events, `SPACE` activate a ripple.
  *
- * Alternately, you can use the `show` and `hide` methods to programmatically control the ripple.
+ * Alternatively, you can use the `show` and `hide` methods to programmatically control the ripple.
  *
  * @example
  * The following example illustrates attaching a ripple to an interactive element. In this example, the parenting div
@@ -15438,6 +15438,117 @@ __decorate([property({
 })], M3eHeadingElement.prototype, "level", void 0);
 M3eHeadingElement = __decorate([customElement$1("m3e-heading")], M3eHeadingElement);
 
+var _a$9, _IconRegistry_icons, _IconRegistry_observers, _IconRegistry_createKey, _IconRegistry_validateSvgIconInfo;
+/** @private */
+const PATH_DATA_PATTERN = /^[MmLlHhVvCcSsQqTtAaZz0-9.,\s-]+$/;
+/** @private */
+const VIEW_BOX_PATTERN = /^-?\d+(\.\d+)?\s+-?\d+(\.\d+)?\s+-?\d+(\.\d+)?\s+-?\d+(\.\d+)?$/;
+/**
+ * Service to register and display icons used by the `m3e-icon` component.
+ * @internal
+ */
+class IconRegistry {
+  /**
+   * Adds an icon to the registry for the given variant and weight.
+   * @param {string} name The name of the icon.
+   * @param {IconVariant} variant The variant of the icon.
+   * @param {SvgIconFillSet} fillSet The SVG data for both fill states (outlined and filled) of the icon.
+   */
+  static addIcon(name, variant, fillSet) {
+    const trustOutlinedViewBox = typeof fillSet.outlined === "string";
+    const trustFilledViewBox = typeof fillSet.filled === "string";
+    if (typeof fillSet.outlined === "string") {
+      fillSet.outlined = {
+        viewBox: "0 -960 960 960",
+        path: fillSet.outlined
+      };
+    }
+    if (typeof fillSet.filled === "string") {
+      fillSet.filled = {
+        viewBox: "0 -960 960 960",
+        path: fillSet.filled
+      };
+    }
+    __classPrivateFieldGet(this, _a$9, "m", _IconRegistry_validateSvgIconInfo).call(this, name, variant, fillSet.outlined, trustOutlinedViewBox);
+    __classPrivateFieldGet(this, _a$9, "m", _IconRegistry_validateSvgIconInfo).call(this, name, variant, fillSet.filled, trustFilledViewBox);
+    if (window !== undefined) {
+      const key = __classPrivateFieldGet(this, _a$9, "m", _IconRegistry_createKey).call(this, name, variant);
+      __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_icons).set(key, {
+        outlined: svg`<svg viewBox="${fillSet.outlined.viewBox}"><path d="${fillSet.outlined.path}"/></svg>`,
+        filled: svg`<svg viewBox="${fillSet.filled.viewBox}"><path d="${fillSet.filled.path}"/></svg>`
+      });
+      __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_observers).get(key)?.forEach(x => x());
+    }
+  }
+  /**
+   * Determines whether an icon is registered for the given variant.
+   * @param {string} name The name of the icon.
+   * @param {IconVariant} variant The variant of the icon.
+   * @returns {boolean} Whether `icon` is registered for the given `variant`.
+   */
+  static isIconRegistered(name, variant) {
+    return window !== undefined && __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_icons).has(__classPrivateFieldGet(this, _a$9, "m", _IconRegistry_createKey).call(this, name, variant));
+  }
+  /**
+   * Renders an icon from the registry.
+   * @param {string} name The name of the icon.
+   * @param {IconVariant} variant The variant of the icon.
+   * @param {boolean} filled Whether to render a filled variant of the icon.
+   * @returns {SVGTemplateResult | undefined} A `SVGTemplateResult` used to render the icon.
+   */
+  static renderIcon(name, variant, filled) {
+    const data = __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_icons).get(__classPrivateFieldGet(this, _a$9, "m", _IconRegistry_createKey).call(this, name, variant));
+    return filled ? data?.filled : data?.outlined;
+  }
+  /**
+   * Begins observing registration for the specified icon.
+   * @param {string} name The name of the icon to observe.
+   * @param {IconVariant} variant The variant of the icon to observe.
+   * @param {() => void} callback Callback invoked when the specified icon is registered for the given variant.
+   * @returns {() => void} Function used to stop observing.
+   */
+  static observe(name, variant, callback) {
+    if (window === undefined) return () => {};
+    const key = __classPrivateFieldGet(this, _a$9, "m", _IconRegistry_createKey).call(this, name, variant);
+    if (!__classPrivateFieldGet(this, _a$9, "f", _IconRegistry_observers).has(key)) {
+      __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_observers).set(key, [callback]);
+    } else {
+      __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_observers).get(key)?.push(callback);
+    }
+    return () => {
+      const callbacks = __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_observers).get(key);
+      if (callbacks) {
+        const index = callbacks.indexOf(callback);
+        if (index >= 0) {
+          callbacks.splice(index, 1);
+        }
+        if (callbacks.length == 0) {
+          __classPrivateFieldGet(this, _a$9, "f", _IconRegistry_observers).delete(key);
+        }
+      }
+    };
+  }
+}
+_a$9 = IconRegistry, _IconRegistry_createKey = function _IconRegistry_createKey(name, variant) {
+  return `${variant}-${name}`;
+}, _IconRegistry_validateSvgIconInfo = function _IconRegistry_validateSvgIconInfo(name, variant, info, trustViewBox = false) {
+  if (!trustViewBox && !VIEW_BOX_PATTERN.test(info.viewBox)) {
+    throw new Error(`Unable to register icon '${name}' for variant '${variant}'. Invalid viewbox data.`);
+  }
+  if (!PATH_DATA_PATTERN.test(info.path)) {
+    throw new Error(`Unable to register icon '${name}' for variant '${variant}'. Invalid path data.`);
+  }
+};
+/** @private */
+_IconRegistry_icons = {
+  value: new Map()
+};
+/** @private */
+_IconRegistry_observers = {
+  value: new Map()
+};
+
+var _M3eIconElement_iconRegistryUnobserve;
 /**
  * A small symbol used to easily identify an action or category.
  *
@@ -15475,6 +15586,8 @@ M3eHeadingElement = __decorate([customElement$1("m3e-heading")], M3eHeadingEleme
 let M3eIconElement = class M3eIconElement extends Role$1(LitElement, "img") {
   constructor() {
     super(...arguments);
+    /** @private */
+    _M3eIconElement_iconRegistryUnobserve.set(this, void 0);
     /** The name of the icon. */
     this.name = "";
     /**
@@ -15511,6 +15624,22 @@ let M3eIconElement = class M3eIconElement extends Role$1(LitElement, "img") {
     super.connectedCallback();
   }
   /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eIconElement_iconRegistryUnobserve, "f")?.call(this);
+  }
+  /** @inheritdoc */
+  willUpdate(_changedProperties) {
+    super.willUpdate(_changedProperties);
+    if (_changedProperties.has("name") && !IconRegistry.isIconRegistered(this.name, this.variant)) {
+      __classPrivateFieldSet(this, _M3eIconElement_iconRegistryUnobserve, IconRegistry.observe(this.name, this.variant, () => {
+        this.requestUpdate();
+        __classPrivateFieldGet(this, _M3eIconElement_iconRegistryUnobserve, "f")?.call(this);
+        __classPrivateFieldSet(this, _M3eIconElement_iconRegistryUnobserve, undefined, "f");
+      }), "f");
+    }
+  }
+  /** @inheritdoc */
   updated(_changedProperties) {
     super.updated(_changedProperties);
     if (_changedProperties.has("filled")) {
@@ -15528,11 +15657,12 @@ let M3eIconElement = class M3eIconElement extends Role$1(LitElement, "img") {
   }
   /** @inheritdoc */
   render() {
-    return html`<div class="icon" aria-hidden="true">${this.name}</div>`;
+    return IconRegistry.isIconRegistered(this.name, this.variant) ? IconRegistry.renderIcon(this.name, this.variant, this.filled) : html`<div class="icon" aria-hidden="true">${this.name}</div>`;
   }
 };
+_M3eIconElement_iconRegistryUnobserve = new WeakMap();
 /** The styles of the element. */
-M3eIconElement.styles = css`:host { display: inline-block; user-select: none; font-size: var(--m3e-icon-size, 1.5rem); width: 1em; vertical-align: middle; overflow: hidden; } .icon { font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; width: inherit; height: inherit; vertical-align: inherit; font-variation-settings: "FILL" var(--_icon-fill, 0), "wght" var(--_icon-weight, 400), "GRAD" var(--_icon-grade, 0), "opsz" var(--_icon-optical-size, 24); } :host([variant="outlined"]) .icon { font-family: "Material Symbols Outlined"; } :host([variant="rounded"]) .icon { font-family: "Material Symbols Rounded"; } :host([variant="sharp"]) .icon { font-family: "Material Symbols Sharp"; }`;
+M3eIconElement.styles = css`:host { display: inline-block; user-select: none; font-size: var(--m3e-icon-size, 1.5rem); width: 1em; height: 1em; vertical-align: middle; overflow: hidden; } .icon { font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; width: inherit; height: inherit; vertical-align: inherit; font-variation-settings: "FILL" var(--_icon-fill, 0), "wght" var(--_icon-weight, 400), "GRAD" var(--_icon-grade, 0), "opsz" var(--_icon-optical-size, 24); } :host([variant="outlined"]) .icon { font-family: "Material Symbols Outlined"; } :host([variant="rounded"]) .icon { font-family: "Material Symbols Rounded"; } :host([variant="sharp"]) .icon { font-family: "Material Symbols Sharp"; } svg { font-size: inherit; width: 1em; height: 1em; }`;
 __decorate([query(".icon")], M3eIconElement.prototype, "_icon", void 0);
 __decorate([property()], M3eIconElement.prototype, "name", void 0);
 __decorate([property({
@@ -15552,6 +15682,16 @@ __decorate([property({
 })], M3eIconElement.prototype, "opticalSize", void 0);
 M3eIconElement = __decorate([customElement$1("m3e-icon")], M3eIconElement);
 
+/**
+ * Registers an SVG icon to the internal icon registry used by `m3e-icon`.
+ * @param {string} name The name of the icon.
+ * @param {IconVariant} variant The variant of the icon.
+ * @param data The outlined and filled SVG information of the icon.
+ */
+function registerIcon(name, variant, data) {
+  IconRegistry.addIcon(name, variant, data);
+}
+
 /**
  * Component design tokens that control the `M3eIconButtonElement` for all size variants.
  * @internal
@@ -23548,8 +23688,52 @@ async function _M3eSkeletonElement_createShape(element) {
   __classPrivateFieldGet(this, _M3eSkeletonElement_anchoringCleanupMap, "f").set(shape, anchoringCleanup);
   this.shadowRoot?.appendChild(shape);
 };
+(() => {
+  if (window !== undefined) {
+    registerStyleSheet$1(css`@property --_m3e-skeleton-wave-pct { syntax: "<number>"; inherits: true; initial-value: 0; } @property --_m3e-skeleton-pulse-norm { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --_m3e-skeleton-wave-span: 40vw; --_m3e-skeleton-pulse-min: 0.06; }</number></number>`);
+    const reducedMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const forcedColorsMediaQuery = window.matchMedia("(forced-colors: active)");
+    let waveAnimation = null;
+    let pulseAnimation = null;
+    function startAnimations() {
+      waveAnimation = document.documentElement.animate([{
+        ["--_m3e-skeleton-wave-pct"]: 0
+      }, {
+        ["--_m3e-skeleton-wave-pct"]: 1
+      }], {
+        duration: 2100,
+        iterations: Infinity,
+        easing: "linear"
+      });
+      pulseAnimation = document.documentElement.animate([{
+        ["--_m3e-skeleton-pulse-norm"]: 0
+      }, {
+        ["--_m3e-skeleton-pulse-norm"]: 1
+      }, {
+        ["--_m3e-skeleton-pulse-norm"]: 0
+      }], {
+        duration: 1200,
+        iterations: Infinity,
+        easing: "ease-in-out"
+      });
+    }
+    function applyMotionState() {
+      if (reducedMediaQuery.matches || forcedColorsMediaQuery.matches) {
+        waveAnimation?.pause();
+        pulseAnimation?.pause();
+      } else {
+        waveAnimation?.play();
+        pulseAnimation?.play();
+      }
+    }
+    startAnimations();
+    applyMotionState();
+    reducedMediaQuery.addEventListener("change", applyMotionState);
+    forcedColorsMediaQuery.addEventListener("change", applyMotionState);
+  }
+})();
 /** The styles of the element. */
-M3eSkeletonElement.styles = css`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken$1.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken$1.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken$1.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken$1.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; animation: pulse 1.2s ease-in-out infinite; background-color: var(--m3e-skeleton-tint-color, ${DesignToken$1.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: -150%; height: 100%; width: 150%; opacity: var(--m3e-skeleton-accent-opacity, 6%); background: linear-gradient( 90deg, transparent, var(--m3e-skeleton-accent-color, ${DesignToken$1.color.onSurface}), transparent ); animation: wave 2.1s linear infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: var(--m3e-skeleton-accent-opacity, 6%); } 100% { opacity: 1; } } @keyframes wave { 0% { left: -150%; } 100% { left: 100%; } } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
+M3eSkeletonElement.styles = css`:host { display: contents; } .shape { position: absolute; overflow: hidden; pointer-events: none; opacity: 1; background-color: var(--m3e-skeleton-color, ${DesignToken$1.color.surface}); } .shape::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: color-mix( in srgb, var(--m3e-skeleton-tint-color, ${DesignToken$1.color.onSurface}) var(--m3e-skeleton-tint-opacity, 8%), transparent ); } :host(:not([loaded])) slot { visibility: hidden; } :host([loaded]) .shape { opacity: 0; transition: ${unsafeCSS(`opacity ${DesignToken$1.motion.duration.short3} ${DesignToken$1.motion.easing.standard}`)}; } :host([shape="rounded"]) .shape { border-radius: var(--m3e-skeleton-rounded-shape, var(--m3e-skeleton-shape, ${DesignToken$1.shape.corner.large})); } :host([shape="circular"]) .shape { border-radius: var(--m3e-skeleton-circular-shape, var(--m3e-skeleton-shape, ${DesignToken$1.shape.corner.full})); } :host([shape="square"]) .shape { border-radius: var(--m3e-skeleton-square-shape, var(--m3e-skeleton-shape, 0px)); } :host([animation="pulse"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: calc( var(--m3e-skeleton-accent-opacity, 0.06) + (1 - var(--m3e-skeleton-accent-opacity, 0.06)) * var(--_m3e-skeleton-pulse-norm) ); background-color: var(--m3e-skeleton-tint-color, ${DesignToken$1.color.surfaceDim}); } :host([animation="wave"]:not([loaded])) .shape::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient( 90deg, transparent 0%, transparent 35%, var(--m3e-skeleton-accent-color, ${DesignToken$1.color.onSurface}) 50%, transparent 65%, transparent 100% ); background-attachment: fixed; background-size: calc(100vw + var(--_m3e-skeleton-wave-span) * 2) 100%; background-position-x: calc( var(--_m3e-skeleton-wave-pct) * (100vw + var(--_m3e-skeleton-wave-span) * 2) - var(--_m3e-skeleton-wave-span) ); opacity: var(--m3e-skeleton-accent-opacity, 0.06); } @media (forced-colors: active) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } .shape { background-color: GrayText; } } @media (prefers-reduced-motion) { :host([loaded]) .shape { transition: none; } .shape::after { display: none; } }`;
 __decorate([property({
   reflect: true
 })], M3eSkeletonElement.prototype, "shape", void 0);
@@ -31523,5 +31707,5 @@ M3eTooltipElement.styles = css`:host { display: contents; } .base { position: ab
 __decorate([property()], M3eTooltipElement.prototype, "position", void 0);
 M3eTooltipElement = __decorate([customElement$1("m3e-tooltip")], M3eTooltipElement);
 
-export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
+export { ActionElementBase, AnimationLoopController, AttachInternals, CalendarViewElementBase, Checked, CheckedIndeterminate, ConstraintValidation, DesignToken, Dirty, Disabled, DisabledInteractive, EventAttribute, FocusController, Focusable, FormAssociated, FormSubmitter, HoverController, HtmlFor, InertController, IntersectionController, KeyboardClick, Labelled, LinkButton, LongPressController, M3eAccordionElement, M3eActionListElement, M3eAppBarElement, M3eAssistChipElement, M3eAutocompleteElement, M3eAvatarElement, M3eBadgeElement, M3eBottomSheetActionElement, M3eBottomSheetElement, M3eBottomSheetTriggerElement, M3eButtonElement, M3eButtonGroupElement, M3eButtonSegmentElement, M3eCalendarElement, M3eCardElement, M3eCheckboxElement, M3eChipElement, M3eChipSetElement, M3eCircularProgressIndicatorElement, M3eCollapsibleElement, M3eDatepickerElement, M3eDatepickerToggleElement, M3eDialogActionElement, M3eDialogElement, M3eDialogTriggerElement, M3eDividerElement, M3eDrawerContainerElement, M3eDrawerToggleElement, M3eElevationElement, M3eExpandableListItemElement, M3eExpansionHeaderElement, M3eExpansionPanelElement, M3eFabElement, M3eFabMenuElement, M3eFabMenuItemElement, M3eFabMenuTriggerElement, M3eFilterChipElement, M3eFilterChipSetElement, M3eFocusRingElement, M3eFormFieldElement, M3eHeadingElement, M3eIconButtonElement, M3eIconElement, M3eInputChipElement, M3eInputChipSetElement, M3eLinearProgressIndicatorElement, M3eListActionElement, M3eListElement, M3eListItemButtonElement, M3eListItemElement, M3eListOptionElement, M3eLoadingIndicatorElement, M3eMenuElement, M3eMenuItemCheckboxElement, M3eMenuItemElement, M3eMenuItemGroupElement, M3eMenuItemRadioElement, M3eMenuTriggerElement, M3eMonthViewElement, M3eMultiYearViewElement, M3eNavBarElement, M3eNavItemElement, M3eNavMenuElement, M3eNavMenuItemElement, M3eNavMenuItemGroupElement, M3eNavRailElement, M3eNavRailToggleElement, M3eOptGroupElement, M3eOptionElement, M3eOptionPanelElement, M3ePaginatorElement, M3ePseudoCheckboxElement, M3ePseudoRadioElement, M3eRadioElement, M3eRadioGroupElement, M3eRichTooltipActionElement, M3eRichTooltipElement, M3eRippleElement, M3eScrollContainerElement, M3eSearchBarElement, M3eSearchViewElement, M3eSegmentedButtonElement, M3eSelectElement, M3eSelectionListElement, M3eShapeElement, M3eSkeletonElement, M3eSlideElement, M3eSlideGroupElement, M3eSliderElement, M3eSliderThumbElement, M3eSnackbar, M3eSnackbarElement, M3eSplitButtonElement, M3eSplitPaneElement, M3eStateLayerElement, M3eStepElement, M3eStepPanelElement, M3eStepperElement, M3eStepperNextElement, M3eStepperPreviousElement, M3eStepperResetElement, M3eSuggestionChipElement, M3eSwitchElement, M3eTabElement, M3eTabPanelElement, M3eTabsElement, M3eTextHighlightElement, M3eTextOverflowElement, M3eTextareaAutosizeElement, M3eThemeElement, M3eTocElement, M3eTocItemElement, M3eToolbarElement, M3eTooltipElement, M3eYearViewElement, MutationController, PressedController, ProgressElementIndicatorBase, ReadOnly, ReconnectedCallback, Required, RequiredConstraintValidation, ResizeController, Role, ScrollController, ScrollLockController, Selected, StepperButtonElementBase, SuppressInitialAnimation, TocGenerator, TooltipElementBase, Touched, VelocityTracker, Vertical, addCustomState, checkOrSelect, computeCssSize, computeLineCount, customElement, dateConverter, debounce, defaultValue, deleteCustomState, findFormFieldControl, focusWhenReady, forcedColorsActive, formValue, generateClipPaths, getTextContent, guid, hasAssignedNodes, hasCustomState, hasKeys, interceptProperty, internals, isAttachInternalsMixin, isCheckedIndeterminateMixin, isCheckedMixin, isCheckedOrSelected, isCheckedOrSelectedMixin, isConstraintValidationMixin, isDirtyMixin, isDisabledInteractiveMixin, isDisabledMixin, isFormAssociatedMixin, isFormFieldControl, isFormSubmitterMixin, isHtmlForMixin, isLabelledMixin, isLinkButtonMixin, isReadOnlyMixin, isRequiredConstraintValidationMixin, isRequiredMixin, isSelectedMixin, isTouchedMixin, isVerticalMixin, prefersReducedMotion, registerIcon, registerStyleSheet, renderPseudoLink, resolveElementById, resolveFragmentUrl, safeStyleMap, scrollIntoViewIfNeeded, setCustomState, spaceSeparatedStringConverter, updateLabels, validate, waitForUpgrade };
 //# sourceMappingURL=all.js.map