@redvars/peacock 3.8.0 → 3.8.2

package/dist/navigation-rail-item.js

@@ -0,0 +1,385 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, c as __classPrivateFieldGet, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './query-CHb9Ft_d.js';
+import { e as e$1 } from './class-map-DG7CA1et.js';
+import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { o as observerSlotChangesWithCallback } from './observe-slot-change-DPxaZrZF.js';
+import { t as throttle } from './throttle-C7ZAPqtu.js';
+import { i as isLink } from './is-link-Dk2OV3PM.js';
+import './base-Cl6v8-BZ.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+/* Reset native button/link styles */
+.item-element {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  text-decoration: none;
+  text-align: unset;
+  color: inherit;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 3.5rem; /* 56dp */
+  padding-block: 0.25rem; /* 4dp vertical padding */
+  cursor: pointer;
+  gap: 0.25rem; /* 4dp gap between indicator and label */
+  box-sizing: border-box;
+  /* Color tokens */
+  --_inactive-icon-color: var(--nav-rail-inactive-icon-color, var(--color-on-surface-variant));
+  --_active-icon-color: var(--nav-rail-active-icon-color, var(--color-on-secondary-container));
+  --_inactive-label-color: var(--nav-rail-inactive-label-color, var(--color-on-surface-variant));
+  --_active-label-color: var(--nav-rail-active-label-color, var(--color-on-surface));
+  --_indicator-color: var(--nav-rail-indicator-color, var(--color-secondary-container));
+  --_indicator-shape: var(--nav-rail-indicator-shape, var(--shape-corner-full));
+  --_indicator-width: var(--nav-rail-indicator-width, 3.5rem); /* 56dp */
+  --_indicator-height: var(--nav-rail-indicator-height, 2rem); /* 32dp */
+  --_state-color: var(--_inactive-icon-color);
+  /* Focus ring */
+}
+.item .focus-ring {
+  z-index: 3;
+  --focus-ring-container-shape-start-start: var(--shape-corner-small);
+  --focus-ring-container-shape-start-end: var(--shape-corner-small);
+  --focus-ring-container-shape-end-start: var(--shape-corner-small);
+  --focus-ring-container-shape-end-end: var(--shape-corner-small);
+}
+.item {
+  /* Active indicator (pill behind icon) */
+}
+.item .indicator {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--_indicator-width);
+  height: var(--_indicator-height);
+  border-radius: var(--_indicator-shape);
+  overflow: hidden;
+  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;
+  justify-content: center;
+  z-index: 1;
+  position: relative;
+  pointer-events: none;
+}
+.item .indicator .icon-container ::slotted(*) {
+  --icon-size: 1.5rem; /* 24dp */
+  --icon-color: var(--_inactive-icon-color);
+  color: var(--_inactive-icon-color);
+  display: flex;
+}
+.item {
+  /* Label */
+}
+.item .label {
+  font-family: var(--typography-label-medium-font-family) !important;
+  font-size: var(--typography-label-medium-font-size) !important;
+  font-weight: var(--typography-label-medium-font-weight) !important;
+  line-height: var(--typography-label-medium-line-height) !important;
+  letter-spacing: var(--typography-label-medium-letter-spacing) !important;
+  color: var(--_inactive-label-color);
+  text-align: center;
+  pointer-events: none;
+  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 */
+}
+.item .active-icon-slot {
+  display: none;
+}
+.item .hidden-slot {
+  display: none;
+}
+.item {
+  /* Item content layout */
+}
+.item .item-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  z-index: 1;
+}
+.item {
+  /* Active state */
+}
+.item.active {
+  --_state-color: var(--_active-icon-color);
+}
+.item.active .indicator {
+  background-color: var(--_indicator-color);
+}
+.item.active .indicator .icon-container ::slotted(*) {
+  --icon-color: var(--_active-icon-color);
+  color: var(--_active-icon-color);
+}
+.item.active .label {
+  color: var(--_active-label-color);
+  font-weight: var(--typography-label-medium-font-weight-bold, 700);
+}
+.item {
+  /* Active icon slot: show when active and slot has content */
+}
+.item.active.has-active-icon .active-icon-slot {
+  display: flex;
+}
+.item.active.has-active-icon .icon-slot {
+  display: none;
+}
+.item {
+  /* Disabled state */
+}
+.item.disabled {
+  cursor: not-allowed;
+}
+.item.disabled .indicator .icon-container ::slotted(*) {
+  --icon-color: var(--color-on-surface);
+  color: var(--color-on-surface);
+  opacity: 0.38;
+}
+.item.disabled .label {
+  color: var(--color-on-surface);
+  opacity: 0.38;
+}
+.item.disabled .ripple {
+  display: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item .indicator,
+  .item .label {
+    transition: none;
+  }
+}`;
+
+var _NavigationRailItem_id;
+/**
+ * @label Navigation Rail Item
+ * @tag wc-navigation-rail-item
+ * @rawTag navigation-rail-item
+ *
+ * @summary An individual item within a navigation rail.
+ * @overview
+ * <p>Navigation rail items display a destination with an icon and optional label.</p>
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail-item>
+ *   <wc-icon slot="icon">home</wc-icon>
+ *   Home
+ * </wc-navigation-rail-item>
+ * ```
+ * @tags navigation
+ */
+let NavigationRailItem = class NavigationRailItem extends i$1 {
+    constructor() {
+        super();
+        _NavigationRailItem_id.set(this, crypto.randomUUID());
+        /** Whether this item is currently active/selected. */
+        this.active = false;
+        /** Whether this item is disabled. */
+        this.disabled = false;
+        /** Whether the parent rail is in collapsed mode (labels hidden). */
+        this.collapsed = false;
+        /** Link target. */
+        this.target = '_self';
+        /** Reason the item is disabled (shown to screen readers). */
+        this.disabledReason = '';
+        /** Sets the delay for throttle in milliseconds. When null (default), no throttle is applied. */
+        this.throttleDelay = null;
+        /** True when the default slot contains label content. */
+        this._hasLabel = false;
+        /** True when the `active-icon` slot contains content. */
+        this._hasActiveIcon = false;
+        this.__dispatchClickWithThrottle = event => {
+            this.__dispatchClick(event);
+        };
+        this.__dispatchClick = (event) => {
+            if (this.disabled && this.href) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+    }
+    focus() {
+        this.itemElement?.focus();
+    }
+    blur() {
+        this.itemElement?.blur();
+    }
+    firstUpdated() {
+        if (typeof this.throttleDelay === 'number') {
+            this.__dispatchClickWithThrottle = throttle(this.__dispatchClick, this.throttleDelay);
+        }
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot.label'), hasContent => {
+            this._hasLabel = hasContent;
+            this.requestUpdate();
+        });
+        observerSlotChangesWithCallback(this.renderRoot.querySelector('slot.active-icon-slot'), hasContent => {
+            this._hasActiveIcon = hasContent;
+            this.requestUpdate();
+        });
+    }
+    __getDisabledReasonID() {
+        return this.disabled && this.disabledReason
+            ? `disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}`
+            : A;
+    }
+    __renderDisabledReason() {
+        const disabledReasonID = this.__getDisabledReasonID();
+        if (disabledReasonID)
+            return b `<div
+        id="disabled-reason-${__classPrivateFieldGet(this, _NavigationRailItem_id, "f")}"
+        role="tooltip"
+        aria-label=${this.disabledReason}
+        class="screen-reader-only"
+      >
+        ${this.disabledReason}
+      </div>`;
+        return A;
+    }
+    __renderItemContent() {
+        return b `
+      <wc-focus-ring class="focus-ring" for="item"></wc-focus-ring>
+
+      <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>
+          </div>
+        </div>
+        <div class="label ${this.collapsed ? 'hidden' : ''}"><slot></slot></div>
+      </div>
+
+      ${this.__renderDisabledReason()}
+    `;
+    }
+    render() {
+        const cssClasses = {
+            item: true,
+            'item-element': true,
+            active: this.active,
+            disabled: this.disabled,
+            'has-label': this._hasLabel,
+            'has-active-icon': this._hasActiveIcon,
+        };
+        if (!isLink(this)) {
+            return b `<button
+        id="item"
+        class=${e$1(cssClasses)}
+        ?disabled=${this.disabled}
+        aria-disabled=${`${this.disabled}`}
+        aria-current=${this.active ? 'page' : A}
+        ?aria-describedby=${this.__getDisabledReasonID()}
+      >
+        ${this.__renderItemContent()}
+      </button>`;
+        }
+        return b `<a
+      id="item"
+      class=${e$1(cssClasses)}
+      href=${this.href}
+      target=${this.target}
+      aria-current=${this.active ? 'page' : A}
+      aria-disabled=${`${this.disabled}`}
+      ?aria-describedby=${this.__getDisabledReasonID()}
+    >
+      ${this.__renderItemContent()}
+    </a>`;
+    }
+};
+_NavigationRailItem_id = new WeakMap();
+NavigationRailItem.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "active", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "collapsed", void 0);
+__decorate([
+    n({ reflect: true })
+], NavigationRailItem.prototype, "href", void 0);
+__decorate([
+    n()
+], NavigationRailItem.prototype, "target", void 0);
+__decorate([
+    n({ reflect: true })
+], NavigationRailItem.prototype, "value", void 0);
+__decorate([
+    n({ attribute: 'disabled-reason' })
+], NavigationRailItem.prototype, "disabledReason", void 0);
+__decorate([
+    n({ type: Number })
+], NavigationRailItem.prototype, "throttleDelay", void 0);
+__decorate([
+    r()
+], NavigationRailItem.prototype, "_hasLabel", void 0);
+__decorate([
+    r()
+], NavigationRailItem.prototype, "_hasActiveIcon", void 0);
+__decorate([
+    e('.item-element')
+], NavigationRailItem.prototype, "itemElement", void 0);
+NavigationRailItem = __decorate([
+    IndividualComponent
+], NavigationRailItem);
+
+export { NavigationRailItem };
+//# sourceMappingURL=navigation-rail-item.js.map

