@lit-material/navigation 0.0.1 → 0.1.0

package/dist/adaptive-navigation.d.ts

@@ -0,0 +1,52 @@
+import { LitElement, type TemplateResult } from "lit";
+import "./navigation-drawer.js";
+import "./navigation-drawer-item.js";
+import "./navigation-rail.js";
+import "./navigation-rail-item.js";
+import "./navigation-bar.js";
+import "./navigation-bar-item.js";
+export interface NavigationDestination {
+    label: string;
+    /** An icon: an `svg`/`html` template, or text such as an emoji. */
+    icon?: TemplateResult | string;
+    href?: string;
+    disabled?: boolean;
+}
+/**
+ * One set of destinations shown as M3 prescribes for the window's width: a
+ * navigation bar on compact windows (under 600px), a rail on medium ones
+ * (600–839px), and a drawer — or a rail, with `expanded="rail"` — on
+ * expanded ones (840px and up).
+ *
+ * All three are rendered and CSS shows one, so it needs no script to pick
+ * and server-rendered markup is already right; the hidden ones are out of
+ * the accessibility tree. `selected` is shared, and `change` fires (with the
+ * new index in `selected`) whichever one was used.
+ *
+ * Place the bar yourself — e.g. the host fixed or sticky at the bottom on
+ * compact windows: it sits where the element is.
+ *
+ * @element lit-material-adaptive-navigation
+ *
+ * @fires change - The selection changed; read `selected`.
+ *
+ * @cssprop --lit-material-adaptive-navigation-medium - Not a variable: breakpoints are fixed at 600px and 840px (M3 window size classes).
+ */
+export declare class LitMaterialAdaptiveNavigation extends LitElement {
+    static styles: import("lit").CSSResult;
+    destinations: NavigationDestination[];
+    selected: number;
+    /** What expanded windows show: `drawer` (default) or `rail`. */
+    expanded: "drawer" | "rail";
+    /** The accessible name of the navigation landmark. */
+    label: string;
+    private onChange;
+    private icon;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "lit-material-adaptive-navigation": LitMaterialAdaptiveNavigation;
+    }
+}
+//# sourceMappingURL=adaptive-navigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"adaptive-navigation.d.ts","sourceRoot":"","sources":["../src/adaptive-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,UAAU,EAAW,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAE1E,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAElC,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BA8BpB;IAE8B,YAAY,EAAE,qBAAqB,EAAE,CAAM;IAE/C,QAAQ,SAAM;IAE1C,gEAAgE;IACnC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAAY;IAEpE,sDAAsD;IAC1C,KAAK,SAAU;IAE3B,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,IAAI;IAIH,MAAM;CAyBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kCAAkC,EAAE,6BAA6B,CAAC;KACnE;CACF"}

package/dist/adaptive-navigation.js

