@aceshooting/lyra-ui 2.1.0 → 2.2.0

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

@@ -0,0 +1,36 @@
+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;
+    /** 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;
+    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,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG7D;;;;;;;;;;;;GAYG;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,MAAM,IAAI,cAAc,CAuBvB;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,77 @@
+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';
+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;
+        /** 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;
+    }
+    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}
+        aria-current=${this.active ? 'page' : nothing}
+      >${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}
+    >${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);
+//# 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":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAEnD;;;;;;;;;;;;GAYG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAAhD;;QAGE,0EAA0E;QAC9D,SAAI,GAAG,EAAE,CAAC;QAEtB,4BAA4B;QAChB,WAAM,GAAG,EAAE,CAAC;QAExB,gEAAgE;QACpB,aAAQ,GAAG,KAAK,CAAC;QAE7D;;;qFAG6E;QACjC,WAAM,GAAG,KAAK,CAAC;IA0B7D,CAAC;aAzCQ,WAAM,GAAG,CAAC,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,AAA/B,CAAgC;IAiB7C,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QAC9C,MAAM,OAAO,GAAG,IAAI,CAAA;sCACc,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;;KAEzD,CAAC;QACF,IAAI,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChC,OAAO,IAAI,CAAA;;eAEF,IAAI,CAAC,IAAI;iBACP,IAAI,CAAC,MAAM,IAAI,OAAO;qBAClB,KAAK,IAAI,OAAO;uBACd,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;SAC5C,OAAO,MAAM,CAAC;QACnB,CAAC;QACD,OAAO,IAAI,CAAA;;;kBAGG,IAAI,CAAC,QAAQ;sBACT,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;mBACnC,KAAK,IAAI,OAAO;qBACd,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;OAC5C,OAAO,WAAW,CAAC;IACxB,CAAC;CACF;AAtCa;IAAX,QAAQ,EAAE;6CAAW;AAGV;IAAX,QAAQ,EAAE;+CAAa;AAGoB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAAkB;AAMjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAgB"}

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,yBAoElB,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;
@@ -63,3 +68,4 @@ export const styles = css `
     padding-inline: 0;
   }
 `;
+//# 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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoExB,CAAC"}

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

@@ -0,0 +1,213 @@
+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.
+ * @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;
+    /** 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;
+    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":"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"}