@m3e/web 2.3.1 → 2.4.0

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
@@ -10624,7 +10624,7 @@ let M3ePseudoCheckboxElement = class M3ePseudoCheckboxElement extends CheckedInd
   }
 };
 /** The styles of the element. */
-M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); }`;
+M3ePseudoCheckboxElement.styles = css`:host { display: inline-block; vertical-align: middle; width: var(--m3e-checkbox-icon-size, 1.125rem); height: var(--m3e-checkbox-icon-size, 1.125rem); border-radius: var(--m3e-checkbox-container-shape, 2px); box-sizing: border-box; flex: none; } :host(:not([checked]):not([indeterminate])) { border-width: var(--m3e-checkbox-unselected-outline-thickness, 2px); border-style: solid; } :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { background-color: var(--m3e-checkbox-selected-container-color, ${DesignToken.color.primary}); color: var(--m3e-checkbox-selected-icon-color, ${DesignToken.color.onPrimary}); } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: var(--m3e-checkbox-unselected-outline-color, ${DesignToken.color.onSurfaceVariant}); } :host([disabled]:not([checked]):not([indeterminate])) { border-color: color-mix( in srgb, var(--m3e-checkbox-unselected-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-unselected-disabled-outline-opacity, 38%), transparent ); } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-container-color, ${DesignToken.color.onSurface}) var(--m3e-checkbox-selected-disabled-container-opacity, 38%), transparent ); color: color-mix( in srgb, var(--m3e-checkbox-selected-disabled-icon-color, ${DesignToken.color.surface}) var(--m3e-checkbox-selected-disabled-icon-opacity, 100%), transparent ); } svg { pointer-events: none; } @media (forced-colors: active) { :host(:not([disabled])[checked]), :host(:not([disabled])[indeterminate]) { border-color: Highlight; background-color: Highlight; color: HighlightText; } :host(:not([disabled]):not([checked]):not([indeterminate])) { border-color: CanvasText; background: Canvas; } :host([disabled]:not([checked]):not([indeterminate])) { border-color: GrayText; background-color: Canvas; } :host([disabled][checked]), :host([disabled][indeterminate]) { background-color: GrayText; color: Canvas; } }`;
 M3ePseudoCheckboxElement = __decorate([customElement("m3e-pseudo-checkbox")], M3ePseudoCheckboxElement);
 
 /**
@@ -10662,7 +10662,7 @@ let M3ePseudoRadioElement = class M3ePseudoRadioElement extends Checked(Disabled
   }
 };
 /** The styles of the element. */
-M3ePseudoRadioElement.styles = css`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); }`;
+M3ePseudoRadioElement.styles = css`:host { display: inline-block; vertical-align: middle; box-sizing: border-box; width: var(--m3e-radio-icon-size, 1.25rem); height: var(--m3e-radio-icon-size, 1.25rem); flex: none; } .circle { fill: currentColor; } :host(:not([checked])) .circle.inner { opacity: 0; } :host(:not([checked])) { color: var(--m3e-radio-unselected-icon-color, ${DesignToken.color.onSurfaceVariant}); } :host([checked]) { color: var(--m3e-radio-selected-icon-color, ${DesignToken.color.primary}); } :host([disabled]) { color: color-mix(in srgb, var(--m3e-radio-disabled-icon-color, ${DesignToken.color.onSurface}) 38%, transparent); } @media (forced-colors: active) { :host { border-radius: 50%; } :host(:not([checked])) { color: CanvasText; background-color: Canvas; } :host([checked]) { color: HighlightText; background-color: Highlight; } :host([disabled]) { color: GrayText; background-color: Canvas; } }`;
 M3ePseudoRadioElement = __decorate([customElement("m3e-pseudo-radio")], M3ePseudoRadioElement);
 
 /**
@@ -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
@@ -16760,7 +16900,7 @@ _M3eListItemElement_getSlotContentType = function _M3eListItemElement_getSlotCon
   return elements.length > 0 ? "text" : undefined;
 };
 /** The styles of the element. */
-M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-one-line)) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(:state(-two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-two-line)) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(:state(-three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-three-line)) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(:state(-three-line))) .base { align-items: center; } :host(:state(-three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(:state(-has-leading)) slot[name="leading"], :host(:state(-has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:state(-has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:state(-has-trailing))) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
+M3eListItemElement.styles = css`:host { display: block; } .base { display: flex; min-height: inherit; width: 100%; box-sizing: border-box; column-gap: var(--m3e-list-item-between-space, 1rem); padding-inline-start: var(--m3e-list-item-leading-space, 1rem); padding-inline-end: var(--m3e-list-item-trailing-space, 1rem); border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-container-shape, ${DesignToken$1.shape.corner.none}) ); transition: ${unsafeCSS(`border-radius ${DesignToken$1.motion.spring.fastEffects}, background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-one-line)) { min-height: calc(var(--m3e-list-item-one-line-height, 3.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-one-line)) .base { padding-block-start: var(--m3e-list-item-one-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-one-line-bottom-space, 0.5rem); } :host(:state(-two-line)) { min-height: calc(var(--m3e-list-item-two-line-height, 4.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-two-line)) .base { padding-block-start: var(--m3e-list-item-two-line-top-space, 0.5rem); padding-block-end: var(--m3e-list-item-two-line-bottom-space, 0.5rem); } :host(:state(-three-line)) { min-height: calc(var(--m3e-list-item-three-line-height, 5.5rem) + ${DesignToken$1.density.calc(-3)}); } :host(:state(-three-line)) .base { padding-block-start: var(--m3e-list-item-three-line-top-space, 0.75rem); padding-block-end: var(--m3e-list-item-three-line-bottom-space, 0.75rem); } :host(:not(:state(-three-line))) .base { align-items: center; } :host(:state(-three-line)) .base { align-items: flex-start; } :host(:not(:disabled):not([selected])) .base:not(.hover).focus-visible:not(.pressed) { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-focus-container-shape, ${DesignToken$1.shape.corner.large}) ); } :host(:not(:disabled):not([selected])) .base.hover, :host(:not(:disabled):not([selected])) .base.pressed { border-top-left-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-top-right-radius: var( --_list-item-top-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-left-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); border-bottom-right-radius: var( --_list-item-bottom-container-shape, var(--m3e-list-item-hover-container-shape, ${DesignToken$1.shape.corner.medium}) ); } .content { flex: 1 1 auto; display: flex; flex-direction: column; align-items: unset; justify-content: unset; } ::slotted([slot="overline"]) { font-size: var(--m3e-list-item-overline-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var(--m3e-list-item-overline-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight}); line-height: var(--m3e-list-item-overline-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight}); letter-spacing: var(--m3e-list-item-overline-tracking, ${DesignToken$1.typescale.standard.label.small.tracking}); } ::slotted([slot="supporting-text"]) { font-size: var(--m3e-list-item-supporting-text-font-size, ${DesignToken$1.typescale.standard.body.medium.fontSize}); font-weight: var( --m3e-list-item-supporting-text-font-weight, ${DesignToken$1.typescale.standard.body.medium.fontWeight} ); line-height: var( --m3e-list-item-supporting-text-line-height, ${DesignToken$1.typescale.standard.body.medium.lineHeight} ); letter-spacing: var( --m3e-list-item-supporting-text-tracking, ${DesignToken$1.typescale.standard.body.medium.tracking} ); } ::slotted(:not([slot])) { font-size: var(--m3e-list-item-font-size, ${DesignToken$1.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-list-item-font-weight, ${DesignToken$1.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-list-item-line-height, ${DesignToken$1.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-list-item-tracking, ${DesignToken$1.typescale.standard.body.large.tracking}); } :host(:state(-has-leading)) slot[name="leading"], :host(:state(-has-trailing)) slot[name="trailing"] { display: flex; justify-content: center; } :host(:not(:state(-has-leading))) slot[name="leading"] { display: var(--_list-item-leading-reserved-display, contents); } :host(:not(:state(-has-trailing))) slot[name="trailing"] { display: var(--_list-item-trailing-reserved-display, contents); } slot[name="leading"] { min-width: var(--_list-item-leading-reserved-space, 0px); margin-inline-start: calc(0px - var(--_list-item-leading-reserved-outset, 0px)); } slot[name="trailing"] { min-width: var(--_list-item-trailing-reserved-space, 0px); margin-inline-end: calc(0px - var(--_list-item-trailing-reserved-outset, 0px)); } ::slotted(span[slot="trailing"]), ::slotted([slot="trailing-supporting-text"]) { white-space: nowrap; font-size: var(--m3e-list-item-trailing-text-font-size, ${DesignToken$1.typescale.standard.label.small.fontSize}); font-weight: var( --m3e-list-item-trailing-text-font-weight, ${DesignToken$1.typescale.standard.label.small.fontWeight} ); line-height: var( --m3e-list-item-trailing-text-line-height, ${DesignToken$1.typescale.standard.label.small.lineHeight} ); letter-spacing: var( --m3e-list-item-trailing-text-tracking, ${DesignToken$1.typescale.standard.label.small.tracking} ); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]), ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { display: block; margin: 0 auto; overflow: hidden; object-fit: cover; } ::slotted(video) { width: var(--m3e-list-item-video-width, 6.25rem); height: var(--m3e-list-item-video-height, 3.5rem); } ::slotted(video[slot="leading"]), ::slotted(video[slot="trailing"]) { border-radius: var(--m3e-list-item-video-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(video[slot="leading"]) { margin-inline-start: calc(0px - var(--_list-item-leading-video-outset, 0px)); } ::slotted(video[slot="trailing"]) { margin-inline-end: calc(0px - var(--_list-item-trailing-video-outset, 0px)); } ::slotted(img) { user-drag: none; user-select: none; pointer-events: none; width: var(--m3e-list-item-image-width, 3.5rem); height: var(--m3e-list-item-image-height, 3.5rem); } ::slotted(img[slot="leading"]), ::slotted(img[slot="trailing"]) { border-radius: var(--m3e-list-item-image-shape, ${DesignToken$1.shape.corner.none}); } ::slotted(m3e-icon[slot="leading"]), ::slotted(m3e-icon[slot="leading-icon"]), ::slotted(m3e-icon[slot="trailing"]), ::slotted(m3e-icon[slot="trailing-icon"]) { --m3e-icon-size: var(--m3e-list-item-icon-size, 1.5rem); } :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading"]), :host(:not(:disabled)) ::slotted(m3e-icon[slot="leading-icon"]) { color: var(--m3e-list-item-leading-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .content { color: var(--m3e-list-item-label-text-color, ${DesignToken$1.color.onSurface}); } :host(:not(:disabled)) ::slotted([slot="overline"]) { color: var(--m3e-list-item-overline-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="supporting-text"]) { color: var(--m3e-list-item-supporting-text-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) ::slotted([slot="trailing"]), :host(:not(:disabled)) ::slotted([slot="trailing-supporting-text"]), :host(:not(:disabled)) ::slotted([slot="trailing-icon"]) { color: var(--m3e-list-item-trailing-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:not(:disabled)) .base { background-color: var(--_list-item-container-color, var(--m3e-list-item-container-color, transparent)); } :host(:disabled) .base { background-color: var(--m3e-list-item-disabled-container-color, transparent); } :host(:disabled) ::slotted(video), :host(:disabled) ::slotted(img), :host(:disabled) ::slotted(m3e-avatar) { opacity: var(--m3e-list-item-disabled-media-opacity, 38%); } :host(:disabled) .content { color: color-mix( in srgb, var(--m3e-list-item-disabled-label-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="overline"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-overline-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-overline-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="supporting-text"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-supporting-text-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-supporting-text-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-leading-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-leading-opacity, 38%), transparent ); } :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: color-mix( in srgb, var(--m3e-list-item-disabled-trailing-color, ${DesignToken$1.color.onSurface}) var(--m3e-list-item-disabled-trailing-opacity, 38%), transparent ); } :host(:not(:disabled)) .state-layer { --m3e-state-layer-hover-color: var(--m3e-list-item-hover-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-hover-opacity: var( --m3e-list-item-hover-state-layer-opacity, ${DesignToken$1.state.hoverStateLayerOpacity} ); --m3e-state-layer-focus-color: var(--m3e-list-item-focus-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-state-layer-focus-opacity: var( --m3e-list-item-focus-state-layer-opacity, ${DesignToken$1.state.focusStateLayerOpacity} ); } :host(:not(:disabled)) .ripple { --m3e-ripple-color: var(--m3e-list-item-pressed-state-layer-color, ${DesignToken$1.color.onSurface}); --m3e-ripple-opacity: var( --m3e-list-item-pressed-state-layer-opacity, ${DesignToken$1.state.pressedStateLayerOpacity} ); } @media (forced-colors: active) { .base { transition: none; } :host(:disabled) ::slotted([slot="leading"]), :host(:disabled) ::slotted([slot="leading-icon"]), :host(:disabled) .content, :host(:disabled) ::slotted([slot="overline"]), :host(:disabled) ::slotted([slot="supporting-text"]), :host(:disabled) ::slotted([slot="trailing"]), :host(:disabled) ::slotted([slot="trailing-supporting-text"]), :host(:disabled) ::slotted([slot="trailing-icon"]) { color: GrayText; } } @media (prefers-reduced-motion) { .base { transition: none; } }`;
 M3eListItemElement = __decorate([customElement$1("m3e-list-item")], M3eListItemElement);
 
 var _M3eListElement_instances, _M3eListElement_items, _M3eListElement_leadingContentTypes, _M3eListElement_trailingContentTypes, _M3eListElement_handleSlotChange;
@@ -19168,10 +19308,9 @@ var M3eNavMenuItemElement_1;
  *
  * @description
  * The `m3e-nav-menu-item` component represents an expandable, selectable item within a navigation menu.
- * It supports nested child items, selection, disabled and indeterminate states, and emits events for
- * open/close transitions. The component is highly customizable via slots and CSS custom properties, and
- * is designed for accessible, keyboard-navigable menu structures.
- *
+ * It supports nested child items, selection and disabled states, and emits events for open/close transitions.
+ * The component is highly customizable via slots and CSS custom properties, and is designed for accessible,
+ * keyboard-navigable menu structures.
  *
  * @example
  * The following example illustrates a navigation menu with a top-level group of menu items.
@@ -19235,7 +19374,6 @@ var M3eNavMenuItemElement_1;
  * @slot toggle-icon - Renders the toggle icon.
  *
  * @attr disabled - Whether the element is disabled.
- * @attr indeterminate - Whether the element's selected / checked state is indeterminate.
  * @attr open - Whether the item is expanded.
  * @attr selected - Whether the item is selected.
  *
@@ -19486,7 +19624,7 @@ __decorate([property({
 })], M3eNavMenuItemElement.prototype, "open", void 0);
 M3eNavMenuItemElement = M3eNavMenuItemElement_1 = __decorate([customElement$1("m3e-nav-menu-item")], M3eNavMenuItemElement);
 
-var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b;
+var _M3eNavMenuElement_instances, _M3eNavMenuElement_ignoreFocusVisible, _M3eNavMenuElement_ignoreFocus, _M3eNavMenuElement_keyDownHandler, _M3eNavMenuElement_keyUpHandler, _M3eNavMenuElement_pointerDownHandler, _M3eNavMenuElement_handleSlotChange, _M3eNavMenuElement_handleKeyDown, _M3eNavMenuElement_handleKeyUp, _M3eNavMenuElement_handlePointerDown, _M3eNavMenuElement_activateItem, _M3eNavMenuElement_updateFocusVisible, _M3eNavMenuElement_updateItemFocusVisible, _b$1;
 var M3eNavMenuElement_1;
 /**
  * A hierarchical menu, typically used on larger devices, that allows a user to switch between views.
@@ -19570,7 +19708,7 @@ let M3eNavMenuElement = M3eNavMenuElement_1 = class M3eNavMenuElement extends Ro
     /** @private */
     _M3eNavMenuElement_ignoreFocus.set(this, false);
     /** @private */
-    this[_b] = new SelectionManager().withVerticalOrientation().withHomeAndEnd().withTypeahead().withSkipPredicate(x => x.disabled || !x.visible).disableRovingTabIndex().onActiveItemChange(() => {
+    this[_b$1] = new SelectionManager().withVerticalOrientation().withHomeAndEnd().withTypeahead().withSkipPredicate(x => x.disabled || !x.visible).disableRovingTabIndex().onActiveItemChange(() => {
       if (this[selectionManager].activeItem) {
         __classPrivateFieldGet(this, _M3eNavMenuElement_instances, "m", _M3eNavMenuElement_activateItem).call(this, this[selectionManager].activeItem);
       }
@@ -19613,19 +19751,17 @@ let M3eNavMenuElement = M3eNavMenuElement_1 = class M3eNavMenuElement extends Ro
   get items() {
     return this[selectionManager].items;
   }
-  /**
-   * Expands the specified items, or all items if no items are provided.
-   * @param {M3eNavMenuItemElement | undefined} items The items to expand.
-   */
-  expand(items) {
-    (items ?? this[selectionManager].items).forEach(x => x.expand());
+  /** @internal */
+  expand(itemsOrDescendants, maybeDescendants = false) {
+    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;
+    const descendants = typeof itemsOrDescendants === "boolean" ? itemsOrDescendants : maybeDescendants;
+    items.forEach(x => x.expand(descendants));
   }
-  /**
-   * Collapses the specified items, or all items if no items are provided.
-   * @param {M3eNavMenuItemElement | undefined} items The items to collapse.
-   */
-  collapse(items) {
-    (items ?? this[selectionManager].items).forEach(x => x.collapse());
+  /** @internal */
+  collapse(itemsOrDescendants, maybeDescendants = false) {
+    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;
+    const descendants = typeof itemsOrDescendants === "boolean" ? itemsOrDescendants : maybeDescendants;
+    items.forEach(x => x.collapse(descendants));
     const activeItem = this[selectionManager].activeItem;
     if (activeItem && !activeItem.visible) {
       for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {
@@ -19662,7 +19798,7 @@ _M3eNavMenuElement_keyDownHandler = new WeakMap();
 _M3eNavMenuElement_keyUpHandler = new WeakMap();
 _M3eNavMenuElement_pointerDownHandler = new WeakMap();
 _M3eNavMenuElement_instances = new WeakSet();
-_b = selectionManager;
+_b$1 = selectionManager;
 _M3eNavMenuElement_handleSlotChange = function _M3eNavMenuElement_handleSlotChange() {
   for (const divider of this.querySelectorAll("m3e-divider")) {
     divider.ariaHidden = "true";
@@ -19690,7 +19826,9 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
     case " ":
       e.preventDefault();
       if (e.key === " " && item.ripple && !item.ripple.visible) {
+        item.ripple.centered = true;
         item.ripple.show(0, 0, true);
+        item.ripple.centered = false;
       }
       if (item.hasChildItems) {
         requestAnimationFrame(() => item.toggle());
@@ -19712,10 +19850,7 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
         } else {
           const parent = item.parentItem;
           if (parent) {
-            requestAnimationFrame(() => {
-              parent.collapse();
-              this[selectionManager].setActiveItem(parent);
-            });
+            this[selectionManager].setActiveItem(parent);
           }
         }
       } else if (item.hasChildItems && !item.open) {
@@ -19731,10 +19866,7 @@ _M3eNavMenuElement_handleKeyDown = function _M3eNavMenuElement_handleKeyDown(e)
         } else {
           const parent = item.parentItem;
           if (parent) {
-            requestAnimationFrame(() => {
-              parent.collapse();
-              this[selectionManager].setActiveItem(parent);
-            });
+            this[selectionManager].setActiveItem(parent);
           }
         }
       } else if (item.hasChildItems && !item.open) {
@@ -23548,8 +23680,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 +31699,727 @@ 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 };
+var _M3eTreeItemElement_instances, _M3eTreeItemElement_treeMutationController, _M3eTreeItemElement_items, _M3eTreeItemElement_tree, _M3eTreeItemElement_path, _M3eTreeItemElement_link, _M3eTreeItemElement_renderIcon, _M3eTreeItemElement_handleOpenToggleIconSlotChange, _M3eTreeItemElement_handleIconSlotChange, _M3eTreeItemElement_handleSlotChange, _M3eTreeItemElement_handleItemSlotChange, _M3eTreeItemElement_handleTreeChange, _M3eTreeItemElement_handleClick, _M3eTreeItemElement_handleCheckboxClick, _M3eTreeItemElement_handleCollapsibleEvent;
+var M3eTreeItemElement_1;
+/**
+ * An expandable item in a tree.
+ *
+ * @description
+ * The `m3e-tree-item` component represents a single item within an `m3e-tree`.
+ * It supports nested child items, expand/collapse behavior, selection,
+ * disabled state, and interaction styling. Items may contain a child group
+ * that hosts additional `m3e-tree-item` elements.
+ *
+ * @tag m3e-tree-item
+ *
+ * @slot - Renders the nested child items.
+ * @slot label - Renders the label of the item.
+ * @slot icon - Renders the icon of the item.
+ * @slot selected-icon - Renders the icon of the item when selected.
+ * @slot toggle-icon - Renders the toggle icon.
+ * @slot open-toggle-icon - Renders the toggle icon when selected.
+ *
+ * @attr disabled - Whether the element is disabled.
+ * @attr indeterminate - Whether the element's checked state is indeterminate.
+ * @attr open - Whether the item is expanded.
+ * @attr selected - Whether the item is selected.
+ *
+ * @fires opening - Emitted when the item begins to open.
+ * @fires opened - Emitted when the item has opened.
+ * @fires closing - Emitted when the item begins to close.
+ * @fires closed - Emitted when the item has closed.
+ * @fires click - Emitted when the element is clicked.
+ *
+ * @cssprop --m3e-tree-item-font-size - Font size for the item label.
+ * @cssprop --m3e-tree-item-font-weight - Font weight for the item label.
+ * @cssprop --m3e-tree-item-line-height - Line height for the item label.
+ * @cssprop --m3e-tree-item-tracking - Letter spacing for the item label.
+ * @cssprop --m3e-tree-item-padding - Inline padding for the item.
+ * @cssprop --m3e-tree-item-height - Height of the item.
+ * @cssprop --m3e-tree-item-shape - Border radius of the item and focus ring.
+ * @cssprop --m3e-tree-item-icon-size - Size of the icon.
+ * @cssprop --m3e-tree-item-inset - Indentation for nested items.
+ * @cssprop --m3e-tree-item-label-color - Text color for the item label.
+ * @cssprop --m3e-tree-item-selected-label-color - Text color for selected item label.
+ * @cssprop --m3e-tree-item-selected-container-color - Background color for selected item.
+ * @cssprop --m3e-tree-item-selected-container-focus-color - Focus color for selected item container.
+ * @cssprop --m3e-tree-item-selected-container-hover-color - Hover color for selected item container.
+ * @cssprop --m3e-tree-item-selected-ripple-color - Ripple color for selected item.
+ * @cssprop --m3e-tree-item-unselected-container-focus-color - Focus color for unselected item container.
+ * @cssprop --m3e-tree-item-unselected-container-hover-color - Hover color for unselected item container.
+ * @cssprop --m3e-tree-item-unselected-ripple-color - Ripple color for unselected item.
+ * @cssprop --m3e-tree-item-disabled-color - Text color for disabled item.
+ * @cssprop --m3e-tree-item-disabled-color-opacity - Opacity for disabled item text color.
+ */
+let M3eTreeItemElement = M3eTreeItemElement_1 = class M3eTreeItemElement extends Selected$1(Disabled$1(EventAttribute$1(AttachInternals$1(Role$1(LitElement, "treeitem"), true), "opening", "opened", "closing", "closed"))) {
+  constructor() {
+    super(...arguments);
+    _M3eTreeItemElement_instances.add(this);
+    /** @private */
+    this._hasChildItems = false;
+    /** @private */
+    this._multi = false;
+    /** @private */
+    _M3eTreeItemElement_treeMutationController.set(this, new MutationController$1(this, {
+      target: null,
+      skipInitial: true,
+      config: {
+        attributeFilter: ["multi"]
+      },
+      callback: () => __classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleTreeChange).call(this)
+    }));
+    /** @private */
+    _M3eTreeItemElement_items.set(this, []);
+    /** @private */
+    _M3eTreeItemElement_tree.set(this, null);
+    /** @private */
+    _M3eTreeItemElement_path.set(this, new Array());
+    /** @private */
+    _M3eTreeItemElement_link.set(this, null);
+    /**
+     * Whether the item is expanded.
+     * @default false
+     */
+    this.open = false;
+    /**
+     * A value indicating whether the element's selected / checked state is indeterminate.
+     * @default false
+     */
+    this.indeterminate = false;
+  }
+  /** A reference to the nested `HTMLAnchorElement`. */
+  get link() {
+    return __classPrivateFieldGet(this, _M3eTreeItemElement_link, "f");
+  }
+  /** A reference to the element used to present the label of the item. */
+  get label() {
+    return this._base ?? null;
+  }
+  /** Whether the item is visible. */
+  get visible() {
+    return !__classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").some(x => !x.open);
+  }
+  /** The full path of the item, starting with the top-most ancestor, including this item. */
+  get path() {
+    return [...__classPrivateFieldGet(this, _M3eTreeItemElement_path, "f"), this];
+  }
+  /** Whether the item has child items. */
+  get hasChildItems() {
+    return this._hasChildItems;
+  }
+  /** The parenting item. */
+  get parentItem() {
+    return __classPrivateFieldGet(this, _M3eTreeItemElement_path, "f")[__classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").length - 1] ?? null;
+  }
+  /** The items that immediately descend from this item. */
+  get childItems() {
+    return __classPrivateFieldGet(this, _M3eTreeItemElement_items, "f");
+  }
+  /** The one-based level of the item. */
+  get level() {
+    return __classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").length + 1;
+  }
+  /**
+   * Expands this item, and optionally, all descendants.
+   * @param {boolean} [descendants=false] Whether to expand all descendants.
+   */
+  expand(descendants = false) {
+    if (this.hasChildItems) {
+      this.open = true;
+      if (descendants) {
+        this.childItems.forEach(x => x.expand(true));
+      }
+    }
+  }
+  /**
+   * Collapses this item, and optionally, all descendants.
+   * @param {boolean} [descendants=false] Whether to collapse all descendants.
+   */
+  collapse(descendants = false) {
+    if (this.hasChildItems) {
+      this.open = false;
+      if (descendants) {
+        this.childItems.forEach(x => x.collapse(true));
+      }
+    }
+  }
+  /** Toggles the expanded state of the item. */
+  toggle() {
+    if (this.hasChildItems) {
+      this.open = !this.open;
+    }
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    __classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").length = 0;
+    for (let item = this.parentElement?.closest("m3e-tree-item"); item; item = item.parentElement?.closest("m3e-tree-item")) {
+      __classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").push(item);
+    }
+    __classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").reverse();
+    this.style.setProperty("--_tree-item-level", `${this.level - 1}`);
+    __classPrivateFieldSet(this, _M3eTreeItemElement_tree, this.closest("m3e-tree"), "f");
+    if (__classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")) {
+      __classPrivateFieldGet(this, _M3eTreeItemElement_treeMutationController, "f").observe(__classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f"));
+      __classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleTreeChange).call(this);
+    }
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __classPrivateFieldGet(this, _M3eTreeItemElement_path, "f").length = 0;
+    if (__classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")) {
+      __classPrivateFieldGet(this, _M3eTreeItemElement_treeMutationController, "f").unobserve(__classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f"));
+    }
+  }
+  /** @inheritdoc */
+  update(changedProperties) {
+    super.update(changedProperties);
+    if (changedProperties.has("selected") || changedProperties.has("indeterminate") || changedProperties.has("_multi")) {
+      if (__classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.multi) {
+        this.ariaSelected = null;
+        this.ariaChecked = this.indeterminate ? "mixed" : `${this.selected}`;
+      } else {
+        this.ariaSelected = `${this.selected}`;
+      }
+    }
+    if (changedProperties.has("selected")) {
+      for (const icon of this.querySelectorAll(":scope > m3e-icon[slot]:not([slot='toggle-icon']):not([slot='open-toggle-icon'])")) {
+        icon.toggleAttribute("filled", this.selected);
+      }
+    }
+    if (changedProperties.has("open") || changedProperties.has("_hasChildItems")) {
+      this.ariaExpanded = this._hasChildItems ? `${this.open}` : null;
+    }
+    if (changedProperties.has("_hasChildItems") && this.disabled || changedProperties.has("disabled")) {
+      __classPrivateFieldGet(this, _M3eTreeItemElement_items, "f").forEach(x => x.disabled = this.disabled);
+    }
+  }
+  /** @inheritdoc */
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+    const base = this._base;
+    if (base) {
+      [this.focusRing, this.stateLayer, this.ripple].forEach(x => x?.attach(base));
+    }
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base" @click="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleClick)}"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" inward ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div aria-hidden="true" class="inset"></div><div aria-hidden="true" class="toggle"><slot name="toggle-icon"><svg class="toggle-icon" viewBox="0 -960 960 960" fill="currentColor"><path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/></svg></slot><slot name="open-toggle-icon" @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleOpenToggleIconSlotChange)}"></slot></div>${this._multi ? html`<m3e-pseudo-checkbox class="checkbox" ?checked="${this.selected}" ?indeterminate="${this.indeterminate}" ?disabled="${this.disabled}" @click="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleCheckboxClick)}"></m3e-pseudo-checkbox>` : nothing}<div class="icon" aria-hidden="true">${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_renderIcon).call(this)}</div><div class="label"><slot name="label" @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleSlotChange)}"></slot></div></div><m3e-collapsible class="group" role="group" aria-hidden="${ifDefined(this._hasChildItems ? undefined : "true")}" ?open="${this._hasChildItems && this.open}" @opening="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleCollapsibleEvent)}" @opened="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleCollapsibleEvent)}" @closing="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleCollapsibleEvent)}" @closed="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleCollapsibleEvent)}"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleItemSlotChange)}"></slot></m3e-collapsible>`;
+  }
+};
+_M3eTreeItemElement_treeMutationController = new WeakMap();
+_M3eTreeItemElement_items = new WeakMap();
+_M3eTreeItemElement_tree = new WeakMap();
+_M3eTreeItemElement_path = new WeakMap();
+_M3eTreeItemElement_link = new WeakMap();
+_M3eTreeItemElement_instances = new WeakSet();
+_M3eTreeItemElement_renderIcon = function _M3eTreeItemElement_renderIcon() {
+  const icon = html`<slot name="icon" @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleIconSlotChange)}"></slot>`;
+  return this.selected && !this.hasChildItems ? html`<slot name="selected-icon" @slotchange="${__classPrivateFieldGet(this, _M3eTreeItemElement_instances, "m", _M3eTreeItemElement_handleIconSlotChange)}">${icon}</slot>` : icon;
+};
+_M3eTreeItemElement_handleOpenToggleIconSlotChange = function _M3eTreeItemElement_handleOpenToggleIconSlotChange(e) {
+  setCustomState$1(this, "-with-open-toggle-icon", hasAssignedNodes$1(e.target));
+};
+_M3eTreeItemElement_handleIconSlotChange = function _M3eTreeItemElement_handleIconSlotChange(e) {
+  setCustomState$1(this, "-with-icon", hasAssignedNodes$1(e.target));
+};
+_M3eTreeItemElement_handleSlotChange = function _M3eTreeItemElement_handleSlotChange(e) {
+  __classPrivateFieldSet(this, _M3eTreeItemElement_link, e.target.assignedElements({
+    flatten: true
+  }).find(x => x instanceof HTMLAnchorElement) ?? null, "f");
+  __classPrivateFieldGet(this, _M3eTreeItemElement_link, "f")?.setAttribute("tabindex", "-1");
+};
+_M3eTreeItemElement_handleItemSlotChange = function _M3eTreeItemElement_handleItemSlotChange(e) {
+  __classPrivateFieldSet(this, _M3eTreeItemElement_items, e.target.assignedElements({
+    flatten: true
+  }).filter(x => x instanceof M3eTreeItemElement_1), "f");
+  const hadChildItems = this._hasChildItems;
+  this._hasChildItems = __classPrivateFieldGet(this, _M3eTreeItemElement_items, "f").length > 0;
+  setCustomState$1(this, "-with-items", this._hasChildItems);
+  if (hadChildItems || this._hasChildItems) {
+    if (this._multi && __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.cascade) {
+      let anySelected = false,
+        anyDeselected = false;
+      for (const child of this.querySelectorAll("m3e-tree-item")) {
+        anySelected = anySelected || child.selected;
+        anyDeselected = anyDeselected || !child.selected;
+        if (anySelected && anyDeselected) {
+          break;
+        }
+      }
+      if (anyDeselected) {
+        __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.[selectionManager].deselect(this);
+        this.indeterminate = anySelected;
+      } else {
+        __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.[selectionManager].select(this, false);
+        this.indeterminate = false;
+      }
+    }
+  }
+};
+_M3eTreeItemElement_handleTreeChange = function _M3eTreeItemElement_handleTreeChange() {
+  this._multi = __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.multi === true;
+  console.log(this._multi);
+  setCustomState$1(this, "-multi", this._multi);
+};
+_M3eTreeItemElement_handleClick = function _M3eTreeItemElement_handleClick() {
+  if (this.disabled) return;
+  __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.[selectionManager].setActiveItem(this);
+  if (!this._hasChildItems) {
+    if (this._multi) {
+      if (this.selected) {
+        __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.deselect(this);
+      } else {
+        __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.select(this);
+      }
+    } else {
+      __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.select(this);
+    }
+    __classPrivateFieldGet(this, _M3eTreeItemElement_link, "f")?.click();
+  } else {
+    if (!this._multi) {
+      __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.select(this);
+    }
+    this.toggle();
+  }
+};
+_M3eTreeItemElement_handleCheckboxClick = function _M3eTreeItemElement_handleCheckboxClick(e) {
+  e.stopPropagation();
+  if (!this.selected) {
+    __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.select(this);
+  } else {
+    __classPrivateFieldGet(this, _M3eTreeItemElement_tree, "f")?.deselect(this);
+  }
+};
+_M3eTreeItemElement_handleCollapsibleEvent = function _M3eTreeItemElement_handleCollapsibleEvent(e) {
+  e.stopPropagation();
+  this.dispatchEvent(new Event(e.type, {
+    bubbles: true
+  }));
+};
+/** The styles of the element. */
+M3eTreeItemElement.styles = css`:host { display: block; flex: none; outline: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: flex; align-items: center; position: relative; height: calc(var(--m3e-tree-item-height, 3rem) + ${DesignToken$1.density.calc(-3)}); padding-inline: var(--m3e-tree-item-padding, 1rem); font-size: var(--m3e-tree-item-font-size, ${DesignToken$1.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-tree-item-font-weight, ${DesignToken$1.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-tree-item-line-height, ${DesignToken$1.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-tree-item-tracking, ${DesignToken$1.typescale.standard.label.large.tracking}); transition: ${unsafeCSS(`color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard},
+        background-color ${DesignToken$1.motion.duration.short4} ${DesignToken$1.motion.easing.standard}`)}; } .base, .focus-ring { border-radius: var(--m3e-tree-item-shape, ${DesignToken$1.shape.corner.none}); } .label { flex: 1 1 auto; display: flex; align-items: center; position: relative; overflow: hidden; vertical-align: middle; } .checkbox { flex: none; margin-inline-end: 0.5rem; } .icon, .toggle { flex: none; align-items: center; justify-content: center; position: relative; vertical-align: middle; margin-inline-end: 0.5rem; } .toggle { display: var(--_tree-item-toggle-display, none); } :host(:not(:state(-with-icon))) .icon { display: none; } .inset { margin-inline-start: calc(var(--m3e-tree-item-inset, 2rem) * var(--_tree-item-level, 0)); } :host([open]) .toggle-icon { transform: rotate(90deg); } :host(:not(:state(-with-items))) .toggle { visibility: hidden; } :host(:not(:state(-with-items))) .group { display: none; } ::slotted([slot="selected-icon"]), ::slotted([slot="icon"]), ::slotted([slot="toggle-icon"]), ::slotted([slot="open-toggle-icon"]), .toggle-icon { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-tree-item-icon-size, 1.5rem); } .toggle-icon { transition: ${unsafeCSS(`transform var(--m3e-collapsible-animation-duration, ${DesignToken$1.motion.duration.medium1})
+        ${DesignToken$1.motion.easing.standard}`)}; } :host(:state(-with-open-toggle-icon)[open]) slot[name="toggle-icon"], :host(:state(-with-open-toggle-icon):not([open])) slot[name="open-toggle-icon"] { display: none; } :host(:not(:disabled)) .base { cursor: pointer; } :host(:not(:disabled)) .base { color: var(--m3e-tree-item-label-color, ${DesignToken$1.color.onSurfaceVariant}); } :host(:disabled) .base { color: color-mix( in srgb, var(--m3e-tree-item-disabled-color, ${DesignToken$1.color.onSurface}) var(--m3e-tree-item-disabled-color-opacity, 38%), transparent ); } :host([selected]:not(:disabled)) .base { color: var(--m3e-tree-item-selected-label-color, ${DesignToken$1.color.onSecondaryContainer}); background-color: var(--m3e-tree-item-selected-container-color, ${DesignToken$1.color.secondaryContainer}); --m3e-state-layer-focus-color: var( --m3e-tree-item-selected-container-focus-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-selected-container-hover-color, ${DesignToken$1.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-tree-item-selected-ripple-color, ${DesignToken$1.color.onSecondaryContainer}); } :host(:not([selected]):not(:disabled)) .base { --m3e-state-layer-focus-color: var( --m3e-tree-item-unselected-container-focus-color, ${DesignToken$1.color.onSurface} ); --m3e-state-layer-hover-color: var( --m3e-tree-item-unselected-container-hover-color, ${DesignToken$1.color.onSurface} ); --m3e-ripple-color: var(--m3e-tree-item-unselected-ripple-color, ${DesignToken$1.color.onSurface}); } .state-layer { margin-inline: auto; } ::slotted(a[slot="label"]) { all: unset; } @media (prefers-reduced-motion) { .base, .toggle, .state-layer { transition: none !important; } } @media (forced-colors: active) { .base, .state-layer { transition: none !important; } :host(:disabled) .base { color: GrayText; } :host(:not(:disabled)) .base { color: CanvasText; background-color: Canvas; } :host([selected]:not(:state(-multi)):not(:disabled)) slot[name="icon"], :host([selected]:not(:state(-multi)):not(:disabled)) slot[name="label"] { color: Highlight; } }`;
+__decorate([query(".state-layer")], M3eTreeItemElement.prototype, "stateLayer", void 0);
+__decorate([query(".focus-ring")], M3eTreeItemElement.prototype, "focusRing", void 0);
+__decorate([query(".ripple")], M3eTreeItemElement.prototype, "ripple", void 0);
+__decorate([query(".base")], M3eTreeItemElement.prototype, "_base", void 0);
+__decorate([state()], M3eTreeItemElement.prototype, "_hasChildItems", void 0);
+__decorate([state()], M3eTreeItemElement.prototype, "_multi", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eTreeItemElement.prototype, "open", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eTreeItemElement.prototype, "indeterminate", void 0);
+M3eTreeItemElement = M3eTreeItemElement_1 = __decorate([customElement$1("m3e-tree-item")], M3eTreeItemElement);
+
+var _M3eTreeElement_instances, _M3eTreeElement_ignoreFocusVisible, _M3eTreeElement_ignoreFocus, _M3eTreeElement_keyDownHandler, _M3eTreeElement_keyUpHandler, _M3eTreeElement_pointerDownHandler, _M3eTreeElement_handleSlotChange, _M3eTreeElement_handleKeyDown, _M3eTreeElement_handleKeyUp, _M3eTreeElement_handlePointerDown, _M3eTreeElement_activateItem, _M3eTreeElement_updateFocusVisible, _M3eTreeElement_updateItemFocusVisible, _M3eTreeElement_cascadeAncestorSelected, _b;
+var M3eTreeElement_1;
+/**
+ * Presents hierarchical data in a tree structure.
+ *
+ * @description
+ * The `m3e-tree` component presents hierarchical data in a structure that users can
+ * navigate, with nested levels that open and collapse as needed.
+ *
+ * @example
+ * The following example illustrates a simple tree with nested child items.
+ * ```html
+ * <m3e-tree>
+ *   <m3e-tree-item open>
+ *     <span slot="label">Getting Started</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Overview</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Installation</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ *   <m3e-tree-item>
+ *     <span slot="label">Components</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Button</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Card</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ * </m3e-tree>
+ * ```
+ *
+ * @example
+ * The next example demonstrates multi-selection with cascading selection state.
+ * ```html
+ * <m3e-tree multi cascade>
+ *   <m3e-tree-item>
+ *     <span slot="label">Fruits</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Apples</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Oranges</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Bananas</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ *   <m3e-tree-item>
+ *     <span slot="label">Vegetables</span>
+ *     <m3e-tree-item>
+ *       <span slot="label">Carrots</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Broccoli</span>
+ *     </m3e-tree-item>
+ *     <m3e-tree-item>
+ *       <span slot="label">Spinach</span>
+ *     </m3e-tree-item>
+ *   </m3e-tree-item>
+ * </m3e-tree>
+ * ```
+ *
+ * @tag m3e-tree
+ *
+ * @slot - Renders the items of the tree.
+ *
+ * @attr multi - Whether multiple items can be selected.
+ * @attr cascade -Whether multiple item selection cascades to child items.
+ *
+ * @fires change - Emitted when the selected state changes.
+ *
+ * @cssprop --m3e-tree-scrollbar-width - Width of the tree scrollbar.
+ * @cssprop --m3e-tree-scrollbar-color - Color of the tree scrollbar.
+ */
+let M3eTreeElement = M3eTreeElement_1 = class M3eTreeElement extends Role$1(LitElement, "tree") {
+  constructor() {
+    super();
+    _M3eTreeElement_instances.add(this);
+    /** @private */
+    _M3eTreeElement_ignoreFocusVisible.set(this, false);
+    /** @private */
+    _M3eTreeElement_ignoreFocus.set(this, false);
+    /** @private */
+    this[_b] = new SelectionManager().withVerticalOrientation().withHomeAndEnd().withPageUpAndDown().withTypeahead().withSkipPredicate(x => x.disabled || !x.visible).disableRovingTabIndex().onActiveItemChange(() => {
+      if (this[selectionManager].activeItem) {
+        __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_activateItem).call(this, this[selectionManager].activeItem);
+      }
+    });
+    /** @private */
+    _M3eTreeElement_keyDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_handleKeyDown).call(this, e));
+    /** @private */
+    _M3eTreeElement_keyUpHandler.set(this, () => __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_handleKeyUp).call(this));
+    /** @private */
+    _M3eTreeElement_pointerDownHandler.set(this, e => __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_handlePointerDown).call(this, e));
+    /**
+     * Whether multiple items can be selected.
+     * @default false
+     */
+    this.multi = false;
+    /**
+     * Whether multiple item selection cascades to child items.
+     * @default false
+     */
+    this.cascade = false;
+    new PressedController$1(this, {
+      callback: pressed => __classPrivateFieldSet(this, _M3eTreeElement_ignoreFocus, pressed, "f")
+    });
+    new FocusController$1(this, {
+      callback: () => {
+        if (!__classPrivateFieldGet(this, _M3eTreeElement_ignoreFocus, "f")) {
+          __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_updateFocusVisible).call(this);
+        }
+      }
+    });
+  }
+  /** The selected items of the tree. */
+  get selected() {
+    return this[selectionManager].selectedItems;
+  }
+  /** All the items of the tree. */
+  get items() {
+    return this[selectionManager].items;
+  }
+  /** @internal */
+  expand(itemsOrDescendants, maybeDescendants = false) {
+    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;
+    const descendants = typeof itemsOrDescendants === "boolean" ? itemsOrDescendants : maybeDescendants;
+    items.forEach(x => x.expand(descendants));
+  }
+  /** @internal */
+  collapse(itemsOrDescendants, maybeDescendants = false) {
+    const items = Array.isArray(itemsOrDescendants) ? itemsOrDescendants : this[selectionManager].items;
+    const descendants = typeof itemsOrDescendants === "boolean" ? itemsOrDescendants : maybeDescendants;
+    items.forEach(x => x.collapse(descendants));
+    const activeItem = this[selectionManager].activeItem;
+    if (activeItem && !activeItem.visible) {
+      for (let parent = activeItem.parentItem; parent; parent = parent.parentItem) {
+        if (parent.visible) {
+          this[selectionManager].setActiveItem(parent);
+          break;
+        }
+      }
+    }
+  }
+  /**
+   * Selects the specified item.
+   * @param {M3eTreeItemElement} item The item to select.
+   * @param {boolean} [activate=false] A value indicating whether to activate the item.
+   */
+  select(item, activate = false) {
+    this[selectionManager].select(item, activate);
+    item.indeterminate = false;
+    if (this.multi && this.cascade) {
+      if (item.hasChildItems) {
+        item.childItems.forEach(x => this.select(x));
+      }
+      __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_cascadeAncestorSelected).call(this, item);
+    }
+    if (activate) {
+      __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_activateItem).call(this, item);
+    }
+    this.dispatchEvent(new Event("change", {
+      bubbles: true
+    }));
+  }
+  /**
+   * Deselects the specified item.
+   * @param {M3eTreeItemElement} item The item to deselect.
+   */
+  deselect(item) {
+    this[selectionManager].deselect(item);
+    item.indeterminate = false;
+    if (this.multi && this.cascade) {
+      if (item.hasChildItems) {
+        item.childItems.forEach(x => this.deselect(x));
+      }
+      __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_cascadeAncestorSelected).call(this, item);
+    }
+    this.dispatchEvent(new Event("change", {
+      bubbles: true
+    }));
+  }
+  /** @inheritdoc */
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+    this.addEventListener("keydown", __classPrivateFieldGet(this, _M3eTreeElement_keyDownHandler, "f"));
+    this.addEventListener("keyup", __classPrivateFieldGet(this, _M3eTreeElement_keyUpHandler, "f"));
+    this.addEventListener("pointerdown", __classPrivateFieldGet(this, _M3eTreeElement_pointerDownHandler, "f"));
+  }
+  /** @inheritdoc */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("keydown", __classPrivateFieldGet(this, _M3eTreeElement_keyDownHandler, "f"));
+    this.removeEventListener("keyup", __classPrivateFieldGet(this, _M3eTreeElement_keyUpHandler, "f"));
+    this.removeEventListener("pointerdown", __classPrivateFieldGet(this, _M3eTreeElement_pointerDownHandler, "f"));
+  }
+  /** @inheritdoc */
+  willUpdate(_changedProperties) {
+    super.willUpdate(_changedProperties);
+    if (_changedProperties.has("multi")) {
+      this[selectionManager].multi = this.multi;
+      if (this.multi) {
+        this.setAttribute("aria-multiselectable", "true");
+      } else {
+        this.removeAttribute("aria-multiselectable");
+      }
+    }
+  }
+  /** @inheritdoc */
+  render() {
+    return html`<div class="base"><slot @slotchange="${__classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_handleSlotChange)}"></slot></div>`;
+  }
+};
+_M3eTreeElement_ignoreFocusVisible = new WeakMap();
+_M3eTreeElement_ignoreFocus = new WeakMap();
+_M3eTreeElement_keyDownHandler = new WeakMap();
+_M3eTreeElement_keyUpHandler = new WeakMap();
+_M3eTreeElement_pointerDownHandler = new WeakMap();
+_M3eTreeElement_instances = new WeakSet();
+_b = selectionManager;
+_M3eTreeElement_handleSlotChange = function _M3eTreeElement_handleSlotChange() {
+  const {
+    added
+  } = this[selectionManager].setItems([...this.querySelectorAll("m3e-tree-item")]);
+  for (const item of added) {
+    item.id = item.id || `m3e-tree-item-${M3eTreeElement_1.__nextId++}`;
+  }
+  if (this[selectionManager].activeItem) {
+    this.setAttribute("aria-activedescendant", this[selectionManager].activeItem.id);
+    __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_updateFocusVisible).call(this);
+  } else {
+    this.removeAttribute("aria-activedescendant");
+  }
+};
+_M3eTreeElement_handleKeyDown = function _M3eTreeElement_handleKeyDown(e) {
+  __classPrivateFieldSet(this, _M3eTreeElement_ignoreFocusVisible, false, "f");
+  __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_updateFocusVisible).call(this);
+  const item = this[selectionManager].activeItem;
+  if (e.defaultPrevented || !item || item.disabled) return;
+  switch (e.key) {
+    case "Enter":
+      if (!this.multi) {
+        if (!item.selected) {
+          this.select(item);
+          item.link?.click();
+        }
+      } else {
+        if (item.ripple && !item.ripple.visible) {
+          item.ripple.centered = true;
+          item.ripple.show(0, 0, true);
+          item.ripple.centered = false;
+        }
+        item.link?.click();
+      }
+      break;
+    case " ":
+      e.preventDefault();
+      if (this.multi) {
+        if (item.selected) {
+          this.deselect(item);
+        } else {
+          this.select(item);
+        }
+      } else {
+        if (item.ripple && !item.ripple.visible) {
+          item.ripple.centered = true;
+          item.ripple.show(0, 0, true);
+          item.ripple.centered = false;
+        }
+        this.select(item);
+        item.link?.click();
+      }
+      break;
+    case "*":
+      e.preventDefault();
+      item.expand(true);
+      break;
+    case "Left":
+    case "ArrowLeft":
+      e.preventDefault();
+      if (M3eDirectionality.current === "ltr") {
+        if (item.hasChildItems && item.open) {
+          requestAnimationFrame(() => item.collapse());
+        } else {
+          const parent = item.parentItem;
+          if (parent) {
+            this[selectionManager].setActiveItem(parent);
+          }
+        }
+      } else if (item.hasChildItems && !item.open) {
+        item.expand();
+      }
+      break;
+    case "Right":
+    case "ArrowRight":
+      e.preventDefault();
+      if (M3eDirectionality.current === "rtl") {
+        if (item.hasChildItems && item.open) {
+          requestAnimationFrame(() => item.collapse());
+        } else {
+          const parent = item.parentItem;
+          if (parent) {
+            this[selectionManager].setActiveItem(parent);
+          }
+        }
+      } else if (item.hasChildItems && !item.open) {
+        item.expand();
+      }
+      break;
+    default:
+      this[selectionManager].onKeyDown(e);
+      break;
+  }
+};
+_M3eTreeElement_handleKeyUp = function _M3eTreeElement_handleKeyUp() {
+  const item = this[selectionManager].activeItem;
+  if (item && !item.disabled && item.ripple?.visible) {
+    item.ripple.hide();
+  }
+};
+_M3eTreeElement_handlePointerDown = function _M3eTreeElement_handlePointerDown(e) {
+  if (!e.defaultPrevented && !__classPrivateFieldGet(this, _M3eTreeElement_ignoreFocusVisible, "f")) {
+    __classPrivateFieldSet(this, _M3eTreeElement_ignoreFocusVisible, true, "f");
+    const item = e.composedPath().reverse().find(x => x instanceof M3eTreeItemElement);
+    if (item && !item.disabled) {
+      __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_updateItemFocusVisible).call(this, item, true, false);
+    }
+  }
+};
+_M3eTreeElement_activateItem = function _M3eTreeElement_activateItem(item) {
+  this.setAttribute("aria-activedescendant", item.id);
+  if (item.label) {
+    scrollIntoViewIfNeeded$1(item.label, this, {
+      block: "nearest",
+      behavior: "smooth"
+    });
+  }
+  __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_updateFocusVisible).call(this);
+};
+_M3eTreeElement_updateFocusVisible = function _M3eTreeElement_updateFocusVisible() {
+  const focused = this.matches(":focus") || this.matches(":focus-within");
+  const focusVisible = !__classPrivateFieldGet(this, _M3eTreeElement_ignoreFocusVisible, "f") && this.matches(":focus-visible");
+  this[selectionManager].items.forEach(x => {
+    const active = x === this[selectionManager].activeItem;
+    __classPrivateFieldGet(this, _M3eTreeElement_instances, "m", _M3eTreeElement_updateItemFocusVisible).call(this, x, active && focused, active && focusVisible);
+  });
+};
+_M3eTreeElement_updateItemFocusVisible = function _M3eTreeElement_updateItemFocusVisible(item, focused, focusVisible) {
+  if (focused && focusVisible) {
+    item.stateLayer?.show("focused");
+  } else {
+    item.stateLayer?.hide("focused");
+  }
+  if (focusVisible) {
+    item.focusRing?.show();
+  } else {
+    item.focusRing?.hide();
+  }
+};
+_M3eTreeElement_cascadeAncestorSelected = function _M3eTreeElement_cascadeAncestorSelected(item) {
+  for (let parent = item.parentItem; parent; parent = parent.parentItem) {
+    let hasSelected = false,
+      hasDeselected = false;
+    for (const child of parent.querySelectorAll("m3e-tree-item")) {
+      hasSelected = hasSelected || child.selected;
+      hasDeselected = hasDeselected || !child.selected;
+      if (hasSelected && hasDeselected) {
+        break;
+      }
+    }
+    if (hasDeselected) {
+      this[selectionManager].deselect(parent);
+      parent.indeterminate = hasSelected;
+    } else {
+      this[selectionManager].select(parent, false);
+      parent.indeterminate = false;
+    }
+  }
+};
+(() => {
+  // NOTE: unsafeCSS used here due to linting error with use of '>'.
+  registerStyleSheet$1(css`${unsafeCSS(`m3e-tree:has(> m3e-tree-item:state(-with-items)) {
+        --_tree-item-toggle-display: flex;
+      }`)}`);
+})();
+/** The styles of the element. */
+M3eTreeElement.styles = css`:host { display: block; outline: none; overflow-y: auto; overflow-x: hidden; min-height: 0; scrollbar-width: ${DesignToken$1.scrollbar.width}; scrollbar-color: ${DesignToken$1.scrollbar.color}; } .base { width: 100%; display: flex; flex-direction: column; position: relative; min-height: inherit; box-sizing: border-box; }`;
+/** @private */
+M3eTreeElement.__nextId = 0;
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eTreeElement.prototype, "multi", void 0);
+__decorate([property({
+  type: Boolean,
+  reflect: true
+})], M3eTreeElement.prototype, "cascade", void 0);
+M3eTreeElement = M3eTreeElement_1 = __decorate([customElement$1("m3e-tree")], M3eTreeElement);
+
+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, M3eTreeElement, M3eTreeItemElement, 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