@@ -0,0 +1,129 @@
+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 { css, html, LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "./navigation-drawer.js";
+import "./navigation-drawer-item.js";
+import "./navigation-rail.js";
+import "./navigation-rail-item.js";
+import "./navigation-bar.js";
+import "./navigation-bar-item.js";
+/**
+ * One set of destinations shown as M3 prescribes for the window's width: a
+ * navigation bar on compact windows (under 600px), a rail on medium ones
+ * (600–839px), and a drawer — or a rail, with `expanded="rail"` — on
+ * expanded ones (840px and up).
+ *
+ * All three are rendered and CSS shows one, so it needs no script to pick
+ * and server-rendered markup is already right; the hidden ones are out of
+ * the accessibility tree. `selected` is shared, and `change` fires (with the
+ * new index in `selected`) whichever one was used.
+ *
+ * Place the bar yourself — e.g. the host fixed or sticky at the bottom on
+ * compact windows: it sits where the element is.
+ *
+ * @element lit-material-adaptive-navigation
+ *
+ * @fires change - The selection changed; read `selected`.
+ *
+ * @cssprop --lit-material-adaptive-navigation-medium - Not a variable: breakpoints are fixed at 600px and 840px (M3 window size classes).
+ */
+let LitMaterialAdaptiveNavigation = class LitMaterialAdaptiveNavigation extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.destinations = [];
+        this.selected = -1;
+        /** What expanded windows show: `drawer` (default) or `rail`. */
+        this.expanded = "drawer";
+        /** The accessible name of the navigation landmark. */
+        this.label = "Main";
+    }
+    static { this.styles = css `
+    :host {
+      display: block;
+    }
+    .bar,
+    .rail,
+    .drawer {
+      display: none;
+    }
+    @media (max-width: 599.98px) {
+      .bar { display: block; }
+    }
+    @media (min-width: 600px) and (max-width: 839.98px) {
+      .rail { display: block; height: 100%; }
+    }
+    @media (min-width: 840px) {
+      :host(:not([expanded="rail"])) .drawer { display: block; height: 100%; }
+      :host([expanded="rail"]) .rail { display: block; height: 100%; }
+    }
+    [slot="icon"] {
+      display: inline-flex;
+      width: 24px;
+      height: 24px;
+      align-items: center;
+      justify-content: center;
+    }
+    [slot="icon"] svg {
+      width: 100%;
+      height: 100%;
+    }
+  `; }
+    onChange(event) {
+        event.stopPropagation();
+        const selected = event.target.selected;
+        if (selected === this.selected)
+            return;
+        this.selected = selected;
+        this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+    icon(d) {
+        return d.icon === undefined ? nothing : html `<span slot="icon" aria-hidden="true">${d.icon}</span>`;
+    }
+    render() {
+        const ds = this.destinations;
+        return html `
+      <nav aria-label=${this.label}>
+        <div class="drawer">
+          <lit-material-navigation-drawer .selected=${this.selected} @change=${this.onChange}>
+            ${ds.map((d, i) => html `<lit-material-navigation-drawer-item ?selected=${i === this.selected} ?disabled=${!!d.disabled} href=${d.href ?? nothing}
+              >${this.icon(d)}${d.label}</lit-material-navigation-drawer-item>`)}
+          </lit-material-navigation-drawer>
+        </div>
+        <div class="rail">
+          <lit-material-navigation-rail .selected=${this.selected} @change=${this.onChange}>
+            ${ds.map((d, i) => html `<lit-material-navigation-rail-item ?selected=${i === this.selected} ?disabled=${!!d.disabled} href=${d.href ?? nothing}
+              >${this.icon(d)}${d.label}</lit-material-navigation-rail-item>`)}
+          </lit-material-navigation-rail>
+        </div>
+        <div class="bar">
+          <lit-material-navigation-bar .selected=${this.selected} @change=${this.onChange}>
+            ${ds.map((d, i) => html `<lit-material-navigation-bar-item ?selected=${i === this.selected} ?disabled=${!!d.disabled} href=${d.href ?? nothing}
+              >${this.icon(d)}${d.label}</lit-material-navigation-bar-item>`)}
+          </lit-material-navigation-bar>
+        </div>
+      </nav>
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], LitMaterialAdaptiveNavigation.prototype, "destinations", void 0);
+__decorate([
+    property({ type: Number })
+], LitMaterialAdaptiveNavigation.prototype, "selected", void 0);
+__decorate([
+    property({ reflect: true })
+], LitMaterialAdaptiveNavigation.prototype, "expanded", void 0);
+__decorate([
+    property()
+], LitMaterialAdaptiveNavigation.prototype, "label", void 0);
+LitMaterialAdaptiveNavigation = __decorate([
+    customElement("lit-material-adaptive-navigation")
+], LitMaterialAdaptiveNavigation);
+export { LitMaterialAdaptiveNavigation };
+//# sourceMappingURL=adaptive-navigation.js.map

package/dist/adaptive-navigation.js.map

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

package/dist/index.d.ts

@@ -4,4 +4,8 @@ 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";
+export { LitMaterialNavigationBar } from "./navigation-bar.js";
+export { LitMaterialNavigationBarItem } from "./navigation-bar-item.js";
+export { LitMaterialAdaptiveNavigation } from "./adaptive-navigation.js";
+export type { NavigationDestination } from "./adaptive-navigation.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +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"}
+{"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;AAC1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/index.js

@@ -2,4 +2,7 @@ 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";
+export { LitMaterialNavigationBar } from "./navigation-bar.js";
+export { LitMaterialNavigationBarItem } from "./navigation-bar-item.js";
+export { LitMaterialAdaptiveNavigation } from "./adaptive-navigation.js";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"}
+{"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;AAC1E,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,4BAA4B,EAAE,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,6BAA6B,EAAE,MAAM,0BAA0B,CAAC"}

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

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

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

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

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

@@ -0,0 +1,125 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    flex: 1;
+    height: 100%;
+    outline: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding-block: 12px 16px;
+    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: 64px;
+    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);
+  }
+
+  slot.icon::slotted(*) {
+    display: block;
+    width: 24px;
+    height: 24px;
+  }
+
+  slot.badge::slotted(*) {
+    position: absolute;
+    top: -4px;
+    inset-inline-end: 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-bar-item-styles.js.map

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

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

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

@@ -0,0 +1,50 @@
+import { LitElement } from "lit";
+/**
+ * A single destination inside a `lit-material-navigation-bar` — an icon in a
+ * pill-shaped active indicator, with a small label below it, following the
+ * MD3 navigation bar item spec. Visually and structurally almost identical
+ * to `lit-material-navigation-rail-item` (same icon-pill + label-below
+ * layout, badge slot, ripple/focus-ring scoped to the indicator) — the
+ * difference is this item shares the bar's width equally with its siblings
+ * (`flex: 1`) instead of filling a narrow vertical rail's width, and its
+ * indicator is 64px wide (the MD3 bar spec) rather than the rail's 56px.
+ *
+ * Renders as a real `<button>` by default, or an `<a>` when `href` is set.
+ * `selected` is normally managed by the parent bar (see its docs), not set
+ * directly.
+ *
+ * @element lit-material-navigation-bar-item
+ *
+ * @slot - The label text.
+ * @slot icon - The icon.
+ * @slot badge - Optional badge content (a count or dot), positioned over the icon's top-end corner
+ *   (top-right in LTR, top-left in RTL).
+ *
+ * @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 LitMaterialNavigationBarItem 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-bar-item": LitMaterialNavigationBarItem;
+    }
+}
+//# sourceMappingURL=navigation-bar-item.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar-item.d.ts","sourceRoot":"","sources":["../src/navigation-bar-item.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,4BAA6B,SAAQ,UAAU;IAC1D,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,kCAAkC,EAAE,4BAA4B,CAAC;KAClE;CACF"}

package/dist/navigation-bar-item.js

@@ -0,0 +1,132 @@
+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-bar-item-styles.js";
+/**
+ * A single destination inside a `lit-material-navigation-bar` — an icon in a
+ * pill-shaped active indicator, with a small label below it, following the
+ * MD3 navigation bar item spec. Visually and structurally almost identical
+ * to `lit-material-navigation-rail-item` (same icon-pill + label-below
+ * layout, badge slot, ripple/focus-ring scoped to the indicator) — the
+ * difference is this item shares the bar's width equally with its siblings
+ * (`flex: 1`) instead of filling a narrow vertical rail's width, and its
+ * indicator is 64px wide (the MD3 bar spec) rather than the rail's 56px.
+ *
+ * Renders as a real `<button>` by default, or an `<a>` when `href` is set.
+ * `selected` is normally managed by the parent bar (see its docs), not set
+ * directly.
+ *
+ * @element lit-material-navigation-bar-item
+ *
+ * @slot - The label text.
+ * @slot icon - The icon.
+ * @slot badge - Optional badge content (a count or dot), positioned over the icon's top-end corner
+ *   (top-right in LTR, top-left in RTL).
+ *
+ * @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 LitMaterialNavigationBarItem = class LitMaterialNavigationBarItem 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 })
+], LitMaterialNavigationBarItem.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LitMaterialNavigationBarItem.prototype, "disabled", void 0);
+__decorate([
+    property()
+], LitMaterialNavigationBarItem.prototype, "href", void 0);
+__decorate([
+    property()
+], LitMaterialNavigationBarItem.prototype, "target", void 0);
+__decorate([
+    query(".state-layer")
+], LitMaterialNavigationBarItem.prototype, "stateLayerElement", void 0);
+LitMaterialNavigationBarItem = __decorate([
+    customElement("lit-material-navigation-bar-item")
+], LitMaterialNavigationBarItem);
+export { LitMaterialNavigationBarItem };
+//# sourceMappingURL=navigation-bar-item.js.map

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

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

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

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

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

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

package/dist/navigation-bar-styles.js

@@ -0,0 +1,23 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .bar {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    box-sizing: border-box;
+    width: 100%;
+    height: 80px;
+    background-color: var(--md-sys-color-surface-container, #f3edf7);
+    color: var(--md-sys-color-on-surface, #1c1b1f);
+  }
+
+  ::slotted(lit-material-navigation-bar-item) {
+    flex: 1;
+  }
+`;
+//# sourceMappingURL=navigation-bar-styles.js.map

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

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

package/dist/navigation-bar.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from "lit";
+/**
+ * Material Design 3 navigation bar — a row of primary destinations
+ * (`lit-material-navigation-bar-item` elements) sharing a bar's width
+ * equally, typically docked to the bottom of the screen for compact window
+ * sizes.
+ *
+ * Selection is index-based and managed here (like `lit-material-tabs` and
+ * `lit-material-navigation-rail`): 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.
+ *
+ * Unlike `lit-material-navigation-rail`, there's no `alignment` property or
+ * `fab` slot — a bottom bar is a single row of equally-shared destinations,
+ * not a strip with room to position things along its length.
+ *
+ * @element lit-material-navigation-bar
+ *
+ * @slot - `lit-material-navigation-bar-item` elements.
+ *
+ * @csspart bar - The bar (background, height, padding).
+ *
+ * @fires change - Fires when `selected` changes via an item click.
+ */
+export declare class LitMaterialNavigationBar extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** 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-bar": LitMaterialNavigationBar;
+    }
+}
+//# sourceMappingURL=navigation-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.d.ts","sourceRoot":"","sources":["../src/navigation-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IACtD,OAAgB,MAAM,0BAAU;IAEhC,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;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,6BAA6B,EAAE,wBAAwB,CAAC;KACzD;CACF"}