@nvidia-elements/core 2.20.1 → 2.20.3

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\" closable>\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" prominence=\"emphasis\">\n      <nve-alert>Workflow Timeout</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">The training process has timed out. Please try again.</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":["toggletip_examples_default"],"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\" closable>\n  <nve-toggletip-header>\n    <nve-alert-group status=\"danger\" prominence=\"emphasis\">\n      <nve-alert>Workflow Timeout</nve-alert>\n    </nve-alert-group>\n  </nve-toggletip-header>\n  <p nve-text=\"body\">The training process has timed out. Please try again.</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,IAAAA,IAAS"}

package/dist/toggletip/toggletip.global.js

@@ -1,6 +1,5 @@
-//#region src/toggletip/toggletip.global.css?inline
+// src/toggletip/toggletip.global.css?inline
 var e = "nve-toggletip:not(:has([slot=footer])):has([slot=header])::part(_content){margin-block-end:calc(var(--padding) * .5)}nve-toggletip:not(:has([slot=header])):has([slot=footer])::part(_content){margin-block-start:calc(var(--padding) * .5)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=toggletip.global.js.map

package/dist/toggletip/toggletip.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip.global.js","names":[],"sources":["../../src/toggletip/toggletip.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-toggletip:not(:has([slot='footer'])):has([slot='header'])::part(_content) {\n  margin-block-end: calc(var(--padding) * 0.5);\n}\n\nnve-toggletip:not(:has([slot='header'])):has([slot='footer'])::part(_content) {\n  margin-block-start: calc(var(--padding) * 0.5);\n}\n"],"mappings":""}
+{"version":3,"file":"toggletip.global.js","names":["toggletip_global_default"],"sources":["../../src/toggletip/toggletip.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-toggletip:not(:has([slot='footer'])):has([slot='header'])::part(_content) {\n  margin-block-end: calc(var(--padding) * 0.5);\n}\n\nnve-toggletip:not(:has([slot='header'])):has([slot='footer'])::part(_content) {\n  margin-block-start: calc(var(--padding) * 0.5);\n}\n"],"mappings":""}

package/dist/toggletip/toggletip.js

@@ -1,6 +1,5 @@
-//#region src/toggletip/toggletip.css?inline
+// src/toggletip/toggletip.css?inline
 var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-300);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);--nve-sys-layer-popover-arrow-padding: 6px;--nve-sys-layer-popover-arrow-offset: 2px;--nve-sys-layer-popover-offset: 2px;--arrow-transform: translate(0, -2px) rotate(-45deg);--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--border-radius: var(--nve-ref-border-radius-md);--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-regular);--padding: var(--nve-ref-size-400);--box-shadow: var(--nve-ref-shadow-400);--width: fit-content;--min-width: fit-content;--gap: var(--nve-ref-space-sm);--_divider-padding: var(--padding)}[internal-host]{padding:var(--padding);border-radius:var(--border-radius);border:var(--border);background:var(--background);color:var(--color);gap:var(--nve-ref-space-sm);width:var(--width);min-width:var(--min-width);outline:0;font-size:var(--font-size);font-weight:var(--font-weight);box-shadow:var(--box-shadow)}[internal-host]::backdrop{background:transparent}nve-icon-button{position:absolute;top:var(--nve-ref-size-200);right:var(--nve-ref-size-200);z-index:99}.arrow{width:var(--nve-ref-size-300);height:var(--nve-ref-size-300);background:var(--background);transform:var(--arrow-transform);border-radius:var(--nve-ref-size-50);position:absolute}:host([position*=\"top\"]){--arrow-transform: translate(0, -2px) rotate(-45deg)}:host([position*=\"right\"]){--arrow-transform: translate(2px, 0) rotate(45deg)}:host([position*=\"bottom\"]){--arrow-transform: translate(0, 2px) rotate(45deg)}:host([position*=\"left\"]){--arrow-transform: translate(-2px, 0) rotate(45deg)}::slotted(nve-menu){--width: 100%}::slotted(nve-divider){margin:0 calc(-1 * var(--_divider-padding))}#content{margin:calc(var(--padding) * -.5) 0}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=toggletip.js.map

package/dist/toggletip/toggletip.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip.js","names":[],"sources":["../../src/toggletip/toggletip.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-layer-popover-arrow-padding: 6px;\n  --nve-sys-layer-popover-arrow-offset: 2px;\n  --nve-sys-layer-popover-offset: 2px;\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --padding: var(--nve-ref-size-400);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --width: fit-content;\n  --min-width: fit-content;\n  --gap: var(--nve-ref-space-sm);\n  --_divider-padding: var(--padding);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  gap: var(--nve-ref-space-sm);\n  width: var(--width);\n  min-width: var(--min-width);\n  outline: 0;\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  box-shadow: var(--box-shadow);\n}\n\n[internal-host]::backdrop {\n  background: transparent;\n}\n\nnve-icon-button {\n  position: absolute;\n  top: var(--nve-ref-size-200);\n  right: var(--nve-ref-size-200);\n  z-index: 99;\n}\n\n.arrow {\n  width: var(--nve-ref-size-300);\n  height: var(--nve-ref-size-300);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-radius: var(--nve-ref-size-50);\n  position: absolute;\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, 2px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--_divider-padding));\n}\n\n#content {\n  margin: calc(var(--padding) * -0.5) 0;\n}\n"],"mappings":""}
+{"version":3,"file":"toggletip.js","names":["toggletip_default"],"sources":["../../src/toggletip/toggletip.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-layer-popover-arrow-padding: 6px;\n  --nve-sys-layer-popover-arrow-offset: 2px;\n  --nve-sys-layer-popover-offset: 2px;\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --padding: var(--nve-ref-size-400);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --width: fit-content;\n  --min-width: fit-content;\n  --gap: var(--nve-ref-space-sm);\n  --_divider-padding: var(--padding);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  gap: var(--nve-ref-space-sm);\n  width: var(--width);\n  min-width: var(--min-width);\n  outline: 0;\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  box-shadow: var(--box-shadow);\n}\n\n[internal-host]::backdrop {\n  background: transparent;\n}\n\nnve-icon-button {\n  position: absolute;\n  top: var(--nve-ref-size-200);\n  right: var(--nve-ref-size-200);\n  z-index: 99;\n}\n\n.arrow {\n  width: var(--nve-ref-size-300);\n  height: var(--nve-ref-size-300);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-radius: var(--nve-ref-size-50);\n  position: absolute;\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, 2px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--_divider-padding));\n}\n\n#content {\n  margin: calc(var(--padding) * -0.5) 0;\n}\n"],"mappings":""}

package/dist/toggletip/toggletip2.js

@@ -5,7 +5,7 @@ import { TypeNativePopoverController as r } from "../internal/controllers/type-n
 import { scopedRegistry as i } from "../internal/decorators/scoped-registry.js";
 import { useStyles as a } from "../internal/styles/index.js";
 import { popoverStyles as o } from "../internal/styles/popover2.js";
-import s from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import s from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { IconButton as c } from "../icon-button/icon-button2.js";
 import l from "./toggletip.js";
 import u from "./toggletip.global.js";
@@ -13,7 +13,7 @@ import { LitElement as d, html as f } from "lit";
 import { property as p } from "lit/decorators/property.js";
 import { I18nController as m } from "@nvidia-elements/foundations/internal/i18n";
 import { query as h } from "lit/decorators/query.js";
-//#region src/toggletip/toggletip.ts
+// src/toggletip/toggletip.ts
 var g = { close: "close" }, _ = class extends d {
 	constructor(...e) {
 		super(...e), this.position = "top", this.alignment = "center", this.closable = !1, this.arrow = !0, this.popoverType = "auto", this.typeNativePopoverController = new r(this), this.#e = new m(this, g), this.i18n = this.#e.i18n;
@@ -24,7 +24,7 @@ var g = { close: "close" }, _ = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-toggletip",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -49,7 +49,6 @@ s([p({ type: String })], _.prototype, "anchor", void 0), s([p({ type: String })]
 	reflect: !0,
 	attribute: "behavior-trigger"
 })], _.prototype, "behaviorTrigger", void 0), s([p({ type: Boolean })], _.prototype, "closable", void 0), s([p({ type: Boolean })], _.prototype, "arrow", void 0), s([h(".arrow")], _.prototype, "popoverArrow", void 0), s([p({ type: Object })], _.prototype, "i18n", void 0), _ = s([i(), e({ excessiveInstanceLimit: 50 })], _);
-//#endregion
 export { _ as Toggletip };
 
 //# sourceMappingURL=toggletip2.js.map

