@redvars/peacock 3.5.1 → 3.6.1

package/dist/{navigation-rail-Lxetd5-Z.js → navigation-rail-DTTkqohi.js}

@@ -1,276 +1,26 @@
 import { a as i, _ as __decorate, i as i$1, b, A, c as __classPrivateFieldGet, w } from './IndividualComponent-DUINtMGK.js';
 import { n } from './property-1psGvXOq.js';
+import { e as e$1 } from './class-map-YU7g0o3B.js';
 import { r } from './state-DwbEjqVk.js';
-import { e as e$1 } from './directive-ZPhl09Yt.js';
-import { e as e$2, o as o$4 } from './unsafe-html-BsGUjx94.js';
-import { e as e$3 } from './class-map-YU7g0o3B.js';
 import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
-import { a as e, e as e$4 } from './query-QBcUV-L_.js';
+import { a as e, e as e$2 } from './query-QBcUV-L_.js';
 import { B as BaseHyperlinkMixin, t as throttle } from './BaseHyperlinkMixin-BNuwbiEf.js';
-import { o as o$2 } from './style-map-DVmWOuYy.js';
+import { o as o$1 } from './style-map-DVmWOuYy.js';
 import { r as redispatchEvent, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
-import { s as spread, o as o$3 } from './BaseButton-DuASuVth.js';
-import { B as BaseInput, i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DicqGkCJ.js';
+import { s as spread, o as o$2, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
+import { B as BaseInput } from './BaseInput-14YmcfK7.js';
+import { F as FloatingController } from './popover-NC7b1lTq.js';
+import { i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DOcaw4Yq.js';
+import { f as fetchSVG, s as sanitizeSvg, o as o$3 } from './flow-designer-DvTUrDp5.js';
+import { o as o$4 } from './unsafe-html-BsGUjx94.js';
 
 /**
  * @license
  * Copyright 2021 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
- */function o$1(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}
+ */function o(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter(t=>t.matches(s))}})}}
 
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */class t extends e$2{}t.directiveName="unsafeSVG",t.resultType=2;const o=e$1(t);
-
-// Basic sanitization: remove <script>, <foreignObject>, event handler attributes (on*), and iframes
-function sanitizeSvg(rawSvg) {
-    try {
-        const parser = new DOMParser();
-        const doc = parser.parseFromString(rawSvg, 'image/svg+xml');
-        const scripts = Array.from(doc.querySelectorAll('script'));
-        scripts.forEach(n => n.remove());
-        const foreigns = Array.from(doc.querySelectorAll('foreignObject, iframe'));
-        foreigns.forEach(n => n.remove());
-        const all = Array.from(doc.querySelectorAll('*'));
-        all.forEach(el => {
-            const attrs = Array.from(el.attributes).filter(a => /^on/i.test(a.name));
-            attrs.forEach(a => el.removeAttribute(a.name));
-        });
-        const el = doc.documentElement;
-        if (!el)
-            return '';
-        const serializer = new XMLSerializer();
-        return serializer.serializeToString(el);
-    }
-    catch (e) {
-        return '';
-    }
-}
-
-async function createCacheFetch(name) {
-    let cache = null;
-    // This map tracks requests currently being processed
-    const inFlightRequests = new Map();
-    try {
-        cache = await window.caches.open(name);
-    }
-    catch (e) {
-        console.warn('window.caches access not allowed');
-    }
-    return async (url) => {
-        if (inFlightRequests.has(url)) {
-            return inFlightRequests.get(url);
-        }
-        const fetchPromise = (async () => {
-            const request = new Request(url);
-            if (cache) {
-                const cachedResponse = await cache.match(request);
-                if (cachedResponse) {
-                    return cachedResponse.text();
-                }
-            }
-            const urlObj = new URL(request.url);
-            const isSameOrigin = urlObj.origin === window.location.origin;
-            const response = await fetch(request.url, {
-                method: 'GET',
-                mode: isSameOrigin ? 'no-cors' : 'cors',
-                credentials: isSameOrigin ? 'same-origin' : 'omit',
-            });
-            if (response.status === 404) {
-                console.error(`[Fetch Error] Resource not found (404): ${url}`);
-                return '';
-            }
-            const result = await response.text();
-            if (cache && response.status === 200) {
-                await cache.put(request, new Response(result, {
-                    status: response.status,
-                    statusText: response.statusText,
-                    headers: response.headers,
-                }));
-            }
-            return result;
-        })();
-        inFlightRequests.set(url, fetchPromise);
-        try {
-            return await fetchPromise;
-        }
-        finally {
-            inFlightRequests.delete(url);
-        }
-    };
-}
-
-const PROVIDERS = {
-    'material-symbols': (name) => `https://cdn.jsdelivr.net/npm/@material-symbols/svg-500@0.40.1/outlined/${name}.svg`,
-    carbon: (name) => `https://cdn.jsdelivr.net/npm/@carbon/icons@11.41.0/svg/32/${name}.svg`,
-};
-const cacheFetch = await createCacheFetch('svg-cache');
-async function fetchSVG(url) {
-    if (!url)
-        return '';
-    return cacheFetch(url);
-}
-async function fetchIcon(name, provider = 'material-symbols') {
-    if (!name)
-        return '';
-    if (!PROVIDERS[provider]) {
-        throw new Error(`Provider '${provider}' not found`);
-    }
-    return fetchSVG(PROVIDERS[provider](name));
-}
-
-var css_248z$S = i`* {
-  box-sizing: border-box;
-}
-
-.screen-reader-only {
-  display: none !important;
-}
-
-:host {
-  display: inline-flex;
-  vertical-align: middle;
-  --icon-size: inherit;
-  --icon-color: inherit;
-}
-
-.icon {
-  height: var(--icon-size, 1rem);
-  width: var(--icon-size, 1rem);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.icon svg {
-  fill: var(--icon-color);
-  height: 100%;
-  width: 100%;
-}`;
-
-/**
- * @label Icon
- * @tag wc-icon
- * @rawTag icon
- * @summary Icons are visual symbols used to represent ideas, objects, or actions.
- * @overview Icons are visual symbols used to represent ideas, objects, or actions. They communicate messages at a glance, afford interactivity, and draw attention to important information.
- *
- * @cssprop --icon-color - Controls the color of the icon.
- * @cssprop [--icon-size=1rem] - Controls the size of the icon. Defaults to "1rem"
- *
- * @example
- * ```html
- * <wc-icon name="home" style="--icon-size: 2rem;"></wc-icon>
- * ```
- *
- */
-class Icon extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.provider = 'material-symbols';
-        this.svgContent = '';
-        // loading + error states for consumers/tests
-        this.loading = false;
-        this.error = null;
-        // token to avoid race conditions when multiple fetches overlap
-        this._fetchId = 0;
-    }
-    firstUpdated() {
-        // perform initial fetch once component is connected and rendered
-        this.__scheduleUpdate();
-    }
-    updated(changedProperties) {
-        // only refetch when name or src changed
-        if (changedProperties.has('name') || changedProperties.has('src')) {
-            this.__scheduleUpdate();
-        }
-    }
-    render() {
-        // accessible wrapper; consumers can provide a fallback via <slot name="fallback">.
-        return b ` <div class="icon">
-      ${this.svgContent
-            ? o(this.svgContent)
-            : b `<slot name="fallback"></slot>`}
-    </div>`;
-    }
-    // small debounce to coalesce rapid changes (50ms)
-    __scheduleUpdate() {
-        if (this._debounceTimer) {
-            clearTimeout(this._debounceTimer);
-        }
-        // @ts-ignore - setTimeout in DOM returns number
-        this._debounceTimer = window.setTimeout(() => this.__updateSvg(), 50);
-    }
-    /**
-     * @internal
-     */
-    async __updateSvg() {
-        this._fetchId += 1;
-        const currentId = this._fetchId;
-        this.loading = true;
-        this.error = null;
-        try {
-            let raw;
-            if (this.name) {
-                raw = await fetchIcon(this.name, this.provider);
-            }
-            else if (this.src) {
-                raw = await fetchSVG(this.src);
-            }
-            else {
-                raw = '';
-            }
-            // If another fetch started after this one, ignore this result
-            if (currentId !== this._fetchId)
-                return;
-            if (raw) {
-                this.svgContent = sanitizeSvg(raw);
-            }
-            else {
-                this.svgContent = '';
-            }
-        }
-        catch (err) {
-            // capture and surface error, but avoid throwing
-            this.error = err instanceof Error ? err : new Error(String(err));
-            this.svgContent = '';
-            // bubble an event so consumers can react
-            this.dispatchEvent(new CustomEvent('icon-error', {
-                detail: { name: this.name, src: this.src, error: this.error },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-        finally {
-            // ensure loading is cleared unless another fetch started
-            if (currentId === this._fetchId) {
-                this.loading = false;
-            }
-        }
-    }
-}
-Icon.styles = [css_248z$S];
-__decorate([
-    n({ type: String, reflect: true })
-], Icon.prototype, "name", void 0);
-__decorate([
-    n({ type: String, reflect: true })
-], Icon.prototype, "src", void 0);
-__decorate([
-    n({ type: String })
-], Icon.prototype, "provider", void 0);
-__decorate([
-    r()
-], Icon.prototype, "svgContent", void 0);
-__decorate([
-    r() // @ts-ignore
-], Icon.prototype, "loading", void 0);
-__decorate([
-    r()
-], Icon.prototype, "error", void 0);
-
-var css_248z$R = i`* {
+var css_248z$U = i`* {
   box-sizing: border-box;
 }
 
@@ -344,7 +94,7 @@ class Avatar extends i$1 {
     render() {
         return b `<div class="avatar-container">
       <div
-        class=${e$3({
+        class=${e$1({
             avatar: true,
             initials: !this.src,
             image: !!this.src,
@@ -361,7 +111,7 @@ class Avatar extends i$1 {
         return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
     }
 }
-Avatar.styles = [css_248z$R];
+Avatar.styles = [css_248z$U];
 __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "name", void 0);
@@ -369,7 +119,7 @@ __decorate([
     n({ type: String, reflect: true })
 ], Avatar.prototype, "src", void 0);
 
-var css_248z$Q = i`* {
+var css_248z$T = i`* {
   box-sizing: border-box;
 }
 
@@ -432,7 +182,7 @@ class Badge extends i$1 {
     }
     render() {
         return b `<div
-      class=${e$3({
+      class=${e$1({
             badge: true,
             'has-value': !!this.value,
         })}
@@ -441,12 +191,12 @@ class Badge extends i$1 {
     </div>`;
     }
 }
-Badge.styles = [css_248z$Q];
+Badge.styles = [css_248z$T];
 __decorate([
     n({ type: String })
 ], Badge.prototype, "value", void 0);
 
-var css_248z$P = i`* {
+var css_248z$S = i`* {
   box-sizing: border-box;
 }
 
@@ -541,7 +291,7 @@ class Divider extends i$1 {
     }
     render() {
         return b `<div
-      class=${e$3({
+      class=${e$1({
             divider: true,
             vertical: this.vertical,
             'slot-has-content': this.slotHasContent,
@@ -555,7 +305,7 @@ class Divider extends i$1 {
     </div>`;
     }
 }
-Divider.styles = [css_248z$P];
+Divider.styles = [css_248z$S];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Divider.prototype, "vertical", void 0);
@@ -563,7 +313,7 @@ __decorate([
     r()
 ], Divider.prototype, "slotHasContent", void 0);
 
-var css_248z$O = i`* {
+var css_248z$R = i`* {
   box-sizing: border-box;
 }
 
@@ -644,9 +394,9 @@ class Elevation extends i$1 {
         return b `<span class="shadow"></span>`;
     }
 }
-Elevation.styles = [css_248z$O];
+Elevation.styles = [css_248z$R];
 
-var css_248z$N = i`* {
+var css_248z$Q = i`* {
   box-sizing: border-box;
 }
 
@@ -874,7 +624,7 @@ class SegmentedButton extends i$1 {
         };
         return b `
       <div
-        class=${e$3(cssClasses)}
+        class=${e$1(cssClasses)}
         role="button"
         tabindex=${this.disabled ? -1 : 0}
         aria-pressed=${this.selected}
@@ -899,7 +649,7 @@ class SegmentedButton extends i$1 {
     `;
     }
 }
-SegmentedButton.styles = [css_248z$N];
+SegmentedButton.styles = [css_248z$Q];
 __decorate([
     n({ type: String, reflect: true })
 ], SegmentedButton.prototype, "value", void 0);
@@ -919,7 +669,7 @@ __decorate([
     r()
 ], SegmentedButton.prototype, "isActive", void 0);
 
-var css_248z$M = i`* {
+var css_248z$P = i`* {
   box-sizing: border-box;
 }
 
@@ -1031,7 +781,7 @@ class SegmentedButtonGroup extends i$1 {
     `;
     }
 }
-SegmentedButtonGroup.styles = [css_248z$M];
+SegmentedButtonGroup.styles = [css_248z$P];
 SegmentedButtonGroup.SegmentedButton = SegmentedButton;
 __decorate([
     n({ type: Boolean, reflect: true, attribute: 'multi-select' })
@@ -1040,7 +790,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], SegmentedButtonGroup.prototype, "nullable", void 0);
 
-var css_248z$L = i`:host {
+var css_248z$O = i`:host {
   display: none;
   pointer-events: none;
   position: absolute;
@@ -1158,7 +908,7 @@ class FocusRing extends i$1 {
         }
     }
 }
-FocusRing.styles = [css_248z$L];
+FocusRing.styles = [css_248z$O];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
@@ -1320,7 +1070,7 @@ class Ripple extends i$1 {
             'hovered': this.hovered,
             'pressed': this.pressed,
         };
-        return b `<div class="surface ${e$3(classes)}"></div>`;
+        return b `<div class="surface ${e$1(classes)}"></div>`;
     }
     update(changedProps) {
         if (changedProps.has('disabled') && this.disabled) {
@@ -1632,10 +1382,10 @@ __decorate([
     r()
 ], Ripple.prototype, "pressed", void 0);
 __decorate([
-    e$4('.surface')
+    e$2('.surface')
 ], Ripple.prototype, "mdRoot", void 0);
 
-var css_248z$K = i`* {
+var css_248z$N = i`* {
   box-sizing: border-box;
 }
 
@@ -1876,7 +1626,7 @@ class AccordionItem extends i$1 {
     render() {
         return b `
       <div
-        class=${e$3({
+        class=${e$1({
             'expansion-panel': true,
             open: this.open,
             disabled: this.disabled,
@@ -1931,7 +1681,7 @@ class AccordionItem extends i$1 {
     }
 }
 _AccordionItem_id = new WeakMap();
-AccordionItem.styles = [css_248z$K];
+AccordionItem.styles = [css_248z$N];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], AccordionItem.prototype, "disabled", void 0);
@@ -1951,10 +1701,10 @@ __decorate([
     r()
 ], AccordionItem.prototype, "_hasHeadingSlot", void 0);
 __decorate([
-    e$4('.header-button')
+    e$2('.header-button')
 ], AccordionItem.prototype, "buttonElement", void 0);
 
-var css_248z$J = i`* {
+var css_248z$M = i`* {
   box-sizing: border-box;
 }
 
@@ -2082,7 +1832,7 @@ class Accordion extends i$1 {
         return b `<div class="accordion"><slot></slot></div>`;
     }
 }
-Accordion.styles = [css_248z$J];
+Accordion.styles = [css_248z$M];
 Accordion.Item = AccordionItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -2091,10 +1841,10 @@ __decorate([
     n({ type: String, reflect: true, attribute: 'display-mode' })
 ], Accordion.prototype, "displayMode", void 0);
 __decorate([
-    o$1({ selector: 'wc-accordion-item' })
+    o({ selector: 'wc-accordion-item' })
 ], Accordion.prototype, "items", void 0);
 
-var css_248z$I = i`* {
+var css_248z$L = i`* {
   box-sizing: border-box;
 }
 
@@ -2147,7 +1897,7 @@ var css_248z$I = i`* {
 class Link extends BaseHyperlinkMixin(i$1) {
     render() {
         return b `<a
-      class=${e$3({
+      class=${e$1({
             link: true,
         })}
       href=${this.href}
@@ -2158,9 +1908,9 @@ class Link extends BaseHyperlinkMixin(i$1) {
     </a>`;
     }
 }
-Link.styles = [css_248z$I];
+Link.styles = [css_248z$L];
 
-var css_248z$H = i`* {
+var css_248z$K = i`* {
   box-sizing: border-box;
 }
 
@@ -2297,7 +2047,7 @@ slot::slotted(*) {
   --_container-state-opacity: 0.08;
 }`;
 
-var css_248z$G = i`:host([color=default]) {
+var css_248z$J = i`:host([color=default]) {
   --filled-tag-container-color: var(--color-surface);
   --filled-tag-label-text-color: var(--color-on-surface);
   --tonal-tag-container-color: var(--color-surface-container);
@@ -2363,7 +2113,7 @@ var css_248z$G = i`:host([color=default]) {
   --outlined-tag-label-text-color: var(--color-purple);
 }`;
 
-var css_248z$F = i`.tag {
+var css_248z$I = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2443,7 +2193,7 @@ class Tag extends i$1 {
             [`size-${this.size}`]: true,
         };
         return b `
-      <div class="${e$3(classes)}">
+      <div class="${e$1(classes)}">
         <wc-elevation class="elevation"></wc-elevation>
         <div class="background"></div>
         <div class="outline"></div>
@@ -2462,7 +2212,7 @@ class Tag extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Tag.styles = [css_248z$H, css_248z$G, css_248z$F];
+Tag.styles = [css_248z$K, css_248z$J, css_248z$I];
 __decorate([
     n({ type: Boolean })
 ], Tag.prototype, "dismissible", void 0);
@@ -2476,7 +2226,7 @@ __decorate([
     n()
 ], Tag.prototype, "size", void 0);
 
-var css_248z$E = i`* {
+var css_248z$H = i`* {
   box-sizing: border-box;
 }
 
@@ -2588,7 +2338,7 @@ var css_248z$E = i`* {
   color: var(--background);
 }`;
 
-var css_248z$D = i`:host([color=red]) {
+var css_248z$G = i`:host([color=red]) {
   --chip-container-color: var(--color-red-container);
   --chip-outline-color: var(--color-on-red-container);
 }
@@ -2617,7 +2367,7 @@ var css_248z$D = i`:host([color=red]) {
   --chip-outline-color: var(--color-on-purple-container);
 }`;
 
-var css_248z$C = i`.tag {
+var css_248z$F = i`.tag {
   font-family: var(--font-family-sans) !important;
 }
 
@@ -2739,7 +2489,7 @@ class Chip extends i$1 {
             [`color-${this.color}`]: true,
         };
         return b `
-      <div class="${e$3(classes)}">
+      <div class="${e$1(classes)}">
         <wc-elevation class="elevation"></wc-elevation>
         <div class="background"></div>
         <div class="outline"></div>
@@ -2755,7 +2505,7 @@ class Chip extends i$1 {
 }
 // Define styles (Lit handles Scoping via Shadow DOM by default)
 // You would typically import your tag.scss.js here or use the css tag
-Chip.styles = [css_248z$E, css_248z$D, css_248z$C];
+Chip.styles = [css_248z$H, css_248z$G, css_248z$F];
 __decorate([
     n({ type: Boolean })
 ], Chip.prototype, "dismissible", void 0);
@@ -2772,7 +2522,7 @@ __decorate([
     n({ type: String })
 ], Chip.prototype, "imageSrc", void 0);
 
-var css_248z$B = i`:host {
+var css_248z$E = i`:host {
   display: block;
   --progress-height: 0.25rem;
   --progress-container-color: var(--color-primary);
@@ -2938,7 +2688,7 @@ class LinearProgress extends BaseProgress {
     render() {
         return b `
       <div
-        class="${e$3({
+        class="${e$1({
             'linear-progress': true,
             indeterminate: this.indeterminate,
             inline: this.inline,
@@ -2962,7 +2712,7 @@ class LinearProgress extends BaseProgress {
             <div class="track track-start"></div>
             <div
               class="active-indicator"
-              style="${o$2({
+              style="${o$1({
             width: `${this.__getPercentageValue()}%`,
         })}"
             ></div>
@@ -2978,9 +2728,9 @@ class LinearProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-LinearProgress.styles = [css_248z$B];
+LinearProgress.styles = [css_248z$E];
 
-var css_248z$A = i`:host {
+var css_248z$D = i`:host {
   display: inline-block;
   --progress-height: 1.5rem;
   --progress-line-thickness: 4px;
@@ -3103,7 +2853,7 @@ class CircularProgress extends BaseProgress {
         const offset = circumference - (percentage / 100) * circumference;
         return b `
       <div
-        class="${e$3({
+        class="${e$1({
             'circular-progress': true,
             indeterminate: this.indeterminate,
             inline: this.inline,
@@ -3122,7 +2872,7 @@ class CircularProgress extends BaseProgress {
               cx="8"
               cy="8"
               r="6"
-              style="${o$2({
+              style="${o$1({
             strokeDasharray: `${circumference}`,
             strokeDashoffset: this.indeterminate ? undefined : `${offset}`,
         })}"
@@ -3143,9 +2893,9 @@ class CircularProgress extends BaseProgress {
     }
 }
 // Lit components use static styles for better performance
-CircularProgress.styles = [css_248z$A];
+CircularProgress.styles = [css_248z$D];
 
-var css_248z$z = i`* {
+var css_248z$C = i`* {
   box-sizing: border-box;
 }
 
@@ -3249,12 +2999,12 @@ class Skeleton extends i$1 {
         return b ` <div class="skeleton"></div>`;
     }
 }
-Skeleton.styles = [css_248z$z];
+Skeleton.styles = [css_248z$C];
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Skeleton.prototype, "visible", void 0);
 
-var css_248z$y = i`* {
+var css_248z$B = i`* {
   box-sizing: border-box;
 }
 
@@ -3429,7 +3179,7 @@ class Input extends BaseInput {
     `;
     }
 }
-Input.styles = [css_248z$y];
+Input.styles = [css_248z$B];
 __decorate([
     n({ type: String })
 ], Input.prototype, "value", void 0);
@@ -3485,10 +3235,10 @@ __decorate([
     r()
 ], Input.prototype, "dirty", void 0);
 __decorate([
-    e$4('.input-element')
+    e$2('.input-element')
 ], Input.prototype, "inputElement", void 0);
 
-var css_248z$x = i`* {
+var css_248z$A = i`* {
   box-sizing: border-box;
 }
 
@@ -3721,7 +3471,7 @@ class UrlField extends BaseInput {
     `;
     }
 }
-UrlField.styles = [css_248z$x];
+UrlField.styles = [css_248z$A];
 __decorate([
     n({ type: String })
 ], UrlField.prototype, "value", void 0);
@@ -3768,10 +3518,10 @@ __decorate([
     r()
 ], UrlField.prototype, "isValid", void 0);
 __decorate([
-    e$4('.url-input')
+    e$2('.url-input')
 ], UrlField.prototype, "inputElement", void 0);
 
-var css_248z$w = i`* {
+var css_248z$z = i`* {
   box-sizing: border-box;
 }
 
@@ -4079,7 +3829,7 @@ class Field extends i$1 {
             populated: this.populated,
         };
         return b `
-      <div class=${e$3(classes)}>
+      <div class=${e$1(classes)}>
         ${this.__renderFieldHeader()}
 
         <div class="field-body" @click=${this.__handleClick}>
@@ -4089,7 +3839,7 @@ class Field extends i$1 {
 
           <div class="field-content">
             <div
-              class=${e$3({
+              class=${e$1({
             'slot-start-wrapper': true,
             'has-content': this.slotStartHasContent,
         })}
@@ -4100,7 +3850,7 @@ class Field extends i$1 {
             <div class="input-wrapper">${this.__renderInputSlot()}</div>
 
             <div
-              class=${e$3({
+              class=${e$1({
             'slot-end-wrapper': true,
             'has-content': this.slotEndHasContent,
         })}
@@ -4139,7 +3889,7 @@ class Field extends i$1 {
         return b `<div class="text-count">${this.textCount}</div>`;
     }
 }
-Field.styles = [css_248z$w];
+Field.styles = [css_248z$z];
 __decorate([
     n({ type: String })
 ], Field.prototype, "label", void 0);
@@ -4195,7 +3945,7 @@ __decorate([
     r()
 ], Field.prototype, "slotEndHasContent", void 0);
 
-var css_248z$v = i`* {
+var css_248z$y = i`* {
   box-sizing: border-box;
 }
 
@@ -4243,8 +3993,8 @@ var css_248z$v = i`* {
 var _NumberField_id;
 /**
  * @label Number Field
- * @tag number-field
- * @rawTag number
+ * @tag wc-number-field
+ * @rawTag number-field
  *
  * @summary The Number Field component is used to capture numeric user input.
  *
@@ -4341,7 +4091,7 @@ class NumberField extends BaseInput {
         label=${this.label}
         ?focused=${this.focused}
         .host=${this}
-        class=${e$3(classes)}
+        class=${e$1(classes)}
       >
         ${this.stepper && !this.disabled
             ? b `<wc-icon-button
@@ -4394,7 +4144,7 @@ class NumberField extends BaseInput {
     }
 }
 _NumberField_id = new WeakMap();
-NumberField.styles = [css_248z$v];
+NumberField.styles = [css_248z$y];
 __decorate([
     n({ type: Number })
 ], NumberField.prototype, "value", void 0);
@@ -4453,10 +4203,10 @@ __decorate([
     r()
 ], NumberField.prototype, "dirty", void 0);
 __decorate([
-    e$4('.input-element')
+    e$2('.input-element')
 ], NumberField.prototype, "inputElement", void 0);
 
-var css_248z$u = i`* {
+var css_248z$x = i`* {
   box-sizing: border-box;
 }
 
@@ -4623,7 +4373,7 @@ class DatePicker extends BaseInput {
     `;
     }
 }
-DatePicker.styles = [css_248z$u];
+DatePicker.styles = [css_248z$x];
 __decorate([
     n({ type: String })
 ], DatePicker.prototype, "value", void 0);
@@ -4676,10 +4426,10 @@ __decorate([
     r()
 ], DatePicker.prototype, "dirty", void 0);
 __decorate([
-    e$4('.input-element')
+    e$2('.input-element')
 ], DatePicker.prototype, "inputElement", void 0);
 
-var css_248z$t = i`* {
+var css_248z$w = i`* {
   box-sizing: border-box;
 }
 
@@ -4846,7 +4596,7 @@ class TimePicker extends BaseInput {
     `;
     }
 }
-TimePicker.styles = [css_248z$t];
+TimePicker.styles = [css_248z$w];
 __decorate([
     n({ type: String })
 ], TimePicker.prototype, "value", void 0);
@@ -4899,10 +4649,10 @@ __decorate([
     r()
 ], TimePicker.prototype, "dirty", void 0);
 __decorate([
-    e$4('.input-element')
+    e$2('.input-element')
 ], TimePicker.prototype, "inputElement", void 0);
 
-var css_248z$s = i`* {
+var css_248z$v = i`* {
   box-sizing: border-box;
 }
 
@@ -5062,7 +4812,7 @@ class Textarea extends BaseInput {
     `;
     }
 }
-Textarea.styles = [css_248z$s];
+Textarea.styles = [css_248z$v];
 __decorate([
     n({ type: String })
 ], Textarea.prototype, "value", void 0);
@@ -5118,10 +4868,10 @@ __decorate([
     r()
 ], Textarea.prototype, "dirty", void 0);
 __decorate([
-    e$4('.input-element')
+    e$2('.input-element')
 ], Textarea.prototype, "inputElement", void 0);
 
-var css_248z$r = i`* {
+var css_248z$u = i`* {
   box-sizing: border-box;
 }
 
@@ -5426,7 +5176,7 @@ class Switch extends BaseInput {
             'has-content': this.slotHasContent,
         };
         return b `
-      <label class=${e$3(cssClasses)}>
+      <label class=${e$1(cssClasses)}>
         <div
           class="track"
           tabindex=${this.tabindex || 0}
@@ -5462,7 +5212,7 @@ class Switch extends BaseInput {
     `;
     }
 }
-Switch.styles = [css_248z$r];
+Switch.styles = [css_248z$u];
 __decorate([
     n({ type: Boolean })
 ], Switch.prototype, "value", void 0);
@@ -5500,13 +5250,13 @@ __decorate([
     r()
 ], Switch.prototype, "slotHasContent", void 0);
 __decorate([
-    e$4('.track')
+    e$2('.track')
 ], Switch.prototype, "trackElement", void 0);
 __decorate([
-    e$4('.input-native')
+    e$2('.input-native')
 ], Switch.prototype, "nativeElement", void 0);
 
-var css_248z$q = i`* {
+var css_248z$t = i`* {
   box-sizing: border-box;
 }
 
@@ -5901,7 +5651,7 @@ class Checkbox extends i$1 {
             'has-content': this.slotHasContent,
         };
         return b `
-      <label class=${e$3(cssClasses)}>
+      <label class=${e$1(cssClasses)}>
         <div
           id="container"
           class="container"
@@ -5964,7 +5714,7 @@ class Checkbox extends i$1 {
     `;
     }
 }
-Checkbox.styles = [css_248z$q];
+Checkbox.styles = [css_248z$t];
 __decorate([
     n({ type: String })
 ], Checkbox.prototype, "name", void 0);
@@ -6005,13 +5755,13 @@ __decorate([
     r()
 ], Checkbox.prototype, "slotHasContent", void 0);
 __decorate([
-    e$4('.container')
+    e$2('.container')
 ], Checkbox.prototype, "containerElement", void 0);
 __decorate([
-    e$4('.input-native')
+    e$2('.input-native')
 ], Checkbox.prototype, "nativeElement", void 0);
 
-var css_248z$p = i`* {
+var css_248z$s = i`* {
   box-sizing: border-box;
 }
 
@@ -6098,9 +5848,9 @@ class Spinner extends i$1 {
     `;
     }
 }
-Spinner.styles = [css_248z$p];
+Spinner.styles = [css_248z$s];
 
-var css_248z$o = i`* {
+var css_248z$r = i`* {
   box-sizing: border-box;
 }
 
@@ -6208,7 +5958,7 @@ class Container extends i$1 {
             [`size-${this.size}`]: true,
         };
         return b `
-      <div class=${e$3(wrapperClasses)}>
+      <div class=${e$1(wrapperClasses)}>
         <div class="container">
           <div class="content">
             <slot></slot>
@@ -6218,12 +5968,12 @@ class Container extends i$1 {
     `;
     }
 }
-Container.styles = [css_248z$o];
+Container.styles = [css_248z$r];
 __decorate([
     n({ type: String, reflect: true })
 ], Container.prototype, "size", void 0);
 
-var css_248z$n = i`* {
+var css_248z$q = i`* {
   box-sizing: border-box;
 }
 
@@ -6368,7 +6118,7 @@ class EmptyState extends i$1 {
         // Resolving asset paths in Lit typically uses import.meta.url or absolute paths
         const illustrationPath = new URL(`./assets/images/empty-state/${this.illustration}.svg`, import.meta.url).href;
         return b `
-      <div class="${e$3(classes)}">
+      <div class="${e$1(classes)}">
         <div class="empty-state-container">
           <div class="illustration">
             <wc-icon class="illustration-svg" src="${illustrationPath}"></wc-icon>
@@ -6386,7 +6136,7 @@ class EmptyState extends i$1 {
     }
 }
 // Lit handles styles in a static property for better performance
-EmptyState.styles = [css_248z$n];
+EmptyState.styles = [css_248z$q];
 __decorate([
     n({ type: String, reflect: true })
 ], EmptyState.prototype, "illustration", void 0);
@@ -6400,7 +6150,7 @@ __decorate([
     r()
 ], EmptyState.prototype, "vertical", void 0);
 
-var css_248z$m = i`* {
+var css_248z$p = i`* {
   box-sizing: border-box;
 }
 
@@ -6408,13 +6158,15 @@ var css_248z$m = i`* {
   display: none !important;
 }
 
+:host(:not([preview])) {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 :host(:not([preview])) .tooltip {
   pointer-events: none;
   transition: transform var(--duration-short2) ease-in-out, opacity var(--duration-short2) ease-in-out;
   transform: scale(0);
-  position: absolute;
-  top: 0;
-  left: 0;
   opacity: 0;
 }
 :host(:not([preview])) .tooltip.open {
@@ -6476,1682 +6228,63 @@ var css_248z$m = i`* {
 }`;
 
 /**
- * Custom positioning reference element.
- * @see https://floating-ui.com/docs/virtual-elements
- */
-
-const min = Math.min;
-const max = Math.max;
-const round = Math.round;
-const floor = Math.floor;
-const createCoords = v => ({
-  x: v,
-  y: v
-});
-const oppositeSideMap = {
-  left: 'right',
-  right: 'left',
-  bottom: 'top',
-  top: 'bottom'
-};
-function clamp(start, value, end) {
-  return max(start, min(value, end));
-}
-function evaluate(value, param) {
-  return typeof value === 'function' ? value(param) : value;
-}
-function getSide(placement) {
-  return placement.split('-')[0];
-}
-function getAlignment(placement) {
-  return placement.split('-')[1];
-}
-function getOppositeAxis(axis) {
-  return axis === 'x' ? 'y' : 'x';
-}
-function getAxisLength(axis) {
-  return axis === 'y' ? 'height' : 'width';
-}
-function getSideAxis(placement) {
-  const firstChar = placement[0];
-  return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
-}
-function getAlignmentAxis(placement) {
-  return getOppositeAxis(getSideAxis(placement));
-}
-function getAlignmentSides(placement, rects, rtl) {
-  if (rtl === void 0) {
-    rtl = false;
-  }
-  const alignment = getAlignment(placement);
-  const alignmentAxis = getAlignmentAxis(placement);
-  const length = getAxisLength(alignmentAxis);
-  let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
-  if (rects.reference[length] > rects.floating[length]) {
-    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
-  }
-  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
-}
-function getExpandedPlacements(placement) {
-  const oppositePlacement = getOppositePlacement(placement);
-  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
-}
-function getOppositeAlignmentPlacement(placement) {
-  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
-}
-const lrPlacement = ['left', 'right'];
-const rlPlacement = ['right', 'left'];
-const tbPlacement = ['top', 'bottom'];
-const btPlacement = ['bottom', 'top'];
-function getSideList(side, isStart, rtl) {
-  switch (side) {
-    case 'top':
-    case 'bottom':
-      if (rtl) return isStart ? rlPlacement : lrPlacement;
-      return isStart ? lrPlacement : rlPlacement;
-    case 'left':
-    case 'right':
-      return isStart ? tbPlacement : btPlacement;
-    default:
-      return [];
-  }
-}
-function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
-  const alignment = getAlignment(placement);
-  let list = getSideList(getSide(placement), direction === 'start', rtl);
-  if (alignment) {
-    list = list.map(side => side + "-" + alignment);
-    if (flipAlignment) {
-      list = list.concat(list.map(getOppositeAlignmentPlacement));
-    }
-  }
-  return list;
-}
-function getOppositePlacement(placement) {
-  const side = getSide(placement);
-  return oppositeSideMap[side] + placement.slice(side.length);
-}
-function expandPaddingObject(padding) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...padding
-  };
-}
-function getPaddingObject(padding) {
-  return typeof padding !== 'number' ? expandPaddingObject(padding) : {
-    top: padding,
-    right: padding,
-    bottom: padding,
-    left: padding
-  };
-}
-function rectToClientRect(rect) {
-  const {
-    x,
-    y,
-    width,
-    height
-  } = rect;
-  return {
-    width,
-    height,
-    top: y,
-    left: x,
-    right: x + width,
-    bottom: y + height,
-    x,
-    y
-  };
-}
-
-function computeCoordsFromPlacement(_ref, placement, rtl) {
-  let {
-    reference,
-    floating
-  } = _ref;
-  const sideAxis = getSideAxis(placement);
-  const alignmentAxis = getAlignmentAxis(placement);
-  const alignLength = getAxisLength(alignmentAxis);
-  const side = getSide(placement);
-  const isVertical = sideAxis === 'y';
-  const commonX = reference.x + reference.width / 2 - floating.width / 2;
-  const commonY = reference.y + reference.height / 2 - floating.height / 2;
-  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
-  let coords;
-  switch (side) {
-    case 'top':
-      coords = {
-        x: commonX,
-        y: reference.y - floating.height
-      };
-      break;
-    case 'bottom':
-      coords = {
-        x: commonX,
-        y: reference.y + reference.height
-      };
-      break;
-    case 'right':
-      coords = {
-        x: reference.x + reference.width,
-        y: commonY
-      };
-      break;
-    case 'left':
-      coords = {
-        x: reference.x - floating.width,
-        y: commonY
-      };
-      break;
-    default:
-      coords = {
-        x: reference.x,
-        y: reference.y
-      };
-  }
-  switch (getAlignment(placement)) {
-    case 'start':
-      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
-      break;
-    case 'end':
-      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
-      break;
-  }
-  return coords;
-}
-
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
-// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
-const MAX_RESET_COUNT = 50;
-
-/**
- * Computes the `x` and `y` coordinates that will place the floating element
- * next to a given reference element.
+ * @label Tooltip
+ * @tag wc-tooltip
+ * @rawTag tooltip
+ * @summary Displays a tooltip for an element.
+ * @tags display
  *
- * This export does not have any `platform` interface logic. You will need to
- * write one for the platform you are using Floating UI with.
+ * @example
+ * ```html
+ * <wc-tooltip preview>Tooltip</wc-tooltip>
+ * ```
  */
-const computePosition$1 = async (reference, floating, config) => {
-  const {
-    placement = 'bottom',
-    strategy = 'absolute',
-    middleware = [],
-    platform
-  } = config;
-  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
-    ...platform,
-    detectOverflow
-  };
-  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
-  let rects = await platform.getElementRects({
-    reference,
-    floating,
-    strategy
-  });
-  let {
-    x,
-    y
-  } = computeCoordsFromPlacement(rects, placement, rtl);
-  let statefulPlacement = placement;
-  let resetCount = 0;
-  const middlewareData = {};
-  for (let i = 0; i < middleware.length; i++) {
-    const currentMiddleware = middleware[i];
-    if (!currentMiddleware) {
-      continue;
-    }
-    const {
-      name,
-      fn
-    } = currentMiddleware;
-    const {
-      x: nextX,
-      y: nextY,
-      data,
-      reset
-    } = await fn({
-      x,
-      y,
-      initialPlacement: placement,
-      placement: statefulPlacement,
-      strategy,
-      middlewareData,
-      rects,
-      platform: platformWithDetectOverflow,
-      elements: {
-        reference,
-        floating
-      }
-    });
-    x = nextX != null ? nextX : x;
-    y = nextY != null ? nextY : y;
-    middlewareData[name] = {
-      ...middlewareData[name],
-      ...data
-    };
-    if (reset && resetCount < MAX_RESET_COUNT) {
-      resetCount++;
-      if (typeof reset === 'object') {
-        if (reset.placement) {
-          statefulPlacement = reset.placement;
-        }
-        if (reset.rects) {
-          rects = reset.rects === true ? await platform.getElementRects({
-            reference,
-            floating,
-            strategy
-          }) : reset.rects;
-        }
-        ({
-          x,
-          y
-        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
-      }
-      i = -1;
+class Tooltip extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.content = '';
+        /**
+         * The ID of the element the tooltip should attach to.
+         * If not provided, it defaults to the parent element.
+         */
+        this.for = '';
+        this.trigger = 'hover focus';
+        this.open = false;
+        this.variant = 'plain';
+        this.preview = false;
+        this._target = null;
+        this._floating = null;
+    }
+    resolveTrigger() {
+        if (this.preview)
+            return 'manual';
+        const triggerTokens = this.trigger.split(' ');
+        const hasHover = triggerTokens.includes('hover');
+        const hasFocus = triggerTokens.includes('focus');
+        const hasClick = triggerTokens.includes('click');
+        if (hasClick)
+            return 'click';
+        if (hasHover && hasFocus)
+            return 'hover-focus';
+        if (hasFocus)
+            return 'focus';
+        if (hasHover)
+            return 'hover';
+        return 'manual';
     }
-  }
-  return {
-    x,
-    y,
-    placement: statefulPlacement,
-    strategy,
-    middlewareData
-  };
-};
-
-/**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-const flip$1 = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'flip',
-    options,
-    async fn(state) {
-      var _middlewareData$arrow, _middlewareData$flip;
-      const {
-        placement,
-        middlewareData,
-        rects,
-        initialPlacement,
-        platform,
-        elements
-      } = state;
-      const {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = true,
-        fallbackPlacements: specifiedFallbackPlacements,
-        fallbackStrategy = 'bestFit',
-        fallbackAxisSideDirection = 'none',
-        flipAlignment = true,
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-
-      // If a reset by the arrow was caused due to an alignment offset being
-      // added, we should skip any logic now since `flip()` has already done its
-      // work.
-      // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
-      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
-        return {};
-      }
-      const side = getSide(placement);
-      const initialSideAxis = getSideAxis(initialPlacement);
-      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
-      const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
-      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
-      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
-      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
-        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
-      }
-      const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const overflows = [];
-      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
-      if (checkMainAxis) {
-        overflows.push(overflow[side]);
-      }
-      if (checkCrossAxis) {
-        const sides = getAlignmentSides(placement, rects, rtl);
-        overflows.push(overflow[sides[0]], overflow[sides[1]]);
-      }
-      overflowsData = [...overflowsData, {
-        placement,
-        overflows
-      }];
-
-      // One or more sides is overflowing.
-      if (!overflows.every(side => side <= 0)) {
-        var _middlewareData$flip2, _overflowsData$filter;
-        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
-        const nextPlacement = placements[nextIndex];
-        if (nextPlacement) {
-          const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
-          if (!ignoreCrossAxisOverflow ||
-          // We leave the current main axis only if every placement on that axis
-          // overflows the main axis.
-          overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
-            // Try next placement and re-run the lifecycle.
-            return {
-              data: {
-                index: nextIndex,
-                overflows: overflowsData
-              },
-              reset: {
-                placement: nextPlacement
-              }
-            };
-          }
-        }
-
-        // First, find the candidates that fit on the mainAxis side of overflow,
-        // then find the placement that fits the best on the main crossAxis side.
-        let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
-
-        // Otherwise fallback.
-        if (!resetPlacement) {
-          switch (fallbackStrategy) {
-            case 'bestFit':
-              {
-                var _overflowsData$filter2;
-                const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
-                  if (hasFallbackAxisSideDirection) {
-                    const currentSideAxis = getSideAxis(d.placement);
-                    return currentSideAxis === initialSideAxis ||
-                    // Create a bias to the `y` side axis due to horizontal
-                    // reading directions favoring greater width.
-                    currentSideAxis === 'y';
-                  }
-                  return true;
-                }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
-                if (placement) {
-                  resetPlacement = placement;
-                }
-                break;
-              }
-            case 'initialPlacement':
-              resetPlacement = initialPlacement;
-              break;
-          }
+    detachListeners() {
+        if (this._floating) {
+            this._floating.close();
+            this._floating = null;
         }
-        if (placement !== resetPlacement) {
-          return {
-            reset: {
-              placement: resetPlacement
-            }
-          };
+        this._target = null;
+    }
+    set forElement(value) {
+        if (value) {
+            this._focusTarget = value;
         }
-      }
-      return {};
-    }
-  };
-};
-
-const originSides = /*#__PURE__*/new Set(['left', 'top']);
-
-// For type backwards-compatibility, the `OffsetOptions` type was also
-// Derivable.
-
-async function convertValueToCoords(state, options) {
-  const {
-    placement,
-    platform,
-    elements
-  } = state;
-  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
-  const side = getSide(placement);
-  const alignment = getAlignment(placement);
-  const isVertical = getSideAxis(placement) === 'y';
-  const mainAxisMulti = originSides.has(side) ? -1 : 1;
-  const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state);
-
-  // eslint-disable-next-line prefer-const
-  let {
-    mainAxis,
-    crossAxis,
-    alignmentAxis
-  } = typeof rawValue === 'number' ? {
-    mainAxis: rawValue,
-    crossAxis: 0,
-    alignmentAxis: null
-  } : {
-    mainAxis: rawValue.mainAxis || 0,
-    crossAxis: rawValue.crossAxis || 0,
-    alignmentAxis: rawValue.alignmentAxis
-  };
-  if (alignment && typeof alignmentAxis === 'number') {
-    crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
-  }
-  return isVertical ? {
-    x: crossAxis * crossAxisMulti,
-    y: mainAxis * mainAxisMulti
-  } : {
-    x: mainAxis * mainAxisMulti,
-    y: crossAxis * crossAxisMulti
-  };
-}
-
-/**
- * Modifies the placement by translating the floating element along the
- * specified axes.
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
- * object may be passed.
- * @see https://floating-ui.com/docs/offset
- */
-const offset$1 = function (options) {
-  if (options === void 0) {
-    options = 0;
-  }
-  return {
-    name: 'offset',
-    options,
-    async fn(state) {
-      var _middlewareData$offse, _middlewareData$arrow;
-      const {
-        x,
-        y,
-        placement,
-        middlewareData
-      } = state;
-      const diffCoords = await convertValueToCoords(state, options);
-
-      // If the placement is the same and the arrow caused an alignment offset
-      // then we don't need to change the positioning coordinates.
-      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
-        return {};
-      }
-      return {
-        x: x + diffCoords.x,
-        y: y + diffCoords.y,
-        data: {
-          ...diffCoords,
-          placement
-        }
-      };
-    }
-  };
-};
-
-/**
- * Optimizes the visibility of the floating element by shifting it in order to
- * keep it in view when it will overflow the clipping boundary.
- * @see https://floating-ui.com/docs/shift
- */
-const shift$1 = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-  return {
-    name: 'shift',
-    options,
-    async fn(state) {
-      const {
-        x,
-        y,
-        placement,
-        platform
-      } = state;
-      const {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = false,
-        limiter = {
-          fn: _ref => {
-            let {
-              x,
-              y
-            } = _ref;
-            return {
-              x,
-              y
-            };
-          }
-        },
-        ...detectOverflowOptions
-      } = evaluate(options, state);
-      const coords = {
-        x,
-        y
-      };
-      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
-      const crossAxis = getSideAxis(getSide(placement));
-      const mainAxis = getOppositeAxis(crossAxis);
-      let mainAxisCoord = coords[mainAxis];
-      let crossAxisCoord = coords[crossAxis];
-      if (checkMainAxis) {
-        const minSide = mainAxis === 'y' ? 'top' : 'left';
-        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
-        const min = mainAxisCoord + overflow[minSide];
-        const max = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = clamp(min, mainAxisCoord, max);
-      }
-      if (checkCrossAxis) {
-        const minSide = crossAxis === 'y' ? 'top' : 'left';
-        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
-        const min = crossAxisCoord + overflow[minSide];
-        const max = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = clamp(min, crossAxisCoord, max);
-      }
-      const limitedCoords = limiter.fn({
-        ...state,
-        [mainAxis]: mainAxisCoord,
-        [crossAxis]: crossAxisCoord
-      });
-      return {
-        ...limitedCoords,
-        data: {
-          x: limitedCoords.x - x,
-          y: limitedCoords.y - y,
-          enabled: {
-            [mainAxis]: checkMainAxis,
-            [crossAxis]: checkCrossAxis
-          }
-        }
-      };
-    }
-  };
-};
-
-function hasWindow() {
-  return typeof window !== 'undefined';
-}
-function getNodeName(node) {
-  if (isNode(node)) {
-    return (node.nodeName || '').toLowerCase();
-  }
-  // Mocked nodes in testing environments may not be instances of Node. By
-  // returning `#document` an infinite loop won't occur.
-  // https://github.com/floating-ui/floating-ui/issues/2317
-  return '#document';
-}
-function getWindow(node) {
-  var _node$ownerDocument;
-  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
-}
-function getDocumentElement(node) {
-  var _ref;
-  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
-}
-function isNode(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Node || value instanceof getWindow(value).Node;
-}
-function isElement(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof Element || value instanceof getWindow(value).Element;
-}
-function isHTMLElement(value) {
-  if (!hasWindow()) {
-    return false;
-  }
-  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
-}
-function isShadowRoot(value) {
-  if (!hasWindow() || typeof ShadowRoot === 'undefined') {
-    return false;
-  }
-  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
-}
-function isOverflowElement(element) {
-  const {
-    overflow,
-    overflowX,
-    overflowY,
-    display
-  } = getComputedStyle$1(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
-}
-function isTableElement(element) {
-  return /^(table|td|th)$/.test(getNodeName(element));
-}
-function isTopLayer(element) {
-  try {
-    if (element.matches(':popover-open')) {
-      return true;
-    }
-  } catch (_e) {
-    // no-op
-  }
-  try {
-    return element.matches(':modal');
-  } catch (_e) {
-    return false;
-  }
-}
-const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
-const containRe = /paint|layout|strict|content/;
-const isNotNone = value => !!value && value !== 'none';
-let isWebKitValue;
-function isContainingBlock(elementOrCss) {
-  const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
-
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
-}
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else if (isTopLayer(currentNode)) {
-      return null;
-    }
-    currentNode = getParentNode(currentNode);
-  }
-  return null;
-}
-function isWebKit() {
-  if (isWebKitValue == null) {
-    isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
-  }
-  return isWebKitValue;
-}
-function isLastTraversableNode(node) {
-  return /^(html|body|#document)$/.test(getNodeName(node));
-}
-function getComputedStyle$1(element) {
-  return getWindow(element).getComputedStyle(element);
-}
-function getNodeScroll(element) {
-  if (isElement(element)) {
-    return {
-      scrollLeft: element.scrollLeft,
-      scrollTop: element.scrollTop
-    };
-  }
-  return {
-    scrollLeft: element.scrollX,
-    scrollTop: element.scrollY
-  };
-}
-function getParentNode(node) {
-  if (getNodeName(node) === 'html') {
-    return node;
-  }
-  const result =
-  // Step into the shadow DOM of the parent of a slotted node.
-  node.assignedSlot ||
-  // DOM Element detected.
-  node.parentNode ||
-  // ShadowRoot detected.
-  isShadowRoot(node) && node.host ||
-  // Fallback.
-  getDocumentElement(node);
-  return isShadowRoot(result) ? result.host : result;
-}
-function getNearestOverflowAncestor(node) {
-  const parentNode = getParentNode(node);
-  if (isLastTraversableNode(parentNode)) {
-    return node.ownerDocument ? node.ownerDocument.body : node.body;
-  }
-  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
-    return parentNode;
-  }
-  return getNearestOverflowAncestor(parentNode);
-}
-function getOverflowAncestors(node, list, traverseIframes) {
-  var _node$ownerDocument2;
-  if (list === void 0) {
-    list = [];
-  }
-  if (traverseIframes === void 0) {
-    traverseIframes = true;
-  }
-  const scrollableAncestor = getNearestOverflowAncestor(node);
-  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
-  const win = getWindow(scrollableAncestor);
-  if (isBody) {
-    const frameElement = getFrameElement(win);
-    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
-  } else {
-    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
-  }
-}
-function getFrameElement(win) {
-  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
-}
-
-function getCssDimensions(element) {
-  const css = getComputedStyle$1(element);
-  // In testing environments, the `width` and `height` properties are empty
-  // strings for SVG elements, returning NaN. Fallback to `0` in this case.
-  let width = parseFloat(css.width) || 0;
-  let height = parseFloat(css.height) || 0;
-  const hasOffset = isHTMLElement(element);
-  const offsetWidth = hasOffset ? element.offsetWidth : width;
-  const offsetHeight = hasOffset ? element.offsetHeight : height;
-  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
-  if (shouldFallback) {
-    width = offsetWidth;
-    height = offsetHeight;
-  }
-  return {
-    width,
-    height,
-    $: shouldFallback
-  };
-}
-
-function unwrapElement(element) {
-  return !isElement(element) ? element.contextElement : element;
-}
-
-function getScale(element) {
-  const domElement = unwrapElement(element);
-  if (!isHTMLElement(domElement)) {
-    return createCoords(1);
-  }
-  const rect = domElement.getBoundingClientRect();
-  const {
-    width,
-    height,
-    $
-  } = getCssDimensions(domElement);
-  let x = ($ ? round(rect.width) : rect.width) / width;
-  let y = ($ ? round(rect.height) : rect.height) / height;
-
-  // 0, NaN, or Infinity should always fallback to 1.
-
-  if (!x || !Number.isFinite(x)) {
-    x = 1;
-  }
-  if (!y || !Number.isFinite(y)) {
-    y = 1;
-  }
-  return {
-    x,
-    y
-  };
-}
-
-const noOffsets = /*#__PURE__*/createCoords(0);
-function getVisualOffsets(element) {
-  const win = getWindow(element);
-  if (!isWebKit() || !win.visualViewport) {
-    return noOffsets;
-  }
-  return {
-    x: win.visualViewport.offsetLeft,
-    y: win.visualViewport.offsetTop
-  };
-}
-function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
-  if (isFixed === void 0) {
-    isFixed = false;
-  }
-  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
-    return false;
-  }
-  return isFixed;
-}
-
-function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
-  if (includeScale === void 0) {
-    includeScale = false;
-  }
-  if (isFixedStrategy === void 0) {
-    isFixedStrategy = false;
-  }
-  const clientRect = element.getBoundingClientRect();
-  const domElement = unwrapElement(element);
-  let scale = createCoords(1);
-  if (includeScale) {
-    if (offsetParent) {
-      if (isElement(offsetParent)) {
-        scale = getScale(offsetParent);
-      }
-    } else {
-      scale = getScale(element);
-    }
-  }
-  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
-  let x = (clientRect.left + visualOffsets.x) / scale.x;
-  let y = (clientRect.top + visualOffsets.y) / scale.y;
-  let width = clientRect.width / scale.x;
-  let height = clientRect.height / scale.y;
-  if (domElement) {
-    const win = getWindow(domElement);
-    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
-    let currentWin = win;
-    let currentIFrame = getFrameElement(currentWin);
-    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
-      const iframeScale = getScale(currentIFrame);
-      const iframeRect = currentIFrame.getBoundingClientRect();
-      const css = getComputedStyle$1(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
-      x *= iframeScale.x;
-      y *= iframeScale.y;
-      width *= iframeScale.x;
-      height *= iframeScale.y;
-      x += left;
-      y += top;
-      currentWin = getWindow(currentIFrame);
-      currentIFrame = getFrameElement(currentWin);
-    }
-  }
-  return rectToClientRect({
-    width,
-    height,
-    x,
-    y
-  });
-}
-
-// If <html> has a CSS width greater than the viewport, then this will be
-// incorrect for RTL.
-function getWindowScrollBarX(element, rect) {
-  const leftScroll = getNodeScroll(element).scrollLeft;
-  if (!rect) {
-    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
-  }
-  return rect.left + leftScroll;
-}
-
-function getHTMLOffset(documentElement, scroll) {
-  const htmlRect = documentElement.getBoundingClientRect();
-  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
-  const y = htmlRect.top + scroll.scrollTop;
-  return {
-    x,
-    y
-  };
-}
-
-function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
-  let {
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  } = _ref;
-  const isFixed = strategy === 'fixed';
-  const documentElement = getDocumentElement(offsetParent);
-  const topLayer = elements ? isTopLayer(elements.floating) : false;
-  if (offsetParent === documentElement || topLayer && isFixed) {
-    return rect;
-  }
-  let scroll = {
-    scrollLeft: 0,
-    scrollTop: 0
-  };
-  let scale = createCoords(1);
-  const offsets = createCoords(0);
-  const isOffsetParentAnElement = isHTMLElement(offsetParent);
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
-      scroll = getNodeScroll(offsetParent);
-    }
-    if (isOffsetParentAnElement) {
-      const offsetRect = getBoundingClientRect(offsetParent);
-      scale = getScale(offsetParent);
-      offsets.x = offsetRect.x + offsetParent.clientLeft;
-      offsets.y = offsetRect.y + offsetParent.clientTop;
-    }
-  }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
-  return {
-    width: rect.width * scale.x,
-    height: rect.height * scale.y,
-    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
-    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
-  };
-}
-
-function getClientRects(element) {
-  return Array.from(element.getClientRects());
-}
-
-// Gets the entire size of the scrollable document area, even extending outside
-// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
-function getDocumentRect(element) {
-  const html = getDocumentElement(element);
-  const scroll = getNodeScroll(element);
-  const body = element.ownerDocument.body;
-  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
-  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
-  const y = -scroll.scrollTop;
-  if (getComputedStyle$1(body).direction === 'rtl') {
-    x += max(html.clientWidth, body.clientWidth) - width;
-  }
-  return {
-    width,
-    height,
-    x,
-    y
-  };
-}
-
-// Safety check: ensure the scrollbar space is reasonable in case this
-// calculation is affected by unusual styles.
-// Most scrollbars leave 15-18px of space.
-const SCROLLBAR_MAX = 25;
-function getViewportRect(element, strategy) {
-  const win = getWindow(element);
-  const html = getDocumentElement(element);
-  const visualViewport = win.visualViewport;
-  let width = html.clientWidth;
-  let height = html.clientHeight;
-  let x = 0;
-  let y = 0;
-  if (visualViewport) {
-    width = visualViewport.width;
-    height = visualViewport.height;
-    const visualViewportBased = isWebKit();
-    if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
-      x = visualViewport.offsetLeft;
-      y = visualViewport.offsetTop;
-    }
-  }
-  const windowScrollbarX = getWindowScrollBarX(html);
-  // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
-  // visual width of the <html> but this is not considered in the size
-  // of `html.clientWidth`.
-  if (windowScrollbarX <= 0) {
-    const doc = html.ownerDocument;
-    const body = doc.body;
-    const bodyStyles = getComputedStyle(body);
-    const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
-    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
-    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
-      width -= clippingStableScrollbarWidth;
-    }
-  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
-    // If the <body> scrollbar is on the left, the width needs to be extended
-    // by the scrollbar amount so there isn't extra space on the right.
-    width += windowScrollbarX;
-  }
-  return {
-    width,
-    height,
-    x,
-    y
-  };
-}
-
-// Returns the inner client rect, subtracting scrollbars if present.
-function getInnerBoundingClientRect(element, strategy) {
-  const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
-  const top = clientRect.top + element.clientTop;
-  const left = clientRect.left + element.clientLeft;
-  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
-  const width = element.clientWidth * scale.x;
-  const height = element.clientHeight * scale.y;
-  const x = left * scale.x;
-  const y = top * scale.y;
-  return {
-    width,
-    height,
-    x,
-    y
-  };
-}
-function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
-  let rect;
-  if (clippingAncestor === 'viewport') {
-    rect = getViewportRect(element, strategy);
-  } else if (clippingAncestor === 'document') {
-    rect = getDocumentRect(getDocumentElement(element));
-  } else if (isElement(clippingAncestor)) {
-    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
-  } else {
-    const visualOffsets = getVisualOffsets(element);
-    rect = {
-      x: clippingAncestor.x - visualOffsets.x,
-      y: clippingAncestor.y - visualOffsets.y,
-      width: clippingAncestor.width,
-      height: clippingAncestor.height
-    };
-  }
-  return rectToClientRect(rect);
-}
-function hasFixedPositionAncestor(element, stopNode) {
-  const parentNode = getParentNode(element);
-  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
-    return false;
-  }
-  return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
-}
-
-// A "clipping ancestor" is an `overflow` element with the characteristic of
-// clipping (or hiding) child elements. This returns all clipping ancestors
-// of the given element up the tree.
-function getClippingElementAncestors(element, cache) {
-  const cachedResult = cache.get(element);
-  if (cachedResult) {
-    return cachedResult;
-  }
-  let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
-  let currentContainingBlockComputedStyle = null;
-  const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
-  let currentNode = elementIsFixed ? getParentNode(element) : element;
-
-  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
-  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    const computedStyle = getComputedStyle$1(currentNode);
-    const currentNodeIsContaining = isContainingBlock(currentNode);
-    if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
-      currentContainingBlockComputedStyle = null;
-    }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
-    if (shouldDropCurrentNode) {
-      // Drop non-containing blocks.
-      result = result.filter(ancestor => ancestor !== currentNode);
-    } else {
-      // Record last containing block for next iteration.
-      currentContainingBlockComputedStyle = computedStyle;
-    }
-    currentNode = getParentNode(currentNode);
-  }
-  cache.set(element, result);
-  return result;
-}
-
-// Gets the maximum area that the element is visible in due to any number of
-// clipping ancestors.
-function getClippingRect(_ref) {
-  let {
-    element,
-    boundary,
-    rootBoundary,
-    strategy
-  } = _ref;
-  const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
-  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
-  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
-  let top = firstRect.top;
-  let right = firstRect.right;
-  let bottom = firstRect.bottom;
-  let left = firstRect.left;
-  for (let i = 1; i < clippingAncestors.length; i++) {
-    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
-    top = max(rect.top, top);
-    right = min(rect.right, right);
-    bottom = min(rect.bottom, bottom);
-    left = max(rect.left, left);
-  }
-  return {
-    width: right - left,
-    height: bottom - top,
-    x: left,
-    y: top
-  };
-}
-
-function getDimensions(element) {
-  const {
-    width,
-    height
-  } = getCssDimensions(element);
-  return {
-    width,
-    height
-  };
-}
-
-function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
-  const isOffsetParentAnElement = isHTMLElement(offsetParent);
-  const documentElement = getDocumentElement(offsetParent);
-  const isFixed = strategy === 'fixed';
-  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
-  let scroll = {
-    scrollLeft: 0,
-    scrollTop: 0
-  };
-  const offsets = createCoords(0);
-
-  // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
-  // Firefox with layout.scrollbar.side = 3 in about:config to test this.
-  function setLeftRTLScrollbarOffset() {
-    offsets.x = getWindowScrollBarX(documentElement);
-  }
-  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
-    if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
-      scroll = getNodeScroll(offsetParent);
-    }
-    if (isOffsetParentAnElement) {
-      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
-      offsets.x = offsetRect.x + offsetParent.clientLeft;
-      offsets.y = offsetRect.y + offsetParent.clientTop;
-    } else if (documentElement) {
-      setLeftRTLScrollbarOffset();
-    }
-  }
-  if (isFixed && !isOffsetParentAnElement && documentElement) {
-    setLeftRTLScrollbarOffset();
-  }
-  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
-  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
-  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
-  return {
-    x,
-    y,
-    width: rect.width,
-    height: rect.height
-  };
-}
-
-function isStaticPositioned(element) {
-  return getComputedStyle$1(element).position === 'static';
-}
-
-function getTrueOffsetParent(element, polyfill) {
-  if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
-    return null;
-  }
-  if (polyfill) {
-    return polyfill(element);
-  }
-  let rawOffsetParent = element.offsetParent;
-
-  // Firefox returns the <html> element as the offsetParent if it's non-static,
-  // while Chrome and Safari return the <body> element. The <body> element must
-  // be used to perform the correct calculations even if the <html> element is
-  // non-static.
-  if (getDocumentElement(element) === rawOffsetParent) {
-    rawOffsetParent = rawOffsetParent.ownerDocument.body;
-  }
-  return rawOffsetParent;
-}
-
-// Gets the closest ancestor positioned element. Handles some edge cases,
-// such as table ancestors and cross browser bugs.
-function getOffsetParent(element, polyfill) {
-  const win = getWindow(element);
-  if (isTopLayer(element)) {
-    return win;
-  }
-  if (!isHTMLElement(element)) {
-    let svgOffsetParent = getParentNode(element);
-    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
-      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
-        return svgOffsetParent;
-      }
-      svgOffsetParent = getParentNode(svgOffsetParent);
-    }
-    return win;
-  }
-  let offsetParent = getTrueOffsetParent(element, polyfill);
-  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
-    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
-  }
-  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
-    return win;
-  }
-  return offsetParent || getContainingBlock(element) || win;
-}
-
-const getElementRects = async function (data) {
-  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
-  const getDimensionsFn = this.getDimensions;
-  const floatingDimensions = await getDimensionsFn(data.floating);
-  return {
-    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
-    floating: {
-      x: 0,
-      y: 0,
-      width: floatingDimensions.width,
-      height: floatingDimensions.height
-    }
-  };
-};
-
-function isRTL(element) {
-  return getComputedStyle$1(element).direction === 'rtl';
-}
-
-const platform = {
-  convertOffsetParentRelativeRectToViewportRelativeRect,
-  getDocumentElement,
-  getClippingRect,
-  getOffsetParent,
-  getElementRects,
-  getClientRects,
-  getDimensions,
-  getScale,
-  isElement,
-  isRTL
-};
-
-function rectsAreEqual(a, b) {
-  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
-}
-
-// https://samthor.au/2021/observing-dom/
-function observeMove(element, onMove) {
-  let io = null;
-  let timeoutId;
-  const root = getDocumentElement(element);
-  function cleanup() {
-    var _io;
-    clearTimeout(timeoutId);
-    (_io = io) == null || _io.disconnect();
-    io = null;
-  }
-  function refresh(skip, threshold) {
-    if (skip === void 0) {
-      skip = false;
-    }
-    if (threshold === void 0) {
-      threshold = 1;
-    }
-    cleanup();
-    const elementRectForRootMargin = element.getBoundingClientRect();
-    const {
-      left,
-      top,
-      width,
-      height
-    } = elementRectForRootMargin;
-    if (!skip) {
-      onMove();
-    }
-    if (!width || !height) {
-      return;
-    }
-    const insetTop = floor(top);
-    const insetRight = floor(root.clientWidth - (left + width));
-    const insetBottom = floor(root.clientHeight - (top + height));
-    const insetLeft = floor(left);
-    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
-    const options = {
-      rootMargin,
-      threshold: max(0, min(1, threshold)) || 1
-    };
-    let isFirstUpdate = true;
-    function handleObserve(entries) {
-      const ratio = entries[0].intersectionRatio;
-      if (ratio !== threshold) {
-        if (!isFirstUpdate) {
-          return refresh();
-        }
-        if (!ratio) {
-          // If the reference is clipped, the ratio is 0. Throttle the refresh
-          // to prevent an infinite loop of updates.
-          timeoutId = setTimeout(() => {
-            refresh(false, 1e-7);
-          }, 1000);
-        } else {
-          refresh(false, ratio);
-        }
-      }
-      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
-        // It's possible that even though the ratio is reported as 1, the
-        // element is not actually fully within the IntersectionObserver's root
-        // area anymore. This can happen under performance constraints. This may
-        // be a bug in the browser's IntersectionObserver implementation. To
-        // work around this, we compare the element's bounding rect now with
-        // what it was at the time we created the IntersectionObserver. If they
-        // are not equal then the element moved, so we refresh.
-        refresh();
-      }
-      isFirstUpdate = false;
-    }
-
-    // Older browsers don't support a `document` as the root and will throw an
-    // error.
-    try {
-      io = new IntersectionObserver(handleObserve, {
-        ...options,
-        // Handle <iframe>s
-        root: root.ownerDocument
-      });
-    } catch (_e) {
-      io = new IntersectionObserver(handleObserve, options);
-    }
-    io.observe(element);
-  }
-  refresh(true);
-  return cleanup;
-}
-
-/**
- * Automatically updates the position of the floating element when necessary.
- * Should only be called when the floating element is mounted on the DOM or
- * visible on the screen.
- * @returns cleanup function that should be invoked when the floating element is
- * removed from the DOM or hidden from the screen.
- * @see https://floating-ui.com/docs/autoUpdate
- */
-function autoUpdate(reference, floating, update, options) {
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    ancestorScroll = true,
-    ancestorResize = true,
-    elementResize = typeof ResizeObserver === 'function',
-    layoutShift = typeof IntersectionObserver === 'function',
-    animationFrame = false
-  } = options;
-  const referenceEl = unwrapElement(reference);
-  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
-  ancestors.forEach(ancestor => {
-    ancestorScroll && ancestor.addEventListener('scroll', update, {
-      passive: true
-    });
-    ancestorResize && ancestor.addEventListener('resize', update);
-  });
-  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
-  let reobserveFrame = -1;
-  let resizeObserver = null;
-  if (elementResize) {
-    resizeObserver = new ResizeObserver(_ref => {
-      let [firstEntry] = _ref;
-      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
-        // Prevent update loops when using the `size` middleware.
-        // https://github.com/floating-ui/floating-ui/issues/1740
-        resizeObserver.unobserve(floating);
-        cancelAnimationFrame(reobserveFrame);
-        reobserveFrame = requestAnimationFrame(() => {
-          var _resizeObserver;
-          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
-        });
-      }
-      update();
-    });
-    if (referenceEl && !animationFrame) {
-      resizeObserver.observe(referenceEl);
-    }
-    if (floating) {
-      resizeObserver.observe(floating);
-    }
-  }
-  let frameId;
-  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
-  if (animationFrame) {
-    frameLoop();
-  }
-  function frameLoop() {
-    const nextRefRect = getBoundingClientRect(reference);
-    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
-      update();
-    }
-    prevRefRect = nextRefRect;
-    frameId = requestAnimationFrame(frameLoop);
-  }
-  update();
-  return () => {
-    var _resizeObserver2;
-    ancestors.forEach(ancestor => {
-      ancestorScroll && ancestor.removeEventListener('scroll', update);
-      ancestorResize && ancestor.removeEventListener('resize', update);
-    });
-    cleanupIo == null || cleanupIo();
-    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
-    resizeObserver = null;
-    if (animationFrame) {
-      cancelAnimationFrame(frameId);
-    }
-  };
-}
-
-/**
- * Modifies the placement by translating the floating element along the
- * specified axes.
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
- * object may be passed.
- * @see https://floating-ui.com/docs/offset
- */
-const offset = offset$1;
-
-/**
- * Optimizes the visibility of the floating element by shifting it in order to
- * keep it in view when it will overflow the clipping boundary.
- * @see https://floating-ui.com/docs/shift
- */
-const shift = shift$1;
-
-/**
- * Optimizes the visibility of the floating element by flipping the `placement`
- * in order to keep it in view when the preferred placement(s) will overflow the
- * clipping boundary. Alternative to `autoPlacement`.
- * @see https://floating-ui.com/docs/flip
- */
-const flip = flip$1;
-
-/**
- * Computes the `x` and `y` coordinates that will place the floating element
- * next to a given reference element.
- */
-const computePosition = (reference, floating, options) => {
-  // This caches the expensive `getClippingElementAncestors` function so that
-  // multiple lifecycle resets re-use the same result. It only lives for a
-  // single call. If other functions become expensive, we can add them as well.
-  const cache = new Map();
-  const mergedOptions = {
-    platform,
-    ...options
-  };
-  const platformWithCache = {
-    ...mergedOptions.platform,
-    _c: cache
-  };
-  return computePosition$1(reference, floating, {
-    ...mergedOptions,
-    platform: platformWithCache
-  });
-};
-
-class PopoverController {
-    constructor(host, options = { placement: 'bottom', offset: 6 }) {
-        this.host = host;
-        this.options = options;
-        this.host.addController(this);
-    }
-    // Set up the floating logic
-    async updatePosition(reference, floating, options) {
-        if (!reference)
-            return;
-        this.cleanup?.();
-        const placement = options?.placement ?? this.options.placement;
-        const spacing = options?.offset ?? this.options.offset;
-        this.cleanup = autoUpdate(reference, floating, async () => {
-            const { x, y } = await computePosition(reference, floating, {
-                placement,
-                middleware: [offset(spacing), flip(), shift({ padding: 4 })],
-            });
-            Object.assign(floating.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-                position: 'absolute',
-            });
-        });
-    }
-    hostDisconnected() {
-        this.cleanup?.();
-    }
-}
-
-/**
- * @label Tooltip
- * @tag wc-tooltip
- * @rawTag tooltip
- * @summary Displays a tooltip for an element.
- * @tags display
- *
- * @example
- * ```html
- * <wc-tooltip preview>Tooltip</wc-tooltip>
- * ```
- */
-class Tooltip extends i$1 {
-    constructor() {
-        super(...arguments);
-        this.content = '';
-        /**
-         * The ID of the element the tooltip should attach to.
-         * If not provided, it defaults to the parent element.
-         */
-        this.for = '';
-        this.trigger = 'hover focus';
-        this.open = false;
-        this.variant = 'plain';
-        this.preview = false;
-        this._target = null;
-        this._popover = new PopoverController(this, {
-            placement: 'top',
-            offset: 8,
-        });
-        // Define listeners as arrow functions to maintain 'this' context
-        this._onMouseEnter = () => {
-            if (this.preview || !this.hasTrigger('hover'))
-                return;
-            window.clearTimeout(this._hideTimeout); // Cancel any pending close
-            this.show();
-        };
-        this._onMouseLeave = () => {
-            if (this.preview || !this.hasTrigger('hover'))
-                return;
-            // Small delay allows the mouse to move from target -> tooltip
-            // without the tooltip vanishing instantly.
-            this._hideTimeout = window.setTimeout(() => {
-                // Only hide if the mouse isn't currently hovering the target OR the tooltip
-                const isHoveringTarget = this._target?.matches(':hover');
-                const isHoveringTooltip = this.floatingEl?.matches(':hover');
-                if (!isHoveringTarget && !isHoveringTooltip) {
-                    this.hide();
-                }
-            }, 100); // 100ms is usually enough for a smooth transition
-        };
-        this._onFocusIn = () => this.preview && this.hasTrigger('focus') && this.show();
-        this._onFocusOut = (e) => {
-            if (this.preview || !this.hasTrigger('focus'))
-                return;
-            if (this._target && !this._target.contains(e.relatedTarget)) {
-                this.hide();
-            }
-        };
-        this._onClick = (e) => {
-            if (this.preview || !this.hasTrigger('click'))
-                return;
-            e.stopPropagation();
-            this.toggle();
-        };
-        this._handleGlobalOpen = (e) => {
-            if (e.detail.invoker !== this)
-                this.hide();
-        };
-        this._handleDocumentClick = (e) => {
-            const path = e.composedPath();
-            if (this._target && !path.includes(this._target)) {
-                this.hide();
-            }
-        };
-    }
-    hasTrigger(type) {
-        return this.trigger.split(' ').includes(type);
-    }
-    show() {
-        if (this.open)
-            return;
-        window.dispatchEvent(new CustomEvent(Tooltip.CLOSE_OTHERS_EVENT, {
-            detail: { invoker: this },
-        }));
-        this.open = true;
-    }
-    hide() {
-        if (!this.open)
-            return;
-        this.open = false;
-    }
-    toggle() {
-        // eslint-disable-next-line no-unused-expressions
-        this.open ? this.hide() : this.show();
-    }
-    detachListeners() {
-        if (!this._target)
-            return;
-        this._target.removeEventListener('mouseenter', this._onMouseEnter);
-        this._target.removeEventListener('mouseleave', this._onMouseLeave);
-        this._target.removeEventListener('focusin', this._onFocusIn);
-        this._target.removeEventListener('focusout', this._onFocusOut);
-        this._target.removeEventListener('click', this._onClick);
-        this._target = null;
-    }
-    set forElement(value) {
-        if (value) {
-            this._focusTarget = value;
-        }
-        else {
-            this._focusTarget = undefined;
+        else {
+            this._focusTarget = undefined;
         }
     }
     __getFocusTarget() {
@@ -8165,7 +6298,7 @@ class Tooltip extends i$1 {
         return this.parentElement;
     }
     attachListeners() {
-        this.detachListeners(); // Cleanup old target if it exists
+        this.detachListeners();
         // Resolve target: ID-based lookup or fallback to parent
         const root = this.getRootNode();
         this._target = this.for
@@ -8173,22 +6306,26 @@ class Tooltip extends i$1 {
             : this.parentElement;
         if (!this._target)
             return;
-        this._target.addEventListener('mouseenter', this._onMouseEnter);
-        this._target.addEventListener('mouseleave', this._onMouseLeave);
-        this._target.addEventListener('focusin', this._onFocusIn);
-        this._target.addEventListener('focusout', this._onFocusOut);
-        this._target.addEventListener('click', this._onClick);
+        this._floating = new FloatingController(this, {
+            placement: 'top',
+            strategy: 'fixed',
+            offset: 0,
+            trigger: this.resolveTrigger(),
+            closeOnClickOutside: true,
+            onOpenChange: (isOpen) => {
+                if (this.open === isOpen)
+                    return;
+                this.open = isOpen;
+            },
+        });
+        this._floating.setElements(this._target, this);
     }
     connectedCallback() {
         super.connectedCallback();
         this.attachListeners();
-        window.addEventListener(Tooltip.CLOSE_OTHERS_EVENT, this._handleGlobalOpen);
-        window.addEventListener('click', this._handleDocumentClick);
     }
     disconnectedCallback() {
         this.detachListeners();
-        window.removeEventListener(Tooltip.CLOSE_OTHERS_EVENT, this._handleGlobalOpen);
-        window.removeEventListener('click', this._handleDocumentClick);
         super.disconnectedCallback();
     }
     updated(changedProps) {
@@ -8196,21 +6333,28 @@ class Tooltip extends i$1 {
         if (changedProps.has('for')) {
             this.attachListeners();
         }
-        if (changedProps.has('open') && this.open && this._target) {
-            this._popover.updatePosition(this._target, this.floatingEl);
+        if (changedProps.has('trigger') || changedProps.has('preview')) {
+            this.attachListeners();
+        }
+        if (this._floating && this._target) {
+            this._floating.setElements(this._target, this);
+            if (changedProps.has('open') && this.open && !this._floating.isOpen) {
+                this._floating.open();
+            }
+            if (changedProps.has('open') && !this.open && this._floating.isOpen) {
+                this._floating.close();
+            }
         }
     }
     render() {
         return b ` <div
-      class=${e$3({
+      class=${e$1({
             tooltip: true,
             open: this.open,
             [`variant-${this.variant}`]: true,
         })}
       id="tooltip"
       role="tooltip"
-      @mouseenter=${this._onMouseEnter}
-      @mouseleave=${this._onMouseLeave}
       aria-hidden=${!this.open}
       aria-labelledby="tooltip-labelledby"
     >
@@ -8244,8 +6388,7 @@ class Tooltip extends i$1 {
     `;
     }
 }
-Tooltip.styles = [css_248z$m];
-Tooltip.CLOSE_OTHERS_EVENT = 'tooltip--open';
+Tooltip.styles = [css_248z$p];
 __decorate([
     n()
 ], Tooltip.prototype, "content", void 0);
@@ -8264,11 +6407,8 @@ __decorate([
 __decorate([
     n({ type: Boolean, reflect: true })
 ], Tooltip.prototype, "preview", void 0);
-__decorate([
-    e$4('#tooltip')
-], Tooltip.prototype, "floatingEl", void 0);
 
-var css_248z$l = i`* {
+var css_248z$o = i`* {
   box-sizing: border-box;
 }
 
@@ -8304,7 +6444,7 @@ ol {
   pointer-events: none;
 }`;
 
-var css_248z$k = i`* {
+var css_248z$n = i`* {
   box-sizing: border-box;
 }
 
@@ -8398,7 +6538,7 @@ class BreadcrumbItem extends i$1 {
     render() {
         return b `
       <li
-        class=${e$3({ 'breadcrumb-item': true, active: this.active })}
+        class=${e$1({ 'breadcrumb-item': true, active: this.active })}
         itemprop="itemListElement"
         itemscope
         itemtype="https://schema.org/ListItem"
@@ -8413,8 +6553,8 @@ class BreadcrumbItem extends i$1 {
               <a
                 class="breadcrumb-link"
                 itemprop="item"
-                href=${o$3(this.href)}
-                target=${o$3(this.target)}
+                href=${o$2(this.href)}
+                target=${o$2(this.target)}
                 ${this.target === '_blank'
                 ? b `rel="noopener noreferrer"`
                 : A}
@@ -8434,7 +6574,7 @@ class BreadcrumbItem extends i$1 {
     `;
     }
 }
-BreadcrumbItem.styles = [css_248z$k];
+BreadcrumbItem.styles = [css_248z$n];
 __decorate([
     n({ reflect: true })
 ], BreadcrumbItem.prototype, "href", void 0);
@@ -8488,13 +6628,13 @@ class Breadcrumb extends i$1 {
     </nav>`;
     }
 }
-Breadcrumb.styles = [css_248z$l];
+Breadcrumb.styles = [css_248z$o];
 Breadcrumb.Item = BreadcrumbItem;
 __decorate([
     n({ type: String })
 ], Breadcrumb.prototype, "label", void 0);
 
-var css_248z$j = i`* {
+var css_248z$m = i`* {
   box-sizing: border-box;
 }
 
@@ -8511,8 +6651,8 @@ var css_248z$j = i`* {
   min-width: 112px;
   padding-block: var(--spacing-050);
   transform-origin: top center;
-  --_menu-enter-duration: var(--duration-medium1, 250ms);
-  --_menu-exit-duration: var(--duration-short4, 200ms);
+  --_menu-enter-duration: var(--duration-medium1);
+  --_menu-exit-duration: var(--duration-medium2);
   --_menu-enter-easing: cubic-bezier(0.05, 0.7, 0.1, 1);
   --_menu-exit-easing: cubic-bezier(0.3, 0, 0.8, 0.15);
   transition-property: opacity, transform, visibility;
@@ -8602,7 +6742,7 @@ var css_248z$j = i`* {
   --_container-color: var(--color-tertiary-container);
 }`;
 
-var css_248z$i = i`* {
+var css_248z$l = i`* {
   box-sizing: border-box;
 }
 
@@ -8694,6 +6834,9 @@ var css_248z$i = i`* {
 .menu-item:hover:not(:where(.disabled, .selected)) {
   --_container-state-opacity: 0.08;
 }
+.menu-item.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
 .menu-item.selected {
   --_container-color: var(--menu-item-container-selected-color);
   --_label-text-color: var(--menu-item-label-selected-color);
@@ -8714,7 +6857,7 @@ var css_248z$i = i`* {
   display: none;
 }`;
 
-var css_248z$h = i`:host-context([variant=standard]) {
+var css_248z$k = i`:host-context([variant=standard]) {
   --menu-item-label-color: var(--color-on-surface-variant);
   --menu-item-label-selected-color: var(--color-on-tertiary-container);
   --menu-item-container-selected-color: var(--color-tertiary-container);
@@ -8739,20 +6882,67 @@ var css_248z$h = i`:host-context([variant=standard]) {
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-class MenuItem extends i$1 {
+class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
-        this.disabled = false;
         this.value = '';
         this.selected = false;
         this.keepOpen = false;
         this.hasSubmenu = false;
         this.submenuOpen = false;
-        /**
-         * Sets or retrieves the window or frame at which to target content.
-         */
-        this.target = '_self';
         this.variant = 'standard';
+        /**
+           * States
+           */
+        this.isPressed = false;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.softDisabled || (this.disabled && this.href)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.__handleKeyDown = (event) => {
+            this.__handlePress(event);
+            if (this.disabled || this.softDisabled || !this.itemElement) {
+                return;
+            }
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.itemElement.click();
+                return;
+            }
+            if (event.key === 'Enter' && !this.__isLink()) {
+                event.preventDefault();
+                this.itemElement.click();
+            }
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled || this.softDisabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this.isPressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this.isPressed = true;
+            }
+            else {
+                this.isPressed = false;
+            }
+        };
     }
     connectedCallback() {
         // eslint-disable-next-line wc/guard-super-call
@@ -8760,73 +6950,19 @@ class MenuItem extends i$1 {
         if (!this.hasAttribute('role')) {
             this.setAttribute('role', 'menuitem');
         }
-        if (!this.hasAttribute('tabindex')) {
-            this.tabIndex = -1;
-        }
-        this.addEventListener('click', this._handleClick);
-        this.addEventListener('keydown', this._handleKeyDown);
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+        window.addEventListener('mouseup', this.__handlePress);
     }
     disconnectedCallback() {
-        this.removeEventListener('click', this._handleClick);
-        this.removeEventListener('keydown', this._handleKeyDown);
+        window.removeEventListener('mouseup', this.__handlePress);
+        this.removeEventListener('click', this.__dispatchClickWithThrottle);
         super.disconnectedCallback();
     }
-    emitActivate(source, key) {
-        this.dispatchEvent(new CustomEvent('menu-item-activate', {
-            bubbles: true,
-            composed: true,
-            detail: { item: this, source, key },
-        }));
+    focus() {
+        this.itemElement?.focus();
     }
-    requestClose(source, key) {
-        this.dispatchEvent(new CustomEvent('menu-item-request-close', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                item: this,
-                source,
-                key,
-                reason: source === 'click' ? 'click-selection' : 'keydown',
-            },
-        }));
-    }
-    requestSubmenuKey(key) {
-        this.dispatchEvent(new CustomEvent('menu-item-submenu-keydown', {
-            bubbles: true,
-            composed: true,
-            detail: { item: this, key },
-        }));
-    }
-    _handleKeyDown(e) {
-        if (this.disabled) {
-            e.preventDefault();
-            return;
-        }
-        if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
-            this.requestSubmenuKey(e.key);
-            return;
-        }
-        if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            this.emitActivate('keydown', e.key);
-            if (!this.keepOpen) {
-                this.requestClose('keydown', e.key);
-            }
-        }
-    }
-    _handleClick(e) {
-        if (this.disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        this.emitActivate('click');
-        if (!this.keepOpen) {
-            this.requestClose('click');
-        }
-    }
-    __isLink() {
-        return !!this.href;
+    blur() {
+        this.itemElement?.blur();
     }
     render() {
         const isLink = this.__isLink();
@@ -8834,14 +6970,22 @@ class MenuItem extends i$1 {
             'menu-item': true,
             disabled: this.disabled,
             selected: this.selected,
+            pressed: this.isPressed,
         };
         const controls = this.getAttribute('aria-controls');
         if (isLink) {
             return b `<a
         id="item"
-        class=${e$3(cssClasses)}
+        class=${e$1(cssClasses)}
         href=${this.href}
         target=${this.target}
+        tabindex=${this.disabled ? '-1' : '0'}
+
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handleKeyDown}
+        @keyup=${this.__handlePress}
+
         aria-disabled=${String(this.disabled)}
         aria-haspopup=${this.hasSubmenu ? 'menu' : A}
         aria-controls=${this.hasSubmenu && controls ? controls : A}
@@ -8852,7 +6996,14 @@ class MenuItem extends i$1 {
         }
         return b `<div
       id="item"
-      class=${e$3(cssClasses)}
+      class=${e$1(cssClasses)}
+      tabindex=${this.disabled ? '-1' : '0'}
+
+      @click=${this.__dispatchClick}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handleKeyDown}
+      @keyup=${this.__handlePress}
+
       aria-disabled=${String(this.disabled)}
       aria-haspopup=${this.hasSubmenu ? 'menu' : A}
       aria-controls=${this.hasSubmenu && controls ? controls : A}
@@ -8867,7 +7018,7 @@ class MenuItem extends i$1 {
       <div class="background"></div>
       <wc-ripple class="ripple"></wc-ripple>
 
-      <div class="menu-item-content">
+      <div class="menu-item-content" data-variant=${this.variant}>
         <slot name="leading-icon"></slot>
         <div class="slot-container">
           <slot></slot>
@@ -8877,10 +7028,7 @@ class MenuItem extends i$1 {
     `;
     }
 }
-MenuItem.styles = [css_248z$i, css_248z$h];
-__decorate([
-    n({ type: Boolean, reflect: true })
-], MenuItem.prototype, "disabled", void 0);
+MenuItem.styles = [css_248z$l, css_248z$k];
 __decorate([
     n({ type: String })
 ], MenuItem.prototype, "value", void 0);
@@ -8896,49 +7044,15 @@ __decorate([
 __decorate([
     n({ type: Boolean, attribute: 'submenu-open' })
 ], MenuItem.prototype, "submenuOpen", void 0);
-__decorate([
-    n({ reflect: true })
-], MenuItem.prototype, "href", void 0);
-__decorate([
-    n()
-], MenuItem.prototype, "target", void 0);
 __decorate([
     n({ type: String, reflect: true })
 ], MenuItem.prototype, "variant", void 0);
-
-async function updateSurfacePosition(options) {
-    const { x, y } = await computePosition(options.reference, options.floating, {
-        strategy: options.strategy,
-        placement: options.placement,
-        middleware: [offset(options.offset), flip(), shift({ padding: 8 })],
-    });
-    Object.assign(options.floating.style, {
-        position: options.strategy,
-        left: `${x}px`,
-        top: `${y}px`,
-    });
-}
-class MenuSurfaceController {
-    constructor(host) {
-        this.host = host;
-        this.host.addController(this);
-    }
-    start(options) {
-        this.stop();
-        const strategy = options.strategy ?? 'fixed';
-        this.cleanup = autoUpdate(options.reference, options.floating, () => {
-            updateSurfacePosition({ ...options, strategy });
-        });
-        updateSurfacePosition({ ...options, strategy });
-    }
-    stop() {
-        this.cleanup?.();
-        this.cleanup = undefined;
-    }
-    hostDisconnected() {
-        this.stop();
-    }
-}
+__decorate([
+    e$2('#item')
+], MenuItem.prototype, "itemElement", void 0);
+__decorate([
+    r()
+], MenuItem.prototype, "isPressed", void 0);
 
 /**
  * @label Menu
@@ -8969,44 +7083,44 @@ class Menu extends i$1 {
         this.offset = 6;
         this.activeIndex = -1;
         this.anchorElement = null;
-        this._surfaceController = new MenuSurfaceController(this);
+        this._floatingController = new FloatingController(this, {
+            trigger: 'manual',
+            closeOnClickOutside: false,
+            strategy: 'fixed',
+            onOpenChange: (isOpen) => {
+                if (isOpen || !this.open) {
+                    return;
+                }
+                this.close({ kind: 'outside-click' });
+            },
+        });
         this._lastFocusedElement = null;
         this._closeReason = { kind: 'programmatic' };
-        this._onItemActivate = (event) => {
-            const customEvent = event;
-            const { item } = customEvent.detail;
-            const ownedItems = this.items;
-            if (!ownedItems.includes(item)) {
-                return;
-            }
-            const enabledItems = this._enabledItems();
-            const nextIndex = enabledItems.indexOf(item);
-            if (nextIndex >= 0) {
-                this.activeIndex = nextIndex;
-                this._syncRovingTabIndex();
-            }
-        };
-        this._onItemRequestClose = (event) => {
-            const customEvent = event;
-            if (!this.items.includes(customEvent.detail.item)) {
+        this._onClick = (event) => {
+            if (!this.open) {
                 return;
             }
-            if (customEvent.defaultPrevented) {
+            const item = this._ownedItemFromEvent(event);
+            if (!item) {
                 return;
             }
-            if (customEvent.detail.reason === 'click-selection') {
-                this.close({ kind: 'click-selection' });
+            this._setActiveItem(item);
+            if (item.keepOpen) {
                 return;
             }
-            this.close({ kind: 'keydown', key: customEvent.detail.key ?? 'Enter' });
+            this.close({ kind: 'click-selection' });
         };
         this._onKeyDown = (event) => {
             if (!this.open) {
                 return;
             }
-            if (!this._ownsKeyboardEvent(event)) {
+            if (!this._isEventFromThisMenu(event)) {
                 return;
             }
+            const eventItem = this._ownedItemFromEvent(event);
+            if (eventItem) {
+                this._setActiveItem(eventItem);
+            }
             switch (event.key) {
                 case 'ArrowDown':
                     event.preventDefault();
@@ -9030,33 +7144,22 @@ class Menu extends i$1 {
                     event.preventDefault();
                     this.close({ kind: 'keydown', key: 'Escape' });
                     break;
+                case 'Tab':
+                    this.close({ kind: 'keydown', key: 'Tab' });
+                    break;
+                case 'Enter':
+                case ' ': {
+                    event.preventDefault();
+                    const activeItem = this._getActiveItem() ?? this._getFirstEnabledItem();
+                    if (!activeItem) {
+                        return;
+                    }
+                    this._setActiveItem(activeItem);
+                    activeItem.click();
+                    break;
+                }
             }
         };
-        this._onWindowClick = (event) => {
-            if (!this.open || this.stayOpenOnOutsideClick) {
-                return;
-            }
-            const path = event.composedPath();
-            const anchorEl = this._resolveAnchorElement();
-            const inMenuTree = path.some(target => target === this || (target instanceof Node && this.contains(target)));
-            if (inMenuTree || (anchorEl && path.includes(anchorEl))) {
-                return;
-            }
-            this.close({ kind: 'outside-click' });
-        };
-        this._onFocusOut = (event) => {
-            if (!this.open || this.stayOpenOnFocusout) {
-                return;
-            }
-            const next = event.relatedTarget;
-            if (!next) {
-                return;
-            }
-            if (next instanceof Node && this._isWithinMenuTree(next)) {
-                return;
-            }
-            this.close({ kind: 'focusout' });
-        };
         this._onSlotChange = () => {
             this._syncRovingTabIndex();
         };
@@ -9066,18 +7169,13 @@ class Menu extends i$1 {
         super.connectedCallback();
         this.setAttribute('role', 'menu');
         this.addEventListener('keydown', this._onKeyDown);
-        this.addEventListener('focusout', this._onFocusOut);
-        this.addEventListener('menu-item-activate', this._onItemActivate);
-        this.addEventListener('menu-item-request-close', this._onItemRequestClose);
-        window.addEventListener('click', this._onWindowClick, { capture: true });
+        this.addEventListener('click', this._onClick);
         this._syncAnchorAria();
     }
     disconnectedCallback() {
         this.removeEventListener('keydown', this._onKeyDown);
-        this.removeEventListener('focusout', this._onFocusOut);
-        this.removeEventListener('menu-item-activate', this._onItemActivate);
-        this.removeEventListener('menu-item-request-close', this._onItemRequestClose);
-        window.removeEventListener('click', this._onWindowClick, { capture: true });
+        this.removeEventListener('click', this._onClick);
+        this._floatingController.close();
         super.disconnectedCallback();
     }
     get items() {
@@ -9144,7 +7242,11 @@ class Menu extends i$1 {
         return this.items.filter(item => !item.disabled);
     }
     _syncRovingTabIndex() {
+        const ownedItems = this.items;
         const enabledItems = this._enabledItems();
+        for (const item of ownedItems) {
+            item.tabIndex = -1;
+        }
         if (!enabledItems.length) {
             this.activeIndex = -1;
             return;
@@ -9152,10 +7254,7 @@ class Menu extends i$1 {
         if (this.activeIndex < 0 || this.activeIndex >= enabledItems.length) {
             this.activeIndex = 0;
         }
-        for (let index = 0; index < enabledItems.length; index += 1) {
-            const currentItem = enabledItems[index];
-            currentItem.tabIndex = index === this.activeIndex ? 0 : -1;
-        }
+        enabledItems[this.activeIndex].tabIndex = 0;
     }
     _setActiveByOffset(offset) {
         const enabledItems = this._enabledItems();
@@ -9191,29 +7290,38 @@ class Menu extends i$1 {
     _getFirstEnabledItem() {
         return this._enabledItems()[0] ?? null;
     }
-    _ownsKeyboardEvent(event) {
+    _isEventFromThisMenu(event) {
         const path = event.composedPath();
-        const ownedItems = this.items;
-        return path.some(target => target instanceof MenuItem && ownedItems.includes(target));
+        const sourceMenu = path.find(target => target instanceof HTMLElement &&
+            target.tagName.toLowerCase() === 'wc-menu');
+        return sourceMenu === this;
     }
-    _isWithinMenuTree(node) {
-        if (!node) {
-            return false;
+    _ownedItemFromEvent(event) {
+        if (!this._isEventFromThisMenu(event)) {
+            return null;
         }
-        let current = node;
-        while (current) {
-            if (current === this || this.contains(current)) {
-                return true;
-            }
-            const root = current.getRootNode();
-            if (root instanceof ShadowRoot) {
-                current = root.host;
-            }
-            else {
-                current = null;
+        const path = event.composedPath();
+        const ownedItems = this.items;
+        for (const target of path) {
+            if (target instanceof HTMLElement) {
+                if (target.tagName.toLowerCase() === 'wc-menu-item') {
+                    const ownedItem = ownedItems.find(item => item === target);
+                    if (ownedItem) {
+                        return ownedItem;
+                    }
+                }
             }
         }
-        return false;
+        return null;
+    }
+    _setActiveItem(item) {
+        const enabledItems = this._enabledItems();
+        const nextIndex = enabledItems.indexOf(item);
+        if (nextIndex < 0) {
+            return;
+        }
+        this.activeIndex = nextIndex;
+        this._syncRovingTabIndex();
     }
     _applyPositioning() {
         if (!this.open || !this.menuListElement) {
@@ -9223,13 +7331,14 @@ class Menu extends i$1 {
         if (!anchorEl) {
             return;
         }
-        this._surfaceController.start({
-            reference: anchorEl,
-            floating: this.menuListElement,
+        this._floatingController.setOptions({
             placement: this.placement,
             offset: this.offset,
             strategy: 'fixed',
+            closeOnClickOutside: !this.stayOpenOnOutsideClick,
         });
+        this._floatingController.setElements(anchorEl, this.menuListElement);
+        this._floatingController.open();
     }
     updated(changedProperties) {
         if (changedProperties.has('anchor') || changedProperties.has('open')) {
@@ -9246,7 +7355,7 @@ class Menu extends i$1 {
                 this._applyPositioning();
             }
             else {
-                this._surfaceController.stop();
+                this._floatingController.close();
                 const reason = this._closeReason;
                 this.dispatchEvent(new CustomEvent('close-menu', {
                     bubbles: true,
@@ -9261,7 +7370,8 @@ class Menu extends i$1 {
                     composed: true,
                     detail: { reason },
                 }));
-                if (!this.isSubmenu) {
+                const shouldRestoreFocus = reason.kind !== 'keydown' || reason.key !== 'Tab';
+                if (!this.isSubmenu && shouldRestoreFocus) {
                     this._lastFocusedElement?.focus();
                 }
             }
@@ -9276,7 +7386,7 @@ class Menu extends i$1 {
     }
     render() {
         return b `<div
-      class=${e$3({
+      class=${e$1({
             'menu': true,
             open: !this.preview && this.open,
             closed: !this.preview && !this.open,
@@ -9294,7 +7404,7 @@ class Menu extends i$1 {
     </div>`;
     }
 }
-Menu.styles = [css_248z$j];
+Menu.styles = [css_248z$m];
 Menu.Item = MenuItem;
 __decorate([
     n({ type: Boolean, reflect: true })
@@ -9327,10 +7437,10 @@ __decorate([
     r()
 ], Menu.prototype, "activeIndex", void 0);
 __decorate([
-    e$4('.menu')
+    e$2('.menu')
 ], Menu.prototype, "menuListElement", void 0);
 
-var css_248z$g = i`* {
+var css_248z$j = i`* {
   box-sizing: border-box;
 }
 
@@ -9510,42 +7620,380 @@ class SubMenu extends i$1 {
     }
     render() {
         return b `
-      <slot
-        name="item"
-        @slotchange=${this._onSlotChange}
-        @click=${this._onItemClick}
-        @keydown=${this._onItemKeyDown}
-      ></slot>
-      <slot
-        name="menu"
-        @slotchange=${this._onSlotChange}
-        @close-menu=${this._onCloseMenu}
-        @keydown=${this._onMenuKeyDown}
-      ></slot>
+      <slot
+        name="item"
+        @slotchange=${this._onSlotChange}
+        @click=${this._onItemClick}
+        @keydown=${this._onItemKeyDown}
+      ></slot>
+      <slot
+        name="menu"
+        @slotchange=${this._onSlotChange}
+        @close-menu=${this._onCloseMenu}
+        @keydown=${this._onMenuKeyDown}
+      ></slot>
+    `;
+    }
+}
+SubMenu.styles = [css_248z$j];
+__decorate([
+    n({ type: Number, attribute: 'hover-open-delay' })
+], SubMenu.prototype, "hoverOpenDelay", void 0);
+__decorate([
+    n({ type: Number, attribute: 'hover-close-delay' })
+], SubMenu.prototype, "hoverCloseDelay", void 0);
+__decorate([
+    n({ type: String, attribute: 'anchor-corner' })
+], SubMenu.prototype, "anchorCorner", void 0);
+__decorate([
+    n({ type: String, attribute: 'menu-corner' })
+], SubMenu.prototype, "menuCorner", void 0);
+__decorate([
+    o({ slot: 'item' })
+], SubMenu.prototype, "_items", void 0);
+__decorate([
+    o({ slot: 'menu' })
+], SubMenu.prototype, "_menus", void 0);
+
+var css_248z$i = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-050);
+  padding-block: var(--spacing-050);
+  border-radius: var(--shape-corner-large);
+  background-color: var(--_container-color);
+}
+
+.list.variant-standard {
+  --_container-color: var(--color-surface-container);
+}
+
+.list.variant-vibrant {
+  --_container-color: var(--color-tertiary-container);
+}`;
+
+var css_248z$h = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  padding-inline: var(--spacing-050);
+}
+
+.item-element {
+  position: relative;
+  min-height: 3.5rem;
+  width: 100%;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  outline: 0;
+  background: transparent;
+  text-align: initial;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: var(--typography-body-large-font-family) !important;
+  font-size: var(--typography-body-large-font-size) !important;
+  font-weight: var(--typography-body-large-font-weight) !important;
+  line-height: var(--typography-body-large-line-height) !important;
+  letter-spacing: var(--typography-body-large-letter-spacing) !important;
+}
+.item-element .list-item-content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-200);
+  min-height: 3.5rem;
+  padding-inline: var(--spacing-200);
+  color: var(--_label-text-color);
+  opacity: var(--_label-text-opacity, 1);
+}
+.item-element .leading,
+.item-element .trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  color: var(--_leading-trailing-color);
+}
+.item-element .trailing {
+  margin-inline-start: auto;
+}
+.item-element .content {
+  display: block;
+  flex: 1;
+  min-inline-size: 0;
+}
+.item-element .background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-radius: var(--shape-corner-medium);
+  pointer-events: none;
+}
+.item-element .focus-ring {
+  --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+  --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+  --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+  --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+  z-index: 2;
+}
+.item-element .ripple {
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+  border-radius: var(--shape-corner-medium);
+}
+
+.item-element {
+  --_container-color: transparent;
+  --_label-text-color: var(--color-on-surface);
+  --_leading-trailing-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+}
+.item-element:hover:not(:where(.disabled, .selected)) {
+  --_container-state-opacity: 0.08;
+}
+.item-element.pressed:not(:where(.disabled)) {
+  --_container-state-opacity: 0.12;
+}
+.item-element.selected {
+  --_container-color: var(--color-secondary-container);
+  --_label-text-color: var(--color-on-secondary-container);
+  --_leading-trailing-color: var(--color-on-secondary-container);
+  --_container-state-color: var(--color-on-secondary-container);
+}
+.item-element.disabled {
+  cursor: not-allowed;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+  --_leading-trailing-color: var(--color-on-surface);
+  --_container-opacity: 0.12;
+}
+.item-element.disabled .ripple {
+  display: none;
+}`;
+
+/**
+ * @label List Item
+ * @tag wc-list-item
+ * @rawTag list-item
+ * @parentRawTag list
+ *
+ * @summary A Material 3 list item with leading, trailing and content slots.
+ *
+ * @example
+ * ```html
+ * <wc-list-item selected>
+ *   <wc-icon slot="leading" name="person"></wc-icon>
+ *   Profile
+ *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ * </wc-list-item>
+ * ```
+ * @tags display
+ */
+class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.isPressed = false;
+        this.__dispatchClick = (event) => {
+            if (this.softDisabled || (this.disabled && this.href)) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.__handleKeyDown = (event) => {
+            this.__handlePress(event);
+            if (this.disabled || this.softDisabled || !this.itemElement) {
+                return;
+            }
+            if (event.key === ' ') {
+                event.preventDefault();
+                this.itemElement.click();
+                return;
+            }
+            if (event.key === 'Enter' && !this.__isLink()) {
+                event.preventDefault();
+                this.itemElement.click();
+            }
+        };
+        this.__handlePress = (event) => {
+            if (this.disabled || this.softDisabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this.isPressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this.isPressed = true;
+            }
+            else {
+                this.isPressed = false;
+            }
+        };
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    focus() {
+        this.itemElement?.focus();
+    }
+    blur() {
+        this.itemElement?.blur();
+    }
+    render() {
+        const isLink = this.__isLink();
+        const cssClasses = {
+            'list-item': true,
+            'item-element': true,
+            selected: this.selected,
+            disabled: this.disabled || this.softDisabled,
+            pressed: this.isPressed,
+        };
+        if (!isLink) {
+            return b `
+        <button
+          id="item"
+          class=${e$1(cssClasses)}
+          type=${this.htmlType}
+          ?disabled=${this.disabled}
+          ?aria-disabled=${this.softDisabled}
+          @click=${this.__dispatchClick}
+          @mousedown=${this.__handlePress}
+          @keydown=${this.__handleKeyDown}
+          @keyup=${this.__handlePress}
+        >
+          ${this.renderContent()}
+        </button>
+      `;
+        }
+        return b `
+      <a
+        id="item"
+        class=${e$1(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+        rel=${o$2(this.rel)}
+        download=${o$2(this.download)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${String(this.disabled || this.softDisabled)}
+        @click=${this.__dispatchClick}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handleKeyDown}
+        @keyup=${this.__handlePress}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+    }
+    renderContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple"></wc-ripple>
+
+      <div class="list-item-content">
+        <div class="leading">
+          <slot name="leading"></slot>
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+        <div class="trailing">
+          <slot name="trailing"></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+ListItem.styles = [css_248z$h];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], ListItem.prototype, "selected", void 0);
+__decorate([
+    e$2('#item')
+], ListItem.prototype, "itemElement", void 0);
+__decorate([
+    r()
+], ListItem.prototype, "isPressed", void 0);
+
+/**
+ * @label List
+ * @tag wc-list
+ * @rawTag list
+ *
+ * @summary A Material 3 list container for one or more list items.
+ *
+ * @example
+ * ```html
+ * <wc-list>
+ *   <wc-list-item>
+ *     <wc-icon slot="leading" name="inbox"></wc-icon>
+ *     Inbox
+ *     <span slot="trailing">24</span>
+ *   </wc-list-item>
+ * </wc-list>
+ * ```
+ * @tags display
+ */
+class List extends i$1 {
+    constructor() {
+        super(...arguments);
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'list');
+    }
+    render() {
+        const cssClasses = {
+            list: true,
+            [`variant-${this.variant}`]: true,
+        };
+        return b `
+      <div class=${e$1(cssClasses)}>
+        <slot></slot>
+      </div>
     `;
     }
 }
-SubMenu.styles = [css_248z$g];
-__decorate([
-    n({ type: Number, attribute: 'hover-open-delay' })
-], SubMenu.prototype, "hoverOpenDelay", void 0);
-__decorate([
-    n({ type: Number, attribute: 'hover-close-delay' })
-], SubMenu.prototype, "hoverCloseDelay", void 0);
-__decorate([
-    n({ type: String, attribute: 'anchor-corner' })
-], SubMenu.prototype, "anchorCorner", void 0);
+List.styles = [css_248z$i];
+List.Item = ListItem;
 __decorate([
-    n({ type: String, attribute: 'menu-corner' })
-], SubMenu.prototype, "menuCorner", void 0);
-__decorate([
-    o$1({ slot: 'item' })
-], SubMenu.prototype, "_items", void 0);
-__decorate([
-    o$1({ slot: 'menu' })
-], SubMenu.prototype, "_menus", void 0);
+    n({ type: String, reflect: true })
+], List.prototype, "variant", void 0);
 
-var css_248z$f = i`@charset "UTF-8";
+var css_248z$g = i`@charset "UTF-8";
 :host {
   display: block;
   height: 100%;
@@ -9702,7 +8150,7 @@ class Image extends i$1 {
     `;
     }
 }
-Image.styles = [css_248z$f];
+Image.styles = [css_248z$g];
 __decorate([
     n({ reflect: true })
 ], Image.prototype, "src", void 0);
@@ -9725,6 +8173,251 @@ __decorate([
     r()
 ], Image.prototype, "_previewOpen", void 0);
 
+var css_248z$f = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  vertical-align: middle;
+  --svg-size: inherit;
+  --svg-color: inherit;
+}
+
+.svg-wrapper {
+  height: var(--svg-size, 1rem);
+  width: var(--svg-size, 1rem);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.svg-content {
+  height: 100%;
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.svg-content svg {
+  fill: var(--svg-color);
+  height: 100%;
+  width: 100%;
+}
+
+.svg-content.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  background: transparent;
+  border: none;
+  color: #fff;
+  font-size: 1.5rem;
+  cursor: pointer;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+}
+.preview-close:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.preview-content {
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: default;
+}
+.preview-content svg {
+  max-width: 90vw;
+  max-height: 90vh;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+}`;
+
+/**
+ * @label SVG
+ * @tag wc-svg
+ * @rawTag svg
+ * @summary An SVG component with lazy loading and optional preview support.
+ * @overview Renders an inline SVG fetched from a URL, with lazy loading via IntersectionObserver and an optional click-to-preview lightbox.
+ *
+ * @cssprop --svg-color - Controls the fill color of the SVG.
+ * @cssprop [--svg-size=1rem] - Controls the size of the SVG. Defaults to "1rem"
+ *
+ * @example
+ * ```html
+ * <wc-svg src="/icons/my-icon.svg" image-title="My icon"></wc-svg>
+ * ```
+ */
+class Svg extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** URL of the SVG asset to fetch and render inline. */
+        this.src = '';
+        /** Accessible title / alt text for the SVG. */
+        this.imageTitle = '';
+        /** Enable click-to-preview lightbox. */
+        this.preview = false;
+        this._loaded = false;
+        this._previewOpen = false;
+        this._svgContent = '';
+        // token to avoid stale fetch results
+        this._fetchId = 0;
+        this._intersectionObserver = null;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._intersectionObserver?.disconnect();
+    }
+    firstUpdated() {
+        this._setupIntersectionObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('src')) {
+            // Reset lazy-load state so the new src is fetched when visible
+            this._loaded = false;
+            this._svgContent = '';
+            this._setupIntersectionObserver();
+        }
+    }
+    _setupIntersectionObserver() {
+        this._intersectionObserver?.disconnect();
+        const wrapper = this.shadowRoot?.querySelector('.svg-wrapper');
+        if (!wrapper)
+            return;
+        this._intersectionObserver = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                this._loaded = true;
+                this._intersectionObserver?.disconnect();
+                this._fetchSvg();
+            }
+        }, { rootMargin: '200px' });
+        this._intersectionObserver.observe(wrapper);
+    }
+    async _fetchSvg() {
+        if (!this.src)
+            return;
+        this._fetchId += 1;
+        const currentId = this._fetchId;
+        try {
+            const raw = await fetchSVG(this.src);
+            if (currentId !== this._fetchId)
+                return;
+            this._svgContent = raw ? sanitizeSvg(raw) : '';
+        }
+        catch {
+            if (currentId === this._fetchId) {
+                this._svgContent = '';
+            }
+        }
+    }
+    _handleClick() {
+        if (this.preview) {
+            this._previewOpen = true;
+            // Move focus into the dialog after render
+            this.updateComplete.then(() => {
+                const closeBtn = this.shadowRoot?.querySelector('.preview-close');
+                closeBtn?.focus();
+            });
+        }
+    }
+    _closePreview(e) {
+        e.stopPropagation();
+        const wasOpen = this._previewOpen;
+        this._previewOpen = false;
+        if (wasOpen) {
+            // Return focus to the trigger
+            const trigger = this.shadowRoot?.querySelector('.svg-content');
+            trigger?.focus();
+        }
+    }
+    render() {
+        return b `
+      <div class="svg-wrapper">
+        ${this._loaded && this._svgContent
+            ? b `<div
+              class="svg-content ${this.preview ? 'clickable' : ''}"
+              role=${this.imageTitle ? 'img' : 'presentation'}
+              aria-label=${this.imageTitle || ''}
+              @click=${this._handleClick}
+            >
+              ${o$3(this._svgContent)}
+            </div>`
+            : b `<span class="placeholder" aria-hidden="true"></span>`}
+      </div>
+
+      <div
+        class="preview-overlay ${this._previewOpen ? 'open' : ''}"
+        role="dialog"
+        aria-modal="true"
+        aria-label=${this.imageTitle ? `Preview: ${this.imageTitle}` : 'SVG preview'}
+        @click=${this._closePreview}
+        @keydown=${(e) => e.key === 'Escape' && this._closePreview(e)}
+      >
+        <button
+          class="preview-close"
+          aria-label="Close preview"
+          @click=${this._closePreview}
+        >&#x2715;</button>
+        <div class="preview-content" @click=${(e) => e.stopPropagation()}>
+          ${o$3(this._svgContent)}
+        </div>
+      </div>
+    `;
+    }
+}
+Svg.styles = [css_248z$f];
+__decorate([
+    n({ type: String, reflect: true })
+], Svg.prototype, "src", void 0);
+__decorate([
+    n({ attribute: 'image-title' })
+], Svg.prototype, "imageTitle", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Svg.prototype, "preview", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_loaded", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_previewOpen", void 0);
+__decorate([
+    r()
+], Svg.prototype, "_svgContent", void 0);
+
 var css_248z$e = i`* {
   box-sizing: border-box;
 }
@@ -10216,7 +8909,7 @@ class Tab extends i$1 {
         if (!isLink) {
             return b `<button
           id="button"
-              class=${e$3(cssClasses)}
+              class=${e$1(cssClasses)}
               tabindex="0"
               @mousedown=${this.__handlePress}
               @keydown=${this.__handlePress}
@@ -10230,7 +8923,7 @@ class Tab extends i$1 {
             </button>`;
         }
         return b `<a
-        class=${e$3(cssClasses)}
+        class=${e$1(cssClasses)}
         id="button"
         tabindex="0"
         href=${this.href}
@@ -10396,7 +9089,7 @@ __decorate([
     r()
 ], Tab.prototype, "isPressed", void 0);
 __decorate([
-    e$4('.tab-element')
+    e$2('.tab-element')
 ], Tab.prototype, "tabElement", void 0);
 
 var css_248z$d = i`* {
@@ -11104,7 +9797,7 @@ class Slider extends i$1 {
           @touchstart=${this.onMouseDown}
         >
           <div class="track">
-            <div class="track-active" style=${o$2({ width: `${percentage}%` })}></div>
+            <div class="track-active" style=${o$1({ width: `${percentage}%` })}></div>
           </div>
 
           <div 
@@ -11116,7 +9809,7 @@ class Slider extends i$1 {
             aria-valuemax=${this.max}
             aria-valuenow=${this.value}
             aria-disabled=${this.disabled}
-            style=${o$2({ left: `calc(${percentage}% - var(--thumb-half))` })}
+            style=${o$1({ left: `calc(${percentage}% - var(--thumb-half))` })}
             @keydown=${this.handleKeyDown}
           >
             ${this.labeled ? b `<div class="value-label">${this.value}</div>` : ''}
@@ -11154,10 +9847,10 @@ __decorate([
     r()
 ], Slider.prototype, "isDragging", void 0);
 __decorate([
-    e$4('.slider-container')
+    e$2('.slider-container')
 ], Slider.prototype, "container", void 0);
 __decorate([
-    e$4('.thumb')
+    e$2('.thumb')
 ], Slider.prototype, "thumbElement", void 0);
 
 var css_248z$9 = i`* {
@@ -11457,7 +10150,7 @@ class Table extends i$1 {
         return total;
     }
     getTotalItems() {
-        if (this.paginate && !this.managed)
+        if (this.paginate && !this.managed && this.data)
             return this.data.length;
         return this.totalItems ?? 0;
     }
@@ -11509,7 +10202,7 @@ class Table extends i$1 {
                 : DEFAULT_CELL_WIDTH;
             const colEl = b `
         <div
-          class=${e$3({ col: true, sort: this.sortBy === col.name })}
+          class=${e$1({ col: true, sort: this.sortBy === col.name })}
           style="width: ${colWidth}rem"
         >
           <div class="col-content">
@@ -11589,7 +10282,7 @@ class Table extends i$1 {
                 const colEl = b `
           <div
             tabindex="0"
-            class=${e$3({
+            class=${e$1({
                     col: true,
                     'col-hover': this.hoveredCell.row === row &&
                         this.hoveredCell.column === column,
@@ -11632,7 +10325,7 @@ class Table extends i$1 {
             });
             return b `
         <div
-          class=${e$3({
+          class=${e$1({
                 row: true,
                 'row-hover': this.hoveredCell.row === row,
             })}
@@ -11684,10 +10377,10 @@ class Table extends i$1 {
             'horizontal-scrolled': this.isHorizontallyScrolled,
         };
         return b `
-      <div class=${e$3(tableClasses)}>
+      <div class=${e$1(tableClasses)}>
         <div class="table-scroll-container" @scroll=${this.onScrollContainer}>
           ${this.renderHeader()}
-          ${this.data.length ? this.renderBody() : this.renderEmptyState()}
+          ${this.data && this.data.length ? this.renderBody() : this.renderEmptyState()}
         </div>
         <div class="table-footer">${this.renderPagination()}</div>
       </div>
@@ -12164,7 +10857,7 @@ class SidebarMenuItem extends i$1 {
         this._nativeElement?.blur();
     }
     render() {
-        const classes = e$3({
+        const classes = e$1({
             'sidebar-menu-item': true,
             disabled: this.disabled,
             selected: this.selected,
@@ -12241,7 +10934,7 @@ __decorate([
     n({ type: Number, reflect: true })
 ], SidebarMenuItem.prototype, "level", void 0);
 __decorate([
-    e$4('.sidebar-menu-item-content')
+    e$2('.sidebar-menu-item-content')
 ], SidebarMenuItem.prototype, "_nativeElement", void 0);
 
 var css_248z$6 = i`* {
@@ -12452,15 +11145,15 @@ class SidebarSubMenu extends i$1 {
     }
     render() {
         const hasChildren = this._getChildNodes().length > 0;
-        const wrapperClasses = e$3({
+        const wrapperClasses = e$1({
             'sidebar-sub-menu': true,
         });
-        const innerClasses = e$3({
+        const innerClasses = e$1({
             'sidebar-sub-menu-inner': true,
             disabled: this.disabled,
             selected: this.selected,
         });
-        const inlineStyles = o$2({
+        const inlineStyles = o$1({
             paddingLeft: `calc(var(--sidebar-menu-item-height, 2.5rem) * ${this.level})`,
         });
         return b `
@@ -12525,7 +11218,7 @@ __decorate([
     n({ type: Number, reflect: true })
 ], SidebarSubMenu.prototype, "level", void 0);
 __decorate([
-    e$4('.sidebar-sub-menu-inner')
+    e$2('.sidebar-sub-menu-inner')
 ], SidebarSubMenu.prototype, "_nativeElement", void 0);
 
 var css_248z$5 = i`* {
@@ -12944,7 +11637,7 @@ class Snackbar extends i$1 {
         const liveRole = this.actionLabel || this.showCloseIcon ? 'alert' : 'status';
         return b `
       <div
-        class=${e$3({
+        class=${e$1({
             snackbar: true,
             open: !this.preview && this.open,
             preview: this.preview,
@@ -13372,7 +12065,7 @@ class Radio extends i$1 {
             'has-content': this.slotHasContent,
         };
         return b `
-      <label class=${e$3(cssClasses)}>
+      <label class=${e$1(cssClasses)}>
         <div
           class="container"
           tabindex=${this.isGroupFocusTarget
@@ -13455,10 +12148,10 @@ __decorate([
     r()
 ], Radio.prototype, "isGroupFocusTarget", void 0);
 __decorate([
-    e$4('.container')
+    e$2('.container')
 ], Radio.prototype, "containerElement", void 0);
 __decorate([
-    e$4('.input-native')
+    e$2('.input-native')
 ], Radio.prototype, "nativeElement", void 0);
 
 var css_248z$2 = i`@charset "UTF-8";
@@ -13708,7 +12401,7 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], SelectOptionElement.prototype, "filtered", void 0);
 __decorate([
-    e$4('wc-menu-item')
+    e$2('wc-menu-item')
 ], SelectOptionElement.prototype, "_menuItemEl", void 0);
 
 /**
@@ -14080,7 +12773,7 @@ class Select extends BaseInput {
     _renderFieldEnd() {
         return b `
       <wc-icon
-        class=${e$3({
+        class=${e$1({
             'dropdown-icon': true,
             'dropdown-icon--open': this._open,
         })}
@@ -14190,10 +12883,10 @@ __decorate([
     r()
 ], Select.prototype, "_noOptionsVisible", void 0);
 __decorate([
-    e$4('.select-trigger')
+    e$2('.select-trigger')
 ], Select.prototype, "_triggerEl", void 0);
 __decorate([
-    e$4('.search-input')
+    e$2('.search-input')
 ], Select.prototype, "_searchInputEl", void 0);
 
 var css_248z$1 = i`* {
@@ -14228,13 +12921,25 @@ var css_248z$1 = i`* {
   align-items: center;
   width: 100%;
   flex-shrink: 0;
+  padding-block-end: 2.5rem;
 }
 .rail .header:empty {
   display: none;
 }
+.rail .footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  flex-shrink: 0;
+  margin-top: auto;
+}
+.rail .footer:empty {
+  display: none;
+}
 .rail wc-divider {
   width: calc(100% - 1rem);
-  margin-block: 0.5rem;
   flex-shrink: 0;
 }
 .rail .items {
@@ -14243,22 +12948,11 @@ var css_248z$1 = i`* {
   align-items: center;
   width: 100%;
   gap: 0.75rem; /* 12dp between items */
-  flex: 1;
+  flex: 1 1 auto;
+  min-height: 0;
 }
 .rail .items ::slotted(wc-navigation-rail-item) {
   width: 100%;
-}
-.rail {
-  /* Alignment variants */
-}
-.rail.align-top .items {
-  justify-content: flex-start;
-}
-.rail.align-center .items {
-  justify-content: center;
-}
-.rail.align-bottom .items {
-  justify-content: flex-end;
 }`;
 
 var css_248z = i`* {
@@ -14331,6 +13025,12 @@ var css_248z = i`* {
   flex-shrink: 0;
   transition: background-color var(--duration-short4, 200ms) var(--easing-standard, ease);
 }
+.item .indicator .ripple {
+  inset: 0;
+  z-index: 0;
+  --ripple-pressed-color: var(--_state-color);
+  border-radius: inherit;
+}
 .item .indicator .icon-container {
   display: flex;
   align-items: center;
@@ -14345,29 +13045,6 @@ var css_248z = i`* {
   color: var(--_inactive-icon-color);
   display: flex;
 }
-.item {
-  /* State layer for hover/press */
-}
-.item .state-layer {
-  position: absolute;
-  top: 0.25rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: var(--_indicator-width);
-  height: var(--_indicator-height);
-  pointer-events: none;
-  background-color: var(--_state-color);
-  opacity: 0;
-  z-index: 0;
-  border-radius: var(--_indicator-shape);
-  transition: opacity var(--duration-short4, 200ms) var(--easing-standard, ease);
-}
-.item .ripple {
-  z-index: 1;
-  --ripple-pressed-color: var(--_state-color);
-  --ripple-state-opacity: 0;
-  border-radius: var(--shape-corner-small, 4px);
-}
 .item {
   /* Label */
 }
@@ -14429,18 +13106,6 @@ var css_248z = i`* {
 .item.active.has-active-icon .icon-slot {
   display: none;
 }
-.item {
-  /* Hover state */
-}
-.item:hover:not(.disabled) .state-layer {
-  opacity: 0.08;
-}
-.item {
-  /* Pressed state */
-}
-.item.pressed:not(.disabled) .state-layer {
-  opacity: 0.12;
-}
 .item {
   /* Disabled state */
 }
@@ -14462,7 +13127,6 @@ var css_248z = i`* {
 
 @media (prefers-reduced-motion: reduce) {
   .item .indicator,
-  .item .state-layer,
   .item .label {
     transition: none;
   }
@@ -14579,11 +13243,10 @@ class NavigationRailItem extends i$1 {
     __renderItemContent() {
         return b `
       <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
-      <div class="state-layer"></div>
-      <wc-ripple class="ripple"></wc-ripple>
 
       <div class="item-content">
         <div class="indicator">
+          <wc-ripple class="ripple"></wc-ripple>
           <div class="icon-container">
             <slot name="active-icon" class="active-icon-slot"></slot>
             <slot name="icon" class="icon-slot"></slot>
@@ -14611,7 +13274,7 @@ class NavigationRailItem extends i$1 {
         if (!isLink) {
             return b `<button
         id="item"
-        class=${e$3(cssClasses)}
+        class=${e$1(cssClasses)}
         ?disabled=${this.disabled}
         aria-disabled=${`${this.disabled}`}
         aria-current=${this.active ? 'page' : A}
@@ -14626,7 +13289,7 @@ class NavigationRailItem extends i$1 {
         }
         return b `<a
       id="item"
-      class=${e$3(cssClasses)}
+      class=${e$1(cssClasses)}
       href=${this.href}
       target=${this.target}
       aria-current=${this.active ? 'page' : A}
@@ -14677,7 +13340,7 @@ __decorate([
     r()
 ], NavigationRailItem.prototype, "_hasActiveIcon", void 0);
 __decorate([
-    e$4('.item-element')
+    e$2('.item-element')
 ], NavigationRailItem.prototype, "itemElement", void 0);
 
 /**
@@ -14690,6 +13353,9 @@ __decorate([
  * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>
  * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>
  *
+ * @slot header - Content displayed above the rail items.
+ * @slot footer - Content pinned to the bottom of the rail.
+ *
  * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).
  * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.
  * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.
@@ -14723,13 +13389,6 @@ __decorate([
 class NavigationRail extends i$1 {
     constructor() {
         super(...arguments);
-        /**
-         * Vertical alignment of items within the rail.
-         * - `"top"`: Items align to the top.
-         * - `"center"`: Items are centered (default).
-         * - `"bottom"`: Items align to the bottom.
-         */
-        this.alignment = 'center';
         /**
          * Display mode of the navigation rail.
          * - `"expanded"`: shows labels.
@@ -14789,11 +13448,10 @@ class NavigationRail extends i$1 {
     render() {
         const cssClasses = {
             rail: true,
-            [`align-${this.alignment}`]: true,
             [`mode-${this.mode}`]: true,
         };
         return b `
-      <div class=${e$3(cssClasses)}>
+      <div class=${e$1(cssClasses)}>
         <div class="header">
           <slot name="header"></slot>
         </div>
@@ -14801,15 +13459,15 @@ class NavigationRail extends i$1 {
         <nav class="items" role="presentation">
           <slot @slotchange=${this._syncItemMode}></slot>
         </nav>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
       </div>
     `;
     }
 }
 NavigationRail.styles = [css_248z$1];
 NavigationRail.Item = NavigationRailItem;
-__decorate([
-    n({ reflect: true })
-], NavigationRail.prototype, "alignment", void 0);
 __decorate([
     n({ reflect: true })
 ], NavigationRail.prototype, "mode", void 0);
@@ -14817,5 +13475,5 @@ __decorate([
     n({ type: Boolean, attribute: 'show-divider' })
 ], NavigationRail.prototype, "showDivider", void 0);
 
-export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, SubMenu as G, Switch as H, Icon as I, TabGroup as J, TabPanel as K, LinearProgress as L, Menu as M, NavigationRail as N, Table as O, Pagination as P, Tabs as Q, Radio as R, SegmentedButton as S, Tab as T, Tag as U, Textarea as V, TimePicker as W, Tooltip as X, UrlField as Y, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Image as j, Input as k, Link as l, MenuItem as m, NavigationRailItem as n, NumberField as o, Ripple as p, SegmentedButtonGroup as q, Select as r, SelectOptionElement as s, SidebarMenu as t, SidebarMenuItem as u, SidebarSubMenu as v, Skeleton as w, Slider as x, Snackbar as y, Spinner as z };
-//# sourceMappingURL=navigation-rail-Lxetd5-Z.js.map
+export { Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Spinner as G, SubMenu as H, Image as I, Svg as J, Switch as K, LinearProgress as L, Menu as M, NavigationRail as N, TabGroup as O, Pagination as P, TabPanel as Q, Radio as R, SegmentedButton as S, Tab as T, Table as U, Tabs as V, Tag as W, Textarea as X, TimePicker as Y, Tooltip as Z, UrlField as _, Avatar as a, Breadcrumb as b, BreadcrumbItem as c, Chip as d, CircularProgress as e, Container as f, Divider as g, EmptyState as h, FocusRing as i, Input as j, Link as k, List as l, ListItem as m, MenuItem as n, NavigationRailItem as o, NumberField as p, Ripple as q, SegmentedButtonGroup as r, Select as s, SelectOptionElement as t, SidebarMenu as u, SidebarMenuItem as v, SidebarSubMenu as w, Skeleton as x, Slider as y, Snackbar as z };
+//# sourceMappingURL=navigation-rail-DTTkqohi.js.map