@lit-material/navigation 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 bohdaq
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,127 @@
+# @lit-material/navigation
+
+Material Design 3 navigation drawer and navigation rail web components built with
+[Lit](https://lit.dev/). Part of [lit-material](https://github.com/bohdaq/lit-material).
+
+![lit-material navigation drawer (standard, with a modal-drawer trigger button) and navigation rail, both showing their first destination selected](./screenshot.png)
+
+## Install
+
+```sh
+npm install @lit-material/navigation @lit-material/tokens
+```
+
+## Usage
+
+```html
+<link rel="stylesheet" href="node_modules/@lit-material/tokens/css/index.css" />
+<script type="module">
+  import "@lit-material/navigation";
+</script>
+
+<!-- Navigation drawer: a vertical panel of destinations. -->
+<lit-material-navigation-drawer selected="0">
+  <lit-material-navigation-drawer-item>
+    <svg slot="icon">…</svg>
+    Inbox
+  </lit-material-navigation-drawer-item>
+  <lit-material-navigation-drawer-item>
+    <svg slot="icon">…</svg>
+    Sent
+  </lit-material-navigation-drawer-item>
+</lit-material-navigation-drawer>
+
+<!-- Navigation rail: a narrow always-visible bar, typically docked to an edge. -->
+<lit-material-navigation-rail selected="0">
+  <lit-material-navigation-rail-item>
+    <svg slot="icon">…</svg>
+    Music
+  </lit-material-navigation-rail-item>
+  <lit-material-navigation-rail-item>
+    <svg slot="icon">…</svg>
+    Videos
+  </lit-material-navigation-rail-item>
+</lit-material-navigation-rail>
+```
+
+Listen for `change` to react to the selection:
+
+```js
+document.querySelector("lit-material-navigation-drawer").addEventListener("change", (event) => {
+  console.log(event.target.selected); // the selected index
+});
+```
+
+## API
+
+### `lit-material-navigation-drawer`
+
+| Property               | Attribute                | Type                    | Default      |
+| ----------------------- | ------------------------ | ------------------------ | ------------ |
+| `variant`               | `variant`                | `"standard" \| "modal"`  | `"standard"` |
+| `position`              | `position`                | `"start" \| "end"`       | `"start"`    |
+| `selected`              | `selected`                | `number`                  | `-1`         |
+| `open`                  | `open`                    | `boolean`                 | `false`      |
+| `disableBackdropClose`  | `disable-backdrop-close`  | `boolean`                 | `false`      |
+
+`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`](https://github.com/bohdaq/lit-material/tree/main/packages/dialog) uses),
+so the scrim, Escape-to-close, and focus trap all come from the browser; `position` picks which
+edge it slides in from. Call `show()`/`close()` (or set `.open`) to control a `modal` drawer.
+Fires `cancel`/`close`, re-dispatched from the native `<dialog>` events, for the `modal` variant.
+
+Slots: default (`lit-material-navigation-drawer-item` elements), `header` (a title, a close
+button…).
+
+### `lit-material-navigation-drawer-item`
+
+| Property   | Attribute  | Type      | Default |
+| ---------- | ---------- | --------- | ------- |
+| `selected` | `selected` | `boolean` | `false` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `href`     | `href`     | `string`  | `""`    |
+| `target`   | `target`   | `string`  | `""`    |
+
+Slots: default (label text), `icon` (leading icon), `badge` (a trailing count or dot).
+`selected` is normally managed by the parent drawer, not set directly.
+
+### `lit-material-navigation-rail`
+
+| Property    | Attribute   | Type                            | Default |
+| ------------ | ----------- | -------------------------------- | ------- |
+| `alignment`  | `alignment` | `"top" \| "center" \| "bottom"` | `"top"` |
+| `selected`   | `selected`  | `number`                         | `-1`    |
+
+Slots: default (`lit-material-navigation-rail-item` elements), `fab` (an optional FAB shown above
+the items).
+
+### `lit-material-navigation-rail-item`
+
+| Property   | Attribute  | Type      | Default |
+| ---------- | ---------- | --------- | ------- |
+| `selected` | `selected` | `boolean` | `false` |
+| `disabled` | `disabled` | `boolean` | `false` |
+| `href`     | `href`     | `string`  | `""`    |
+| `target`   | `target`   | `string`  | `""`    |
+
+Slots: default (label text, shown below the icon), `icon`, `badge` (positioned over the icon's
+top-right corner). The ripple/focus-ring are scoped to the icon's pill-shaped active indicator,
+not the whole item, matching the MD3 spec.
+
+## Behavior
+
+Both `lit-material-navigation-drawer` and `lit-material-navigation-rail` manage selection the
+same way `lit-material-tabs` does: set `selected` (an index) to reflect your current route or
+section, and each item's own `selected` is kept in sync automatically. Clicking an item updates
+`selected` and fires `change` — items don't manage selection themselves, so binding `selected` to
+your router state (rather than reading it back out) is the expected integration point for SPA
+navigation.
+
+Fully out of scope for this first pass: responsive breakpoint switching (automatically swapping
+between rail/drawer/bottom-navigation based on window size) — that's an app-level layout decision
+this library doesn't make on your behalf.
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { LitMaterialNavigationDrawer } from "./navigation-drawer.js";
+export type { NavigationDrawerVariant, NavigationDrawerPosition } from "./navigation-drawer.js";
+export { LitMaterialNavigationDrawerItem } from "./navigation-drawer-item.js";
+export { LitMaterialNavigationRail } from "./navigation-rail.js";
+export type { NavigationRailAlignment } from "./navigation-rail.js";
+export { LitMaterialNavigationRailItem } from "./navigation-rail-item.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AACrE,YAAY,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { LitMaterialNavigationDrawer } from "./navigation-drawer.js";
+export { LitMaterialNavigationDrawerItem } from "./navigation-drawer-item.js";
+export { LitMaterialNavigationRail } from "./navigation-rail.js";
+export { LitMaterialNavigationRailItem } from "./navigation-rail-item.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,2BAA2B,EAAE,MAAM,wBAAwB,CAAC;AAErE,OAAO,EAAE,+BAA+B,EAAE,MAAM,6BAA6B,CAAC;AAC9E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AAEjE,OAAO,EAAE,6BAA6B,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/navigation-drawer-item-styles.d.ts

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

package/dist/navigation-drawer-item-styles.d.ts.map

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

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

@@ -0,0 +1,108 @@
+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;
+    align-items: center;
+    gap: 12px;
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 56px;
+    padding-inline: 16px;
+    border: none;
+    border-radius: var(--md-sys-shape-corner-full, 28px);
+    margin: 0;
+    background-color: transparent;
+    color: var(--md-sys-color-on-surface-variant, #49454f);
+    cursor: pointer;
+    text-align: start;
+    text-decoration: none;
+    font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
+    font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
+    font-weight: var(--md-sys-typescale-label-large-weight, 500);
+    -webkit-appearance: none;
+    appearance: none;
+    transition: background-color 150ms var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .item:disabled,
+  .item[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  :host([selected]) .item {
+    background-color: var(--md-sys-color-secondary-container, #e8def8);
+    color: var(--md-sys-color-on-secondary-container, #1d192b);
+  }
+
+  .icon ::slotted(*) {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  .label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .badge ::slotted(*) {
+    display: block;
+  }
+
+  .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) {
+    .item,
+    .state-layer {
+      transition: none;
+    }
+  }
+`;
+//# sourceMappingURL=navigation-drawer-item-styles.js.map

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

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

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

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+/**
+ * A single destination inside a `lit-material-navigation-drawer` — a
+ * pill-shaped row with a leading icon and a label, following the MD3
+ * navigation drawer item spec.
+ *
+ * Renders as a real `<button>` by default, or an `<a>` when `href` is set —
+ * both get the same ripple/focus-ring treatment as `lit-material-list-item`.
+ * `selected` is normally managed by the parent drawer (see its docs), not
+ * set directly.
+ *
+ * @element lit-material-navigation-drawer-item
+ *
+ * @slot - The label text.
+ * @slot icon - The leading icon.
+ * @slot badge - Optional trailing content (a count or dot).
+ *
+ * @csspart item - The `<button>` or `<a>` row (background/shape).
+ * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
+ * @csspart focus-ring - The focus indicator element.
+ */
+export declare class LitMaterialNavigationDrawerItem 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-drawer-item": LitMaterialNavigationDrawerItem;
+    }
+}
+//# sourceMappingURL=navigation-drawer-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer-item.d.ts","sourceRoot":"","sources":["../src/navigation-drawer-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,+BAAgC,SAAQ,UAAU;IAC7D,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,GAQlB;IAEQ,MAAM;IAmCf,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;CAMxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qCAAqC,EAAE,+BAA+B,CAAC;KACxE;CACF"}

package/dist/navigation-drawer-item.js

@@ -0,0 +1,124 @@
+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-drawer-item-styles.js";
+/**
+ * A single destination inside a `lit-material-navigation-drawer` — a
+ * pill-shaped row with a leading icon and a label, following the MD3
+ * navigation drawer item spec.
+ *
+ * Renders as a real `<button>` by default, or an `<a>` when `href` is set —
+ * both get the same ripple/focus-ring treatment as `lit-material-list-item`.
+ * `selected` is normally managed by the parent drawer (see its docs), not
+ * set directly.
+ *
+ * @element lit-material-navigation-drawer-item
+ *
+ * @slot - The label text.
+ * @slot icon - The leading icon.
+ * @slot badge - Optional trailing content (a count or dot).
+ *
+ * @csspart item - The `<button>` or `<a>` row (background/shape).
+ * @csspart ripple - The state-layer element the hover/press feedback is drawn on.
+ * @csspart focus-ring - The focus indicator element.
+ */
+let LitMaterialNavigationDrawerItem = class LitMaterialNavigationDrawerItem 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 `
+      <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>
+      <span class="label"><slot></slot></span>
+      <slot name="badge" class="badge"></slot>
+    `;
+    }
+    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 })
+], LitMaterialNavigationDrawerItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialNavigationDrawerItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], LitMaterialNavigationDrawerItem.prototype, "href", void 0);
+__decorate([
+    property()
+], LitMaterialNavigationDrawerItem.prototype, "target", void 0);
+__decorate([
+    query(".state-layer")
+], LitMaterialNavigationDrawerItem.prototype, "stateLayerElement", void 0);
+LitMaterialNavigationDrawerItem = __decorate([
+    customElement("lit-material-navigation-drawer-item")
+], LitMaterialNavigationDrawerItem);
+export { LitMaterialNavigationDrawerItem };
+//# sourceMappingURL=navigation-drawer-item.js.map

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

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

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

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

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

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

package/dist/navigation-drawer-styles.js

@@ -0,0 +1,75 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: contents;
+  }
+
+  .drawer {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    gap: 4px;
+    width: 360px;
+    max-width: 100%;
+    height: 100%;
+    padding: 12px;
+    background-color: var(--md-sys-color-surface, #fffbfe);
+    color: var(--md-sys-color-on-surface, #1c1b1f);
+    /* Not part of the tab order for "modal" (see the component for why it's
+       the default showModal() focus target) — no visible focus indicator
+       of its own. */
+    outline: none;
+  }
+
+  .header {
+    padding: 16px 16px 8px;
+  }
+
+  .header:empty {
+    display: none;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    min-height: 0;
+    overflow-y: auto;
+  }
+
+  /* Modal variant: same .drawer content, wrapped in a native <dialog> so the
+     scrim, Escape-to-close, and focus trap all come from the browser. */
+  .dialog {
+    margin: 0;
+    padding: 0;
+    border: none;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    max-height: 100%;
+    background: transparent;
+    color: inherit;
+  }
+
+  .dialog[open] {
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  :host([position="end"]) .dialog[open] {
+    justify-content: flex-end;
+  }
+
+  .dialog::backdrop {
+    background-color: rgba(0, 0, 0, 0.32);
+  }
+
+  .dialog .drawer {
+    box-shadow: var(
+      --md-sys-elevation-level1,
+      0 1px 2px rgba(0, 0, 0, 0.3)
+    );
+  }
+`;
+//# sourceMappingURL=navigation-drawer-styles.js.map

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

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

package/dist/navigation-drawer.d.ts

@@ -0,0 +1,68 @@
+import { LitElement } from "lit";
+export type NavigationDrawerVariant = "standard" | "modal";
+export type NavigationDrawerPosition = "start" | "end";
+/**
+ * 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.
+ */
+export declare class LitMaterialNavigationDrawer extends LitElement {
+    static styles: import("lit").CSSResult;
+    variant: NavigationDrawerVariant;
+    position: NavigationDrawerPosition;
+    /** Index of the selected item. `-1` means no selection. */
+    selected: number;
+    /** Whether a `modal` drawer is open. Ignored for `standard`. */
+    open: boolean;
+    /** If set, clicking the backdrop does not close a `modal` drawer. */
+    disableBackdropClose: boolean;
+    private readonly dialogElement?;
+    private reopenOnClose;
+    constructor();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    /** Opens a `modal` drawer. Equivalent to setting `.open = true`. */
+    show(): void;
+    /** Closes a `modal` drawer. Equivalent to setting `.open = false`. */
+    close(): void;
+    private get items();
+    private syncSelected;
+    private readonly handleSlotChange;
+    private readonly handleClick;
+    private renderNav;
+    render(): import("lit").TemplateResult<1>;
+    private handleClose;
+    private handleCancel;
+    private handleBackdropClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-navigation-drawer": LitMaterialNavigationDrawer;
+    }
+}
+//# sourceMappingURL=navigation-drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-drawer.d.ts","sourceRoot":"","sources":["../src/navigation-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,OAAO,CAAC;AAC3D,MAAM,MAAM,wBAAwB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,2BAA4B,SAAQ,UAAU;IACzD,OAAgB,MAAM,0BAAU;IAEpB,OAAO,EAAE,uBAAuB,CAAc;IAC7B,QAAQ,EAAE,wBAAwB,CAAW;IAE1E,2DAA2D;IAC/B,QAAQ,SAAM;IAE1C,gEAAgE;IACpB,IAAI,UAAS;IAEzD,qEAAqE;IACH,oBAAoB,UAAS;IAE9E,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAoB;IACpE,OAAO,CAAC,aAAa,CAAS;;IAOrB,iBAAiB,IAAI,IAAI;cAKf,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAW/D,oEAAoE;IACpE,IAAI,IAAI,IAAI;IAIZ,sEAAsE;IACtE,KAAK,IAAI,IAAI;IAIb,OAAO,KAAK,KAAK,GAMhB;IAED,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAmC;IAEpE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAS1B;IAEF,OAAO,CAAC,SAAS;IAqBR,MAAM;IAgBf,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,mBAAmB;CAK5B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gCAAgC,EAAE,2BAA2B,CAAC;KAC/D;CACF"}