@universal-material/web 3.8.0 → 3.9.0

package/navigation-bar/navigation-bar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.styles.js","sourceRoot":"","sources":["../../src/navigation-bar/navigation-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    --u-elevation-level: 2;\n  }\n\n  .container {\n    position: relative;\n    background-color: var(--u-nav-bar-container-color, var(--u-color-surface-container, rgb(243, 237, 247)));\n    color: var(--u-nav-bar-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    transition: background-color 100ms;\n  }\n\n  .absolute {\n    position: absolute;\n    inset-inline: 0;\n    inset-block-end: 0;\n    z-index: var(--u-nav-bar-z-index, 1010);\n  }\n\n  .fixed {\n    position: fixed;\n    inset-inline: 0;\n    inset-block-end: 0;\n    inset-inline-start: var(--u-app-bar-offset, 0);\n    z-index: var(--u-nav-bar-z-index, 1010);\n    transition: background-color 100ms, inset-inline-start 375ms cubic-bezier(0.19, 1, 0.22, 1);\n  }\n\n  .spacing {\n    padding-block-start: var(--_content-height);\n  }\n\n  .content {\n    display: flex;\n    align-items: stretch;\n    justify-content: space-around;\n    min-height: var(--u-nav-bar-container-height, 64px);\n    padding-inline: 0;\n    gap: var(--u-nav-bar-item-between-space, 0);\n  }\n`;\n"]}

package/navigation-rail/navigation-rail-headline.d.ts

@@ -0,0 +1,23 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+/**
+ * Section header for grouping destinations inside the expanded navigation
+ * rail. Slot it into `u-navigation-rail slot="expanded"` between groups of
+ * `u-navigation-rail-item`s.
+ *
+ * The headline is only visible while the rail is in its expanded state —
+ * when collapsed (or hidden) the rail switches to its primary `slot="rail"`
+ * destinations, so headlines never appear in narrow layouts.
+ *
+ * Slots:
+ *  - default: the headline text.
+ */
+export declare class NavigationRailHeadline extends LitElement {
+    static styles: import("lit").CSSResult[];
+    protected render(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-navigation-rail-headline': NavigationRailHeadline;
+    }
+}
+//# sourceMappingURL=navigation-rail-headline.d.ts.map

package/navigation-rail/navigation-rail-headline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-headline.d.ts","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-headline.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D;;;;;;;;;;;GAWG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,OAAgB,MAAM,4BAAwB;cAE3B,MAAM,IAAI,kBAAkB;CAGhD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"}

package/navigation-rail/navigation-rail-headline.js

@@ -0,0 +1,28 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './navigation-rail-headline.styles.js';
+/**
+ * Section header for grouping destinations inside the expanded navigation
+ * rail. Slot it into `u-navigation-rail slot="expanded"` between groups of
+ * `u-navigation-rail-item`s.
+ *
+ * The headline is only visible while the rail is in its expanded state —
+ * when collapsed (or hidden) the rail switches to its primary `slot="rail"`
+ * destinations, so headlines never appear in narrow layouts.
+ *
+ * Slots:
+ *  - default: the headline text.
+ */
+let NavigationRailHeadline = class NavigationRailHeadline extends LitElement {
+    static { this.styles = [baseStyles, styles]; }
+    render() {
+        return html `<div class="container" part="container"><slot></slot></div>`;
+    }
+};
+NavigationRailHeadline = __decorate([
+    customElement('u-navigation-rail-headline')
+], NavigationRailHeadline);
+export { NavigationRailHeadline };
+//# sourceMappingURL=navigation-rail-headline.js.map

package/navigation-rail/navigation-rail-headline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-headline.js","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-headline.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAE9D;;;;;;;;;;;GAWG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;aACpC,WAAM,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvB,CAAwB;IAE3B,MAAM;QACvB,OAAO,IAAI,CAAA,6DAA6D,CAAC;IAC3E,CAAC;;AALU,sBAAsB;IADlC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,sBAAsB,CAMlC","sourcesContent":["import { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './navigation-rail-headline.styles.js';\n\n/**\n * Section header for grouping destinations inside the expanded navigation\n * rail. Slot it into `u-navigation-rail slot=\"expanded\"` between groups of\n * `u-navigation-rail-item`s.\n *\n * The headline is only visible while the rail is in its expanded state —\n * when collapsed (or hidden) the rail switches to its primary `slot=\"rail\"`\n * destinations, so headlines never appear in narrow layouts.\n *\n * Slots:\n *  - default: the headline text.\n */\n@customElement('u-navigation-rail-headline')\nexport class NavigationRailHeadline extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  protected override render(): HTMLTemplateResult {\n    return html`<div class=\"container\" part=\"container\"><slot></slot></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-navigation-rail-headline': NavigationRailHeadline;\n  }\n}\n"]}

