@nvidia-elements/core 2.20.1 → 2.20.3

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';\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"}
+{"version":3,"file":"tabs.examples.js","names":["tabs_examples_default"],"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,IAAAA,IAAS"}

package/dist/tabs/tabs.global.js

@@ -1,6 +1,5 @@
-//#region src/tabs/tabs.global.css?inline
+// src/tabs/tabs.global.css?inline
 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 };
 
 //# sourceMappingURL=tabs.global.js.map

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  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":""}
+{"version":3,"file":"tabs.global.js","names":["tabs_global_default"],"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,6 +1,5 @@
-//#region src/tabs/tabs.css?inline
+// 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(: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 };
 
 //# sourceMappingURL=tabs.js.map

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(: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":""}
+{"version":3,"file":"tabs.js","names":["tabs_default"],"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

@@ -4,7 +4,7 @@ import { KeyNavigationListController as i } from "../internal/controllers/keynav
 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 c from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { getTabItems as l, isTabItemTabbable as u } from "./utils.js";
 import d from "./tabs.global.js";
 import f from "./tabs-item.js";
@@ -13,7 +13,7 @@ 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
+// src/tabs/tabs.ts
 var y = class extends _(m) {
 	static {
 		this.styles = s([f]);
@@ -21,7 +21,7 @@ var y = class extends _(m) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.20.1",
+			version: "2.20.3",
 			parents: ["nve-tabs", "nve-tabs-item-group"]
 		};
 	}
@@ -65,7 +65,7 @@ var b = class extends m {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.20.1",
+			version: "2.20.3",
 			children: ["nve-tabs-item", "nve-tabs-item-group"]
 		};
 	}
@@ -120,7 +120,7 @@ var b = class extends m {
 		});
 	}
 	#c(e) {
-		!this.behaviorSelect || !e.matches("nve-tabs-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
+		this.behaviorSelect && e.matches("nve-tabs-item") && !e.disabled && (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
 	}
 	#l;
 };
@@ -134,7 +134,6 @@ c([g({
 	type: Boolean,
 	attribute: "behavior-select"
 })], b.prototype, "behaviorSelect", void 0), c([v()], b.prototype, "entries", void 0), b = c([e()], b);
-//#endregion
 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  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":"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"}
+{"version":3,"file":"tabs2.js","names":["tabsItemStyleSheet","_decorate","tabsStyleSheet","globalStyles","__decorate","tabs_global_default","tabs_item_default","tabs_default","TabsItem","ButtonFormControlMixin","LitElement","useStyles","props","appendAnchorName","removeAnchorName","property","audit","stateSelected","Tabs","_args","#keynavController","KeyNavigationListController","#knownItems","#syncFromItems","records","record","#syncItems","#items","item","#syncAccessoryTabState","items","index","previousItems","#onClick","path","event","candidate","#selectTab","getTabItems","appendRootNodeStyle","attachInternals","#observeItems","#itemsObserver","group","isTabItemTabbable","tabItem","queryAssignedElements"],"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":"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"}

package/dist/tabs/utils.js

