@redvars/peacock 3.6.3 → 3.8.0

package/dist/{navigation-rail-DAUuJ_Yp.js → navigation-rail-CM_svs5_.js}

@@ -2,12 +2,12 @@ import { a as i, _ as __decorate, i as i$1, b, A, c as __classPrivateFieldGet, w
 import { n } from './property-1psGvXOq.js';
 import { e as e$1 } from './class-map-YU7g0o3B.js';
 import { r } from './state-DwbEjqVk.js';
-import { o as observerSlotChangesWithCallback } from './observe-slot-change-BGJfgg2E.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-D8Xg-kSS.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 { B as BaseButton, o as o$1, s as spread, a as BaseButtonMixin } from './BaseButton-BNFAYn-S.js';
+import { N as NativeHyperlinkMixin, i as isLink, t as throttle } from './NativeHyperlinkMixin-DrYXyfMQ.js';
+import { N as NativeButtonMixin, D as DISABLED_REASON_ID, o as o$1, s as spread } from './ButtonConstants-D06bY4uy.js';
+import { i as isActivationClick, d as dispatchActivationClick, r as redispatchEvent } from './dispatch-event-utils-CuEqjlPT.js';
 import { o as o$2 } from './style-map-DVmWOuYy.js';
-import { r as redispatchEvent, i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
 import { B as BaseInput } from './BaseInput-14YmcfK7.js';
 import { F as FloatingController } from './popover-DUPmMVWS.js';
 import { i as isDarkMode, o as observeThemeChange } from './is-dark-mode-DOcaw4Yq.js';
@@ -516,7 +516,6 @@ var css_248z$R = i`* {
  * @tag wc-segmented-button
  * @rawTag segmented-button
  * @summary An individual segment within a segmented button group.
- * @parentRawTag segmented-button-group
  * @overview
  * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>
  *
@@ -812,6 +811,126 @@ var css_248z$P = i`:host {
   outline: 3px solid var(--focus-ring-color);
 }`;
 
+/**
+ * A key to retrieve an `Attachable` element's `AttachableController` from a
+ * global `MutationObserver`.
+ */
+const ATTACHABLE_CONTROLLER = Symbol('attachableController');
+let FOR_ATTRIBUTE_OBSERVER;
+{
+    /**
+     * A global `MutationObserver` that reacts to `for` attribute changes on
+     * `Attachable` elements. If the `for` attribute changes, the controller will
+     * re-attach to the new referenced element.
+     */
+    FOR_ATTRIBUTE_OBSERVER = new MutationObserver(records => {
+        for (const record of records) {
+            // When a control's `for` attribute changes, inform its
+            // `AttachableController` to update to a new control.
+            record.target[ATTACHABLE_CONTROLLER]?.hostConnected();
+        }
+    });
+}
+/**
+ * A controller that provides an implementation for `Attachable` elements.
+ *
+ * @example
+ * ```ts
+ * class MyElement extends LitElement implements Attachable {
+ *   get control() { return this.attachableController.control; }
+ *
+ *   private readonly attachableController = new AttachableController(
+ *     this,
+ *     (previousControl, newControl) => {
+ *       previousControl?.removeEventListener('click', this.handleClick);
+ *       newControl?.addEventListener('click', this.handleClick);
+ *     }
+ *   );
+ *
+ *   // Implement remaining `Attachable` properties/methods that call the
+ *   // controller's properties/methods.
+ * }
+ * ```
+ */
+class AttachableController {
+    get htmlFor() {
+        return this.host.getAttribute('for');
+    }
+    set htmlFor(htmlFor) {
+        if (htmlFor === null) {
+            this.host.removeAttribute('for');
+        }
+        else {
+            this.host.setAttribute('for', htmlFor);
+        }
+    }
+    get control() {
+        if (this.host.hasAttribute('for')) {
+            if (!this.htmlFor || !this.host.isConnected) {
+                return null;
+            }
+            return this.host.getRootNode().querySelector(`#${this.htmlFor}`);
+        }
+        return this.currentControl || this.host.parentElement;
+    }
+    set control(control) {
+        if (control) {
+            this.attach(control);
+        }
+        else {
+            this.detach();
+        }
+    }
+    /**
+     * Creates a new controller for an `Attachable` element.
+     *
+     * @param host The `Attachable` element.
+     * @param onControlChange A callback with two parameters for the previous and
+     *     next control. An `Attachable` element may perform setup or teardown
+     *     logic whenever the control changes.
+     */
+    constructor(host, onControlChange) {
+        this.host = host;
+        this.onControlChange = onControlChange;
+        this.currentControl = null;
+        host.addController(this);
+        host[ATTACHABLE_CONTROLLER] = this;
+        FOR_ATTRIBUTE_OBSERVER?.observe(host, { attributeFilter: ['for'] });
+    }
+    attach(control) {
+        if (control === this.currentControl) {
+            return;
+        }
+        this.setCurrentControl(control);
+        // When imperatively attaching, remove the `for` attribute so
+        // that the attached control is used instead of a referenced one.
+        this.host.removeAttribute('for');
+    }
+    detach() {
+        this.setCurrentControl(null);
+        // When imperatively detaching, add an empty `for=""` attribute. This will
+        // ensure the control is `null` rather than the `parentElement`.
+        this.host.setAttribute('for', '');
+    }
+    /** @private */
+    hostConnected() {
+        this.setCurrentControl(this.control);
+    }
+    /** @private */
+    hostDisconnected() {
+        this.setCurrentControl(null);
+    }
+    setCurrentControl(control) {
+        this.onControlChange(this.currentControl, control);
+        this.currentControl = control;
+    }
+}
+
+/**
+ * Events that the focus ring listens to.
+ */
+const EVENTS$1 = ['focusin', 'focusout', 'pointerdown'];
+const HANDLED_BY_FOCUS_RING = Symbol('handledByFocusRing');
 /**
  * @label Focus Ring
  *
@@ -822,90 +941,80 @@ var css_248z$P = i`:host {
  *
  *
  * @tags display
+ *
+ * @fires visibility-changed {Event} Fired whenever `visible` changes.
  */
 class FocusRing extends i$1 {
     constructor() {
         super(...arguments);
+        /**
+         * Makes the focus ring visible.
+         */
         this.visible = false;
-        this.for = '';
-        this.__boundFocusin = this.__focusin.bind(this);
-        this.__boundFocusout = this.__focusout.bind(this);
-        this.__boundPointerdown = this.__pointerdown.bind(this);
+        /**
+         * Makes the focus ring animate inwards instead of outwards.
+         */
+        this.inward = false;
+        this.attachableController = new AttachableController(this, this.onControlChange.bind(this));
     }
-    render() {
-        return A;
+    get htmlFor() {
+        return this.attachableController.htmlFor;
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.attach();
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
     }
-    disconnectedCallback() {
-        this.detach();
-        super.disconnectedCallback();
+    get control() {
+        return this.attachableController.control;
     }
-    updated(changed) {
-        if (changed.has('for')) {
-            const prevId = changed.get('for');
-            if (prevId) {
-                const root = this.parentElement?.getRootNode();
-                const prevEl = root?.getElementById(prevId) ?? document.getElementById(prevId);
-                if (prevEl) {
-                    prevEl.removeEventListener('focusin', this.__boundFocusin);
-                    prevEl.removeEventListener('focusout', this.__boundFocusout);
-                    prevEl.removeEventListener('pointerdown', this.__boundPointerdown);
-                }
-            }
-            this.attach();
-        }
+    set control(control) {
+        this.attachableController.control = control;
     }
-    __focusin() {
-        const focusTarget = this.__getFocusTarget();
-        this.visible = focusTarget?.matches(':focus-visible') ?? false;
+    attach(control) {
+        this.attachableController.attach(control);
     }
-    __focusout() {
-        this.visible = false;
+    detach() {
+        this.attachableController.detach();
     }
-    __pointerdown() {
-        this.visible = false;
+    connectedCallback() {
+        super.connectedCallback();
+        // Needed for VoiceOver, which will create a "group" if the element is a
+        // sibling to other content.
+        this.setAttribute('aria-hidden', 'true');
     }
-    /**
-     * Resolves the element that should receive focus-ring event listeners by id.
-     * Prefers lookup from the current control's root node, then falls back to a
-     * document-level lookup.
-     *
-     * @returns The resolved focus target, if one can be found.
-     */
-    __getFocusTarget() {
-        if (this.for) {
-            const root = this.parentElement?.getRootNode();
-            if (root) {
-                const focusTarget = root.getElementById(this.for);
-                if (focusTarget) {
-                    return focusTarget;
-                }
-            }
-            const focusTarget = document.getElementById(this.for);
-            if (focusTarget) {
-                return focusTarget;
-            }
+    /** @private */
+    handleEvent(event) {
+        if (event[HANDLED_BY_FOCUS_RING]) {
+            // This ensures the focus ring does not activate when multiple focus rings
+            // are used within a single component.
+            return;
+        }
+        switch (event.type) {
+            case 'focusin':
+                this.visible = this.control?.matches(':focus-visible') ?? false;
+                break;
+            case 'focusout':
+            case 'pointerdown':
+                this.visible = false;
+                break;
+            default:
+                return;
         }
-        return undefined;
+        // eslint-disable-next-line no-param-reassign
+        event[HANDLED_BY_FOCUS_RING] = true;
     }
-    attach() {
-        const focusTarget = this.__getFocusTarget();
-        if (focusTarget) {
-            focusTarget.addEventListener('focusin', this.__boundFocusin);
-            focusTarget.addEventListener('focusout', this.__boundFocusout);
-            focusTarget.addEventListener('pointerdown', this.__boundPointerdown);
+    onControlChange(prev, next) {
+        for (const event of EVENTS$1) {
+            prev?.removeEventListener(event, this);
+            next?.addEventListener(event, this);
         }
     }
-    detach() {
-        const focusTarget = this.__getFocusTarget();
-        if (focusTarget) {
-            focusTarget.removeEventListener('focusin', this.__boundFocusin);
-            focusTarget.removeEventListener('focusout', this.__boundFocusout);
-            focusTarget.removeEventListener('pointerdown', this.__boundPointerdown);
+    update(changed) {
+        if (changed.has('visible')) {
+            // This logic can be removed once the `:has` selector has been introduced
+            // to Firefox. This is necessary to allow correct submenu styles.
+            this.dispatchEvent(new Event('visibility-changed'));
         }
+        super.update(changed);
     }
 }
 FocusRing.styles = [css_248z$P];
@@ -913,8 +1022,8 @@ __decorate([
     n({ type: Boolean, reflect: true })
 ], FocusRing.prototype, "visible", void 0);
 __decorate([
-    n({ type: String })
-], FocusRing.prototype, "for", void 0);
+    n({ type: Boolean, reflect: true })
+], FocusRing.prototype, "inward", void 0);
 
 const PRESS_GROW_MS = 450;
 const MINIMUM_PRESS_MS = 225;
@@ -1037,38 +1146,50 @@ class Ripple extends i$1 {
         this.rippleScale = '';
         this.initialSize = 0;
         this.state = State.INACTIVE;
+        this._boundHandleEvent = this.handleEvent.bind(this);
+        this.attachableController = new AttachableController(
+        // `LitElement` satisfies the ReactiveControllerHost & HTMLElement shape
+        // required by the controller.
+        this, this.onControlChange.bind(this));
+    }
+    get htmlFor() {
+        return this.attachableController.htmlFor;
+    }
+    set htmlFor(htmlFor) {
+        this.attachableController.htmlFor = htmlFor;
+    }
+    get control() {
+        return this.attachableController.control;
+    }
+    set control(control) {
+        this.attachableController.control = control;
     }
     connectedCallback() {
         super.connectedCallback();
         // Needed for VoiceOver, which will create a "group" if the element is a
         // sibling to other content.
         this.setAttribute('aria-hidden', 'true');
-        // Attach to parent
-        this.attach(this.parentElement);
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.detach();
     }
     attach(control) {
-        if (!control)
-            return;
-        EVENTS.forEach(event => {
-            control.addEventListener(event, this.handleEvent.bind(this));
-        });
+        this.attachableController.attach(control);
     }
     detach() {
-        const control = this.parentElement;
-        if (!control)
-            return;
-        EVENTS.forEach(event => {
-            control.removeEventListener(event, this.handleEvent.bind(this));
-        });
+        this.attachableController.detach();
+    }
+    onControlChange(prev, next) {
+        for (const event of EVENTS) {
+            prev?.removeEventListener(event, this._boundHandleEvent);
+            next?.addEventListener(event, this._boundHandleEvent);
+        }
     }
     render() {
         const classes = {
-            'hovered': this.hovered,
-            'pressed': this.pressed,
+            hovered: this.hovered,
+            pressed: this.pressed,
         };
         return b `<div class="surface ${e$1(classes)}"></div>`;
     }
@@ -1121,7 +1242,7 @@ class Ripple extends i$1 {
         }
         // Wait for a hold after touch delay
         this.state = State.TOUCH_DELAY;
-        await new Promise((resolve) => {
+        await new Promise(resolve => {
             setTimeout(resolve, TOUCH_DELAY_MS);
         });
         if (this.state !== State.TOUCH_DELAY) {
@@ -1233,7 +1354,7 @@ class Ripple extends i$1 {
             this.pressed = false;
             return;
         }
-        await new Promise((resolve) => {
+        await new Promise(resolve => {
             setTimeout(resolve, MINIMUM_PRESS_MS - pressAnimationPlayState);
         });
         if (this.growAnimation !== animation) {
@@ -1349,13 +1470,16 @@ Ripple.styles = i `
       &::before {
         background-color: var(--ripple-pressed-color, var(--color-on-surface));
         inset: 0;
-        transition: opacity 15ms linear, background-color 15ms linear;
+        transition:
+          opacity 15ms linear,
+          background-color 15ms linear;
       }
 
       &::after {
         background: radial-gradient(
           closest-side,
-          var(--ripple-pressed-color, var(--color-on-surface)) max(calc(100% - 70px), 65%),
+          var(--ripple-pressed-color, var(--color-on-surface))
+            max(calc(100% - 70px), 65%),
           transparent 100%
         );
         transform-origin: center center;
@@ -1518,7 +1642,7 @@ var css_248z$O = i`* {
   border-block-start: 1px solid var(--color-outline-variant);
 }
 .expansion-panel.open .content-inner {
-  padding: 0 var(--spacing-300) var(--spacing-200);
+  padding: var(--spacing-200) var(--spacing-300);
 }
 .expansion-panel.open .toggle-icon {
   transform: rotate(180deg);
@@ -1542,7 +1666,6 @@ var _AccordionItem_id;
  * @tag wc-accordion-item
  * @rawTag accordion-item
  * @summary An expansion panel with a header that reveals or hides associated content. Follows Material Design 3 expansion panel guidelines.
- * @parentRawTag accordion
  *
  * @slot - The body content revealed when the panel is expanded.
  * @slot heading - The panel title. Renders as `body-large` text.
@@ -1853,9 +1976,7 @@ var css_248z$M = i`* {
 }
 
 :host {
-  display: inline-block;
-  border-radius: inherit;
-  corner-shape: inherit;
+  display: inline;
   color: var(--color-primary);
 }
 
@@ -1873,12 +1994,6 @@ var css_248z$M = i`* {
 :host(.inherit) .link {
   color: inherit;
   text-decoration: none !important;
-}
-
-:host(.with-icon) .link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5em;
 }`;
 
 /**
@@ -1894,14 +2009,16 @@ var css_248z$M = i`* {
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-class Link extends BaseHyperlinkMixin(i$1) {
+class Link extends NativeHyperlinkMixin(i$1) {
     render() {
         return b `<a
       class=${e$1({
             link: true,
         })}
       href=${this.href}
+      ?download=${this.download}
       target=${this.target}
+      ?rel=${this.rel}
       ?tabindex=${this.parentElement?.tabIndex}
     >
       <slot></slot>
@@ -2235,6 +2352,7 @@ var css_248z$I = i`* {
 }
 
 :host {
+  position: relative;
   display: inline-flex;
   --chip-container-color: var(--color-surface);
   --chip-label-text-color: var(--color-on-surface);
@@ -2258,12 +2376,12 @@ var css_248z$I = i`* {
 }
 
 .chip {
-  position: relative;
   display: inline-flex;
   align-items: center;
   height: var(--chip-height, var(--_chip-height, 2rem));
   width: 100%;
   cursor: pointer;
+  z-index: 0;
 }
 .chip .tag-content {
   position: relative;
@@ -2315,17 +2433,6 @@ var css_248z$I = i`* {
   --icon-size: 1rem;
   --icon-color: var(--color-primary);
 }
-.chip .focus-ring {
-  z-index: 2;
-  display: block;
-  --focus-ring-container-shape: var(--chip-container-shape);
-}
-.chip .ripple {
-  display: block;
-  border-radius: var(--chip-container-shape);
-  --ripple-state-opacity: var(--_chip-state-opacity, 0);
-  --ripple-pressed-color: var(--_chip-state-color);
-}
 .chip.disabled {
   cursor: not-allowed;
 }
@@ -2341,14 +2448,27 @@ var css_248z$I = i`* {
 .chip.icon-slot-has-content .icon-slot-container, .chip.selected .icon-slot-container {
   padding-inline: calc(var(--chip-container-padding) / 2);
 }
-.chip {
-  /**
-   * Tag background layers
-   */
+
+/*
+  Background layers
+ */
+.focus-ring {
+  z-index: 2;
+  display: block;
+  --focus-ring-container-shape: var(--chip-container-shape);
 }
-.chip .background {
+
+.ripple {
+  display: block;
+  border-radius: var(--chip-container-shape);
+  --ripple-state-opacity: var(--_chip-state-opacity, 0);
+  --ripple-pressed-color: var(--_chip-state-color);
+}
+
+.background {
   display: block;
   position: absolute;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
@@ -2356,45 +2476,52 @@ var css_248z$I = i`* {
   background: var(--_chip-container-color);
   pointer-events: none;
 }
-.chip .outline {
+
+.outline {
   z-index: 0;
   display: block;
   position: absolute;
+  top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border-radius: var(--chip-container-shape);
   border: 1px solid var(--chip-outline-color);
 }
-.chip .elevation {
+
+.elevation {
   --elevation-level: 0;
   transition-duration: 280ms;
   --elevation-container-shape: var(--chip-container-shape);
 }
 
-/** Color state management */
-.chip {
+/* Color/state management */
+:host {
   --_chip-container-color: var(--chip-container-color);
   --_chip-text-color: var(--chip-label-text-color);
   --_chip-state-color: var(--_chip-text-color);
 }
-.chip:hover {
+
+:host:hover {
   --_chip-state-opacity: 0.08;
 }
-.chip.pressed {
+
+:host([pressed]) {
   --_chip-state-opacity: 0.12;
 }
-.chip.selected {
+
+:host([selected]) {
   --_chip-container-color: var(--color-secondary-container);
   --_chip-text-color: var(--color-on-secondary-container);
 }
-.chip.disabled {
+
+:host([disabled]) {
   --_chip-container-color: var(--color-on-surface);
   --_chip-container-opacity: 0.1;
   --_chip-text-color: var(--color-on-surface);
   --_chip-text-opacity: 0.38;
 }
-.chip.disabled .ripple {
+:host([disabled]) .ripple {
   display: none;
 }`;
 
@@ -2468,13 +2595,86 @@ var css_248z$H = i`.tag {
  * <wc-chip>Chip content</wc-chip>
  * ```
  */
-class Chip extends BaseButton {
+class Chip extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
         /** If true, the tag will have a close icon. */
         this.dismissible = false;
         this._hasIconSlotContent = false;
-        this._isPressed = false;
+        this.skeleton = false;
+        this.toggle = false;
+        this.selected = false;
+        /**
+         * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+         */
+        this.throttleDelay = 200;
+        this.pressed = false;
+        this.__handlePress = (event) => {
+            if (this.disabled || this.skeleton || this.softDisabled)
+                return;
+            if (event instanceof KeyboardEvent &&
+                event.type === 'keydown' &&
+                (event.key === 'Enter' || event.key === ' ')) {
+                this.pressed = true;
+            }
+            else if (event.type === 'mousedown') {
+                this.pressed = true;
+            }
+            else {
+                this.pressed = 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) || this.skeleton) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.buttonElement) {
+                return;
+            }
+            if (this.toggle) {
+                this.selected = !this.selected;
+            }
+            this.focus();
+            dispatchActivationClick(this.buttonElement);
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+        window.addEventListener('mouseup', this.__handlePress);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('mouseup', this.__handlePress);
+        this.removeEventListener('click', this.__dispatchClickWithThrottle);
+        super.disconnectedCallback();
+    }
+    __renderDisabledReason(softDisabled) {
+        if (softDisabled)
+            return b `<div
+        id=${DISABLED_REASON_ID}
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderTooltip() {
+        if (this.tooltip) {
+            return b `<wc-tooltip class="tooltip"  for="button"
+        >${this.tooltip}</wc-tooltip
+      >`;
+        }
+        return A;
     }
     focus() {
         this.buttonElement?.focus();
@@ -2512,63 +2712,63 @@ class Chip extends BaseButton {
     `;
     }
     render() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
+      <wc-elevation class="elevation"></wc-elevation>
+      <div class="background"></div>
+      <div class="outline"></div>
+      <wc-ripple class="ripple" for="button"></wc-ripple>
+
+      ${this.renderChipElement()} ${this.__renderTooltip()}
+    `;
+    }
+    renderChipElement() {
         const cssClasses = {
             chip: true,
             button: true,
             selected: this.selected,
             dismissible: this.dismissible,
-            pressed: this._isPressed,
+            pressed: this.pressed,
             'icon-slot-has-content': this._hasIconSlotContent,
         };
-        if (!this.__isLink()) {
+        if (!isLink(this)) {
             return b `<button
-            class=${e$1(cssClasses)}
-            id="button"
-            type=${this.htmlType}
-            @click=${this.__dispatchClickWithThrottle}
-            @mousedown=${this.__handlePress}
-            @keydown=${this.__handlePress}
-            @keyup=${this.__handlePress}
-  
-            aria-describedby=${o$1(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-            ?aria-disabled=${this.softDisabled}
-  
-            ?disabled=${this.disabled}
-            ${spread(this.configAria)}
-          >
-            ${this.renderChipContent()}
-          </button>`;
+        class=${e$1(cssClasses)}
+        id="button"
+        type=${this.htmlType}
+        @click=${this.__dispatchClickWithThrottle}
+        @mousedown=${this.__handlePress}
+        @keydown=${this.__handlePress}
+        @keyup=${this.__handlePress}
+        aria-describedby=${o$1(this.softDisabled ? DISABLED_REASON_ID : undefined)}
+        ?aria-disabled=${this.softDisabled}
+        ?disabled=${this.disabled}
+        ${spread(this.configAria)}
+      >
+        ${this.renderChipContent()}
+      </button>`;
         }
         return b `<a
-          class=${e$1(cssClasses)}
-          id="button"
-          href=${this.href}
-          target=${this.target}
-          tabindex=${this.disabled ? '-1' : '0'}
-          
-          @click=${this.__dispatchClick}
-          @mousedown=${this.__handlePress}
-          @keydown=${this.__handlePress}
-          @keyup=${this.__handlePress}
-          role="button"
-  
-          aria-describedby=${o$1(this.softDisabled ? BaseButton.DISABLED_REASON_ID : undefined)}
-          ?aria-disabled=${this.softDisabled}
-  
-          ${spread(this.configAria)}
-        >
-          ${this.renderChipContent()}
-        </a>`;
+      class=${e$1(cssClasses)}
+      id="button"
+      href=${this.href}
+      target=${this.target}
+      tabindex=${this.disabled ? '-1' : '0'}
+      @click=${this.__dispatchClick}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      aria-describedby=${o$1(this.softDisabled ? DISABLED_REASON_ID : undefined)}
+      ?aria-disabled=${this.softDisabled}
+      ${spread(this.configAria)}
+    >
+      ${this.renderChipContent()}
+    </a>`;
     }
     renderChipContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
-      <wc-elevation class="elevation"></wc-elevation>
-      <div class="background"></div>
-      <div class="outline"></div>
-      <wc-ripple class="ripple"></wc-ripple>
       <div class="tag-content">
-
         <div class="icon-slot-container">
           ${this.selected
             ? b `<wc-icon class="selected-icon" name="check"></wc-icon>`
@@ -2576,8 +2776,7 @@ class Chip extends BaseButton {
         </div>
         <div class="label-container">
           <slot></slot>
-        </div> 
-        
+        </div>
         ${this._renderCloseButton()}
       </div>
     `;
@@ -2596,8 +2795,26 @@ __decorate([
     r()
 ], Chip.prototype, "_hasIconSlotContent", void 0);
 __decorate([
-    r()
-], Chip.prototype, "_isPressed", void 0);
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "skeleton", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "toggle", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "selected", void 0);
+__decorate([
+    n()
+], Chip.prototype, "throttleDelay", void 0);
+__decorate([
+    n()
+], Chip.prototype, "tooltip", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Chip.prototype, "pressed", void 0);
+__decorate([
+    e$2('.button')
+], Chip.prototype, "buttonElement", void 0);
 
 var css_248z$G = i`* {
   box-sizing: border-box;
@@ -6279,14 +6496,12 @@ var css_248z$q = i`* {
   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);
   opacity: 0;
 }
-:host(:not([preview])) .tooltip.open {
+:host(:not([preview])):host([open]) {
   pointer-events: auto;
   transform: scale(1);
   opacity: 1;
@@ -6467,7 +6682,6 @@ class Tooltip extends i$1 {
         return b ` <div
       class=${e$1({
             tooltip: true,
-            open: this.open,
             [`variant-${this.variant}`]: true,
         })}
       id="tooltip"
@@ -6623,7 +6837,6 @@ var css_248z$o = i`* {
  * @label Breadcrumb Item
  * @tag wc-breadcrumb-item
  * @rawTag breadcrumb-item
- * @parentRawTag breadcrumb
  * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
  * @tags navigation
  *
@@ -6918,7 +7131,6 @@ var css_248z$l = i`:host-context([variant=standard]) {
  * @label Menu Item
  * @tag wc-menu-item
  * @rawTag menu-item
- * @parentRawTag menu
  * @summary An item in a menu list.
  * @tags navigation
  *
@@ -6927,7 +7139,7 @@ var css_248z$l = i`:host-context([variant=standard]) {
  * <wc-menu-item>Menu Item</wc-menu-item>
  * ```
  */
-class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
+class MenuItem extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
         this.value = '';
@@ -7018,7 +7230,9 @@ class MenuItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
       ${hasOverline
             ? b `<slot name="overline" slot="overline"></slot>`
             : A}
-      ${hasHeadline ? b `<slot name="headline" slot="headline"></slot>` : A}
+      ${hasHeadline
+            ? b `<slot name="headline" slot="headline"></slot>`
+            : A}
       ${hasDefault ? b `<slot></slot>` : A}
       ${hasSupportingText
             ? b `<slot name="supporting-text" slot="supporting-text"></slot>`
@@ -7466,7 +7680,6 @@ let subMenuIdCounter = 0;
  * @label Sub Menu
  * @tag wc-sub-menu
  * @rawTag sub-menu
- * @parentRawTag menu
  * @summary Connects a menu item to a nested menu.
  */
 class SubMenu extends i$1 {
@@ -7808,7 +8021,6 @@ var css_248z$i = i`* {
  * @label List Item
  * @tag wc-list-item
  * @rawTag list-item
- * @parentRawTag list
  *
  * @summary A Material 3 list item with leading, trailing and content slots.
  *
@@ -7822,7 +8034,7 @@ var css_248z$i = i`* {
  * ```
  * @tags display
  */
-class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
+class ListItem extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
         this.selected = false;
@@ -7849,7 +8061,7 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
                 this.itemElement.click();
                 return;
             }
-            if (event.key === 'Enter' && !this.__isLink()) {
+            if (event.key === 'Enter' && !isLink(this)) {
                 event.preventDefault();
                 this.itemElement.click();
             }
@@ -7884,7 +8096,6 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         this.itemElement?.blur();
     }
     render() {
-        const isLink = this.__isLink();
         const cssClasses = {
             'list-item': true,
             'item-element': true,
@@ -7892,7 +8103,7 @@ class ListItem extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
             disabled: this.disabled || this.softDisabled,
             pressed: this.isPressed,
         };
-        if (!isLink) {
+        if (!isLink(this)) {
             return b `
         <button
           id="item"
@@ -8014,9 +8225,26 @@ var css_248z$h = i`* {
 }
 
 :host {
+  position: relative;
   display: block;
   padding-inline: var(--spacing-050);
   --item-height: 3.5rem;
+  --item-container-color: transparent;
+  --item-label-text-color: var(--color-on-surface);
+  --item-leading-trailing-color: var(--color-on-surface-variant);
+  --item-supporting-text-color: var(--color-on-surface-variant);
+  --item-container-selected-color: var(--color-tertiary-container);
+  --item-label-text-selected-color: var(--color-on-tertiary-container);
+  --private-item-container-color: var(--item-container-color);
+  --private-item-label-text-color: var(--item-label-text-color);
+  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
+  --private-item-supporting-text-color: var(--item-supporting-text-color);
+  --private-item-container-state-color: var(--private-item-label-text-color);
+  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
+  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
+  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
 }
 
 /**
@@ -8042,17 +8270,12 @@ var css_248z$h = i`* {
 }
 
 .item {
-  position: relative;
   min-height: var(--item-height);
   width: 100%;
   background: transparent;
   text-align: initial;
   cursor: pointer;
-  --private-item-container-shape-start-start: var(--item-container-shape-start-start, var(--shape-corner-extra-small));
-  --private-item-container-shape-start-end: var(--item-container-shape-start-end, var(--shape-corner-extra-small));
-  --private-item-container-shape-end-start: var(--item-container-shape-end-start, var(--shape-corner-extra-small));
-  --private-item-container-shape-end-end: var(--item-container-shape-end-end, var(--shape-corner-extra-small));
-  --private-item-container-shape-variant: var(--item-container-shape-variant, none);
+  z-index: 0;
   font-family: var(--item-label-font-family, var(--typography-body-large-font-family)) !important;
   font-size: var(--item-label-font-size, var(--typography-body-large-font-size)) !important;
   font-weight: var(--item-label-font-weight, var(--typography-body-large-font-weight)) !important;
@@ -8130,7 +8353,11 @@ var css_248z$h = i`* {
   white-space: nowrap;
   color: var(--private-item-supporting-text-color);
 }
-.item .background {
+
+/*
+  Background layers
+ */
+.background {
   position: absolute;
   inset: 0;
   background-color: var(--private-item-container-color);
@@ -8142,7 +8369,8 @@ var css_248z$h = i`* {
   border-end-end-radius: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
   corner-shape: var(--private-item-container-shape-variant);
 }
-.item .focus-ring {
+
+.focus-ring {
   z-index: 2;
   --focus-ring-container-shape-start-start: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
   --focus-ring-container-shape-start-end: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
@@ -8150,7 +8378,8 @@ var css_248z$h = i`* {
   --focus-ring-container-shape-end-end: var(--private-item-container-shape-end-end, var(--private-item-container-shape));
   --focus-ring-container-shape-variant: var(--private-item-container-shape-variant);
 }
-.item .ripple {
+
+.ripple {
   border-start-start-radius: var(--private-item-container-shape-start-start, var(--private-item-container-shape));
   border-start-end-radius: var(--private-item-container-shape-start-end, var(--private-item-container-shape));
   border-end-start-radius: var(--private-item-container-shape-end-start, var(--private-item-container-shape));
@@ -8160,26 +8389,23 @@ var css_248z$h = i`* {
   --ripple-pressed-color: var(--private-item-container-state-color);
 }
 
-.item {
-  --private-item-container-color: var(--item-container-color);
-  --private-item-label-text-color: var(--item-label-text-color);
-  --private-item-leading-trailing-color: var(--item-leading-trailing-color);
-  --private-item-supporting-text-color: var(--item-supporting-text-color);
-  --private-item-container-state-color: var(--private-item-label-text-color);
-}
-.item:hover:not(:where(.disabled, .selected)) {
+/* State management */
+:host:hover:not([disabled], [selected]) {
   --private-item-container-state-opacity: 0.08;
 }
-.item.pressed:not(:where(.disabled)) {
+
+:host:has(.item.pressed):not([disabled]) {
   --private-item-container-state-opacity: 0.12;
 }
-.item.selected {
+
+:host([selected]) {
   --private-item-container-color: var(--item-container-selected-color);
   --private-item-label-text-color: var(--item-label-text-selected-color);
   --private-item-leading-trailing-color: var(--item-label-text-selected-color);
   --private-item-supporting-text-color: var(--item-label-text-selected-color);
 }
-.item.disabled {
+
+:host([disabled]) {
   cursor: not-allowed;
   --private-item-label-text-color: var(--color-on-surface);
   --private-item-label-text-opacity: 0.38;
@@ -8187,17 +8413,8 @@ var css_248z$h = i`* {
   --private-item-supporting-text-color: var(--color-on-surface);
   --private-item-container-opacity: 0.12;
 }
-.item.disabled .ripple {
+:host([disabled]) .ripple {
   display: none;
-}
-
-:host {
-  --item-container-color: transparent;
-  --item-label-text-color: var(--color-on-surface);
-  --item-leading-trailing-color: var(--color-on-surface-variant);
-  --item-supporting-text-color: var(--color-on-surface-variant);
-  --item-container-selected-color: var(--color-tertiary-container);
-  --item-label-text-selected-color: var(--color-on-tertiary-container);
 }`;
 
 /**
@@ -8220,7 +8437,7 @@ var css_248z$h = i`* {
  * ```
  * @tags display
  */
-class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
+class Item extends NativeButtonMixin(NativeHyperlinkMixin(i$1)) {
     constructor() {
         super(...arguments);
         this.__contentObserver = new MutationObserver(() => {
@@ -8254,7 +8471,7 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
                 this.itemElement.click();
                 return;
             }
-            if (event.key === 'Enter' && !this.__isLink()) {
+            if (event.key === 'Enter' && !isLink(this)) {
                 event.preventDefault();
                 this.itemElement.click();
             }
@@ -8339,7 +8556,6 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         this.__isCapturingTabIndex = false;
     }
     render() {
-        const isLink = this.__isLink();
         const role = this.__getForwardedAttribute('role');
         const tabIndex = this.__capturedTabIndex;
         const ariaHasPopup = this.__getForwardedAttribute('aria-haspopup');
@@ -8351,7 +8567,16 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
             disabled: this.disabled || this.softDisabled,
             pressed: this.isPressed,
         };
-        if (!isLink) {
+        return b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+      <div class="background"></div>
+      <wc-ripple class="ripple" for="item"></wc-ripple>
+
+      ${this.renderItemElement(cssClasses, role, tabIndex, ariaHasPopup, ariaControls, ariaExpanded)}
+    `;
+    }
+    renderItemElement(cssClasses, role, tabIndex, ariaHasPopup, ariaControls, ariaExpanded) {
+        if (!isLink(this)) {
             cssClasses['native-button'] = true;
             return b `
         <button
@@ -8374,9 +8599,8 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         </button>
       `;
         }
-        else {
-            cssClasses['native-link'] = true;
-            return b `
+        cssClasses['native-link'] = true;
+        return b `
       <a
         id="item"
         class=${e$1(cssClasses)}
@@ -8398,7 +8622,6 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         ${this.renderContent()}
       </a>
     `;
-        }
     }
     renderContent() {
         const hasStart = this.__hasNamedSlot('start');
@@ -8409,24 +8632,25 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
         const hasSupportingText = this.__hasNamedSlot('supporting-text');
         const hasTrailingSupportingText = this.__hasNamedSlot('trailing-supporting-text');
         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="item-content">
         ${hasStart
             ? b `
               <div class="start">
-                <slot name="start" @slotchange=${this.__handleSlotChange}></slot>
+                <slot
+                  name="start"
+                  @slotchange=${this.__handleSlotChange}
+                ></slot>
               </div>
             `
             : A}
         <div class="content">
-    
           ${hasOverline
             ? b `
                 <div class="overline">
-                  <slot name="overline" @slotchange=${this.__handleSlotChange}></slot>
+                  <slot
+                    name="overline"
+                    @slotchange=${this.__handleSlotChange}
+                  ></slot>
                 </div>
               `
             : A}
@@ -8437,10 +8661,15 @@ class Item extends BaseButtonMixin(BaseHyperlinkMixin(i$1)) {
                 ? b `
                         <div class="headline">
                           ${hasHeadline
-                    ? b `<slot name="headline" @slotchange=${this.__handleSlotChange}></slot>`
+                    ? b `<slot
+                                name="headline"
+                                @slotchange=${this.__handleSlotChange}
+                              ></slot>`
                     : A}
                           ${hasDefault
-                    ? b `<slot @slotchange=${this.__handleSlotChange}></slot>`
+                    ? b `<slot
+                                @slotchange=${this.__handleSlotChange}
+                              ></slot>`
                     : A}
                         </div>
                       `
@@ -9285,7 +9514,6 @@ var _Tab_id;
  * @label Tab
  * @tag wc-tab
  * @rawTag tab
- * @parentRawTag tabs
  *
  * @summary A tab component for use within tabs.
  * @overview
@@ -9311,8 +9539,8 @@ class Tab extends i$1 {
         this.disabled = false;
         this.disabledReason = '';
         /**
-        * Sets or retrieves the window or frame at which to target content.
-        */
+         * Sets or retrieves the window or frame at which to target content.
+         */
         this.target = '_self';
         /**
          * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
@@ -9323,8 +9551,8 @@ class Tab extends i$1 {
         this.slotHasIcon = false;
         this.slotHasBadge = false;
         /**
-          * States
-          */
+         * States
+         */
         this.isPressed = false;
         this._tabindex = 0;
         this.__dispatchClickWithThrottle = event => {
@@ -9377,9 +9605,6 @@ class Tab extends i$1 {
             this.requestUpdate();
         });
     }
-    __isLink() {
-        return !!this.href;
-    }
     __getParentTabsVariant() {
         return this.closest('wc-tabs')?.variant ?? 'primary';
     }
@@ -9392,7 +9617,6 @@ class Tab extends i$1 {
     //   }
     // }
     render() {
-        const isLink = this.__isLink();
         const variant = this.__getParentTabsVariant();
         const cssClasses = {
             tab: true,
@@ -9405,38 +9629,38 @@ class Tab extends i$1 {
             'has-icon': this.slotHasIcon,
             'has-badge': this.slotHasBadge,
         };
-        if (!isLink) {
+        if (!isLink(this)) {
             return b `<button
-          id="button"
-              class=${e$1(cssClasses)}
-              tabindex="0"
-              @mousedown=${this.__handlePress}
-              @keydown=${this.__handlePress}
-              @keyup=${this.__handlePress}
-              ?aria-describedby=${this.__getDisabledReasonID()}
-              aria-disabled=${`${this.disabled}`}
-              ?disabled=${this.disabled}
-              ${spread(this.configAria)}
-            >
-              ${this.renderTabContent(variant)}
-            </button>`;
-        }
-        return b `<a
-        class=${e$1(cssClasses)}
         id="button"
+        class=${e$1(cssClasses)}
         tabindex="0"
-        href=${this.href}
-        target=${this.target}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
-        role="button"
         ?aria-describedby=${this.__getDisabledReasonID()}
         aria-disabled=${`${this.disabled}`}
+        ?disabled=${this.disabled}
         ${spread(this.configAria)}
       >
         ${this.renderTabContent(variant)}
-      </a>`;
+      </button>`;
+        }
+        return b `<a
+      class=${e$1(cssClasses)}
+      id="button"
+      tabindex="0"
+      href=${this.href}
+      target=${this.target}
+      @mousedown=${this.__handlePress}
+      @keydown=${this.__handlePress}
+      @keyup=${this.__handlePress}
+      role="button"
+      ?aria-describedby=${this.__getDisabledReasonID()}
+      aria-disabled=${`${this.disabled}`}
+      ${spread(this.configAria)}
+    >
+      ${this.renderTabContent(variant)}
+    </a>`;
     }
     renderTabContent(variant) {
         switch (variant) {
@@ -9453,14 +9677,13 @@ class Tab extends i$1 {
     }
     renderPrimaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
       <wc-ripple class="ripple"></wc-ripple>
-      
-      <div class="tab-content">
 
+      <div class="tab-content">
         <div class="icon-section">
           <slot name="badge"></slot>
           <slot name="icon"></slot>
@@ -9470,7 +9693,6 @@ class Tab extends i$1 {
         </div>
 
         <div class="indicator"></div>
-        
       </div>
 
       ${this.__renderDisabledReason()}
@@ -9478,14 +9700,13 @@ class Tab extends i$1 {
     }
     renderSecondaryTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
       <wc-ripple class="ripple"></wc-ripple>
-      
-      <div class="tab-content">
 
+      <div class="tab-content">
         <slot name="icon"></slot>
 
         <div class="slot-container">
@@ -9508,7 +9729,7 @@ class Tab extends i$1 {
     }
     renderSegmentedTabContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='button'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="button"></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="background"></div>
       <div class="outline"></div>
@@ -9842,7 +10063,6 @@ var css_248z$b = i`* {
  * @label Tab Panel
  * @tag wc-tab-panel
  * @rawTag tab-panel
- * @parentRawTag tab-group
  *
  * @summary Content panel for tabs.
  * @overview
@@ -11291,7 +11511,6 @@ var css_248z$7 = i`* {
  * @label Sidebar Menu Item
  * @tag wc-sidebar-menu-item
  * @rawTag sidebar-menu-item
- * @parentRawTag sidebar-menu
  * @summary A sidebar menu item represents a selectable leaf item in the sidebar navigation tree.
  *
  * @example
@@ -11572,7 +11791,6 @@ var css_248z$6 = i`* {
  * @label Sidebar Sub Menu
  * @tag wc-sidebar-sub-menu
  * @rawTag sidebar-sub-menu
- * @parentRawTag sidebar-menu
  * @summary A sidebar sub menu groups sidebar menu items and handles expand/collapse behavior.
  *
  * @example
@@ -12787,7 +13005,6 @@ var css_248z$2 = i`@charset "UTF-8";
  * @label Select Option
  * @tag wc-option
  * @rawTag option
- * @parentRawTag select
  *
  * @summary A declarative option element for use inside wc-select.
  *
@@ -13553,6 +13770,12 @@ var css_248z = i`* {
   z-index: 1;
   transition: color var(--duration-short4, 200ms) var(--easing-standard, ease), font-weight var(--duration-short4, 200ms) var(--easing-standard, ease);
 }
+.item {
+  /* Hide label when collapsed via class */
+}
+.item .label.hidden {
+  display: none;
+}
 .item {
   /* Active icon slot: hidden by default */
 }
@@ -13630,7 +13853,6 @@ var _NavigationRailItem_id;
  * @label Navigation Rail Item
  * @tag wc-navigation-rail-item
  * @rawTag navigation-rail-item
- * @parentRawTag navigation-rail
  *
  * @summary An individual item within a navigation rail.
  * @overview
@@ -13703,18 +13925,15 @@ class NavigationRailItem extends i$1 {
     }
     firstUpdated() {
         this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot:not([name])'), hasContent => {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot.label'), hasContent => {
             this._hasLabel = hasContent;
             this.requestUpdate();
         });
-        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot[name="active-icon"]'), hasContent => {
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot.active-icon-slot'), hasContent => {
             this._hasActiveIcon = hasContent;
             this.requestUpdate();
         });
     }
-    __isLink() {
-        return !!this.href;
-    }
     __getDisabledReasonID() {
         return this.disabled && this.disabledReason
             ? `disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}`
@@ -13735,7 +13954,7 @@ class NavigationRailItem extends i$1 {
     }
     __renderItemContent() {
         return b `
-      <wc-focus-ring class="focus-ring" for='item'></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
 
       <div class="item-content">
         <div class="indicator">
@@ -13745,16 +13964,13 @@ class NavigationRailItem extends i$1 {
             <slot name="icon" class="icon-slot"></slot>
           </div>
         </div>
-        ${this._hasLabel && !this.collapsed
-            ? b `<div class="label"><slot></slot></div>`
-            : b `<slot class="hidden-slot"></slot>`}
+        <div class="label ${this.collapsed ? 'hidden' : ''}"><slot></slot></div>
       </div>
 
       ${this.__renderDisabledReason()}
     `;
     }
     render() {
-        const isLink = this.__isLink();
         const cssClasses = {
             item: true,
             'item-element': true,
@@ -13764,7 +13980,7 @@ class NavigationRailItem extends i$1 {
             'has-label': this._hasLabel,
             'has-active-icon': this._hasActiveIcon,
         };
-        if (!isLink) {
+        if (!isLink(this)) {
             return b `<button
         id="item"
         class=${e$1(cssClasses)}
@@ -13965,4 +14181,4 @@ __decorate([
 ], NavigationRail.prototype, "showDivider", void 0);
 
 export { Tooltip as $, Accordion as A, Badge as B, Checkbox as C, DatePicker as D, Elevation as E, Field as F, Slider as G, Snackbar as H, Image as I, Spinner as J, SubMenu as K, LinearProgress as L, Menu as M, NavigationRail as N, Svg as O, Pagination as P, Switch as Q, Radio as R, SegmentedButton as S, Tab as T, TabGroup as U, TabPanel as V, Table as W, Tabs as X, Tag as Y, Textarea as Z, TimePicker as _, Avatar as a, UrlField as a0, Breadcrumb as b, BreadcrumbItem as c, Chip as d, ChipSet as e, CircularProgress as f, Container as g, Divider as h, EmptyState as i, FocusRing as j, Input as k, Item as l, Link as m, List as n, ListItem as o, MenuItem as p, NavigationRailItem as q, NumberField as r, Ripple as s, SegmentedButtonGroup as t, Select as u, SelectOptionElement as v, SidebarMenu as w, SidebarMenuItem as x, SidebarSubMenu as y, Skeleton as z };
-//# sourceMappingURL=navigation-rail-DAUuJ_Yp.js.map
+//# sourceMappingURL=navigation-rail-CM_svs5_.js.map