@lit-material/navigation 0.0.1 → 0.1.0

package/dist/navigation-bar.js

@@ -0,0 +1,88 @@
+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 } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./navigation-bar-styles.js";
+/**
+ * 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.
+ */
+let LitMaterialNavigationBar = class LitMaterialNavigationBar extends LitElement {
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        /** Index of the selected item. `-1` means no selection. */
+        this.selected = -1;
+        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();
+    }
+    get items() {
+        if (typeof this.querySelectorAll !== "function")
+            return [];
+        return Array.from(this.querySelectorAll("lit-material-navigation-bar-item"));
+    }
+    syncSelected() {
+        this.items.forEach((item, index) => {
+            item.selected = index === this.selected;
+        });
+    }
+    render() {
+        return html `
+      <div class="bar" part="bar">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Number })
+], LitMaterialNavigationBar.prototype, "selected", void 0);
+LitMaterialNavigationBar = __decorate([
+    customElement("lit-material-navigation-bar")
+], LitMaterialNavigationBar);
+export { LitMaterialNavigationBar };
+//# sourceMappingURL=navigation-bar.js.map

package/dist/navigation-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-bar.js","sourceRoot":"","sources":["../src/navigation-bar.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEI,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,UAAU;aACtC,WAAM,GAAG,MAAM,AAAT,CAAU;IAKhC;QACE,KAAK,EAAE,CAAC;QAJV,2DAA2D;QAC/B,aAAQ,GAAG,CAAC,CAAC,CAAC;QA2BzB,qBAAgB,GAAG,GAAS,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;QAEnD,gBAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACzD,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACzB,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC;YACjE,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YACnC,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAClC,MAAM,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,QAAQ;gBAAE,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAC3E,CAAC,CAAC;QAlCA,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IACnD,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAEkB,OAAO,CAAC,OAA6B;QACtD,IAAI,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;YAAE,IAAI,CAAC,YAAY,EAAE,CAAC;IACnD,CAAC;IAED,IAAY,KAAK;QACf,IAAI,OAAO,IAAI,CAAC,gBAAgB,KAAK,UAAU;YAAE,OAAO,EAAE,CAAC;QAC3D,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,kCAAkC,CAAC,CAAC,CAAC;IAC/E,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACjC,IAAI,CAAC,QAAQ,GAAG,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAeQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;;AA9C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DAAe;AAJ/B,wBAAwB;IADpC,aAAa,CAAC,6BAA6B,CAAC;GAChC,wBAAwB,CAmDpC"}

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

@@ -45,7 +45,7 @@ export const styles = css `
     color: var(--md-sys-color-on-secondary-container, #1d192b);
   }
 
-  .icon ::slotted(*) {
+  slot.icon::slotted(*) {
     display: block;
     width: 24px;
     height: 24px;
@@ -59,7 +59,7 @@ export const styles = css `
     white-space: nowrap;
   }
 
-  .badge ::slotted(*) {
+  slot.badge::slotted(*) {
     display: block;
   }
 

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

@@ -57,16 +57,16 @@ export const styles = css `
     background-color: var(--md-sys-color-secondary-container, #e8def8);
   }
 
-  .icon ::slotted(*) {
+  slot.icon::slotted(*) {
     display: block;
     width: 24px;
     height: 24px;
   }
 
-  .badge ::slotted(*) {
+  slot.badge::slotted(*) {
     position: absolute;
     top: -4px;
-    right: 8px;
+    inset-inline-end: 8px;
   }
 
   .label {

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

@@ -14,7 +14,8 @@ import { LitElement } from "lit";
  *
  * @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.
+ * @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.

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;;;;;;GAsBG;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

@@ -23,7 +23,8 @@ import { styles } from "./navigation-rail-item-styles.js";
  *
  * @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.
+ * @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.

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

@@ -1 +1 @@
-{"version":3,"file":"navigation-rail-item.js","sourceRoot":"","sources":["../src/navigation-rail-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAE1D;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEI,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,UAAU;IAAtD;;QAQuC,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QAE7D,0EAA0E;QAC9D,SAAI,GAAG,EAAE,CAAC;QACV,WAAM,GAAG,EAAE,CAAC;QAIP,WAAM,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACpC,cAAS,GAAG,IAAI,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAkE7D,CAAC;aAnFiB,WAAM,GAAG,MAAM,AAAT,CAAU;aAEhB,sBAAiB,GAAmB;QAClD,GAAG,UAAU,CAAC,iBAAiB;QAC/B,cAAc,EAAE,IAAI;KACrB,AAHgC,CAG/B;IAciB,OAAO;QACxB,IAAI,IAAI,CAAC,iBAAiB;YAAE,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;IACzE,CAAC;IAED,IAAY,OAAO;QACjB,OAAO,IAAI,CAAA;;4DAE6C,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO;;;;;;KAM9E,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAErD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,IAAI,CAAA;;;;iBAIA,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI;mBACjC,IAAI,CAAC,MAAM,IAAI,OAAO;gBACzB,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,OAAO;yBACjD,WAAW;0BACV,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;qBACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;mBAC5B,IAAI,CAAC,eAAe;;YAE3B,IAAI,CAAC,OAAO;;OAEjB,CAAC;QACJ,CAAC;QAED,OAAO,IAAI,CAAA;;;;;oBAKK,IAAI,CAAC,QAAQ;uBACV,WAAW;iBACjB,IAAI,CAAC,WAAW;;UAEvB,IAAI,CAAC,OAAO;;KAEjB,CAAC;IACJ,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;;AA3E2C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+DAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+DAAkB;AAGjD;IAAX,QAAQ,EAAE;2DAAW;AACV;IAAX,QAAQ,EAAE;6DAAa;AAEgB;IAAvC,KAAK,CAAC,cAAc,CAAC;wEAAkD;AAf7D,6BAA6B;IADzC,aAAa,CAAC,mCAAmC,CAAC;GACtC,6BAA6B,CAoFzC"}
+{"version":3,"file":"navigation-rail-item.js","sourceRoot":"","sources":["../src/navigation-rail-item.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lit-material/navigation",
-  "version": "0.0.1",
-  "description": "Material Design 3 navigation drawer and navigation rail web components.",
+  "version": "0.1.0",
+  "description": "Material Design 3 navigation drawer, navigation rail, and navigation bar web components.",
   "license": "MIT",
   "author": {
     "name": "bohdaq",
@@ -22,7 +22,8 @@
     "material-design",
     "material-design-3",
     "navigation-drawer",
-    "navigation-rail"
+    "navigation-rail",
+    "navigation-bar"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -34,14 +35,15 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "custom-elements.json"
   ],
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "lit": "^3.2.0",
-    "@lit-material/core": "0.0.1",
+    "@lit-material/core": "0.0.2",
     "@lit-material/tokens": "0.0.1"
   },
   "devDependencies": {
@@ -54,9 +56,11 @@
     "tsx": "^4.19.0",
     "typescript": "^5.7.0"
   },
+  "customElements": "custom-elements.json",
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts"
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts",
+    "analyze": "custom-elements-manifest analyze --litelement --globs \"src/**/*.ts\" --exclude \"src/**/*.test.ts\" --exclude \"src/**/*.ssr.test.ts\""
   }
 }