@nvidia-elements/core 2.2.2 → 2.3.0

package/dist/textarea/textarea2.js

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

package/dist/time/time2.js

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

package/dist/toast/toast.d.ts

@@ -5,7 +5,7 @@ import { TypeNativePopoverController } from '@nvidia-elements/core/internal';
 import { Icon } from '@nvidia-elements/core/icon';
 /**
  * @element nve-toast
- * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/toast/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/toast

package/dist/toast/toast2.js

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

package/dist/toast/toast2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast2.js","names":["#i18nController"],"sources":["../../src/toast/toast.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  statusIcons,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon, type IconName } from '@nvidia-elements/core/icon';\nimport styles from './toast.css?inline';\n\n/**\n * @element nve-toast\n * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/toast/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/toast\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toast opens.\n * @event close - Dispatched when the toast closes.\n * @slot - The message communicated by the toast.\n * @slot prefix - custom status icon slot\n * @cssprop --padding\n * @cssprop --justify-content\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --gap\n * @csspart prefix-icon - The prefix icon slot\n * @csspart icon-button - The close icon button element\n * @cssprop --animation-duration - Duration of toast open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toast extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toast',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * Sets the visual prominence of the toast.\n   */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within toast.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event occurs after the provided millisecond value elapses.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Visual treatment to represent a support status.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'manual';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toast>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"><nve-icon part=\"prefix-icon\" .name=${statusIcons[this.status] as IconName} .ariaLabel=${(this.i18n as Record<string, string>)[this.status] ?? this.i18n.information}></nve-icon></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAoB,EAAW;;+BA6BmC,uBAqB/B,wBAK+B,aAO/B,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yBAGpB,6CAEI,IAAI,EAAmC,IAAI;;;gBAvEnE,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;EACvB;;CAmDA;CAeA,SAAS;EACP,OAAO,CAAI,8EAEkD,EAAY,KAAK,QAAoB,gBAAe,KAAK,KAAgC,KAAK,WAAW,KAAK,KAAK,YAAY,sBACtL,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,oDAAkD,KAAK,KAAK,MAAM,wBAAuB,EAAQ;CAIhO;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA3EG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAKrD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UArE3B,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toast2.js","names":["#i18nController"],"sources":["../../src/toast/toast.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType, SupportStatus } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  statusIcons,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { Icon, type IconName } from '@nvidia-elements/core/icon';\nimport styles from './toast.css?inline';\n\n/**\n * @element nve-toast\n * @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.\n * @documentation https://nvidia.github.io/elements/docs/elements/toast/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/toast\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the toast opens.\n * @event close - Dispatched when the toast closes.\n * @slot - The message communicated by the toast.\n * @slot prefix - custom status icon slot\n * @cssprop --padding\n * @cssprop --justify-content\n * @cssprop --background\n * @cssprop --border-radius\n * @cssprop --border\n * @cssprop --color\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --gap\n * @csspart prefix-icon - The prefix icon slot\n * @csspart icon-button - The close icon button element\n * @cssprop --animation-duration - Duration of toast open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toast extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toast',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton,\n    [Icon.metadata.tag]: Icon\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * Sets the visual prominence of the toast.\n   */\n  @property({ type: String, reflect: true }) prominence: 'muted';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within toast.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * A delayed `close` event occurs after the provided millisecond value elapses.\n   */\n  @property({ type: Number, attribute: 'close-timeout' }) closeTimeout = 0;\n\n  /**\n   * Visual treatment to represent a support status.\n   */\n  @property({ type: String, reflect: true }) status: SupportStatus;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'manual';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toast>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot name=\"prefix\"><nve-icon part=\"prefix-icon\" .name=${statusIcons[this.status] as IconName} .ariaLabel=${(this.i18n as Record<string, string>)[this.status] ?? this.i18n.information}></nve-icon></slot>\n        ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : nothing}\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'alert';\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkDO,IAAA,IAAA,cAAoB,EAAW;;+BA6BmC,uBAqB/B,wBAK+B,aAO/B,IAAI,EAAqB,IAAI,eAKlC,KAAKA,GAAgB,yBAGpB,6CAEI,IAAI,EAAmC,IAAI;;;gBAvEnE,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;;4BAE4B;IACzB,EAAW,SAAS,MAAM;IAC1B,EAAK,SAAS,MAAM;EACvB;;CAmDA;CAeA,SAAS;EACP,OAAO,CAAI,8EAEkD,EAAY,KAAK,QAAoB,gBAAe,KAAK,KAAgC,KAAK,WAAW,KAAK,KAAK,YAAY,sBACtL,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,oDAAkD,KAAK,KAAK,MAAM,wBAAuB,EAAQ;CAIhO;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA3EG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAK1B,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAgB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,MAKrD,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOxC,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UArE3B,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}

package/dist/toggletip/toggletip-footer2.js

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

package/dist/toggletip/toggletip-header2.js

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

package/dist/toggletip/toggletip.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip.examples.js","names":[],"sources":["../../src/toggletip/toggletip.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Toggletip',\n  component: 'nve-toggletip',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic toggletip requiring click to open and close. Unlike tooltips that appear on hover, use toggletips for interactive content, extra details, or when users need time to read or interact with the popover content.\n */\nexport const Default = {\n  render: () => html`\n<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n`\n};\n\n/**\n * @summary Visual example using anchor attribute for explicit trigger-target relationship and consistent toggletip implementation across your application.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-toggletip anchor=\"toggletip-btn\">hello there</nve-toggletip>\n<nve-button id=\"toggletip-btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toggletip with complete structure including header, content, and footer sections. Perfect for rich interactive content like quick forms, action menus, or detailed explanations that gain from organized layout.\n */\nexport const Content = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n    <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toggletip with footer for action buttons or supplementary links. Use when toggletip content needs follow-up actions, navigation, or extra context links without requiring a header section.\n */\nexport const ContentWithFooter = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\">\n    <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toggletip with header for titled content sections. Use when toggletip information benefits from a clear title or heading to establish context, improving content scannability and understanding.\n * @tags test-case\n */\nexport const ContentWithHeader = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n    <p nve-text=\"body\">some text content in a toggletip</p>\n</nve-toggletip>\n\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Event handling for toggletip lifecycle events. Useful for adding custom behavior when toggletip state changes.\n */\nexport const Events = {\n  render: () => html`\n<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n<script type=\"module\">\n  const toggletip = document.querySelector('nve-toggletip');\n  toggletip.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  toggletip.addEventListener('toggle', () => console.log('toggle'));\n  toggletip.addEventListener('close', () => console.log('close'));\n  toggletip.addEventListener('open', () => console.log('open'));\n</script>\n  `\n};\n\n/**\n * @summary Closable toggletip with explicit close button for user control. Use when content is complex enough that users may want to dismiss it independently of clicking outside, providing clear exit paths for longer-form content.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\" closable>\n  <nve-toggletip-header>Toggletip Header</nve-toggletip-header>\n    <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>Toggletip Footer</nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Toggletip with alert header for error states or critical messaging. Perfect for displaying error details with recovery actions, combining status communication with actionable next steps in a compact format.\n * @tags test-case\n */\nexport const AlertGroup = {\n  inline: false,\n  render: () => html`\n<nve-toggletip id=\"toggletip-alert-group\">\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" container=\"full\" prominence=\"emphasis\">\n      <nve-alert>Workflow Failed</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <nve-button style=\"width: 100%\">Retry Workflow</nve-button>  \n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button popovertarget=\"toggletip-alert-group\">button</nve-button>\n  `\n};\n\n/**\n * @summary Toggletip positioning options relative to trigger element. Choose position based on available screen space and content type, ensuring toggletips remain visible and don't extend beyond viewport boundaries.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\" position=\"top\">top</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"right\">right</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"bottom\">bottom</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"left\">left</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Precise toggletip alignment combined with positioning for optimal placement control. Use alignment to fine-tune toggletip placement relative to trigger edges, improving visual flow and reducing content overlap in dense layouts.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\">top center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toggletip>\n\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\">right center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toggletip>\n\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\">bottom center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toggletip>\n\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\">left center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toggletip>\n\n<nve-card id=\"card\" style=\"width: 400px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Toggletip anchored to elements across shadow DOM boundaries.\n * @tags test-case\n */\nexport const CrossShadowRootAnchorPosition = {\n  render: () => html`\n<nve-button popovertarget=\"root-toggletip\">document root anchor</nve-button>\n<nve-toggletip id=\"root-toggletip\">document root toggletip</nve-toggletip>\n\n<demo-shadow-root style=\"visibility: visible !important;\">\n  <template shadowrootmode=\"open\">\n    <nve-toggletip id=\"cross-root-toggletip\" hidden>cross root toggletip</nve-toggletip>\n    <slot></slot>\n  </template>\n</demo-shadow-root>\n<nve-button popovertarget=\"cross-root-toggletip\">cross root anchor</nve-button>\n  `\n};\n\n/**\n * @summary Legacy behavior-trigger pattern for automatic toggletip lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler and more maintainable toggletip implementation.\n * @tags test-case\n * @deprecated\n */\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes -- legacy behavior-trigger example intentionally covers deprecated popover attributes. */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<nve-toggletip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-toggletip>\n<nve-button id=\"action-btn\">button</nve-button>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"toggletip.examples.js","names":[],"sources":["../../src/toggletip/toggletip.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/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/search/define.js';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/toggletip/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\n\nexport default {\n  title: 'Elements/Toggletip',\n  component: 'nve-toggletip',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic toggletip requiring click to open and close. Unlike tooltips that appear on hover, use toggletips for interactive content, extra details, or when users need time to read or interact with the popover content.\n */\nexport const Default = {\n  render: () => html`\n<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n`\n};\n\n/**\n * @summary Visual example using anchor attribute for explicit trigger-target relationship and consistent toggletip implementation across your application.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-toggletip anchor=\"toggletip-btn\">hello there</nve-toggletip>\n<nve-button id=\"toggletip-btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toggletip with complete structure including header, content, and footer sections. Perfect for rich interactive content like quick forms, action menus, or detailed explanations that gain from organized layout.\n */\nexport const Content = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n    <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toggletip with footer for action buttons or supplementary links. Use when toggletip content needs follow-up actions, navigation, or extra context links without requiring a header section.\n */\nexport const ContentWithFooter = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\">\n    <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <p nve-text=\"body\">Toggletip Footer</p>\n  </nve-toggletip-footer>\n</nve-toggletip>\n\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Toggletip with header for titled content sections. Use when toggletip information benefits from a clear title or heading to establish context, improving content scannability and understanding.\n * @tags test-case\n */\nexport const ContentWithHeader = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\">\n  <nve-toggletip-header>\n    <h3 nve-text=\"heading sm\">Toggletip Header</h3>\n  </nve-toggletip-header>\n    <p nve-text=\"body\">some text content in a toggletip</p>\n</nve-toggletip>\n\n<nve-button id=\"btn\">button</nve-button>\n`\n};\n\n/**\n * @summary Event handling for toggletip lifecycle events. Useful for adding custom behavior when toggletip state changes.\n */\nexport const Events = {\n  render: () => html`\n<nve-toggletip id=\"toggletip\">hello there</nve-toggletip>\n<nve-button popovertarget=\"toggletip\">button</nve-button>\n<script type=\"module\">\n  const toggletip = document.querySelector('nve-toggletip');\n  toggletip.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  toggletip.addEventListener('toggle', () => console.log('toggle'));\n  toggletip.addEventListener('close', () => console.log('close'));\n  toggletip.addEventListener('open', () => console.log('open'));\n</script>\n  `\n};\n\n/**\n * @summary Closable toggletip with explicit close button for user control. Use when content is complex enough that users may want to dismiss it independently of clicking outside, providing clear exit paths for longer-form content.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\" closable>\n  <nve-toggletip-header>Toggletip Header</nve-toggletip-header>\n    <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>Toggletip Footer</nve-toggletip-footer>\n</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Toggletip with alert header for error states or critical messaging. Perfect for displaying error details with recovery actions, combining status communication with actionable next steps in a compact format.\n * @tags test-case\n */\nexport const AlertGroup = {\n  inline: false,\n  render: () => html`\n<nve-toggletip id=\"toggletip-alert-group\">\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" prominence=\"emphasis\">\n      <nve-alert>Workflow Failed</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <nve-button style=\"width: 100%\">Retry Workflow</nve-button>  \n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button popovertarget=\"toggletip-alert-group\">button</nve-button>\n  `\n};\n\n/**\n * @summary Toggletip positioning options relative to trigger element. Choose position based on available screen space and content type, ensuring toggletips remain visible and don't extend beyond viewport boundaries.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-toggletip anchor=\"btn\" position=\"top\">top</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"right\">right</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"bottom\">bottom</nve-toggletip>\n<nve-toggletip anchor=\"btn\" position=\"left\">left</nve-toggletip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Precise toggletip alignment combined with positioning for optimal placement control. Use alignment to fine-tune toggletip placement relative to trigger edges, improving visual flow and reducing content overlap in dense layouts.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\">top center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-toggletip>\n\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\">right center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-toggletip>\n\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\">bottom center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-toggletip>\n\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\">left center</nve-toggletip>\n<nve-toggletip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-toggletip>\n\n<nve-card id=\"card\" style=\"width: 400px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Toggletip anchored to elements across shadow DOM boundaries.\n * @tags test-case\n */\nexport const CrossShadowRootAnchorPosition = {\n  render: () => html`\n<nve-button popovertarget=\"root-toggletip\">document root anchor</nve-button>\n<nve-toggletip id=\"root-toggletip\">document root toggletip</nve-toggletip>\n\n<demo-shadow-root style=\"visibility: visible !important;\">\n  <template shadowrootmode=\"open\">\n    <nve-toggletip id=\"cross-root-toggletip\" hidden>cross root toggletip</nve-toggletip>\n    <slot></slot>\n  </template>\n</demo-shadow-root>\n<nve-button popovertarget=\"cross-root-toggletip\">cross root anchor</nve-button>\n  `\n};\n\n/**\n * @summary Legacy behavior-trigger pattern for automatic toggletip lifecycle management. Deprecated approach with manual trigger attributes, prefer modern popovertarget API for simpler and more maintainable toggletip implementation.\n * @tags test-case\n * @deprecated\n */\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes -- legacy behavior-trigger example intentionally covers deprecated popover attributes. */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<nve-toggletip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-toggletip>\n<nve-button id=\"action-btn\">button</nve-button>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/toggletip/toggletip.examples.json

@@ -74,7 +74,7 @@
     {
       "id": "toggletip-alert-group",
       "name": "AlertGroup",
-      "template": "<nve-toggletip id=\"toggletip-alert-group\">\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" container=\"full\" prominence=\"emphasis\">\n      <nve-alert>Workflow Failed</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <nve-button style=\"width: 100%\">Retry Workflow</nve-button>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button popovertarget=\"toggletip-alert-group\">button</nve-button>\n",
+      "template": "<nve-toggletip id=\"toggletip-alert-group\">\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" prominence=\"emphasis\">\n      <nve-alert>Workflow Failed</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">some text content in a toggletip</p>\n  <nve-toggletip-footer>\n    <nve-button style=\"width: 100%\">Retry Workflow</nve-button>\n  </nve-toggletip-footer>\n</nve-toggletip>\n<nve-button popovertarget=\"toggletip-alert-group\">button</nve-button>\n",
       "summary": "Toggletip with alert header for error states or critical messaging. Perfect for displaying error details with recovery actions, combining status communication with actionable next steps in a compact format.",
       "description": "",
       "composition": true,

package/dist/toggletip/toggletip2.js

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

package/dist/toolbar/toolbar.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.examples.js","names":[],"sources":["../../src/toolbar/toolbar.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/toolbar/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/input/define.js';\n\nexport default {\n  title: 'Elements/Toolbar',\n  component: 'nve-toolbar',\n};\n\n/**\n * @summary Basic toolbar with action buttons and a settings icon in the suffix slot.\n */\nexport const Default = {\n  render: () => html`\n    <nve-toolbar>\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with flat container styling for a more subtle appearance.\n */\nexport const ContainerFlat = {\n  render: () => html`\n    <nve-toolbar container=\"flat\">\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with inset container styling and constrained width for contained layouts.\n */\nexport const ContainerInset = {\n  render: () => html`\n    <nve-toolbar container=\"inset\" style=\"--width: 300px\">\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with full container styling that spans the entire width.\n */\nexport const ContainerFull = {\n  render: () => html`\n    <nve-toolbar container=\"full\">\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.\n */\nexport const Groups = {\n  render: () => html`\n    <nve-toolbar>\n      <nve-select fit-text>\n        <select aria-label=\"element type\">\n          <option value=\"1\">Heading 1</option>\n          <option value=\"2\">Heading 2</option>\n          <option value=\"p\">Paragraph</option>\n        </select>\n        <div slot=\"option-1\">\n          <span nve-text=\"heading\">Heading 1</span>\n        </div>\n        <div slot=\"option-2\">\n          <span nve-text=\"heading sm\">Heading 2</span>\n        </div>\n        <div slot=\"option-3\">\n          <span nve-text=\"body sm\">Paragraph</span>\n        </div>\n      </nve-select>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button icon-name=\"code\"></nve-icon-button>\n        <nve-icon-button icon-name=\"fork\"></nve-icon-button>\n        <nve-icon-button icon-name=\"merge\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-button slot=\"suffix\" container=\"flat\">Save</nve-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Vertical toolbar orientation with button groups and dividers for sidebar layouts.\n */\nexport const Vertical = {\n  render: () => html`\n    <nve-toolbar orientation=\"vertical\">\n      <nve-button-group>\n        <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"strikethrough\"></nve-icon-button>\n      </nve-button-group>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with status styling showing selection state with accent status and default status variants for bulk actions.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg align:horizontal-stretch full\">\n      <nve-toolbar status=\"accent\">\n        <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>  \n        <p nve-text=\"body\">123 selected</p>\n        <nve-button slot=\"suffix\">delete</nve-button>\n        <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n      </nve-toolbar>\n\n      <nve-toolbar>\n        <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>  \n        <p nve-text=\"body\">123 selected</p>\n        <nve-button slot=\"suffix\">delete</nve-button>\n        <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n      </nve-toolbar>\n    </div>\n  `\n}\n\n\n/**\n * @summary Example of toolbar containers and their different appearances with varying prominence levels.\n * @tags test-case\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <nve-toolbar>\n        <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n        <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n        <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n        <nve-copy-button></nve-copy-button>\n        <nve-switch prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"switch\" />\n        </nve-switch>\n        <nve-checkbox prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n        </nve-checkbox>\n        <nve-input>\n          <input aria-label=\"input\" />\n        </nve-input>\n      </nve-toolbar>\n\n      <nve-toolbar container=\"flat\">\n        <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n        <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n        <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n        <nve-copy-button></nve-copy-button>\n        <nve-switch prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"switch\" />\n        </nve-switch>\n        <nve-checkbox prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n        </nve-checkbox>\n        <nve-input>\n          <input aria-label=\"input\" />\n        </nve-input>\n      </nve-toolbar>\n\n      <nve-toolbar container=\"inset\">\n        <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n        <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n        <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n        <nve-copy-button></nve-copy-button>\n        <nve-switch prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"switch\" />\n        </nve-switch>\n        <nve-checkbox prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n        </nve-checkbox>\n        <nve-input>\n          <input aria-label=\"input\" />\n        </nve-input>\n      </nve-toolbar>\n    </div>\n  `\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"toolbar.examples.js","names":[],"sources":["../../src/toolbar/toolbar.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/toolbar/define.js';\nimport '@nvidia-elements/core/combobox/define.js';\nimport '@nvidia-elements/core/button-group/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/divider/define.js';\nimport '@nvidia-elements/core/progressive-filter-chip/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/page/define.js';\n\nexport default {\n  title: 'Elements/Toolbar',\n  component: 'nve-toolbar',\n};\n\n/**\n * @summary Basic toolbar with action buttons and a settings icon in the suffix slot.\n */\nexport const Default = {\n  render: () => html`\n    <nve-toolbar>\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with flat container styling for a more subtle appearance.\n */\nexport const ContainerFlat = {\n  render: () => html`\n    <nve-toolbar container=\"flat\">\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with inset container styling and constrained width for contained layouts.\n */\nexport const ContainerInset = {\n  render: () => html`\n    <nve-toolbar container=\"inset\" style=\"--width: 300px\">\n      <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n      <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n      <nve-icon-button icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with full container styling that spans the entire width.\n */\nexport const ContainerFull = {\n  render: () => html`\n    <nve-page document-scroll>\n      <nve-toolbar slot=\"subheader\" container=\"full\">\n        <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n        <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n        <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n      </nve-toolbar>\n    </nve-page>\n  `\n};\n\n/**\n * @summary Complex toolbar with grouped controls including select dropdowns, button groups, and dividers for text editing scenarios.\n */\nexport const Groups = {\n  render: () => html`\n    <nve-toolbar>\n      <nve-select fit-text>\n        <select aria-label=\"element type\">\n          <option value=\"1\">Heading 1</option>\n          <option value=\"2\">Heading 2</option>\n          <option value=\"p\">Paragraph</option>\n        </select>\n        <div slot=\"option-1\">\n          <span nve-text=\"heading\">Heading 1</span>\n        </div>\n        <div slot=\"option-2\">\n          <span nve-text=\"heading sm\">Heading 2</span>\n        </div>\n        <div slot=\"option-3\">\n          <span nve-text=\"body sm\">Paragraph</span>\n        </div>\n      </nve-select>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"strikethrough\" size=\"sm\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button icon-name=\"code\"></nve-icon-button>\n        <nve-icon-button icon-name=\"fork\"></nve-icon-button>\n        <nve-icon-button icon-name=\"merge\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-button slot=\"suffix\" container=\"flat\">Save</nve-button>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Vertical toolbar orientation with button groups and dividers for sidebar layouts.\n */\nexport const Vertical = {\n  render: () => html`\n    <nve-toolbar orientation=\"vertical\">\n      <nve-button-group>\n        <nve-icon-button pressed icon-name=\"bars-3-bottom-left\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-3-bottom-right\"></nve-icon-button>\n        <nve-icon-button icon-name=\"bars-4\"></nve-icon-button>\n      </nve-button-group>\n\n      <nve-divider></nve-divider>\n\n      <nve-button-group>\n        <nve-icon-button icon-name=\"bold\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"italic\" size=\"sm\"></nve-icon-button>\n        <nve-icon-button icon-name=\"strikethrough\"></nve-icon-button>\n      </nve-button-group>\n    </nve-toolbar>\n  `\n};\n\n/**\n * @summary Toolbar with status styling showing selection state with accent status and default status variants for bulk actions.\n */\nexport const Status = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg align:horizontal-stretch full\">\n      <nve-toolbar status=\"accent\">\n        <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>  \n        <p nve-text=\"body\">123 selected</p>\n        <nve-button slot=\"suffix\">delete</nve-button>\n        <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n      </nve-toolbar>\n\n      <nve-toolbar>\n        <nve-icon-button icon-name=\"cancel\" slot=\"prefix\"></nve-icon-button>  \n        <p nve-text=\"body\">123 selected</p>\n        <nve-button slot=\"suffix\">delete</nve-button>\n        <nve-icon-button icon-name=\"more-actions\" slot=\"suffix\"></nve-icon-button>\n      </nve-toolbar>\n    </div>\n  `\n}\n\n\n/**\n * @summary Example of toolbar containers and their different appearances with varying prominence levels.\n * @tags test-case\n */\nexport const Container = {\n  render: () => html`\n    <div nve-layout=\"column gap:lg\">\n      <nve-toolbar>\n        <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n        <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n        <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n        <nve-copy-button></nve-copy-button>\n        <nve-switch prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"switch\" />\n        </nve-switch>\n        <nve-checkbox prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n        </nve-checkbox>\n        <nve-input>\n          <input aria-label=\"input\" />\n        </nve-input>\n      </nve-toolbar>\n\n      <nve-toolbar container=\"flat\">\n        <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n        <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n        <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n        <nve-copy-button></nve-copy-button>\n        <nve-switch prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"switch\" />\n        </nve-switch>\n        <nve-checkbox prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n        </nve-checkbox>\n        <nve-input>\n          <input aria-label=\"input\" />\n        </nve-input>\n      </nve-toolbar>\n\n      <nve-toolbar container=\"inset\">\n        <nve-button><nve-icon name=\"copy\"></nve-icon> copy</nve-button>\n        <nve-button><nve-icon name=\"copy\"></nve-icon></nve-button>\n        <nve-icon-button icon-name=\"copy\"></nve-icon-button>\n        <nve-copy-button></nve-copy-button>\n        <nve-switch prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"switch\" />\n        </nve-switch>\n        <nve-checkbox prominence=\"muted\">\n          <input type=\"checkbox\" checked aria-label=\"checkbox\" />\n        </nve-checkbox>\n        <nve-input>\n          <input aria-label=\"input\" />\n        </nve-input>\n      </nve-toolbar>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}

package/dist/toolbar/toolbar.examples.json

@@ -32,7 +32,7 @@
     {
       "id": "toolbar-container-full",
       "name": "ContainerFull",
-      "template": "<nve-toolbar container=\"full\">\n  <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n  <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n  <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n</nve-toolbar>\n",
+      "template": "<nve-page document-scroll>\n  <nve-toolbar slot=\"subheader\" container=\"full\">\n    <nve-button><nve-icon name=\"add\"></nve-icon> create</nve-button>\n    <nve-button><nve-icon name=\"delete\"></nve-icon> delete</nve-button>\n    <nve-icon-button container=\"flat\" icon-name=\"gear\" slot=\"suffix\" aria-label=\"settings\"></nve-icon-button>\n  </nve-toolbar>\n</nve-page>\n",
       "summary": "Toolbar with full container styling that spans the entire width.",
       "description": "",
       "composition": true,

package/dist/toolbar/toolbar2.js

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

package/dist/tooltip/tooltip.d.ts

@@ -3,7 +3,7 @@ import type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-element
 import { TypeNativePopoverController } from '@nvidia-elements/core/internal';
 /**
  * @element nve-tooltip
- * @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+ * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
  * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/
  * @since 0.6.0
  * @entrypoint \@nvidia-elements/core/tooltip

package/dist/tooltip/tooltip2.js

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

package/dist/tooltip/tooltip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip2.js","names":[],"sources":["../../src/tooltip/tooltip.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 { query } from 'lit/decorators/query.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './tooltip.css?inline';\n\n/**\n * @element nve-tooltip\n * @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/tooltip\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the tooltip opens.\n * @event close - Dispatched when the tooltip closes.\n * @slot - Noninteractive text or other descriptive content shown in the tooltip.\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --arrow-transform\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border\n * @csspart arrow\n * @cssprop --animation-duration - Duration of tooltip open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit({ excessiveInstanceLimit })\nexport class Tooltip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tooltip',\n    version: '0.0.0'\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * visual treatment to represent a ongoing task or support status\n   */\n  @property({ type: String, reflect: true }) status: 'muted';\n\n  /**\n   * @deprecated Use interest-delay-start css property instead\n   */\n  @property({ type: Number, attribute: 'open-delay' }) openDelay: number;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'hint';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Tooltip>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /* eslint-disable local/no-invalid-css-parts */\n  render() {\n    return html`\n    <div internal-host>\n      <slot></slot>\n    </div>\n    <div part=\"arrow\" class=\"arrow\"></div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tooltip';\n  }\n}\n"],"mappings":";;;;;;;;;;;AA4CO,IAAA,IAAA,cAAsB,EAAW;;+BAwBiC,0BA2BnC,2CAEI,IAAI,EAAqC,IAAI;;;gBApDrE,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAqDA,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA7DG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGlD,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,UAjDhB,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
+{"version":3,"file":"tooltip2.js","names":[],"sources":["../../src/tooltip/tooltip.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 { query } from 'lit/decorators/query.js';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport styles from './tooltip.css?inline';\n\n/**\n * @element nve-tooltip\n * @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.\n * @documentation https://nvidia.github.io/elements/docs/elements/tooltip/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/tooltip\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the tooltip opens.\n * @event close - Dispatched when the tooltip closes.\n * @slot - Noninteractive text or other descriptive content shown in the tooltip.\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --arrow-transform\n * @cssprop --width\n * @cssprop --height\n * @cssprop --border\n * @csspart arrow\n * @cssprop --animation-duration - Duration of tooltip open/close animations\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n */\n@audit({ excessiveInstanceLimit })\nexport class Tooltip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-tooltip',\n    version: '0.0.0'\n  };\n\n  /**\n   * (optional) By default the popover automatically anchors itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'top';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * visual treatment to represent a ongoing task or support status\n   */\n  @property({ type: String, reflect: true }) status: 'muted';\n\n  /**\n   * @deprecated Use interest-delay-start css property instead\n   */\n  @property({ type: Number, attribute: 'open-delay' }) openDelay: number;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'hint';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Tooltip>(this);\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  /* eslint-disable local/no-invalid-css-parts */\n  render() {\n    return html`\n    <div internal-host>\n      <slot></slot>\n    </div>\n    <div part=\"arrow\" class=\"arrow\"></div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'tooltip';\n  }\n}\n"],"mappings":";;;;;;;;;;;AA4CO,IAAA,IAAA,cAAsB,EAAW;;+BAwBiC,0BA2BnC,2CAEI,IAAI,EAAqC,IAAI;;;gBApDrE,EAAU,CAAC,GAAe,CAAM,CAAC;;;kBAEtB;GACzB,KAAK;GACL,SAAS;EACX;;CAqDA,SAAS;EACP,OAAO,CAAI;CAMb;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;AACF;GA7DG,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAOzB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MAKzB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAMxC,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,MAKxE,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,MAKxC,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,MAGlD,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,UAjDhB,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}

package/dist/tree/tree-node2.js

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

package/dist/tree/tree2.js

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

package/dist/week/week2.js

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

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@nvidia-elements/core",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "release": {
     "extends": "../../release.config.js"
   },
   "description": "The Design Language for AI/ML Factories Building at the Speed of Light. Provides a set of accessible and themeable UI elements.",
   "keywords": [
+    "nvidia",
     "web-components",
+    "custom-elements",
     "design-system",
-    "ui-components"
+    "ui-components",
+    "accessibility",
+    "lit"
   ],
   "homepage": "https://NVIDIA.github.io/elements/",
   "repository": {
@@ -358,6 +362,18 @@
       "types": "./dist/file/define.d.ts",
       "default": "./dist/file/define.js"
     },
+    "./format-bytes": {
+      "types": "./dist/format-bytes/index.d.ts",
+      "default": "./dist/format-bytes/index.js"
+    },
+    "./format-bytes/index.js": {
+      "types": "./dist/format-bytes/index.d.ts",
+      "default": "./dist/format-bytes/index.js"
+    },
+    "./format-bytes/define.js": {
+      "types": "./dist/format-bytes/define.d.ts",
+      "default": "./dist/format-bytes/define.js"
+    },
     "./format-datetime": {
       "types": "./dist/format-datetime/index.d.ts",
       "default": "./dist/format-datetime/index.js"
@@ -933,7 +949,7 @@
   "dependencies": {
     "lit": "^3.3.3",
     "lit-html": "^3.3.3",
-    "@nvidia-elements/forms": "^2.0.5"
+    "@nvidia-elements/forms": "^2.0.6"
   },
   "peerDependencies": {
     "@nvidia-elements/themes": "^2.0.0"
@@ -959,16 +975,16 @@
     "publint": "0.3.21",
     "stylelint": "17.14.0",
     "stylelint-config-standard": "40.0.0",
-    "svgo": "4.0.1",
+    "svgo": "4.0.2",
     "ts-lit-plugin": "2.0.2",
     "typescript": "6.0.3",
     "vite": "8.1.4",
     "vitest": "4.1.10",
     "@internals/eslint": "0.0.0",
+    "@nvidia-elements/lint": "2.3.0",
     "@internals/testing": "0.0.0",
-    "@nvidia-elements/lint": "2.2.0",
     "@internals/vite": "0.0.0",
-    "@nvidia-elements/styles": "^2.1.1"
+    "@nvidia-elements/styles": "^2.1.2"
   },
   "wireit": {
     "ci": {
@@ -1047,7 +1063,10 @@
           "script": "../forms:build",
           "cascade": false
         }
-      ]
+      ],
+      "env": {
+        "ELEMENTS_BUNDLE_VISUALIZER": "true"
+      }
     },
     "build:icons": {
       "command": "node ./build/icons.js",