@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/switch/switch-group2.js

@@ -11,7 +11,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-switch-group",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/switch/switch.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/switch/switch.examples.json",
   "items": [
     {
-      "id": "core-switch_default",
+      "id": "switch",
       "name": "Default",
       "template": "<nve-switch>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
       "summary": "Basic toggle switch for binary on/off controls and feature activation.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-switch_size",
+      "id": "switch-size",
       "name": "Size",
       "template": "<nve-switch\n  style=\"\n    --width: var(--nve-ref-size-800);\n    --height: var(--nve-ref-size-400);\n    --anchor-width: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n    --anchor-height: calc(var(--nve-ref-size-200) + var(--nve-ref-size-50));\n  \"\n>\n  <label>label</label>\n  <input type=\"checkbox\" />\n</nve-switch>\n",
       "summary": "Size variants of toggle switches use custom CSS properties.",
@@ -23,7 +23,7 @@
       ]
     },
     {
-      "id": "core-switch_states",
+      "id": "switch-states",
       "name": "States",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch>\n    <label>label</label>\n    <input type=\"checkbox\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>disabled</label>\n    <input type=\"checkbox\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-switch>\n</div>\n",
       "summary": "Toggle switches with different states including default, disabled, success, and error with control messages.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-switch_vertical-group",
+      "id": "switch-vertical-group",
       "name": "VerticalGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group>\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group>\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with vertical layout for many related toggles stacked in a column with validation states.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-switch_vertical-inline-group",
+      "id": "switch-vertical-inline-group",
       "name": "VerticalInlineGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with vertical inline layout for compact vertical stacking with inline label positioning.",
@@ -52,7 +52,7 @@
       ]
     },
     {
-      "id": "core-switch_horizontal-group",
+      "id": "switch-horizontal-group",
       "name": "HorizontalGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with horizontal layout for many toggles arranged in a row, ideal for limited options.",
@@ -63,7 +63,7 @@
       ]
     },
     {
-      "id": "core-switch_horizontal-inline-group",
+      "id": "switch-horizontal-inline-group",
       "name": "HorizontalInlineGroup",
       "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>disabled</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" disabled />\n    </nve-switch>\n    <nve-control-message>disabled message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>success</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"success\">success message</nve-control-message>\n  </nve-switch-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>error</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 3</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-control-message status=\"error\">error message</nve-control-message>\n  </nve-switch-group>\n</div>\n",
       "summary": "Switch groups with horizontal inline layout for space-efficient horizontal arrangement with inline labels.",

package/dist/switch/switch2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-switch",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: [
 				"label",
 				"input",

package/dist/tabs/tabs-group2.js

@@ -23,7 +23,7 @@ var m, h = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-group",
-			version: "0.0.10",
+			version: "0.0.11",
 			children: ["nve-tabs"]
 		};
 	}
@@ -71,7 +71,7 @@ var m, h = class extends l {
 		let t = e.source?.value;
 		if (typeof t != "string" || !t.length) return;
 		let n = this.#d(), r = n.find((e) => this.#p(e) && e.value === t);
-		r && this.#o(n, r, !0);
+		r && this.#o(n, r, { emitEvent: !0 });
 	};
 	#i() {
 		this.#e?.disconnect();
@@ -84,13 +84,16 @@ var m, h = class extends l {
 			e.forEach((e) => e.selected = !1), this.#s(t, "");
 			return;
 		}
-		this.#o(e, r, !1, t);
+		this.#o(e, r, {
+			emitEvent: !1,
+			nextPanelValues: t
+		});
 	}
-	#o(e, t, r, i = n(e.map((e) => e.value))) {
-		let a = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
+	#o(e, t, r) {
+		let { emitEvent: i } = r, a = r.nextPanelValues ?? n(e.map((e) => e.value)), o = this.selectedValue !== t.value || !t.selected || e.some((e) => e !== t && e.selected);
 		e.forEach((e) => {
 			e.selected = e === t;
-		}), this.#s(i, t.value), r && a && this.dispatchEvent(new CustomEvent("select", {
+		}), this.#s(a, t.value), i && o && this.dispatchEvent(new CustomEvent("select", {
 			bubbles: !0,
 			composed: !0,
 			detail: { value: t.value }