package/navigation-rail/navigation-rail-headline.styles.d.ts

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

package/navigation-rail/navigation-rail-headline.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-headline.styles.d.ts","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-headline.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAgBlB,CAAC"}

package/navigation-rail/navigation-rail-headline.styles.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    padding-inline-start: var(--u-nav-rail-headline-padding-inline-start, calc(var(--u-nav-rail-item-horizontal-full-width-leading-space, 16px) + var(--u-nav-rail-item-active-indicator-leading-space, 16px)));
+    padding-inline-end: var(--u-nav-rail-headline-padding-inline-end, var(--u-nav-rail-item-active-indicator-leading-space, 16px));
+    padding-block: var(--u-nav-rail-headline-padding-block, 20px 8px);
+  }
+
+  .container {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-nav-rail-headline-line-height, var(--u-title-s-line-height, 1.25rem));
+    font-size: var(--u-nav-rail-headline-font-size, var(--u-title-s-font-size, 0.875rem));
+    letter-spacing: var(--u-nav-rail-headline-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));
+    font-weight: var(--u-nav-rail-headline-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));
+    color: var(--u-nav-rail-headline-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+`;
+//# sourceMappingURL=navigation-rail-headline.styles.js.map

package/navigation-rail/navigation-rail-headline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-headline.styles.js","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-headline.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;CAgBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: block;\n    padding-inline-start: var(--u-nav-rail-headline-padding-inline-start, calc(var(--u-nav-rail-item-horizontal-full-width-leading-space, 16px) + var(--u-nav-rail-item-active-indicator-leading-space, 16px)));\n    padding-inline-end: var(--u-nav-rail-headline-padding-inline-end, var(--u-nav-rail-item-active-indicator-leading-space, 16px));\n    padding-block: var(--u-nav-rail-headline-padding-block, 20px 8px);\n  }\n\n  .container {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-nav-rail-headline-line-height, var(--u-title-s-line-height, 1.25rem));\n    font-size: var(--u-nav-rail-headline-font-size, var(--u-title-s-font-size, 0.875rem));\n    letter-spacing: var(--u-nav-rail-headline-letter-spacing, var(--u-title-s-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-nav-rail-headline-font-weight, var(--u-title-s-font-weight, var(--u-font-weight-medium, 500)));\n    color: var(--u-nav-rail-headline-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n`;\n"]}

package/navigation-rail/navigation-rail-item.d.ts

@@ -0,0 +1,58 @@
+import { HTMLTemplateResult } from 'lit';
+import { ButtonWrapper } from '../shared/button-wrapper.js';
+import '../ripple/ripple.js';
+export type NavRailItemVariant = 'collapsed' | 'expanded';
+/**
+ * A destination inside a `u-navigation-rail`. Renders two layouts depending
+ * on `variant`:
+ *
+ * - `collapsed` (default): vertical — a 56×32dp pill around the 24dp icon
+ *   with the label stacked below in label-medium type.
+ * - `expanded`: horizontal — a full-width pill wraps icon + label inline
+ *   (icon at the leading edge, label-large to its right), 56dp tall.
+ *
+ * Hover/focus/pressed feedback (state layer + ripple) is confined to the
+ * active-indicator pill, never the full square. The click target itself
+ * stays the full container — clicks anywhere on the item still navigate
+ * and emit a ripple inside the pill.
+ *
+ * The parent `u-navigation-rail` sets `variant` automatically based on the
+ * breakpoint and toggle state — consumers don't usually need to set it.
+ *
+ * Slots:
+ *  - default: the destination label.
+ *  - `icon`: the destination icon (24dp).
+ *  - `badge`: an optional `u-badge` placed at the top-right of the icon.
+ */
+export declare class NavigationRailItem extends ButtonWrapper {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    private _hasIcon;
+    private _hasLabel;
+    /**
+     * Whether the rail item is active (selected) or not.
+     */
+    active: boolean;
+    /**
+     * Layout variant. `collapsed` (default) stacks icon over label with a
+     * 56×32dp pill around the icon. `expanded` lays icon + label side-by-side
+     * inside a content-sized 56dp pill aligned to the rail's leading edge.
+     *
+     * Set automatically by `u-navigation-rail` based on which slot the item
+     * is placed into (`slot="rail"` → collapsed, `slot="expanded"` → expanded).
+     */
+    variant: NavRailItemVariant;
+    private readonly assignedIcons;
+    private readonly assignedLabelNodes;
+    private readonly _pillRipple;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected _getContainerClasses(): Record<string, boolean>;
+    protected _renderContent(): HTMLTemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-navigation-rail-item': NavigationRailItem;
+    }
+}
+//# sourceMappingURL=navigation-rail-item.d.ts.map

