@nvidia-elements/core 2.17.1 → 2.18.0

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/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  command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item selected 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=\"#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#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"}
+{"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';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/menu/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  command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item selected 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 * @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 Add icons and notification indicators around tab labels.\n * @description Add Icons before tab labels and Dots after them using the `prefix` and `suffix` slots.\n */\nexport const PrefixAndSuffix = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>\n    <nve-icon slot=\"prefix\" name=\"home\" aria-hidden=\"true\"></nve-icon>\n    Overview\n    <nve-dot slot=\"suffix\" aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"beaker\" aria-hidden=\"true\"></nve-icon>\n    Experiments\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"gear\" aria-hidden=\"true\"></nve-icon>\n    Settings\n    <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\" aria-hidden=\"true\"></nve-dot>\n  </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=\"#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"#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\n/**\n * @summary Close a tab with an application-owned button.\n * @description Add a labeled Icon Button to the `suffix` slot of a Tabs Item Group and handle its click to close the tab. Use arrow keys to focus a tab, then Tab to reach its actions.\n */\nexport const ItemGroupAction = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item id=\"workspace-overview\" selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group id=\"workspace-experiment\">\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button id=\"close-experiment\" slot=\"suffix\" icon-name=\"cancel\" size=\"sm\" container=\"flat\" aria-label=\"Close experiment\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<script type=\"module\">\n  const overview = document.querySelector('#workspace-overview');\n  document.querySelector('#close-experiment').addEventListener('click', () => {\n    document.querySelector('#workspace-experiment').remove();\n    overview.selected = true;\n    overview.focus();\n  });\n</script>`\n};\n\n/**\n * @summary Open a tab's actions menu from a suffix button without selecting the tab.\n * @description Add an Icon Button to open a Dropdown beside the tab strip.\n */\nexport const ItemGroupMenu = {\n  render: () => html`\n<nve-tabs behavior-select>\n  <nve-tabs-item selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group>\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" size=\"sm\" container=\"flat\" aria-label=\"Experiment actions\" aria-haspopup=\"menu\" popovertarget=\"experiment-actions\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<nve-dropdown id=\"experiment-actions\">\n  <nve-menu>\n    <nve-menu-item>Rename</nve-menu-item>\n    <nve-menu-item>Duplicate</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/tabs/tabs.examples.json

@@ -34,12 +34,12 @@
       ]
     },
     {
-      "id": "tabs-with-dots",
-      "name": "WithDots",
-      "template": "<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",
-      "summary": "Tabs with notification dots for indicating unread content or alerts within tab sections.",
-      "description": "",
-      "composition": false,
+      "id": "tabs-prefix-and-suffix",
+      "name": "PrefixAndSuffix",
+      "template": "<nve-tabs behavior-select>\n  <nve-tabs-item selected>\n    <nve-icon slot=\"prefix\" name=\"home\" aria-hidden=\"true\"></nve-icon>\n    Overview\n    <nve-dot slot=\"suffix\" aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"beaker\" aria-hidden=\"true\"></nve-icon>\n    Experiments\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <nve-icon slot=\"prefix\" name=\"gear\" aria-hidden=\"true\"></nve-icon>\n    Settings\n    <nve-dot slot=\"suffix\" status=\"accent\" size=\"sm\" aria-hidden=\"true\"></nve-dot>\n  </nve-tabs-item>\n</nve-tabs>\n",
+      "summary": "Add icons and notification indicators around tab labels.",
+      "description": "Add Icons before tab labels and Dots after them using the `prefix` and `suffix` slots.",
+      "composition": true,
       "tags": []
     },
     {
@@ -137,6 +137,24 @@
       "description": "",
       "composition": true,
       "tags": []
+    },
+    {
+      "id": "tabs-item-group-action",
+      "name": "ItemGroupAction",
+      "template": "<nve-tabs behavior-select>\n  <nve-tabs-item id=\"workspace-overview\" selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group id=\"workspace-experiment\">\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button id=\"close-experiment\" slot=\"suffix\" icon-name=\"cancel\" size=\"sm\" container=\"flat\" aria-label=\"Close experiment\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<script type=\"module\">\n  const overview = document.querySelector(\"#workspace-overview\");\n  document.querySelector(\"#close-experiment\").addEventListener(\"click\", () => {\n    document.querySelector(\"#workspace-experiment\").remove();\n    overview.selected = true;\n    overview.focus();\n  });\n</script>\n",
+      "summary": "Close a tab with an application-owned button.",
+      "description": "Add a labeled Icon Button to the `suffix` slot of a Tabs Item Group and handle its click to close the tab. Use arrow keys to focus a tab, then Tab to reach its actions.",
+      "composition": false,
+      "tags": []
+    },
+    {
+      "id": "tabs-item-group-menu",
+      "name": "ItemGroupMenu",
+      "template": "<nve-tabs behavior-select>\n  <nve-tabs-item selected>Overview</nve-tabs-item>\n  <nve-tabs-item-group>\n    <nve-tabs-item>Experiment</nve-tabs-item>\n    <nve-icon-button slot=\"suffix\" icon-name=\"more-actions\" size=\"sm\" container=\"flat\" aria-label=\"Experiment actions\" aria-haspopup=\"menu\" popovertarget=\"experiment-actions\"></nve-icon-button>\n  </nve-tabs-item-group>\n</nve-tabs>\n<nve-dropdown id=\"experiment-actions\">\n  <nve-menu>\n    <nve-menu-item>Rename</nve-menu-item>\n    <nve-menu-item>Duplicate</nve-menu-item>\n  </nve-menu>\n</nve-dropdown>\n",
+      "summary": "Open a tab's actions menu from a suffix button without selecting the tab.",
+      "description": "Add an Icon Button to open a Dropdown beside the tab strip.",
+      "composition": true,
+      "tags": []
     }
   ]
 }

