@nvidia-elements/core 0.0.3 → 0.0.5

package/dist/tabs/tabs.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.examples.js","names":[],"sources":["../../src/tabs/tabs.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Tabs',\n  component: 'nve-tabs',\n};\n\n/**\n * @summary Basic tabs component for organizing content into selectable sections with disabled state support.\n */\nexport const Default = {\n  render: () => html`\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-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless tabs variant for minimal visual styling without border emphasis.\n * @tags test-case\n */\nexport const BorderlessTabs = {\n  render: () => html`\n<nve-tabs borderless 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-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with custom border background styling for brand-specific visual customization.\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n<nve-tabs behavior-select style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none;\">\n  <nve-tabs-item selected>\n    Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 3\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with notification dots for indicating unread content or alerts within tab sections.\n */\nexport const WithDots = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item>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-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Vertical tabs layout for sidebar navigation and vertical content organization patterns.\n */\nexport const VerticalTabs = {\n  render: () => html`\n<nve-tabs vertical behavior-select style=\"width: 250px\">\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-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.\n * @tags test-case\n */\nexport const BorderlessVerticalTabs = {\n  render: () => html`\n<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item>\n    <nve-icon name=\"gear\"></nve-icon> Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"person\"></nve-icon> Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item selected>\n    <nve-icon name=\"beaker\"></nve-icon> Tab 3\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"add-grid\"></nve-icon> Tab 4\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Stateless tabs for external state management without built-in selection behavior.\n */\nexport const StatelessTabs = {\n  render: () => html`\n<nve-tabs>\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-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with link navigation for routing-based tab switching and page navigation.\n */\nexport const Links = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.\n * @tags test-case\n */\nexport const OverflowTabs = {\n  render: () => html`\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-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n  <nve-tabs-item>Tab 6</nve-tabs-item>\n  <nve-tabs-item>Tab 7</nve-tabs-item>\n  <nve-tabs-item>Tab 8</nve-tabs-item>\n  <nve-tabs-item>Tab 9</nve-tabs-item>\n  <nve-tabs-item>Tab 10</nve-tabs-item>\n  <nve-tabs-item>Tab 11</nve-tabs-item>\n  <nve-tabs-item>Tab 12</nve-tabs-item>\n  <nve-tabs-item>Tab 13</nve-tabs-item>\n  <nve-tabs-item>Tab 14</nve-tabs-item>\n  <nve-tabs-item>Tab 15</nve-tabs-item>\n  <nve-tabs-item>Tab 16</nve-tabs-item>\n  <nve-tabs-item>Tab 17</nve-tabs-item>\n  <nve-tabs-item>Tab 18</nve-tabs-item>\n  <nve-tabs-item>Tab 19</nve-tabs-item>\n  <nve-tabs-item>Tab 20</nve-tabs-item>\n</nve-tabs>`,\n};\n\n/**\n * @summary Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.\n * @tags test-case\n */\nexport const WithTooltips = {\n  render: () => html`\n<nve-tooltip id=\"tab1\">Tooltip for tab 1</nve-tooltip>\n<nve-tooltip id=\"tab2\">Tooltip for tab 2</nve-tooltip>\n<nve-tooltip id=\"tab3\">Tooltip for tab 3</nve-tooltip>\n<nve-tabs behavior-select>\n  <nve-tabs-item selected popovertarget=\"tab1\">Tab 1</nve-tabs-item>\n  <nve-tabs-item popovertarget=\"tab2\">Tab 2</nve-tabs-item>\n  <nve-tabs-item id=\"tab-item-3\" popovertarget=\"tab3\">Tab 3</nve-tabs-item>\n</nve-tabs>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"tabs.examples.js","names":[],"sources":["../../src/tabs/tabs.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/tabs/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/dot/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Tabs',\n  component: 'nve-tabs'\n};\n\n/**\n * @summary Tabs group component for organizing content into selectable sections with disabled state support.\n */\nexport const Default = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    overview content\n  </div>\n  <div slot=\"details\">\n    details content\n  </div>\n  <div slot=\"settings\">\n    settings content\n  </div>\n</nve-tabs-group>`\n};\n\n\n/**\n * @summary Borderless tabs variant for minimal visual styling without border emphasis.\n * @tags test-case\n */\nexport const BorderlessTabs = {\n  render: () => html`\n<nve-tabs borderless 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-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with custom border background styling for brand-specific visual customization.\n * @tags test-case\n */\nexport const BorderBackground = {\n  render: () => html`\n<nve-tabs behavior-select style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none;\">\n  <nve-tabs-item selected>\n    Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item>\n    Tab 3\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with notification dots for indicating unread content or alerts within tab sections.\n */\nexport const WithDots = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item>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-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Vertical tabs layout for sidebar navigation and vertical content organization patterns.\n */\nexport const VerticalTabs = {\n  render: () => html`\n<nve-tabs vertical behavior-select style=\"width: 250px\">\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-item disabled>Disabled</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.\n * @tags test-case\n */\nexport const BorderlessVerticalTabs = {\n  render: () => html`\n<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item>\n    <nve-icon name=\"gear\"></nve-icon> Tab 1\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"person\"></nve-icon> Tab 2\n  </nve-tabs-item>\n  <nve-tabs-item selected>\n    <nve-icon name=\"beaker\"></nve-icon> Tab 3\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon name=\"add-grid\"></nve-icon> Tab 4\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Stateless tabs for external state management without built-in selection behavior.\n */\nexport const StatelessTabs = {\n  render: () => html`\n<nve-tabs>\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-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with link navigation for routing-based tab switching and page navigation.\n */\nexport const Links = {\n  render: () => html`\n<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.\n * @tags test-case\n */\nexport const OverflowTabs = {\n  render: () => html`\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-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n  <nve-tabs-item>Tab 6</nve-tabs-item>\n  <nve-tabs-item>Tab 7</nve-tabs-item>\n  <nve-tabs-item>Tab 8</nve-tabs-item>\n  <nve-tabs-item>Tab 9</nve-tabs-item>\n  <nve-tabs-item>Tab 10</nve-tabs-item>\n  <nve-tabs-item>Tab 11</nve-tabs-item>\n  <nve-tabs-item>Tab 12</nve-tabs-item>\n  <nve-tabs-item>Tab 13</nve-tabs-item>\n  <nve-tabs-item>Tab 14</nve-tabs-item>\n  <nve-tabs-item>Tab 15</nve-tabs-item>\n  <nve-tabs-item>Tab 16</nve-tabs-item>\n  <nve-tabs-item>Tab 17</nve-tabs-item>\n  <nve-tabs-item>Tab 18</nve-tabs-item>\n  <nve-tabs-item>Tab 19</nve-tabs-item>\n  <nve-tabs-item>Tab 20</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.\n * @tags test-case\n */\nexport const WithTooltips = {\n  render: () => html`\n<nve-tooltip id=\"tab1\">Tooltip for tab 1</nve-tooltip>\n<nve-tooltip id=\"tab2\">Tooltip for tab 2</nve-tooltip>\n<nve-tooltip id=\"tab3\">Tooltip for tab 3</nve-tooltip>\n<nve-tabs behavior-select>\n  <nve-tabs-item selected popovertarget=\"tab1\">Tab 1</nve-tabs-item>\n  <nve-tabs-item popovertarget=\"tab2\">Tab 2</nve-tabs-item>\n  <nve-tabs-item id=\"tab-item-3\" popovertarget=\"tab3\">Tab 3</nve-tabs-item>\n</nve-tabs>`\n};\n\n/**\n * @summary Group tabs with slot-matched panels and structured card content when one selected value should control both the tab state and revealed details.\n */\nexport const GroupPanels = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\">\n    <nve-card style=\"width: 100%; min-width: 320px;\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.\n */\nexport const GroupVerticalPanels = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.\n */\nexport const GroupVerticalEnd = {\n  render: () => html`\n<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px;\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>`\n};\n\n/**\n * @summary Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.\n */\nexport const ExternalControls = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">Overview</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px;\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/tabs/tabs.examples.json

@@ -5,8 +5,8 @@
     {
       "id": "core-tabs_default",
       "name": "Default",
-      "template": "<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-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item disabled>Disabled</nve-tabs-item>\n</nve-tabs>\n",
-      "summary": "Basic tabs component for organizing content into selectable sections with disabled state support.",
+      "template": "<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">overview content</div>\n  <div slot=\"details\">details content</div>\n  <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n",
+      "summary": "Tabs group component for organizing content into selectable sections with disabled state support.",
       "description": "",
       "composition": false,
       "tags": []
@@ -101,6 +101,42 @@
       "tags": [
         "test-case"
       ]
+    },
+    {
+      "id": "core-tabs_group-panels",
+      "name": "GroupPanels",
+      "template": "<nve-tabs-group id=\"tab-group\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    <nve-card style=\"width: 100%; min-width: 320px\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\">\n    <nve-card style=\"width: 100%; min-width: 320px\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\">\n    <nve-card style=\"width: 100%; min-width: 320px\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
+      "summary": "Group tabs with slot-matched panels and structured card content when one selected value should control both the tab state and revealed details.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_group-vertical-panels",
+      "name": "GroupVerticalPanels",
+      "template": "<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\"\n      >Overview</nve-tabs-item\n    >\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
+      "summary": "Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_group-vertical-end",
+      "name": "GroupVerticalEnd",
+      "template": "<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\"\n      >Overview</nve-tabs-item\n    >\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
+      "summary": "Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "core-tabs_external-controls",
+      "name": "ExternalControls",
+      "template": "<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\"\n        >Overview</nve-tabs-item\n      >\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>\n",
+      "summary": "Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.",
+      "description": "",
+      "composition": true,
+      "tags": []
     }
   ]
 }

