@aceshooting/lyra-ui 2.1.0 → 2.3.0

package/dist/components/app-rail/app-rail-item.class.d.ts

@@ -0,0 +1,51 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-app-rail-item>` — an explicit icon/label navigation item for
+ * `<lyra-app-rail>`. The rail sets its `icon-only` attribute as the viewport
+ * changes, keeping the label available to assistive technology while removing
+ * it from the visual layout.
+ *
+ * @customElement lyra-app-rail-item
+ * @slot - The visible navigation label.
+ * @slot icon - The leading icon.
+ * @csspart base - The link or button receiving focus and activation.
+ * @csspart icon - The icon wrapper.
+ * @csspart label - The label wrapper; visually clipped in icon-only mode.
+ * @csspart tooltip - The hover/focus label flyout, only rendered while `tooltip` is set, the item
+ *   is `icon-only`, and it is hovered or focused.
+ */
+export declare class LyraAppRailItem extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Optional destination. Without `href`, the item renders as a button. */
+    href: string;
+    /** Optional link target. */
+    target: string;
+    /** Prevents activation while retaining the item in the rail. */
+    disabled: boolean;
+    /** Marks this as the destination for the current page/view. Reflects
+     *  `aria-current="page"` on `[part="base"]` and drives the active visual
+     *  treatment -- the rail has no built-in routing, so the consumer sets
+     *  this per item (e.g. by comparing `href` against the current location). */
+    active: boolean;
+    /** Opt-in hover/focus flyout showing this item's label text while `icon-only` (set externally by
+     *  the parent `<lyra-app-rail>` as the viewport narrows) hides it from view -- an explicit,
+     *  documented property instead of an unverified cross-browser `::part()` + `::after` + `attr()`
+     *  composition. No effect outside icon-only mode, since the label is already visible there.
+     *  `false` (the default) reproduces today's exact output. */
+    tooltip: boolean;
+    private showTooltip;
+    private stopPositioning?;
+    private get tooltipText();
+    private onFocusShow;
+    private onBlurHide;
+    protected updated(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-app-rail-item': LyraAppRailItem;
+    }
+}
+//# sourceMappingURL=app-rail-item.class.d.ts.map

package/dist/components/app-rail/app-rail-item.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.class.d.ts","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail-item.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAI7D;;;;;;;;;;;;;;GAcG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,MAAM,CAAC,MAAM,iCAAgC;IAE7C,0EAA0E;IAC9D,IAAI,SAAM;IAEtB,4BAA4B;IAChB,MAAM,SAAM;IAExB,gEAAgE;IACpB,QAAQ,UAAS;IAE7D;;;iFAG6E;IACjC,MAAM,UAAS;IAE3D;;;;iEAI6D;IACjB,OAAO,UAAS;IAEnD,OAAO,CAAC,WAAW,CAAS;IACrC,OAAO,CAAC,eAAe,CAAC,CAAa;IAErC,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,CAAC,WAAW,CAEjB;IAEF,OAAO,CAAC,UAAU,CAEhB;IAEF,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAU/C;IAED,oBAAoB,IAAI,IAAI,CAG3B;IAED,MAAM,IAAI,cAAc,CAgCvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/dist/components/app-rail/app-rail-item.class.js

@@ -0,0 +1,128 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { place } from '../../internal/positioner.js';
+import { styles } from './app-rail-item.styles.js';
+/**
+ * `<lyra-app-rail-item>` — an explicit icon/label navigation item for
+ * `<lyra-app-rail>`. The rail sets its `icon-only` attribute as the viewport
+ * changes, keeping the label available to assistive technology while removing
+ * it from the visual layout.
+ *
+ * @customElement lyra-app-rail-item
+ * @slot - The visible navigation label.
+ * @slot icon - The leading icon.
+ * @csspart base - The link or button receiving focus and activation.
+ * @csspart icon - The icon wrapper.
+ * @csspart label - The label wrapper; visually clipped in icon-only mode.
+ * @csspart tooltip - The hover/focus label flyout, only rendered while `tooltip` is set, the item
+ *   is `icon-only`, and it is hovered or focused.
+ */
+export class LyraAppRailItem extends LyraElement {
+    constructor() {
+        super(...arguments);
+        /** Optional destination. Without `href`, the item renders as a button. */
+        this.href = '';
+        /** Optional link target. */
+        this.target = '';
+        /** Prevents activation while retaining the item in the rail. */
+        this.disabled = false;
+        /** Marks this as the destination for the current page/view. Reflects
+         *  `aria-current="page"` on `[part="base"]` and drives the active visual
+         *  treatment -- the rail has no built-in routing, so the consumer sets
+         *  this per item (e.g. by comparing `href` against the current location). */
+        this.active = false;
+        /** Opt-in hover/focus flyout showing this item's label text while `icon-only` (set externally by
+         *  the parent `<lyra-app-rail>` as the viewport narrows) hides it from view -- an explicit,
+         *  documented property instead of an unverified cross-browser `::part()` + `::after` + `attr()`
+         *  composition. No effect outside icon-only mode, since the label is already visible there.
+         *  `false` (the default) reproduces today's exact output. */
+        this.tooltip = false;
+        this.showTooltip = false;
+        this.onFocusShow = () => {
+            if (this.tooltip && this.hasAttribute('icon-only'))
+                this.showTooltip = true;
+        };
+        this.onBlurHide = () => {
+            this.showTooltip = false;
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    get tooltipText() {
+        return this.getAttribute('aria-label') || this.textContent?.trim() || '';
+    }
+    updated(changed) {
+        if (changed.has('showTooltip')) {
+            this.stopPositioning?.();
+            this.stopPositioning = undefined;
+            if (this.showTooltip) {
+                const anchor = this.renderRoot.querySelector('[part="base"]');
+                const popup = this.renderRoot.querySelector('[part="tooltip"]');
+                if (anchor && popup)
+                    this.stopPositioning = place(anchor, popup, { placement: 'right' });
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopPositioning?.();
+    }
+    render() {
+        const label = this.getAttribute('aria-label');
+        const content = html `
+      <span part="icon" aria-hidden=${label ? 'true' : nothing}><slot name="icon"></slot></span>
+      <span part="label"><slot></slot></span>
+      ${this.showTooltip ? html `<span part="tooltip" role="tooltip">${this.tooltipText}</span>` : nothing}
+    `;
+        if (this.href && !this.disabled) {
+            return html `<a
+        part="base"
+        href=${this.href}
+        target=${this.target || nothing}
+        aria-label=${label || nothing}
+        aria-current=${this.active ? 'page' : nothing}
+        @mouseenter=${this.onFocusShow}
+        @mouseleave=${this.onBlurHide}
+        @focus=${this.onFocusShow}
+        @blur=${this.onBlurHide}
+      >${content}</a>`;
+        }
+        return html `<button
+      part="base"
+      type="button"
+      ?disabled=${this.disabled}
+      aria-disabled=${this.disabled ? 'true' : nothing}
+      aria-label=${label || nothing}
+      aria-current=${this.active ? 'page' : nothing}
+      @mouseenter=${this.onFocusShow}
+      @mouseleave=${this.onBlurHide}
+      @focus=${this.onFocusShow}
+      @blur=${this.onBlurHide}
+    >${content}</button>`;
+    }
+}
+__decorate([
+    property()
+], LyraAppRailItem.prototype, "href", void 0);
+__decorate([
+    property()
+], LyraAppRailItem.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAppRailItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAppRailItem.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraAppRailItem.prototype, "tooltip", void 0);
+__decorate([
+    state()
+], LyraAppRailItem.prototype, "showTooltip", void 0);
+//# sourceMappingURL=app-rail-item.class.js.map

package/dist/components/app-rail/app-rail-item.class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.class.js","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail-item.class.ts"],"names":[],"mappings":"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"}

package/dist/components/app-rail/app-rail-item.d.ts

@@ -1,30 +1,2 @@
-import { type TemplateResult } from 'lit';
-import { LyraElement } from '../../internal/lyra-element.js';
-/**
- * `<lyra-app-rail-item>` — an explicit icon/label navigation item for
- * `<lyra-app-rail>`. The rail sets its `icon-only` attribute as the viewport
- * changes, keeping the label available to assistive technology while removing
- * it from the visual layout.
- *
- * @customElement lyra-app-rail-item
- * @slot - The visible navigation label.
- * @slot icon - The leading icon.
- * @csspart base - The link or button receiving focus and activation.
- * @csspart icon - The icon wrapper.
- * @csspart label - The label wrapper; visually clipped in icon-only mode.
- */
-export declare class LyraAppRailItem extends LyraElement {
-    static styles: import("lit").CSSResultGroup[];
-    /** Optional destination. Without `href`, the item renders as a button. */
-    href: string;
-    /** Optional link target. */
-    target: string;
-    /** Prevents activation while retaining the item in the rail. */
-    disabled: boolean;
-    render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'lyra-app-rail-item': LyraAppRailItem;
-    }
-}
+export * from './app-rail-item.class.js';
+//# sourceMappingURL=app-rail-item.d.ts.map

package/dist/components/app-rail/app-rail-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.d.ts","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail-item.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}

package/dist/components/app-rail/app-rail-item.js

@@ -1,68 +1,5 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
-import { LyraElement } from '../../internal/lyra-element.js';
+export * from './app-rail-item.class.js';
+import { LyraAppRailItem } from './app-rail-item.class.js';
 import { defineElement } from '../../internal/prefix.js';
-import { styles } from './app-rail-item.styles.js';
-/**
- * `<lyra-app-rail-item>` — an explicit icon/label navigation item for
- * `<lyra-app-rail>`. The rail sets its `icon-only` attribute as the viewport
- * changes, keeping the label available to assistive technology while removing
- * it from the visual layout.
- *
- * @customElement lyra-app-rail-item
- * @slot - The visible navigation label.
- * @slot icon - The leading icon.
- * @csspart base - The link or button receiving focus and activation.
- * @csspart icon - The icon wrapper.
- * @csspart label - The label wrapper; visually clipped in icon-only mode.
- */
-export class LyraAppRailItem extends LyraElement {
-    constructor() {
-        super(...arguments);
-        /** Optional destination. Without `href`, the item renders as a button. */
-        this.href = '';
-        /** Optional link target. */
-        this.target = '';
-        /** Prevents activation while retaining the item in the rail. */
-        this.disabled = false;
-    }
-    static { this.styles = [LyraElement.styles, styles]; }
-    render() {
-        const label = this.getAttribute('aria-label');
-        const content = html `
-      <span part="icon" aria-hidden=${label ? 'true' : nothing}><slot name="icon"></slot></span>
-      <span part="label"><slot></slot></span>
-    `;
-        if (this.href && !this.disabled) {
-            return html `<a
-        part="base"
-        href=${this.href}
-        target=${this.target || nothing}
-        aria-label=${label || nothing}
-      >${content}</a>`;
-        }
-        return html `<button
-      part="base"
-      type="button"
-      ?disabled=${this.disabled}
-      aria-disabled=${this.disabled ? 'true' : nothing}
-      aria-label=${label || nothing}
-    >${content}</button>`;
-    }
-}
-__decorate([
-    property()
-], LyraAppRailItem.prototype, "href", void 0);
-__decorate([
-    property()
-], LyraAppRailItem.prototype, "target", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LyraAppRailItem.prototype, "disabled", void 0);
 defineElement('app-rail-item', LyraAppRailItem);
+//# sourceMappingURL=app-rail-item.js.map

package/dist/components/app-rail/app-rail-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.js","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail-item.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,aAAa,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC"}

package/dist/components/app-rail/app-rail-item.styles.d.ts

@@ -1 +1,2 @@
 export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=app-rail-item.styles.d.ts.map

package/dist/components/app-rail/app-rail-item.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.styles.d.ts","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA+ElB,CAAC"}

package/dist/components/app-rail/app-rail-item.styles.js

@@ -33,6 +33,11 @@ export const styles = css `
     opacity: var(--lyra-opacity-disabled);
     cursor: not-allowed;
   }