package/dist/tabs/tabs.global.js

@@ -1,5 +1,5 @@
 //#region src/tabs/tabs.global.css?inline
-var e = "nve-tabs{--indicator-background: var(--nve-sys-accent-secondary-background);--indicator-height: var(--nve-ref-border-width-xl);--indicator-border-radius: var(--nve-ref-border-radius-sm);&:after{background:var(--indicator-background);height:var(--indicator-height);border-radius:var(--indicator-border-radius);position:fixed;display:block;content:\"\";width:anchor-size(width);transition:left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);position-anchor:--selected;top:calc(anchor(bottom) - var(--indicator-height));left:anchor(left);z-index:-1}&[borderless]:after{display:none!important}}nve-tabs[vertical]{&:after{width:var(--indicator-height);height:anchor-size(height);transition:top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);top:anchor(top)}}nve-tabs-item{&[selected]{anchor-name:--selected}}";
+var e = "nve-tabs{anchor-scope:--selected,--selected-group;--indicator-background: var(--nve-sys-accent-secondary-background);--indicator-height: var(--nve-ref-border-width-xl);--indicator-border-radius: var(--nve-ref-border-radius-sm);&:after{background:var(--indicator-background);height:var(--indicator-height);border-radius:var(--indicator-border-radius);position:fixed;display:block;content:\"\";width:anchor-size(width);transition:left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);position-anchor:--selected;top:calc(anchor(bottom) - var(--indicator-height));left:anchor(left);z-index:-1}&[borderless]:after{display:none!important}}nve-tabs[vertical]{&:after{width:var(--indicator-height);height:anchor-size(height);transition:top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);top:anchor(top)}}nve-tabs[vertical]:dir(rtl):after{left:auto;right:anchor(right)}nve-tabs-item[selected]{anchor-name:--selected}nve-tabs-item-group:has(>nve-tabs-item[selected]){anchor-name:--selected-group}nve-tabs:has(>nve-tabs-item-group>nve-tabs-item[selected]):after{position-anchor:--selected-group}";
 //#endregion
 export { e as default };
 

