@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/notification/notification.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/notification/notification.examples.json",
   "items": [
     {
-      "id": "core-notification_default",
+      "id": "notification",
       "name": "Default",
       "template": "<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n",
       "summary": "Basic notification with auto-dismiss timeout for temporary feedback messages. Use notifications for system-generated alerts, confirmations, or status updates that don't require immediate user action, automatically dismissing after a set duration.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-notification_actions",
+      "id": "notification-actions",
       "name": "Actions",
       "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <div nve-layout=\"row gap:sm align:right\">\n    <nve-button container=\"inline\">Dismiss</nve-button>\n    <nve-button container=\"inline\">Accept</nve-button>\n  </div>\n</nve-notification>\n",
       "summary": "Notification with actions for immediate user response. Use notifications with actions when the notification requires user decision-making (like \"Retry\", \"View Details\", or \"Undo\"), making the next step clear and reducing friction in error recovery or task completion flows.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-notification_custom-status",
+      "id": "notification-custom-status",
       "name": "CustomStatus",
       "template": "<nve-notification style=\"--status-color: var(--nve-ref-color-purple-plum-800)\" position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n  <nve-icon slot=\"icon\" name=\"sparkles\" aria-label=\"Info\"></nve-icon>\n  <div nve-layout=\"row align:right\">\n    <nve-button container=\"inline\">Action</nve-button>\n  </div>\n</nve-notification>\n",
       "summary": "Custom status color for notification. Use custom status color and icon slot to convey a different meaning than the default status color. Use sparingly as it can add unnecessary cognitive load to the user.",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-notification_visual",
+      "id": "notification-visual",
       "name": "Visual",
       "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
       "summary": "Standard notification layout with title and body content in centered positioning for consistent notification structure.",
@@ -43,7 +43,7 @@
       ]
     },
     {
-      "id": "core-notification_content-wrap",
+      "id": "notification-content-wrap",
       "name": "ContentWrap",
       "template": "<nve-notification position=\"center\">\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\" style=\"width: 230px\">\n    some text content in a notification with some really long text in it that just keeps going...\n  </p>\n</nve-notification>\n",
       "summary": "Notification with text wrapping for longer content. Use when notification messages exceed single-line length, but keep content concise for better readability and user comprehension.",
@@ -54,7 +54,7 @@
       ]
     },
     {
-      "id": "core-notification_events",
+      "id": "notification-events",
       "name": "Events",
       "template": "<nve-notification id=\"notification\" position=\"top\" close-timeout=\"2000\" closable>\n  <h3 nve-text=\"label\">Notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button popovertarget=\"notification\">button</nve-button>\n<script type=\"module\">\n  const notification = document.querySelector(\"nve-notification\");\n  notification.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  notification.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  notification.addEventListener(\"close\", () => console.log(\"close\"));\n  notification.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
       "summary": "Event handling for notification lifecycle events. Useful for adding custom behavior when notification state changes.",
@@ -65,7 +65,7 @@
       ]
     },
     {
-      "id": "core-notification_interactive-group",
+      "id": "notification-interactive-group",
       "name": "InteractiveGroup",
       "template": "<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-button>generate</nve-button>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 1000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
       "summary": "Dynamic notification group with programmatic creation and stacking. Perfect for toast-style notifications generated by user actions or system events, with progressive timeout and automatic removal patterns for managing many notifications.",
@@ -74,7 +74,7 @@
       "tags": []
     },
     {
-      "id": "core-notification_status",
+      "id": "notification-status",
       "name": "Status",
       "template": "<nve-notification-group position=\"center\">\n  <nve-notification>\n    <h3 nve-text=\"label\">Default</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"accent\">\n    <h3 nve-text=\"label\">Accent</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"success\">\n    <h3 nve-text=\"label\">Success</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"warning\">\n    <h3 nve-text=\"label\">Warning</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification status=\"danger\">\n    <h3 nve-text=\"label\">Danger</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n",
       "summary": "Notification status variants for different message types and severity levels. Use status to convey message importance: success for confirmations, warning for cautions, danger for errors, and accent for general information requiring attention.",
@@ -83,7 +83,7 @@
       "tags": []
     },
     {
-      "id": "core-notification_alignment",
+      "id": "notification-alignment",
       "name": "Alignment",
       "template": "<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"start\">\n  <h3 nve-text=\"label\">Top Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"top\" alignment=\"end\">\n  <h3 nve-text=\"label\">Top End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"start\">\n  <h3 nve-text=\"label\">Right Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\" alignment=\"end\">\n  <h3 nve-text=\"label\">Right End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"start\">\n  <h3 nve-text=\"label\">Bottom Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\" alignment=\"end\">\n  <h3 nve-text=\"label\">Bottom End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"start\">\n  <h3 nve-text=\"label\">Left Start</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\" alignment=\"end\">\n  <h3 nve-text=\"label\">Left End</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
       "summary": "Notification positioning and alignment options for flexible screen placement. Use consistent positioning for notification types: bottom-right for success confirmations, top-center for warnings, accommodating different screen sizes and user attention patterns.",
@@ -94,7 +94,7 @@
       ]
     },
     {
-      "id": "core-notification_position",
+      "id": "notification-position",
       "name": "Position",
       "template": "<nve-notification position=\"top\">\n  <h3 nve-text=\"label\">Position Top</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"right\">\n  <h3 nve-text=\"label\">Position Right</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"bottom\">\n  <h3 nve-text=\"label\">Position Bottom</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-notification position=\"left\">\n  <h3 nve-text=\"label\">Position Left</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n",
       "summary": "Basic notification positioning at screen edges without alignment specification. Use edge positions for standard notification placement, choosing position based on content importance and user workflow patterns.",
@@ -105,7 +105,7 @@
       ]
     },
     {
-      "id": "core-notification_position-group",
+      "id": "notification-position-group",
       "name": "PositionGroup",
       "template": "<nve-notification-group position=\"top\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"right\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"bottom\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n<nve-notification-group position=\"left\">\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n  <nve-notification closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">some text content in a notification</p>\n  </nve-notification>\n</nve-notification-group>\n",
       "summary": "Grouped notifications with consistent positioning for stacking many messages. Use notification groups to manage many alerts in an organized queue, maintaining visual consistency and providing users with a clear notification center.",
@@ -116,7 +116,7 @@
       ]
     },
     {
-      "id": "core-notification_drawer",
+      "id": "notification-drawer",
       "name": "Drawer",
       "template": "<nve-drawer closable position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading semibold sm\">Notifications</h3>\n  </nve-drawer-header>\n  <nve-notification closable container=\"flat\">\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"accent\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"success\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"warning\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-notification status=\"danger\" container=\"flat\" closable>\n    <h3 nve-text=\"label\">Notification</h3>\n    <p nve-text=\"body\">This is a notification in a notification drawer, messages should be succinct.</p>\n  </nve-notification>\n  <nve-drawer-footer>\n    <div nve-layout=\"grid gap:sm span-items:6\">\n      <nve-button interaction=\"destructive\" container=\"flat\">Clear All</nve-button>\n      <nve-button>Mark All as Read</nve-button>\n    </div>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Notification center pattern using drawer for persistent notification management. Perfect for applications with frequent notifications, allowing users to review, manage, and act on many notifications in a dedicated space with bulk actions.",
@@ -127,7 +127,7 @@
       ]
     },
     {
-      "id": "core-notification_shadow-root",
+      "id": "notification-shadow-root",
       "name": "ShadowRoot",
       "template": "<test-notification-shadow-root></test-notification-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"test-notification-shadow-root\",\n    class TestNotificationShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <nve-notification position=\"top\">\n          top\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"start\">\n          top start\n        </nve-notification>\n        <nve-notification position=\"top\" alignment=\"end\">\n          top end\n        </nve-notification>\n        <nve-notification position=\"right\">\n          right\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"start\">\n          right start\n        </nve-notification>\n        <nve-notification position=\"right\" alignment=\"end\">\n          right end\n        </nve-notification>\n        <nve-notification position=\"bottom\">\n          bottom\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"start\">\n          bottom start\n        </nve-notification>\n        <nve-notification position=\"bottom\" alignment=\"end\">\n          bottom end\n        </nve-notification>\n        <nve-notification position=\"left\">\n          left\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"start\">\n          left start\n        </nve-notification>\n        <nve-notification position=\"left\" alignment=\"end\">\n          left end\n        </nve-notification>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
       "summary": "Notification functionality within shadow DOM for Web Component architectures. Verifies proper notification positioning and behavior when used inside encapsulated component boundaries, essential for component libraries.",
@@ -138,7 +138,7 @@
       ]
     },
     {
-      "id": "core-notification_legacy-behavior-trigger",
+      "id": "notification-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
       "template": "<nve-notification trigger=\"notification-btn\" behavior-trigger hidden closable position=\"bottom\" close-timeout=\"2000\">\n  <h3 nve-text=\"label\">notification</h3>\n  <p nve-text=\"body\">some text content in a notification</p>\n</nve-notification>\n<nve-button id=\"notification-btn\">show</nve-button>\n",
       "summary": "Legacy behavior-trigger pattern for automatic notification lifecycle management. Deprecated approach with manual trigger attribute, prefer modern popovertarget API for cleaner notification triggering.",
@@ -149,7 +149,7 @@
       ]
     },
     {
-      "id": "core-notification_layers",
+      "id": "notification-layers",
       "name": "Layers",
       "template": "<nve-button>Notification</nve-button>\n<nve-button popovertarget=\"dialog\">Dialog</nve-button>\n<nve-notification-group position=\"bottom\" alignment=\"end\" id=\"group\"></nve-notification-group>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">Notification</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">This should not cause the dialog to close</p>\n</nve-dialog>\n<script type=\"module\">\n  const button = document.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const notification = document.createElement(\"nve-notification\");\n    notification.closable = true;\n    notification.status = [\"warning\", \"danger\", \"success\", \"accent\", undefined][Math.floor(Math.random() * 5)];\n    notification.innerHTML =\n      '<h3 nve-text=\"label\">' +\n      (notification.status ?? \"default\") +\n      '</h3><p nve-text=\"body\">some text content in a notification</p>';\n    notification.closeTimeout = 3000 * (document.querySelectorAll(\"nve-notification\").length + 1);\n    notification.addEventListener(\"close\", () => notification.remove(), { once: true });\n    notification.position = \"bottom\";\n    notification.alignment = \"end\";\n    document.querySelector(\"nve-notification-group\").prepend(notification);\n  });\n</script>\n",
       "summary": "Notification layering with modal dialogs for proper stacking context. Ensures notifications appear above dialogs without interfering with modal interactions, crucial for complex UI layering scenarios.",

package/dist/notification/notification2.js

@@ -32,7 +32,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-notification",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	static {

package/dist/page/page-panel/page-panel-content2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-content",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel-footer2.js

@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-footer",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel-header2.js

@@ -14,7 +14,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel-header",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	render() {

package/dist/page/page-panel/page-panel2.js

@@ -23,7 +23,7 @@ var h = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-page-panel",
-			version: "0.0.10",
+			version: "0.0.11",
 			parents: ["nve-page"]
 		};
 	}