package/dist/toggletip/toggletip2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggletip2.js","names":[],"sources":["../../src/toggletip/toggletip.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 { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './toggletip.css?inline';\nimport globalStyles from './toggletip.global.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-toggletip\n * @description Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\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 toggletip opens.\n * @event close - Dispatched when the toggletip closes.\n * @slot - default slot for toggletip content\n * @cssprop --arrow-transform\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --animation-duration - Duration of toggletip open/close animations\n * @csspart icon-button - The close icon button element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toggletip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\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   * If an arrow exists the alginment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\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 toggletip.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines if the component renders an arrow.\n   */\n  @property({ type: Boolean }) arrow = true;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'auto';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toggletip>(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot name=\"header\"></slot>\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      <div id=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toggletip';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAM,IAAe,EACnB,OAAO,QACT,GAiCa,IAAN,cAAwB,EAAW;;EAiEL,aArCoC,KAAA,WAAA,OAMF,KAAA,YAAA,UAW7B,KAAA,WAAA,IAKH,KAAA,QAAA,IAMD,KAAA,cAAA,QAEI,KAAA,8BAAA,IAAI,EAAuC,IAAI,GAE/C,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAKhD,KAAA,OAAA,KAAK,GAAgB;;;EAhExC,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAkDA;CAUA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,wFAM/N,KAAK,QAAQ,CAAI,8BAA8B;CAEnD;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,aACvB,EAAoB,MAAM,CAAY;CACxC;AACF;AA1EG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAKxE,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAG1B,EAAA,CAAA,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAYd,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAnE3B,IAAA,EAAA,CAAA,EAAe,GACf,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAA,CAAA"}
+{"version":3,"file":"toggletip2.js","names":["styles","globalStyles","_decorate","__decorate","toggletip_default","toggletip_global_default","i18nDefaults","Toggletip","LitElement","_args","TypeNativePopoverController","#i18nController","I18nController","useStyles","popoverStyles","IconButton","attachInternals","appendRootNodeStyle","property","query","scopedRegistry","audit"],"sources":["../../src/toggletip/toggletip.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 { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  attachInternals,\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './toggletip.css?inline';\nimport globalStyles from './toggletip.global.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-toggletip\n * @description Generic toggletip element for rendering a variety of different interactive content. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @documentation https://nvidia.github.io/elements/docs/elements/toggletip/\n * @since 0.38.0\n * @entrypoint \\@nvidia-elements/core/toggletip\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 toggletip opens.\n * @event close - Dispatched when the toggletip closes.\n * @slot - default slot for toggletip content\n * @cssprop --arrow-transform\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --animation-duration - Duration of toggletip open/close animations\n * @csspart icon-button - The close icon button element\n\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n *\n */\n@scopedRegistry()\n@audit({ excessiveInstanceLimit })\nexport class Toggletip extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-toggletip',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\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   * If an arrow exists the alginment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\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 toggletip.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines if the component renders an arrow.\n   */\n  @property({ type: Boolean }) arrow = true;\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  /** @private */\n  readonly popoverType: PopoverType = 'auto';\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Toggletip>(this);\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Updates internal string values for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot name=\"header\"></slot>\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      <div id=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n  `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toggletip';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,IAAMM,IAAe,EACnB,OAAO,QACT,GAiCaC,IAAN,cAAwBC,EAAW;;EAiEL,A,aArCoC,KAAA,WAAA,OAMF,KAAA,YAAA,UAW7B,KAAA,WAAA,IAKH,KAAA,QAAA,IAMD,KAAA,cAAA,QAEI,KAAA,8BAAA,IAAIE,EAAuC,IAAI,GAE/C,KAAAC,KAAA,IAAIC,EAAqB,MAAMN,CAAY,GAKhD,KAAA,OAAA,KAAKK,GAAgB;;;EAhExC,KAAA,SAAAE,EAAU,CAACC,GAAed,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBe,EAAW,SAAS,MAAMA,EAC7B;;CAkDA;CAUA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,wFAM/N,KAAK,QAAQ,CAAI,8BAA8B;CAEnD;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,aACvBC,EAAoB,MAAMhB,CAAY;CACxC;AACF;AA1EGC,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAX,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzBL,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAX,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzBL,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,YAAA,KAAA,CAAA,GAMxCL,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxCL,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAAX,EAAA,WAAA,mBAAA,KAAA,CAAA,GAKxEL,EAAA,CAAAgB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAX,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1BL,EAAA,CAAAgB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAX,EAAA,WAAA,SAAA,KAAA,CAAA,GAG1BL,EAAA,CAAAiB,EAAM,QAAQ,CAAA,GAAAZ,EAAA,WAAA,gBAAA,KAAA,CAAA,GAYdL,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAX,EAAA,WAAA,QAAA,KAAA,CAAA,GAnE3B,IAAAL,EAAA,CAAAkB,EAAe,GACfC,EAAM,EAAE,wBAAA,GAAuB,CAAC,CAAA,GAAAd,CAAA"}

package/dist/toolbar/define.js

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

package/dist/toolbar/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/toolbar/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 { Toolbar } from '@nvidia-elements/core/toolbar';\n\ndefine(Toolbar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-toolbar': Toolbar;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAO"}
+{"version":3,"file":"define.js","names":["define","Toolbar"],"sources":["../../src/toolbar/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 { Toolbar } from '@nvidia-elements/core/toolbar';\n\ndefine(Toolbar);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-toolbar': Toolbar;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAO"}

package/dist/toolbar/index.js

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

package/dist/toolbar/toolbar.examples.js

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

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

package/dist/toolbar/toolbar.js

@@ -1,6 +1,5 @@
-//#region src/toolbar/toolbar.css?inline
+// src/toolbar/toolbar.css?inline
 var e = ":host{--nve-sys-interaction-background: var(--nve-sys-interaction-background-200);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);--background: var(--nve-sys-layer-container-background);--color: var(--nve-sys-layer-canvas-color);--padding: 0 var(--nve-ref-size-300);--min-height: var(--nve-ref-size-1000);--border-radius: var(--nve-ref-border-radius-sm);--gap: var(--nve-ref-space-xs);--border-bottom: 0;--box-shadow: var(--nve-ref-shadow-100);--width: 100%;width:var(--width);contain:initial}:host([container=\"flat\"]),:host([container=\"inset\"]){--nve-sys-interaction-background: var(--nve-sys-interaction-background-100);--nve-sys-interaction-field-background: var(--nve-sys-interaction-background-100);--background: transparent;--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);--box-shadow: none;--border-radius: 0;--padding: 0}:host([container=\"full\"]){--box-shadow: none;--border-radius: 0}:host([container=\"inset\"]){--border-bottom: 0}:host([container=\"flat\"]:focus-within){--border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis)}:host([status=\"accent\"]){--background: var(--nve-sys-support-accent-color);--color: var(--nve-sys-text-white-color)}:host([status=\"accent\"]) ::slotted(nve-button),:host([status=\"accent\"]) ::slotted(nve-icon-button),:host([status=\"accent\"]) nve-icon-button{--color: var(--nve-sys-text-white-color) !important;--_icon-color: var(--nve-sys-text-white-color) !important}:host([status=\"accent\"]) ::slotted([nve-text]){color:var(--nve-sys-text-white-color)!important}[internal-host]{background:var(--background);color:var(--color);padding:var(--padding);min-height:var(--min-height);border-radius:var(--border-radius);border-bottom:var(--border-bottom);box-shadow:var(--box-shadow);width:var(--width);gap:var(--gap);display:flex;align-items:center}:host([orientation=\"vertical\"]){--padding: var(--nve-ref-size-100) 0;--gap: var(--nve-ref-space-xs);--width: fit-content}:host([orientation=\"vertical\"]) [internal-host],:host([orientation=\"vertical\"]) slot{flex-direction:column;align-items:center;margin:0}:host([orientation=\"vertical\"]) ::slotted(nve-divider){width:100%}[name=prefix],[name=suffix]{display:none;gap:var(--gap);align-items:center;justify-content:start}[name=suffix]{justify-content:end}:host(:state(has-prefix)) [name=prefix],:host(:state(has-suffix)) [name=suffix]{display:flex}::slotted(nve-combobox),::slotted(nve-search),::slotted(nve-input){--border-bottom: 0;min-width:20cqw;flex:1}::slotted(nve-select){--border-bottom: 0}slot{min-height:inherit}slot:not([name]){gap:var(--gap);width:100%;display:flex;align-items:center;text-wrap:nowrap;overflow:auto hidden;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width)}:host([content=\"wrap\"]) slot:not([name]){gap:var(--gap);width:100%;display:flex;flex-wrap:wrap;text-wrap:balance;overflow-x:initial}:host(:state(scrollbar)) slot:not([name]){margin-block-end:-14px}::slotted([nve-text]),::slotted(a),::slotted(span){text-wrap:nowrap!important}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=toolbar.js.map

package/dist/toolbar/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/toolbar/toolbar.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --padding: 0 var(--nve-ref-size-300);\n  --min-height: var(--nve-ref-size-1000);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --gap: var(--nve-ref-space-xs);\n  --border-bottom: 0;\n  --box-shadow: var(--nve-ref-shadow-100);\n  --width: 100%;\n  width: var(--width);\n  contain: initial;\n}\n\n:host([container='flat']),\n:host([container='inset']) {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-100);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-100);\n  --background: transparent;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n  --box-shadow: none;\n  --border-radius: 0;\n  --padding: 0;\n}\n\n:host([container='full']) {\n  --box-shadow: none;\n  --border-radius: 0;\n}\n\n:host([container='inset']) {\n  --border-bottom: 0;\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([status='accent']) {\n  --background: var(--nve-sys-support-accent-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host([status='accent']) ::slotted(nve-button),\n:host([status='accent']) ::slotted(nve-icon-button),\n:host([status='accent']) nve-icon-button {\n  --color: var(--nve-sys-text-white-color) !important;\n  --_icon-color: var(--nve-sys-text-white-color) !important;\n}\n\n:host([status='accent']) ::slotted([nve-text]) {\n  color: var(--nve-sys-text-white-color) !important;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  min-height: var(--min-height);\n  border-radius: var(--border-radius);\n  border-bottom: var(--border-bottom);\n  box-shadow: var(--box-shadow);\n  width: var(--width);\n  gap: var(--gap);\n  display: flex;\n  align-items: center;\n}\n\n:host([orientation='vertical']) {\n  --padding: var(--nve-ref-size-100) 0;\n  --gap: var(--nve-ref-space-xs);\n  --width: fit-content;\n}\n\n:host([orientation='vertical']) [internal-host],\n:host([orientation='vertical']) slot {\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n}\n\n:host([orientation='vertical']) ::slotted(nve-divider) {\n  width: 100%;\n}\n\n[name='prefix'],\n[name='suffix'] {\n  display: none;\n  gap: var(--gap);\n  align-items: center;\n  justify-content: start;\n}\n\n[name='suffix'] {\n  justify-content: end;\n}\n\n:host(:state(has-prefix)) [name='prefix'],\n:host(:state(has-suffix)) [name='suffix'] {\n  display: flex;\n}\n\n::slotted(nve-combobox),\n::slotted(nve-search),\n::slotted(nve-input) {\n  --border-bottom: 0;\n  min-width: 20cqw;\n  flex: 1;\n}\n\n::slotted(nve-select) {\n  --border-bottom: 0;\n}\n\nslot {\n  min-height: inherit;\n}\n\nslot:not([name]) {\n  gap: var(--gap);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  text-wrap: nowrap;\n  overflow: auto hidden;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([content='wrap']) slot:not([name]) {\n  gap: var(--gap);\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  text-wrap: balance;\n  overflow-x: initial;\n}\n\n:host(:state(scrollbar)) slot:not([name]) {\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list */\n  margin-block-end: -14px;\n}\n\n::slotted([nve-text]),\n::slotted(a),\n::slotted(span) {\n  text-wrap: nowrap !important;\n}\n"],"mappings":""}
+{"version":3,"file":"toolbar.js","names":["toolbar_default"],"sources":["../../src/toolbar/toolbar.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  --nve-sys-interaction-background: var(--nve-sys-interaction-background-200);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-200);\n  --background: var(--nve-sys-layer-container-background);\n  --color: var(--nve-sys-layer-canvas-color);\n  --padding: 0 var(--nve-ref-size-300);\n  --min-height: var(--nve-ref-size-1000);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --gap: var(--nve-ref-space-xs);\n  --border-bottom: 0;\n  --box-shadow: var(--nve-ref-shadow-100);\n  --width: 100%;\n  width: var(--width);\n  contain: initial;\n}\n\n:host([container='flat']),\n:host([container='inset']) {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-100);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-100);\n  --background: transparent;\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-muted);\n  --box-shadow: none;\n  --border-radius: 0;\n  --padding: 0;\n}\n\n:host([container='full']) {\n  --box-shadow: none;\n  --border-radius: 0;\n}\n\n:host([container='inset']) {\n  --border-bottom: 0;\n}\n\n:host([container='flat']:focus-within) {\n  --border-bottom: var(--nve-ref-border-width-md) solid var(--nve-ref-border-color-emphasis);\n}\n\n:host([status='accent']) {\n  --background: var(--nve-sys-support-accent-color);\n  --color: var(--nve-sys-text-white-color);\n}\n\n:host([status='accent']) ::slotted(nve-button),\n:host([status='accent']) ::slotted(nve-icon-button),\n:host([status='accent']) nve-icon-button {\n  --color: var(--nve-sys-text-white-color) !important;\n  --_icon-color: var(--nve-sys-text-white-color) !important;\n}\n\n:host([status='accent']) ::slotted([nve-text]) {\n  color: var(--nve-sys-text-white-color) !important;\n}\n\n[internal-host] {\n  background: var(--background);\n  color: var(--color);\n  padding: var(--padding);\n  min-height: var(--min-height);\n  border-radius: var(--border-radius);\n  border-bottom: var(--border-bottom);\n  box-shadow: var(--box-shadow);\n  width: var(--width);\n  gap: var(--gap);\n  display: flex;\n  align-items: center;\n}\n\n:host([orientation='vertical']) {\n  --padding: var(--nve-ref-size-100) 0;\n  --gap: var(--nve-ref-space-xs);\n  --width: fit-content;\n}\n\n:host([orientation='vertical']) [internal-host],\n:host([orientation='vertical']) slot {\n  flex-direction: column;\n  align-items: center;\n  margin: 0;\n}\n\n:host([orientation='vertical']) ::slotted(nve-divider) {\n  width: 100%;\n}\n\n[name='prefix'],\n[name='suffix'] {\n  display: none;\n  gap: var(--gap);\n  align-items: center;\n  justify-content: start;\n}\n\n[name='suffix'] {\n  justify-content: end;\n}\n\n:host(:state(has-prefix)) [name='prefix'],\n:host(:state(has-suffix)) [name='suffix'] {\n  display: flex;\n}\n\n::slotted(nve-combobox),\n::slotted(nve-search),\n::slotted(nve-input) {\n  --border-bottom: 0;\n  min-width: 20cqw;\n  flex: 1;\n}\n\n::slotted(nve-select) {\n  --border-bottom: 0;\n}\n\nslot {\n  min-height: inherit;\n}\n\nslot:not([name]) {\n  gap: var(--gap);\n  width: 100%;\n  display: flex;\n  align-items: center;\n  text-wrap: nowrap;\n  overflow: auto hidden;\n  scrollbar-color: var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);\n  scrollbar-width: var(--nve-sys-scrollbar-width);\n}\n\n:host([content='wrap']) slot:not([name]) {\n  gap: var(--gap);\n  width: 100%;\n  display: flex;\n  flex-wrap: wrap;\n  text-wrap: balance;\n  overflow-x: initial;\n}\n\n:host(:state(scrollbar)) slot:not([name]) {\n  /* stylelint-disable-next-line declaration-property-value-disallowed-list */\n  margin-block-end: -14px;\n}\n\n::slotted([nve-text]),\n::slotted(a),\n::slotted(span) {\n  text-wrap: nowrap !important;\n}\n"],"mappings":""}

package/dist/toolbar/toolbar2.js

@@ -1,12 +1,12 @@
 import { applySlotContentStates as e, hasHorizontalScrollBar as t } from "../internal/utils/dom.js";
 import { attachInternals as n } from "../internal/utils/a11y.js";
 import { statusStateStyles as r, supportStateStyles as i, useStyles as a } from "../internal/styles/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import s from "./toolbar.js";
 import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
 import { queryAssignedElements as d } from "lit/decorators/query-assigned-elements.js";
-//#region src/toolbar/toolbar.ts
+// src/toolbar/toolbar.ts
 var f = class extends c {
 	constructor(...e) {
 		super(...e), this.content = "scroll", this.orientation = "horizontal", this.#e = [];
@@ -21,7 +21,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-toolbar",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -85,7 +85,6 @@ o([u({
 	type: String,
 	reflect: !0
 })], f.prototype, "status", void 0), o([d({ slot: "prefix" })], f.prototype, "prefixElements", void 0), o([d({ slot: "suffix" })], f.prototype, "suffixElements", void 0), o([d()], f.prototype, "defaultElements", void 0);
-//#endregion
 export { f as Toolbar };
 
 //# sourceMappingURL=toolbar2.js.map

package/dist/toolbar/toolbar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar2.js","names":[],"sources":["../../src/toolbar/toolbar.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 type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  useStyles,\n  statusStateStyles,\n  supportStateStyles,\n  attachInternals,\n  applySlotContentStates,\n  hasHorizontalScrollBar\n} from '@nvidia-elements/core/internal';\nimport styles from './toolbar.css?inline';\n\n/**\n * @element nve-toolbar\n * @description A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.\n * @documentation https://nvidia.github.io/elements/docs/elements/toolbar/\n * @since 0.19.0\n * @entrypoint \\@nvidia-elements/core/toolbar\n * @slot - Primary buttons, inputs, and other toolbar controls.\n * @slot prefix - slot for prefix content\n * @slot suffix - slot for suffix content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --border-radius\n * @cssprop --gap\n * @cssprop --border-bottom\n * @cssprop --box-shadow\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\nexport class Toolbar extends LitElement implements ContainerElement {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-toolbar',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {};\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting elements within other containers or for a more muted style. Full applies when the element expands the full width of the viewport.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inset' | 'full';\n\n  /**\n   * Determines the primary content overflow behavior.\n   */\n  @property({ type: String, reflect: true }) content?: 'scroll' | 'wrap' = 'scroll';\n\n  /**\n   * Determines the orientation direction of the toolbar. Vertical toolbars support icon buttons only.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Visual treatment to represent accent color for interactive selections\n   */\n  @property({ type: String, reflect: true }) status: 'accent';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  get #scrollbox() {\n    return this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n  }\n\n  @queryAssignedElements({ slot: 'prefix' }) private prefixElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'suffix' }) private suffixElements!: HTMLElement[];\n\n  @queryAssignedElements() private defaultElements!: HTMLElement[];\n\n  get #slottedElements() {\n    return [...this.prefixElements, ...this.defaultElements, ...this.suffixElements];\n  }\n\n  render() {\n    return html`\n      <div internal-host @slotchange=${this.#slotchange}>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setupScrollbarListener();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateContainers();\n    this.#updateOrientation();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #slotchange(e: Event) {\n    applySlotContentStates(e.target as HTMLSlotElement, this);\n    this.#updateContainers();\n    this.#updateOrientation();\n    this.#setScrollbarState();\n  }\n\n  #setupScrollbarListener() {\n    this.#setScrollbarState();\n    const observer = new ResizeObserver(() => this.#setScrollbarState());\n    this.#observers.push(observer);\n    observer.observe(this);\n  }\n\n  #setScrollbarState() {\n    if (hasHorizontalScrollBar(this.#scrollbox as HTMLElement)) {\n      this._internals.states.add('scrollbar');\n    } else {\n      this._internals.states.delete('scrollbar');\n    }\n  }\n\n  #updateContainers() {\n    const slottedElements = this.#slottedElements as (HTMLElement & { container: string })[];\n    slottedElements\n      .filter(e =>\n        e.matches(\n          'nve-button-group, nve-input, nve-search, nve-combobox, nve-button, nve-select, nve-icon-button, nve-copy-button'\n        )\n      )\n      .forEach(e => (e.container = 'flat'));\n  }\n\n  #updateOrientation() {\n    const slottedElements = this.#slottedElements as (HTMLElement & { orientation: string })[];\n    slottedElements\n      .filter(e => e.matches('nve-divider'))\n      .forEach(divider => (divider.orientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal'));\n    slottedElements\n      .filter(e => e.matches('nve-button-group'))\n      .forEach(group => (group.orientation = this.orientation!));\n  }\n}\n"],"mappings":";;;;;;;;;AAsCA,IAAa,IAAb,cAA6B,EAAuC;;EAiCd,aAfqB,KAAA,UAAA,UAKY,KAAA,cAAA,cAUjC,KAAA,KAAA,CAAC;;;EAhCrC,KAAA,SAAA,EAAU;GAAC;GAAQ;GAAmB;EAAkB,CAAC;;;EAE9C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,CAAC;;CAyB7B;CAEA,IAAI,KAAa;EACf,OAAO,KAAK,WAAY,cAA+B,kBAAkB;CAC3E;CAQA,IAAI,KAAmB;EACrB,OAAO;GAAC,GAAG,KAAK;GAAgB,GAAG,KAAK;GAAiB,GAAG,KAAK;EAAc;CACjF;CAEA,SAAS;EACP,OAAO,CAAI,mCACwB,KAAK,GAAY;CAMtD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,aAAa,GAA6B;EAExC,AADA,MAAM,aAAa,CAAK,GACxB,KAAK,GAAwB;CAC/B;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQ,CAAK,GACnB,KAAK,GAAkB,GACvB,KAAK,GAAmB;CAC1B;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAK,GAAW,SAAQ,MAAY,EAAS,WAAW,CAAC;CAC3D;CAEA,GAAY,GAAU;EAIpB,AAHA,EAAuB,EAAE,QAA2B,IAAI,GACxD,KAAK,GAAkB,GACvB,KAAK,GAAmB,GACxB,KAAK,GAAmB;CAC1B;CAEA,KAA0B;EACxB,KAAK,GAAmB;EACxB,IAAM,IAAW,IAAI,qBAAqB,KAAK,GAAmB,CAAC;EAEnE,AADA,KAAK,GAAW,KAAK,CAAQ,GAC7B,EAAS,QAAQ,IAAI;CACvB;CAEA,KAAqB;EACnB,AAAI,EAAuB,KAAK,EAAyB,IACvD,KAAK,WAAW,OAAO,IAAI,WAAW,IAEtC,KAAK,WAAW,OAAO,OAAO,WAAW;CAE7C;CAEA,KAAoB;EAElB,KAD6B,GAE1B,QAAO,MACN,EAAE,QACA,iHACF,CACF,CAAC,CACA,SAAQ,MAAM,EAAE,YAAY,MAAO;CACxC;CAEA,KAAqB;EACnB,IAAM,IAAkB,KAAK;EAI7B,AAHA,EACG,QAAO,MAAK,EAAE,QAAQ,aAAa,CAAC,CAAC,CACrC,SAAQ,MAAY,EAAQ,cAAc,KAAK,gBAAgB,eAAe,aAAa,YAAa,GAC3G,EACG,QAAO,MAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,CAC1C,SAAQ,MAAU,EAAM,cAAc,KAAK,WAAa;CAC7D;AACF;AA9GG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAWxC,EAAA,CAAA,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA"}
+{"version":3,"file":"toolbar2.js","names":["styles","_decorate","__decorate","toolbar_default","Toolbar","LitElement","_args","#observers","useStyles","statusStateStyles","supportStateStyles","#scrollbox","#slottedElements","#slotchange","attachInternals","props","#setupScrollbarListener","#updateContainers","#updateOrientation","observer","applySlotContentStates","e","#setScrollbarState","hasHorizontalScrollBar","slottedElements","property","queryAssignedElements"],"sources":["../../src/toolbar/toolbar.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 type { ContainerElement } from '@nvidia-elements/core/internal';\nimport {\n  useStyles,\n  statusStateStyles,\n  supportStateStyles,\n  attachInternals,\n  applySlotContentStates,\n  hasHorizontalScrollBar\n} from '@nvidia-elements/core/internal';\nimport styles from './toolbar.css?inline';\n\n/**\n * @element nve-toolbar\n * @description A toolbar is a container for grouping a set of controls, such as buttons, icon buttons and combobox search.\n * @documentation https://nvidia.github.io/elements/docs/elements/toolbar/\n * @since 0.19.0\n * @entrypoint \\@nvidia-elements/core/toolbar\n * @slot - Primary buttons, inputs, and other toolbar controls.\n * @slot prefix - slot for prefix content\n * @slot suffix - slot for suffix content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --border-radius\n * @cssprop --gap\n * @cssprop --border-bottom\n * @cssprop --box-shadow\n * @cssprop --width\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/\n */\nexport class Toolbar extends LitElement implements ContainerElement {\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-toolbar',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {};\n\n  /**\n   * Determines the container styles of component. Flat applies when nesting elements within other containers or for a more muted style. Full applies when the element expands the full width of the viewport.\n   */\n  @property({ type: String, reflect: true }) container?: 'flat' | 'inset' | 'full';\n\n  /**\n   * Determines the primary content overflow behavior.\n   */\n  @property({ type: String, reflect: true }) content?: 'scroll' | 'wrap' = 'scroll';\n\n  /**\n   * Determines the orientation direction of the toolbar. Vertical toolbars support icon buttons only.\n   */\n  @property({ type: String, reflect: true }) orientation?: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Visual treatment to represent accent color for interactive selections\n   */\n  @property({ type: String, reflect: true }) status: 'accent';\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  #observers: (MutationObserver | ResizeObserver)[] = [];\n\n  get #scrollbox() {\n    return this.shadowRoot!.querySelector<HTMLSlotElement>('slot:not([name])');\n  }\n\n  @queryAssignedElements({ slot: 'prefix' }) private prefixElements!: HTMLElement[];\n\n  @queryAssignedElements({ slot: 'suffix' }) private suffixElements!: HTMLElement[];\n\n  @queryAssignedElements() private defaultElements!: HTMLElement[];\n\n  get #slottedElements() {\n    return [...this.prefixElements, ...this.defaultElements, ...this.suffixElements];\n  }\n\n  render() {\n    return html`\n      <div internal-host @slotchange=${this.#slotchange}>\n        <slot name=\"prefix\"></slot>\n        <slot></slot>\n        <slot name=\"suffix\"></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'toolbar';\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.#setupScrollbarListener();\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    this.#updateContainers();\n    this.#updateOrientation();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.#observers.forEach(observer => observer.disconnect());\n  }\n\n  #slotchange(e: Event) {\n    applySlotContentStates(e.target as HTMLSlotElement, this);\n    this.#updateContainers();\n    this.#updateOrientation();\n    this.#setScrollbarState();\n  }\n\n  #setupScrollbarListener() {\n    this.#setScrollbarState();\n    const observer = new ResizeObserver(() => this.#setScrollbarState());\n    this.#observers.push(observer);\n    observer.observe(this);\n  }\n\n  #setScrollbarState() {\n    if (hasHorizontalScrollBar(this.#scrollbox as HTMLElement)) {\n      this._internals.states.add('scrollbar');\n    } else {\n      this._internals.states.delete('scrollbar');\n    }\n  }\n\n  #updateContainers() {\n    const slottedElements = this.#slottedElements as (HTMLElement & { container: string })[];\n    slottedElements\n      .filter(e =>\n        e.matches(\n          'nve-button-group, nve-input, nve-search, nve-combobox, nve-button, nve-select, nve-icon-button, nve-copy-button'\n        )\n      )\n      .forEach(e => (e.container = 'flat'));\n  }\n\n  #updateOrientation() {\n    const slottedElements = this.#slottedElements as (HTMLElement & { orientation: string })[];\n    slottedElements\n      .filter(e => e.matches('nve-divider'))\n      .forEach(divider => (divider.orientation = this.orientation === 'horizontal' ? 'vertical' : 'horizontal'));\n    slottedElements\n      .filter(e => e.matches('nve-button-group'))\n      .forEach(group => (group.orientation = this.orientation!));\n  }\n}\n"],"mappings":";;;;;;;;;AAsCA,IAAaI,IAAb,cAA6BC,EAAuC;;EAiCd,A,aAfqB,KAAA,UAAA,UAKY,KAAA,cAAA,cAUjC,KAAAE,KAAA,CAAC;;;EAhCrC,KAAA,SAAAC,EAAU;GAACR;GAAQS;GAAmBC;EAAkB,CAAC;;;EAE9C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,CAAC;;CAyB7B;CAEA,IAAIC,KAAa;EACf,OAAO,KAAK,WAAY,cAA+B,kBAAkB;CAC3E;CAQA,IAAIC,KAAmB;EACrB,OAAO;GAAC,GAAG,KAAK;GAAgB,GAAG,KAAK;GAAiB,GAAG,KAAK;EAAc;CACjF;CAEA,SAAS;EACP,OAAO,CAAI,mCACwB,KAAKC,GAAY;CAMtD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,aAAa,GAA6B;EAExC,AADA,MAAM,aAAaC,CAAK,GACxB,KAAKC,GAAwB;CAC/B;CAEA,QAAQ,GAA6B;EAGnC,AAFA,MAAM,QAAQD,CAAK,GACnB,KAAKE,GAAkB,GACvB,KAAKC,GAAmB;CAC1B;CAEA,uBAAuB;EAErB,AADA,MAAM,qBAAqB,GAC3B,KAAKX,GAAW,SAAQ,MAAYY,EAAS,WAAW,CAAC;CAC3D;CAEA,GAAY,GAAU;EAIpB,AAHAC,EAAuBC,EAAE,QAA2B,IAAI,GACxD,KAAKJ,GAAkB,GACvB,KAAKC,GAAmB,GACxB,KAAKI,GAAmB;CAC1B;CAEA,KAA0B;EACxB,KAAKA,GAAmB;EACxB,IAAMH,IAAW,IAAI,qBAAqB,KAAKG,GAAmB,CAAC;EAEnE,AADA,KAAKf,GAAW,KAAKY,CAAQ,GAC7BA,EAAS,QAAQ,IAAI;CACvB;CAEA,KAAqB;EACnB,AAAII,EAAuB,KAAKZ,EAAyB,IACvD,KAAK,WAAW,OAAO,IAAI,WAAW,IAEtC,KAAK,WAAW,OAAO,OAAO,WAAW;CAE7C;CAEA,KAAoB;EAElB,KAD6BC,GAE1B,QAAO,MACN,EAAE,QACA,iHACF,CACF,CAAC,CACA,SAAQ,MAAM,EAAE,YAAY,MAAO;CACxC;CAEA,KAAqB;EACnB,IAAMY,IAAkB,KAAKZ;EAI7B,AAHAY,EACG,QAAO,MAAK,EAAE,QAAQ,aAAa,CAAC,CAAC,CACrC,SAAQ,MAAY,EAAQ,cAAc,KAAK,gBAAgB,eAAe,aAAa,YAAa,GAC3GA,EACG,QAAO,MAAK,EAAE,QAAQ,kBAAkB,CAAC,CAAC,CAC1C,SAAQ,MAAU,EAAM,cAAc,KAAK,WAAa;CAC7D;AACF;AA9GGvB,EAAA,CAAAwB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAArB,EAAA,WAAA,aAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAwB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAArB,EAAA,WAAA,WAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAwB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAArB,EAAA,WAAA,eAAA,KAAA,CAAA,GAKxCH,EAAA,CAAAwB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAArB,EAAA,WAAA,UAAA,KAAA,CAAA,GAWxCH,EAAA,CAAAyB,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,GAAAtB,EAAA,WAAA,kBAAA,KAAA,CAAA,GAExCH,EAAA,CAAAyB,EAAsB,EAAE,MAAM,SAAS,CAAC,CAAA,GAAAtB,EAAA,WAAA,kBAAA,KAAA,CAAA,GAExCH,EAAA,CAAAyB,EAAsB,CAAA,GAAAtB,EAAA,WAAA,mBAAA,KAAA,CAAA"}

package/dist/tooltip/define.js

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

package/dist/tooltip/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/tooltip/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 { Tooltip } from '@nvidia-elements/core/tooltip';\n\ndefine(Tooltip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tooltip': Tooltip;\n  }\n}\n"],"mappings":";;;AAMA,EAAO,CAAO"}
+{"version":3,"file":"define.js","names":["define","Tooltip"],"sources":["../../src/tooltip/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 { Tooltip } from '@nvidia-elements/core/tooltip';\n\ndefine(Tooltip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-tooltip': Tooltip;\n  }\n}\n"],"mappings":";;;AAMAA,EAAOC,CAAO"}

package/dist/tooltip/index.js

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

package/dist/tooltip/tooltip.examples.js

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

package/dist/tooltip/tooltip.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.examples.js","names":[],"sources":["../../src/tooltip/tooltip.examples.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, css, LitElement } from 'lit';\nimport type { Ref} from 'lit/directives/ref.js';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/toast/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/badge/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport type { Badge } from '@nvidia-elements/core/badge';\n\nexport default {\n  title: 'Elements/Tooltip',\n  component: 'nve-tooltip',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic tooltip triggered by popovertarget attribute. Use for providing brief, contextual information on hover or focus without cluttering the interface.\n */\nexport const Default = {\n  render: () => html`\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip using anchor attribute to reference the trigger element. Use when you need to explicitly connect tooltips to their triggers by ID for better control over relationships.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\">hello there</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip positioning options for optimal placement relative to trigger elements. Use different positions based on available screen space and content layout to ensure tooltips remain visible and don't obscure important content.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\" position=\"top\">top</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"right\">right</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"bottom\">bottom</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"left\">left</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Fine-grained tooltip alignment combined with positioning for precise placement control. Use to align tooltips to specific edges of trigger elements, improving visual hierarchy and reducing overlap with other UI elements.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-tooltip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"top\">top center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-tooltip>\n\n<nve-tooltip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\">right center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-tooltip>\n\n<nve-tooltip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\">bottom center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-tooltip>\n\n<nve-tooltip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\">left center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-tooltip>\n\n<nve-card id=\"card\" style=\"width: 400px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Event handling for tooltip lifecycle events. Useful for adding custom behavior when tooltip state changes.\n */\nexport const Events = {\n  render: () => html`\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n<script type=\"module\">\n  const tooltip = document.querySelector('nve-tooltip');\n  tooltip.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  tooltip.addEventListener('toggle', () => console.log('toggle'));\n  tooltip.addEventListener('close', () => console.log('close'));\n  tooltip.addEventListener('open', () => console.log('open'));\n</script>\n  `\n};\n\n/**\n * @summary Tooltip with structured content including title and body text. Use for tooltips that need hierarchical information, but keep content brief to maintain tooltip's lightweight nature.\n */\nexport const Content = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\" position=\"bottom\">\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content</p>\n</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Single tooltip shared across many triggers with dynamic content updates. Use to reduce DOM nodes and improve performance when many similar elements need contextual help, updating tooltip content based on which trigger activated it.\n */\nexport const DynamicTrigger = {\n  render: () => html`\n<nve-tooltip id=\"dynamic-popover\"></nve-tooltip>\n\n<div nve-layout=\"row gap:sm align:center\">\n  <nve-button interestfor=\"dynamic-popover\">one</nve-button>\n  <nve-button interestfor=\"dynamic-popover\">two</nve-button>\n  <nve-button interestfor=\"dynamic-popover\">three</nve-button>\n</div>\n\n<script type=\"module\">\n  document.querySelector('#dynamic-popover').addEventListener('toggle', e => {\n    if (e.newState === 'open') {\n      e.target.textContent = 'tooltip ' + e.source.textContent;\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Tooltip as a hint icon pattern for providing contextual help next to labels or headings. Perfect for explaining features or terminology without cluttering the main interface, allowing users to discover information on demand.\n */\nexport const Hint = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <h2 nve-text=\"heading sm\">Preview</h2>\n  <nve-icon-button container=\"flat\" icon-name=\"information-circle\" interestfor=\"hint\"></nve-icon-button>\n  <nve-tooltip id=\"hint\" position=\"right\">Preview in progress CI tasks for the active host</nve-tooltip>\n</div>\n  `\n};\n\n/**\n * @summary Tooltip with muted status variant for subtle, low-emphasis contextual information. Use muted tooltips when the information is supplementary and shouldn't draw attention away from primary content.\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip anchor=\"btn\">default status</nve-tooltip>\n  <nve-tooltip anchor=\"btn\" position=\"bottom\" status=\"muted\">muted status</nve-tooltip>\n  <nve-button id=\"btn\">button</nve-button>\n</div>\n  `\n};\n\n/**\n * @summary Tooltip with constrained width for controlled text wrapping. Use when tooltip content is longer than a single line, but prefer keeping tooltips brief for better scannability and user experience.\n * @tags test-case\n */\nexport const Wrap = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\" style=\"--width: 200px\">\n  Tooltips provide contextual help for interface elements. Keep content brief and descriptive to help users understand available actions.\n</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip anchoring to a dynamically created anchor element.\n * @tags test-case\n */\nexport const AsyncTrigger = {\n  render: () => html`\n<div id=\"async-trigger-demo\">\n  <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  <template><nve-button interestfor=\"tooltip\">button</nve-button></template>\n</div>\n<script type=\"module\">\n  import '@nvidia-elements/core/button/define.js';\n  import '@nvidia-elements/core/tooltip/define.js';\n  const template = document.querySelector('#async-trigger-demo template');\n  const instance = template.content.cloneNode(true);\n  setTimeout(() => {\n    document.querySelector('#async-trigger-demo').appendChild(instance);\n  }, 1000);\n</script>\n  `\n};\n\n/**\n * @summary Tooltip with absolute positioning strategy for precise placement in complex layouts. Use when default fixed positioning causes issues with scrolling containers or nested positioning contexts.\n * @tags test-case\n */\nexport const PositionStrategyAbsolute = {\n  render: () => html`\n<nve-button interestfor=\"tooltip\">button</nve-button>\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  `\n};\n\n/**\n * @summary Tooltip behavior within scrollable containers with automatic repositioning. Tooltips maintain visibility and proper positioning even when anchor elements scroll, ensuring consistent user experience in scrollable interfaces.\n * @tags test-case\n */\nexport const ScrollContainer = {\n  render: () => html`\n<style>\n  #scroll-container {\n    display: flex;\n    flex-direction: column;\n    height: 300px;\n    width: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n    margin: 20vh;\n\n    & > button {\n      min-height: 50px;\n      width: 100%;\n    }\n  }\n</style>\n<section id=\"scroll-container\">\n  <button interestfor=\"tooltip\">1</button>\n  <button interestfor=\"tooltip\">2</button>\n  <button interestfor=\"tooltip\">3</button>\n  <button interestfor=\"tooltip\">4</button>\n  <button interestfor=\"tooltip\">5</button>\n  <button interestfor=\"tooltip\">6</button>\n  <button interestfor=\"tooltip\">7</button>\n  <button interestfor=\"tooltip\">8</button>\n  <button interestfor=\"tooltip\">9</button>\n  <button interestfor=\"tooltip\">10</button>\n</section>\n<nve-tooltip id=\"tooltip\" position=\"left\">hello there</nve-tooltip>\n  `\n};\n\n@customElement('dynamic-anchor-position-demo')\nclass DynamicAnchorPositionDemo extends LitElement { /* eslint no-unused-vars: 0 */\n  static styles = [css`\n    :host {\n      position: relative;\n      width: 97vw;\n      height: 97vh;\n      display: block;\n      left: 0;\n      transition: left 1s linear;\n    }\n\n    #anchor {\n      top: 50vh;\n      left: 50vw;\n      width: 1px;\n      height: 1px;\n      position: absolute;\n    }\n  `];\n\n  #badge: Ref<Badge> = createRef();\n\n  render() {\n    return html`\n      <div ${ref(this.#badge)} id=\"anchor\"></div>\n      <nve-tooltip anchor=\"anchor\">tooltip</nve-tooltip>\n    `;\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.addEventListener('mousemove', e => this.#badge.value.style.inset = `${e.clientY - 15}px auto auto ${e.clientX - 15}px`);\n  }\n}\n\n/**\n * @summary Tooltip that follows a dynamically positioned anchor element. Real-time tooltip repositioning as the anchor moves, useful for cursor-following tooltips or drag-and-drop interfaces.\n * @deprecated\n * @tags test-case\n */\nexport const DynamicAnchorPosition = {\n  render: () => html`\n<dynamic-anchor-position-demo></dynamic-anchor-position-demo>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy pattern for dynamic tooltip triggers using behavior-trigger attribute. Programmatic anchor and trigger reassignment for backward compatibility with older implementations.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyDynamicTrigger = {\n  render: () => html`\n<div id=\"dynamic-trigger-demo\" nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip behavior-trigger hidden>hello there</nve-tooltip>\n  <div nve-layout=\"row gap:xl\">\n    <nve-button>button</nve-button>\n    <nve-button>button</nve-button>\n    <nve-button>button</nve-button>\n  </div>\n  <script type=\"module\">\n    const tooltip = document.querySelector('#dynamic-trigger-demo nve-tooltip');\n    document.querySelector('#dynamic-trigger-demo').addEventListener('mouseover', e => {\n      if (e.target.tagName === 'NVE-BUTTON') {\n        tooltip.anchor = e.target;\n        tooltip.trigger = e.target;\n      }\n    });\n  </script>\n</div>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy trigger pattern with manual event handling and hidden attribute management. Older implementation approach for backward compatibility; prefer using popovertarget for new implementations.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyTrigger = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-tooltip>\n  <nve-button id=\"action-btn\">button</nve-button>\n  <script type=\"module\">\n    const tooltip = document.querySelector('nve-tooltip[anchor=\"action-btn\"]');\n    tooltip.addEventListener('close', () => tooltip.hidden = true);\n    tooltip.addEventListener('open', () => tooltip.hidden = false);\n  </script>\n</div>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy behavior-trigger pattern for automatic tooltip lifecycle management. Deprecated approach that auto-manages visibility, prefer modern popovertarget API for new implementations.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<nve-tooltip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-tooltip>\n<nve-button id=\"action-btn\">button</nve-button>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy implementation combining behavior-trigger with open-delay for many tooltips. Older pattern for delayed tooltip appearance; prefer modern popovertarget with open-delay attribute.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyOpenDelay = {\n  render: () => html`\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-1\" trigger=\"delay-tooltip-1\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-1\">button</nve-button>\n\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-2\" trigger=\"delay-tooltip-2\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-2\">button</nve-button>\n\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-3\" trigger=\"delay-tooltip-3\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-3\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip functionality within modal dialogs with many triggers. Ensures tooltips work correctly in layered UI contexts, maintaining proper stacking order and interaction behavior within modal overlays.\n * @tags test-case\n */\nexport const NestedDynamic = {\n  render: () => html`\n<nve-button popovertarget=\"dialog\">open</nve-button>\n<nve-dialog id=\"dialog\" size=\"lg\" modal closable>\n  <nve-button interestfor=\"tooltip\">button</nve-button>\n  <section>\n    <button interestfor=\"tooltip\">button</button>\n  </section>\n</nve-dialog>\n<nve-tooltip id=\"tooltip\">test</nve-tooltip>\n  `\n};\n\n/**\n * @summary Button combining interestfor and popovertarget for coordinated tooltip and dropdown behavior.\n */\nexport const PopoverInterest = {\n  render: () => html`\n<nve-button interestfor=\"tooltip\" popovertarget=\"dropdown\">Button</nve-button>\n<nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  `\n};\n\n/**\n * @summary Tooltip functionality using interest invokers to control tooltip visibility on hover and focus.\n * @tags test-case\n */\nexport const InterestInvokers = {\n  render: () => html`\n<section nve-layout=\"row gap:md align:center\">\n  <button popovertarget=\"dropdown\" interestfor=\"tooltip\">open</button>\n  <nve-button popovertarget=\"dropdown\" interestfor=\"tooltip\">open</nve-button>\n  <nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  <nve-tooltip id=\"tooltip\">tooltip content</nve-tooltip>\n\n  <div id=\"div\">static</div>\n  <nve-tooltip trigger=\"div\" hidden>static</nve-tooltip>\n</section>\n  `\n};\n\n/**\n * @summary Tooltip with delayed appearance to reduce visual noise during quick mouse movements. Use open-delay for better user experience when tooltips are dense, preventing tooltips from flashing during cursor transitions.\n * @deprecated\n * @tags test-case\n */\nexport const OpenDelay = {\n  render: () => html`\n<nve-tooltip id=\"delay-tooltip\" open-delay=\"500\">delayed tooltip</nve-tooltip>\n<nve-button interestfor=\"delay-tooltip\">button</nve-button>\n  `\n};\n\n/**\n * @summary Legacy behavior that allowed tooltip triggering via popovertarget attribute instead of interestfor attribute with hover events.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyPopoverTarget = {\n  render: () => html`\n  <nve-button popovertarget=\"tooltip\">open</nve-button>\n  <nve-tooltip id=\"tooltip\">tooltip content</nve-tooltip>\n  `\n};\n"],"mappings":";AAIA,IAAA,IAAe"}
+{"version":3,"file":"tooltip.examples.js","names":["tooltip_examples_default"],"sources":["../../src/tooltip/tooltip.examples.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, css, LitElement } from 'lit';\nimport type { Ref} from 'lit/directives/ref.js';\nimport { ref, createRef } from 'lit/directives/ref.js';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\nimport '@nvidia-elements/core/toast/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/badge/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\nimport '@nvidia-elements/core/dialog/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport type { Badge } from '@nvidia-elements/core/badge';\n\nexport default {\n  title: 'Elements/Tooltip',\n  component: 'nve-tooltip',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic tooltip triggered by popovertarget attribute. Use for providing brief, contextual information on hover or focus without cluttering the interface.\n */\nexport const Default = {\n  render: () => html`\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip using anchor attribute to reference the trigger element. Use when you need to explicitly connect tooltips to their triggers by ID for better control over relationships.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\">hello there</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip positioning options for optimal placement relative to trigger elements. Use different positions based on available screen space and content layout to ensure tooltips remain visible and don't obscure important content.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\" position=\"top\">top</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"right\">right</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"bottom\">bottom</nve-tooltip>\n<nve-tooltip anchor=\"btn\" position=\"left\">left</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Fine-grained tooltip alignment combined with positioning for precise placement control. Use to align tooltips to specific edges of trigger elements, improving visual hierarchy and reducing overlap with other UI elements.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<nve-tooltip anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"top\">top center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-tooltip>\n\n<nve-tooltip anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\">right center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-tooltip>\n\n<nve-tooltip anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\">bottom center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-tooltip>\n\n<nve-tooltip anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\">left center</nve-tooltip>\n<nve-tooltip anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-tooltip>\n\n<nve-card id=\"card\" style=\"width: 400px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Event handling for tooltip lifecycle events. Useful for adding custom behavior when tooltip state changes.\n */\nexport const Events = {\n  render: () => html`\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n<nve-button interestfor=\"tooltip\">button</nve-button>\n<script type=\"module\">\n  const tooltip = document.querySelector('nve-tooltip');\n  tooltip.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  tooltip.addEventListener('toggle', () => console.log('toggle'));\n  tooltip.addEventListener('close', () => console.log('close'));\n  tooltip.addEventListener('open', () => console.log('open'));\n</script>\n  `\n};\n\n/**\n * @summary Tooltip with structured content including title and body text. Use for tooltips that need hierarchical information, but keep content brief to maintain tooltip's lightweight nature.\n */\nexport const Content = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\" position=\"bottom\">\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content</p>\n</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Single tooltip shared across many triggers with dynamic content updates. Use to reduce DOM nodes and improve performance when many similar elements need contextual help, updating tooltip content based on which trigger activated it.\n */\nexport const DynamicTrigger = {\n  render: () => html`\n<nve-tooltip id=\"dynamic-popover\"></nve-tooltip>\n\n<div nve-layout=\"row gap:sm align:center\">\n  <nve-button interestfor=\"dynamic-popover\">one</nve-button>\n  <nve-button interestfor=\"dynamic-popover\">two</nve-button>\n  <nve-button interestfor=\"dynamic-popover\">three</nve-button>\n</div>\n\n<script type=\"module\">\n  document.querySelector('#dynamic-popover').addEventListener('toggle', e => {\n    if (e.newState === 'open') {\n      e.target.textContent = 'tooltip ' + e.source.textContent;\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Tooltip as a hint icon pattern for providing contextual help next to labels or headings. Perfect for explaining features or terminology without cluttering the main interface, allowing users to discover information on demand.\n */\nexport const Hint = {\n  render: () => html`\n<div nve-layout=\"row gap:xs align:vertical-center\">\n  <h2 nve-text=\"heading sm\">Preview</h2>\n  <nve-icon-button container=\"flat\" icon-name=\"information-circle\" interestfor=\"hint\"></nve-icon-button>\n  <nve-tooltip id=\"hint\" position=\"right\">Preview in progress CI tasks for the active host</nve-tooltip>\n</div>\n  `\n};\n\n/**\n * @summary Tooltip with muted status variant for subtle, low-emphasis contextual information. Use muted tooltips when the information is supplementary and shouldn't draw attention away from primary content.\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip anchor=\"btn\">default status</nve-tooltip>\n  <nve-tooltip anchor=\"btn\" position=\"bottom\" status=\"muted\">muted status</nve-tooltip>\n  <nve-button id=\"btn\">button</nve-button>\n</div>\n  `\n};\n\n/**\n * @summary Tooltip with constrained width for controlled text wrapping. Use when tooltip content is longer than a single line, but prefer keeping tooltips brief for better scannability and user experience.\n * @tags test-case\n */\nexport const Wrap = {\n  render: () => html`\n<nve-tooltip anchor=\"btn\" style=\"--width: 200px\">\n  Tooltips provide contextual help for interface elements. Keep content brief and descriptive to help users understand available actions.\n</nve-tooltip>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip anchoring to a dynamically created anchor element.\n * @tags test-case\n */\nexport const AsyncTrigger = {\n  render: () => html`\n<div id=\"async-trigger-demo\">\n  <nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  <template><nve-button interestfor=\"tooltip\">button</nve-button></template>\n</div>\n<script type=\"module\">\n  import '@nvidia-elements/core/button/define.js';\n  import '@nvidia-elements/core/tooltip/define.js';\n  const template = document.querySelector('#async-trigger-demo template');\n  const instance = template.content.cloneNode(true);\n  setTimeout(() => {\n    document.querySelector('#async-trigger-demo').appendChild(instance);\n  }, 1000);\n</script>\n  `\n};\n\n/**\n * @summary Tooltip with absolute positioning strategy for precise placement in complex layouts. Use when default fixed positioning causes issues with scrolling containers or nested positioning contexts.\n * @tags test-case\n */\nexport const PositionStrategyAbsolute = {\n  render: () => html`\n<nve-button interestfor=\"tooltip\">button</nve-button>\n<nve-tooltip id=\"tooltip\">hello there</nve-tooltip>\n  `\n};\n\n/**\n * @summary Tooltip behavior within scrollable containers with automatic repositioning. Tooltips maintain visibility and proper positioning even when anchor elements scroll, ensuring consistent user experience in scrollable interfaces.\n * @tags test-case\n */\nexport const ScrollContainer = {\n  render: () => html`\n<style>\n  #scroll-container {\n    display: flex;\n    flex-direction: column;\n    height: 300px;\n    width: 200px;\n    overflow-y: auto;\n    border: 1px solid #ccc;\n    margin: 20vh;\n\n    & > button {\n      min-height: 50px;\n      width: 100%;\n    }\n  }\n</style>\n<section id=\"scroll-container\">\n  <button interestfor=\"tooltip\">1</button>\n  <button interestfor=\"tooltip\">2</button>\n  <button interestfor=\"tooltip\">3</button>\n  <button interestfor=\"tooltip\">4</button>\n  <button interestfor=\"tooltip\">5</button>\n  <button interestfor=\"tooltip\">6</button>\n  <button interestfor=\"tooltip\">7</button>\n  <button interestfor=\"tooltip\">8</button>\n  <button interestfor=\"tooltip\">9</button>\n  <button interestfor=\"tooltip\">10</button>\n</section>\n<nve-tooltip id=\"tooltip\" position=\"left\">hello there</nve-tooltip>\n  `\n};\n\n@customElement('dynamic-anchor-position-demo')\nclass DynamicAnchorPositionDemo extends LitElement { /* eslint no-unused-vars: 0 */\n  static styles = [css`\n    :host {\n      position: relative;\n      width: 97vw;\n      height: 97vh;\n      display: block;\n      left: 0;\n      transition: left 1s linear;\n    }\n\n    #anchor {\n      top: 50vh;\n      left: 50vw;\n      width: 1px;\n      height: 1px;\n      position: absolute;\n    }\n  `];\n\n  #badge: Ref<Badge> = createRef();\n\n  render() {\n    return html`\n      <div ${ref(this.#badge)} id=\"anchor\"></div>\n      <nve-tooltip anchor=\"anchor\">tooltip</nve-tooltip>\n    `;\n  }\n\n  firstUpdated(props: PropertyValues<this>) {\n    super.firstUpdated(props);\n    this.addEventListener('mousemove', e => this.#badge.value.style.inset = `${e.clientY - 15}px auto auto ${e.clientX - 15}px`);\n  }\n}\n\n/**\n * @summary Tooltip that follows a dynamically positioned anchor element. Real-time tooltip repositioning as the anchor moves, useful for cursor-following tooltips or drag-and-drop interfaces.\n * @deprecated\n * @tags test-case\n */\nexport const DynamicAnchorPosition = {\n  render: () => html`\n<dynamic-anchor-position-demo></dynamic-anchor-position-demo>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy pattern for dynamic tooltip triggers using behavior-trigger attribute. Programmatic anchor and trigger reassignment for backward compatibility with older implementations.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyDynamicTrigger = {\n  render: () => html`\n<div id=\"dynamic-trigger-demo\" nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip behavior-trigger hidden>hello there</nve-tooltip>\n  <div nve-layout=\"row gap:xl\">\n    <nve-button>button</nve-button>\n    <nve-button>button</nve-button>\n    <nve-button>button</nve-button>\n  </div>\n  <script type=\"module\">\n    const tooltip = document.querySelector('#dynamic-trigger-demo nve-tooltip');\n    document.querySelector('#dynamic-trigger-demo').addEventListener('mouseover', e => {\n      if (e.target.tagName === 'NVE-BUTTON') {\n        tooltip.anchor = e.target;\n        tooltip.trigger = e.target;\n      }\n    });\n  </script>\n</div>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy trigger pattern with manual event handling and hidden attribute management. Older implementation approach for backward compatibility; prefer using popovertarget for new implementations.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyTrigger = {\n  render: () => html`\n<div nve-layout=\"row align:center\" style=\"height: 250px\">\n  <nve-tooltip anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-tooltip>\n  <nve-button id=\"action-btn\">button</nve-button>\n  <script type=\"module\">\n    const tooltip = document.querySelector('nve-tooltip[anchor=\"action-btn\"]');\n    tooltip.addEventListener('close', () => tooltip.hidden = true);\n    tooltip.addEventListener('open', () => tooltip.hidden = false);\n  </script>\n</div>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy behavior-trigger pattern for automatic tooltip lifecycle management. Deprecated approach that auto-manages visibility, prefer modern popovertarget API for new implementations.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  render: () => html`\n<nve-tooltip behavior-trigger anchor=\"action-btn\" trigger=\"action-btn\" hidden>hello there</nve-tooltip>\n<nve-button id=\"action-btn\">button</nve-button>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy implementation combining behavior-trigger with open-delay for many tooltips. Older pattern for delayed tooltip appearance; prefer modern popovertarget with open-delay attribute.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyOpenDelay = {\n  render: () => html`\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-1\" trigger=\"delay-tooltip-1\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-1\">button</nve-button>\n\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-2\" trigger=\"delay-tooltip-2\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-2\">button</nve-button>\n\n<nve-tooltip behavior-trigger anchor=\"delay-tooltip-3\" trigger=\"delay-tooltip-3\" open-delay=\"500\" hidden>delayed tooltip</nve-tooltip>\n<nve-button id=\"delay-tooltip-3\">button</nve-button>\n  `\n};\n\n/**\n * @summary Tooltip functionality within modal dialogs with many triggers. Ensures tooltips work correctly in layered UI contexts, maintaining proper stacking order and interaction behavior within modal overlays.\n * @tags test-case\n */\nexport const NestedDynamic = {\n  render: () => html`\n<nve-button popovertarget=\"dialog\">open</nve-button>\n<nve-dialog id=\"dialog\" size=\"lg\" modal closable>\n  <nve-button interestfor=\"tooltip\">button</nve-button>\n  <section>\n    <button interestfor=\"tooltip\">button</button>\n  </section>\n</nve-dialog>\n<nve-tooltip id=\"tooltip\">test</nve-tooltip>\n  `\n};\n\n/**\n * @summary Button combining interestfor and popovertarget for coordinated tooltip and dropdown behavior.\n */\nexport const PopoverInterest = {\n  render: () => html`\n<nve-button interestfor=\"tooltip\" popovertarget=\"dropdown\">Button</nve-button>\n<nve-tooltip id=\"tooltip\">tooltip</nve-tooltip>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  `\n};\n\n/**\n * @summary Tooltip functionality using interest invokers to control tooltip visibility on hover and focus.\n * @tags test-case\n */\nexport const InterestInvokers = {\n  render: () => html`\n<section nve-layout=\"row gap:md align:center\">\n  <button popovertarget=\"dropdown\" interestfor=\"tooltip\">open</button>\n  <nve-button popovertarget=\"dropdown\" interestfor=\"tooltip\">open</nve-button>\n  <nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  <nve-tooltip id=\"tooltip\">tooltip content</nve-tooltip>\n\n  <div id=\"div\">static</div>\n  <nve-tooltip trigger=\"div\" hidden>static</nve-tooltip>\n</section>\n  `\n};\n\n/**\n * @summary Tooltip with delayed appearance to reduce visual noise during quick mouse movements. Use open-delay for better user experience when tooltips are dense, preventing tooltips from flashing during cursor transitions.\n * @deprecated\n * @tags test-case\n */\nexport const OpenDelay = {\n  render: () => html`\n<nve-tooltip id=\"delay-tooltip\" open-delay=\"500\">delayed tooltip</nve-tooltip>\n<nve-button interestfor=\"delay-tooltip\">button</nve-button>\n  `\n};\n\n/**\n * @summary Legacy behavior that allowed tooltip triggering via popovertarget attribute instead of interestfor attribute with hover events.\n * @deprecated\n * @tags test-case\n */\nexport const LegacyPopoverTarget = {\n  render: () => html`\n  <nve-button popovertarget=\"tooltip\">open</nve-button>\n  <nve-tooltip id=\"tooltip\">tooltip content</nve-tooltip>\n  `\n};\n"],"mappings":";AAIA,IAAAA,IAAe"}

package/dist/tooltip/tooltip.js

@@ -1,6 +1,5 @@
-//#region src/tooltip/tooltip.css?inline
+// src/tooltip/tooltip.css?inline
 var e = ":host{--nve-sys-layer-popover-arrow-padding: 6px;--nve-sys-layer-popover-arrow-offset: 2px;--nve-sys-layer-popover-offset: 2px;--nve-sys-interaction-color: var(--color);--border-radius: var(--nve-ref-border-radius-sm);--border: 0;--background: var(--nve-sys-layer-popover-background);--color: var(--nve-sys-layer-popover-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-300);--box-shadow: var(--nve-ref-shadow-500);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-regular);--arrow-transform: translate(0, -2px) rotate(-45deg);--width: max-content;--height: initial;box-shadow:var(--box-shadow)}:host([status=\"muted\"]){--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color)}[internal-host]{padding:var(--padding);border-radius:var(--border-radius);background:var(--background);color:var(--color);font-size:var(--font-size);font-weight:var(--font-weight);width:var(--width);height:var(--height);border:var(--border);white-space:initial}[internal-host]:has(nve-icon-button){padding-inline-end:var(--nve-ref-size-800)}.arrow{width:var(--nve-ref-size-300);height:var(--nve-ref-size-300);background:var(--background);transform:var(--arrow-transform);border-radius:var(--nve-ref-size-50);position:absolute}nve-icon-button{--color: inherit;position:absolute;inset-block-start:var(--nve-ref-size-50);inset-inline-end:var(--nve-ref-size-50)}::slotted([nve-text]){color:inherit!important}:host([position*=\"top\"]){--arrow-transform: translate(0, -2px) rotate(-45deg)}:host([position*=\"right\"]){--arrow-transform: translate(2px, 0) rotate(45deg)}:host([position*=\"bottom\"]){--arrow-transform: translate(0, 2px) rotate(45deg)}:host([position*=\"left\"]){--arrow-transform: translate(-2px, 0) rotate(45deg)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../src/tooltip/tooltip.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  --nve-sys-layer-popover-arrow-padding: 6px;\n  --nve-sys-layer-popover-arrow-offset: 2px;\n  --nve-sys-layer-popover-offset: 2px;\n  --nve-sys-interaction-color: var(--color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: 0;\n  --background: var(--nve-sys-layer-popover-background);\n  --color: var(--nve-sys-layer-popover-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n  --box-shadow: var(--nve-ref-shadow-500);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n  --width: max-content;\n  --height: initial;\n  box-shadow: var(--box-shadow);\n}\n\n:host([status='muted']) {\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  width: var(--width);\n  height: var(--height);\n  border: var(--border);\n  white-space: initial;\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-800);\n}\n\n.arrow {\n  width: var(--nve-ref-size-300);\n  height: var(--nve-ref-size-300);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-radius: var(--nve-ref-size-50);\n  position: absolute;\n}\n\nnve-icon-button {\n  --color: inherit;\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-50);\n  inset-inline-end: var(--nve-ref-size-50);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, 2px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n"],"mappings":""}