package/dist/navigation-rail-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-item.js","sources":["../../src/navigation-rail/navigation-rail-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport { throttle } from '@/__internal/utils/throttle.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport styles from './navigation-rail-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Navigation Rail Item\n * @tag wc-navigation-rail-item\n * @rawTag navigation-rail-item\n *\n * @summary An individual item within a navigation rail.\n * @overview\n * <p>Navigation rail items display a destination with an icon and optional label.</p>\n *\n * @example\n * ```html\n * <wc-navigation-rail-item>\n *   <wc-icon slot=\"icon\">home</wc-icon>\n *   Home\n * </wc-navigation-rail-item>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class NavigationRailItem extends LitElement {\n  #id = crypto.randomUUID();\n\n  static styles = [styles];\n\n  /** Whether this item is currently active/selected. */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /** Whether this item is disabled. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Whether the parent rail is in collapsed mode (labels hidden). */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /** If provided, the item renders as a link. */\n  @property({ reflect: true }) href?: string;\n\n  /** Link target. */\n  @property() target: string = '_self';\n\n  /** Value used for identification when managing active state externally. */\n  @property({ reflect: true }) value?: string;\n\n  /** Reason the item is disabled (shown to screen readers). */\n  @property({ attribute: 'disabled-reason' }) disabledReason: string = '';\n\n  /** Sets the delay for throttle in milliseconds. When null (default), no throttle is applied. */\n  @property({ type: Number }) throttleDelay: number | null = null;\n\n  /** True when the default slot contains label content. */\n  @state() private _hasLabel = false;\n\n  /** True when the `active-icon` slot contains content. */\n  @state() private _hasActiveIcon = false;\n\n  @query('.item-element') readonly itemElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  override firstUpdated() {\n    if (typeof this.throttleDelay === 'number') {\n      this.__dispatchClickWithThrottle = throttle(\n        this.__dispatchClick,\n        this.throttleDelay,\n      );\n    }\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot.label'),\n      hasContent => {\n        this._hasLabel = hasContent;\n        this.requestUpdate();\n      },\n    );\n\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot.active-icon-slot'),\n      hasContent => {\n        this._hasActiveIcon = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void =\n    event => {\n      this.__dispatchClick(event);\n    };\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    if (this.disabled && this.href) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.itemElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.itemElement);\n  };\n\n  __getDisabledReasonID() {\n    return this.disabled && this.disabledReason\n      ? `disabled-reason-${this.#id}`\n      : nothing;\n  }\n\n  __renderDisabledReason() {\n    const disabledReasonID = this.__getDisabledReasonID();\n    if (disabledReasonID)\n      return html`<div\n        id=\"disabled-reason-${this.#id}\"\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  __renderItemContent() {\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=\"item\"></wc-focus-ring>\n\n      <div class=\"item-content\">\n        <div class=\"indicator\">\n          <wc-ripple class=\"ripple\"></wc-ripple>\n          <div class=\"icon-container\">\n            <slot name=\"active-icon\" class=\"active-icon-slot\"></slot>\n            <slot name=\"icon\" class=\"icon-slot\"></slot>\n          </div>\n        </div>\n        <div class=\"label ${this.collapsed ? 'hidden' : ''}\"><slot></slot></div>\n      </div>\n\n      ${this.__renderDisabledReason()}\n    `;\n  }\n\n  render() {\n    const cssClasses = {\n      item: true,\n      'item-element': true,\n      active: this.active,\n      disabled: this.disabled,\n      'has-label': this._hasLabel,\n      'has-active-icon': this._hasActiveIcon,\n    };\n\n    if (!isLink(this)) {\n      return html`<button\n        id=\"item\"\n        class=${classMap(cssClasses)}\n        ?disabled=${this.disabled}\n        aria-disabled=${`${this.disabled}`}\n        aria-current=${this.active ? 'page' : nothing}\n        ?aria-describedby=${this.__getDisabledReasonID()}\n      >\n        ${this.__renderItemContent()}\n      </button>`;\n    }\n\n    return html`<a\n      id=\"item\"\n      class=${classMap(cssClasses)}\n      href=${this.href}\n      target=${this.target}\n      aria-current=${this.active ? 'page' : nothing}\n      aria-disabled=${`${this.disabled}`}\n      ?aria-describedby=${this.__getDisabledReasonID()}\n    >\n      ${this.__renderItemContent()}\n    </a>`;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/navigation-rail.js

@@ -0,0 +1,217 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
+import { NavigationRailItem } from './navigation-rail-item.js';
+import './directive-ZPhl09Yt.js';
+import './state-DkTK9EGF.js';
+import './query-CHb9Ft_d.js';
+import './base-Cl6v8-BZ.js';
+import './dispatch-event-utils-CuEqjlPT.js';
+import './observe-slot-change-DPxaZrZF.js';
+import './throttle-C7ZAPqtu.js';
+import './is-link-Dk2OV3PM.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  height: 100%;
+  width: var(--nav-rail-width, 5rem); /* 80dp */
+  overflow: hidden;
+}
+
+.rail {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  background-color: var(--nav-rail-container-color, var(--color-surface));
+  padding-block: var(--nav-rail-padding-block, 0.75rem); /* 12dp */
+  box-sizing: border-box;
+}
+.rail .header {
+  display: flex;
+  flex-direction: column;
+  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;
+  background-color: var(--nav-rail-container-color);
+}
+.rail .footer:empty {
+  display: none;
+}
+.rail wc-divider {
+  width: calc(100% - 1rem);
+  flex-shrink: 0;
+}
+.rail .items {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 0.75rem; /* 12dp between items */
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.rail .items ::slotted(wc-navigation-rail-item) {
+  width: 100%;
+}`;
+
+/**
+ * @label Navigation Rail
+ * @tag wc-navigation-rail
+ * @rawTag navigation-rail
+ *
+ * @summary A vertical side navigation for medium-sized screens,.
+ * @overview
+ * <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.
+ * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).
+ * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).
+ * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).
+ * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.
+ * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.
+ * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.
+ *
+ * @example
+ * ```html
+ * <wc-navigation-rail>
+ *   <wc-navigation-rail-item active>
+ *     <wc-icon slot="icon" name="home"></wc-icon>
+ *     Home
+ *   </wc-navigation-rail-item>
+ *   <wc-navigation-rail-item>
+ *     <wc-icon slot="icon" name="search"></wc-icon>
+ *     Search
+ *   </wc-navigation-rail-item>
+ * </wc-navigation-rail>
+ * ```
+ * @tags navigation
+ */
+let NavigationRail = class NavigationRail extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Display mode of the navigation rail.
+         * - `"expanded"`: shows labels.
+         * - `"collapsed"`: hides labels.
+         */
+        this.mode = 'expanded';
+        /**
+         * Whether to show a divider between the header and items sections.
+         */
+        this.showDivider = false;
+        this._handleItemClick = (event) => {
+            const target = event.target;
+            const item = target.closest('wc-navigation-rail-item');
+            if (!item || item.disabled)
+                return;
+            // Deactivate all items and activate the clicked one
+            for (const railItem of this._getItems()) {
+                railItem.active = railItem === item;
+            }
+            this.dispatchEvent(new CustomEvent('nav-change', {
+                detail: {
+                    value: item.value,
+                    item,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._syncItemMode = () => {
+            const isCollapsed = this.mode === 'collapsed';
+            for (const railItem of this._getItems()) {
+                railItem.collapsed = isCollapsed;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this._handleItemClick);
+        this.setAttribute('role', 'navigation');
+        this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this._handleItemClick);
+        super.disconnectedCallback();
+    }
+    firstUpdated() {
+        this._syncItemMode();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('mode')) {
+            this._syncItemMode();
+        }
+    }
+    _getItems() {
+        return Array.from(this.querySelectorAll('wc-navigation-rail-item'));
+    }
+    render() {
+        const cssClasses = {
+            rail: true,
+            [`mode-${this.mode}`]: true,
+        };
+        return b `
+      <div class=${e(cssClasses)}>
+        <div class="header">
+          <slot name="header"></slot>
+        </div>
+        ${this.showDivider ? b `<wc-divider></wc-divider>` : ''}
+        <nav class="items" role="presentation">
+          <slot @slotchange=${this._syncItemMode}></slot>
+        </nav>
+        <div class="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+NavigationRail.styles = [css_248z];
+NavigationRail.Item = NavigationRailItem;
+__decorate([
+    n({ reflect: true })
+], NavigationRail.prototype, "mode", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'show-divider' })
+], NavigationRail.prototype, "showDivider", void 0);
+NavigationRail = __decorate([
+    IndividualComponent
+], NavigationRail);
+
+export { NavigationRail };
+//# sourceMappingURL=navigation-rail.js.map

