@lit-material/navigation 0.0.1

package/dist/navigation-drawer.js

@@ -0,0 +1,187 @@
+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, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { styles } from "./navigation-drawer-styles.js";
+/**
+ * Material Design 3 navigation drawer — a vertical panel of primary
+ * destinations (`lit-material-navigation-drawer-item` elements).
+ *
+ * `standard` renders as a plain, always-in-flow `<nav>` (a persistent side
+ * panel you place in your own layout). `modal` wraps the same content in a
+ * native `<dialog>`, the same foundation `lit-material-dialog` uses — so the
+ * scrim, Escape-to-close, and focus trap all come from the browser. `position`
+ * picks which edge a `modal` drawer slides in from.
+ *
+ * Selection is index-based and managed here (like `lit-material-tabs`): set
+ * `selected` to reflect your current route/section, and each item's own
+ * `selected` is kept in sync automatically. Clicking an item updates
+ * `selected` and fires `change` — items themselves don't manage selection.
+ *
+ * @element lit-material-navigation-drawer
+ *
+ * @slot - `lit-material-navigation-drawer-item` elements.
+ * @slot header - Optional header content (a title, a close button…).
+ *
+ * @csspart dialog - The native `<dialog>` element. Only rendered for `modal`.
+ * @csspart drawer - The visible panel (background, width, padding).
+ * @csspart header - The header slot's container.
+ * @csspart content - The items slot's container.
+ *
+ * @fires change - Fires when `selected` changes via an item click.
+ * @fires cancel - `modal` only: re-dispatched from the native `cancel` event.
+ *   Cancelable: calling `preventDefault()` stops the drawer from closing.
+ * @fires close - `modal` only: re-dispatched from the native `close` event.
+ */
+let LitMaterialNavigationDrawer = class LitMaterialNavigationDrawer extends LitElement {
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        this.variant = "standard";
+        this.position = "start";
+        /** Index of the selected item. `-1` means no selection. */
+        this.selected = -1;
+        /** Whether a `modal` drawer is open. Ignored for `standard`. */
+        this.open = false;
+        /** If set, clicking the backdrop does not close a `modal` drawer. */
+        this.disableBackdropClose = false;
+        this.reopenOnClose = false;
+        this.handleSlotChange = () => this.syncSelected();
+        this.handleClick = (event) => {
+            const path = event.composedPath();
+            const items = this.items;
+            const item = items.find((candidate) => path.includes(candidate));
+            if (!item || item.disabled)
+                return;
+            const index = items.indexOf(item);
+            const isChange = index !== this.selected;
+            this.selected = index;
+            if (isChange)
+                this.dispatchEvent(new Event("change", { bubbles: true }));
+        };
+        this.addEventListener("click", this.handleClick);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.syncSelected();
+    }
+    updated(changed) {
+        if (changed.has("selected"))
+            this.syncSelected();
+        if (changed.has("open") && this.variant === "modal" && this.dialogElement) {
+            if (this.open && !this.dialogElement.open) {
+                this.dialogElement.showModal();
+            }
+            else if (!this.open && this.dialogElement.open) {
+                this.dialogElement.close();
+            }
+        }
+    }
+    /** Opens a `modal` drawer. Equivalent to setting `.open = true`. */
+    show() {
+        this.open = true;
+    }
+    /** Closes a `modal` drawer. Equivalent to setting `.open = false`. */
+    close() {
+        this.open = false;
+    }
+    get items() {
+        // @lit-labs/ssr's light-DOM shim doesn't implement querySelectorAll on
+        // the host during connectedCallback — degrade to no items rather than
+        // throwing.
+        if (typeof this.querySelectorAll !== "function")
+            return [];
+        return Array.from(this.querySelectorAll("lit-material-navigation-drawer-item"));
+    }
+    syncSelected() {
+        this.items.forEach((item, index) => {
+            item.selected = index === this.selected;
+        });
+    }
+    renderNav() {
+        // For `modal`, showModal() auto-focuses the first focusable descendant
+        // when nothing has autofocus — without this, that's the first item's
+        // button, showing its focus ring on every open even though the user
+        // never interacted with it (same fix as lit-material-dialog's
+        // `container`). Harmless to skip for `standard`, since it's never the
+        // target of showModal() in the first place.
+        const isModal = this.variant === "modal";
+        return html `
+      <nav
+        class="drawer ${this.variant}"
+        part="drawer"
+        tabindex=${isModal ? "-1" : nothing}
+        ?autofocus=${isModal}
+      >
+        <div class="header" part="header"><slot name="header"></slot></div>
+        <div class="content" part="content"><slot @slotchange=${this.handleSlotChange}></slot></div>
+      </nav>
+    `;
+    }
+    render() {
+        if (this.variant !== "modal")
+            return this.renderNav();
+        return html `
+      <dialog
+        class="dialog"
+        part="dialog"
+        @close=${this.handleClose}
+        @cancel=${this.handleCancel}
+        @click=${this.handleBackdropClick}
+      >
+        ${this.renderNav()}
+      </dialog>
+    `;
+    }
+    handleClose() {
+        if (this.reopenOnClose) {
+            // Some browsers don't honor preventDefault() on the native `cancel`
+            // event despite documenting it as cancelable — see lit-material-dialog
+            // for the same workaround.
+            this.reopenOnClose = false;
+            this.dialogElement?.showModal();
+            return;
+        }
+        this.open = false;
+        this.dispatchEvent(new Event("close", { bubbles: true, composed: true }));
+    }
+    handleCancel(event) {
+        const proceed = this.dispatchEvent(new Event("cancel", { bubbles: true, cancelable: true, composed: true }));
+        if (!proceed) {
+            event.preventDefault();
+            this.reopenOnClose = true;
+        }
+    }
+    handleBackdropClick(event) {
+        if (!this.disableBackdropClose && event.target === this.dialogElement) {
+            this.dialogElement?.close();
+        }
+    }
+};
+__decorate([
+    property()
+], LitMaterialNavigationDrawer.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], LitMaterialNavigationDrawer.prototype, "position", void 0);
+__decorate([
+    property({ type: Number })
+], LitMaterialNavigationDrawer.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialNavigationDrawer.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "disable-backdrop-close" })
+], LitMaterialNavigationDrawer.prototype, "disableBackdropClose", void 0);
+__decorate([
+    query("dialog")
+], LitMaterialNavigationDrawer.prototype, "dialogElement", void 0);
+LitMaterialNavigationDrawer = __decorate([
+    customElement("lit-material-navigation-drawer")
+], LitMaterialNavigationDrawer);
+export { LitMaterialNavigationDrawer };
+//# sourceMappingURL=navigation-drawer.js.map

