@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/tabs/tabs2.js

@@ -4,7 +4,7 @@ import { KeyNavigationListController as i } from "../internal/controllers/keynav
 import { attachInternals as a } from "../internal/utils/a11y.js";
 import { stateSelected as o } from "../internal/controllers/state-selected.controller.js";
 import { useStyles as s } from "../internal/styles/index.js";
-import c from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import c from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { getTabItems as l, isTabItemTabbable as u } from "./utils.js";
 import d from "./tabs.global.js";
 import f from "./tabs-item.js";
@@ -13,7 +13,7 @@ import { LitElement as m, html as h } from "lit";
 import { property as g } from "lit/decorators/property.js";
 import { ButtonFormControlMixin as _ } from "@nvidia-elements/forms/mixins";
 import { queryAssignedElements as v } from "lit/decorators/query-assigned-elements.js";
-//#region src/tabs/tabs.ts
+// src/tabs/tabs.ts
 var y = class extends _(m) {
 	static {
 		this.styles = s([f]);
@@ -21,7 +21,7 @@ var y = class extends _(m) {
 	static {
 		this.metadata = {
 			tag: "nve-tabs-item",
-			version: "2.20.0",
+			version: "2.20.2",
 			parents: ["nve-tabs", "nve-tabs-item-group"]
 		};
 	}
@@ -65,7 +65,7 @@ var b = class extends m {
 	static {
 		this.metadata = {
 			tag: "nve-tabs",
-			version: "2.20.0",
+			version: "2.20.2",
 			children: ["nve-tabs-item", "nve-tabs-item-group"]
 		};
 	}
@@ -120,7 +120,7 @@ var b = class extends m {
 		});
 	}
 	#c(e) {
-		!this.behaviorSelect || !e.matches("nve-tabs-item") || e.disabled || (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
+		this.behaviorSelect && e.matches("nve-tabs-item") && !e.disabled && (this.keynavListConfig.items.forEach((e) => e.selected = !1), e.selected = !0);
 	}
 	#l;
 };
@@ -134,7 +134,6 @@ c([g({
 	type: Boolean,
 	attribute: "behavior-select"
 })], b.prototype, "behaviorSelect", void 0), c([v()], b.prototype, "entries", void 0), b = c([e()], b);
-//#endregion
 export { b as Tabs, y as TabsItem };
 
 //# sourceMappingURL=tabs2.js.map

package/dist/tabs/tabs2.js.map

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

package/dist/tabs/utils.js

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

package/dist/tabs/utils.js.map

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

package/dist/tag/define.js

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

package/dist/tag/define.js.map

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

package/dist/tag/index.js

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

package/dist/tag/tag.examples.js

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

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

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

package/dist/tag/tag.js

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

package/dist/tag/tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"tag.js","names":[],"sources":["../../src/tag/tag.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  --_color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot:not([name]) {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_color);\n}\n\n::slotted(nve-dot) {\n  --color: var(--state-color-background);\n  --status-color: var(--_color);\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}
+{"version":3,"file":"tag.js","names":["tag_default"],"sources":["../../src/tag/tag.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: var(--state-color-background);\n  --color: var(--state-color);\n  --state-color-base: var(--nve-ref-color-blue-cobalt-1100);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --padding: 0 var(--nve-ref-size-200);\n  --border: 0;\n  --border-radius: var(--nve-ref-border-radius-full);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --cursor: pointer;\n  --height: var(--nve-ref-size-600);\n  --width: initial;\n  --max-width: initial;\n  display: inline-flex;\n  user-select: none;\n}\n\n[internal-host] {\n  --_color: var(--color);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n  height: var(--height);\n  width: var(--width);\n  max-width: var(--max-width);\n  display: inline-flex;\n  line-height: 1.1em;\n  place-items: center;\n  place-content: center;\n  white-space: nowrap;\n}\n\nslot:not([name]) {\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  display: block;\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n::slotted(nve-icon) {\n  --color: var(--_color);\n}\n\n::slotted(nve-dot) {\n  --color: var(--state-color-background);\n  --status-color: var(--_color);\n}\n\nnve-icon {\n  --color: inherit;\n  cursor: var(--cursor);\n}\n\n:host([readonly]) {\n  --text-decoration: none;\n  --cursor: cursor;\n}\n"],"mappings":""}

package/dist/tag/tag2.js

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

package/dist/tag/tag2.js.map

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

package/dist/textarea/define.js

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

package/dist/textarea/define.js.map

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

package/dist/textarea/index.js

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

package/dist/textarea/textarea.examples.js

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

package/dist/textarea/textarea.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.examples.js","names":[],"sources":["../../src/textarea/textarea.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<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\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\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};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<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\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\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\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};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<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};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<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};\n\n/**\n * @summary Flat textarea with prefix tags for context and suffix buttons to attach files or send a message.\n * @tags test-case\n */\nexport const Slots = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <textarea placeholder=\"Build something...\" aria-label=\"prompt\"></textarea>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>AGENTS.md</nve-tag>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>Web Search</nve-tag>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-clip\" aria-label=\"Attach file\" container=\"flat\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-airplane\" aria-label=\"Send message\" style=\"margin-left: auto\"></nve-icon-button>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with flat container for inline forms.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"textarea.examples.js","names":["textarea_examples_default"],"sources":["../../src/textarea/textarea.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/textarea/define.js';\n\nexport default {\n  title: 'Elements/Textarea',\n  component: 'nve-textarea',\n};\n\n/**\n * @summary Basic multi-line text input for longer content entry like comments, descriptions, or messages.\n */\nexport const Default = {\n  render: () => html`\n<nve-textarea>\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n\n/**\n * @summary Textareas with vertical layout including validation states for disabled, success, and error.\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<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\n  <nve-textarea>\n    <label>disabled</label>\n    <textarea disabled></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-textarea>\n    <label>success</label>\n    <textarea></textarea>\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-textarea>\n\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};\n\n/**\n * @summary Textareas with horizontal layout showing validation states for inline forms and compact layouts.\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<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\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\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\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};\n\n/**\n * @summary Textarea with built-in HTML validation showing required field error messages for form validation.\n */\nexport const ControlValidation = {\n  render: () => html`\n<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};\n\n/**\n * @summary Textarea with custom columns and rows attributes for controlling initial size and dimensions.\n */\nexport const ColumnsAndRows = {\n  render: () => html`\n<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};\n\n/**\n * @summary Flat textarea with prefix tags for context and suffix buttons to attach files or send a message.\n * @tags test-case\n */\nexport const Slots = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <textarea placeholder=\"Build something...\" aria-label=\"prompt\"></textarea>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>AGENTS.md</nve-tag>\n  <nve-tag slot=\"prefix\" color=\"gray-denim\" closable>Web Search</nve-tag>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-clip\" aria-label=\"Attach file\" container=\"flat\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" icon-name=\"paper-airplane\" aria-label=\"Send message\" style=\"margin-left: auto\"></nve-icon-button>\n</nve-textarea>`\n};\n\n/**\n * @summary Textarea with flat container for inline forms.\n * @tags test-case\n */\nexport const ContainerFlat = {\n  render: () => html`\n<nve-textarea container=\"flat\">\n  <label>label</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-textarea>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/textarea/textarea.js