+{"version":3,"file":"tooltip.js","names":["tooltip_default"],"sources":["../../src/tooltip/tooltip.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  --nve-sys-layer-popover-arrow-padding: 6px;\n  --nve-sys-layer-popover-arrow-offset: 2px;\n  --nve-sys-layer-popover-offset: 2px;\n  --nve-sys-interaction-color: var(--color);\n  --border-radius: var(--nve-ref-border-radius-sm);\n  --border: 0;\n  --background: var(--nve-sys-layer-popover-background);\n  --color: var(--nve-sys-layer-popover-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-300);\n  --box-shadow: var(--nve-ref-shadow-500);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-regular);\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n  --width: max-content;\n  --height: initial;\n  box-shadow: var(--box-shadow);\n}\n\n:host([status='muted']) {\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  background: var(--background);\n  color: var(--color);\n  font-size: var(--font-size);\n  font-weight: var(--font-weight);\n  width: var(--width);\n  height: var(--height);\n  border: var(--border);\n  white-space: initial;\n}\n\n[internal-host]:has(nve-icon-button) {\n  padding-inline-end: var(--nve-ref-size-800);\n}\n\n.arrow {\n  width: var(--nve-ref-size-300);\n  height: var(--nve-ref-size-300);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-radius: var(--nve-ref-size-50);\n  position: absolute;\n}\n\nnve-icon-button {\n  --color: inherit;\n  position: absolute;\n  inset-block-start: var(--nve-ref-size-50);\n  inset-inline-end: var(--nve-ref-size-50);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, 2px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n"],"mappings":""}

