@lit-material/navigation 0.0.1 → 0.0.2

package/custom-elements.json

@@ -0,0 +1,1403 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationDrawer",
+          "declaration": {
+            "name": "LitMaterialNavigationDrawer",
+            "module": "./navigation-drawer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NavigationDrawerVariant",
+          "declaration": {
+            "name": "NavigationDrawerVariant",
+            "module": "./navigation-drawer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NavigationDrawerPosition",
+          "declaration": {
+            "name": "NavigationDrawerPosition",
+            "module": "./navigation-drawer.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationDrawerItem",
+          "declaration": {
+            "name": "LitMaterialNavigationDrawerItem",
+            "module": "./navigation-drawer-item.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationRail",
+          "declaration": {
+            "name": "LitMaterialNavigationRail",
+            "module": "./navigation-rail.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "NavigationRailAlignment",
+          "declaration": {
+            "name": "NavigationRailAlignment",
+            "module": "./navigation-rail.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationRailItem",
+          "declaration": {
+            "name": "LitMaterialNavigationRailItem",
+            "module": "./navigation-rail-item.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationBar",
+          "declaration": {
+            "name": "LitMaterialNavigationBar",
+            "module": "./navigation-bar.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationBarItem",
+          "declaration": {
+            "name": "LitMaterialNavigationBarItem",
+            "module": "./navigation-bar-item.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-bar-item-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation-bar-item-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-bar-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single destination inside a `lit-material-navigation-bar` — an icon in a\npill-shaped active indicator, with a small label below it, following the\nMD3 navigation bar item spec. Visually and structurally almost identical\nto `lit-material-navigation-rail-item` (same icon-pill + label-below\nlayout, badge slot, ripple/focus-ring scoped to the indicator) — the\ndifference is this item shares the bar's width equally with its siblings\n(`flex: 1`) instead of filling a narrow vertical rail's width, and its\nindicator is 64px wide (the MD3 bar spec) rather than the rail's 56px.\n\nRenders as a real `<button>` by default, or an `<a>` when `href` is set.\n`selected` is normally managed by the parent bar (see its docs), not set\ndirectly.",
+          "name": "LitMaterialNavigationBarItem",
+          "cssParts": [
+            {
+              "description": "The `<button>` or `<a>` (layout only, no background of its own).",
+              "name": "item"
+            },
+            {
+              "description": "The pill-shaped active indicator behind the icon.",
+              "name": "icon-container"
+            },
+            {
+              "description": "The state-layer element the hover/press feedback is drawn on.",
+              "name": "ripple"
+            },
+            {
+              "description": "The focus indicator element.",
+              "name": "focus-ring"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The label text.",
+              "name": ""
+            },
+            {
+              "description": "The icon.",
+              "name": "icon"
+            },
+            {
+              "description": "Optional badge content (a count or dot), positioned over the icon's top-end corner (top-right in LTR, top-left in RTL).",
+              "name": "badge"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the item as a link (`<a>`) instead of a `<button>`.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "stateLayerElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ripple",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new RippleController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "focusRing",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FocusRingController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLinkClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the item as a link (`<a>`) instead of a `<button>`.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-navigation-bar-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationBarItem",
+          "declaration": {
+            "name": "LitMaterialNavigationBarItem",
+            "module": "src/navigation-bar-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-navigation-bar-item",
+          "declaration": {
+            "name": "LitMaterialNavigationBarItem",
+            "module": "src/navigation-bar-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-bar-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation-bar-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-bar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Material Design 3 navigation bar — a row of primary destinations\n(`lit-material-navigation-bar-item` elements) sharing a bar's width\nequally, typically docked to the bottom of the screen for compact window\nsizes.\n\nSelection is index-based and managed here (like `lit-material-tabs` and\n`lit-material-navigation-rail`): set `selected` to reflect your current\nroute/section, and each item's own `selected` is kept in sync\nautomatically. Clicking an item updates `selected` and fires `change` —\nitems themselves don't manage selection.\n\nUnlike `lit-material-navigation-rail`, there's no `alignment` property or\n`fab` slot — a bottom bar is a single row of equally-shared destinations,\nnot a strip with room to position things along its length.",
+          "name": "LitMaterialNavigationBar",
+          "cssParts": [
+            {
+              "description": "The bar (background, height, padding).",
+              "name": "bar"
+            }
+          ],
+          "slots": [
+            {
+              "description": "`lit-material-navigation-bar-item` elements.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "Index of the selected item. `-1` means no selection.",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "LitMaterialNavigationBarItem[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "syncSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when `selected` changes via an item click.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "Index of the selected item. `-1` means no selection.",
+              "fieldName": "selected"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-navigation-bar",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationBar",
+          "declaration": {
+            "name": "LitMaterialNavigationBar",
+            "module": "src/navigation-bar.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-navigation-bar",
+          "declaration": {
+            "name": "LitMaterialNavigationBar",
+            "module": "src/navigation-bar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-drawer-item-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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); } slot.icon::slotted(*) { display: block; width: 24px; height: 24px; } .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } slot.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; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation-drawer-item-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-drawer-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single destination inside a `lit-material-navigation-drawer` — a\npill-shaped row with a leading icon and a label, following the MD3\nnavigation drawer item spec.\n\nRenders as a real `<button>` by default, or an `<a>` when `href` is set —\nboth get the same ripple/focus-ring treatment as `lit-material-list-item`.\n`selected` is normally managed by the parent drawer (see its docs), not\nset directly.",
+          "name": "LitMaterialNavigationDrawerItem",
+          "cssParts": [
+            {
+              "description": "The `<button>` or `<a>` row (background/shape).",
+              "name": "item"
+            },
+            {
+              "description": "The state-layer element the hover/press feedback is drawn on.",
+              "name": "ripple"
+            },
+            {
+              "description": "The focus indicator element.",
+              "name": "focus-ring"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The label text.",
+              "name": ""
+            },
+            {
+              "description": "The leading icon.",
+              "name": "icon"
+            },
+            {
+              "description": "Optional trailing content (a count or dot).",
+              "name": "badge"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the item as a link (`<a>`) instead of a `<button>`.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "stateLayerElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ripple",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new RippleController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "focusRing",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FocusRingController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLinkClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the item as a link (`<a>`) instead of a `<button>`.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-navigation-drawer-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationDrawerItem",
+          "declaration": {
+            "name": "LitMaterialNavigationDrawerItem",
+            "module": "src/navigation-drawer-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-navigation-drawer-item",
+          "declaration": {
+            "name": "LitMaterialNavigationDrawerItem",
+            "module": "src/navigation-drawer-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-drawer-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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) ); } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation-drawer-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-drawer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Material Design 3 navigation drawer — a vertical panel of primary\ndestinations (`lit-material-navigation-drawer-item` elements).\n\n`standard` renders as a plain, always-in-flow `<nav>` (a persistent side\npanel you place in your own layout). `modal` wraps the same content in a\nnative `<dialog>`, the same foundation `lit-material-dialog` uses — so the\nscrim, Escape-to-close, and focus trap all come from the browser. `position`\npicks which edge a `modal` drawer slides in from.\n\nSelection is index-based and managed here (like `lit-material-tabs`): set\n`selected` to reflect your current route/section, and each item's own\n`selected` is kept in sync automatically. Clicking an item updates\n`selected` and fires `change` — items themselves don't manage selection.",
+          "name": "LitMaterialNavigationDrawer",
+          "cssParts": [
+            {
+              "description": "The native `<dialog>` element. Only rendered for `modal`.",
+              "name": "dialog"
+            },
+            {
+              "description": "The visible panel (background, width, padding).",
+              "name": "drawer"
+            },
+            {
+              "description": "The header slot's container.",
+              "name": "header"
+            },
+            {
+              "description": "The items slot's container.",
+              "name": "content"
+            }
+          ],
+          "slots": [
+            {
+              "description": "`lit-material-navigation-drawer-item` elements.",
+              "name": ""
+            },
+            {
+              "description": "Optional header content (a title, a close button…).",
+              "name": "header"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "NavigationDrawerVariant"
+              },
+              "default": "\"standard\"",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "position",
+              "type": {
+                "text": "NavigationDrawerPosition"
+              },
+              "default": "\"start\"",
+              "attribute": "position",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "Index of the selected item. `-1` means no selection.",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a `modal` drawer is open. Ignored for `standard`.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disableBackdropClose",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If set, clicking the backdrop does not close a `modal` drawer.",
+              "attribute": "disable-backdrop-close"
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "HTMLDialogElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "reopenOnClose",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Opens a `modal` drawer. Equivalent to setting `.open = true`."
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Closes a `modal` drawer. Equivalent to setting `.open = false`."
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "LitMaterialNavigationDrawerItem[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "syncSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "renderNav",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "handleClose",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleCancel",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBackdropClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "name": "close",
+              "type": {
+                "text": "Event"
+              },
+              "description": "`modal` only: re-dispatched from the native `close` event."
+            },
+            {
+              "name": "cancel",
+              "type": {
+                "text": "Event"
+              },
+              "description": "`modal` only: re-dispatched from the native `cancel` event. Cancelable: calling `preventDefault()` stops the drawer from closing."
+            },
+            {
+              "description": "Fires when `selected` changes via an item click.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "NavigationDrawerVariant"
+              },
+              "default": "\"standard\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "position",
+              "type": {
+                "text": "NavigationDrawerPosition"
+              },
+              "default": "\"start\"",
+              "fieldName": "position"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "Index of the selected item. `-1` means no selection.",
+              "fieldName": "selected"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether a `modal` drawer is open. Ignored for `standard`.",
+              "fieldName": "open"
+            },
+            {
+              "name": "disable-backdrop-close",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "If set, clicking the backdrop does not close a `modal` drawer.",
+              "fieldName": "disableBackdropClose"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-navigation-drawer",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationDrawer",
+          "declaration": {
+            "name": "LitMaterialNavigationDrawer",
+            "module": "src/navigation-drawer.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-navigation-drawer",
+          "declaration": {
+            "name": "LitMaterialNavigationDrawer",
+            "module": "src/navigation-drawer.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-rail-item-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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); } 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; } } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation-rail-item-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-rail-item.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A single destination inside a `lit-material-navigation-rail` — an icon in\na pill-shaped active indicator, with a small label below it, following\nthe MD3 navigation rail item spec.\n\nRenders as a real `<button>` by default, or an `<a>` when `href` is set.\nThe ripple/focus-ring are scoped to the icon's indicator pill (not the\nwhole item), matching how the indicator itself is the only part that\nvisibly reacts to press/focus in the spec. `selected` is normally managed\nby the parent rail (see its docs), not set directly.",
+          "name": "LitMaterialNavigationRailItem",
+          "cssParts": [
+            {
+              "description": "The `<button>` or `<a>` (layout only, no background of its own).",
+              "name": "item"
+            },
+            {
+              "description": "The pill-shaped active indicator behind the icon.",
+              "name": "icon-container"
+            },
+            {
+              "description": "The state-layer element the hover/press feedback is drawn on.",
+              "name": "ripple"
+            },
+            {
+              "description": "The focus indicator element.",
+              "name": "focus-ring"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The label text.",
+              "name": ""
+            },
+            {
+              "description": "The icon.",
+              "name": "icon"
+            },
+            {
+              "description": "Optional badge content (a count or dot), positioned over the icon's top-end corner (top-right in LTR, top-left in RTL).",
+              "name": "badge"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "shadowRootOptions",
+              "type": {
+                "text": "ShadowRootInit"
+              },
+              "static": true,
+              "default": "{ ...LitElement.shadowRootOptions, delegatesFocus: true, }"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the item as a link (`<a>`) instead of a `<button>`.",
+              "attribute": "href"
+            },
+            {
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "attribute": "target"
+            },
+            {
+              "kind": "field",
+              "name": "stateLayerElement",
+              "type": {
+                "text": "HTMLElement | undefined"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "ripple",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new RippleController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "focusRing",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new FocusRingController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLinkClick",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "selected"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "href",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "description": "If set, renders the item as a link (`<a>`) instead of a `<button>`.",
+              "fieldName": "href"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "target"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-navigation-rail-item",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationRailItem",
+          "declaration": {
+            "name": "LitMaterialNavigationRailItem",
+            "module": "src/navigation-rail-item.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-navigation-rail-item",
+          "declaration": {
+            "name": "LitMaterialNavigationRailItem",
+            "module": "src/navigation-rail-item.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-rail-styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "styles",
+          "default": "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; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "styles",
+          "declaration": {
+            "name": "styles",
+            "module": "src/navigation-rail-styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/navigation-rail.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Material Design 3 navigation rail — a narrow, always-visible vertical bar\nof primary destinations (`lit-material-navigation-rail-item` elements),\ntypically docked to one edge for medium/large window sizes.\n\nSelection is index-based and managed here (like `lit-material-tabs`): set\n`selected` to reflect your current route/section, and each item's own\n`selected` is kept in sync automatically. Clicking an item updates\n`selected` and fires `change` — items themselves don't manage selection.",
+          "name": "LitMaterialNavigationRail",
+          "cssParts": [
+            {
+              "description": "The bar (background, width, padding).",
+              "name": "rail"
+            },
+            {
+              "description": "The fab slot's container.",
+              "name": "fab"
+            },
+            {
+              "description": "The items slot's container.",
+              "name": "items"
+            }
+          ],
+          "slots": [
+            {
+              "description": "`lit-material-navigation-rail-item` elements.",
+              "name": ""
+            },
+            {
+              "description": "An optional FAB shown above the items.",
+              "name": "fab"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "alignment",
+              "type": {
+                "text": "NavigationRailAlignment"
+              },
+              "default": "\"top\"",
+              "description": "Where the item group sits within the rail's height.",
+              "attribute": "alignment"
+            },
+            {
+              "kind": "field",
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "Index of the selected item. `-1` means no selection.",
+              "attribute": "selected"
+            },
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "LitMaterialNavigationRailItem[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "syncSelected",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "handleClick",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when `selected` changes via an item click.",
+              "name": "change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "alignment",
+              "type": {
+                "text": "NavigationRailAlignment"
+              },
+              "default": "\"top\"",
+              "description": "Where the item group sits within the rail's height.",
+              "fieldName": "alignment"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "number"
+              },
+              "default": "-1",
+              "description": "Index of the selected item. `-1` means no selection.",
+              "fieldName": "selected"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "lit-material-navigation-rail",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LitMaterialNavigationRail",
+          "declaration": {
+            "name": "LitMaterialNavigationRail",
+            "module": "src/navigation-rail.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "lit-material-navigation-rail",
+          "declaration": {
+            "name": "LitMaterialNavigationRail",
+            "module": "src/navigation-rail.ts"
+          }
+        }
+      ]
+    }
+  ]
+}