package/navigation-rail/navigation-rail-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-item.d.ts","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,MAAM,KAAK,CAAC;AAI/C,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,qBAAqB,CAAC;AAE7B,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,UAAU,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,kBAAmB,SAAQ,aAAa;;IAEnD,OAAgB,MAAM,iCAGpB;IAEO,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,SAAS,CAAS;IAEnC;;OAEG;IACyC,MAAM,UAAS;IAE3D;;;;;;;OAOG;IAC0B,OAAO,EAAE,kBAAkB,CAAe;IAGvE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAiB;IAG/C,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAU;IAEtB,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAU;IAEpD,iBAAiB,IAAI,IAAI;IAYzB,oBAAoB,IAAI,IAAI;cAMlB,oBAAoB,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;cAQ/C,cAAc,IAAI,kBAAkB;CA8DxD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,wBAAwB,EAAE,kBAAkB,CAAC;KAC9C;CACF"}

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

@@ -0,0 +1,160 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement, property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';
+import { ButtonWrapper } from '../shared/button-wrapper.js';
+import { styles } from './navigation-rail-item.styles.js';
+import '../ripple/ripple.js';
+/**
+ * A destination inside a `u-navigation-rail`. Renders two layouts depending
+ * on `variant`:
+ *
+ * - `collapsed` (default): vertical — a 56×32dp pill around the 24dp icon
+ *   with the label stacked below in label-medium type.
+ * - `expanded`: horizontal — a full-width pill wraps icon + label inline
+ *   (icon at the leading edge, label-large to its right), 56dp tall.
+ *
+ * Hover/focus/pressed feedback (state layer + ripple) is confined to the
+ * active-indicator pill, never the full square. The click target itself
+ * stays the full container — clicks anywhere on the item still navigate
+ * and emit a ripple inside the pill.
+ *
+ * The parent `u-navigation-rail` sets `variant` automatically based on the
+ * breakpoint and toggle state — consumers don't usually need to set it.
+ *
+ * Slots:
+ *  - default: the destination label.
+ *  - `icon`: the destination icon (24dp).
+ *  - `badge`: an optional `u-badge` placed at the top-right of the icon.
+ */
+let NavigationRailItem = class NavigationRailItem extends ButtonWrapper {
+    constructor() {
+        super(...arguments);
+        this._hasIcon = false;
+        this._hasLabel = false;
+        /**
+         * Whether the rail item is active (selected) or not.
+         */
+        this.active = false;
+        /**
+         * Layout variant. `collapsed` (default) stacks icon over label with a
+         * 56×32dp pill around the icon. `expanded` lays icon + label side-by-side
+         * inside a content-sized 56dp pill aligned to the rail's leading edge.
+         *
+         * Set automatically by `u-navigation-rail` based on which slot the item
+         * is placed into (`slot="rail"` → collapsed, `slot="expanded"` → expanded).
+         */
+        this.variant = 'collapsed';
+        this.#handleIconSlotChange = () => {
+            this._hasIcon = this.assignedIcons.length > 0;
+        };
+        this.#handleLabelSlotChange = () => {
+            this._hasLabel = this.assignedLabelNodes.some(node => {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    return !!node.textContent?.trim();
+                }
+                return true;
+            });
+        };
+        this.#handlePillMouseDown = (e) => {
+            if (this.disabled || !this._pillRipple) {
+                return;
+            }
+            this._pillRipple.createRipple(e.clientX, e.clientY, 'mouseup');
+        };
+        this.#handlePillTouchStart = (e) => {
+            if (this.disabled || !this._pillRipple || !e.touches[0]) {
+                return;
+            }
+            this._pillRipple.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend');
+        };
+    }
+    static { this.styles = [
+        ButtonWrapper.styles,
+        styles,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('aria-labelledby', 'text');
+        // Suppress the default ButtonWrapper ripple — the M3 nav-rail spec
+        // confines feedback to the active-indicator pill (not the full square).
+        // We render our own u-ripple inside the pill and forward pointer events
+        // from the full container to it.
+        this.renderRipple = false;
+        this.addEventListener('mousedown', this.#handlePillMouseDown);
+        this.addEventListener('touchstart', this.#handlePillTouchStart, { passive: true });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('mousedown', this.#handlePillMouseDown);
+        this.removeEventListener('touchstart', this.#handlePillTouchStart);
+    }
+    _getContainerClasses() {
+        return {
+            ...super._getContainerClasses(),
+            'has-icon': this._hasIcon,
+            'has-label': this._hasLabel,
+        };
+    }
+    _renderContent() {
+        const icon = html `
+      <span class="icon" part="icon">
+        <slot
+          name="icon"
+          aria-hidden="true"
+          @slotchange=${this.#handleIconSlotChange}></slot>
+        <slot name="badge"></slot>
+      </span>
+    `;
+        const label = html `
+      <span class="label" id="text" part="label">
+        <slot @slotchange=${this.#handleLabelSlotChange}></slot>
+      </span>
+    `;
+        if (this.variant === 'expanded') {
+            return html `
+        <span class="active-indicator" part="active-indicator">
+          <u-ripple class="pill-ripple" ?disabled=${this.disabled}></u-ripple>
+          ${icon}
+          ${label}
+        </span>
+      `;
+        }
+        return html `
+      <span class="active-indicator" part="active-indicator">
+        <u-ripple class="pill-ripple" ?disabled=${this.disabled}></u-ripple>
+        ${icon}
+      </span>
+      ${label}
+    `;
+    }
+    #handleIconSlotChange;
+    #handleLabelSlotChange;
+    #handlePillMouseDown;
+    #handlePillTouchStart;
+};
+__decorate([
+    state()
+], NavigationRailItem.prototype, "_hasIcon", void 0);
+__decorate([
+    state()
+], NavigationRailItem.prototype, "_hasLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NavigationRailItem.prototype, "active", void 0);
+__decorate([
+    property({ reflect: true })
+], NavigationRailItem.prototype, "variant", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'icon', flatten: true })
+], NavigationRailItem.prototype, "assignedIcons", void 0);
+__decorate([
+    queryAssignedNodes({ flatten: true })
+], NavigationRailItem.prototype, "assignedLabelNodes", void 0);
+__decorate([
+    query('.pill-ripple')
+], NavigationRailItem.prototype, "_pillRipple", void 0);
+NavigationRailItem = __decorate([
+    customElement('u-navigation-rail-item')
+], NavigationRailItem);
+export { NavigationRailItem };
+//# sourceMappingURL=navigation-rail-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-item.js","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-item.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, HTMLTemplateResult } from 'lit';\nimport { customElement, property, query, queryAssignedElements, queryAssignedNodes, state } from 'lit/decorators.js';\n\nimport { Ripple } from '../ripple/ripple.js';\nimport { ButtonWrapper } from '../shared/button-wrapper.js';\nimport { styles } from './navigation-rail-item.styles.js';\n\nimport '../ripple/ripple.js';\n\nexport type NavRailItemVariant = 'collapsed' | 'expanded';\n\n/**\n * A destination inside a `u-navigation-rail`. Renders two layouts depending\n * on `variant`:\n *\n * - `collapsed` (default): vertical — a 56×32dp pill around the 24dp icon\n *   with the label stacked below in label-medium type.\n * - `expanded`: horizontal — a full-width pill wraps icon + label inline\n *   (icon at the leading edge, label-large to its right), 56dp tall.\n *\n * Hover/focus/pressed feedback (state layer + ripple) is confined to the\n * active-indicator pill, never the full square. The click target itself\n * stays the full container — clicks anywhere on the item still navigate\n * and emit a ripple inside the pill.\n *\n * The parent `u-navigation-rail` sets `variant` automatically based on the\n * breakpoint and toggle state — consumers don't usually need to set it.\n *\n * Slots:\n *  - default: the destination label.\n *  - `icon`: the destination icon (24dp).\n *  - `badge`: an optional `u-badge` placed at the top-right of the icon.\n */\n@customElement('u-navigation-rail-item')\nexport class NavigationRailItem extends ButtonWrapper {\n\n  static override styles = [\n    ButtonWrapper.styles,\n    styles,\n  ];\n\n  @state() private _hasIcon = false;\n  @state() private _hasLabel = false;\n\n  /**\n   * Whether the rail item is active (selected) or not.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * Layout variant. `collapsed` (default) stacks icon over label with a\n   * 56×32dp pill around the icon. `expanded` lays icon + label side-by-side\n   * inside a content-sized 56dp pill aligned to the rail's leading edge.\n   *\n   * Set automatically by `u-navigation-rail` based on which slot the item\n   * is placed into (`slot=\"rail\"` → collapsed, `slot=\"expanded\"` → expanded).\n   */\n  @property({ reflect: true }) variant: NavRailItemVariant = 'collapsed';\n\n  @queryAssignedElements({ slot: 'icon', flatten: true })\n  private readonly assignedIcons!: HTMLElement[];\n\n  @queryAssignedNodes({ flatten: true })\n  private readonly assignedLabelNodes!: Node[];\n\n  @query('.pill-ripple') private readonly _pillRipple!: Ripple;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('aria-labelledby', 'text');\n    // Suppress the default ButtonWrapper ripple — the M3 nav-rail spec\n    // confines feedback to the active-indicator pill (not the full square).\n    // We render our own u-ripple inside the pill and forward pointer events\n    // from the full container to it.\n    this.renderRipple = false;\n    this.addEventListener('mousedown', this.#handlePillMouseDown);\n    this.addEventListener('touchstart', this.#handlePillTouchStart, { passive: true });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('mousedown', this.#handlePillMouseDown);\n    this.removeEventListener('touchstart', this.#handlePillTouchStart);\n  }\n\n  protected override _getContainerClasses(): Record<string, boolean> {\n    return {\n      ...super._getContainerClasses(),\n      'has-icon': this._hasIcon,\n      'has-label': this._hasLabel,\n    };\n  }\n\n  protected override _renderContent(): HTMLTemplateResult {\n    const icon = html`\n      <span class=\"icon\" part=\"icon\">\n        <slot\n          name=\"icon\"\n          aria-hidden=\"true\"\n          @slotchange=${this.#handleIconSlotChange}></slot>\n        <slot name=\"badge\"></slot>\n      </span>\n    `;\n\n    const label = html`\n      <span class=\"label\" id=\"text\" part=\"label\">\n        <slot @slotchange=${this.#handleLabelSlotChange}></slot>\n      </span>\n    `;\n\n    if (this.variant === 'expanded') {\n      return html`\n        <span class=\"active-indicator\" part=\"active-indicator\">\n          <u-ripple class=\"pill-ripple\" ?disabled=${this.disabled}></u-ripple>\n          ${icon}\n          ${label}\n        </span>\n      `;\n    }\n\n    return html`\n      <span class=\"active-indicator\" part=\"active-indicator\">\n        <u-ripple class=\"pill-ripple\" ?disabled=${this.disabled}></u-ripple>\n        ${icon}\n      </span>\n      ${label}\n    `;\n  }\n\n  #handleIconSlotChange = (): void => {\n    this._hasIcon = this.assignedIcons.length > 0;\n  };\n\n  #handleLabelSlotChange = (): void => {\n    this._hasLabel = this.assignedLabelNodes.some(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        return !!node.textContent?.trim();\n      }\n      return true;\n    });\n  };\n\n  #handlePillMouseDown = (e: MouseEvent): void => {\n    if (this.disabled || !this._pillRipple) {\n      return;\n    }\n    this._pillRipple.createRipple(e.clientX, e.clientY, 'mouseup');\n  };\n\n  #handlePillTouchStart = (e: TouchEvent): void => {\n    if (this.disabled || !this._pillRipple || !e.touches[0]) {\n      return;\n    }\n    this._pillRipple.createRipple(e.touches[0].clientX, e.touches[0].clientY, 'touchend');\n  };\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-navigation-rail-item': NavigationRailItem;\n  }\n}\n"]}

package/navigation-rail/navigation-rail-item.styles.d.ts

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

package/navigation-rail/navigation-rail-item.styles.d.ts.map

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

package/navigation-rail/navigation-rail-item.styles.js

@@ -0,0 +1,182 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: flex;
+    --_nav-rail-item-icon-size: var(--u-nav-rail-item-icon-size, 24px);
+    --_nav-rail-item-state-layer-color: var(--u-nav-rail-item-state-layer-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+
+  :host(:not([variant=expanded])) {
+    width: 100%;
+  }
+
+  .container {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    color: var(--u-nav-rail-item-inactive-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  .content {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  .active-indicator {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    border-radius: var(--u-nav-rail-item-active-indicator-shape, var(--u-shape-corner-full, 9999px));
+    transition: background-color 150ms;
+    overflow: hidden;
+  }
+
+  .active-indicator::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--_nav-rail-item-state-layer-color);
+    opacity: 0;
+    transition: opacity 150ms;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  @media (hover: hover) {
+    :host(:not([disabled]):hover) .active-indicator::before {
+      opacity: var(--u-state-hover-opacity, 0.08);
+    }
+  }
+  :host(:not([disabled])) .button:focus-visible ~ .content .active-indicator::before {
+    opacity: var(--u-state-focus-opacity, 0.1);
+  }
+
+  :host(:not([disabled])) .button:active ~ .content .active-indicator::before {
+    opacity: var(--u-state-pressed-opacity, 0.1);
+  }
+
+  .pill-ripple {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    z-index: 0;
+    pointer-events: none;
+    --u-ripple-pressed-color: var(--_nav-rail-item-state-layer-color);
+    --u-ripple-hover-color: transparent;
+  }
+
+  :host(:not([variant=expanded])) .content {
+    flex-direction: column;
+    gap: var(--u-nav-rail-item-vertical-icon-label-space, 4px);
+  }
+  :host(:not([variant=expanded])) .active-indicator {
+    width: var(--u-nav-rail-item-vertical-active-indicator-width, 56px);
+    height: var(--u-nav-rail-item-vertical-active-indicator-height, 32px);
+  }
+  :host(:not([variant=expanded])) .container {
+    min-height: var(--u-nav-rail-item-container-height, 64px);
+    padding-block: var(--u-nav-rail-item-vertical-padding-block, 4px);
+    padding-inline: var(--u-nav-rail-item-vertical-leading-space, 16px) var(--u-nav-rail-item-vertical-trailing-space, 16px);
+  }
+  :host(:not([variant=expanded])) .label {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-nav-rail-item-label-line-height, var(--u-label-m-line-height, 1rem));
+    font-size: var(--u-nav-rail-item-label-font-size, var(--u-label-m-font-size, 0.75rem));
+    letter-spacing: var(--u-nav-rail-item-label-letter-spacing, var(--u-label-m-letter-spacing, 0.0416666667rem));
+    font-weight: var(--u-nav-rail-item-label-font-weight, var(--u-label-m-font-weight, var(--u-font-weight-medium, 500)));
+    letter-spacing: var(--u-nav-rail-item-label-letter-spacing, 0.5px);
+  }
+
+  :host([variant=expanded]) {
+    width: 100%;
+  }
+  :host([variant=expanded]) .content {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    align-self: stretch;
+  }
+  :host([variant=expanded]) .active-indicator {
+    flex: 0 0 auto;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding-inline: var(--u-nav-rail-item-active-indicator-leading-space, 16px) var(--u-nav-rail-item-active-indicator-trailing-space, 16px);
+    gap: var(--u-nav-rail-item-horizontal-icon-label-space, 8px);
+    max-width: 100%;
+    align-self: stretch;
+  }
+  :host([variant=expanded]) .container {
+    justify-content: flex-start;
+    min-height: var(--u-nav-rail-item-container-height, 64px);
+    padding-block: var(--u-nav-rail-item-expanded-padding-block, 2px);
+    padding-inline-start: var(--u-nav-rail-item-horizontal-full-width-leading-space, 16px);
+  }
+  :host([variant=expanded]) .label {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-nav-rail-item-label-expanded-line-height, var(--u-label-l-line-height, 1.25rem));
+    font-size: var(--u-nav-rail-item-label-expanded-font-size, var(--u-label-l-font-size, 0.875rem));
+    letter-spacing: var(--u-nav-rail-item-label-expanded-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));
+    font-weight: var(--u-nav-rail-item-label-expanded-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));
+    text-align: start;
+  }
+
+  .icon {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--_nav-rail-item-icon-size);
+    height: var(--_nav-rail-item-icon-size);
+    font-size: var(--_nav-rail-item-icon-size);
+    line-height: 1;
+    color: var(--u-nav-rail-item-inactive-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    flex: 0 0 auto;
+    z-index: 2;
+  }
+
+  .label {
+    color: var(--u-nav-rail-item-inactive-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    z-index: 2;
+  }
+
+  .container:not(.has-label) .label,
+  .container:not(.has-icon) .icon {
+    display: none;
+  }
+
+  :host(.active) .container .active-indicator,
+  :host([active]) .container .active-indicator {
+    background-color: var(--u-nav-rail-item-active-indicator-color, var(--u-color-secondary-container, rgb(232, 222, 248)));
+  }
+  :host(.active) .container .icon,
+  :host([active]) .container .icon {
+    color: var(--u-nav-rail-item-active-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+  :host(.active) .container .label,
+  :host([active]) .container .label {
+    font-weight: var(--u-nav-rail-item-active-label-weight, var(--u-font-weight-bold, 700));
+  }
+
+  :host(.active:not([variant=expanded])) .container .label,
+  :host([active]:not([variant=expanded])) .container .label {
+    color: var(--u-nav-rail-item-vertical-active-label-color, var(--u-color-secondary, rgb(98, 91, 113)));
+  }
+
+  :host(.active[variant=expanded]) .container .label,
+  :host([active][variant=expanded]) .container .label {
+    color: var(--u-nav-rail-item-horizontal-active-label-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));
+  }
+`;
+//# sourceMappingURL=navigation-rail-item.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-item.styles.js","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmLzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    display: flex;\n    --_nav-rail-item-icon-size: var(--u-nav-rail-item-icon-size, 24px);\n    --_nav-rail-item-state-layer-color: var(--u-nav-rail-item-state-layer-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n\n  :host(:not([variant=expanded])) {\n    width: 100%;\n  }\n\n  .container {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    justify-content: center;\n    color: var(--u-nav-rail-item-inactive-text-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  .content {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  .active-indicator {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: 0 0 auto;\n    border-radius: var(--u-nav-rail-item-active-indicator-shape, var(--u-shape-corner-full, 9999px));\n    transition: background-color 150ms;\n    overflow: hidden;\n  }\n\n  .active-indicator::before {\n    content: \"\";\n    position: absolute;\n    inset: 0;\n    background-color: var(--_nav-rail-item-state-layer-color);\n    opacity: 0;\n    transition: opacity 150ms;\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  @media (hover: hover) {\n    :host(:not([disabled]):hover) .active-indicator::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n  }\n  :host(:not([disabled])) .button:focus-visible ~ .content .active-indicator::before {\n    opacity: var(--u-state-focus-opacity, 0.1);\n  }\n\n  :host(:not([disabled])) .button:active ~ .content .active-indicator::before {\n    opacity: var(--u-state-pressed-opacity, 0.1);\n  }\n\n  .pill-ripple {\n    position: absolute;\n    inset: 0;\n    border-radius: inherit;\n    z-index: 0;\n    pointer-events: none;\n    --u-ripple-pressed-color: var(--_nav-rail-item-state-layer-color);\n    --u-ripple-hover-color: transparent;\n  }\n\n  :host(:not([variant=expanded])) .content {\n    flex-direction: column;\n    gap: var(--u-nav-rail-item-vertical-icon-label-space, 4px);\n  }\n  :host(:not([variant=expanded])) .active-indicator {\n    width: var(--u-nav-rail-item-vertical-active-indicator-width, 56px);\n    height: var(--u-nav-rail-item-vertical-active-indicator-height, 32px);\n  }\n  :host(:not([variant=expanded])) .container {\n    min-height: var(--u-nav-rail-item-container-height, 64px);\n    padding-block: var(--u-nav-rail-item-vertical-padding-block, 4px);\n    padding-inline: var(--u-nav-rail-item-vertical-leading-space, 16px) var(--u-nav-rail-item-vertical-trailing-space, 16px);\n  }\n  :host(:not([variant=expanded])) .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-nav-rail-item-label-line-height, var(--u-label-m-line-height, 1rem));\n    font-size: var(--u-nav-rail-item-label-font-size, var(--u-label-m-font-size, 0.75rem));\n    letter-spacing: var(--u-nav-rail-item-label-letter-spacing, var(--u-label-m-letter-spacing, 0.0416666667rem));\n    font-weight: var(--u-nav-rail-item-label-font-weight, var(--u-label-m-font-weight, var(--u-font-weight-medium, 500)));\n    letter-spacing: var(--u-nav-rail-item-label-letter-spacing, 0.5px);\n  }\n\n  :host([variant=expanded]) {\n    width: 100%;\n  }\n  :host([variant=expanded]) .content {\n    flex-direction: row;\n    align-items: center;\n    justify-content: flex-start;\n    align-self: stretch;\n  }\n  :host([variant=expanded]) .active-indicator {\n    flex: 0 0 auto;\n    flex-direction: row;\n    justify-content: flex-start;\n    padding-inline: var(--u-nav-rail-item-active-indicator-leading-space, 16px) var(--u-nav-rail-item-active-indicator-trailing-space, 16px);\n    gap: var(--u-nav-rail-item-horizontal-icon-label-space, 8px);\n    max-width: 100%;\n    align-self: stretch;\n  }\n  :host([variant=expanded]) .container {\n    justify-content: flex-start;\n    min-height: var(--u-nav-rail-item-container-height, 64px);\n    padding-block: var(--u-nav-rail-item-expanded-padding-block, 2px);\n    padding-inline-start: var(--u-nav-rail-item-horizontal-full-width-leading-space, 16px);\n  }\n  :host([variant=expanded]) .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-nav-rail-item-label-expanded-line-height, var(--u-label-l-line-height, 1.25rem));\n    font-size: var(--u-nav-rail-item-label-expanded-font-size, var(--u-label-l-font-size, 0.875rem));\n    letter-spacing: var(--u-nav-rail-item-label-expanded-letter-spacing, var(--u-label-l-letter-spacing, 0.0071428571rem));\n    font-weight: var(--u-nav-rail-item-label-expanded-font-weight, var(--u-label-l-font-weight, var(--u-font-weight-medium, 500)));\n    text-align: start;\n  }\n\n  .icon {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--_nav-rail-item-icon-size);\n    height: var(--_nav-rail-item-icon-size);\n    font-size: var(--_nav-rail-item-icon-size);\n    line-height: 1;\n    color: var(--u-nav-rail-item-inactive-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    flex: 0 0 auto;\n    z-index: 2;\n  }\n\n  .label {\n    color: var(--u-nav-rail-item-inactive-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n    z-index: 2;\n  }\n\n  .container:not(.has-label) .label,\n  .container:not(.has-icon) .icon {\n    display: none;\n  }\n\n  :host(.active) .container .active-indicator,\n  :host([active]) .container .active-indicator {\n    background-color: var(--u-nav-rail-item-active-indicator-color, var(--u-color-secondary-container, rgb(232, 222, 248)));\n  }\n  :host(.active) .container .icon,\n  :host([active]) .container .icon {\n    color: var(--u-nav-rail-item-active-icon-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n  :host(.active) .container .label,\n  :host([active]) .container .label {\n    font-weight: var(--u-nav-rail-item-active-label-weight, var(--u-font-weight-bold, 700));\n  }\n\n  :host(.active:not([variant=expanded])) .container .label,\n  :host([active]:not([variant=expanded])) .container .label {\n    color: var(--u-nav-rail-item-vertical-active-label-color, var(--u-color-secondary, rgb(98, 91, 113)));\n  }\n\n  :host(.active[variant=expanded]) .container .label,\n  :host([active][variant=expanded]) .container .label {\n    color: var(--u-nav-rail-item-horizontal-active-label-color, var(--u-color-on-secondary-container, rgb(29, 25, 43)));\n  }\n`;\n"]}

package/navigation-rail/navigation-rail.d.ts

@@ -0,0 +1,66 @@
+import { HTMLTemplateResult, LitElement } from 'lit';
+import '../elevation/elevation.js';
+import './navigation-rail-headline.js';
+import './navigation-rail-item.js';
+/**
+ * Material 3 navigation rail — a responsive primary navigation surface that
+ * adapts to the viewport with two independently configurable destination
+ * sets:
+ *
+ * - **Mobile (< 840px)**: rail is hidden. `toggleDrawer` slides the
+ *   expanded rail in from the left as a **modal** over the content (with
+ *   scrim).
+ * - **Medium (840–1199px)**: a permanent 96dp **collapsed** sidebar shows
+ *   `slot="rail"` items. `toggleDrawer` slides the expanded rail in over
+ *   it as a **modal** (with scrim).
+ * - **Large (≥ 1200px)**: the expanded rail is permanent (no modal,
+ *   no scrim). `toggleDrawer` slides it back off the leading edge,
+ *   revealing the collapsed bar underneath.
+ *
+ * The expanded panel animates exactly like the side-navigation drawer:
+ * `inset-inline-start` transitions 375ms with the project's awesome cubic
+ * bezier easing.
+ *
+ * Slots:
+ *  - `rail`: primary destinations shown in the permanent collapsed bar
+ *    (`u-navigation-rail-item`s, no headlines).
+ *  - `expanded`: full destination list shown in the expanded panel —
+ *    `u-navigation-rail-item`s grouped by optional
+ *    `u-navigation-rail-headline`s.
+ *  - `top`: optional area pinned to the top of the rail (menu button,
+ *    brand mark, etc.).
+ *  - `bottom`: optional area pinned to the bottom of the rail (FAB,
+ *    secondary action, etc.).
+ *  - default: page content.
+ */
+export declare class NavigationRail extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Toggle the rail's secondary state:
+     *
+     * - On mobile/medium: slides the expanded rail in from the left as a
+     *   modal overlay (with scrim). Click on the scrim to close.
+     * - On large: slides the expanded rail off, revealing the collapsed
+     *   96dp bar underneath.
+     */
+    toggleDrawer: boolean;
+    private readonly assignedCollapsedItems;
+    private readonly assignedExpandedElements;
+    private readonly assignedTop;
+    private readonly assignedBottom;
+    private readonly railEl;
+    private readonly railExpandedEl;
+    private readonly railItemsEl;
+    private readonly railItemsExpandedEl;
+    private readonly railThumbEl;
+    private readonly railExpandedThumbEl;
+    render(): HTMLTemplateResult;
+    firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-navigation-rail': NavigationRail;
+    }
+}
+//# sourceMappingURL=navigation-rail.d.ts.map

package/navigation-rail/navigation-rail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.d.ts","sourceRoot":"","sources":["../../src/navigation-rail/navigation-rail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAM3D,OAAO,2BAA2B,CAAC;AACnC,OAAO,+BAA+B,CAAC;AACvC,OAAO,2BAA2B,CAAC;AAGnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,cAAe,SAAQ,UAAU;;IAC5C,OAAgB,MAAM,4BAAwB;IAE9C;;;;;;;OAOG;IACqE,YAAY,UAAS;IAG7F,OAAO,CAAC,QAAQ,CAAC,sBAAsB,CAAiB;IAGxD,OAAO,CAAC,QAAQ,CAAC,wBAAwB,CAAiB;IAG1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAiB;IAG7C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;IAEhC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAe;IAC7B,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAe;IACjD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAe;IACpD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,QAAQ,CAAC,mBAAmB,CAAe;IAEjF,MAAM,IAAI,kBAAkB;IA8B5B,YAAY,IAAI,IAAI;CAwG9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,cAAc,CAAC;KACrC;CACF"}