package/dist/tabs/tabs.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.global.js","names":[],"sources":["../../src/tabs/tabs.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tabs {\n  --indicator-background: var(--nve-sys-accent-secondary-background);\n  --indicator-height: var(--nve-ref-border-width-xl);\n  --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n  &::after {\n    background: var(--indicator-background);\n    height: var(--indicator-height);\n    border-radius: var(--indicator-border-radius);\n    position: fixed;\n    display: block;\n    content: '';\n    width: anchor-size(width);\n    transition: left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    position-anchor: --selected;\n    top: calc(anchor(bottom) - var(--indicator-height));\n    left: anchor(left);\n    z-index: -1;\n  }\n\n  &[borderless]::after {\n    display: none !important;\n  }\n}\n\nnve-tabs[vertical] {\n  &::after {\n    width: var(--indicator-height);\n    height: anchor-size(height);\n    transition: top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    top: anchor(top);\n  }\n}\n\nnve-tabs-item {\n  &[selected] {\n    anchor-name: --selected;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.global.js","names":[],"sources":["../../src/tabs/tabs.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-tabs {\n  anchor-scope: --selected, --selected-group;\n  --indicator-background: var(--nve-sys-accent-secondary-background);\n  --indicator-height: var(--nve-ref-border-width-xl);\n  --indicator-border-radius: var(--nve-ref-border-radius-sm);\n\n  &::after {\n    background: var(--indicator-background);\n    height: var(--indicator-height);\n    border-radius: var(--indicator-border-radius);\n    position: fixed;\n    display: block;\n    content: '';\n    width: anchor-size(width);\n    transition: left var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    position-anchor: --selected;\n    top: calc(anchor(bottom) - var(--indicator-height));\n    left: anchor(left);\n    z-index: -1;\n  }\n\n  &[borderless]::after {\n    display: none !important;\n  }\n}\n\nnve-tabs[vertical] {\n  &::after {\n    width: var(--indicator-height);\n    height: anchor-size(height);\n    transition: top var(--nve-ref-animation-duration-150) var(--nve-ref-animation-easing-100);\n    top: anchor(top);\n  }\n}\n\nnve-tabs[vertical]:dir(rtl)::after {\n  left: auto;\n  right: anchor(right);\n}\n\nnve-tabs-item[selected] {\n  anchor-name: --selected;\n}\n\nnve-tabs-item-group:has(> nve-tabs-item[selected]) {\n  anchor-name: --selected-group;\n}\n\nnve-tabs:has(> nve-tabs-item-group > nve-tabs-item[selected])::after {\n  position-anchor: --selected-group;\n}\n"],"mappings":""}

package/dist/tabs/tabs.js

@@ -1,5 +1,5 @@
 //#region src/tabs/tabs.css?inline
-var e = ":host{--gap: var(--nve-ref-space-xs)}[internal-host]{display:flex;flex-direction:row;gap:var(--gap);overflow-x:auto;white-space:nowrap;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}:host([vertical]){--gap: var(--nve-ref-space-xxxs)}:host([vertical]) [internal-host]{flex-direction:column}:host([vertical]) ::slotted(nve-tabs-item){--border-inset: 0 8px 0 8px;--width: calc(100% - 8px) }:host([vertical]) ::slotted(nve-tabs-item:state(selected)){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}::slotted(nve-tabs-item){white-space:nowrap}";
+var e = ":host{--gap: var(--nve-ref-space-xs)}[internal-host]{display:flex;flex-direction:row;gap:var(--gap);overflow-x:auto;white-space:nowrap;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}:host([vertical]){--gap: var(--nve-ref-space-xxxs)}:host([vertical]) [internal-host]{flex-direction:column}:host([vertical]) ::slotted(:is(nve-tabs-item,nve-tabs-item-group)){--border-inset: 0 8px 0 8px;--width: calc(100% - 8px) }:host([vertical]) ::slotted(nve-tabs-item:state(selected)){--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}:host([vertical]) ::slotted(nve-tabs-item-group:has(> nve-tabs-item[selected])){--_tabs-group-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover)}::slotted(:is(nve-tabs-item,nve-tabs-item-group)){white-space:nowrap}";
 //#endregion
 export { e as default };
 

package/dist/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.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  --gap: var(--nve-ref-space-xs);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n  overflow-x: auto;\n  white-space: nowrap;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([vertical]) {\n  --gap: var(--nve-ref-space-xxxs);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host([vertical]) ::slotted(nve-tabs-item) {\n  --border-inset: 0 8px 0 8px;\n  --width: calc(100% - 8px);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item:state(selected)) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n::slotted(nve-tabs-item) {\n  white-space: nowrap;\n}\n"],"mappings":""}
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/tabs/tabs.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  --gap: var(--nve-ref-space-xs);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: row;\n  gap: var(--gap);\n  overflow-x: auto;\n  white-space: nowrap;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([vertical]) {\n  --gap: var(--nve-ref-space-xxxs);\n}\n\n:host([vertical]) [internal-host] {\n  flex-direction: column;\n}\n\n:host([vertical]) ::slotted(:is(nve-tabs-item, nve-tabs-item-group)) {\n  --border-inset: 0 8px 0 8px;\n  --width: calc(100% - 8px);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item:state(selected)) {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n:host([vertical]) ::slotted(nve-tabs-item-group:has(> nve-tabs-item[selected])) {\n  --_tabs-group-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-hover);\n}\n\n::slotted(:is(nve-tabs-item, nve-tabs-item-group)) {\n  white-space: nowrap;\n}\n"],"mappings":""}

package/dist/tabs/tabs2.js

@@ -1,31 +1,32 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
 import { appendAnchorName as t, appendRootNodeStyle as n, removeAnchorName as r } from "../internal/utils/dom.js";
-import { keyNavigationList as i } from "../internal/controllers/keynav-list.controller.js";
+import { KeyNavigationListController as i } from "../internal/controllers/keynav-list.controller.js";
 import { attachInternals as a } from "../internal/utils/a11y.js";
 import { stateSelected as o } from "../internal/controllers/state-selected.controller.js";
 import { useStyles as s } from "../internal/styles/index.js";
 import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
-import l from "./tabs.global.js";
-import u from "./tabs-item.js";
-import d from "./tabs.js";
-import { LitElement as f, html as p } from "lit";
-import { property as m } from "lit/decorators/property.js";
-import { ButtonFormControlMixin as h } from "@nvidia-elements/forms/mixins";
-import { queryAssignedElements as g } from "lit/decorators/query-assigned-elements.js";
+import { getTabItems as l, isTabItemTabbable as u } from "./utils.js";
+import d from "./tabs.global.js";
+import f from "./tabs-item.js";
+import p from "./tabs.js";
+import { LitElement as m, html as h } from "lit";
+import { property as g } from "lit/decorators/property.js";
+import { ButtonFormControlMixin as _ } from "@nvidia-elements/forms/mixins";
+import { queryAssignedElements as v } from "lit/decorators/query-assigned-elements.js";
 //#region src/tabs/tabs.ts
-var _ = class extends h(f) {
+var y = class extends _(m) {
 	static {
-		this.styles = s([u]);
+		this.styles = s([f]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.17.1",
-			parents: ["nve-tabs"]
+			version: "2.18.0",
+			parents: ["nve-tabs", "nve-tabs-item-group"]
 		};
 	}
 	render() {
-		return p`<div internal-host focus-within><slot></slot></div>`;
+		return h`<div internal-host focus-within><slot name="prefix"></slot><div id="label"><slot></slot></div><slot name="suffix"></slot></div>`;
 	}
 	constructor() {
 		super(), this.selected = !1, this.type = "button";
@@ -37,62 +38,103 @@ var _ = class extends h(f) {
 		super.updated(e), e.has("selected") && (this.selected ? t(this, "--selected") : r(this, "--selected"));
 	}
 };
-c([m({
+c([g({
 	type: Boolean,
 	reflect: !0
-})], _.prototype, "selected", void 0), _ = c([e(), o()], _);
-var v = class extends f {
+})], y.prototype, "selected", void 0), y = c([e(), o()], y);
+var b = class extends m {
 	constructor(...e) {
-		super(...e), this.vertical = !1, this.borderless = !1, this.behaviorSelect = !1, this.#t = (e) => {
-			this.#e(e.target);
+		super(...e), this.vertical = !1, this.borderless = !1, this.behaviorSelect = !1, this.#t = new i(this), this.#n = [], this.#a = (e) => {
+			e.some((e) => e.type === "childList" || e.attributeName === "slot") ? this.#o() : e.some((e) => this.#e.some((t) => t.contains(e.target))) && this.#s();
+		}, this.#o = async () => {
+			let e = this.#e;
+			if (e.length === this.#n.length && e.every((e, t) => e === this.#n[t])) {
+				this.#s();
+				return;
+			}
+			let t = this.#n;
+			this.#n = e, await Promise.all(e.map((e) => e.updateComplete)), e === this.#n && (this.#t.refreshItems(t), this.#s());
+		}, this.#l = (e) => {
+			let t = e.composedPath(), n = this.#e.find((e) => t.includes(e));
+			n && this.#c(n);
 		};
 	}
 	static {
-		this.styles = s([d]);
+		this.styles = s([p]);
 	}
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.17.1",
-			children: ["nve-tabs-item"]
+			version: "2.18.0",
+			children: ["nve-tabs-item", "nve-tabs-item-group"]
 		};
 	}
 	get keynavListConfig() {
-		let e = this.items;
+		let e = this.#e;
 		return {
 			items: e,
 			initialItem: e.find((e) => e.selected),
-			layout: this.vertical ? "vertical" : "horizontal"
+			layout: this.vertical ? "vertical" : "horizontal",
+			dir: getComputedStyle(this).direction
 		};
 	}
-	#e(e) {
-		!this.behaviorSelect || !e.matches("nve-tabs-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
+	get #e() {
+		return l(this.entries ?? []);
 	}
+	#t;
+	#n;
+	#r;
 	render() {
-		return p`<div internal-host><slot></slot></div>`;
+		return h`<div internal-host><slot @slotchange="${this.#o}"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), n(this, l), a(this), this._internals.role = "tablist", this.addEventListener("click", this.#t);
+		super.connectedCallback(), n(this, d), a(this), this._internals.role = "tablist", this.addEventListener("click", this.#l), this.#i(), this.hasUpdated && this.#s();
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("click", this.#t);
+		super.disconnectedCallback(), this.removeEventListener("click", this.#l), this.#r?.disconnect();
+	}
+	firstUpdated() {
+		this.#r = new MutationObserver(this.#a), this.#i();
 	}
-	#t;
 	updated(e) {
 		super.updated(e), this._internals.ariaOrientation = this.vertical ? "vertical" : "horizontal";
 	}
+	#i() {
+		this.#r?.observe(this, {
+			childList: !0,
+			subtree: !0,
+			attributes: !0,
+			attributeFilter: [
+				"tabindex",
+				"href",
+				"slot"
+			]
+		});
+	}
+	#a;
+	#o;
+	#s() {
+		this.querySelectorAll(":scope > nve-tabs-item-group").forEach((e) => {
+			let t = l([e])[0];
+			e.accessoryTabEnabled = !!t && u(t);
+		});
+	}
+	#c(e) {
+		!this.behaviorSelect || !e.matches("nve-tabs-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
+	}
+	#l;
 };
-c([m({
+c([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "vertical", void 0), c([m({
+})], b.prototype, "vertical", void 0), c([g({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "borderless", void 0), c([m({
+})], b.prototype, "borderless", void 0), c([g({
 	type: Boolean,
 	attribute: "behavior-select"
-})], v.prototype, "behaviorSelect", void 0), c([g()], v.prototype, "items", void 0), v = c([e(), i()], v);
+})], b.prototype, "behaviorSelect", void 0), c([v()], b.prototype, "entries", void 0), b = c([e()], b);
 //#endregion
-export { v as Tabs, _ as TabsItem };
+export { b as Tabs, y as TabsItem };
 
 //# sourceMappingURL=tabs2.js.map

package/dist/tabs/tabs2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs2.js","names":[],"sources":["../../src/tabs/tabs.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  stateSelected,\n  useStyles,\n  keyNavigationList,\n  attachInternals,\n  audit,\n  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - The label displayed for the tab.\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@keyNavigationList<Tabs>()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    const items = this.items;\n    return {\n      items,\n      initialItem: items.find(item => item.selected),\n      layout: this.vertical ? 'vertical' : 'horizontal'\n    };\n  }\n\n  @queryAssignedElements() private items!: TabsItem[];\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.selected = true;\n  }\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', this.#onClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n  }\n\n  #onClick = (e: Event) => {\n    this.#selectTab(e.target as HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean });\n  };\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA6CO,IAAM,IAAN,cAAuB,EAAuB,CAAU,CAAC,CAAC;;EAM/C,KAAA,SAAA,EAAU,CAAC,CAAkB,CAAC;;;EAEnB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,UAAU;EACtB;;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,cAAc;EAEZ,AADA,MAAM,GAnB+C,KAAA,WAAA,IAoBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GAEf,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;AAvCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAN3C,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AA+DlB,IAAM,IAAN,cAAmB,EAAW;;EAqEvB,aAjE2C,KAAA,WAAA,IAKE,KAAA,aAAA,IAKmB,KAAA,iBAAA,IAuDhE,KAAA,MAAA,MAAa;GACvB,KAAK,GAAW,EAAE,MAA+F;EACnH;;;EAvDgB,KAAA,SAAA,EAAU,CAAC,CAAc,CAAC;;;EAEf,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAe;EAC5B;;CAGA,IAAI,mBAAqC;EACvC,IAAM,IAAQ,KAAK;EACnB,OAAO;GACL;GACA,aAAa,EAAM,MAAK,MAAQ,EAAK,QAAQ;GAC7C,QAAQ,KAAK,WAAW,aAAa;EACvC;CACF;CAOA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA,SAAS;EACP,OAAO,CAAI;CAKb;CAEA,oBAAoB;EAKlB,AAJA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAK,EAAQ;CAC9C;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,EAAQ;CACjD;CAEA;CAIA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;AACF;AAzEG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAoBxD,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GApCxB,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tabs2.js","names":[],"sources":["../../src/tabs/tabs.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { PropertyValues } from 'lit';\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { KeynavListConfig } from '@nvidia-elements/core/internal';\nimport {\n  stateSelected,\n  useStyles,\n  KeyNavigationListController,\n  attachInternals,\n  audit,\n  appendRootNodeStyle,\n  appendAnchorName,\n  removeAnchorName\n} from '@nvidia-elements/core/internal';\nimport type { TabsItemGroup } from './tabs-item-group.js';\nimport { getTabItems, isTabItemTabbable } from './utils.js';\nimport globalStyles from './tabs.global.css?inline';\nimport tabsItemStyleSheet from './tabs-item.css?inline';\nimport tabsStyleSheet from './tabs.css?inline';\n\n/**\n * @element nve-tabs-item\n * @description Represents an individual tab within a tablist, providing a selectable button for switching between content views.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - The label displayed for the tab.\n * @slot prefix - Decoration before the label.\n * @slot suffix - Supporting content after the label.\n * @cssprop --gap - Spacing between the label and decoration.\n * @cssprop --font-size\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --border-radius\n * @cssprop --color\n * @cssprop --height\n * @cssprop --cursor\n * @cssprop --text-transform\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\n@stateSelected<TabsItem>()\nexport class TabsItem extends ButtonFormControlMixin(LitElement) {\n  /**\n   * Determines which tab item the user selects, defaults to false.\n   */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  static styles = useStyles([tabsItemStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-item',\n    version: '0.0.0',\n    parents: ['nve-tabs', 'nve-tabs-item-group']\n  };\n\n  render() {\n    return html`\n      <div internal-host focus-within>\n        <slot name=\"prefix\"></slot>\n        <div id=\"label\"><slot></slot></div>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._internals.role = 'tab';\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n\n    if (props.has('selected')) {\n      if (this.selected) {\n        appendAnchorName(this, '--selected');\n      } else {\n        removeAnchorName(this, '--selected');\n      }\n    }\n  }\n}\n\n/**\n * @element nve-tabs\n * @description Tabs provide a selection UX, typically used for swapping content shown on a page, or within a navigation context.\n * @documentation https://nvidia.github.io/elements/docs/elements/tabs/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @slot - default slot for tab-item\n * @cssprop --gap\n * @cssprop --indicator-background\n * @cssprop --indicator-border-radius\n * @cssprop --indicator-height\n * @cssprop --border-inset\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class Tabs extends LitElement {\n  /**\n   * Determines whether the tabs should display in a vertical layout vs. defaulting to horizontal.\n   */\n  @property({ type: Boolean, reflect: true }) vertical = false;\n\n  /**\n   * Determines whether the tabs should display a border on selected items vs. defaults to show border.\n   */\n  @property({ type: Boolean, reflect: true }) borderless = false;\n\n  /**\n   * Determines whether the tabs should handle selection behavior vs. defaults to off.\n   */\n  @property({ type: Boolean, attribute: 'behavior-select' }) behaviorSelect = false;\n\n  static styles = useStyles([tabsStyleSheet]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs',\n    version: '0.0.0',\n    children: ['nve-tabs-item', 'nve-tabs-item-group']\n  };\n\n  /** @private */\n  get keynavListConfig(): KeynavListConfig {\n    const items = this.#items;\n    return {\n      items,\n      initialItem: items.find(item => item.selected),\n      layout: this.vertical ? 'vertical' : 'horizontal',\n      dir: getComputedStyle(this).direction\n    };\n  }\n\n  @queryAssignedElements() private entries!: HTMLElement[];\n\n  get #items(): TabsItem[] {\n    return getTabItems(this.entries ?? []);\n  }\n\n  #keynavController = new KeyNavigationListController(this);\n  #knownItems: TabsItem[] = [];\n  #itemsObserver?: MutationObserver;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncItems}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    attachInternals(this);\n    this._internals.role = 'tablist';\n    this.addEventListener('click', this.#onClick);\n    this.#observeItems();\n    if (this.hasUpdated) this.#syncAccessoryTabState();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.#onClick);\n    this.#itemsObserver?.disconnect();\n  }\n\n  firstUpdated() {\n    this.#itemsObserver = new MutationObserver(this.#syncFromItems);\n    this.#observeItems();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this._internals.ariaOrientation = this.vertical ? 'vertical' : 'horizontal';\n  }\n\n  #observeItems() {\n    this.#itemsObserver?.observe(this, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['tabindex', 'href', 'slot']\n    });\n  }\n\n  #syncFromItems = (records: MutationRecord[]) => {\n    if (records.some(record => record.type === 'childList' || record.attributeName === 'slot')) {\n      void this.#syncItems();\n    } else if (records.some(record => this.#items.some(item => item.contains(record.target)))) {\n      this.#syncAccessoryTabState();\n    }\n  };\n\n  #syncItems = async () => {\n    const items = this.#items;\n    if (items.length === this.#knownItems.length && items.every((item, index) => item === this.#knownItems[index])) {\n      this.#syncAccessoryTabState();\n      return;\n    }\n\n    const previousItems = this.#knownItems;\n    this.#knownItems = items;\n    await Promise.all(items.map(item => item.updateComplete));\n    if (items !== this.#knownItems) return;\n\n    this.#keynavController.refreshItems(previousItems);\n    this.#syncAccessoryTabState();\n  };\n\n  #syncAccessoryTabState() {\n    this.querySelectorAll<TabsItemGroup>(':scope > nve-tabs-item-group').forEach(group => {\n      const item = getTabItems([group])[0];\n      group.accessoryTabEnabled = !!item && isTabItemTabbable(item);\n    });\n  }\n\n  #selectTab(tabItem: HTMLElement & { matches: Element['matches']; disabled?: boolean; selected?: boolean }) {\n    if (!this.behaviorSelect || !tabItem.matches('nve-tabs-item') || tabItem.disabled) {\n      return;\n    }\n\n    this.keynavListConfig.items.forEach((i: HTMLElement) => ((i as TabsItem).selected = false));\n    tabItem.selected = true;\n  }\n\n  #onClick = (event: Event) => {\n    const path = event.composedPath();\n    const item = this.#items.find(candidate => path.includes(candidate));\n    if (item) this.#selectTab(item);\n  };\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAkDO,IAAM,IAAN,cAAuB,EAAuB,CAAU,CAAC,CAAC;;EAM/C,KAAA,SAAA,EAAU,CAAC,CAAkB,CAAC;;;EAEnB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,SAAS,CAAC,YAAY,qBAAqB;EAC7C;;CAEA,SAAS;EACP,OAAO,CAAI;CAOb;CAEA,cAAc;EAEZ,AADA,MAAM,GArB+C,KAAA,WAAA,IAsBrD,KAAK,OAAO;CACd;CAEA,oBAAoB;EAElB,AADA,MAAM,kBAAkB,GACxB,KAAK,WAAW,OAAO;CACzB;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GAEf,EAAM,IAAI,UAAU,MAClB,KAAK,WACP,EAAiB,MAAM,YAAY,IAEnC,EAAiB,MAAM,YAAY;CAGzC;AACF;AAzCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAN3C,IAAA,EAAA,CAAA,EAAM,GACN,EAAwB,CAAA,GAAA,CAAA;AAgElB,IAAM,IAAN,cAAmB,EAAW;;EAmIvB,aA/H2C,KAAA,WAAA,IAKE,KAAA,aAAA,IAKmB,KAAA,iBAAA,IA2BxD,KAAA,KAAA,IAAI,EAA4B,IAAI,GAC9B,KAAA,KAAA,CAAC,GAiDT,KAAA,MAAA,MAA8B;GAC9C,AAAI,EAAQ,MAAK,MAAU,EAAO,SAAS,eAAe,EAAO,kBAAkB,MAAM,IACvF,KAAU,GAAW,IACZ,EAAQ,MAAK,MAAU,KAAK,GAAO,MAAK,MAAQ,EAAK,SAAS,EAAO,MAAM,CAAC,CAAC,KACtF,KAAK,GAAuB;EAEhC,GAEa,KAAA,KAAA,YAAY;GACvB,IAAM,IAAQ,KAAK;GACnB,IAAI,EAAM,WAAW,KAAK,GAAY,UAAU,EAAM,OAAO,GAAM,MAAU,MAAS,KAAK,GAAY,EAAM,GAAG;IAC9G,KAAK,GAAuB;IAC5B;GACF;GAEA,IAAM,IAAgB,KAAK;GAC3B,KAAK,KAAc,GACnB,MAAM,QAAQ,IAAI,EAAM,KAAI,MAAQ,EAAK,cAAc,CAAC,GACpD,MAAU,KAAK,OAEnB,KAAK,GAAkB,aAAa,CAAa,GACjD,KAAK,GAAuB;EAC9B,GAkBY,KAAA,MAAA,MAAiB;GAC3B,IAAM,IAAO,EAAM,aAAa,GAC1B,IAAO,KAAK,GAAO,MAAK,MAAa,EAAK,SAAS,CAAS,CAAC;GACnE,AAAI,KAAM,KAAK,GAAW,CAAI;EAChC;;;EAvHgB,KAAA,SAAA,EAAU,CAAC,CAAc,CAAC;;;EAEf,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,iBAAiB,qBAAqB;EACnD;;CAGA,IAAI,mBAAqC;EACvC,IAAM,IAAQ,KAAK;EACnB,OAAO;GACL;GACA,aAAa,EAAM,MAAK,MAAQ,EAAK,QAAQ;GAC7C,QAAQ,KAAK,WAAW,aAAa;GACrC,KAAK,iBAAiB,IAAI,CAAC,CAAC;EAC9B;CACF;CAIA,IAAI,KAAqB;EACvB,OAAO,EAAY,KAAK,WAAW,CAAC,CAAC;CACvC;CAEA;CACA;CACA;CAKA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAK,GAAW;CAG1C;CAEA,oBAAoB;EAOlB,AANA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,WACvB,KAAK,iBAAiB,SAAS,KAAK,EAAQ,GAC5C,KAAK,GAAc,GACf,KAAK,cAAY,KAAK,GAAuB;CACnD;CAEA,uBAAuB;EAGrB,AAFA,MAAM,qBAAqB,GAC3B,KAAK,oBAAoB,SAAS,KAAK,EAAQ,GAC/C,KAAK,IAAgB,WAAW;CAClC;CAEA,eAAe;EAEb,AADA,KAAK,KAAiB,IAAI,iBAAiB,KAAK,EAAc,GAC9D,KAAK,GAAc;CACrB;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACnB,KAAK,WAAW,kBAAkB,KAAK,WAAW,aAAa;CACjE;CAEA,KAAgB;EACd,KAAK,IAAgB,QAAQ,MAAM;GACjC,WAAW;GACX,SAAS;GACT,YAAY;GACZ,iBAAiB;IAAC;IAAY;IAAQ;GAAM;EAC9C,CAAC;CACH;CAEA;CAQA;CAgBA,KAAyB;EACvB,KAAK,iBAAgC,8BAA8B,CAAC,CAAC,SAAQ,MAAS;GACpF,IAAM,IAAO,EAAY,CAAC,CAAK,CAAC,CAAC,CAAC;GAClC,EAAM,sBAAsB,CAAC,CAAC,KAAQ,EAAkB,CAAI;EAC9D,CAAC;CACH;CAEA,GAAW,GAAgG;EACrG,CAAC,KAAK,kBAAkB,CAAC,EAAQ,QAAQ,eAAe,KAAK,EAAQ,aAIzE,KAAK,iBAAiB,MAAM,SAAS,MAAoB,EAAgB,WAAW,EAAM,GAC1F,EAAQ,WAAW;CACrB;CAEA;AAKF;AApIG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAKzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAqBxD,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GApCxB,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}

package/dist/tabs/utils.d.ts

@@ -0,0 +1,4 @@
+import type { TabsItem } from './tabs.js';
+/** Resolves the tab controls owned by the tab strip, in visual order. */
+export declare function getTabItems(entries: readonly Element[]): TabsItem[];
+export declare function isTabItemTabbable(item: TabsItem): boolean;

package/dist/tabs/utils.js

@@ -0,0 +1,18 @@
+//#region src/tabs/utils.ts
+function e(e) {
+	return e.flatMap((e) => {
+		if (e.getAttribute("slot")) return [];
+		if (e.localName === "nve-tabs-item") return [e];
+		if (e.localName !== "nve-tabs-item-group") return [];
+		let t = e.querySelector(":scope > nve-tabs-item:is(:not([slot]), [slot=\"\"])");
+		return t ? [t] : [];
+	});
+}
+function t(e) {
+	let t = e.querySelector(":scope > a:is(:not([slot]), [slot=\"\"])");
+	return e.tabIndex >= 0 || !!t && t.matches("[href], [tabindex]") && t.tabIndex >= 0;
+}
+//#endregion
+export { e as getTabItems, t as isTabItemTabbable };
+
+//# sourceMappingURL=utils.js.map

package/dist/tabs/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":[],"sources":["../../src/tabs/utils.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { TabsItem } from './tabs.js';\n\n/** Resolves the tab controls owned by the tab strip, in visual order. */\nexport function getTabItems(entries: readonly Element[]): TabsItem[] {\n  return entries.flatMap(entry => {\n    if (entry.getAttribute('slot')) return [];\n    if (entry.localName === 'nve-tabs-item') return [entry as TabsItem];\n    if (entry.localName !== 'nve-tabs-item-group') return [];\n    const item = entry.querySelector<TabsItem>(':scope > nve-tabs-item:is(:not([slot]), [slot=\"\"])');\n    return item ? [item] : [];\n  });\n}\n\nexport function isTabItemTabbable(item: TabsItem): boolean {\n  const anchor = item.querySelector<HTMLAnchorElement>(':scope > a:is(:not([slot]), [slot=\"\"])');\n  return item.tabIndex >= 0 || (!!anchor && anchor.matches('[href], [tabindex]') && anchor.tabIndex >= 0);\n}\n"],"mappings":";AAMA,SAAgB,EAAY,GAAyC;CACnE,OAAO,EAAQ,SAAQ,MAAS;EAC9B,IAAI,EAAM,aAAa,MAAM,GAAG,OAAO,CAAC;EACxC,IAAI,EAAM,cAAc,iBAAiB,OAAO,CAAC,CAAiB;EAClE,IAAI,EAAM,cAAc,uBAAuB,OAAO,CAAC;EACvD,IAAM,IAAO,EAAM,cAAwB,sDAAoD;EAC/F,OAAO,IAAO,CAAC,CAAI,IAAI,CAAC;CAC1B,CAAC;AACH;AAEA,SAAgB,EAAkB,GAAyB;CACzD,IAAM,IAAS,EAAK,cAAiC,0CAAwC;CAC7F,OAAO,EAAK,YAAY,KAAM,CAAC,CAAC,KAAU,EAAO,QAAQ,oBAAoB,KAAK,EAAO,YAAY;AACvG"}

package/dist/tag/tag2.js

@@ -17,7 +17,7 @@ var p = class extends d(c) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.17.1"
+			version: "2.18.0"
 		};
 	}
 	static {

package/dist/textarea/textarea2.js

@@ -16,7 +16,7 @@ var i = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.17.1"
+			version: "2.18.0"
 		};
 	}
 };

package/dist/time/time2.js

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

package/dist/toast/toast2.js

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

package/dist/toggletip/toggletip-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip-footer",
-			version: "2.17.1",
+			version: "2.18.0",
 			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: "2.17.1",
+			version: "2.18.0",
 			parents: ["nve-toggletip"]
 		};
 	}

package/dist/toggletip/toggletip2.js

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

package/dist/toolbar/toolbar2.js

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

package/dist/tooltip/tooltip2.js

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

package/dist/tree/tree-node2.js

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

package/dist/tree/tree2.js

@@ -22,7 +22,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-tree",
-			version: "2.17.1",
+			version: "2.18.0",
 			children: ["nve-tree-node"]
 		};
 	}

package/dist/week/week2.js

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