package/dist/tabs/tabs-group2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-group2.js","names":["#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#syncFromTabs","#tabsObserver","#observeTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-group.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 { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, true);\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, false, nextPanelValues);\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    emitEvent: boolean,\n    nextPanelValues: string[] = uniqueNonEmptyStrings(tabItems.map(item => item.value))\n  ): void {\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"tabs-group2.js","names":["#handleDefaultSlotChange","#handlePanelSlotChange","#handleCommand","#syncFromTabs","#tabsObserver","#observeTabs","#syncPanels","#getTabItems","#isSelectableTab","#setActiveTab","#getTabsElement","#resolveSelectedTab","#commitState","#getPanelSlots","#syncPanelSlot"],"sources":["../../src/tabs/tabs-group.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 { state } from 'lit/decorators/state.js';\nimport {\n  attachInternals,\n  audit,\n  generateId,\n  sameOrderedStringArray,\n  uniqueNonEmptyStrings,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Tabs, type TabsItem } from './tabs.js';\nimport styles from './tabs-group.css?inline';\n\n/** Invoker command source for `--toggle` (e.g. `nve-tabs-item` with `value`). */\ntype TabsGroupCommandSource = HTMLElement & {\n  disabled?: boolean;\n  value?: string | null;\n};\n\n/** `command` event from Invoker Commands; `source` is the control that fired. */\ntype TabsGroupCommandEvent = Event & {\n  command?: string;\n  source?: TabsGroupCommandSource | null;\n};\n\n/** Payload for the composed `select` event when the active tab value changes via command. */\ntype TabsGroupSelectDetail = { value: string };\n\n/** Arranges the tab strip and slot-matched panels: stacked column (`top`), or sidebar row with tabs at inline-start (`start`) or inline-end (`end`). */\nexport type TabsGroupAlignment = 'top' | 'start' | 'end';\n\n/**\n * @element nve-tabs-group\n * @description Coordinates tabs with matching panel content using Invoker Commands and slot-matched panels.\n * @since 1.67.0\n * @entrypoint \\@nvidia-elements/core/tabs\n * @command --toggle - Select the matching tab and reveal the panel whose slot matches the invoker value.\n * @event select - Dispatched when the selected tab value changes after an invoker `--toggle` updates selection\n * @slot - Default slot for a single nve-tabs element. Do not use behavior-select on nve-tabs when using this group.\n * @slot {value} - Named panel content where the slot name matches a nve-tabs-item value.\n * @cssprop --padding\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tabs/\n * @responsive false\n */\n@audit()\nexport class TabsGroup extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tabs-group',\n    version: '0.0.0',\n    children: ['nve-tabs']\n  };\n\n  /** Options for observing the slotted `nve-tabs` subtree (tab list / item attribute changes). */\n  protected static readonly subtreeObserverInit = {\n    childList: true,\n    subtree: true,\n    attributes: true,\n    attributeFilter: ['disabled', 'id', 'selected', 'value']\n  } as const satisfies MutationObserverInit;\n\n  @queryAssignedElements({ flatten: true }) private defaultSlotElements!: HTMLElement[];\n\n  /**\n   * Arranges the tab strip relative to slot-matched panels: stacked column (`top`), or sidebar row with tabs at\n   * inline-start (`start`) or inline-end (`end`) beside the panel region.\n   */\n  @property({ type: String, reflect: true }) alignment: TabsGroupAlignment = 'top';\n\n  @state() private panelValues: string[] = [];\n\n  @state() private selectedValue = '';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #tabsObserver?: MutationObserver;\n\n  /**\n   * Renders the default slot (single `nve-tabs`) plus one named `<slot name={value}>` per distinct selectable\n   * `nve-tabs-item` value. `#syncPanelSlot` applies panel visibility and ARIA from `selectedValue`.\n   */\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#handleDefaultSlotChange}></slot>\n        ${this.panelValues.map(value => html`<slot name=${value} @slotchange=${this.#handlePanelSlotChange}></slot>`)}\n      </div>\n    `;\n  }\n\n  // --- Lifecycle & command ---\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'group';\n    this.addEventListener('command', this.#handleCommand as EventListener);\n  }\n\n  firstUpdated() {\n    void this.updateComplete.then(() => {\n      if (!this.isConnected) {\n        return;\n      }\n\n      this.#syncFromTabs();\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('command', this.#handleCommand as EventListener);\n    this.#tabsObserver?.disconnect();\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n\n    if (!this.#tabsObserver) {\n      this.#observeTabs();\n    }\n\n    // `@state()` fields are not in `PropertyValues<this>` keys; cast for membership checks.\n    const props = changedProperties as ReadonlyMap<PropertyKey, unknown>;\n    if (props.has('panelValues') || props.has('selectedValue')) {\n      this.#syncPanels();\n    }\n  }\n\n  #handleDefaultSlotChange = (): void => {\n    this.#observeTabs();\n    this.#syncFromTabs();\n  };\n\n  #handlePanelSlotChange = (): void => {\n    this.#syncPanels();\n  };\n\n  /**\n   * Handles Invoker `--toggle` on a tab item: selects the matching `nve-tabs-item` and syncs panels.\n   * Ignores non-toggle commands and invokers without a non-empty string `value`.\n   */\n  #handleCommand = (event: TabsGroupCommandEvent): void => {\n    if (event.command !== '--toggle') {\n      return;\n    }\n\n    const value = event.source?.value;\n    if (typeof value !== 'string' || !value.length) {\n      return;\n    }\n\n    const tabItems = this.#getTabItems();\n    const tabItem = tabItems.find(item => this.#isSelectableTab(item) && item.value === value);\n    if (!tabItem) {\n      return;\n    }\n\n    this.#setActiveTab(tabItems, tabItem, { emitEvent: true });\n  };\n\n  // --- Tab strip sync (tabs → state) ---\n\n  /** Attaches a single `MutationObserver` on the slotted `nve-tabs` element to mirror tab list changes into state. */\n  #observeTabs(): void {\n    this.#tabsObserver?.disconnect();\n\n    const tabs = this.#getTabsElement();\n    if (!tabs) {\n      return;\n    }\n\n    this.#tabsObserver = new MutationObserver(() => this.#syncFromTabs());\n    this.#tabsObserver.observe(tabs, TabsGroup.subtreeObserverInit);\n  }\n\n  /**\n   * Reads the current tab items: derives ordered `panelValues` for render, resolves which tab should be active,\n   * and commits selection. Called on slot change, subtree mutations, and after mount.\n   */\n  #syncFromTabs(): void {\n    const tabItems = this.#getTabItems();\n    const nextPanelValues = uniqueNonEmptyStrings(tabItems.map(item => item.value));\n\n    const selectedTab = this.#resolveSelectedTab(tabItems);\n\n    if (!selectedTab) {\n      tabItems.forEach(item => (item.selected = false));\n      this.#commitState(nextPanelValues, '');\n      return;\n    }\n\n    this.#setActiveTab(tabItems, selectedTab, { emitEvent: false, nextPanelValues });\n  }\n\n  /**\n   * Sets exactly one selected tab, updates `panelValues` / `selectedValue`, and optionally dispatches `select`.\n   *\n   * @param emitEvent - When true (command path), dispatches `select` if selection actually changed.\n   */\n  #setActiveTab(\n    tabItems: TabsItem[],\n    nextTab: TabsItem,\n    options: { emitEvent: boolean; nextPanelValues?: string[] }\n  ): void {\n    const { emitEvent } = options;\n    const nextPanelValues = options.nextPanelValues ?? uniqueNonEmptyStrings(tabItems.map(item => item.value));\n    // True when the effective selection differs from the prior committed state (value, flags, or multi-select).\n    // `select` is only dispatched when both `emitEvent` (invoker/command path) and `changed` are true.\n    const changed =\n      this.selectedValue !== nextTab.value ||\n      !nextTab.selected ||\n      tabItems.some(item => item !== nextTab && item.selected);\n\n    tabItems.forEach(item => {\n      item.selected = item === nextTab;\n    });\n\n    this.#commitState(nextPanelValues, nextTab.value);\n\n    if (emitEvent && changed) {\n      this.dispatchEvent(\n        new CustomEvent<TabsGroupSelectDetail>('select', {\n          bubbles: true,\n          composed: true,\n          detail: { value: nextTab.value }\n        })\n      );\n    }\n  }\n\n  /** Updates reactive state for panel slot names and the active tab value without touching the tab items. */\n  #commitState(nextPanelValues: string[], nextSelectedValue: string): void {\n    if (!sameOrderedStringArray(this.panelValues, nextPanelValues)) {\n      this.panelValues = nextPanelValues;\n    }\n\n    if (this.selectedValue !== nextSelectedValue) {\n      this.selectedValue = nextSelectedValue;\n    }\n  }\n\n  // --- Panel sync (state → panels & ARIA) ---\n\n  /** For each named panel slot, wires `hidden` and tab↔panel ARIA ids to match `selectedValue`. */\n  #syncPanels(): void {\n    const tabItems = this.#getTabItems();\n    const tabMap = new Map(\n      tabItems.filter(item => this.#isSelectableTab(item)).map(item => [item.value, item] satisfies [string, TabsItem])\n    );\n\n    this.#getPanelSlots().forEach(slot => {\n      this.#syncPanelSlot(slot, tabMap);\n    });\n  }\n\n  /**\n   * If no selectable tab exists for `slot.name`, hides all assigned nodes. Otherwise shows only the panel(s)\n   * for the active value and assigns `role=\"tabpanel\"` / `aria-labelledby` when missing.\n   */\n  #syncPanelSlot(slot: HTMLSlotElement, tabMap: ReadonlyMap<string, TabsItem>): void {\n    const tabItem = tabMap.get(slot.name);\n    const panels = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n    if (!tabItem) {\n      panels.forEach(panel => {\n        panel.hidden = true;\n      });\n      return;\n    }\n\n    tabItem.id ||= generateId();\n\n    panels.forEach((panel, index) => {\n      panel.id ||= generateId();\n\n      if (!tabItem.hasAttribute('aria-controls') && index === 0) {\n        tabItem.setAttribute('aria-controls', panel.id);\n      }\n\n      if (!panel.hasAttribute('aria-labelledby')) {\n        panel.setAttribute('aria-labelledby', tabItem.id);\n      }\n\n      if (!panel.hasAttribute('role')) {\n        panel.setAttribute('role', 'tabpanel');\n      }\n\n      const isActive = slot.name === this.selectedValue;\n      panel.hidden = !isActive;\n    });\n  }\n\n  // --- DOM queries ---\n\n  /** Resolves the single slotted `nve-tabs` (default slot), with a light-DOM fallback for edge timing. */\n  #getTabsElement(): Tabs | undefined {\n    const el =\n      this.defaultSlotElements.find(element => element.localName === Tabs.metadata.tag) ??\n      this.querySelector(Tabs.metadata.tag);\n    return el instanceof Tabs ? el : undefined;\n  }\n\n  #getTabItems(): TabsItem[] {\n    return Array.from(this.#getTabsElement()?.querySelectorAll<TabsItem>('nve-tabs-item') ?? []);\n  }\n\n  #getPanelSlots(): HTMLSlotElement[] {\n    return Array.from(this.renderRoot.querySelectorAll<HTMLSlotElement>('slot[name]'));\n  }\n\n  /** Selectable tabs have a non-empty `value` and are not `disabled`. */\n  #isSelectableTab(tabItem: TabsItem): tabItem is TabsItem & { value: string } {\n    return typeof tabItem.value === 'string' && tabItem.value.length > 0 && !tabItem.disabled;\n  }\n\n  /** Prefer the selectable tab that is already selected; otherwise the first selectable tab. */\n  #resolveSelectedTab(tabItems: readonly TabsItem[]): TabsItem | undefined {\n    return (\n      tabItems.find(item => this.#isSelectableTab(item) && item.selected) ??\n      tabItems.find(item => this.#isSelectableTab(item))\n    );\n  }\n}\n"],"mappings":"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"}

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.10",
+			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.10",
+			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.10"
+			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.10"
+			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.10"
+			version: "0.0.11"
 		};
 	}
 	static {