+  [part='base'][aria-current='page'] {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+    font-weight: var(--lyra-font-weight-semibold);
+  }
   [part='icon'] {
     display: inline-flex;
     flex: 0 0 auto;
@@ -49,10 +54,10 @@ export const styles = css `
   }
   :host([icon-only]) [part='label'] {
     position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
+    inline-size: var(--lyra-size-1px);
+    block-size: var(--lyra-size-1px);
     padding: 0;
-    margin: -1px;
+    margin: var(--lyra-size-neg-1px);
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
@@ -62,4 +67,16 @@ export const styles = css `
     justify-content: center;
     padding-inline: 0;
   }
+  [part='tooltip'] {
+    position: fixed;
+    z-index: var(--lyra-layer-dropdown);
+    padding: var(--lyra-size-0-25rem) var(--lyra-space-s);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-text);
+    color: var(--lyra-color-surface);
+    font-size: var(--lyra-font-size-sm);
+    white-space: nowrap;
+    pointer-events: none;
+  }
 `;
+//# sourceMappingURL=app-rail-item.styles.js.map

package/dist/components/app-rail/app-rail-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail-item.styles.js","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+ExB,CAAC"}

package/dist/components/app-rail/app-rail.class.d.ts

@@ -0,0 +1,225 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+import './app-rail-item.class.js';
+/** The rail's effective presentation -- see the class doc for what each renders. */
+export type AppRailMode = 'full' | 'icon-only' | 'mobile';
+/** What can be *assigned* to `mode` -- `'auto'` is a write-only sentinel; see the `mode` accessor doc. */
+export type AppRailModeInput = AppRailMode | 'auto';
+export interface AppRailModeChangeDetail {
+    mode: AppRailMode;
+}
+export interface AppRailToggleDetail {
+    open: boolean;
+}
+export interface AppRailResizeDetail {
+    widthPx: number;
+}
+/**
+ * Pure breakpoint-to-mode resolver, kept separate from the `matchMedia`
+ * wiring below so it's directly unit-testable without resizing a real
+ * browser window. `mobileMatches` wins over everything else when true (the
+ * viewport is narrower than both breakpoints at once); otherwise
+ * `preferredMode` (when set) wins over `iconOnlyMatches` — a manual
+ * preference for the full/icon-only axis specifically, while the mobile
+ * breakpoint continues to be tracked automatically regardless.
+ */
+export declare function computeAppRailMode(iconOnlyMatches: boolean, mobileMatches: boolean, preferredMode?: 'full' | 'icon-only' | null): AppRailMode;
+/**
+ * `<lyra-app-rail>` — a responsive navigation rail that adapts across three
+ * presentations as the *viewport* narrows (not this element's own inline
+ * size — see the `mode` accessor doc for why): `'full'` (nav items show
+ * icon + label, inline), `'icon-only'` (a narrower inline rail, icons only),
+ * and `'mobile'` (hidden behind a toggle button; opening it shows a
+ * focus-trapped floating overlay over the page).
+ *
+ * Breakpoints are viewport-width `matchMedia()` queries against
+ * `icon-only-breakpoint`/`mobile-breakpoint`, not a `ResizeObserver` on this
+ * element — a nav rail's presentation should track the actual device/window
+ * width the way a native OS shell's navigation does, not however much
+ * horizontal space a particular layout happens to give it.
+ *
+ * The `'mobile'` state participates in the library's shared overlay stack,
+ * which supplies focus trapping, Escape/backdrop dismissal, inerting, and
+ * focus restoration without nesting a `<lyra-dialog>` in this component's
+ * shadow template. `[part="base"]` (the inline
+ * `'full'`/`'icon-only'` presentation) and `[part="panel"]` (the mobile
+ * overlay) are the *same* element promoted in place across modes (mirrors
+ * `<lyra-widget>`'s fullscreen mode) — never both at once, and never two
+ * separate copies of the slotted content, which slot projection can't
+ * produce anyway (a light-DOM node is only ever assigned to one `<slot>`).
+ * It's a plain `<div>` with an explicit `role="navigation"` rather than a
+ * literal `<nav>` tag: a `<nav>`'s implicit role can't be overridden to
+ * `role="dialog"` while the overlay is modal without an `aria-allowed-role`
+ * violation (verified against axe), whereas an explicit `role="navigation"`
+ * on a generic element can be swapped for `role="dialog"` freely.
+ *
+ * @customElement lyra-app-rail
+ * @slot - Nav items. Use `<lyra-app-rail-item>` for the explicit icon/label
+ *   contract that automatically hides labels in `'icon-only'` mode. Generic
+ *   links and buttons remain supported, but their compact presentation is the
+ *   consumer's responsibility. While the mobile overlay is open, clicking
+ *   anywhere inside this slot closes it.
+ * @slot header - Logo/brand content, shown above the nav items in every mode.
+ * @slot footer - A trailing user/settings trigger, shown below the nav items.
+ * @event lyra-mode-change - The effective mode changed, whether from a
+ *   breakpoint crossing or an explicit `mode` assignment. Not fired for a
+ *   redundant reassignment to the mode already in effect.
+ *   `detail: AppRailModeChangeDetail`.
+ * @event lyra-toggle - The mobile overlay opened or closed — via the
+ *   built-in toggle button, Escape, a backdrop click, a nav-item click while
+ *   open, or a breakpoint/forced mode change leaving `'mobile'` while open.
+ *   Not fired when a consumer sets `open` directly (mirrors `<lyra-dialog>`'s
+ *   `open`/`close()` split). `detail: AppRailToggleDetail`.
+ * @event lyra-rail-resize - The `resizable` rail's width changed via drag or keyboard stepping.
+ *   Not fired when a consumer sets `railWidthPx` directly. `detail: AppRailResizeDetail`.
+ * @csspart base - The rail root while inline (`'full'`/`'icon-only'` modes).
+ * @csspart header - The wrapper around the `header` slot.
+ * @csspart nav - The wrapper around the default (nav items) slot.
+ * @csspart footer - The wrapper around the `footer` slot.
+ * @csspart toggle - The mobile hamburger/close toggle button. Hidden via
+ *   CSS outside `'mobile'` mode, or entirely via `hideToggle`.
+ * @csspart backdrop - The mobile overlay's scrim. Only rendered while open.
+ * @csspart panel - The mobile overlay's floating panel — see the class doc
+ *   for why it's the same element as `base`, never both at once.
+ * @csspart resizer - The `resizable` opt-in's drag handle. Only rendered while `resizable` and
+ *   `mode` is `'full'`.
+ *
+ * @example
+ * Use the item contract so the visible label collapses while its accessible
+ * name remains available:
+ * ```html
+ * <lyra-app-rail>
+ *   <lyra-app-rail-item href="/inbox" aria-label="Inbox">
+ *     <svg slot="icon" aria-hidden="true">...</svg>Inbox
+ *   </lyra-app-rail-item>
+ * </lyra-app-rail>
+ * ```
+ */
+export declare class LyraAppRail extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    static properties: {
+        mode: {
+            reflect: boolean;
+            noAccessor: boolean;
+        };
+    };
+    /** Below this viewport width, the rail switches from `'full'` to
+     *  `'icon-only'`. Any valid CSS length, used directly in a `max-width`
+     *  media query. */
+    iconOnlyBreakpoint: string;
+    /** Below this viewport width, the rail switches from `'icon-only'` to
+     *  `'mobile'`. Should be smaller than `iconOnlyBreakpoint` to produce all
+     *  three states as the viewport narrows. */
+    mobileBreakpoint: string;
+    /** Whether the mobile floating overlay is shown. Only meaningful while
+     *  `mode` is `'mobile'` — the value is preserved (not reset) while another
+     *  mode is active, but no overlay chrome renders until `mode` is
+     *  `'mobile'` again. Set this directly, or use the built-in toggle button
+     *  — there is no separate `show()`/`hide()` pair. */
+    open: boolean;
+    /** Accessible name for the rail's navigation landmark, and for its dialog
+     *  role while the mobile overlay is open. */
+    label: string;
+    /** Manually prefers `'full'` or `'icon-only'` for the non-mobile breakpoint axis, while the
+     *  `mobile-breakpoint` continues to be tracked automatically regardless — e.g. a user's manual
+     *  collapse toggle that should still yield to a genuinely too-narrow-for-any-inline-rail
+     *  viewport. Only consulted while `mode` isn't force-pinned via its own accessor (see the class
+     *  doc) — that continues to take full priority, unchanged. Unset (the default, `null`)
+     *  reproduces today's exact breakpoint-only behavior. */
+    preferredMode?: 'full' | 'icon-only' | null;
+    /** Suppresses the built-in mobile `[part='toggle']` hamburger/close button entirely -- for a
+     *  consumer that already owns an external mobile-menu toggle wired to this rail's own `open`
+     *  property. `false` (the default) reproduces today's exact output; note `open` still has no
+     *  built-in external trigger of its own once this is set, since `lyra-toggle` only fires from the
+     *  toggle button being removed. */
+    hideToggle: boolean;
+    /** Opts a continuously draggable width in for the `'full'` state — exposes a `[part="resizer"]`
+     *  handle (pointer-drag and `ArrowLeft`/`ArrowRight` keyboard stepping, RTL-aware) clamped to
+     *  `[minRailWidthPx, maxRailWidthPx]`. No built-in persistence — a consumer that wants the
+     *  chosen width to survive a reload should listen for `lyra-rail-resize` and persist `widthPx`
+     *  itself. `false` (the default) renders no resizer and leaves the fixed-width
+     *  `--lyra-app-rail-width` CSS token exactly as before this property existed. */
+    resizable: boolean;
+    /** The rail's current width in px while `resizable` — settable/gettable. Unset defers to the
+     *  `--lyra-app-rail-width` CSS token's own resolved width. */
+    railWidthPx?: number;
+    /** Minimum `railWidthPx` a drag/keyboard resize can reach. */
+    minRailWidthPx: number;
+    /** Maximum `railWidthPx` a drag/keyboard resize can reach. */
+    maxRailWidthPx: number;
+    /** `true` for the duration of an active pointer-driven resize drag (not a keyboard step) --
+     *  reflected so a consumer (or this component's own styles) can suppress `[part='base']`'s
+     *  `transition: inline-size` during the drag, which otherwise visibly "chases" the pointer
+     *  instead of tracking it 1:1. Read-only in practice (this component owns the transitions), but
+     *  a plain reactive property like every other reflected boolean here. */
+    dragging: boolean;
+    private hasHeaderSlot;
+    private hasFooterSlot;
+    private _mode;
+    private forced;
+    private iconOnlyMatches;
+    private mobileMatches;
+    private mqIconOnly?;
+    private mqMobile?;
+    private overlayActive;
+    private justOpened;
+    private releaseScrollLock?;
+    private overlayHandle?;
+    private explicitTrigger?;
+    private readonly navId;
+    private baseEl?;
+    private resizePointerId?;
+    private resizeStartX;
+    private resizeStartWidth;
+    private syncSlottedItems;
+    /**
+     * The rail's current effective presentation. Always one of the three real
+     * modes — never `'auto'` — reflecting either the live breakpoint match or,
+     * once forced, whatever was last assigned.
+     *
+     * Assigning `'full'`/`'icon-only'`/`'mobile'` forces that mode and stops
+     * this element from responding to `icon-only-breakpoint`/
+     * `mobile-breakpoint` matches. Assigning the sentinel `'auto'` releases
+     * the force and immediately re-syncs to the current viewport width,
+     * resuming automatic tracking. `'auto'` is a write-only instruction, not a
+     * value this getter ever returns — there is no way to observe "currently
+     * forced" from the property itself.
+     */
+    get mode(): AppRailMode;
+    set mode(next: AppRailModeInput);
+    /** The rail's current effective width in px, whether or not `railWidthPx` has ever been
+     *  explicitly set — falls back to the live measured width of `[part=base]` so the resizer's
+     *  `aria-valuenow` and the first drag/keyboard step's start-width reflect the real rendered
+     *  width even before a consumer ever sets `railWidthPx`. */
+    private get effectiveRailWidthPx();
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private activateMobileOverlay;
+    private deactivateMobileOverlay;
+    private setupMediaQueries;
+    private teardownMediaQueries;
+    private onIconOnlyChange;
+    private onMobileChange;
+    private applyComputedMode;
+    private setEffectiveMode;
+    private setOpen;
+    private onToggleClick;
+    private onBackdropClick;
+    private onNavItemClick;
+    private onHeaderSlotChange;
+    private onFooterSlotChange;
+    private onNavSlotChange;
+    private onResizerPointerDown;
+    private onResizerPointerMove;
+    private onResizerPointerUp;
+    private onResizerKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-app-rail': LyraAppRail;
+    }
+}
+//# sourceMappingURL=app-rail.class.d.ts.map

package/dist/components/app-rail/app-rail.class.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-rail.class.d.ts","sourceRoot":"","sources":["../../../src/components/app-rail/app-rail.class.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAO7D,OAAO,0BAA0B,CAAC;AAElC,oFAAoF;AACpF,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE1D,0GAA0G;AAC1G,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,WAAW,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AA2BD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,eAAe,EAAE,OAAO,EACxB,aAAa,EAAE,OAAO,EACtB,aAAa,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,GAC1C,WAAW,CAKb;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,qBAAa,WAAY,SAAQ,WAAW;IAC1C,MAAM,CAAC,MAAM,iCAAgC;IAS7C,MAAM,CAAC,UAAU;QACf,IAAI;YAAI,OAAO;YAAQ,UAAU;;MACjC;IAEF;;uBAEmB;IAC8B,kBAAkB,SAAW;IAE9E;;gDAE4C;IACE,gBAAgB,SAAW;IAEzE;;;;yDAIqD;IACT,IAAI,UAAS;IAEzD;iDAC6C;IACjC,KAAK,SAAgB;IAEjC;;;;;6DAKyD;IACd,aAAa,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAC;IAEvF;;;;uCAImC;IACmC,UAAU,UAAS;IAEzF;;;;;qFAKiF;IACrC,SAAS,UAAS;IAE9D;kEAC8D;IACN,WAAW,CAAC,EAAE,MAAM,CAAC;IAE7E,8DAA8D;IACF,cAAc,SAAO;IAEjF,8DAA8D;IACF,cAAc,SAAO;IAEjF;;;;6EAIyE;IAC7B,QAAQ,UAAS;IAEpD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAAS;IAEvC,OAAO,CAAC,KAAK,CAAuB;IAGpC,OAAO,CAAC,MAAM,CAAS;IACvB,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAC,CAAiB;IACpC,OAAO,CAAC,QAAQ,CAAC,CAAiB;IAKlC,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,iBAAiB,CAAC,CAAa;IACvC,OAAO,CAAC,aAAa,CAAC,CAAgB;IACtC,OAAO,CAAC,eAAe,CAAC,CAAc;IACtC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAA0B;IAExB,OAAO,CAAC,MAAM,CAAC,CAAc;IACrD,OAAO,CAAC,eAAe,CAAC,CAAS;IACjC,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,gBAAgB,CAAK;IAE7B,OAAO,CAAC,gBAAgB;IASxB;;;;;;;;;;;;OAYG;IACH,IAAI,IAAI,IAAI,WAAW,CAEtB;IACD,IAAI,IAAI,CAAC,IAAI,EAAE,gBAAgB,EAU9B;IAED;;;gEAG4D;IAC5D,OAAO,KAAK,oBAAoB,GAG/B;IAED,SAAS,CAAC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAwBlD;IAMD,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAgB/C;IAED,iBAAiB,IAAI,IAAI,CAiBxB;IAED,oBAAoB,IAAI,IAAI,CAY3B;IAED,OAAO,CAAC,qBAAqB;IAY7B,OAAO,CAAC,uBAAuB;IAO/B,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,oBAAoB;IAY5B,OAAO,CAAC,gBAAgB,CAGtB;IACF,OAAO,CAAC,cAAc,CAGpB;IAEF,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,gBAAgB;IAcxB,OAAO,CAAC,OAAO;IAMf,OAAO,CAAC,aAAa,CAGnB;IAEF,OAAO,CAAC,eAAe,CAErB;IAKF,OAAO,CAAC,cAAc,CAEpB;IAEF,OAAO,CAAC,kBAAkB,CAExB;IACF,OAAO,CAAC,kBAAkB,CAExB;IACF,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,oBAAoB,CAU1B;IAEF,OAAO,CAAC,oBAAoB,CAO1B;IAEF,OAAO,CAAC,kBAAkB,CAQxB;IAEF,OAAO,CAAC,gBAAgB,CAgBtB;IAEF,MAAM,IAAI,cAAc,CAgDvB;CACF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}