@nvidia-elements/core 0.0.9 → 0.0.11

package/dist/tabs/tabs.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/tabs/tabs.examples.json",
   "items": [
     {
-      "id": "core-tabs_default",
+      "id": "tabs",
       "name": "Default",
       "template": "<nve-tabs-group id=\"tab-group-default\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-default\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-default\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">overview content</div>\n  <div slot=\"details\">details content</div>\n  <div slot=\"settings\">settings content</div>\n</nve-tabs-group>\n",
       "summary": "Tabs group component for organizing content into selectable sections with disabled state support.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_borderless-tabs",
+      "id": "tabs-borderless-tabs",
       "name": "BorderlessTabs",
       "template": "<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",
       "summary": "Borderless tabs variant for minimal visual styling without border emphasis.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-tabs_border-background",
+      "id": "tabs-border-background",
       "name": "BorderBackground",
       "template": "<nve-tabs\n  behavior-select\n  style=\"--indicator-background: var(--nve-ref-color-brand-green-900); --indicator-border-radius: none\"\n>\n  <nve-tabs-item selected> Tab 1 </nve-tabs-item>\n  <nve-tabs-item> Tab 2 </nve-tabs-item>\n  <nve-tabs-item> Tab 3 </nve-tabs-item>\n</nve-tabs>\n",
       "summary": "Tabs with custom border background styling for brand-specific visual customization.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-tabs_with-dots",
+      "id": "tabs-with-dots",
       "name": "WithDots",
       "template": "<nve-tabs behavior-select>\n  <nve-tabs-item>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3 </nve-tabs-item>\n  <nve-tabs-item selected>\n    Tab 4\n    <nve-dot aria-label=\"10 notifications\">10</nve-dot>\n  </nve-tabs-item>\n  <nve-tabs-item>Tab 5</nve-tabs-item>\n</nve-tabs>\n",
       "summary": "Tabs with notification dots for indicating unread content or alerts within tab sections.",
@@ -43,7 +43,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_vertical-tabs",
+      "id": "tabs-vertical-tabs",
       "name": "VerticalTabs",
       "template": "<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",
       "summary": "Vertical tabs layout for sidebar navigation and vertical content organization patterns.",
@@ -52,7 +52,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_borderless-vertical-tabs",
+      "id": "tabs-borderless-vertical-tabs",
       "name": "BorderlessVerticalTabs",
       "template": "<nve-tabs vertical borderless behavior-select style=\"width: 250px\">\n  <nve-tabs-item> <nve-icon name=\"gear\"></nve-icon> Tab 1 </nve-tabs-item>\n  <nve-tabs-item> <nve-icon name=\"person\"></nve-icon> Tab 2 </nve-tabs-item>\n  <nve-tabs-item selected> <nve-icon name=\"beaker\"></nve-icon> Tab 3 </nve-tabs-item>\n  <nve-tabs-item> <nve-icon name=\"add-grid\"></nve-icon> Tab 4 </nve-tabs-item>\n</nve-tabs>\n",
       "summary": "Borderless vertical tabs with icons for enhanced visual navigation and minimal styling.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-tabs_stateless-tabs",
+      "id": "tabs-stateless-tabs",
       "name": "StatelessTabs",
       "template": "<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",
       "summary": "Stateless tabs for external state management without built-in selection behavior.",
@@ -72,7 +72,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_links",
+      "id": "tabs-links",
       "name": "Links",
       "template": "<nve-tabs>\n  <nve-tabs-item selected>\n    <a href=\"./docs/elements/tabs/#links\">Tab 1</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"./docs/elements/tabs/#links\">Tab 2</a>\n  </nve-tabs-item>\n  <nve-tabs-item>\n    <a href=\"/docs/elements/tabs/#links\">Tab 3</a>\n  </nve-tabs-item>\n</nve-tabs>\n",
       "summary": "Tabs with link navigation for routing-based tab switching and page navigation.",
@@ -81,7 +81,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_overflow-tabs",
+      "id": "tabs-overflow-tabs",
       "name": "OverflowTabs",
       "template": "<nve-tabs behavior-select>\n  <nve-tabs-item selected>Tab 1</nve-tabs-item>\n  <nve-tabs-item>Tab 2</nve-tabs-item>\n  <nve-tabs-item>Tab 3</nve-tabs-item>\n  <nve-tabs-item>Tab 4</nve-tabs-item>\n  <nve-tabs-item>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",
       "summary": "Tabs with overflow handling for managing large numbers of tabs with scrolling behavior.",
@@ -92,7 +92,7 @@
       ]
     },
     {
-      "id": "core-tabs_with-tooltips",
+      "id": "tabs-with-tooltips",
       "name": "WithTooltips",
       "template": "<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",
       "summary": "Tabs selection state and a popover working together without any CSS Anchor Positioning collisions.",
@@ -103,7 +103,7 @@
       ]
     },
     {
-      "id": "core-tabs_group-panels",
+      "id": "tabs-group-panels",
       "name": "GroupPanels",
       "template": "<nve-tabs-group id=\"tab-group\">\n  <nve-tabs>\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group\" value=\"overview\">Overview</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\">\n    <nve-card style=\"width: 100%; min-width: 320px\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\">\n    <nve-card style=\"width: 100%; min-width: 320px\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\">\n    <nve-card style=\"width: 100%; min-width: 320px\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
       "summary": "Group tabs with slot-matched panels and structured card content when one selected value should control both the tab state and revealed details.",
@@ -112,7 +112,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_group-vertical-panels",
+      "id": "tabs-group-vertical-panels",
       "name": "GroupVerticalPanels",
       "template": "<nve-tabs-group id=\"tab-group-vertical-start\" alignment=\"start\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"overview\"\n      >Overview</nve-tabs-item\n    >\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-start\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
       "summary": "Tab group with vertical tab strip at inline-start beside slot-matched panels for sidebar-style settings and details layouts in LTR.",
@@ -121,7 +121,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_group-vertical-end",
+      "id": "tabs-group-vertical-end",
       "name": "GroupVerticalEnd",
       "template": "<nve-tabs-group id=\"tab-group-vertical-end\" alignment=\"end\">\n  <nve-tabs vertical style=\"width: 250px\">\n    <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"overview\"\n      >Overview</nve-tabs-item\n    >\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"details\">Details</nve-tabs-item>\n    <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-vertical-end\" value=\"settings\">Settings</nve-tabs-item>\n  </nve-tabs>\n  <div slot=\"overview\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Overview</h2>\n          <p nve-text=\"body sm muted\">High-level release status and current priorities.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Status</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Ready for review</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Audience</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Design and product owners</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Next step</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Validate the tab labels and panel order</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"details\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Details</h2>\n          <p nve-text=\"body sm muted\">Supporting context for teams that need implementation specifics.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Owner</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Elements design system</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Coverage</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Unit, SSR, and accessibility checks</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Focus</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Selection sync and panel wiring</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n  <div slot=\"settings\" style=\"width: 100%; min-width: 320px\">\n    <nve-card style=\"width: 100%\">\n      <nve-card-header>\n        <div nve-layout=\"column gap:xs\">\n          <h2 nve-text=\"heading sm bold\">Settings</h2>\n          <p nve-text=\"body sm muted\">Configuration notes for authors and downstream consumers.</p>\n        </div>\n      </nve-card-header>\n      <nve-card-content>\n        <dl nve-layout=\"grid gap:sm\">\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Selection</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Controlled by the active tab value</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Panels</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">Matched by slot name</dd>\n          <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Actions</dt>\n          <dd nve-layout=\"span:8\" nve-text=\"body\">External buttons can drive the same group</dd>\n        </dl>\n      </nve-card-content>\n    </nve-card>\n  </div>\n</nve-tabs-group>\n",
       "summary": "Tab group with vertical tab strip at inline-end beside slot-matched panels when the tab rail should sit on the opposite side from inline-start sidebars.",
@@ -130,7 +130,7 @@
       "tags": []
     },
     {
-      "id": "core-tabs_external-controls",
+      "id": "tabs-external-controls",
       "name": "ExternalControls",
       "template": "<div nve-layout=\"column gap:lg\">\n  <nve-tabs-group id=\"tab-group-controls\">\n    <nve-tabs>\n      <nve-tabs-item selected command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\"\n        >Overview</nve-tabs-item\n      >\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">Details</nve-tabs-item>\n      <nve-tabs-item command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">Settings</nve-tabs-item>\n    </nve-tabs>\n    <div slot=\"overview\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Overview</h2>\n            <p nve-text=\"body sm muted\">Quick status for the current tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Overview is active</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab for a summary of the current workflow</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Pair it with external controls for quick switching</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"details\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Details</h2>\n            <p nve-text=\"body sm muted\">Deeper context for follow-up tasks and implementation notes.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Details are available on demand</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use this tab when readers need extra context</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Keep the content specific to the selected tab</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n    <div slot=\"settings\">\n      <nve-card style=\"width: 100%; min-width: 320px\">\n        <nve-card-header>\n          <div nve-layout=\"column gap:xs\">\n            <h2 nve-text=\"heading sm bold\">Settings</h2>\n            <p nve-text=\"body sm muted\">Preferences and coordination notes for the shared tab group.</p>\n          </div>\n        </nve-card-header>\n        <nve-card-content>\n          <dl nve-layout=\"grid gap:sm\">\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">State</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Settings remain in sync with the selected value</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Signal</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Useful for configuration and admin actions</dd>\n            <dt nve-layout=\"span:4\" nve-text=\"body muted medium\">Tip</dt>\n            <dd nve-layout=\"span:8\" nve-text=\"body\">Use external buttons when the layout needs extra actions</dd>\n          </dl>\n        </nve-card-content>\n      </nve-card>\n    </div>\n  </nve-tabs-group>\n  <div nve-layout=\"row gap:xs\">\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"overview\">overview</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"details\">details</nve-button>\n    <nve-button command=\"--toggle\" commandfor=\"tab-group-controls\" value=\"settings\">settings</nve-button>\n  </div>\n</div>\n",
       "summary": "Drive the same tabs group from external buttons when layouts need tabs and secondary actions to stay in sync with structured panel content.",

package/dist/tabs/tabs2.js

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

package/dist/tag/tag.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/tag/tag.examples.json",
   "items": [
     {
-      "id": "core-tag_default",
+      "id": "tag",
       "name": "Default",
       "template": "<nve-tag>topic-tag</nve-tag>\n",
       "summary": "Basic tag component for interactive labeling and categorizing of content, providing clear visual organization and metadata display.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-tag_closable",
+      "id": "tag-closable",
       "name": "Closable",
       "template": "<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",
       "summary": "Closable tags with comprehensive color palette, enabling user interaction for filtering, selection, and dynamic content management.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-tag_readonly",
+      "id": "tag-readonly",
       "name": "Readonly",
       "template": "<nve-tag readonly>topic-tag</nve-tag>\n",
       "summary": "Read-only tags for displaying static labels and metadata, providing visual context without user interaction capabilities.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-tag_group",
+      "id": "tag-group",
       "name": "Group",
       "template": "<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",
       "summary": "Tag group layout with overflow handling and add functionality, ideal for managing many categories with space constraints.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-tag_color",
+      "id": "tag-color",
       "name": "Color",
       "template": "<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",
       "summary": "Comprehensive color palette for tag backgrounds, enabling visual categorization and brand consistency across different content types.",
@@ -50,7 +50,7 @@
       "tags": []
     },
     {
-      "id": "core-tag_prominence",
+      "id": "tag-prominence",
       "name": "Prominence",
       "template": "<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",
       "summary": "High prominence tags with emphasis styling for important categories and priority labels that require visual attention.",
@@ -59,7 +59,7 @@
       "tags": []
     },
     {
-      "id": "core-tag_overflow-single",
+      "id": "tag-overflow-single",
       "name": "OverflowSingle",
       "template": "<nve-tag style=\"--width: 150px\">some really long content</nve-tag>\n",
       "summary": "Single tag with constrained width, with text overflow behavior and content truncation in limited space.",
@@ -70,7 +70,7 @@
       ]
     },
     {
-      "id": "core-tag_overflow-max-width",
+      "id": "tag-overflow-max-width",
       "name": "OverflowMaxWidth",
       "template": "<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",
       "summary": "Many tags with max width constraints, showing how content adapts to space limitations and maintains visual consistency.",

package/dist/tag/tag2.js

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

package/dist/textarea/textarea.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/textarea/textarea.examples.json",
   "items": [
     {
-      "id": "core-textarea_default",
+      "id": "textarea",
       "name": "Default",
       "template": "<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
       "summary": "Basic multi-line text input for longer content entry like comments, descriptions, or messages.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-textarea_vertical",
+      "id": "textarea-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea>\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea>\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Textareas with vertical layout including validation states for disabled, success, and error.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-textarea_horizontal",
+      "id": "textarea-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-textarea layout=\"horizontal\">\n    <label>label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n  <nve-textarea layout=\"horizontal\">\n    <label>error</label>\n    <textarea></textarea>\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Textareas with horizontal layout showing validation states for inline forms and compact layouts.",
@@ -34,7 +34,7 @@
       ]
     },
     {
-      "id": "core-textarea_control-validation",
+      "id": "textarea-control-validation",
       "name": "ControlValidation",
       "template": "<nve-textarea>\n  <label>validation</label>\n  <textarea required></textarea>\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-textarea>\n",
       "summary": "Textarea with built-in HTML validation showing required field error messages for form validation.",
@@ -43,7 +43,7 @@
       "tags": []
     },
     {
-      "id": "core-textarea_columns-and-rows",
+      "id": "textarea-columns-and-rows",
       "name": "ColumnsAndRows",
       "template": "<nve-textarea>\n  <label>label</label>\n  <textarea rows=\"15\" cols=\"40\"></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>\n",
       "summary": "Textarea with custom columns and rows attributes for controlling initial size and dimensions.",

package/dist/textarea/textarea2.js

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

package/dist/time/time.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/time/time.examples.json",
   "items": [
     {
-      "id": "core-time_default",
+      "id": "time",
       "name": "Default",
       "template": "<nve-time>\n  <label>label</label>\n  <input type=\"time\" min=\"09:00\" max=\"18:00\" value=\"12:00\" />\n  <nve-control-message>message</nve-control-message>\n</nve-time>\n",
       "summary": "Basic time input with label, min/max time constraints, and help message",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-time_datalist",
+      "id": "time-datalist",
       "name": "Datalist",
       "template": "<nve-time>\n  <label>label</label>\n  <input type=\"time\" />\n  <nve-control-message>message</nve-control-message>\n  <datalist>\n    <option value=\"12:00\"></option>\n    <option value=\"13:00\"></option>\n    <option value=\"14:00\"></option>\n  </datalist>\n</nve-time>\n",
       "summary": "Time input with datalist slot for predefined time options users can select from",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-time_vertical",
+      "id": "time-vertical",
       "name": "Vertical",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time>\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n  <nve-time>\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
       "summary": "Vertical field layout showcasing default, disabled, success, and error states",
@@ -32,7 +32,7 @@
       ]
     },
     {
-      "id": "core-time_horizontal",
+      "id": "time-horizontal",
       "name": "Horizontal",
       "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-time layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-time>\n  <nve-time layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"time\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-time>\n</div>\n",
       "summary": "Horizontal field layout with label beside input, showing default, disabled, success, and error states",

package/dist/time/time2.js

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

package/dist/toast/toast.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/toast/toast.examples.json",
   "items": [
     {
-      "id": "core-toast_default",
+      "id": "toast",
       "name": "Default",
       "template": "<nve-toast id=\"toast\" close-timeout=\"1500\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n",
       "summary": "Basic toast with auto-dismiss for brief, non-critical feedback messages. Use toasts for lightweight confirmations like \"Saved\", \"Copied\", or \"Action complete\" that inform users without requiring interaction or disrupting workflow.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-toast_visual",
+      "id": "toast-visual",
       "name": "Visual",
       "template": "<nve-toast anchor=\"btn\">hello there</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Visual example of toast structure with anchor positioning for consistent implementation patterns across your application.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-toast_status",
+      "id": "toast-status",
       "name": "Status",
       "template": "<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\">default</nve-toast>\n  <nve-toast status=\"success\" position=\"right\">success</nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\">warning</nve-toast>\n  <nve-toast status=\"danger\" position=\"left\">danger</nve-toast>\n</div>\n",
       "summary": "Toast status variants for different feedback types. Use success for confirmations, warning for cautions, and danger for error notifications, helping users quickly identify message importance through color and iconography.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-toast_prominence",
+      "id": "toast-prominence",
       "name": "Prominence",
       "template": "<nve-toast position=\"top\" prominence=\"muted\">muted</nve-toast>\n",
       "summary": "Muted toast variant for subtle, low-priority feedback. Use muted prominence when the message is informative but shouldn't draw significant attention, maintaining user focus on primary tasks.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-toast_actions",
+      "id": "toast-actions",
       "name": "Actions",
       "template": "<div nve-layout=\"row align:center\" style=\"height: 200px\">\n  <nve-toast position=\"top\"> default <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"success\" position=\"right\"> success <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"warning\" position=\"bottom\"> warning <nve-button container=\"inline\">action</nve-button> </nve-toast>\n  <nve-toast status=\"danger\" position=\"left\"> danger <nve-button container=\"inline\">action</nve-button> </nve-toast>\n</div>\n",
       "summary": "Toast with inline action buttons for quick follow-up actions. Use sparingly for important actions like \"Undo\" or \"View\", but prefer simple toasts without actions for most feedback to maintain lightweight nature.",
@@ -50,7 +50,7 @@
       "tags": []
     },
     {
-      "id": "core-toast_events",
+      "id": "toast-events",
       "name": "Events",
       "template": "<nve-toast id=\"toast\">hello there</nve-toast>\n<nve-button popovertarget=\"toast\">button</nve-button>\n<script type=\"module\">\n  const toast = document.querySelector(\"nve-toast\");\n  toast.addEventListener(\"beforetoggle\", () => console.log(\"beforetoggle\"));\n  toast.addEventListener(\"toggle\", () => console.log(\"toggle\"));\n  toast.addEventListener(\"close\", () => console.log(\"close\"));\n  toast.addEventListener(\"open\", () => console.log(\"open\"));\n</script>\n",
       "summary": "Event handling for toast lifecycle events. Useful for adding custom behavior when toast state changes.",
@@ -59,7 +59,7 @@
       "tags": []
     },
     {
-      "id": "core-toast_position",
+      "id": "toast-position",
       "name": "Position",
       "template": "<nve-toast anchor=\"btn\" position=\"top\">top</nve-toast>\n<nve-toast anchor=\"btn\" position=\"right\">right</nve-toast>\n<nve-toast anchor=\"btn\" position=\"bottom\">bottom</nve-toast>\n<nve-toast anchor=\"btn\" position=\"left\">left</nve-toast>\n<nve-button id=\"btn\">button</nve-button>\n",
       "summary": "Toast positioning options relative to screen edges or anchor elements. Position toasts in consistent locations where they won't obscure important content, typically bottom-center or top-right for global feedback.",
@@ -70,7 +70,7 @@
       ]
     },
     {
-      "id": "core-toast_alignment",
+      "id": "toast-alignment",
       "name": "Alignment",
       "template": "<nve-card id=\"card\" style=\"width: 450px; height: 300px\"></nve-card>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\">top center</nve-toast>\n<nve-toast anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\">right center</nve-toast>\n<nve-toast anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\">bottom center</nve-toast>\n<nve-toast anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\">left center</nve-toast>\n<nve-toast anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toast>\n",
       "summary": "Fine-grained toast alignment for precise placement control. Use alignment to position toasts relative to anchor edges, useful for contextual feedback that should appear near specific UI elements.",
@@ -81,7 +81,7 @@
       ]
     },
     {
-      "id": "core-toast_legacy-behavior-trigger",
+      "id": "toast-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
       "template": "<div nve-layout=\"row align:center\" style=\"height: 90vh\">\n  <nve-button id=\"btn\">copy to clipboard</nve-button>\n  <nve-toast trigger=\"btn\" behavior-trigger position=\"top\" close-timeout=\"1500\" hidden>copied!</nve-toast>\n</div>\n",
       "summary": "Legacy behavior-trigger pattern for automatic toast lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler toast implementation and better maintainability.",
@@ -93,7 +93,7 @@
       ]
     },
     {
-      "id": "core-toast_shadow-root",
+      "id": "toast-shadow-root",
       "name": "ShadowRoot",
       "template": "<toast-test-shadow-root></toast-test-shadow-root>\n<script type=\"module\">\n  customElements.define(\n    \"toast-test-shadow-root\",\n    class ToastTestShadowRoot extends HTMLElement {\n      constructor() {\n        super();\n        this._shadow = this.attachShadow({ mode: \"open\" });\n        const template = document.createElement(\"template\");\n        template.innerHTML = `\n        <style>:host { box-sizing: border-box; }</style>\n        <nve-toast size=\"sm\">center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\">top center</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-toast>\n        <nve-toast size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\">right center</nve-toast>\n        <nve-toast size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\">bottom center</nve-toast>\n        <nve-toast size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\">left center</nve-toast>\n        <nve-toast size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-toast>\n      `;\n        this._shadow.appendChild(template.content);\n      }\n    },\n  );\n</script>\n",
       "summary": "Toast functionality within shadow DOM for Web Component architectures. Proper toast positioning and behavior in encapsulated component environments, essential for component library implementations.",
@@ -104,7 +104,7 @@
       ]
     },
     {
-      "id": "core-toast_body-anchor",
+      "id": "toast-body-anchor",
       "name": "BodyAnchor",
       "template": "<nve-toast style=\"--background: red\" anchor=\"body\" position=\"center\" alignment=\"center\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"top\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow\" anchor=\"body\" position=\"top\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: green\" anchor=\"body\" position=\"top\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: purple\" anchor=\"body\" position=\"bottom\" alignment=\"start\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: orange\" anchor=\"body\" position=\"bottom\">•︎︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: pink\" anchor=\"body\" position=\"bottom\" alignment=\"end\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: brown; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: gray\" anchor=\"body\" position=\"left\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: black; margin-right: -250px\" anchor=\"body\" position=\"left\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: red; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"start\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n<nve-toast style=\"--background: blue\" anchor=\"body\" position=\"right\">•︎•︎•︎•︎•︎•︎</nve-toast>\n<nve-toast style=\"--background: yellow; margin-left: -250px\" anchor=\"body\" position=\"right\" alignment=\"end\"\n  >•︎•︎•︎•︎•︎•︎</nve-toast\n>\n",
       "summary": "Body anchor positioning for toast.",

package/dist/toast/toast2.js

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

package/dist/toggletip/toggletip-footer2.js

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

package/dist/toggletip/toggletip-header2.js

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