@@ -1,6 +1,5 @@
-//#region src/textarea/textarea.css?inline
+// src/textarea/textarea.css?inline
 var e = ":host{--padding: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-100);--height: 100px;--width: 100%;--min-height: 100px;--background: var(--nve-sys-interaction-field-background);--color: var(--nve-sys-interaction-field-color);--border-radius: var(--nve-ref-border-radius-sm);--cursor: text;--border: 0;display:block;width:var(--width);contain:layout}::slotted(textarea){font-size:var(--font-size)!important;margin:0!important;align-content:stretch!important;background:var(--background)!important;border:0!important;color:var(--color)!important;cursor:var(--cursor)!important;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}slot[name=prefix],slot[name=suffix]{display:none;gap:var(--nve-ref-space-xxs)}@scope{:scope:has([slot=prefix]) slot[name=prefix]{display:flex}:scope:has([slot=suffix]) slot[name=suffix]{display:flex}:scope:has(textarea[style*=width],textarea[cols]) [input]{width:fit-content}:scope:has(textarea:focus-visible) [input]{outline:5px auto -webkit-focus-ring-color!important;outline:Highlight solid 2px!important}}[input]{flex-direction:column;gap:var(--nve-ref-space-xs);background:var(--background);border:var(--border);border-radius:var(--border-radius);padding:var(--padding);cursor:initial;outline:none!important}::slotted(textarea:not([rows],[style*=\"height\"])){height:var(--height)!important;min-height:var(--min-height)!important}::slotted(textarea:not([cols],[style*=\"width\"])){width:var(--width)!important}::slotted(textarea:not([cols],[rows])){field-sizing:content}:host([layout*=\"horizontal\"]) ::slotted(label){padding-block-start:var(--nve-ref-size-100)!important;align-self:start!important}:host([layout*=\"horizontal\"]) slot[name=label]{align-self:start}:host([status=\"error\"]),:host(:state(invalid)),:host(:state(error)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color)}:host([status=\"success\"]),:host(:state(success)){--border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color)}:host(:state(disabled)){--border: var(--nve-ref-border-width-md) solid transparent}:host([container=\"flat\"]){--background: transparent;--border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=textarea.js.map