package/dist/navigation-drawer.js.map

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

package/dist/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/dist/navigation-rail-item-styles.d.ts.map

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

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

@@ -0,0 +1,122 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 56px;
+    padding-block: 4px;
+    border: none;
+    margin: 0;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    cursor: pointer;
+    text-decoration: none;
+    font-family: var(--md-sys-typescale-label-medium-font, Roboto, system-ui, sans-serif);
+    font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
+    font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .item:disabled,
+  .item[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  :host([selected]) .item {
+    color: var(--md-sys-color-on-surface, #1c1b1f);
+  }
+
+  .icon-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 32px;
+    border-radius: var(--md-sys-shape-corner-full, 16px);
+    transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  :host([selected]) .icon-container {
+    background-color: var(--md-sys-color-secondary-container, #e8def8);
+  }
+
+  .icon ::slotted(*) {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  .badge ::slotted(*) {
+    position: absolute;
+    top: -4px;
+    right: 8px;
+  }
+
+  .label {
+    max-width: 100%;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .state-layer {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background-color: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 100ms linear;
+  }
+
+  .item:hover .state-layer {
+    opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);
+  }
+
+  .state-layer[data-pressed] {
+    opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.1);
+  }
+
+  .focus-ring {
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
+    outline: 3px solid var(--md-sys-color-secondary, #625b71);
+    outline-offset: 2px;
+    pointer-events: none;
+  }
+
+  .focus-ring[hidden] {
+    display: none;
+  }
+
+  :host([disabled]) .item {
+    color: color-mix(in srgb, var(--md-sys-color-on-surface, #1c1b1f) 38%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .icon-container,
+    .state-layer {
+      transition: none;
+    }
+  }
+`;
+//# sourceMappingURL=navigation-rail-item-styles.js.map

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

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

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

@@ -0,0 +1,46 @@
+import { LitElement } from "lit";
+/**
+ * A single destination inside a `lit-material-navigation-rail` — an icon in
+ * a pill-shaped active indicator, with a small label below it, following
+ * the MD3 navigation rail item spec.
+ *
+ * Renders as a real `<button>` by default, or an `<a>` when `href` is set.
+ * The ripple/focus-ring are scoped to the icon's indicator pill (not the
+ * whole item), matching how the indicator itself is the only part that
+ * visibly reacts to press/focus in the spec. `selected` is normally managed
+ * by the parent rail (see its docs), not set directly.
+ *
+ * @element lit-material-navigation-rail-item
+ *
+ * @slot - The label text.
+ * @slot icon - The icon.
+ * @slot badge - Optional badge content (a count or dot), positioned over the icon's top-right corner.
+ *
+ * @csspart item - The `<button>` or `<a>` (layout only, no background of its own).
+ * @csspart icon-container - The pill-shaped active indicator behind the icon.
+ * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
+ * @csspart focus-ring - The focus indicator element.
+ */
+export declare class LitMaterialNavigationRailItem extends LitElement {
+    static styles: import("lit").CSSResult;
+    static shadowRootOptions: ShadowRootInit;
+    selected: boolean;
+    disabled: boolean;
+    /** If set, renders the item as a link (`<a>`) instead of a `<button>`. */
+    href: string;
+    target: string;
+    private readonly stateLayerElement?;
+    private readonly ripple;
+    private readonly focusRing;
+    protected updated(): void;
+    private get content();
+    render(): import("lit").TemplateResult<1>;
+    private handleClick;
+    private handleLinkClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-navigation-rail-item": LitMaterialNavigationRailItem;
+    }
+}
+//# sourceMappingURL=navigation-rail-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail-item.d.ts","sourceRoot":"","sources":["../src/navigation-rail-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAU;IAEhC,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAE0C,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAE7D,0EAA0E;IAC9D,IAAI,SAAM;IACV,MAAM,SAAM;IAED,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAC,CAAc;IAExE,OAAO,CAAC,QAAQ,CAAC,MAAM,CAA8B;IACrD,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAiC;cAExC,OAAO,IAAI,IAAI;IAIlC,OAAO,KAAK,OAAO,GAUlB;IAEQ,MAAM;IAmCf,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;CAMxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mCAAmC,EAAE,6BAA6B,CAAC;KACpE;CACF"}

package/dist/navigation-rail-item.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, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+import { FocusRingController, RippleController } from "@lit-material/core";
+import { styles } from "./navigation-rail-item-styles.js";
+/**
+ * A single destination inside a `lit-material-navigation-rail` — an icon in
+ * a pill-shaped active indicator, with a small label below it, following
+ * the MD3 navigation rail item spec.
+ *
+ * Renders as a real `<button>` by default, or an `<a>` when `href` is set.
+ * The ripple/focus-ring are scoped to the icon's indicator pill (not the
+ * whole item), matching how the indicator itself is the only part that
+ * visibly reacts to press/focus in the spec. `selected` is normally managed
+ * by the parent rail (see its docs), not set directly.
+ *
+ * @element lit-material-navigation-rail-item
+ *
+ * @slot - The label text.
+ * @slot icon - The icon.
+ * @slot badge - Optional badge content (a count or dot), positioned over the icon's top-right corner.
+ *
+ * @csspart item - The `<button>` or `<a>` (layout only, no background of its own).
+ * @csspart icon-container - The pill-shaped active indicator behind the icon.
+ * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
+ * @csspart focus-ring - The focus indicator element.
+ */
+let LitMaterialNavigationRailItem = class LitMaterialNavigationRailItem extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.selected = false;
+        this.disabled = false;
+        /** If set, renders the item as a link (`<a>`) instead of a `<button>`. */
+        this.href = "";
+        this.target = "";
+        this.ripple = new RippleController(this);
+        this.focusRing = new FocusRingController(this);
+    }
+    static { this.styles = styles; }
+    static { this.shadowRootOptions = {
+        ...LitElement.shadowRootOptions,
+        delegatesFocus: true,
+    }; }
+    updated() {
+        if (this.stateLayerElement)
+            this.ripple.attach(this.stateLayerElement);
+    }
+    get content() {
+        return html `
+      <span class="icon-container" part="icon-container">
+        <div class="focus-ring" part="focus-ring" ?hidden=${!this.focusRing.visible}></div>
+        <div class="state-layer" part="ripple"></div>
+        <slot name="icon" class="icon"></slot>
+        <slot name="badge" class="badge"></slot>
+      </span>
+      <span class="label"><slot></slot></span>
+    `;
+    }
+    render() {
+        const ariaCurrent = this.selected ? "page" : nothing;
+        if (this.href) {
+            return html `
+        <a
+          class="item"
+          part="item"
+          href=${this.disabled ? nothing : this.href}
+          target=${this.target || nothing}
+          rel=${this.target === "_blank" ? "noopener noreferrer" : nothing}
+          aria-current=${ariaCurrent}
+          aria-disabled=${this.disabled ? "true" : nothing}
+          tabindex=${this.disabled ? "-1" : "0"}
+          @click=${this.handleLinkClick}
+        >
+          ${this.content}
+        </a>
+      `;
+        }
+        return html `
+      <button
+        class="item"
+        part="item"
+        type="button"
+        ?disabled=${this.disabled}
+        aria-current=${ariaCurrent}
+        @click=${this.handleClick}
+      >
+        ${this.content}
+      </button>
+    `;
+    }
+    handleClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    handleLinkClick(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialNavigationRailItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialNavigationRailItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], LitMaterialNavigationRailItem.prototype, "href", void 0);
+__decorate([
+    property()
+], LitMaterialNavigationRailItem.prototype, "target", void 0);
+__decorate([
+    query(".state-layer")
+], LitMaterialNavigationRailItem.prototype, "stateLayerElement", void 0);
+LitMaterialNavigationRailItem = __decorate([
+    customElement("lit-material-navigation-rail-item")
+], LitMaterialNavigationRailItem);
+export { LitMaterialNavigationRailItem };
+//# sourceMappingURL=navigation-rail-item.js.map

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

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

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

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

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

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

package/dist/navigation-rail-styles.js

@@ -0,0 +1,51 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+    width: 80px;
+    height: 100%;
+    padding-block: 12px;
+    background-color: var(--md-sys-color-surface, #fffbfe);
+    color: var(--md-sys-color-on-surface, #1c1b1f);
+  }
+
+  .fab {
+    flex: none;
+    margin-block-end: 12px;
+  }
+
+  .fab:empty {
+    display: none;
+  }
+
+  .items {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: 4px;
+    width: 100%;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  .items.top {
+    justify-content: flex-start;
+  }
+
+  .items.center {
+    justify-content: center;
+  }
+
+  .items.bottom {
+    justify-content: flex-end;
+  }
+`;
+//# sourceMappingURL=navigation-rail-styles.js.map

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

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

package/dist/navigation-rail.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+export type NavigationRailAlignment = "top" | "center" | "bottom";
+/**
+ * Material Design 3 navigation rail — a narrow, always-visible vertical bar
+ * of primary destinations (`lit-material-navigation-rail-item` elements),
+ * typically docked to one edge for medium/large window sizes.
+ *
+ * Selection is index-based and managed here (like `lit-material-tabs`): set
+ * `selected` to reflect your current route/section, and each item's own
+ * `selected` is kept in sync automatically. Clicking an item updates
+ * `selected` and fires `change` — items themselves don't manage selection.
+ *
+ * @element lit-material-navigation-rail
+ *
+ * @slot - `lit-material-navigation-rail-item` elements.
+ * @slot fab - An optional FAB shown above the items.
+ *
+ * @csspart rail - The bar (background, width, padding).
+ * @csspart fab - The fab slot's container.
+ * @csspart items - The items slot's container.
+ *
+ * @fires change - Fires when `selected` changes via an item click.
+ */
+export declare class LitMaterialNavigationRail extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Where the item group sits within the rail's height. */
+    alignment: NavigationRailAlignment;
+    /** Index of the selected item. `-1` means no selection. */
+    selected: number;
+    constructor();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private get items();
+    private syncSelected;
+    private readonly handleSlotChange;
+    private readonly handleClick;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-navigation-rail": LitMaterialNavigationRail;
+    }
+}
+//# sourceMappingURL=navigation-rail.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.d.ts","sourceRoot":"","sources":["../src/navigation-rail.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,MAAM,MAAM,uBAAuB,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,yBAA0B,SAAQ,UAAU;IACvD,OAAgB,MAAM,0BAAU;IAEhC,0DAA0D;IAC9C,SAAS,EAAE,uBAAuB,CAAS;IAEvD,2DAA2D;IAC/B,QAAQ,SAAM;;IAOjC,iBAAiB,IAAI,IAAI;cAKf,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAI/D,OAAO,KAAK,KAAK,GAGhB;IAED,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAmC;IAEpE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAS1B;IAEO,MAAM;CAUhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,8BAA8B,EAAE,yBAAyB,CAAC;KAC3D;CACF"}