package/dist/tooltip/tooltip2.js

@@ -3,12 +3,12 @@ import { attachInternals as t } from "../internal/utils/a11y.js";
 import { TypeNativePopoverController as n } from "../internal/controllers/type-native-popover.controller.js";
 import { useStyles as r } from "../internal/styles/index.js";
 import { popoverStyles as i } from "../internal/styles/popover2.js";
-import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import o from "./tooltip.js";
 import { LitElement as s, html as c } from "lit";
 import { property as l } from "lit/decorators/property.js";
 import { query as u } from "lit/decorators/query.js";
-//#region src/tooltip/tooltip.ts
+// src/tooltip/tooltip.ts
 var d = class extends s {
 	constructor(...e) {
 		super(...e), this.position = "top", this.popoverType = "hint", this.typeNativePopoverController = new n(this);
@@ -19,7 +19,7 @@ var d = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-tooltip",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	render() {
@@ -46,7 +46,6 @@ a([l({ type: String })], d.prototype, "anchor", void 0), a([l({ type: String })]
 	type: Number,
 	attribute: "open-delay"
 })], d.prototype, "openDelay", void 0), a([u(".arrow")], d.prototype, "popoverArrow", void 0), d = a([e({ excessiveInstanceLimit: 50 })], d);
-//#endregion
 export { d as Tooltip };
 
 //# sourceMappingURL=tooltip2.js.map