package/dist/page/page.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.examples.js","names":[],"sources":["../../src/page/page.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable local-typescript/example-metadata */\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/steps/define.js';\nimport '@nvidia-elements/core/page-header/define.js';\nimport '@nvidia-elements/core/page/define.js';\nimport '@nvidia-elements/core/panel/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/resize-handle/define.js';\n\nexport default {\n  title: 'Elements/Page',\n  component: 'nve-page',\n};\n\n/**\n * @summary Basic nve-page layout with a header and main content.\n */\nexport const Default = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>panel</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Page layout slot reference showing all available panel positions including header, subheader, left, right, bottom, and aside regions. Use as a starting point for understanding how to compose complex application layouts.\n */\nexport const Slots = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>subheader</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left-aside\">\n    <nve-page-panel-content>left-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main>\n    <p nve-text=\"body\">main content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right-aside\">\n    <nve-page-panel-content>right-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"subfooter\">\n    <nve-page-panel-content>subfooter</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"footer\">\n    <nve-page-panel-content>footer</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary All slot areas and debug backgrounds for nve-page.\n * @tags test-case\n */\nexport const Content = {\n  render: () => html`\n<style>\n  nve-page[debug] {\n    nve-page-panel-content {\n      font-size: var(--nve-ref-font-size-100);\n    }\n\n    main {\n      min-height: 100vh;\n      padding: var(--nve-ref-space-md);\n    }\n\n    [slot='left'],\n    [slot='right'],\n    [slot='bottom'] {\n      --background: var(--nve-ref-color-green-grass-400);\n    }\n\n    [slot='left-aside'],\n    [slot='right-aside'] {\n      --background: var(--nve-ref-color-purple-lavender-400);\n    }\n\n    [slot='header'],\n    [slot='footer'] {\n      --background: var(--nve-ref-color-red-tomato-400);\n    }\n\n    [slot='subheader'],\n    [slot='subfooter'] {\n      --background: var(--nve-ref-color-blue-cobalt-400);\n    }\n  }\n</style>\n<nve-page debug>\n  <nve-page-header slot=\"header\">\n    <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>subheader</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left-aside\">\n    <nve-page-panel-content>left-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main>\n    <p nve-text=\"body\">main content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right-aside\">\n    <nve-page-panel-content>right-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"subfooter\">\n    <nve-page-panel-content>subfooter</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"footer\">\n    <nve-page-panel-content>footer</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Warning banner in the header slot above the page header.\n * @tags test-case\n */\nexport const SlotBanner = {\n  render: () => html`\n<nve-page>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable>\n      <span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Toolbar in the subheader slot below the header for secondary navigation or actions.\n * @tags test-case\n */\nexport const SlotSubheader = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"subheader\">\n    <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\"></nve-icon-button>\n    <h2 nve-text=\"heading sm\">Subheader</h2>\n  </nve-toolbar>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.\n */\nexport const SlotSubheaderLarge = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h2 nve-text=\"heading lg semibold\">Subheader Large</h2>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Driver</span>\n            <span nve-text=\"body sm bold\">Jane Doe</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Route</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Left slot with a page panel for side navigation or content.\n * @tags test-case\n */\nexport const SlotLeft = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Right slot with a page panel for side content.\n * @tags test-case\n */\nexport const SlotRight = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Bottom slot with a page panel for footer or supplemental content.\n * @tags test-case\n */\nexport const SlotBottom = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Left-aside slot with a vertical toolbar for navigation.\n * @tags test-case\n */\nexport const SlotLeftAside = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add\"></nve-icon-button>\n      <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Right-aside slot with a vertical toolbar for actions or navigation.\n * @tags test-case\n */\nexport const SlotRightAside = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Subfooter slot with a toolbar for status or metadata.\n * @tags test-case\n */\nexport const SlotSubfooter = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"subfooter\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Footer slot with a toolbar for links or actions.\n * @tags test-case\n */\nexport const SlotFooter = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use Page Panel with Invoker Command API to dynamically open and close page panels.\n */\nexport const InvokerCommand = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-icon-button slot=\"suffix\" commandfor=\"invoker-example\" command=\"--toggle\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel id=\"invoker-example\" slot=\"left\" size=\"sm\" hidden>\n    <nve-icon-button commandfor=\"invoker-example\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>\n      <p nve-text=\"body\">panel content</p>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.\n */\nexport const PanelExpandable = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n      <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n      <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n    </div>\n  </main>\n\n  <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"right\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"down\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.\n */\nexport const PanelClosable = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n      <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n      <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n    </div>\n  </main>\n\n  <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use Drawer to create navigation that is outside the context of the current view.\n */\nexport const InteractionDrawer = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-icon-button popovertarget=\"drawer\" slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-drawer id=\"drawer\" slot=\"left-aside\" position=\"left\" size=\"sm\" closable style=\"--top: 48px\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading medium sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.\n */\nexport const InteractionPanelNavigation = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"repo\" icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"ai\" icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"settings\" icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-page-panel id=\"nav-panel\" slot=\"left\" size=\"sm\" hidden>\n    <nve-icon-button commandfor=\"nav-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">git</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu id=\"repo\" hidden>\n        <nve-menu-item>Clone</nve-menu-item>\n        <nve-menu-item>Branch</nve-menu-item>\n        <nve-menu-item>Release</nve-menu-item>\n      </nve-menu>\n      <nve-menu id=\"ai\" hidden>\n        <nve-menu-item>Prompts</nve-menu-item>\n        <nve-menu-item>Models</nve-menu-item>\n        <nve-menu-item>Training</nve-menu-item>\n      </nve-menu>\n      <nve-menu id=\"settings\" hidden>\n        <nve-menu-item>Profile</nve-menu-item>\n        <nve-menu-item>Account</nve-menu-item>\n        <nve-menu-item>Logs</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n<script type=\"module\">\n  const toolbar = document.querySelector('nve-toolbar');\n  const panelHeader = document.querySelector('nve-page-panel h3');\n  const menus = Array.from(document.querySelectorAll('nve-page-panel nve-menu'));\n\n  toolbar.addEventListener('click', e => {\n    if (e.target.localName === 'nve-icon-button') {\n      panelHeader.textContent = e.target.value;\n      menus.forEach(i => (i.hidden = true));\n      menus.find(i => i.id === e.target.value).hidden = false;\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.\n */\nexport const PanelTabs = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-header>\n      <nve-tabs behavior-select>\n        <nve-tabs-item selected>Tab 1</nve-tabs-item>\n        <nve-tabs-item>Tab 2</nve-tabs-item>\n        <nve-tabs-item>Tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      Panel Content\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Page panel with title and subtitle headings in the header for labeling panel content. Use to provide clear context about what the panel contains, such as a details pane or properties inspector.\n */\nexport const PanelHeadings = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-header>\n      <div nve-layout=\"column gap:xs\">\n        <h3 nve-text=\"heading medium sm\">Header</h3>\n        <h4 nve-text=\"body muted\">Sub Header</h4>\n      </div>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      Panel Content\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use document scroll for static content sites that do not require a fixed navigation.\n */\nexport const DocumentScroll = {\n  render: () => html`\n<nve-page document-scroll>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\" style=\"min-height: 110vh\">page content</p>\n  </main>\n\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Stress test of all available slot layouts for nve-page.\n * @tags test-case\n */\nexport const KitchenSink = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h1 nve-text=\"heading lg\">Session 254a2039f294</h1>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Session ID</span>\n            <a nve-text=\"body sm bold link\" href=\"#\">254a2039f294</a>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Build</span>\n            <span nve-text=\"body sm bold\">254a2v1801</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Location</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add\"></nve-icon-button>\n      <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n    </nve-button-group>\n    <nve-divider></nve-divider>\n    <nve-button-group>\n      <nve-icon-button icon-name=\"bounding-box\"></nve-icon-button>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"exclamation-triangle\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">Browse</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Debug</a></nve-tree-node>\n        <nve-tree-node>\n          Events\n          <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          Sensors\n          <nve-tree-node><a href=\"#\">front_tele_30fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">front_wide_120fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">left_fisheye_200fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">right_fisheye_200fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">rear_left_70fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">rear_right_70fov</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node>\n          Segments\n          <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n    <div style=\"min-height: 100vh; width: 1px;\"></div>\n  </main>\n\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"subfooter\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Card grid page layout for browsable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.\n * @tags pattern\n */\nexport const LayoutCardGrid = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <nve-search container=\"flat\">\n      <input type=\"search\" aria-label=\"search drives\" />\n    </nve-search>\n\n    <nve-button-group container=\"rounded\" behavior-select=\"single\" orientation=\"horizontal\">\n      <nve-icon-button icon-name=\"view-as-grid\" pressed></nve-icon-button>\n      <nve-icon-button icon-name=\"table\"></nve-icon-button>\n      <nve-icon-button icon-name=\"map\"></nve-icon-button>\n    </nve-button-group>\n\n    <section nve-layout=\"grid span-items:3 gap:md\">\n      ${new Array(24).fill('').map(() => html`\n      <nve-card style=\"height: 100%; width: 100%;\">\n        <img src=\"static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n      `)}\n    </section>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Multi-video grid layout with synchronized playback controls for monitoring and review workflows. Ideal for surveillance dashboards, AV sensor feeds, or simulation playback where concurrent streams need simultaneous viewing.\n * @tags pattern\n */\nexport const LayoutMultiVideo = {\n  render: () => html`\n<style>\n  nve-page {\n    --padding: 0;\n  }\n\n  .videos {\n    display: grid;\n    align-content: center;\n    grid-template: auto auto auto / 1fr 1fr 1fr;\n    gap: var(--nve-ref-space-xxs);\n    margin: auto;\n    height: 95%;\n    width: 95%;\n    max-width: 1660px;\n    aspect-ratio: 16 / 9;\n  }\n</style>\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h2 nve-text=\"heading lg\">Subheader Large</h2>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Driver</span>\n            <span nve-text=\"body sm bold\">Jane Doe</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Route</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>\n      content...\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <section class=\"videos\">\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-1.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-2.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-3.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-4.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-5.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-6.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-7.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-8.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-9.mp4\" type=\"video/mp4\">\n    </video>\n  </section>\n\n  <nve-page-panel slot=\"bottom\" style=\"max-height: 100px\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column align:center\" style=\"max-width: 1024px; margin: 0 auto;\">\n        <nve-range>\n          <input type=\"range\" min=\"0\" max=\"100\" value=\"0\" aria-label=\"video playback\" />\n        </nve-range>\n        <nve-button-group container=\"flat\">\n          <nve-icon-button icon-name=\"start\" aria-label=\"start\"></nve-icon-button>\n          <nve-icon-button icon-name=\"play\" aria-label=\"play/pause\"></nve-icon-button>\n          <nve-icon-button icon-name=\"start\" direction=\"down\" aria-label=\"end\"></nve-icon-button>\n        </nve-button-group>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  // DEMO CODE ONLY\n  const videos = Array.from(document.querySelectorAll('video'));\n  const playButton = document.querySelector('nve-icon-button[aria-label=\"play/pause\"]');\n  const startButton = document.querySelector('nve-icon-button[aria-label=\"start\"]');\n  const endButton = document.querySelector('nve-icon-button[aria-label=\"end\"]');\n  const range = document.querySelector('nve-range input');\n\n  class VideoGroup extends EventTarget {\n    playing = false;\n    videos = [];\n\n    get duration() {\n      return this.videos[0].duration;\n    }\n\n    get currentTime() {\n      return this.videos[0].currentTime;\n    }\n\n    constructor(videos = []) {\n      super();\n      this.videos = videos;\n\n      async function animate() {\n        if (this.playing && this.videos.every(video => video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA)) {\n          await this.#nextFrame();\n          if (this.duration === this.currentTime) {\n            this.pause();\n          }\n        }\n        requestAnimationFrame(animate.bind(this));\n      }\n\n      animate.call(this);\n    }\n\n    async #videoMetadataReady() {\n      if (this.videos[0].readyState === 0) {\n        return await new Promise(r => this.videos[0].addEventListener('loadedmetadata', () => r(null), { once: true }));\n      } else {\n        return new Promise(r => r());\n      }\n    }\n\n    async play() {\n      await this.#videoMetadataReady();\n\n      if (this.videos[0].duration === this.videos[0].currentTime) {\n        await this.setCurrentTime(0);\n      }\n\n      this.playing = true;\n    }\n\n    pause() {\n      this.playing = false;\n    }\n\n    stop() {\n      this.pause();\n      this.setCurrentTime(0);\n    }\n\n    async #nextFrame() {\n      this.videos.forEach(video => video.currentTime = video.currentTime + this.videos[0].duration / 60);\n      await this.#timeUpdated();\n    }\n\n    async setCurrentTime(currentTime) {\n      this.videos.forEach(video => video.currentTime = currentTime);\n      await this.#timeUpdated();\n    }\n  \n    async #timeUpdated() {\n      await Promise.all(this.videos.map(video => {\n        return new Promise(r => video.addEventListener('timeupdate', () => r(null), { once: true }))\n      }));\n\n      this.dispatchEvent(new CustomEvent('timeupdate', { detail: { currentTime: this.currentTime, percentage: (this.currentTime / this.duration) * 100  } }))\n    }\n  }\n\n  const videoGroup = new VideoGroup(videos);\n\n  videoGroup.addEventListener('timeupdate', e => {\n    range.value = e.detail.percentage;\n  });\n\n  range.addEventListener('input', e => {\n    videoGroup.setCurrentTime(videoGroup.duration * (range.value / 100));\n  });\n\n  startButton.addEventListener('click', () => {\n    videoGroup.stop();\n  });\n\n  endButton.addEventListener('click', () => {\n    videoGroup.setCurrentTime(videoGroup.duration);\n  });\n\n  playButton.addEventListener('click', () => {\n    if (videoGroup.playing) {\n      playButton.iconName = 'play';\n      videoGroup.pause();\n    } else {\n      playButton.iconName = 'pause';\n      videoGroup.play();\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.\n * @tags pattern\n */\nexport const LayoutEditor = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Playground</h2>\n    <nve-button container=\"flat\">Browse</nve-button>\n    <nve-button container=\"flat\">Editor</nve-button>\n    <nve-button container=\"flat\">Elements</nve-button>\n    <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"subheader\">\n    <nve-icon-button slot=\"prefix\" icon-name=\"split-vertical\"></nve-icon-button>\n    <nve-divider slot=\"prefix\" orientation=\"vertical\"></nve-divider>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\" style=\"text-wrap: nowrap\">Project</h2>\n    <nve-button slot=\"suffix\" interaction=\"emphasis\">Save Project</nve-button>\n    <nve-icon-button slot=\"suffix\" icon-name=\"download\"></nve-icon-button>\n    <nve-divider slot=\"suffix\" orientation=\"vertical\"></nve-divider>\n    <nve-button-group slot=\"suffix\" container=\"rounded\">\n      <nve-icon-button icon-name=\"code\"></nve-icon-button>\n      <nve-icon-button selected icon-name=\"split-vertical\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-header>\n      Outline\n    </nve-page-panel-header>  \n    <nve-page-panel-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">html</a></nve-tree-node>\n        <nve-tree-node expanded>\n          head\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          body\n          <nve-tree-node><a href=\"#\">nve-badge</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel id=\"console-panel\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button commandfor=\"console-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>console output</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-toolbar slot=\"footer\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.\n */\nexport const Resize = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel style=\"width: 200px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" min=\"100\" max=\"400\" value=\"200\" step=\"20\" orientation=\"vertical\"></nve-resize-handle>\n</nve-page>\n\n<script type=\"module\">\n  const handle = document.querySelector('nve-resize-handle');\n  const panel = document.querySelector('nve-page-panel');\n  handle.addEventListener('input', e => panel.style.width = e.target.value + 'px');\n</script>\n  `\n};\n\n/**\n * @summary Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.\n */\nexport const ResizeMulti = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel style=\"width: 320px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n\n  <nve-resize-handle slot=\"bottom\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n  <nve-page-panel style=\"height: 320px\" slot=\"bottom\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-resize-handle slot=\"right\" dir=\"rtl\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n  <nve-page-panel style=\"width: 320px\" slot=\"right\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n\n<script type=\"module\">\n  const leftHandle = document.querySelector('nve-resize-handle[slot=left]');\n  const leftPanel = document.querySelector('nve-page-panel[slot=left]');\n  leftHandle.addEventListener('input', e => leftPanel.style.width = e.target.value + 'px');\n\n  const rightHandle = document.querySelector('nve-resize-handle[slot=right]');\n  const rightPanel = document.querySelector('nve-page-panel[slot=right]');\n  rightHandle.addEventListener('input', e => rightPanel.style.width = e.target.value + 'px');\n\n  const bottomHandle = document.querySelector('nve-resize-handle[slot=bottom]');\n  const bottomPanel = document.querySelector('nve-page-panel[slot=bottom]');\n  bottomHandle.addEventListener('input', e => bottomPanel.style.height = e.target.value + 'px');\n</script>\n  `\n};\n\n/**\n * @summary Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.\n */\nexport const ResizeSnap = {\n  render: () => html`\n<nve-page style=\"--padding: var(--nve-ref-space-lg)\">\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <p nve-text=\"body\">Double click the resize handle to snap to the min or max.</p>\n\n  <nve-page-panel style=\"width: 320px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n  const leftHandle = document.querySelector('nve-resize-handle[slot=left]');\n  const leftPanel = document.querySelector('nve-page-panel[slot=left]');\n  leftHandle.addEventListener('input', e => leftPanel.style.width = e.target.value + 'px');\n</script>\n  `\n};\n\n/**\n * @summary Example of using explicit event listeners to control the state of a page panel.\n * @deprecated Use Page Panel with Invoker Command API to dynamically open and close page panels.\n * @tags test-case\n */\nexport const InteractionPanel = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"left\" size=\"sm\" closable hidden>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Panel Header</h3>\n    </nve-page-panel-header>  \n    <nve-page-panel-content>\n    <p nve-text=\"body\">Panel Content</p>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n<script type=\"module\">\n  const button = document.querySelector('[aria-label=\"menu\"]');\n  const panel = document.querySelector('nve-page-panel');\n\n  button.addEventListener('click', () => panel.hidden = !panel.hidden);\n  panel.addEventListener('close', () => panel.hidden = true);\n</script>\n  `\n};\n\n/**\n * @summary Expandable page panels in left, right, and bottom slots.\n * @deprecated Use Page Panel with Invoker Command API to dynamically open and close page panels with slotted icon buttons.\n */\nexport const PanelExpandableState = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel expandable slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel expandable slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel expandable slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Closable page panels in left, right, and bottom slots.\n * @deprecated Use Page Panel with Invoker Command API to dynamically open and close page panels with slotted icon buttons.\n */\nexport const PanelClosableState = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel closable slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel closable slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel closable slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n"],"mappings":";AAIA,IAAA,IAAS"}
+{"version":3,"file":"page.examples.js","names":[],"sources":["../../src/page/page.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\n/* eslint-disable local-typescript/example-metadata */\nimport { html } from 'lit';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/logo/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/drawer/define.js';\nimport '@nvidia-elements/core/toolbar/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/range/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/steps/define.js';\nimport '@nvidia-elements/core/page-header/define.js';\nimport '@nvidia-elements/core/page/define.js';\nimport '@nvidia-elements/core/panel/define.js';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/resize-handle/define.js';\n\nexport default {\n  title: 'Elements/Page',\n  component: 'nve-page',\n};\n\n/**\n * @summary Basic nve-page layout with a header and main content.\n */\nexport const Default = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>panel</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Page layout slot reference showing all available panel positions including header, subheader, left, right, bottom, and aside regions. Use as a starting point for understanding how to compose complex application layouts.\n */\nexport const Slots = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>subheader</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left-aside\">\n    <nve-page-panel-content>left-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main>\n    <p nve-text=\"body\">main content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right-aside\">\n    <nve-page-panel-content>right-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"subfooter\">\n    <nve-page-panel-content>subfooter</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"footer\">\n    <nve-page-panel-content>footer</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary All slot areas and debug backgrounds for nve-page.\n * @tags test-case\n */\nexport const Content = {\n  render: () => html`\n<style>\n  nve-page[debug] {\n    nve-page-panel-content {\n      font-size: var(--nve-ref-font-size-100);\n    }\n\n    main {\n      min-height: 100vh;\n      padding: var(--nve-ref-space-md);\n    }\n\n    [slot='left'],\n    [slot='right'],\n    [slot='bottom'] {\n      --background: var(--nve-ref-color-green-grass-400);\n    }\n\n    [slot='left-aside'],\n    [slot='right-aside'] {\n      --background: var(--nve-ref-color-purple-lavender-400);\n    }\n\n    [slot='header'],\n    [slot='footer'] {\n      --background: var(--nve-ref-color-red-tomato-400);\n    }\n\n    [slot='subheader'],\n    [slot='subfooter'] {\n      --background: var(--nve-ref-color-blue-cobalt-400);\n    }\n  }\n</style>\n<nve-page debug>\n  <nve-page-header slot=\"header\">\n    <h2 nve-text=\"heading\" slot=\"prefix\">header</h2>\n  </nve-page-header>\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>subheader</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left-aside\">\n    <nve-page-panel-content>left-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main>\n    <p nve-text=\"body\">main content</p>\n  </main>\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"right-aside\">\n    <nve-page-panel-content>right-aside</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"subfooter\">\n    <nve-page-panel-content>subfooter</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-page-panel slot=\"footer\">\n    <nve-page-panel-content>footer</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Warning banner in the header slot above the page header.\n * @tags test-case\n */\nexport const SlotBanner = {\n  render: () => html`\n<nve-page>\n  <nve-alert-group slot=\"header\" status=\"warning\" prominence=\"emphasis\" container=\"full\">\n    <nve-alert closable>\n      <span slot=\"prefix\">Warning</span> banner message <a href=\"#\" nve-text=\"link\" slot=\"actions\">view details</a>\n    </nve-alert>\n  </nve-alert-group>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Toolbar in the subheader slot below the header for secondary navigation or actions.\n * @tags test-case\n */\nexport const SlotSubheader = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"subheader\">\n    <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\"></nve-icon-button>\n    <h2 nve-text=\"heading sm\">Subheader</h2>\n  </nve-toolbar>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Large subheader panel with back navigation, title, metadata, and action buttons. Use for detail pages that need prominent context like entity names, status badges, and key-value metadata above the main content.\n */\nexport const SlotSubheaderLarge = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h2 nve-text=\"heading lg semibold\">Subheader Large</h2>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Driver</span>\n            <span nve-text=\"body sm bold\">Jane Doe</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Route</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Left slot with a page panel for side navigation or content.\n * @tags test-case\n */\nexport const SlotLeft = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Right slot with a page panel for side content.\n * @tags test-case\n */\nexport const SlotRight = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Bottom slot with a page panel for footer or supplemental content.\n * @tags test-case\n */\nexport const SlotBottom = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Left-aside slot with a vertical toolbar for navigation.\n * @tags test-case\n */\nexport const SlotLeftAside = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add\"></nve-icon-button>\n      <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Right-aside slot with a vertical toolbar for actions or navigation.\n * @tags test-case\n */\nexport const SlotRightAside = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Subfooter slot with a toolbar for status or metadata.\n * @tags test-case\n */\nexport const SlotSubfooter = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"subfooter\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Footer slot with a toolbar for links or actions.\n * @tags test-case\n */\nexport const SlotFooter = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use Page Panel with Invoker Command API to dynamically open and close page panels.\n */\nexport const InvokerCommand = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-icon-button slot=\"suffix\" commandfor=\"invoker-example\" command=\"--toggle\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel id=\"invoker-example\" slot=\"left\" size=\"sm\" hidden>\n    <nve-icon-button commandfor=\"invoker-example\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>\n      <p nve-text=\"body\">panel content</p>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Expandable page panels that collapse to a slim strip and toggle open with chevron buttons. Use when panels contain supplementary content that users access intermittently, preserving main content space while keeping panels accessible.\n */\nexport const PanelExpandable = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n      <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n      <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n    </div>\n  </main>\n\n  <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"right\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"down\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Closable page panels that fully remove from the layout when dismissed. Use when panels open on demand for temporary tasks like viewing item details or applying filters, and the user needs full main content space when done.\n */\nexport const PanelClosable = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel id=\"panel-left\" slot=\"left\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-left\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <div nve-layout=\"row gap:xs\">\n      <nve-button commandfor=\"panel-left\" command=\"--toggle\">Toggle Left Panel</nve-button>\n      <nve-button commandfor=\"panel-right\" command=\"--toggle\">Toggle Right Panel</nve-button>\n      <nve-button commandfor=\"panel-bottom\" command=\"--toggle\">Toggle Bottom Panel</nve-button>\n    </div>\n  </main>\n\n  <nve-page-panel id=\"panel-right\" slot=\"right\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-right\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel id=\"panel-bottom\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button commandfor=\"panel-bottom\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use Drawer to create navigation that is outside the context of the current view.\n */\nexport const InteractionDrawer = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-icon-button popovertarget=\"drawer\" slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-drawer id=\"drawer\" slot=\"left-aside\" position=\"left\" size=\"sm\" closable style=\"--top: 48px\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading medium sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use Page Panel with Toolbar to create complex navigation groups that are within the context of the current view.\n */\nexport const InteractionPanelNavigation = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"repo\" icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"ai\" icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button commandfor=\"nav-panel\" command=\"--open\" value=\"settings\" icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-page-panel id=\"nav-panel\" slot=\"left\" size=\"sm\" hidden>\n    <nve-icon-button commandfor=\"nav-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"double-chevron\" direction=\"left\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">git</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <nve-menu id=\"repo\" hidden>\n        <nve-menu-item>Clone</nve-menu-item>\n        <nve-menu-item>Branch</nve-menu-item>\n        <nve-menu-item>Release</nve-menu-item>\n      </nve-menu>\n      <nve-menu id=\"ai\" hidden>\n        <nve-menu-item>Prompts</nve-menu-item>\n        <nve-menu-item>Models</nve-menu-item>\n        <nve-menu-item>Training</nve-menu-item>\n      </nve-menu>\n      <nve-menu id=\"settings\" hidden>\n        <nve-menu-item>Profile</nve-menu-item>\n        <nve-menu-item>Account</nve-menu-item>\n        <nve-menu-item>Logs</nve-menu-item>\n      </nve-menu>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n<script type=\"module\">\n  const toolbar = document.querySelector('nve-toolbar');\n  const panelHeader = document.querySelector('nve-page-panel h3');\n  const menus = Array.from(document.querySelectorAll('nve-page-panel nve-menu'));\n\n  toolbar.addEventListener('click', e => {\n    if (e.target.localName === 'nve-icon-button') {\n      panelHeader.textContent = e.target.value;\n      menus.forEach(i => (i.hidden = true));\n      menus.find(i => i.id === e.target.value).hidden = false;\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Page panel with tabbed header for switching between categorized content views within a sidebar. Use when a panel contains related sections like outline, search, and settings that share the same screen region.\n */\nexport const PanelTabs = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-header>\n      <nve-tabs behavior-select>\n        <nve-tabs-item selected>Tab 1</nve-tabs-item>\n        <nve-tabs-item>Tab 2</nve-tabs-item>\n        <nve-tabs-item>Tab 3</nve-tabs-item>\n      </nve-tabs>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      Panel Content\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Page panel with title and subtitle headings in the header for labeling panel content. Use to provide clear context about what the panel contains, such as a details pane or properties inspector.\n */\nexport const PanelHeadings = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-header>\n      <div nve-layout=\"column gap:xs\">\n        <h3 nve-text=\"heading medium sm\">Header</h3>\n        <h4 nve-text=\"body muted\">Sub Header</h4>\n      </div>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      Panel Content\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Use document scroll for static content sites that do not require a fixed navigation.\n */\nexport const DocumentScroll = {\n  render: () => html`\n<nve-page document-scroll>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\" style=\"min-height: 110vh\">page content</p>\n  </main>\n\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Stress test of all available slot layouts for nve-page.\n * @tags test-case\n */\nexport const KitchenSink = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h1 nve-text=\"heading lg\">Session 254a2039f294</h1>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Session ID</span>\n            <a nve-text=\"body sm bold link\" href=\"#\">254a2039f294</a>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Build</span>\n            <span nve-text=\"body sm bold\">254a2v1801</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Location</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-toolbar slot=\"left-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"play\" size=\"sm\"></nve-icon-button>\n      <nve-icon-button icon-name=\"add\"></nve-icon-button>\n      <nve-icon-button icon-name=\"delete\"></nve-icon-button>\n    </nve-button-group>\n    <nve-divider></nve-divider>\n    <nve-button-group>\n      <nve-icon-button icon-name=\"bounding-box\"></nve-icon-button>\n      <nve-icon-button icon-name=\"branch\"></nve-icon-button>\n      <nve-icon-button icon-name=\"exclamation-triangle\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">Browse</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Debug</a></nve-tree-node>\n        <nve-tree-node>\n          Events\n          <nve-tree-node><a href=\"#\">Alert</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Badge</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Dialog</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          Sensors\n          <nve-tree-node><a href=\"#\">front_tele_30fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">front_wide_120fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">left_fisheye_200fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">right_fisheye_200fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">rear_left_70fov</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">rear_right_70fov</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node>\n          Segments\n          <nve-tree-node><a href=\"#\">JavaScript</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">HTML</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">CSS</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n    <div style=\"min-height: 100vh; width: 1px;\"></div>\n  </main>\n\n  <nve-page-panel slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-toolbar slot=\"right-aside\" orientation=\"vertical\">\n    <nve-button-group>\n      <nve-icon-button icon-name=\"sparkles\"></nve-icon-button>\n      <nve-icon-button icon-name=\"gear\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"subfooter\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n\n  <nve-toolbar slot=\"footer\">\n    <a href=\"#\" nve-text=\"link sm\">docmentation</a>\n    <a href=\"#\" nve-text=\"link sm\">logging</a>\n    <a href=\"#\" nve-text=\"link sm\">contact</a>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Card grid page layout for browseable collections like infrastructure dashboards, asset catalogs, or media galleries. Use with view-mode toggles for switching between grid and table presentations.\n * @tags pattern test-case\n */\nexport const LayoutCardGrid = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <nve-search container=\"flat\">\n      <input type=\"search\" aria-label=\"search drives\" />\n    </nve-search>\n\n    <nve-button-group container=\"rounded\" behavior-select=\"single\" orientation=\"horizontal\">\n      <nve-icon-button icon-name=\"view-as-grid\" pressed></nve-icon-button>\n      <nve-icon-button icon-name=\"table\"></nve-icon-button>\n      <nve-icon-button icon-name=\"map\"></nve-icon-button>\n    </nve-button-group>\n\n    <section nve-layout=\"grid span-items:3 gap:md\">\n      ${new Array(24).fill('').map(() => html`\n      <nve-card style=\"height: 100%; width: 100%;\">\n        <img src=\"static/images/test-image-1.svg\" alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; object-fit: cover;\" />\n        <nve-card-content>\n          <p nve-text=\"body\">•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n        </nve-card-content>\n        <nve-card-footer>\n          <div nve-layout=\"grid span-items:6 gap:xs\">\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n            <nve-button>•︎•︎•︎•︎•︎•︎</nve-button>\n          </div>\n        </nve-card-footer>\n      </nve-card>\n      `)}\n    </section>\n  </main>\n</nve-page>\n  `\n};\n\n/**\n * @summary Multi-video grid layout with synchronized playback controls for monitoring and review workflows. Ideal for surveillance dashboards, AV sensor feeds, or simulation playback where concurrent streams need simultaneous viewing.\n * @tags pattern test-case\n */\nexport const LayoutMultiVideo = {\n  render: () => html`\n<style>\n  nve-page {\n    --padding: 0;\n  }\n\n  .videos {\n    display: grid;\n    align-content: center;\n    grid-template: auto auto auto / 1fr 1fr 1fr;\n    gap: var(--nve-ref-space-xxs);\n    margin: auto;\n    height: 95%;\n    width: 95%;\n    max-width: 1660px;\n    aspect-ratio: 16 / 9;\n  }\n</style>\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"subheader\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md align:stretch\">\n        <div nve-layout=\"row align:space-between align:vertical-center\">\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-icon-button icon-name=\"arrow\" direction=\"left\" size=\"sm\" container=\"flat\"></nve-icon-button>\n            <h2 nve-text=\"heading lg\">Subheader Large</h2>\n          </section>\n          <section nve-layout=\"row gap:sm align:vertical-center\">\n            <nve-button>Default</nve-button>\n            <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n          </section>\n        </div>\n        <section nve-layout=\"row gap:xl align:vertical-center\">\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Driver</span>\n            <span nve-text=\"body sm bold\">Jane Doe</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Route</span>\n            <span nve-text=\"body sm bold\">Santa Clara</span>\n          </div>\n          <div nve-layout=\"row gap:sm align:center\">\n            <span nve-text=\"body sm muted\">Status</span>\n            <span nve-text=\"body sm bold\"><nve-badge status=\"success\">complete</nve-badge></span>\n          </div>\n        </section>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>\n      content...\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <section class=\"videos\">\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-1.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-2.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-3.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-4.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-5.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-6.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-7.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-8.mp4\" type=\"video/mp4\">\n    </video>\n    <video playsinline muted width=\"100%\">\n      <source src=\"video/multi-cam-9.mp4\" type=\"video/mp4\">\n    </video>\n  </section>\n\n  <nve-page-panel slot=\"bottom\" style=\"max-height: 100px\">\n    <nve-page-panel-content>\n      <div nve-layout=\"column align:center\" style=\"max-width: 1024px; margin: 0 auto;\">\n        <nve-range>\n          <input type=\"range\" min=\"0\" max=\"100\" value=\"0\" aria-label=\"video playback\" />\n        </nve-range>\n        <nve-button-group container=\"flat\">\n          <nve-icon-button icon-name=\"start\" aria-label=\"start\"></nve-icon-button>\n          <nve-icon-button icon-name=\"play\" aria-label=\"play/pause\"></nve-icon-button>\n          <nve-icon-button icon-name=\"start\" direction=\"down\" aria-label=\"end\"></nve-icon-button>\n        </nve-button-group>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  // DEMO CODE ONLY\n  const videos = Array.from(document.querySelectorAll('video'));\n  const playButton = document.querySelector('nve-icon-button[aria-label=\"play/pause\"]');\n  const startButton = document.querySelector('nve-icon-button[aria-label=\"start\"]');\n  const endButton = document.querySelector('nve-icon-button[aria-label=\"end\"]');\n  const range = document.querySelector('nve-range input');\n\n  class VideoGroup extends EventTarget {\n    playing = false;\n    videos = [];\n\n    get duration() {\n      return this.videos[0].duration;\n    }\n\n    get currentTime() {\n      return this.videos[0].currentTime;\n    }\n\n    constructor(videos = []) {\n      super();\n      this.videos = videos;\n\n      async function animate() {\n        if (this.playing && this.videos.every(video => video.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA)) {\n          await this.#nextFrame();\n          if (this.duration === this.currentTime) {\n            this.pause();\n          }\n        }\n        requestAnimationFrame(animate.bind(this));\n      }\n\n      animate.call(this);\n    }\n\n    async #videoMetadataReady() {\n      if (this.videos[0].readyState === 0) {\n        return await new Promise(r => this.videos[0].addEventListener('loadedmetadata', () => r(null), { once: true }));\n      } else {\n        return new Promise(r => r());\n      }\n    }\n\n    async play() {\n      await this.#videoMetadataReady();\n\n      if (this.videos[0].duration === this.videos[0].currentTime) {\n        await this.setCurrentTime(0);\n      }\n\n      this.playing = true;\n    }\n\n    pause() {\n      this.playing = false;\n    }\n\n    stop() {\n      this.pause();\n      this.setCurrentTime(0);\n    }\n\n    async #nextFrame() {\n      this.videos.forEach(video => video.currentTime = video.currentTime + this.videos[0].duration / 60);\n      await this.#timeUpdated();\n    }\n\n    async setCurrentTime(currentTime) {\n      this.videos.forEach(video => video.currentTime = currentTime);\n      await this.#timeUpdated();\n    }\n  \n    async #timeUpdated() {\n      await Promise.all(this.videos.map(video => {\n        return new Promise(r => video.addEventListener('timeupdate', () => r(null), { once: true }))\n      }));\n\n      this.dispatchEvent(new CustomEvent('timeupdate', { detail: { currentTime: this.currentTime, percentage: (this.currentTime / this.duration) * 100  } }))\n    }\n  }\n\n  const videoGroup = new VideoGroup(videos);\n\n  videoGroup.addEventListener('timeupdate', e => {\n    range.value = e.detail.percentage;\n  });\n\n  range.addEventListener('input', e => {\n    videoGroup.setCurrentTime(videoGroup.duration * (range.value / 100));\n  });\n\n  startButton.addEventListener('click', () => {\n    videoGroup.stop();\n  });\n\n  endButton.addEventListener('click', () => {\n    videoGroup.setCurrentTime(videoGroup.duration);\n  });\n\n  playButton.addEventListener('click', () => {\n    if (videoGroup.playing) {\n      playButton.iconName = 'play';\n      videoGroup.pause();\n    } else {\n      playButton.iconName = 'pause';\n      videoGroup.play();\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary IDE-style editor layout with file outline, main editor, and console panels. Use for code playgrounds, configuration editors, or development tools that need a split-pane workspace with toolbar controls.\n * @tags pattern\n */\nexport const LayoutEditor = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Playground</h2>\n    <nve-button container=\"flat\">Browse</nve-button>\n    <nve-button container=\"flat\">Editor</nve-button>\n    <nve-button container=\"flat\">Elements</nve-button>\n    <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-toolbar slot=\"subheader\">\n    <nve-icon-button slot=\"prefix\" icon-name=\"split-vertical\"></nve-icon-button>\n    <nve-divider slot=\"prefix\" orientation=\"vertical\"></nve-divider>\n    <h2 slot=\"prefix\" nve-text=\"heading sm\" style=\"text-wrap: nowrap\">Project</h2>\n    <nve-button slot=\"suffix\" interaction=\"emphasis\">Save Project</nve-button>\n    <nve-icon-button slot=\"suffix\" icon-name=\"download\"></nve-icon-button>\n    <nve-divider slot=\"suffix\" orientation=\"vertical\"></nve-divider>\n    <nve-button-group slot=\"suffix\" container=\"rounded\">\n      <nve-icon-button icon-name=\"code\"></nve-icon-button>\n      <nve-icon-button selected icon-name=\"split-vertical\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-horizontal\"></nve-icon-button>\n      <nve-icon-button icon-name=\"split-none\"></nve-icon-button>\n    </nve-button-group>\n  </nve-toolbar>\n\n  <nve-page-panel slot=\"left\" size=\"sm\">\n    <nve-page-panel-header>\n      Outline\n    </nve-page-panel-header>  \n    <nve-page-panel-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">html</a></nve-tree-node>\n        <nve-tree-node expanded>\n          head\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">link</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          body\n          <nve-tree-node><a href=\"#\">nve-badge</a></nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel id=\"console-panel\" slot=\"bottom\" size=\"sm\">\n    <nve-icon-button commandfor=\"console-panel\" command=\"--close\" slot=\"actions\" container=\"inline\" icon-name=\"cancel\" aria-label=\"close\"></nve-icon-button>\n    <nve-page-panel-content>console output</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-toolbar slot=\"footer\">\n    <nve-icon-button icon-name=\"information-circle-stroke\"></nve-icon-button>\n    <span nve-text=\"body sm muted\">last updated 12 mins ago</span>\n  </nve-toolbar>\n</nve-page>\n  `\n};\n\n/**\n * @summary Resizable left panel with drag handle for adjustable sidebar width. Use when users need to control the balance between navigation or outline panels and main content area.\n */\nexport const Resize = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel style=\"width: 200px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" min=\"100\" max=\"400\" value=\"200\" step=\"20\" orientation=\"vertical\"></nve-resize-handle>\n</nve-page>\n\n<script type=\"module\">\n  const handle = document.querySelector('nve-resize-handle');\n  const panel = document.querySelector('nve-page-panel');\n  handle.addEventListener('input', e => panel.style.width = e.target.value + 'px');\n</script>\n  `\n};\n\n/**\n * @summary Multi-panel resizable layout with independent drag handles on left, right, and bottom panels. Use for complex workspaces like IDEs or dashboards where users need to customize the size of each content region independently.\n */\nexport const ResizeMulti = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel style=\"width: 320px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n\n  <nve-resize-handle slot=\"bottom\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n  <nve-page-panel style=\"height: 320px\" slot=\"bottom\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-resize-handle slot=\"right\" dir=\"rtl\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n  <nve-page-panel style=\"width: 320px\" slot=\"right\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n\n<script type=\"module\">\n  const leftHandle = document.querySelector('nve-resize-handle[slot=left]');\n  const leftPanel = document.querySelector('nve-page-panel[slot=left]');\n  leftHandle.addEventListener('input', e => leftPanel.style.width = e.target.value + 'px');\n\n  const rightHandle = document.querySelector('nve-resize-handle[slot=right]');\n  const rightPanel = document.querySelector('nve-page-panel[slot=right]');\n  rightHandle.addEventListener('input', e => rightPanel.style.width = e.target.value + 'px');\n\n  const bottomHandle = document.querySelector('nve-resize-handle[slot=bottom]');\n  const bottomPanel = document.querySelector('nve-page-panel[slot=bottom]');\n  bottomHandle.addEventListener('input', e => bottomPanel.style.height = e.target.value + 'px');\n</script>\n  `\n};\n\n/**\n * @summary Resize handle with snap-to-boundary behavior on double-click for quickly toggling a panel between collapsed and expanded states. Use for detail panels that users frequently show and hide.\n */\nexport const ResizeSnap = {\n  render: () => html`\n<nve-page style=\"--padding: var(--nve-ref-space-lg)\">\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <p nve-text=\"body\">Double click the resize handle to snap to the min or max.</p>\n\n  <nve-page-panel style=\"width: 320px\" slot=\"left\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n  <nve-resize-handle slot=\"left\" orientation=\"vertical\" min=\"100\" max=\"480\" value=\"320\" step=\"20\"></nve-resize-handle>\n</nve-page>\n<script type=\"module\">\n  const leftHandle = document.querySelector('nve-resize-handle[slot=left]');\n  const leftPanel = document.querySelector('nve-page-panel[slot=left]');\n  leftHandle.addEventListener('input', e => leftPanel.style.width = e.target.value + 'px');\n</script>\n  `\n};\n\n/**\n * @summary Example of using explicit event listeners to control the state of a page panel.\n * @deprecated Use Page Panel with Invoker Command API to dynamically open and close page panels.\n * @tags test-case\n */\nexport const InteractionPanel = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-icon-button slot=\"prefix\" container=\"flat\" icon-name=\"menu\" aria-label=\"menu\"></nve-icon-button>\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel slot=\"left\" size=\"sm\" closable hidden>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Panel Header</h3>\n    </nve-page-panel-header>  \n    <nve-page-panel-content>\n    <p nve-text=\"body\">Panel Content</p>\n    </nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n</nve-page>\n<script type=\"module\">\n  const button = document.querySelector('[aria-label=\"menu\"]');\n  const panel = document.querySelector('nve-page-panel');\n\n  button.addEventListener('click', () => panel.hidden = !panel.hidden);\n  panel.addEventListener('close', () => panel.hidden = true);\n</script>\n  `\n};\n\n/**\n * @summary Expandable page panels in left, right, and bottom slots.\n * @deprecated Use Page Panel with Invoker Command API to dynamically open and close page panels with slotted icon buttons.\n */\nexport const PanelExpandableState = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel expandable slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel expandable slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel expandable slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n\n/**\n * @summary Closable page panels in left, right, and bottom slots.\n * @deprecated Use Page Panel with Invoker Command API to dynamically open and close page panels with slotted icon buttons.\n */\nexport const PanelClosableState = {\n  render: () => html`\n<nve-page>\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n    <nve-button selected container=\"flat\">Link 1</nve-button>\n    <nve-button container=\"flat\">Link 2</nve-button>\n    <nve-icon-button interaction=\"emphasis\" slot=\"suffix\" size=\"sm\">EL</nve-icon-button>\n  </nve-page-header>\n\n  <nve-page-panel closable slot=\"left\" size=\"sm\">\n    <nve-page-panel-content>left</nve-page-panel-content>\n  </nve-page-panel>\n\n  <main nve-layout=\"column gap:lg pad:lg align:horizontal-stretch\">\n    <h1 nve-text=\"heading\">main</h1>\n    <p nve-text=\"body\">page content</p>\n  </main>\n\n  <nve-page-panel closable slot=\"right\" size=\"sm\">\n    <nve-page-panel-content>right</nve-page-panel-content>\n  </nve-page-panel>\n\n  <nve-page-panel closable slot=\"bottom\" size=\"sm\">\n    <nve-page-panel-content>bottom</nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n  `\n};\n"],"mappings":";AAIA,IAAA,IAAS"}