package/dist/tabs/tabs2.js

@@ -20,7 +20,7 @@ var _ = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "0.0.3",
+			version: "0.0.5",
 			parents: ["nve-tabs"]
 		};
 	}
@@ -51,7 +51,7 @@ var v = class extends p {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "0.0.3",
+			version: "0.0.5",
 			children: ["nve-tabs-item"]
 		};
 	}

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var f = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	static {

package/dist/textarea/textarea2.js

@@ -9,7 +9,7 @@ var r = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 };

package/dist/time/time2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-time",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	static {

package/dist/toast/toast2.js

@@ -23,7 +23,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toast",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	static {

package/dist/toggletip/toggletip-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-footer",
-			version: "0.0.3",
+			version: "0.0.5",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-header",
-			version: "0.0.3",
+			version: "0.0.5",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip2.js

@@ -24,7 +24,7 @@ var g = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	static {

package/dist/toolbar/toolbar2.js

@@ -21,7 +21,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-toolbar",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	static {

package/dist/tooltip/tooltip2.js

@@ -19,7 +19,7 @@ var d = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-tooltip",
-			version: "0.0.3"
+			version: "0.0.5"
 		};
 	}
 	render() {

package/dist/tree/tree-node.d.ts

@@ -17,7 +17,7 @@ import { Checkbox } from '../checkbox';
  * @command --close - use to close the node
  * @command --toggle - use to toggle open / closed state of the node
  * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.
- * @slot content - Use for extended long form content containing interactive elements or form inputs.
+ * @slot content - Use only for extended long form content containing interactive elements or form inputs.
  * @cssprop --color
  * @cssprop --border-radius
  * @cssprop --font-size

package/dist/tree/tree-node.js

@@ -1,5 +1,5 @@
 //#region src/tree/tree-node.css?inline
-var e = ":host{--color: var(--nve-sys-interaction-color);--border-radius: var(--nve-ref-border-radius-xs);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-regular);--min-height: var(--nve-ref-size-800);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--text-wrap: nowrap;width:100%;cursor:default}[internal-host]{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-wrap:var(--text-wrap);display:flex;align-content:center;flex-wrap:wrap;width:100%}slot{display:flex;flex-direction:column;width:100%}slot[name=nodes]{padding-inline-start:var(--nve-ref-size-500);display:flex;flex-direction:column;align-items:start}slot:not(:has-slotted){display:none!important}[part=_node]{display:flex;align-items:center;width:100%}.node-title{border-radius:var(--border-radius);border-inline-start:var(--nve-ref-border-width-md) solid transparent;margin-inline-start:var(--nve-ref-space-xxxs);padding:var(--nve-ref-size-200) var(--nve-ref-size-100);min-height:var(--min-height);width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--nve-ref-space-xxs)}[part=_node-header]{display:flex;flex-direction:column;width:100%;position:relative;min-width:fit-content}:host(:focus-visible) [part=_node-header],::slotted(a:focus-visible):after{outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}[name=content]{padding:var(--nve-ref-size-200);display:block}[part=_nodes]{width:100%;position:relative;display:block;padding-inline-start:var(--nve-ref-size-200);overflow:hidden;transition:height var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}:host([expanded]) [part=_nodes]{height:auto;height:calc-size(max-content,size)}[part=_nodes]:before{border-inline-start:var(--node-border);inset-inline-start:var(--nve-ref-size-150);inset-block:0;display:block;content:\"\";position:absolute}nve-icon-button{--width: var(--nve-ref-size-400);outline:0!important}nve-icon[name=caret]{transition:transform var(--nve-ref-animation-duration-150) cubic-bezier(.4,0,.2,1)}nve-checkbox{margin-inline-start:var(--nve-ref-space-xxs);margin-block-start:var(--nve-ref-space-xs);align-self:start}input{outline:0!important}::slotted(a){text-decoration:none!important;color:var(--color)!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}:host(:state(selected):state(selectable-single)) .node-title{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}:host(:state(selected):state(selectable-single)) .node-title:after{width:var(--nve-ref-border-width-md);border-radius:var(--nve-ref-border-radius-full);background:var(--nve-sys-accent-secondary-background);content:\"\";display:block;position:absolute;height:80%;inset-block-start:10%;inset-inline-start:calc(var(--nve-ref-size-50) * -1)}:host(:state(selectable-single)) .node-title{cursor:pointer}:host(:state(selectable-multi)){nve-icon-button{--width: var(--nve-ref-size-500)}slot[name=nodes]{padding-inline-start:var(--nve-ref-size-700)}[role=group]:before{inset-inline-start:var(--nve-ref-size-200)}}:host(:state(highlighted)){--border-radius: 0;.node-title{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}}.node-title{background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)!important;&:hover{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}}";
+var e = ":host{--color: var(--nve-sys-interaction-color);--border-radius: var(--nve-ref-border-radius-xs);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-regular);--min-height: var(--nve-ref-size-800);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--text-wrap: nowrap;width:100%;cursor:default}[internal-host]{color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);text-wrap:var(--text-wrap);display:flex;align-content:center;flex-wrap:wrap;width:100%}slot{display:flex;flex-direction:column;width:100%}slot[name=nodes]{padding-inline-start:var(--nve-ref-size-500);display:flex;flex-direction:column;align-items:start}slot:not(:has-slotted){display:none!important}[part=_node]{display:flex;align-items:center;width:100%}.node-title{border-radius:var(--border-radius);border-inline-start:var(--nve-ref-border-width-md) solid transparent;margin-inline-start:var(--nve-ref-space-xxxs);padding:var(--nve-ref-size-200) var(--nve-ref-size-100);min-height:var(--min-height);width:100%;display:block}[part=_node-header]{display:flex;flex-direction:column;width:100%;position:relative;min-width:fit-content}:host(:focus-visible) [part=_node-header],::slotted(a:focus-visible):after{outline:Highlight solid 2px!important;outline:5px auto -webkit-focus-ring-color!important}[name=content]{padding:var(--nve-ref-size-200);display:block}[part=_nodes]{width:100%;position:relative;display:block;padding-inline-start:var(--nve-ref-size-200);overflow:hidden;transition:height var(--nve-ref-animation-duration-200) cubic-bezier(.4,0,.2,1)}:host([expanded]) [part=_nodes]{height:auto;height:calc-size(max-content,size)}[part=_nodes]:before{border-inline-start:var(--node-border);inset-inline-start:var(--nve-ref-size-150);inset-block:0;display:block;content:\"\";position:absolute}nve-icon-button{--width: var(--nve-ref-size-400);outline:0!important}nve-icon[name=caret]{transition:transform var(--nve-ref-animation-duration-150) cubic-bezier(.4,0,.2,1)}nve-checkbox{margin-inline-start:var(--nve-ref-space-xxs);margin-block-start:var(--nve-ref-space-xs);align-self:start}input{outline:0!important}::slotted(a){text-decoration:none!important;color:var(--color)!important;outline:0}::slotted(a):after{display:block;content:\" \";inset:0;position:absolute}:host(:state(selected):state(selectable-single)) .node-title{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}:host(:state(selected):state(selectable-single)) .node-title:after{width:var(--nve-ref-border-width-md);border-radius:var(--nve-ref-border-radius-full);background:var(--nve-sys-accent-secondary-background);content:\"\";display:block;position:absolute;height:80%;inset-block-start:10%;inset-inline-start:calc(var(--nve-ref-size-50) * -1)}:host(:state(selectable-single)) .node-title{cursor:pointer}:host(:state(selectable-multi)){nve-icon-button{--width: var(--nve-ref-size-500)}slot[name=nodes]{padding-inline-start:var(--nve-ref-size-700)}[role=group]:before{inset-inline-start:var(--nve-ref-size-200)}}:host(:state(highlighted)){--border-radius: 0;.node-title{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}}.node-title{background-image:linear-gradient(color-mix(in oklab,var(--nve-sys-interaction-state-base) 100%,var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)) 0 0)!important;&:hover{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}}";
 //#endregion
 export { e as default };
 

package/dist/tree/tree-node.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node.js","names":[],"sources":["../../src/tree/tree-node.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-interaction-color);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --min-height: var(--nve-ref-size-800);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --text-wrap: nowrap;\n  width: 100%;\n  cursor: default;\n}\n\n[internal-host] {\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  text-wrap: var(--text-wrap);\n  display: flex;\n  align-content: center;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\nslot[name='nodes'] {\n  padding-inline-start: var(--nve-ref-size-500);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\n\nslot:not(:has-slotted) {\n  display: none !important;\n}\n\n[part='_node'] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.node-title {\n  border-radius: var(--border-radius);\n  border-inline-start: var(--nve-ref-border-width-md) solid transparent;\n  margin-inline-start: var(--nve-ref-space-xxxs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-100);\n  min-height: var(--min-height);\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--nve-ref-space-xxs);\n}\n\n[part='_node-header'] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n  min-width: fit-content;\n}\n\n:host(:focus-visible) [part='_node-header'],\n::slotted(a:focus-visible)::after {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[name='content'] {\n  padding: var(--nve-ref-size-200);\n  display: block;\n}\n\n[part='_nodes'] {\n  width: 100%;\n  position: relative;\n  display: block;\n  padding-inline-start: var(--nve-ref-size-200);\n  overflow: hidden;\n  transition: height var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([expanded]) [part='_nodes'] {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n[part='_nodes']::before {\n  border-inline-start: var(--node-border);\n  inset-inline-start: var(--nve-ref-size-150);\n  inset-block: 0;\n  display: block;\n  content: '';\n  position: absolute;\n}\n\nnve-icon-button {\n  --width: var(--nve-ref-size-400);\n  outline: 0 !important;\n}\n\nnve-icon[name='caret'] {\n  transition: transform var(--nve-ref-animation-duration-150) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nnve-checkbox {\n  margin-inline-start: var(--nve-ref-space-xxs);\n  margin-block-start: var(--nve-ref-space-xs);\n  align-self: start;\n}\n\ninput {\n  outline: 0 !important;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n:host(:state(selected):state(selectable-single)) .node-title {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host(:state(selected):state(selectable-single)) .node-title::after {\n  width: var(--nve-ref-border-width-md);\n  border-radius: var(--nve-ref-border-radius-full);\n  background: var(--nve-sys-accent-secondary-background);\n  content: '';\n  display: block;\n  position: absolute;\n  height: 80%;\n  inset-block-start: 10%;\n  inset-inline-start: calc(var(--nve-ref-size-50) * -1);\n}\n\n:host(:state(selectable-single)) .node-title {\n  cursor: pointer;\n}\n\n:host(:state(selectable-multi)) {\n  nve-icon-button {\n    --width: var(--nve-ref-size-500);\n  }\n\n  slot[name='nodes'] {\n    padding-inline-start: var(--nve-ref-size-700);\n  }\n\n  [role='group']::before {\n    inset-inline-start: var(--nve-ref-size-200);\n  }\n}\n\n:host(:state(highlighted)) {\n  --border-radius: 0;\n\n  .node-title {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n  }\n}\n\n.node-title {\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n\n  &:hover {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tree-node.js","names":[],"sources":["../../src/tree/tree-node.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-interaction-color);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --min-height: var(--nve-ref-size-800);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --text-wrap: nowrap;\n  width: 100%;\n  cursor: default;\n}\n\n[internal-host] {\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  text-wrap: var(--text-wrap);\n  display: flex;\n  align-content: center;\n  flex-wrap: wrap;\n  width: 100%;\n}\n\nslot {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\nslot[name='nodes'] {\n  padding-inline-start: var(--nve-ref-size-500);\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n}\n\nslot:not(:has-slotted) {\n  display: none !important;\n}\n\n[part='_node'] {\n  display: flex;\n  align-items: center;\n  width: 100%;\n}\n\n.node-title {\n  border-radius: var(--border-radius);\n  border-inline-start: var(--nve-ref-border-width-md) solid transparent;\n  margin-inline-start: var(--nve-ref-space-xxxs);\n  padding: var(--nve-ref-size-200) var(--nve-ref-size-100);\n  min-height: var(--min-height);\n  width: 100%;\n  display: block;\n}\n\n[part='_node-header'] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  position: relative;\n  min-width: fit-content;\n}\n\n:host(:focus-visible) [part='_node-header'],\n::slotted(a:focus-visible)::after {\n  outline: Highlight solid 2px !important;\n  outline: 5px auto -webkit-focus-ring-color !important;\n}\n\n[name='content'] {\n  padding: var(--nve-ref-size-200);\n  display: block;\n}\n\n[part='_nodes'] {\n  width: 100%;\n  position: relative;\n  display: block;\n  padding-inline-start: var(--nve-ref-size-200);\n  overflow: hidden;\n  transition: height var(--nve-ref-animation-duration-200) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n:host([expanded]) [part='_nodes'] {\n  /* fallback for browsers that do not support intrinsic sizing keywords with calc-size() */\n  height: auto;\n\n  /* https://developer.chrome.com/docs/css-ui/animate-to-height-auto#animate_to_and_from_intrinsic_sizing_keywords_with_calc-size */\n  height: calc-size(max-content, size);\n}\n\n[part='_nodes']::before {\n  border-inline-start: var(--node-border);\n  inset-inline-start: var(--nve-ref-size-150);\n  inset-block: 0;\n  display: block;\n  content: '';\n  position: absolute;\n}\n\nnve-icon-button {\n  --width: var(--nve-ref-size-400);\n  outline: 0 !important;\n}\n\nnve-icon[name='caret'] {\n  transition: transform var(--nve-ref-animation-duration-150) cubic-bezier(0.4, 0, 0.2, 1);\n}\n\nnve-checkbox {\n  margin-inline-start: var(--nve-ref-space-xxs);\n  margin-block-start: var(--nve-ref-space-xs);\n  align-self: start;\n}\n\ninput {\n  outline: 0 !important;\n}\n\n::slotted(a) {\n  text-decoration: none !important;\n  color: var(--color) !important;\n  outline: 0;\n}\n\n::slotted(a)::after {\n  display: block;\n  content: ' ';\n  inset: 0;\n  position: absolute;\n}\n\n:host(:state(selected):state(selectable-single)) .node-title {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n:host(:state(selected):state(selectable-single)) .node-title::after {\n  width: var(--nve-ref-border-width-md);\n  border-radius: var(--nve-ref-border-radius-full);\n  background: var(--nve-sys-accent-secondary-background);\n  content: '';\n  display: block;\n  position: absolute;\n  height: 80%;\n  inset-block-start: 10%;\n  inset-inline-start: calc(var(--nve-ref-size-50) * -1);\n}\n\n:host(:state(selectable-single)) .node-title {\n  cursor: pointer;\n}\n\n:host(:state(selectable-multi)) {\n  nve-icon-button {\n    --width: var(--nve-ref-size-500);\n  }\n\n  slot[name='nodes'] {\n    padding-inline-start: var(--nve-ref-size-700);\n  }\n\n  [role='group']::before {\n    inset-inline-start: var(--nve-ref-size-200);\n  }\n}\n\n:host(:state(highlighted)) {\n  --border-radius: 0;\n\n  .node-title {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n  }\n}\n\n.node-title {\n  background-image: linear-gradient(\n    color-mix(\n        in oklab,\n        var(--nve-sys-interaction-state-base) 100%,\n        var(--nve-sys-interaction-state-mix) var(--nve-sys-interaction-state-ratio)\n      )\n      0 0\n  ) !important;\n\n  &:hover {\n    --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n  }\n}\n"],"mappings":""}

package/dist/tree/tree-node2.js

@@ -39,7 +39,7 @@ var E = class extends b {
 	static {
 		this.metadata = {
 			tag: "nve-tree-node",
-			version: "0.0.3",
+			version: "0.0.5",
 			parents: ["nve-tree", "nve-tree-node"]
 		};
 	}

package/dist/tree/tree-node2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree-node2.js","names":["#i18nController","#tree","#isExpandable","#nodeUpdate","#toggleExpand","#toggleMultiSelection","#nodeHeaderClick","#setupKeyNavInteractions","#typeExpandableController","#toggleExpandableState","#toggleSelection","#toggleSingleSelection","#typeSelectableController"],"sources":["../../src/tree/tree-node.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  I18nController,\n  TypeExpandableController,\n  TypeSelectableController,\n  attachInternals,\n  audit,\n  getFlattenedFocusableItems,\n  hostAttr,\n  scopedRegistry,\n  stateExpanded,\n  stateHighlighted,\n  stateSelected,\n  typeAnchor,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\n/**\n * @element nve-tree-node\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @event open - Dispatched when the node opens.\n * @event close - Dispatched when the node closes.\n * @event select - Dispatched when the node selection state changes.\n * @command --select - use to select the node\n * @command --deselect - use to deselect the node\n * @command --toggle-select - use to toggle the node selection state\n * @command --open - use to open the node\n * @command --close - use to close the node\n * @command --toggle - use to toggle open / closed state of the node\n * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.\n * @slot content - Use for extended long form content containing interactive elements or form inputs.\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --min-height\n * @cssprop --text-wrap\n * @cssprop --font-weight\n * @cssprop --width\n\n * @csspart icon-button - The icon button element\n * @csspart icon - The icon element\n * @csspart checkbox - The checkbox element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@typeSSR({ log: false }) // warning about ssr mismatch disabled as tree node will never be a 1:1 match in ssr due to performance constraints and slot complexity\n@typeAnchor()\n@stateSelected()\n@stateExpanded()\n@scopedRegistry()\n@stateHighlighted()\nexport class TreeNode extends LitElement {\n  /**\n   * Determines if node is in an expanded state.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether if node is in a selected state.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Determines whether a node can be expandable. Expandable by default if slotted nodes exist.\n   */\n  @property({ type: Boolean }) expandable = false;\n\n  /**\n   * Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.\n   */\n  @property({ type: String }) selectable: 'single' | 'multi';\n\n  /**\n   * Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.\n   */\n  @property({ type: Boolean }) highlighted = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  @hostAttr() slot = 'nodes';\n\n  get #tree() {\n    return this.closest<Tree>('nve-tree');\n  }\n\n  /**\n   * Returns list of child nodes\n   */\n  @queryAssignedElements({ slot: 'nodes' }) readonly nodes!: TreeNode[];\n\n  /* @private */\n  @state() indeterminate = false;\n\n  /* @private */\n  @state() behaviorExpand = false;\n\n  /* @private */\n  @state() behaviorSelect = false;\n\n  #typeExpandableController = new TypeExpandableController(this);\n\n  #typeSelectableController = new TypeSelectableController(this);\n\n  get #isExpandable() {\n    return this.expandable || this.expanded || !!this.nodes?.length;\n  }\n\n  static metadata = {\n    tag: 'nve-tree-node',\n    version: '0.0.0',\n    parents: ['nve-tree', 'nve-tree-node']\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon,\n    [Checkbox.metadata.tag]: Checkbox\n  };\n\n  static styles = useStyles([styles]);\n\n  declare _internals: ElementInternals;\n\n  /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n  render() {\n    return html`\n      <div internal-host @slotchange=${this.#nodeUpdate}>\n        <div part=\"_node\">\n          ${\n            this.#isExpandable\n              ? html`\n            <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @pointerup=${this.#toggleExpand} role=\"presentation\" tabindex=\"-1\" size=\"sm\" container=\"inline\" nofocus>\n              <nve-icon part=\"icon\" name=\"caret\" direction=${this.expanded ? 'down' : 'right'} size=\"sm\"></nve-icon>\n            </nve-icon-button>`\n              : nothing\n          }\n          ${\n            this.selectable === 'multi'\n              ? html`\n            <nve-checkbox part=\"checkbox\" nofocus>\n              <input type=\"checkbox\" @change=${this.#toggleMultiSelection} .checked=${this.selected} .indeterminate=${this.indeterminate} .ariaLabel=${this.i18n.expand} tabindex=\"-1\" />\n            </nve-checkbox>`\n              : nothing\n          }\n          <div tabindex=\"0\" part=\"_node-header\">\n            <slot tabindex=\"0\" class=\"node-title\" @click=${this.#nodeHeaderClick}></slot>\n            <slot name=\"content\" part=\"_content\"></slot>\n          </div>\n        </div>\n        <div role=\"group\" part=\"_nodes\"><slot name=\"nodes\"></slot></div>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'treeitem';\n    this.#setupKeyNavInteractions();\n    this.#nodeUpdate();\n  }\n\n  /** opens and sets the expanded state automatically if behaviorExpand is true */\n  open() {\n    this.#typeExpandableController.open();\n  }\n\n  /** closes and sets the expanded state automatically if behaviorExpand is true */\n  close() {\n    this.#typeExpandableController.close();\n  }\n\n  #nodeUpdate() {\n    this.requestUpdate();\n    this.#toggleExpandableState();\n  }\n\n  #toggleExpandableState() {\n    this.#isExpandable ? this._internals.states.add('is-expandable') : this._internals.states.delete('is-expandable');\n  }\n\n  #setupKeyNavInteractions() {\n    this.addEventListener('keyup', e => {\n      if (this.#isExpandable && e.code === 'ArrowLeft' && e.target === this) {\n        this.close();\n      }\n\n      if (this.#isExpandable && e.code === 'ArrowRight' && e.target === this) {\n        this.open();\n      }\n\n      if (e.code === 'Space' && e.target === this && this.selectable) {\n        e.preventDefault();\n        this.#toggleSelection();\n      }\n    });\n  }\n\n  #nodeHeaderClick(e: Event) {\n    const hasFocusableElements = getFlattenedFocusableItems(e.currentTarget as HTMLElement).length;\n    if (this.#isExpandable && !this.selectable && !hasFocusableElements) {\n      this.#toggleExpand();\n    }\n\n    if (this.selectable && (!hasFocusableElements || (e.target as HTMLElement).localName === 'a')) {\n      this.#toggleSelection();\n    }\n  }\n\n  #toggleExpand() {\n    this.#typeExpandableController.toggle();\n  }\n\n  #toggleSelection() {\n    if (this.selectable === 'single') {\n      this.#toggleSingleSelection();\n    }\n\n    if (this.selectable === 'multi') {\n      this.#toggleMultiSelection();\n    }\n  }\n\n  #toggleSingleSelection() {\n    this.#typeSelectableController.toggle();\n    if (this.behaviorSelect) {\n      this.#tree!.nodes.filter(n => n !== this).forEach(n => (n.selected = false));\n    }\n  }\n\n  #toggleMultiSelection() {\n    this.#typeSelectableController.toggle();\n\n    if (this.behaviorSelect) {\n      this.nodes.forEach(n => {\n        n.selected = this.selected;\n        n.indeterminate = false;\n      });\n      this.#tree!.nodes.forEach(node => updateNodeSelection(node));\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoEO,IAAA,IAAA,cAAuB,EAAW;;+BAIgB,oBAKA,sBAKb,uBAUC,gBAOR,MAAA,EAAqB,kBAGrC,8BAYM,0BAGC,0BAGA;;CA1B1B,KAAwC,IAAI,EAAqB,KAAK;CAUtE,KAAA,IAAY;AACV,SAAO,KAAK,QAAc,WAAW;;CAiBvC,KAA4B,IAAI,EAAyB,KAAK;CAE9D,KAA4B,IAAI,EAAyB,KAAK;CAE9D,KAAA,IAAoB;AAClB,SAAO,KAAK,cAAc,KAAK,YAAY,CAAC,CAAC,KAAK,OAAO;;;kBAGzC;GAChB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,YAAY,gBAAA;GACvB;;;4BAE2B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;GAC1B;;;gBAEe,EAAU,CAAC,EAAO,CAAC;;CAKnC,SAAS;AACP,SAAO,CAAI,mCACwB,MAAA,EAAiB,sBAG5C,MAAA,IACI,CAAI,uFAC6E,MAAA,EAAmB,yHACvD,KAAK,WAAW,SAAS,QAAQ,6CAE9E,EACL,GAEC,KAAK,eAAe,UAChB,CAAI,yEAE2B,MAAA,EAA2B,cAAY,KAAK,SAAS,oBAAkB,KAAK,cAAc,gBAAc,KAAK,KAAK,OAAO,mCAExJ,EACL,sFAEgD,MAAA,EAAsB;;CAS/E,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,YACvB,MAAA,GAA+B,EAC/B,MAAA,GAAkB;;CAIpB,OAAO;AACL,QAAA,EAA+B,MAAM;;CAIvC,QAAQ;AACN,QAAA,EAA+B,OAAO;;CAGxC,KAAc;AAEZ,EADA,KAAK,eAAe,EACpB,MAAA,GAA6B;;CAG/B,KAAyB;AACvB,QAAA,IAAqB,KAAK,WAAW,OAAO,IAAI,gBAAgB,GAAG,KAAK,WAAW,OAAO,OAAO,gBAAgB;;CAGnH,KAA2B;AACzB,OAAK,iBAAiB,UAAS,MAAK;AASlC,GARI,MAAA,KAAsB,EAAE,SAAS,eAAe,EAAE,WAAW,QAC/D,KAAK,OAAO,EAGV,MAAA,KAAsB,EAAE,SAAS,gBAAgB,EAAE,WAAW,QAChE,KAAK,MAAM,EAGT,EAAE,SAAS,WAAW,EAAE,WAAW,QAAQ,KAAK,eAClD,EAAE,gBAAgB,EAClB,MAAA,GAAuB;IAEzB;;CAGJ,GAAiB,GAAU;EACzB,IAAM,IAAuB,EAA2B,EAAE,cAA6B,CAAC;AAKxF,EAJI,MAAA,KAAsB,CAAC,KAAK,cAAc,CAAC,KAC7C,MAAA,GAAoB,EAGlB,KAAK,eAAe,CAAC,KAAyB,EAAE,OAAuB,cAAc,QACvF,MAAA,GAAuB;;CAI3B,KAAgB;AACd,QAAA,EAA+B,QAAQ;;CAGzC,KAAmB;AAKjB,EAJI,KAAK,eAAe,YACtB,MAAA,GAA6B,EAG3B,KAAK,eAAe,WACtB,MAAA,GAA4B;;CAIhC,KAAyB;AAEvB,EADA,MAAA,EAA+B,QAAQ,EACnC,KAAK,kBACP,MAAA,EAAY,MAAM,QAAO,MAAK,MAAM,KAAK,CAAC,SAAQ,MAAM,EAAE,WAAW,GAAO;;CAIhF,KAAwB;AAGtB,EAFA,MAAA,EAA+B,QAAQ,EAEnC,KAAK,mBACP,KAAK,MAAM,SAAQ,MAAK;AAEtB,GADA,EAAE,WAAW,KAAK,UAClB,EAAE,gBAAgB;IAClB,EACF,MAAA,EAAY,MAAM,SAAQ,MAAQ,EAAoB,EAAK,CAAC;;;GA7L/D,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAO3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAG1B,GAAU,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KASV,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAGxC,GAAO,CAAA,EAAA,EAAA,WAAA,iBAAA,KAAA,EAAA,KAGP,GAAO,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGP,GAAO,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA;CA3DT,GAAO;CACP,EAAQ,EAAE,KAAK,IAAO,CAAC;CACvB,GAAY;CACZ,GAAe;CACf,GAAe;CACf,GAAgB;CAChB,GAAA"}
+{"version":3,"file":"tree-node2.js","names":["#i18nController","#tree","#isExpandable","#nodeUpdate","#toggleExpand","#toggleMultiSelection","#nodeHeaderClick","#setupKeyNavInteractions","#typeExpandableController","#toggleExpandableState","#toggleSelection","#toggleSingleSelection","#typeSelectableController"],"sources":["../../src/tree/tree-node.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { state } from 'lit/decorators/state.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  I18nController,\n  TypeExpandableController,\n  TypeSelectableController,\n  attachInternals,\n  audit,\n  getFlattenedFocusableItems,\n  hostAttr,\n  scopedRegistry,\n  stateExpanded,\n  stateHighlighted,\n  stateSelected,\n  typeAnchor,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { Checkbox } from '@nvidia-elements/core/checkbox';\nimport type { Tree } from './tree.js';\nimport styles from './tree-node.css?inline';\nimport { updateNodeSelection } from './utils.js';\n\n/**\n * @element nve-tree-node\n * @description A tree view widget presents a hierarchical list. Any item in the hierarchy may have child items, and items that have children can expand or collapse to show or hide the children.\n * @since 1.2.0\n * @entrypoint \\@nvidia-elements/core/tree\n * @event open - Dispatched when the node opens.\n * @event close - Dispatched when the node closes.\n * @event select - Dispatched when the node selection state changes.\n * @command --select - use to select the node\n * @command --deselect - use to deselect the node\n * @command --toggle-select - use to toggle the node selection state\n * @command --open - use to open the node\n * @command --close - use to close the node\n * @command --toggle - use to toggle open / closed state of the node\n * @slot - Use default slot for basic text content or nested <nve-tree-node> elements.\n * @slot content - Use only for extended long form content containing interactive elements or form inputs.\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --font-size\n * @cssprop --min-height\n * @cssprop --text-wrap\n * @cssprop --font-weight\n * @cssprop --width\n\n * @csspart icon-button - The icon button element\n * @csspart icon - The icon element\n * @csspart checkbox - The checkbox element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/treeview/\n *\n */\n@audit()\n@typeSSR({ log: false }) // warning about ssr mismatch disabled as tree node will never be a 1:1 match in ssr due to performance constraints and slot complexity\n@typeAnchor()\n@stateSelected()\n@stateExpanded()\n@scopedRegistry()\n@stateHighlighted()\nexport class TreeNode extends LitElement {\n  /**\n   * Determines if node is in an expanded state.\n   */\n  @property({ type: Boolean, reflect: true }) expanded = false;\n\n  /**\n   * Determines whether if node is in a selected state.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /**\n   * Determines whether a node can be expandable. Expandable by default if slotted nodes exist.\n   */\n  @property({ type: Boolean }) expandable = false;\n\n  /**\n   * Determines whether a node can be in a selected state. Nodes can be in a single or multi select state.\n   */\n  @property({ type: String }) selectable: 'single' | 'multi';\n\n  /**\n   * Determines the highlighted state of the element. Highlighted states serve non-interactive selections where nodes may relate to other selected portions of the UI.\n   */\n  @property({ type: Boolean }) highlighted = false;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  @hostAttr() slot = 'nodes';\n\n  get #tree() {\n    return this.closest<Tree>('nve-tree');\n  }\n\n  /**\n   * Returns list of child nodes\n   */\n  @queryAssignedElements({ slot: 'nodes' }) readonly nodes!: TreeNode[];\n\n  /* @private */\n  @state() indeterminate = false;\n\n  /* @private */\n  @state() behaviorExpand = false;\n\n  /* @private */\n  @state() behaviorSelect = false;\n\n  #typeExpandableController = new TypeExpandableController(this);\n\n  #typeSelectableController = new TypeSelectableController(this);\n\n  get #isExpandable() {\n    return this.expandable || this.expanded || !!this.nodes?.length;\n  }\n\n  static metadata = {\n    tag: 'nve-tree-node',\n    version: '0.0.0',\n    parents: ['nve-tree', 'nve-tree-node']\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon,\n    [Checkbox.metadata.tag]: Checkbox\n  };\n\n  static styles = useStyles([styles]);\n\n  declare _internals: ElementInternals;\n\n  /* eslint-disable @nvidia-elements/lint/no-missing-control-label */\n  render() {\n    return html`\n      <div internal-host @slotchange=${this.#nodeUpdate}>\n        <div part=\"_node\">\n          ${\n            this.#isExpandable\n              ? html`\n            <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @pointerup=${this.#toggleExpand} role=\"presentation\" tabindex=\"-1\" size=\"sm\" container=\"inline\" nofocus>\n              <nve-icon part=\"icon\" name=\"caret\" direction=${this.expanded ? 'down' : 'right'} size=\"sm\"></nve-icon>\n            </nve-icon-button>`\n              : nothing\n          }\n          ${\n            this.selectable === 'multi'\n              ? html`\n            <nve-checkbox part=\"checkbox\" nofocus>\n              <input type=\"checkbox\" @change=${this.#toggleMultiSelection} .checked=${this.selected} .indeterminate=${this.indeterminate} .ariaLabel=${this.i18n.expand} tabindex=\"-1\" />\n            </nve-checkbox>`\n              : nothing\n          }\n          <div tabindex=\"0\" part=\"_node-header\">\n            <slot tabindex=\"0\" class=\"node-title\" @click=${this.#nodeHeaderClick}></slot>\n            <slot name=\"content\" part=\"_content\"></slot>\n          </div>\n        </div>\n        <div role=\"group\" part=\"_nodes\"><slot name=\"nodes\"></slot></div>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'treeitem';\n    this.#setupKeyNavInteractions();\n    this.#nodeUpdate();\n  }\n\n  /** opens and sets the expanded state automatically if behaviorExpand is true */\n  open() {\n    this.#typeExpandableController.open();\n  }\n\n  /** closes and sets the expanded state automatically if behaviorExpand is true */\n  close() {\n    this.#typeExpandableController.close();\n  }\n\n  #nodeUpdate() {\n    this.requestUpdate();\n    this.#toggleExpandableState();\n  }\n\n  #toggleExpandableState() {\n    this.#isExpandable ? this._internals.states.add('is-expandable') : this._internals.states.delete('is-expandable');\n  }\n\n  #setupKeyNavInteractions() {\n    this.addEventListener('keyup', e => {\n      if (this.#isExpandable && e.code === 'ArrowLeft' && e.target === this) {\n        this.close();\n      }\n\n      if (this.#isExpandable && e.code === 'ArrowRight' && e.target === this) {\n        this.open();\n      }\n\n      if (e.code === 'Space' && e.target === this && this.selectable) {\n        e.preventDefault();\n        this.#toggleSelection();\n      }\n    });\n  }\n\n  #nodeHeaderClick(e: Event) {\n    const hasFocusableElements = getFlattenedFocusableItems(e.currentTarget as HTMLElement).length;\n    if (this.#isExpandable && !this.selectable && !hasFocusableElements) {\n      this.#toggleExpand();\n    }\n\n    if (this.selectable && (!hasFocusableElements || (e.target as HTMLElement).localName === 'a')) {\n      this.#toggleSelection();\n    }\n  }\n\n  #toggleExpand() {\n    this.#typeExpandableController.toggle();\n  }\n\n  #toggleSelection() {\n    if (this.selectable === 'single') {\n      this.#toggleSingleSelection();\n    }\n\n    if (this.selectable === 'multi') {\n      this.#toggleMultiSelection();\n    }\n  }\n\n  #toggleSingleSelection() {\n    this.#typeSelectableController.toggle();\n    if (this.behaviorSelect) {\n      this.#tree!.nodes.filter(n => n !== this).forEach(n => (n.selected = false));\n    }\n  }\n\n  #toggleMultiSelection() {\n    this.#typeSelectableController.toggle();\n\n    if (this.behaviorSelect) {\n      this.nodes.forEach(n => {\n        n.selected = this.selected;\n        n.indeterminate = false;\n      });\n      this.#tree!.nodes.forEach(node => updateNodeSelection(node));\n    }\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAoEO,IAAA,IAAA,cAAuB,EAAW;;+BAIgB,oBAKA,sBAKb,uBAUC,gBAOR,MAAA,EAAqB,kBAGrC,8BAYM,0BAGC,0BAGA;;CA1B1B,KAAwC,IAAI,EAAqB,KAAK;CAUtE,KAAA,IAAY;AACV,SAAO,KAAK,QAAc,WAAW;;CAiBvC,KAA4B,IAAI,EAAyB,KAAK;CAE9D,KAA4B,IAAI,EAAyB,KAAK;CAE9D,KAAA,IAAoB;AAClB,SAAO,KAAK,cAAc,KAAK,YAAY,CAAC,CAAC,KAAK,OAAO;;;kBAGzC;GAChB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,YAAY,gBAAA;GACvB;;;4BAE2B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;IACpB,EAAS,SAAS,MAAM;GAC1B;;;gBAEe,EAAU,CAAC,EAAO,CAAC;;CAKnC,SAAS;AACP,SAAO,CAAI,mCACwB,MAAA,EAAiB,sBAG5C,MAAA,IACI,CAAI,uFAC6E,MAAA,EAAmB,yHACvD,KAAK,WAAW,SAAS,QAAQ,6CAE9E,EACL,GAEC,KAAK,eAAe,UAChB,CAAI,yEAE2B,MAAA,EAA2B,cAAY,KAAK,SAAS,oBAAkB,KAAK,cAAc,gBAAc,KAAK,KAAK,OAAO,mCAExJ,EACL,sFAEgD,MAAA,EAAsB;;CAS/E,oBAAoB;AAKlB,EAJA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO,YACvB,MAAA,GAA+B,EAC/B,MAAA,GAAkB;;CAIpB,OAAO;AACL,QAAA,EAA+B,MAAM;;CAIvC,QAAQ;AACN,QAAA,EAA+B,OAAO;;CAGxC,KAAc;AAEZ,EADA,KAAK,eAAe,EACpB,MAAA,GAA6B;;CAG/B,KAAyB;AACvB,QAAA,IAAqB,KAAK,WAAW,OAAO,IAAI,gBAAgB,GAAG,KAAK,WAAW,OAAO,OAAO,gBAAgB;;CAGnH,KAA2B;AACzB,OAAK,iBAAiB,UAAS,MAAK;AASlC,GARI,MAAA,KAAsB,EAAE,SAAS,eAAe,EAAE,WAAW,QAC/D,KAAK,OAAO,EAGV,MAAA,KAAsB,EAAE,SAAS,gBAAgB,EAAE,WAAW,QAChE,KAAK,MAAM,EAGT,EAAE,SAAS,WAAW,EAAE,WAAW,QAAQ,KAAK,eAClD,EAAE,gBAAgB,EAClB,MAAA,GAAuB;IAEzB;;CAGJ,GAAiB,GAAU;EACzB,IAAM,IAAuB,EAA2B,EAAE,cAA6B,CAAC;AAKxF,EAJI,MAAA,KAAsB,CAAC,KAAK,cAAc,CAAC,KAC7C,MAAA,GAAoB,EAGlB,KAAK,eAAe,CAAC,KAAyB,EAAE,OAAuB,cAAc,QACvF,MAAA,GAAuB;;CAI3B,KAAgB;AACd,QAAA,EAA+B,QAAQ;;CAGzC,KAAmB;AAKjB,EAJI,KAAK,eAAe,YACtB,MAAA,GAA6B,EAG3B,KAAK,eAAe,WACtB,MAAA,GAA4B;;CAIhC,KAAyB;AAEvB,EADA,MAAA,EAA+B,QAAQ,EACnC,KAAK,kBACP,MAAA,EAAY,MAAM,QAAO,MAAK,MAAM,KAAK,CAAC,SAAQ,MAAM,EAAE,WAAW,GAAO;;CAIhF,KAAwB;AAGtB,EAFA,MAAA,EAA+B,QAAQ,EAEnC,KAAK,mBACP,KAAK,MAAM,SAAQ,MAAK;AAEtB,GADA,EAAE,WAAW,KAAK,UAClB,EAAE,gBAAgB;IAClB,EACF,MAAA,EAAY,MAAM,SAAQ,MAAQ,EAAoB,EAAK,CAAC;;;GA7L/D,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK1C,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,cAAA,KAAA,EAAA,KAK1B,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,eAAA,KAAA,EAAA,KAO3B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAG1B,GAAU,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KASV,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAGxC,GAAO,CAAA,EAAA,EAAA,WAAA,iBAAA,KAAA,EAAA,KAGP,GAAO,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA,KAGP,GAAO,CAAA,EAAA,EAAA,WAAA,kBAAA,KAAA,EAAA;CA3DT,GAAO;CACP,EAAQ,EAAE,KAAK,IAAO,CAAC;CACvB,GAAY;CACZ,GAAe;CACf,GAAe;CACf,GAAgB;CAChB,GAAA"}

package/dist/tree/tree.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tree.examples.js","names":["#getNodeList","#open","#close"],"sources":["../../src/tree/tree.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Tree',\n  component: 'nve-tree',\n};\n\n/**\n * @summary Basic tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.\n */\nexport const Default = {\n  render: () => html`\n    <nve-tree behavior-expand>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with border styling for enhanced visual separation and container definition, improving content structure perception.\n */\nexport const Border = {\n  render: () => html`\n    <nve-tree behavior-expand border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.\n */\nexport const Selectable = {\n  render: () => html`\n    <nve-tree selectable=\"single\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node selected>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.\n */\nexport const SelectableMultiple = {\n  render: () => html`\n    <nve-tree selectable=\"multi\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node selected>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Interactive selection handling using the select event, with callbacks for node selection changes.\n * @tags test-case\n */\nexport const SelectEvent = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md\">\n        <nve-tree id=\"select-event-tree\" selectable=\"single\" behavior-expand behavior-select border>\n          <nve-tree-node expanded>\n            Documents\n            <nve-tree-node>Annual Report.pdf</nve-tree-node>\n            <nve-tree-node>Budget.xlsx</nve-tree-node>\n            <nve-tree-node expanded>\n              Projects\n              <nve-tree-node>Project Alpha</nve-tree-node>\n              <nve-tree-node>Project Beta</nve-tree-node>\n              <nve-tree-node>Project Gamma</nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n          <nve-tree-node>\n            Images\n            <nve-tree-node>photo-001.jpg</nve-tree-node>\n            <nve-tree-node>photo-002.jpg</nve-tree-node>\n            <nve-tree-node>screenshot.png</nve-tree-node>\n          </nve-tree-node>\n        </nve-tree>\n        <div nve-layout=\"column gap:sm\">\n          <p nve-text=\"body sm\"><strong>Selected:</strong> <span id=\"selected-node\">None</span></p>\n          <p nve-text=\"body sm\"><strong>History:</strong></p>\n          <ul id=\"selection-history\" nve-text=\"body sm\">\n            <li>No selections yet</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <script type=\"module\">\n      const tree = document.querySelector('#select-event-tree');\n      const selectedDisplay = document.querySelector('#selected-node');\n      const historyList = document.querySelector('#selection-history');\n      const history = [];\n      tree.addEventListener('select', (e) => {\n        const node = e.detail;\n        const nodeText = node.textContent?.trim().split('\\\\n')[0] ?? 'Unknown';\n        selectedDisplay.textContent = nodeText;\n        history.push(nodeText);\n        if (history.length > 5) history.shift();\n        historyList.innerHTML = history.map(item => '<li>' + item + '</li>').join('');\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.\n */\nexport const Highlight = {\n  render: () => html`\n    <nve-tree behavior-expand border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node highlighted>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node highlighted>node 1-3-1</nve-tree-node>\n          <nve-tree-node highlighted>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.\n */\nexport const Links = {\n  render: () => html`\n    <nve-tree behavior-expand>\n      <nve-tree-node><a href=\"#\">Documentation</a></nve-tree-node>\n      <nve-tree-node><a href=\"#\">Support</a></nve-tree-node>\n      <nve-tree-node expanded>\n        Elements\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>\n        Frameworks\n        <nve-tree-node><a href=\"#\">Angular</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">React</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Vue</a></nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        Languages\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  `\n};\n\n/**\n * @summary Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.\n */\nexport const Async = {\n  render: () => html`\n    <nve-tree border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node>\n            <div nve-layout=\"row gap:xs\">\n              <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring> loading\n            </div>\n          </nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.\n */\nexport const NodeContent = {\n  render: () => html`\n    <nve-tree selectable=\"multi\" border behavior-expand behavior-select>\n      <nve-tree-node expanded>\n        text content\n        <nve-tree-node>\n          <a href=\"#\" nve-text=\"link\">node link</a>\n        </nve-tree-node>\n        <nve-tree-node>\n          long form content\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          interactive content\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <p nve-text=\"body sm\">This is some longer content in a tree node.</p>\n            <nve-button>hello there</nve-button>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          input control\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <nve-input>\n              <label>label</label>\n              <input type=\"text\" />\n            </nve-input>\n            <nve-input>\n              <label>label</label>\n              <input type=\"text\" />\n            </nve-input>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          node content checkbox group\n          <nve-checkbox-group slot=\"content\">\n            <label>label</label>\n            <nve-checkbox>\n              <label>checkbox 1</label>\n              <input type=\"checkbox\" checked />\n            </nve-checkbox>\n\n            <nve-checkbox>\n              <label>checkbox 2</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n\n            <nve-checkbox>\n              <label>checkbox 3</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n          </nve-checkbox-group>\n        </nve-tree-node>\n        <nve-tree-node>\n          node content radio group\n          <nve-radio-group slot=\"content\">\n            <label>label</label>\n            <nve-radio>\n              <label>radio 1</label>\n              <input type=\"radio\" checked />\n            </nve-radio>\n\n            <nve-radio>\n              <label>radio 2</label>\n              <input type=\"radio\" />\n            </nve-radio>\n\n            <nve-radio>\n              <label>radio 3</label>\n              <input type=\"radio\" />\n            </nve-radio>\n          </nve-radio-group>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.\n * @tags test-case\n */\nexport const DynamicTree = {\n  render: () => html`<test-dynamic-tree></test-dynamic-tree>`\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Tree integrated in vertical navigation drawer, providing structured sidebar navigation for application layouts and content organization.\n */\nexport const VerticalNav = {\n  render: () => html`\n  <nve-drawer inline size=\"sm\" position=\"left\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading\">Navigation</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <nve-tree behavior-expand>\n        <nve-tree-node><a href=\"#\">Documentation</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Support</a></nve-tree-node>\n        <nve-tree-node expanded>\n          Elements\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>\n          Frameworks\n          <nve-tree-node><a href=\"#\">Angular</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">React</a></nve-tree-node>\n          <nve-tree-node><a href=\"#\">Vue</a></nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node>\n          Languages\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-drawer-content>\n  </nve-drawer>\n  `\n};\n\n/**\n * @summary Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n    <div style=\"width: 300px; height: 500px; overflow: auto; outline: 1px solid #ccc; padding: 12px\">\n      <nve-tree border behavior-expand>\n        <nve-tree-node expanded>\n          node 1\n          <nve-tree-node>node 1-1</nve-tree-node>\n          <nve-tree-node>node 1-2</nve-tree-node>\n          <nve-tree-node expanded>\n            node 1-3\n            <nve-tree-node>node 1-3-1</nve-tree-node>\n            <nve-tree-node>node 1-3-2</nve-tree-node>\n            <nve-tree-node expanded>\n              node 1-3-3\n              <nve-tree-node>node 1-3-3-1</nve-tree-node>\n              <nve-tree-node>node 1-3-3-2</nve-tree-node>\n              <nve-tree-node expanded>\n                node 1-3-3-3\n                <nve-tree-node>node 1-3-3-3-1</nve-tree-node>\n                <nve-tree-node>node 1-3-3-3-2</nve-tree-node>\n                <nve-tree-node expanded>\n                  node 1-3-3-3-3\n                  <nve-tree-node>node 1-3-3-3-3-1</nve-tree-node>\n                  <nve-tree-node>node 1-3-3-3-3-2</nve-tree-node>\n                  <nve-tree-node expanded>\n                    node 1-3-3-3-3-3\n                    <nve-tree-node>node 1-3-3-3-3-3-1</nve-tree-node>\n                    <nve-tree-node>node 1-3-3-3-3-3-2</nve-tree-node>\n                    <nve-tree-node expanded>\n                      node 1-3-3-3-3-3-3\n                      <nve-tree-node>node 1-3-3-3-3-3-3-1</nve-tree-node>\n                      <nve-tree-node>node 1-3-3-3-3-3-3-2</nve-tree-node>\n                      <nve-tree-node expanded>\n                        node 1-3-3-3-3-3-3-3\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-1</nve-tree-node>\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-2</nve-tree-node>\n                        <nve-tree-node expanded>\n                          node 1-3-3-3-3-3-3-3-3\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-1</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-2</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-3</nve-tree-node>\n                        </nve-tree-node>\n                      </nve-tree-node>\n                    </nve-tree-node>\n                  </nve-tree-node>\n                </nve-tree-node>\n              </nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          node 2\n          <nve-tree-node>node 2-1</nve-tree-node>\n          <nve-tree-node>node 2-2</nve-tree-node>\n          <nve-tree-node>node 2-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </div>\n  `\n};\n\n/**\n * @summary Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.\n * @tags test-case performance\n */\nexport const BulkCreation = {\n  render: () => html`\n    <nve-tree>\n      <nve-tree-node id=\"root\" expandable>Test</nve-tree-node>\n    </nve-tree>\n    <script type=\"module\">\n    const rootEl = document.querySelector('nve-tree-node#root');\n\n    rootEl.addEventListener('open', () => {\n      const fragment = document.createDocumentFragment();\n      for (let i = 0; i < 400; i++) {\n        rootEl.expanded = true;\n        const childEl = document.createElement('nve-tree-node');\n        childEl.innerText = 'Child ' + i;\n        fragment.append(childEl);\n      }\n      rootEl.append(fragment);\n    });\n\n    rootEl.addEventListener('close', () => {\n      rootEl.expanded = false;\n      rootEl.replaceChildren(document.createTextNode('Test'));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"tree.examples.js","names":["#getNodeList","#open","#close"],"sources":["../../src/tree/tree.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { state } from 'lit/decorators/state.js';\nimport '@nvidia-elements/core/tree/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/progress-ring/define.js';\n\nexport default {\n  title: 'Elements/Tree',\n  component: 'nve-tree',\n};\n\n/**\n * @summary Basic tree component with expandable nodes, providing hierarchical data display and navigation for structured content organization.\n */\nexport const Default = {\n  render: () => html`\n    <nve-tree behavior-expand>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with border styling for enhanced visual separation and container definition, improving content structure perception.\n */\nexport const Border = {\n  render: () => html`\n    <nve-tree behavior-expand border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Single-selection tree for choosing one item from hierarchical options, enabling focused navigation and content selection.\n */\nexport const Selectable = {\n  render: () => html`\n    <nve-tree selectable=\"single\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node selected>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Multi-selection tree for choosing many items from hierarchical options, enabling bulk operations and comprehensive content management.\n */\nexport const SelectableMultiple = {\n  render: () => html`\n    <nve-tree selectable=\"multi\" behavior-expand behavior-select border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node selected>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node>node 1-3-1</nve-tree-node>\n          <nve-tree-node>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Interactive selection handling using the select event, with callbacks for node selection changes.\n * @tags test-case\n */\nexport const SelectEvent = {\n  render: () => html`\n    <div nve-layout=\"column gap:md\">\n      <div nve-layout=\"row gap:md\">\n        <nve-tree id=\"select-event-tree\" selectable=\"single\" behavior-expand behavior-select border>\n          <nve-tree-node expanded>\n            Documents\n            <nve-tree-node>Annual Report.pdf</nve-tree-node>\n            <nve-tree-node>Budget.xlsx</nve-tree-node>\n            <nve-tree-node expanded>\n              Projects\n              <nve-tree-node>Project Alpha</nve-tree-node>\n              <nve-tree-node>Project Beta</nve-tree-node>\n              <nve-tree-node>Project Gamma</nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n          <nve-tree-node>\n            Images\n            <nve-tree-node>photo-001.jpg</nve-tree-node>\n            <nve-tree-node>photo-002.jpg</nve-tree-node>\n            <nve-tree-node>screenshot.png</nve-tree-node>\n          </nve-tree-node>\n        </nve-tree>\n        <div nve-layout=\"column gap:sm\">\n          <p nve-text=\"body sm\"><strong>Selected:</strong> <span id=\"selected-node\">None</span></p>\n          <p nve-text=\"body sm\"><strong>History:</strong></p>\n          <ul id=\"selection-history\" nve-text=\"body sm\">\n            <li>No selections yet</li>\n          </ul>\n        </div>\n      </div>\n    </div>\n    <script type=\"module\">\n      const tree = document.querySelector('#select-event-tree');\n      const selectedDisplay = document.querySelector('#selected-node');\n      const historyList = document.querySelector('#selection-history');\n      const history = [];\n      tree.addEventListener('select', (e) => {\n        const node = e.detail;\n        const nodeText = node.textContent?.trim().split('\\\\n')[0] ?? 'Unknown';\n        selectedDisplay.textContent = nodeText;\n        history.push(nodeText);\n        if (history.length > 5) history.shift();\n        historyList.innerHTML = history.map(item => '<li>' + item + '</li>').join('');\n      });\n    </script>\n  `\n};\n\n/**\n * @summary Tree with highlighted nodes for emphasizing specific items, providing visual focus and search result signal in hierarchical data.\n */\nexport const Highlight = {\n  render: () => html`\n    <nve-tree behavior-expand border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node highlighted>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node highlighted>node 1-3-1</nve-tree-node>\n          <nve-tree-node highlighted>node 1-3-2</nve-tree-node>\n          <nve-tree-node>node 1-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with navigation links for hierarchical menu systems, enabling structured site navigation and content discovery.\n */\nexport const Links = {\n  render: () => html`\n    <nve-tree behavior-expand>\n      <nve-tree-node><a href=\"#\">Documentation</a></nve-tree-node>\n      <nve-tree-node><a href=\"#\">Support</a></nve-tree-node>\n      <nve-tree-node expanded>\n        Elements\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>\n        Frameworks\n        <nve-tree-node><a href=\"#\">Angular</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">React</a></nve-tree-node>\n        <nve-tree-node><a href=\"#\">Vue</a></nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        Languages\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  `\n};\n\n/**\n * @summary Tree with loading states for asynchronous data, including progress indicators and dynamic content loading in hierarchical structures.\n */\nexport const Async = {\n  render: () => html`\n    <nve-tree border>\n      <nve-tree-node expanded>\n        node 1\n        <nve-tree-node>node 1-1</nve-tree-node>\n        <nve-tree-node>node 1-2</nve-tree-node>\n        <nve-tree-node expanded>\n          node 1-3\n          <nve-tree-node>\n            <div nve-layout=\"row gap:xs\">\n              <nve-progress-ring status=\"accent\" size=\"xs\"></nve-progress-ring> loading\n            </div>\n          </nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 2\n        <nve-tree-node>node 2-1</nve-tree-node>\n        <nve-tree-node>node 2-2</nve-tree-node>\n        <nve-tree-node>node 2-3</nve-tree-node>\n      </nve-tree-node>\n      <nve-tree-node>\n        node 3\n        <nve-tree-node>node 3-1</nve-tree-node>\n        <nve-tree-node>node 3-2</nve-tree-node>\n        <nve-tree-node>\n          node 3-3\n          <nve-tree-node>node 3-3-1</nve-tree-node>\n          <nve-tree-node>node 3-3-2</nve-tree-node>\n          <nve-tree-node>node 3-3-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Tree with rich node content including forms, controls, and interactive elements, enabling complex data management within hierarchical structures.\n */\nexport const NodeContent = {\n  render: () => html`\n    <nve-tree selectable=\"multi\" border behavior-expand behavior-select>\n      <nve-tree-node expanded>\n        text content\n        <nve-tree-node>\n          <a href=\".\" nve-text=\"link\">node link</a>\n        </nve-tree-node>\n        <nve-tree-node>\n          inline content <nve-dot status=\"success\" size=\"sm\"></nve-dot>\n        </nve-tree-node>\n        <nve-tree-node>\n          <div nve-text=\"body sm muted\" nve-layout=\"pad-bottom:xs\">block</div>\n          <p nve-text=\"body sm\">content</p>\n        </nve-tree-node>\n        <nve-tree-node>\n          long form content\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n            <a href=\"#\" nve-text=\"link\">This is some longer content in a tree node.</a>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          interactive content\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <p nve-text=\"body sm\">This is some longer content in a tree node.</p>\n            <nve-button>hello there</nve-button>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          input control\n          <div slot=\"content\" nve-layout=\"column gap:sm\">\n            <nve-input>\n              <label>label</label>\n              <input type=\"text\" />\n            </nve-input>\n            <nve-input>\n              <label>label</label>\n              <input type=\"text\" />\n            </nve-input>\n          </div>\n        </nve-tree-node>\n        <nve-tree-node>\n          node content checkbox group\n          <nve-checkbox-group slot=\"content\">\n            <label>label</label>\n            <nve-checkbox>\n              <label>checkbox 1</label>\n              <input type=\"checkbox\" checked />\n            </nve-checkbox>\n\n            <nve-checkbox>\n              <label>checkbox 2</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n\n            <nve-checkbox>\n              <label>checkbox 3</label>\n              <input type=\"checkbox\" />\n            </nve-checkbox>\n          </nve-checkbox-group>\n        </nve-tree-node>\n        <nve-tree-node>\n          node content radio group\n          <nve-radio-group slot=\"content\">\n            <label>label</label>\n            <nve-radio>\n              <label>radio 1</label>\n              <input type=\"radio\" checked />\n            </nve-radio>\n\n            <nve-radio>\n              <label>radio 2</label>\n              <input type=\"radio\" />\n            </nve-radio>\n\n            <nve-radio>\n              <label>radio 3</label>\n              <input type=\"radio\" />\n            </nve-radio>\n          </nve-radio-group>\n        </nve-tree-node>\n      </nve-tree-node>\n    </nve-tree>\n  `\n};\n\n/**\n * @summary Dynamic tree with programmatic node creation and management, for scalable hierarchical data handling with large datasets.\n * @tags test-case\n */\nexport const DynamicTree = {\n  render: () => html`<test-dynamic-tree></test-dynamic-tree>`\n};\n\n/**\n * @summary Tree with scrollable container for handling deep hierarchies and large datasets, ensuring optimal space usage and navigation.\n * @tags test-case\n */\nexport const Overflow = {\n  render: () => html`\n    <div style=\"width: 300px; height: 500px; overflow: auto; outline: 1px solid #ccc; padding: 12px\">\n      <nve-tree border behavior-expand>\n        <nve-tree-node expanded>\n          node 1\n          <nve-tree-node>node 1-1</nve-tree-node>\n          <nve-tree-node>node 1-2</nve-tree-node>\n          <nve-tree-node expanded>\n            node 1-3\n            <nve-tree-node>node 1-3-1</nve-tree-node>\n            <nve-tree-node>node 1-3-2</nve-tree-node>\n            <nve-tree-node expanded>\n              node 1-3-3\n              <nve-tree-node>node 1-3-3-1</nve-tree-node>\n              <nve-tree-node>node 1-3-3-2</nve-tree-node>\n              <nve-tree-node expanded>\n                node 1-3-3-3\n                <nve-tree-node>node 1-3-3-3-1</nve-tree-node>\n                <nve-tree-node>node 1-3-3-3-2</nve-tree-node>\n                <nve-tree-node expanded>\n                  node 1-3-3-3-3\n                  <nve-tree-node>node 1-3-3-3-3-1</nve-tree-node>\n                  <nve-tree-node>node 1-3-3-3-3-2</nve-tree-node>\n                  <nve-tree-node expanded>\n                    node 1-3-3-3-3-3\n                    <nve-tree-node>node 1-3-3-3-3-3-1</nve-tree-node>\n                    <nve-tree-node>node 1-3-3-3-3-3-2</nve-tree-node>\n                    <nve-tree-node expanded>\n                      node 1-3-3-3-3-3-3\n                      <nve-tree-node>node 1-3-3-3-3-3-3-1</nve-tree-node>\n                      <nve-tree-node>node 1-3-3-3-3-3-3-2</nve-tree-node>\n                      <nve-tree-node expanded>\n                        node 1-3-3-3-3-3-3-3\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-1</nve-tree-node>\n                        <nve-tree-node>node 1-3-3-3-3-3-3-3-2</nve-tree-node>\n                        <nve-tree-node expanded>\n                          node 1-3-3-3-3-3-3-3-3\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-1</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-2</nve-tree-node>\n                          <nve-tree-node>node 1-3-3-3-3-3-3-3-3-3</nve-tree-node>\n                        </nve-tree-node>\n                      </nve-tree-node>\n                    </nve-tree-node>\n                  </nve-tree-node>\n                </nve-tree-node>\n              </nve-tree-node>\n            </nve-tree-node>\n          </nve-tree-node>\n        </nve-tree-node>\n        <nve-tree-node expanded>\n          node 2\n          <nve-tree-node>node 2-1</nve-tree-node>\n          <nve-tree-node>node 2-2</nve-tree-node>\n          <nve-tree-node>node 2-3</nve-tree-node>\n        </nve-tree-node>\n      </nve-tree>\n    </div>\n  `\n};\n\n/**\n * @summary Tree with bulk node creation for performance testing, verifying efficient handling of large numbers of nodes and dynamic expansion.\n * @tags test-case performance\n */\nexport const BulkCreation = {\n  render: () => html`\n    <nve-tree>\n      <nve-tree-node id=\"root\" expandable>Test</nve-tree-node>\n    </nve-tree>\n    <script type=\"module\">\n    const rootEl = document.querySelector('nve-tree-node#root');\n\n    rootEl.addEventListener('open', () => {\n      const fragment = document.createDocumentFragment();\n      for (let i = 0; i < 400; i++) {\n        rootEl.expanded = true;\n        const childEl = document.createElement('nve-tree-node');\n        childEl.innerText = 'Child ' + i;\n        fragment.append(childEl);\n      }\n      rootEl.append(fragment);\n    });\n\n    rootEl.addEventListener('close', () => {\n      rootEl.expanded = false;\n      rootEl.replaceChildren(document.createTextNode('Test'));\n    });\n  </script>\n  `\n};\n\n/**\n * @summary Examples of invalid tree usage patterns for testing and documentation purposes, showing what not to do when implementing trees.\n * @tags anti-pattern\n */\nexport const Audit = {\n  render: () => html`\n    <div>\n      <nve-tree-node>node</nve-tree-node>\n    </div>\n  `\n};\n\nexport class TestDynamicTree extends LitElement {\n  @state() nodes = createTree();\n\n  render() {\n    return html`\n    <p nve-text=\"body\">total nodes: 10,000</p>\n    <nve-tree border expandable>\n      ${this.nodes.map(node => this.#getNodeList(node))}\n    </nve-tree>`;\n  }\n\n  #getNodeList(node) {\n    return html`<nve-tree-node .expandable=${node.nodes.length} .expanded=${node.expanded} @open=${e => this.#open(e, node)} @close=${e => this.#close(e, node)}>\n      ${node.label} node\n      ${node.expanded ? node.nodes.map(n => html`${this.#getNodeList(n)}`) : nothing}\n    </nve-tree-node>`\n  }\n\n  #open(e, node) {\n    e.stopPropagation();\n    node.expanded = true;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n\n  #close(e, node) {\n    e.stopPropagation();\n    node.expanded = false;\n    this.nodes = [...this.nodes];\n    this.requestUpdate();\n  }\n}\n\n/** generates a tree with 10 nodes with 4 layers */\nfunction createTree() {\n  return createNodeList(10).map(i => {\n    i.nodes = createNodeList(10);\n    i.nodes.forEach(j => {\n      j.nodes = createNodeList(10);\n      j.nodes.forEach(k => {\n        k.nodes = createNodeList(10);\n      })\n    })\n    return i;\n  });\n}\n\nfunction createNodeList(nodes: number) {\n  return new Array(nodes).fill('').map((_, i) => ({ label: `${i}`, expanded: false, nodes: [] }));\n}\n\ncustomElements.get('test-dynamic-tree') || customElements.define('test-dynamic-tree', TestDynamicTree);"],"mappings":";AAGA,IAAA,IAAe"}