@lit-material/navigation 0.0.1

package/dist/navigation-rail.js

@@ -0,0 +1,93 @@
+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-rail-styles.js";
+/**
+ * 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.
+ */
+let LitMaterialNavigationRail = class LitMaterialNavigationRail extends LitElement {
+    static { this.styles = styles; }
+    constructor() {
+        super();
+        /** Where the item group sits within the rail's height. */
+        this.alignment = "top";
+        /** 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-rail-item"));
+    }
+    syncSelected() {
+        this.items.forEach((item, index) => {
+            item.selected = index === this.selected;
+        });
+    }
+    render() {
+        return html `
+      <div class="rail" part="rail">
+        <div class="fab" part="fab"><slot name="fab"></slot></div>
+        <div class="items ${this.alignment}" part="items">
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], LitMaterialNavigationRail.prototype, "alignment", void 0);
+__decorate([
+    property({ type: Number })
+], LitMaterialNavigationRail.prototype, "selected", void 0);
+LitMaterialNavigationRail = __decorate([
+    customElement("lit-material-navigation-rail")
+], LitMaterialNavigationRail);
+export { LitMaterialNavigationRail };
+//# sourceMappingURL=navigation-rail.js.map

package/dist/navigation-rail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation-rail.js","sourceRoot":"","sources":["../src/navigation-rail.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,6BAA6B,CAAC;AAIrD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEI,IAAM,yBAAyB,GAA/B,MAAM,yBAA0B,SAAQ,UAAU;aACvC,WAAM,GAAG,MAAM,AAAT,CAAU;IAQhC;QACE,KAAK,EAAE,CAAC;QAPV,0DAA0D;QAC9C,cAAS,GAA4B,KAAK,CAAC;QAEvD,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,mCAAmC,CAAC,CAAC,CAAC;IAChF,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;;;4BAGa,IAAI,CAAC,SAAS;8BACZ,IAAI,CAAC,gBAAgB;;;KAG9C,CAAC;IACJ,CAAC;;AApDW;IAAX,QAAQ,EAAE;4DAA4C;AAG3B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2DAAe;AAP/B,yBAAyB;IADrC,aAAa,CAAC,8BAA8B,CAAC;GACjC,yBAAyB,CAyDrC"}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@lit-material/navigation",
+  "version": "0.0.1",
+  "description": "Material Design 3 navigation drawer and navigation rail web components.",
+  "license": "MIT",
+  "author": {
+    "name": "bohdaq",
+    "email": "bohdaq@gmail.com",
+    "url": "https://github.com/bohdaq"
+  },
+  "homepage": "https://github.com/bohdaq/lit-material#readme",
+  "bugs": "https://github.com/bohdaq/lit-material/issues",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/bohdaq/lit-material.git",
+    "directory": "packages/navigation"
+  },
+  "keywords": [
+    "lit",
+    "web-components",
+    "lit-material",
+    "material-design",
+    "material-design-3",
+    "navigation-drawer",
+    "navigation-rail"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@lit-material/core": "0.0.1",
+    "@lit-material/tokens": "0.0.1"
+  },
+  "devDependencies": {
+    "@lit-labs/ssr": "^3.3.1",
+    "@open-wc/testing": "^4.0.0",
+    "@web/dev-server-esbuild": "^1.0.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-commands": "^0.9.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "tsx": "^4.19.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "web-test-runner && node --import tsx --test src/*.ssr.test.ts"
+  }
+}