package/dist/navigation-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.js","sources":["../../src/navigation-rail/navigation-rail.ts"],"sourcesContent":["import { html, LitElement, PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './navigation-rail.scss';\nimport { NavigationRailItem } from './navigation-rail-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Navigation Rail\n * @tag wc-navigation-rail\n * @rawTag navigation-rail\n *\n * @summary A vertical side navigation for medium-sized screens,.\n * @overview\n * <p>Navigation rail provides access to primary destinations in an app using icons—with or without labels—on a vertical rail.</p>\n * <p>Use navigation rail on medium-sized screens (tablets) with 3–7 destinations.</p>\n *\n * @slot header - Content displayed above the rail items.\n * @slot footer - Content pinned to the bottom of the rail.\n *\n * @cssprop --nav-rail-width - Width of the rail container. Defaults to 5rem (80dp).\n * @cssprop --nav-rail-container-color - Background color of the rail. Defaults to surface color.\n * @cssprop --nav-rail-indicator-color - Color of the active indicator. Defaults to secondary-container.\n * @cssprop --nav-rail-indicator-shape - Shape (border-radius) of the active indicator. Defaults to full (pill).\n * @cssprop --nav-rail-indicator-width - Width of the active indicator. Defaults to 3.5rem (56dp).\n * @cssprop --nav-rail-indicator-height - Height of the active indicator. Defaults to 2rem (32dp).\n * @cssprop --nav-rail-inactive-icon-color - Color of inactive icons. Defaults to on-surface-variant.\n * @cssprop --nav-rail-active-icon-color - Color of active icons. Defaults to on-secondary-container.\n * @cssprop --nav-rail-inactive-label-color - Color of inactive labels. Defaults to on-surface-variant.\n * @cssprop --nav-rail-active-label-color - Color of active labels. Defaults to on-surface.\n *\n * @example\n * ```html\n * <wc-navigation-rail>\n *   <wc-navigation-rail-item active>\n *     <wc-icon slot=\"icon\" name=\"home\"></wc-icon>\n *     Home\n *   </wc-navigation-rail-item>\n *   <wc-navigation-rail-item>\n *     <wc-icon slot=\"icon\" name=\"search\"></wc-icon>\n *     Search\n *   </wc-navigation-rail-item>\n * </wc-navigation-rail>\n * ```\n * @tags navigation\n */\n@IndividualComponent\nexport class NavigationRail extends LitElement {\n  static styles = [styles];\n\n  static Item = NavigationRailItem;\n\n  /**\n   * Display mode of the navigation rail.\n   * - `\"expanded\"`: shows labels.\n   * - `\"collapsed\"`: hides labels.\n   */\n  @property({ reflect: true }) mode: 'expanded' | 'collapsed' = 'expanded';\n\n  /**\n   * Whether to show a divider between the header and items sections.\n   */\n  @property({ type: Boolean, attribute: 'show-divider' }) showDivider = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this._handleItemClick);\n    this.setAttribute('role', 'navigation');\n    this.setAttribute('aria-label', this.getAttribute('aria-label') ?? 'Main navigation');\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this._handleItemClick);\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated() {\n    this._syncItemMode();\n  }\n\n  protected override updated(changedProperties: PropertyValues<this>) {\n    if (changedProperties.has('mode')) {\n      this._syncItemMode();\n    }\n  }\n\n  private _handleItemClick = (event: Event) => {\n    const target = event.target as HTMLElement;\n    const item = target.closest('wc-navigation-rail-item') as NavigationRailItem | null;\n\n    if (!item || item.disabled) return;\n\n    // Deactivate all items and activate the clicked one\n    for (const railItem of this._getItems()) {\n      railItem.active = railItem === item;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('nav-change', {\n        detail: {\n          value: item.value,\n          item,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private _getItems(): NavigationRailItem[] {\n    return Array.from(\n      this.querySelectorAll('wc-navigation-rail-item'),\n    ) as NavigationRailItem[];\n  }\n\n  private _syncItemMode = () => {\n    const isCollapsed = this.mode === 'collapsed';\n    for (const railItem of this._getItems()) {\n      railItem.collapsed = isCollapsed;\n    }\n  };\n\n  render() {\n    const cssClasses = {\n      rail: true,\n      [`mode-${this.mode}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <div class=\"header\">\n          <slot name=\"header\"></slot>\n        </div>\n        ${this.showDivider ? html`<wc-divider></wc-divider>` : ''}\n        <nav class=\"items\" role=\"presentation\">\n          <slot @slotchange=${this._syncItemMode}></slot>\n        </nav>\n        <div class=\"footer\">\n          <slot name=\"footer\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;AAKL;;;;AAIG;QAC0B,IAAA,CAAA,IAAI,GAA6B,UAAU;AAExE;;AAEG;QACqD,IAAA,CAAA,WAAW,GAAG,KAAK;AAwBnE,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAY,KAAI;AAC1C,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB;YAC1C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,yBAAyB,CAA8B;AAEnF,YAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;gBAAE;;YAG5B,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACvC,gBAAA,QAAQ,CAAC,MAAM,GAAG,QAAQ,KAAK,IAAI;YACrC;AAEA,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,YAAY,EAAE;AAC5B,gBAAA,MAAM,EAAE;oBACN,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,IAAI;AACL,iBAAA;AACD,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;QAQO,IAAA,CAAA,aAAa,GAAG,MAAK;AAC3B,YAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,WAAW;YAC7C,KAAK,MAAM,QAAQ,IAAI,IAAI,CAAC,SAAS,EAAE,EAAE;AACvC,gBAAA,QAAQ,CAAC,SAAS,GAAG,WAAW;YAClC;AACF,QAAA,CAAC;IAuBH;IA/EE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC;AACrD,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC;AACvC,QAAA,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,iBAAiB,CAAC;IACvF;IAEA,oBAAoB,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC;QACxD,KAAK,CAAC,oBAAoB,EAAE;IAC9B;IAEmB,YAAY,GAAA;QAC7B,IAAI,CAAC,aAAa,EAAE;IACtB;AAEmB,IAAA,OAAO,CAAC,iBAAuC,EAAA;AAChE,QAAA,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACjC,IAAI,CAAC,aAAa,EAAE;QACtB;IACF;IAyBQ,SAAS,GAAA;QACf,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CACzB;IAC3B;IASA,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;SAC5B;AAED,QAAA,OAAOC,CAAI,CAAA;mBACIC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;UAI7B,IAAI,CAAC,WAAW,GAAGD,CAAI,CAAA,CAAA,yBAAA,CAA2B,GAAG,EAAE;;AAEnC,4BAAA,EAAA,IAAI,CAAC,aAAa,CAAA;;;;;;KAM3C;IACH;;AA9FO,cAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAEjB,cAAA,CAAA,IAAI,GAAG,kBAAH;AAOkB,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAA8C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAKjB,UAAA,CAAA;IAAvDA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAfjE,cAAc,GAAA,UAAA,CAAA;IAD1B;AACY,CAAA,EAAA,cAAc,CAgG1B;;;;"}

package/dist/notification-manager.js

@@ -1,7 +1,7 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r } from './state-DwbEjqVk.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -12,6 +12,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 @keyframes reveal-top {
   0% {
     opacity: 0;