package/dist/textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","names":[],"sources":["../../src/textarea/textarea.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: var(--width);\n  contain: layout;\n}\n\n::slotted(textarea) {\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: 0 !important;\n  color: var(--color) !important;\n  cursor: var(--cursor) !important;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\nslot[name='prefix'],\nslot[name='suffix'] {\n  display: none;\n  gap: var(--nve-ref-space-xxs);\n}\n\n@scope {\n  :scope:has([slot='prefix']) slot[name='prefix'] {\n    display: flex;\n  }\n\n  :scope:has([slot='suffix']) slot[name='suffix'] {\n    display: flex;\n  }\n\n  :scope:has(textarea[style*='width'], textarea[cols]) [input] {\n    width: fit-content;\n  }\n\n  :scope:has(textarea:focus-visible) [input] {\n    outline: 5px auto -webkit-focus-ring-color !important;\n    outline: Highlight solid 2px !important;\n  }\n}\n\n[input] {\n  flex-direction: column;\n  gap: var(--nve-ref-space-xs);\n  background: var(--background);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  cursor: initial;\n  outline: none !important;\n}\n\n::slotted(textarea:not([rows], [style*='height'])) {\n  height: var(--height) !important;\n  min-height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols], [style*='width'])) {\n  width: var(--width) !important;\n}\n\n::slotted(textarea:not([cols], [rows])) {\n  field-sizing: content;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n:host([container='flat']) {\n  --background: transparent;\n  --border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n"],"mappings":""}
+{"version":3,"file":"textarea.js","names":["textarea_default"],"sources":["../../src/textarea/textarea.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --padding: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100px;\n  --width: 100%;\n  --min-height: 100px;\n  --background: var(--nve-sys-interaction-field-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --cursor: text;\n  --border: 0;\n  display: block;\n  width: var(--width);\n  contain: layout;\n}\n\n::slotted(textarea) {\n  font-size: var(--font-size) !important;\n  margin: 0 !important;\n  align-content: stretch !important;\n  background: var(--background) !important;\n  border: 0 !important;\n  color: var(--color) !important;\n  cursor: var(--cursor) !important;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\nslot[name='prefix'],\nslot[name='suffix'] {\n  display: none;\n  gap: var(--nve-ref-space-xxs);\n}\n\n@scope {\n  :scope:has([slot='prefix']) slot[name='prefix'] {\n    display: flex;\n  }\n\n  :scope:has([slot='suffix']) slot[name='suffix'] {\n    display: flex;\n  }\n\n  :scope:has(textarea[style*='width'], textarea[cols]) [input] {\n    width: fit-content;\n  }\n\n  :scope:has(textarea:focus-visible) [input] {\n    outline: 5px auto -webkit-focus-ring-color !important;\n    outline: Highlight solid 2px !important;\n  }\n}\n\n[input] {\n  flex-direction: column;\n  gap: var(--nve-ref-space-xs);\n  background: var(--background);\n  border: var(--border);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n  cursor: initial;\n  outline: none !important;\n}\n\n::slotted(textarea:not([rows], [style*='height'])) {\n  height: var(--height) !important;\n  min-height: var(--min-height) !important;\n}\n\n::slotted(textarea:not([cols], [style*='width'])) {\n  width: var(--width) !important;\n}\n\n::slotted(textarea:not([cols], [rows])) {\n  field-sizing: content;\n}\n\n:host([layout*='horizontal']) ::slotted(label) {\n  padding-block-start: var(--nve-ref-size-100) !important;\n  align-self: start !important;\n}\n\n:host([layout*='horizontal']) slot[name='label'] {\n  align-self: start;\n}\n\n:host([status='error']),\n:host(:state(invalid)),\n:host(:state(error)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-danger-emphasis-color);\n}\n\n:host([status='success']),\n:host(:state(success)) {\n  --border: var(--nve-ref-border-width-md) solid var(--nve-sys-support-success-emphasis-color);\n}\n\n:host(:state(disabled)) {\n  --border: var(--nve-ref-border-width-md) solid transparent;\n}\n\n:host([container='flat']) {\n  --background: transparent;\n  --border: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n}\n"],"mappings":""}

package/dist/textarea/textarea2.js

@@ -2,7 +2,7 @@ import { useStyles as e } from "../internal/styles/index.js";
 import { Control as t } from "../forms/control/control2.js";
 import n from "./textarea.js";
 import { html as r } from "lit";
-//#region src/textarea/textarea.ts
+// src/textarea/textarea.ts
 var i = class extends t {
 	static {
 		this.styles = e([...t.styles, n]);
@@ -16,11 +16,10 @@ var i = class extends t {
 	static {
 		this.metadata = {
 			tag: "nve-textarea",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 };
-//#endregion
 export { i as Textarea };
 
 //# sourceMappingURL=textarea2.js.map

package/dist/textarea/textarea2.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea2.js","names":[],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, type CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @documentation https://nvidia.github.io/elements/docs/elements/textarea/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @slot prefix - Content to display before the textarea.\n * @slot suffix - Content to display after the textarea.\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private */\n  protected get prefixContent() {\n    return html`<slot name=\"prefix\"></slot>`;\n  }\n\n  /** @private */\n  protected get suffixContent() {\n    return html`<slot name=\"suffix\"></slot>`;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;;AA4BA,IAAa,IAAb,cAA8B,EAAQ;;EACP,KAAA,SAAA,EAAU,CAAC,GAAG,EAAQ,QAAQ,CAAM,CAAC;;CAGlE,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;CAGA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;;EAE2B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}
+{"version":3,"file":"textarea2.js","names":["styles","textarea_default","Textarea","Control","useStyles"],"sources":["../../src/textarea/textarea.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, type CSSResult } from 'lit';\nimport { useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport styles from './textarea.css?inline';\n\n/**\n * @element nve-textarea\n * @description A textarea is a control that enables users to enter and edit text.\n * @documentation https://nvidia.github.io/elements/docs/elements/textarea/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/textarea\n * @slot prefix - Content to display before the textarea.\n * @slot suffix - Content to display after the textarea.\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --width\n * @cssprop --min-height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --cursor\n * @cssprop --border\n * @cssprop --color\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea\n */\nexport class Textarea extends Control {\n  static styles: CSSResult[] = useStyles([...Control.styles, styles]);\n\n  /** @private */\n  protected get prefixContent() {\n    return html`<slot name=\"prefix\"></slot>`;\n  }\n\n  /** @private */\n  protected get suffixContent() {\n    return html`<slot name=\"suffix\"></slot>`;\n  }\n\n  static readonly metadata = {\n    tag: 'nve-textarea',\n    version: '0.0.0'\n  };\n}\n"],"mappings":";;;;;AA4BA,IAAaE,IAAb,cAA8BC,EAAQ;;EACP,KAAA,SAAAC,EAAU,CAAC,GAAGD,EAAQ,QAAQH,CAAM,CAAC;;CAGlE,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;CAGA,IAAc,gBAAgB;EAC5B,OAAO,CAAI;CACb;;EAE2B,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;AACF"}

package/dist/time/define.js

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

package/dist/time/define.js.map

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

package/dist/time/index.js

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

package/dist/time/time.examples.js

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

package/dist/time/time.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.examples.js","names":[],"sources":["../../src/time/time.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/time/define.js';\n\nexport default {\n  title: 'Elements/Time',\n  component: 'nve-time',\n};\n\n/**\n * @summary Basic time input with label, min/max time constraints, and help message\n */\nexport const Default = {\n  render: () => html`\n<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};\n\n/**\n * @summary Time input with datalist slot for predefined time options users can select from\n */\nexport const Datalist = {\n  render: () => html`\n<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  `\n}\n\n/**\n * @summary Vertical field layout showcasing default, disabled, success, and error states\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<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\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\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\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};\n\n/**\n * @summary Horizontal field layout with label beside input, showing default, disabled, success, and error states\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<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\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\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\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};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"time.examples.js","names":["time_examples_default"],"sources":["../../src/time/time.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/time/define.js';\n\nexport default {\n  title: 'Elements/Time',\n  component: 'nve-time',\n};\n\n/**\n * @summary Basic time input with label, min/max time constraints, and help message\n */\nexport const Default = {\n  render: () => html`\n<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};\n\n/**\n * @summary Time input with datalist slot for predefined time options users can select from\n */\nexport const Datalist = {\n  render: () => html`\n<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  `\n}\n\n/**\n * @summary Vertical field layout showcasing default, disabled, success, and error states\n * @tags test-case\n */\nexport const Vertical = {\n  render: () => html`\n<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\n  <nve-time>\n    <label>disabled</label>\n    <input type=\"time\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\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\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};\n\n/**\n * @summary Horizontal field layout with label beside input, showing default, disabled, success, and error states\n * @tags test-case\n */\nexport const Horizontal = {\n  render: () => html`\n<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\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\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\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};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/time/time.js

@@ -1,6 +1,5 @@
-//#region src/time/time.css?inline
+// src/time/time.css?inline
 var e = ":host{width:100%}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=time.js.map

package/dist/time/time.js.map

@@ -1 +1 @@
-{"version":3,"file":"time.js","names":[],"sources":["../../src/time/time.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"time.js","names":["time_default"],"sources":["../../src/time/time.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  width: 100%;\n}\n"],"mappings":""}

package/dist/time/time2.js

@@ -1,13 +1,13 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Control as r } from "../forms/control/control2.js";
 import { IconButton as i } from "../icon-button/icon-button2.js";
 import { inputStyles as a } from "../input/input2.js";
 import o from "./time.js";
 import { html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/time/time.ts
+// src/time/time.ts
 var l = { expand: "expand" }, u = class extends r {
 	get i18nDefaults() {
 		return l;
@@ -22,7 +22,7 @@ var l = { expand: "expand" }, u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-time",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -36,7 +36,6 @@ n([c({
 	type: String,
 	reflect: !0
 })], u.prototype, "container", void 0), u = n([e()], u);
-//#endregion
 export { u as Time };
 
 //# sourceMappingURL=time2.js.map

package/dist/time/time2.js.map

@@ -1 +1 @@
-{"version":3,"file":"time2.js","names":[],"sources":["../../src/time/time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './time.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @documentation https://nvidia.github.io/elements/docs/elements/time/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAM,IAAe,EACnB,QAAQ,SACV,GAmBa,IAAN,cAAmB,EAAoC;CAC5D,IAAuB,eAA6B;EAClD,OAAO;CACT;;EAQgB,KAAA,SAAA,EAAU;GAAC,GAAG,EAAQ;GAAQ;GAAa;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;AAhBG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"time2.js","names":["styles","_decorate","__decorate","time_default","i18nDefaults","Time","Control","useStyles","inputStyles","IconButton","property","scopedRegistry"],"sources":["../../src/time/time.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { ContainerElement } from '@nvidia-elements/core/internal';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport { Control } from '@nvidia-elements/core/forms';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport { inputStyles } from '@nvidia-elements/core/input';\nimport type { I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './time.css?inline';\n\nconst i18nDefaults = {\n  expand: 'expand'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-time\n * @description A time picker is a control that enables users to choose a time value.\n * @documentation https://nvidia.github.io/elements/docs/elements/time/\n * @since 0.3.0\n * @entrypoint \\@nvidia-elements/core/time\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --cursor\n * @csspart icon-button - The clock icon button element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time\n */\n@scopedRegistry()\nexport class Time extends Control implements ContainerElement {\n  protected override get i18nDefaults(): I18nDefaults {\n    return i18nDefaults;\n  }\n\n  /**\n   * Reduces the visual container for a minimal borderless appearance while preserving whitespace bounds.\n   * Use when embedding within another container such as a toolbar.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat';\n\n  static styles = useStyles([...Control.styles, inputStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-time',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  protected get suffixContent() {\n    return html`<nve-icon-button part=\"icon-button\" .ariaLabel=${this.i18n.expand} icon-name=\"clock\" container=\"inline\" @click=${this.showPicker}></nve-icon-button>`;\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,IAAMI,IAAe,EACnB,QAAQ,SACV,GAmBaC,IAAN,cAAmBC,EAAoC;CAC5D,IAAuB,eAA6B;EAClD,OAAOF;CACT;;EAQgB,KAAA,SAAAG,EAAU;GAAC,GAAGD,EAAQ;GAAQE;GAAaR;EAAM,CAAC;;;EAEvC,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBS,EAAW,SAAS,MAAMA,EAC7B;;CAEA,IAAc,gBAAgB;EAC5B,OAAO,CAAI,mDAAkD,KAAK,KAAK,OAAO,iDAA+C,KAAK,WAAW;CAC/I;AACF;AAhBGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAL,EAAA,WAAA,aAAA,KAAA,CAAA,GAV1C,IAAAJ,EAAA,CAAAU,EAAe,CAAA,GAAAN,CAAA"}