@@ -1,4 +1,4 @@
-//#region src/tabs/utils.ts
+// src/tabs/utils.ts
 function e(e) {
 	return e.flatMap((e) => {
 		if (e.getAttribute("slot")) return [];
@@ -12,7 +12,6 @@ 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

@@ -1 +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"}
+{"version":3,"file":"utils.js","names":["getTabItems","entries","entry","item","isTabItemTabbable","anchor"],"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,SAAgBA,EAAY,GAAyC;CACnE,OAAOC,EAAQ,SAAQ,MAAS;EAC9B,IAAIC,EAAM,aAAa,MAAM,GAAG,OAAO,CAAC;EACxC,IAAIA,EAAM,cAAc,iBAAiB,OAAO,CAACA,CAAiB;EAClE,IAAIA,EAAM,cAAc,uBAAuB,OAAO,CAAC;EACvD,IAAMC,IAAOD,EAAM,cAAwB,sDAAoD;EAC/F,OAAOC,IAAO,CAACA,CAAI,IAAI,CAAC;CAC1B,CAAC;AACH;AAEA,SAAgBC,EAAkB,GAAyB;CACzD,IAAMC,IAASF,EAAK,cAAiC,0CAAwC;CAC7F,OAAOA,EAAK,YAAY,KAAM,CAAC,CAACE,KAAUA,EAAO,QAAQ,oBAAoB,KAAKA,EAAO,YAAY;AACvG"}

package/dist/tag/define.js

@@ -1,7 +1,6 @@
 import { Tag as e } from "./tag2.js";
 import { define as t } from "@nvidia-elements/foundations/internal/define";
-//#region src/tag/define.ts
+// src/tag/define.ts
 t(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/tag/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/tag/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Tag } from '@nvidia-elements/core/tag';\n\ndefine(Tag);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tag': Tag;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAG"}
+{"version":3,"file":"define.js","names":["define","Tag"],"sources":["../../src/tag/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Tag } from '@nvidia-elements/core/tag';\n\ndefine(Tag);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tag': Tag;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAG"}

package/dist/tag/index.js

@@ -1,2 +1 @@
-import { Tag as e } from "./tag2.js";
-export { e as Tag };
+export { Tag } from "./tag2.js";

package/dist/tag/tag.examples.js

@@ -1,6 +1,5 @@
-//#region src/tag/tag.examples.ts
+// src/tag/tag.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tag.examples.js.map

package/dist/tag/tag.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.examples.js","names":[],"sources":["../../src/tag/tag.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/tag/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Tag',\n  component: 'nve-tag',\n};\n\n/**\n * @summary Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.\n */\nexport const Default = {\n  render: () => html`\n<nve-tag>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag closable>default-color</nve-tag>\n  <nve-tag closable color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag closable color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag closable color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag closable color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag closable color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag closable color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag closable color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag closable color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag closable color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag closable color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag closable color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag closable color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag closable color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag closable color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag closable color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag closable color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag closable color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag closable color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag closable color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag closable color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag closable color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag closable color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.\n * @tags test-case\n */\nexport const Readonly = {\n  render: () => html`\n<nve-tag readonly>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.\n */\nexport const Group = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>3+</nve-tag>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"add\"></nve-icon-button>\n</div>`\n};\n\n/**\n * @summary Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag>default-color</nve-tag>\n  <nve-tag color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag color=\"brand-green\">brand-green</nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary High prominence tags with emphasis styling for important categories and priority labels that require visual attention.\n * @tags test-case\n */\nexport const Prominence = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag prominence=\"emphasis\" color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Tag with icon, showing how the icon/dot color inherits the tag color.\n * @tags test-case\n */\nexport const SlottedColor = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag style=\"--max-width: 100px\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> very words long here <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> default <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-cardinal\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-cardinal <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-slate\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-slate <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-denim\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-denim <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-indigo\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-indigo <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-cobalt\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-cobalt <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-sky\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-sky <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-cyan\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-cyan <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-mint\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-mint <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-seafoam\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-seafoam <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-grass\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-grass <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-amber\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-amber <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"orange-pumpkin\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> orange-pumpkin <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-tomato\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-tomato <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-magenta\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-magenta <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-plum\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-plum <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-violet\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-violet <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-lavender\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-lavender <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-rose\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-rose <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-jade\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-jade <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"lime-pear\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> lime-pear <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-nova\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-nova <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"brand-green\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> brand-green <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary Single tag with constrained width, with text overflow behavior and content truncation in limited space.\n * @tags test-case\n */\nexport const OverflowSingle = {\n  render: () => html`\n<nve-tag style=\"--width: 150px\">some really long content</nve-tag>`\n};\n\n\n/**\n * @summary Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.\n * @tags test-case\n */\nexport const OverflowMaxWidth= {\n  render: () => html`\n  <style>\n    .limit-width {\n      --max-width: 100px;\n    }\n  </style>\n  <nve-tag class=\"limit-width\">two words</nve-tag>\n  <nve-tag class=\"limit-width\">three words here</nve-tag>\n  <nve-tag class=\"limit-width\">four words long here</nve-tag>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"tag.examples.js","names":["tag_examples_default"],"sources":["../../src/tag/tag.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/tag/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Tag',\n  component: 'nve-tag',\n};\n\n/**\n * @summary Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.\n */\nexport const Default = {\n  render: () => html`\n<nve-tag>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag closable>default-color</nve-tag>\n  <nve-tag closable color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag closable color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag closable color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag closable color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag closable color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag closable color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag closable color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag closable color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag closable color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag closable color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag closable color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag closable color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag closable color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag closable color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag closable color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag closable color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag closable color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag closable color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag closable color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag closable color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag closable color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag closable color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.\n * @tags test-case\n */\nexport const Readonly = {\n  render: () => html`\n<nve-tag readonly>topic-tag</nve-tag>`\n};\n\n/**\n * @summary Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.\n */\nexport const Group = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>topic-tag</nve-tag>\n  <nve-tag>3+</nve-tag>\n  <nve-icon-button container=\"flat\" size=\"sm\" icon-name=\"add\"></nve-icon-button>\n</div>`\n};\n\n/**\n * @summary Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag>default-color</nve-tag>\n  <nve-tag color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag color=\"brand-green\">brand-green</nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary High prominence tags with emphasis styling for important categories and priority labels that require visual attention.\n * @tags test-case\n */\nexport const Prominence = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag prominence=\"emphasis\" color=\"red-cardinal\">red-cardinal</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-slate\">gray-slate</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"gray-denim\">gray-denim</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-indigo\">blue-indigo</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-cobalt\">blue-cobalt</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"blue-sky\">blue-sky</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-cyan\">teal-cyan</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-mint\">green-mint</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"teal-seafoam\">teal-seafoam</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-grass\">green-grass</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-amber\">yellow-amber</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"orange-pumpkin\">orange-pumpkin</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"red-tomato\">red-tomato</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-magenta\">pink-magenta</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-plum\">purple-plum</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-violet\">purple-violet</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"purple-lavender\">purple-lavender</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"pink-rose\">pink-rose</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"green-jade\">green-jade</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"lime-pear\">lime-pear</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"yellow-nova\">yellow-nova</nve-tag>\n  <nve-tag prominence=\"emphasis\" color=\"brand-green\">brand-green</nve-tag>\n</div>`\n};\n\n/**\n * @summary Tag with icon, showing how the icon/dot color inherits the tag color.\n * @tags test-case\n */\nexport const SlottedColor = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:wrap\">\n  <nve-tag style=\"--max-width: 100px\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> very words long here <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> default <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-cardinal\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-cardinal <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-slate\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-slate <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"gray-denim\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> gray-denim <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-indigo\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-indigo <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-cobalt\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-cobalt <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"blue-sky\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> blue-sky <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-cyan\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-cyan <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-mint\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-mint <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"teal-seafoam\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> teal-seafoam <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-grass\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-grass <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-amber\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-amber <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"orange-pumpkin\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> orange-pumpkin <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"red-tomato\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> red-tomato <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-magenta\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-magenta <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-plum\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-plum <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-violet\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-violet <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"purple-lavender\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> purple-lavender <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"pink-rose\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> pink-rose <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"green-jade\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> green-jade <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"lime-pear\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> lime-pear <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"yellow-nova\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> yellow-nova <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n  <nve-tag color=\"brand-green\"><nve-icon slot=\"prefix\" name=\"person\" size=\"sm\"></nve-icon> brand-green <nve-dot slot=\"suffix\" size=\"sm\">10</nve-dot></nve-tag>\n</div>\n  `\n};\n\n/**\n * @summary Single tag with constrained width, with text overflow behavior and content truncation in limited space.\n * @tags test-case\n */\nexport const OverflowSingle = {\n  render: () => html`\n<nve-tag style=\"--width: 150px\">some really long content</nve-tag>`\n};\n\n\n/**\n * @summary Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.\n * @tags test-case\n */\nexport const OverflowMaxWidth= {\n  render: () => html`\n  <style>\n    .limit-width {\n      --max-width: 100px;\n    }\n  </style>\n  <nve-tag class=\"limit-width\">two words</nve-tag>\n  <nve-tag class=\"limit-width\">three words here</nve-tag>\n  <nve-tag class=\"limit-width\">four words long here</nve-tag>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/tag/tag.js

@@ -1,6 +1,5 @@
-//#region src/tag/tag.css?inline
+// src/tag/tag.css?inline
 var e = ":host{--background: var(--state-color-background);--color: var(--state-color);--state-color-base: var(--nve-ref-color-blue-cobalt-1100);--nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--padding: 0 var(--nve-ref-size-200);--border: 0;--border-radius: var(--nve-ref-border-radius-full);--font-weight: var(--nve-ref-font-weight-regular);--cursor: pointer;--height: var(--nve-ref-size-600);--width: initial;--max-width: initial;display:inline-flex;user-select:none}[internal-host]{--_color: var(--color);font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);padding:var(--padding);border:var(--border);border-radius:var(--border-radius);cursor:var(--cursor);height:var(--height);width:var(--width);max-width:var(--max-width);display:inline-flex;line-height:1.1em;place-items:center;place-content:center;white-space:nowrap}slot:not([name]){text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}::slotted([nve-text]){color:inherit!important}::slotted(nve-icon){--color: var(--_color)}::slotted(nve-dot){--color: var(--state-color-background);--status-color: var(--_color)}nve-icon{--color: inherit;cursor:var(--cursor)}:host([readonly]){--text-decoration: none;--cursor: cursor}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tag.js.map

package/dist/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.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  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  --_color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot:not([name]) {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_color);\n}\n\n::slotted(nve-dot) {\n  --color: var(--state-color-background);\n  --status-color: var(--_color);\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}
+{"version":3,"file":"tag.js","names":["tag_default"],"sources":["../../src/tag/tag.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  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  --_color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot:not([name]) {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_color);\n}\n\n::slotted(nve-dot) {\n  --color: var(--state-color-background);\n  --status-color: var(--_color);\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}

package/dist/tag/tag2.js

@@ -1,7 +1,7 @@
 import { TypeClosableController as e } from "../internal/controllers/type-closable.controller.js";
 import { scopedRegistry as t } from "../internal/decorators/scoped-registry.js";
 import { colorStateStyles as n, useStyles as r } from "../internal/styles/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as a } from "../icon/icon2.js";
 import o from "./tag.js";
 import { LitElement as s, html as c } from "lit";
@@ -9,7 +9,7 @@ import { property as l } from "lit/decorators/property.js";
 import { I18nController as u } from "@nvidia-elements/foundations/internal/i18n";
 import { ButtonFormControlMixin as d } from "@nvidia-elements/forms/mixins";
 import { ifDefined as f } from "lit/directives/if-defined.js";
-//#region src/tag/tag.ts
+// src/tag/tag.ts
 var p = { close: "close" }, m = class extends d(s) {
 	static {
 		this.styles = r([n, o]);
@@ -17,7 +17,7 @@ var p = { close: "close" }, m = class extends d(s) {
 	static {
 		this.metadata = {
 			tag: "nve-tag",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -39,7 +39,6 @@ i([l({ type: Boolean })], m.prototype, "closable", void 0), i([l({
 	type: String,
 	reflect: !0
 })], m.prototype, "prominence", void 0), i([l({ type: Object })], m.prototype, "i18n", void 0), m = i([t()], m);
-//#endregion
 export { m as Tag };
 
 //# sourceMappingURL=tag2.js.map

package/dist/tag/tag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag2.js","names":[],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport { TypeClosableController, useStyles, colorStateStyles, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @documentation https://nvidia.github.io/elements/docs/elements/tag/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - Text or other content that identifies the category or group.\n * @slot prefix - Optional prefix content, such as a status nve-icon.\n * @slot suffix - Optional suffix content, such as a nve-dot counter.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,IAAe,EACnB,OAAO,QACT,GA4Ba,IAAN,cAAkB,EAAuB,CAAU,CAAC,CAAC;;EAC1C,KAAA,SAAA,EAAU,CAAC,GAAkB,CAAM,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,wHAKL,KAAK,WAAW,CAAI,uCAAsC,KAAK,GAAwB,MAAM,EAAE,oEAAkE,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,GA3BgC,KAAA,WAAA,IAQA,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAGhD,KAAA,OAAA,KAAK,GAAgB,MAE9B,KAAA,KAAA,IAAI,EAAuB,IAAI,GAevD,KAAK,OAAO;CACd;AACF;AA9BG,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAG1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAzB3B,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tag2.js","names":["styles","_decorate","__decorate","tag_default","i18nDefaults","Tag","ButtonFormControlMixin","LitElement","useStyles","colorStateStyles","Icon","#typeClosableController","ifDefined","#i18nController","I18nController","TypeClosableController","property","scopedRegistry"],"sources":["../../src/tag/tag.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport type { Color, Prominence } from '@nvidia-elements/core/internal';\nimport { TypeClosableController, useStyles, colorStateStyles, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './tag.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-tag\n * @description A interactive element that represents a category or group of content. Typically used to filter or organize content for one to many relations.\n * @documentation https://nvidia.github.io/elements/docs/elements/tag/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/tag\n * @slot - Text or other content that identifies the category or group.\n * @slot prefix - Optional prefix content, such as a status nve-icon.\n * @slot suffix - Optional suffix content, such as a nve-dot counter.\n * @cssprop --background\n * @cssprop --color\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --padding\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --font-weight\n * @cssprop --cursor\n * @cssprop --height\n * @cssprop --width\n * @cssprop --max-width\n * @cssprop --text-decoration\n * @csspart icon - The icon element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class Tag extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([colorStateStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tag',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** Determines if tag is closable, if true, the component renders a close icon. */\n  @property({ type: Boolean }) closable = false;\n\n  /** Determines the color of the tag. */\n  @property({ type: String, reflect: true }) color: Color;\n\n  /** Determines the visual prominence or weight */\n  @property({ type: String, reflect: true }) prominence?: Extract<Prominence, 'emphasis'>;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /** Updates internal string values for internationalization. */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  #typeClosableController = new TypeClosableController(this);\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n        ${this.closable ? html`<nve-icon part=\"icon\" @click=${() => this.#typeClosableController.close()} container=\"flat\" name=\"cancel\" size=\"sm\" role=\"img\" aria-label=${ifDefined(this.i18n.close)}></nve-icon>` : ''}\n      </div>\n    `;\n  }\n\n  constructor() {\n    super();\n    this.type = 'button';\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAMI,IAAe,EACnB,OAAO,QACT,GA4BaC,IAAN,cAAkBC,EAAuBC,CAAU,CAAC,CAAC;;EAC1C,KAAA,SAAAC,EAAU,CAACC,GAAkBT,CAAM,CAAC;;;EAEzB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBU,EAAK,SAAS,MAAMA,EACvB;;CAWA;CAKA;CAEA,SAAS;EACP,OAAO,CAAI,wHAKL,KAAK,WAAW,CAAI,uCAAsC,KAAKC,GAAwB,MAAM,EAAE,oEAAkEC,EAAU,KAAK,KAAK,KAAK,EAAE,iBAAgB,GAAG;CAGvN;CAEA,cAAc;EAEZ,AADA,MAAM,GA3BgC,KAAA,WAAA,IAQA,KAAAC,KAAA,IAAIC,EAAqB,MAAMV,CAAY,GAGhD,KAAA,OAAA,KAAKS,GAAgB,MAE9B,KAAAF,KAAA,IAAII,EAAuB,IAAI,GAevD,KAAK,OAAO;CACd;AACF;AA9BGd,EAAA,CAAAe,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAX,EAAA,WAAA,YAAA,KAAA,CAAA,GAG1BJ,EAAA,CAAAe,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,SAAA,KAAA,CAAA,GAGxCJ,EAAA,CAAAe,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,cAAA,KAAA,CAAA,GAKxCJ,EAAA,CAAAe,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAX,EAAA,WAAA,QAAA,KAAA,CAAA,GAzB3B,IAAAJ,EAAA,CAAAgB,EAAe,CAAA,GAAAZ,CAAA"}

package/dist/textarea/define.js

@@ -4,6 +4,5 @@ import { ControlGroup as n } from "../forms/control-group/control-group2.js";
 import { Textarea as r } from "./textarea2.js";
 import { define as i } from "@nvidia-elements/foundations/internal/define";
 i(r), i(t), i(n), i(e);
-//#endregion
 
 //# sourceMappingURL=define.js.map

package/dist/textarea/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/textarea/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Textarea } from '@nvidia-elements/core/textarea';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Textarea);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-textarea': Textarea;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAQ,GACf,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","Textarea","Control","ControlGroup","ControlMessage"],"sources":["../../src/textarea/define.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { define } from '@nvidia-elements/foundations/internal/define';\nimport { Textarea } from '@nvidia-elements/core/textarea';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(Textarea);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-textarea': Textarea;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAQ,GACfD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/textarea/index.js

@@ -1,2 +1 @@
-import { Textarea as e } from "./textarea2.js";
-export { e as Textarea };
+export { Textarea } from "./textarea2.js";

package/dist/textarea/textarea.examples.js

@@ -1,6 +1,5 @@
-//#region src/textarea/textarea.examples.ts
+// src/textarea/textarea.examples.ts
 var e = "";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=textarea.examples.js.map