@nvidia-elements/core 2.20.0 → 2.20.2

package/dist/dialog/dialog.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.examples.js","names":[],"sources":["../../src/dialog/dialog.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/dialog/define.js';\nimport '@nvidia-elements/core/accordion/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Dialog',\n  component: 'nve-dialog',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic modal dialog for focused user interactions. Use dialogs for confirmations, simple forms, or important information that requires user attention before continuing, creating a modal overlay that blocks interaction with the underlying page until dismissed.\n */\nexport const Default = {\n  render: () => html`\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as toggling a dialog.\n */\nexport const InvokerCommand = {\n  render: () => html`\n<nve-button commandfor=\"dialog\" command=\"toggle-popover\">toggle popover</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Dialog with event listeners for state change tracking. Use dialog events (beforetoggle, toggle, open, close) to trigger side effects like loading data on open, cleaning up resources on close, or preventing closure based on validation state.\n * @tags test-case\n */\nexport const Events = {\n  inline: false,\n  render: () => html`\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<script type=\"module\">\n  const dialog = document.querySelector('nve-dialog');\n  dialog.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  dialog.addEventListener('toggle', () => console.log('toggle'));\n  dialog.addEventListener('open', () => console.log('open'));\n  dialog.addEventListener('close', () => console.log('close'));\n</script>\n  `\n};\n\n/**\n * @summary Dialog with header, content, and footer structure for complete user interactions. Use the footer for action buttons, organizing the dialog into clear sections that guide users through the information hierarchy and toward decision-making.\n */\nexport const Visual = {\n  render: () => html`\n<nve-dialog closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Dialog with primary and secondary actions in footer. Use cancel + emphasized action pattern for confirmations or decisions where you need to present a choice, with emphasis on the primary action guiding users toward the preferred or expected path.\n * @tags test-case\n */\nexport const Content = {\n  inline: false,\n  render: () => html`\n<nve-dialog closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-dialog-footer>\n    <nve-button>cancel</nve-button>\n    <nve-button interaction=\"emphasis\">action</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Small dialog size for brief confirmations or single-field inputs. Use size=\"sm\" for simple yes/no confirmations, quick edits, or minimal interactions that don't require significant screen space, keeping the interface uncluttered.\n * @tags test-case\n */\nexport const Small = {\n  render: () => html`\n<nve-dialog size=\"sm\" closable>\n  <h3 nve-text=\"heading\">Small</h3>\n  <p nve-text=\"body\">some text content in a small dialog</p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Medium dialog size (default) for standard forms and content. Use size=\"md\" for typical dialogs containing short forms (3-5 fields), moderate content, or standard user interactions that need balanced space without overwhelming the interface.\n * @tags test-case\n */\nexport const Medium = {\n  render: () => html`\n<nve-dialog size=\"md\" closable>\n  <h3 nve-text=\"heading\">Medium</h3>\n  <p nve-text=\"body\">some text content in a medium dialog</p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Large dialog size for complex forms or extensive content. Use size=\"lg\" for multi-section forms, detailed settings panels, or content-rich interactions where users need more space to work comfortably, but consider using a drawer for large content areas.\n * @tags test-case\n */\nexport const Large = {\n  render: () => html`\n<nve-dialog size=\"lg\" closable>\n  <h3 nve-text=\"heading\">Large</h3>\n  <p nve-text=\"body\">some text content in a large dialog</p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.\n * @tags test-case\n */\nexport const TextWrap = {\n  render: () => html`\n<nve-dialog  closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Non-closable dialog requiring explicit action through buttons. Use non-closable dialogs sparingly for critical decisions (like irreversible deletions) or required acknowledgments where you must ensure users make a conscious choice rather than accidentally dismissing the dialog.\n * @tags test-case\n */\nexport const NonClosable = {\n  render: () => html`\n<nve-button popovertarget=\"dialog\">open</nve-button>\n<nve-dialog id=\"dialog\" modal>\n  <h3 nve-text=\"heading\">Non-Closable Dialog</h3>\n  <p nve-text=\"body\">Clicking the background to dismiss will not work here</p>\n  <nve-dialog-footer>\n    <nve-button popovertarget=\"dialog\" popovertargetaction=\"hide\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Dialog positioning and alignment options for contextual placement. While center positioning is standard, use edge positioning (top/bottom/left/right) for contextually relevant dialogs that relate to specific interface regions or when working with limited vertical space.\n * @tags test-case\n */\nexport const Alignment = {\n  inline: false,\n  render: () => html`\n  <nve-dialog>center</nve-dialog>\n\n  <nve-dialog position=\"top\">top center</nve-dialog>\n  <nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n  <nve-dialog position=\"top\">top center</nve-dialog>\n  <nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n\n  <nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n  <nve-dialog position=\"right\">right center</nve-dialog>\n  <nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n\n  <nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n  <nve-dialog position=\"bottom\">bottom center</nve-dialog>\n  <nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n\n  <nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n  <nve-dialog position=\"left\">left center</nve-dialog>\n  <nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n  `\n};\n\n/**\n * @summary Specific dialog positioning example, with placement in optimal locations for user interaction and visual hierarchy.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n  <style>\n    body {\n      min-height: 200vh;\n    }\n  </style>\n<nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\" closable>\n  <h3 nve-text=\"heading\">Position</h3>\n  <p nve-text=\"body\">some text content in a small dialog</p>\n</nve-dialog>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy trigger mechanism for dialog opening, with backward compatibility and alternative interaction patterns for dialog activation.\n * @tags test-case\n */\nexport const LegacyTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector('nve-dialog');\n  dialog.addEventListener('open', e => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n\n  dialog.addEventListener('close', e => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy behavior trigger for dialog management, showing traditional dialog control patterns and event handling for dialog lifecycle.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Dialog functionality within shadow DOM, with proper dialog behavior in encapsulated component environments and custom elements.\n * @tags test-case\n */\nexport const ShadowRoot = {\n  render: () => html`\n<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>:host { box-sizing: border-box; display: block; margin: 25vh auto; width: 400px; height: 400px; background: red; visibility: visible !important; }</style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n  `\n};\n\n/**\n * @summary Dialog with scrollable content while keeping header and footer fixed. Use scrollable content areas for dialogs with variable or lengthy content (like terms of service or detailed descriptions) while keeping action buttons always visible, ensuring users can complete the task without scrolling to find buttons.\n * @tags test-case\n */\nexport const ScrollContent = {\n  render: () => html`\n<nve-dialog id=\"dialog\" modal closable style=\"height: 400px\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\" style=\"height: 600px\">some tall content</p>\n  <p nve-text=\"body\">some overflow content</p>\n  <nve-dialog-footer>\n    <nve-button id=\"cancel-btn\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Modal dialog with inert behavior, including proper focus management and accessibility compliance for modal overlays and user interaction.\n * @tags test-case\n */\nexport const InertModal = {\n  render: () => html`\n<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n\n<button popovertarget=\"popover\">btn</button><br>\n\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n`\n};\n\n/**\n * @summary Dialog with different container styles, including custom padding and layout options.\n * @tags test-case\n */\nexport const ContainerStyles = {\n  render: () => html`\n<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px;\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Dialog with overflow content, including max-height constraints and a scrollable content area.\n * @tags test-case\n */\nexport const MaxHeight = {\n  render: () => html`\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some overflow content</p>\n  <p nve-text=\"body\" style=\"min-height: 1000px\">some overflow content</p>\n  <nve-button>button</nve-button>\n  <nve-dialog-footer>\n    <nve-button id=\"cancel-btn\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Legacy DOM Creation\n * @deprecated\n * @tags test-case\n */\nexport const LegacyDOMCreation = {\n  render: () => html`\n<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import '@nvidia-elements/core/dialog/define.js';\n  import '@nvidia-elements/core/button/define.js';\n\n  document.querySelector('#dialog-btn').addEventListener('click', () => {\n    const dialog = document.createElement('nve-dialog');\n    dialog.id = 'dialog-dom-creation';\n    dialog.modal = true;\n    dialog.closable = true;\n    \n    dialog.addEventListener('close', () => {\n      document.body.removeChild(dialog);\n    }, { once: true });\n\n    document.body.appendChild(dialog);\n  });\n</script>\n`\n};\n\n\n/**\n * @summary Center alignment with anchor body\n * @tags test-case\n */\nexport const CenterAlignment = {\n  render: () => html`\n<style>\n  body {\n    min-height: 200vh;\n  }\n</style>\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-select>\n    <select aria-label=\"select\">\n      <option>one</option>\n      <option>two</option>\n      <option>three</option>\n    </select>\n  </nve-select>\n</nve-dialog>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dialog.examples.js","names":["dialog_examples_default"],"sources":["../../src/dialog/dialog.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/dialog/define.js';\nimport '@nvidia-elements/core/accordion/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\n\nexport default {\n  title: 'Elements/Dialog',\n  component: 'nve-dialog',\n  parameters: {\n    layout: 'centered'\n  }\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic modal dialog for focused user interactions. Use dialogs for confirmations, simple forms, or important information that requires user attention before continuing, creating a modal overlay that blocks interaction with the underlying page until dismissed.\n */\nexport const Default = {\n  render: () => html`\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Use the `commandfor` and `command` attributes to trigger custom Invoker Commands, such as toggling a dialog.\n */\nexport const InvokerCommand = {\n  render: () => html`\n<nve-button commandfor=\"dialog\" command=\"toggle-popover\">toggle popover</nve-button>\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Dialog with event listeners for state change tracking. Use dialog events (beforetoggle, toggle, open, close) to trigger side effects like loading data on open, cleaning up resources on close, or preventing closure based on validation state.\n * @tags test-case\n */\nexport const Events = {\n  inline: false,\n  render: () => html`\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n</nve-dialog>\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<script type=\"module\">\n  const dialog = document.querySelector('nve-dialog');\n  dialog.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  dialog.addEventListener('toggle', () => console.log('toggle'));\n  dialog.addEventListener('open', () => console.log('open'));\n  dialog.addEventListener('close', () => console.log('close'));\n</script>\n  `\n};\n\n/**\n * @summary Dialog with header, content, and footer structure for complete user interactions. Use the footer for action buttons, organizing the dialog into clear sections that guide users through the information hierarchy and toward decision-making.\n */\nexport const Visual = {\n  render: () => html`\n<nve-dialog closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Dialog with primary and secondary actions in footer. Use cancel + emphasized action pattern for confirmations or decisions where you need to present a choice, with emphasis on the primary action guiding users toward the preferred or expected path.\n * @tags test-case\n */\nexport const Content = {\n  inline: false,\n  render: () => html`\n<nve-dialog closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-dialog-footer>\n    <nve-button>cancel</nve-button>\n    <nve-button interaction=\"emphasis\">action</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Small dialog size for brief confirmations or single-field inputs. Use size=\"sm\" for simple yes/no confirmations, quick edits, or minimal interactions that don't require significant screen space, keeping the interface uncluttered.\n * @tags test-case\n */\nexport const Small = {\n  render: () => html`\n<nve-dialog size=\"sm\" closable>\n  <h3 nve-text=\"heading\">Small</h3>\n  <p nve-text=\"body\">some text content in a small dialog</p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Medium dialog size (default) for standard forms and content. Use size=\"md\" for typical dialogs containing short forms (3-5 fields), moderate content, or standard user interactions that need balanced space without overwhelming the interface.\n * @tags test-case\n */\nexport const Medium = {\n  render: () => html`\n<nve-dialog size=\"md\" closable>\n  <h3 nve-text=\"heading\">Medium</h3>\n  <p nve-text=\"body\">some text content in a medium dialog</p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Large dialog size for complex forms or extensive content. Use size=\"lg\" for multi-section forms, detailed settings panels, or content-rich interactions where users need more space to work comfortably, but consider using a drawer for large content areas.\n * @tags test-case\n */\nexport const Large = {\n  render: () => html`\n<nve-dialog size=\"lg\" closable>\n  <h3 nve-text=\"heading\">Large</h3>\n  <p nve-text=\"body\">some text content in a large dialog</p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.\n * @tags test-case\n */\nexport const TextWrap = {\n  render: () => html`\n<nve-dialog  closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n    Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.  Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Non-closable dialog requiring explicit action through buttons. Use non-closable dialogs sparingly for critical decisions (like irreversible deletions) or required acknowledgments where you must ensure users make a conscious choice rather than accidentally dismissing the dialog.\n * @tags test-case\n */\nexport const NonClosable = {\n  render: () => html`\n<nve-button popovertarget=\"dialog\">open</nve-button>\n<nve-dialog id=\"dialog\" modal>\n  <h3 nve-text=\"heading\">Non-Closable Dialog</h3>\n  <p nve-text=\"body\">Clicking the background to dismiss will not work here</p>\n  <nve-dialog-footer>\n    <nve-button popovertarget=\"dialog\" popovertargetaction=\"hide\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Dialog positioning and alignment options for contextual placement. While center positioning is standard, use edge positioning (top/bottom/left/right) for contextually relevant dialogs that relate to specific interface regions or when working with limited vertical space.\n * @tags test-case\n */\nexport const Alignment = {\n  inline: false,\n  render: () => html`\n  <nve-dialog>center</nve-dialog>\n\n  <nve-dialog position=\"top\">top center</nve-dialog>\n  <nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n  <nve-dialog position=\"top\">top center</nve-dialog>\n  <nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n\n  <nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n  <nve-dialog position=\"right\">right center</nve-dialog>\n  <nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n\n  <nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n  <nve-dialog position=\"bottom\">bottom center</nve-dialog>\n  <nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n\n  <nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n  <nve-dialog position=\"left\">left center</nve-dialog>\n  <nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n  `\n};\n\n/**\n * @summary Specific dialog positioning example, with placement in optimal locations for user interaction and visual hierarchy.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n  <style>\n    body {\n      min-height: 200vh;\n    }\n  </style>\n<nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\" closable>\n  <h3 nve-text=\"heading\">Position</h3>\n  <p nve-text=\"body\">some text content in a small dialog</p>\n</nve-dialog>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy trigger mechanism for dialog opening, with backward compatibility and alternative interaction patterns for dialog activation.\n * @tags test-case\n */\nexport const LegacyTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector('nve-dialog');\n  dialog.addEventListener('open', e => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n\n  dialog.addEventListener('close', e => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n  `\n};\n\n/**\n * @deprecated\n * @summary Legacy behavior trigger for dialog management, showing traditional dialog control patterns and event handling for dialog lifecycle.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Dialog functionality within shadow DOM, with proper dialog behavior in encapsulated component environments and custom elements.\n * @tags test-case\n */\nexport const ShadowRoot = {\n  render: () => html`\n<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>:host { box-sizing: border-box; display: block; margin: 25vh auto; width: 400px; height: 400px; background: red; visibility: visible !important; }</style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n  `\n};\n\n/**\n * @summary Dialog with scrollable content while keeping header and footer fixed. Use scrollable content areas for dialogs with variable or lengthy content (like terms of service or detailed descriptions) while keeping action buttons always visible, ensuring users can complete the task without scrolling to find buttons.\n * @tags test-case\n */\nexport const ScrollContent = {\n  render: () => html`\n<nve-dialog id=\"dialog\" modal closable style=\"height: 400px\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\" style=\"height: 600px\">some tall content</p>\n  <p nve-text=\"body\">some overflow content</p>\n  <nve-dialog-footer>\n    <nve-button id=\"cancel-btn\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Modal dialog with inert behavior, including proper focus management and accessibility compliance for modal overlays and user interaction.\n * @tags test-case\n */\nexport const InertModal = {\n  render: () => html`\n<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n\n<button popovertarget=\"popover\">btn</button><br>\n\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n`\n};\n\n/**\n * @summary Dialog with different container styles, including custom padding and layout options.\n * @tags test-case\n */\nexport const ContainerStyles = {\n  render: () => html`\n<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px;\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n`\n};\n\n/**\n * @summary Dialog with overflow content, including max-height constraints and a scrollable content area.\n * @tags test-case\n */\nexport const MaxHeight = {\n  render: () => html`\n<nve-dialog id=\"dialog\" modal closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some overflow content</p>\n  <p nve-text=\"body\" style=\"min-height: 1000px\">some overflow content</p>\n  <nve-button>button</nve-button>\n  <nve-dialog-footer>\n    <nve-button id=\"cancel-btn\">cancel</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n  `\n};\n\n/**\n * @summary Legacy DOM Creation\n * @deprecated\n * @tags test-case\n */\nexport const LegacyDOMCreation = {\n  render: () => html`\n<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import '@nvidia-elements/core/dialog/define.js';\n  import '@nvidia-elements/core/button/define.js';\n\n  document.querySelector('#dialog-btn').addEventListener('click', () => {\n    const dialog = document.createElement('nve-dialog');\n    dialog.id = 'dialog-dom-creation';\n    dialog.modal = true;\n    dialog.closable = true;\n    \n    dialog.addEventListener('close', () => {\n      document.body.removeChild(dialog);\n    }, { once: true });\n\n    document.body.appendChild(dialog);\n  });\n</script>\n`\n};\n\n\n/**\n * @summary Center alignment with anchor body\n * @tags test-case\n */\nexport const CenterAlignment = {\n  render: () => html`\n<style>\n  body {\n    min-height: 200vh;\n  }\n</style>\n<nve-button popovertarget=\"dialog\">button</nve-button>\n<nve-dialog id=\"dialog\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-select>\n    <select aria-label=\"select\">\n      <option>one</option>\n      <option>two</option>\n      <option>three</option>\n    </select>\n  </nve-select>\n</nve-dialog>\n`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/dialog/dialog.global.js

@@ -1,6 +1,5 @@
-//#region src/dialog/dialog.global.css?inline
+// src/dialog/dialog.global.css?inline
 var e = "nve-dialog:has(nve-dialog-header),nve-dialog:has(nve-dialog-footer){&::part(_host){padding:0}&::part(_content){padding:var(--padding)}}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=dialog.global.js.map

package/dist/dialog/dialog.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.global.js","names":[],"sources":["../../src/dialog/dialog.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n/* workaround for missing support for https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has-slotted */\nnve-dialog:has(nve-dialog-header),\nnve-dialog:has(nve-dialog-footer) {\n  &::part(_host) {\n    padding: 0;\n  }\n\n  &::part(_content) {\n    padding: var(--padding);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"dialog.global.js","names":["dialog_global_default"],"sources":["../../src/dialog/dialog.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n/* workaround for missing support for https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:has-slotted */\nnve-dialog:has(nve-dialog-header),\nnve-dialog:has(nve-dialog-footer) {\n  &::part(_host) {\n    padding: 0;\n  }\n\n  &::part(_content) {\n    padding: var(--padding);\n  }\n}\n"],"mappings":""}

package/dist/dialog/dialog.js

@@ -1,6 +1,5 @@
-//#region src/dialog/dialog.css?inline
+// src/dialog/dialog.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: 4px;--nve-sys-layer-popover-offset: var(--nve-ref-space-xxl);--border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);--border-radius: var(--nve-ref-border-radius-lg);--background: var(--nve-sys-layer-overlay-background);--color: var(--nve-sys-layer-overlay-color);--padding: var(--nve-ref-size-300) var(--nve-ref-size-400);--box-shadow: var(--nve-ref-shadow-500);--gap: var(--nve-ref-space-sm);--max-width: 600px;--min-height: 250px;--max-height: 100vh;width:100vw;height:min-content;max-width:var(--max-width);max-height:var(--max-height);min-height:var(--min-height)}:host([size=\"sm\"]){--max-width: 400px}:host([size=\"lg\"]){--max-width: 840px}[internal-host]{border-radius:var(--border-radius);border:var(--border);background:var(--background);color:var(--color);box-shadow:var(--box-shadow);padding:var(--padding);max-height:var(--max-height);height:inherit;width:inherit;max-width:inherit;min-height:inherit;min-width:inherit}:host([modal])::backdrop{background:#00000080}.header{display:flex;gap:var(--gap)}.content{overflow:auto;min-height:inherit;scrollbar-color:var(--nve-sys-scrollbar-thumb-color) var(--nve-sys-scrollbar-track-color);scrollbar-width:var(--nve-sys-scrollbar-width);slot{gap:var(--gap);min-height:inherit;display:flex;flex-direction:column;align-items:flex-start}}nve-icon-button{position:absolute;top:var(--nve-ref-size-200);right:var(--nve-ref-size-200);z-index:99}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=dialog.js.map

package/dist/dialog/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","names":[],"sources":["../../src/dialog/dialog.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: 4px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xxl);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --box-shadow: var(--nve-ref-shadow-500);\n  --gap: var(--nve-ref-space-sm);\n  --max-width: 600px;\n  --min-height: 250px;\n  --max-height: 100vh;\n  width: 100vw;\n  height: min-content;\n  max-width: var(--max-width);\n  max-height: var(--max-height);\n  min-height: var(--min-height);\n}\n\n:host([size='sm']) {\n  --max-width: 400px;\n}\n\n:host([size='lg']) {\n  --max-width: 840px;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  padding: var(--padding);\n  max-height: var(--max-height);\n  height: inherit;\n  width: inherit;\n  max-width: inherit;\n  min-height: inherit;\n  min-width: inherit;\n}\n\n:host([modal])::backdrop {\n  /* --nve-sys-layer-backdrop-background (not available on top layer) */\n  background: hsl(0 0% 0% / 0.5); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-value */\n}\n\n.header {\n  display: flex;\n  gap: var(--gap);\n}\n\n.content {\n  overflow: auto;\n  min-height: inherit;\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  slot {\n    gap: var(--gap);\n    min-height: inherit;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\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"],"mappings":""}
+{"version":3,"file":"dialog.js","names":["dialog_default"],"sources":["../../src/dialog/dialog.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: 4px;\n  --nve-sys-layer-popover-offset: var(--nve-ref-space-xxl);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: var(--nve-ref-border-radius-lg);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --box-shadow: var(--nve-ref-shadow-500);\n  --gap: var(--nve-ref-space-sm);\n  --max-width: 600px;\n  --min-height: 250px;\n  --max-height: 100vh;\n  width: 100vw;\n  height: min-content;\n  max-width: var(--max-width);\n  max-height: var(--max-height);\n  min-height: var(--min-height);\n}\n\n:host([size='sm']) {\n  --max-width: 400px;\n}\n\n:host([size='lg']) {\n  --max-width: 840px;\n}\n\n[internal-host] {\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  padding: var(--padding);\n  max-height: var(--max-height);\n  height: inherit;\n  width: inherit;\n  max-width: inherit;\n  min-height: inherit;\n  min-width: inherit;\n}\n\n:host([modal])::backdrop {\n  /* --nve-sys-layer-backdrop-background (not available on top layer) */\n  background: hsl(0 0% 0% / 0.5); /* eslint-disable-line @nvidia-elements/lint/no-unexpected-css-value */\n}\n\n.header {\n  display: flex;\n  gap: var(--gap);\n}\n\n.content {\n  overflow: auto;\n  min-height: inherit;\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  slot {\n    gap: var(--gap);\n    min-height: inherit;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\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"],"mappings":""}

package/dist/dialog/dialog2.js

@@ -5,14 +5,14 @@ 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 "./dialog.global.js";
 import u from "./dialog.js";
 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";
-//#region src/dialog/dialog.ts
+// src/dialog/dialog.ts
 var h = { close: "close" }, g = class extends d {
 	constructor(...e) {
 		super(...e), this.position = "center", this.alignment = "center", this.anchor = globalThis.document?.body, this.#e = new m(this, h), this.i18n = this.#e.i18n, this.typeNativePopoverController = new r(this);
@@ -30,7 +30,7 @@ var h = { close: "close" }, g = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -60,7 +60,6 @@ s([p({
 	reflect: !0,
 	attribute: "behavior-trigger"
 })], g.prototype, "behaviorTrigger", void 0), s([p({ type: Object })], g.prototype, "i18n", void 0), g = s([e({ excessiveInstanceLimit: 50 }), i()], g);
-//#endregion
 export { g as Dialog };
 
 //# sourceMappingURL=dialog2.js.map

package/dist/dialog/dialog2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog2.js","names":[],"sources":["../../src/dialog/dialog.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 type { PopoverAlign, PopoverPosition, PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './dialog.global.css?inline';\nimport styles from './dialog.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-dialog\n * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.\n * @documentation https://nvidia.github.io/elements/docs/elements/dialog/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dialog\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 dialog opens.\n * @event close - Dispatched when the dialog closes.\n * @slot - Dialog body content displayed between the header and footer.\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --max-width\n * @cssprop --min-height\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of dialog open/close animations\n * @csspart close-button - The inner template reference for the close button of the dialog.\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dialog extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For dialog the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'center';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alignment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  /**\n   * Sets the max size of the dialog.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within dialog. Non-closable\n   * dialogs suit dialogs that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a dialog should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\n  /**\n   * (optional) By default the popover will automatically anchor 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 = globalThis.document?.body;\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   * @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  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return this.closable ?? false;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Dialog>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dialog',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host part=\"_host\">\n      <div class=\"header\">\n        ${this.closable ? html`<nve-icon-button part=\"close-button icon-button\" exportparts=\"icon:icon-button-icon\" size=\"sm\" @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'dialog';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAM,IAAe,EACnB,OAAO,QACT,GA8Ba,IAAN,cAAqB,EAAW;;EAiEG,aA5D+B,KAAA,WAAA,UAMF,KAAA,YAAA,UAsBV,KAAA,SAAA,WAAW,UAAU,MAexC,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAKhD,KAAA,OAAA,KAAK,GAAgB,MAYhB,KAAA,8BAAA,IAAI,EAAoC,IAAI;;CAjBpF;CAQA,IAAI,cAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;CAGA,IAAI,qBAAqB;EACvB,OAAO,KAAK,YAAY;CAC1B;;EAIgB,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAKA,SAAS;EACP,OAAO,CAAI,uDAGL,KAAK,WAAW,CAAI,0GAAyG,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM,wBAAuB,GAAG;CASjO;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,UACvB,EAAoB,MAAM,CAAY;CACxC;AACF;AAjGG,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,GAKxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAMzC,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,GAMzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAOxE,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAvD3B,IAAA,EAAA,CAAA,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChC,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"dialog2.js","names":["styles","globalStyles","_decorate","__decorate","dialog_global_default","dialog_default","i18nDefaults","Dialog","LitElement","_args","#i18nController","I18nController","TypeNativePopoverController","useStyles","popoverStyles","IconButton","attachInternals","appendRootNodeStyle","property","audit","scopedRegistry"],"sources":["../../src/dialog/dialog.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 type { PopoverAlign, PopoverPosition, PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  TypeNativePopoverController,\n  useStyles,\n  attachInternals,\n  appendRootNodeStyle,\n  scopedRegistry\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport globalStyles from './dialog.global.css?inline';\nimport styles from './dialog.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-dialog\n * @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.\n * @documentation https://nvidia.github.io/elements/docs/elements/dialog/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dialog\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 dialog opens.\n * @event close - Dispatched when the dialog closes.\n * @slot - Dialog body content displayed between the header and footer.\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --max-width\n * @cssprop --min-height\n * @cssprop --max-height\n * @cssprop --animation-duration - Duration of dialog open/close animations\n * @csspart close-button - The inner template reference for the close button of the dialog.\n * @csspart icon-button - The icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dialog extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For dialog the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'center';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alignment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'center';\n\n  /**\n   * Sets the max size of the dialog.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within dialog. Non-closable\n   * dialogs suit dialogs that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a dialog should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\n  /**\n   * (optional) By default the popover will automatically anchor 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 = globalThis.document?.body;\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   * @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  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return this.closable ?? false;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Dialog>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dialog',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n    <div internal-host part=\"_host\">\n      <div class=\"header\">\n        ${this.closable ? html`<nve-icon-button part=\"close-button icon-button\" exportparts=\"icon:icon-button-icon\" size=\"sm\" @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\" part=\"_content\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'dialog';\n    appendRootNodeStyle(this, globalStyles);\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqBA,IAAMM,IAAe,EACnB,OAAO,QACT,GA8BaC,IAAN,cAAqBC,EAAW;;EAiEG,A,aA5D+B,KAAA,WAAA,UAMF,KAAA,YAAA,UAsBV,KAAA,SAAA,WAAW,UAAU,MAexC,KAAAE,KAAA,IAAIC,EAAqB,MAAML,CAAY,GAKhD,KAAA,OAAA,KAAKI,GAAgB,MAYhB,KAAA,8BAAA,IAAIE,EAAoC,IAAI;;CAjBpF;CAQA,IAAI,cAA2B;EAC7B,OAAO,KAAK,QAAQ,SAAS;CAC/B;CAGA,IAAI,qBAAqB;EACvB,OAAO,KAAK,YAAY;CAC1B;;EAIgB,KAAA,SAAAC,EAAU,CAACC,GAAed,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBe,EAAW,SAAS,MAAMA,EAC7B;;CAKA,SAAS;EACP,OAAO,CAAI,uDAGL,KAAK,WAAW,CAAI,0GAAyG,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM,wBAAuB,GAAG;CASjO;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,UACvBC,EAAoB,MAAMhB,CAAY;CACxC;AACF;AAjGGC,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,GAKxCL,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,QAAA,KAAA,CAAA,GAMxCL,EAAA,CAAAgB,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAX,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1BL,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAX,EAAA,WAAA,SAAA,KAAA,CAAA,GAMzCL,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,GAMzBL,EAAA,CAAAgB,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAAX,EAAA,WAAA,mBAAA,KAAA,CAAA,GAOxEL,EAAA,CAAAgB,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAX,EAAA,WAAA,QAAA,KAAA,CAAA,GAvD3B,IAAAL,EAAA,CAAAiB,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChCC,EAAe,CAAA,GAAAb,CAAA"}

package/dist/divider/define.js

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

package/dist/divider/define.js.map

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

package/dist/divider/divider.examples.js

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

package/dist/divider/divider.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.examples.js","names":[],"sources":["../../src/divider/divider.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/divider/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Divider',\n  component: 'nve-divider',\n};\n\n/**\n * @summary Basic horizontal divider for separating content sections with a subtle line.\n */\nexport const Default = {\n  render: () => html`\n    <nve-divider></nve-divider>\n  `\n};\n\n/**\n * @summary Divider with emphasis color styling for stronger visual separation between content sections.\n * @tags test-case\n */\nexport const Emphasis = {\n  render: () => html`\n    <nve-divider style=\"--color: var(--nve-ref-border-color-emphasis)\"></nve-divider>\n  `\n};\n\n/**\n * @summary Divider with muted color styling for subtle, low-contrast separation in dense layouts.\n * @tags test-case\n */\nexport const Muted = {\n  render: () => html`\n    <nve-divider style=\"--color: var(--nve-ref-border-color-muted)\"></nve-divider>\n  `\n};\n\n/**\n * @summary Vertical divider for separating horizontally arranged elements like toolbar buttons or inline actions.\n */\nexport const Vertical = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\" style=\"height: 50px\">\n      <nve-divider orientation=\"vertical\"></nve-divider>\n      <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n      <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n    </div>\n  `\n};\n\n/**\n * @summary Divider with custom rounded styling, thicker border, and accent color for decorative separation.\n * @tags test-case\n */\nexport const Rounded = {\n  render: () => html`\n    <nve-divider style=\"--size: var(--nve-ref-border-width-xl); --border-radius: var(--nve-ref-border-radius-xs); --color: var(--nve-sys-accent-secondary-background);\"></nve-divider>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"divider.examples.js","names":["divider_examples_default"],"sources":["../../src/divider/divider.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/divider/define.js';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/icon-button/define.js';\n\nexport default {\n  title: 'Elements/Divider',\n  component: 'nve-divider',\n};\n\n/**\n * @summary Basic horizontal divider for separating content sections with a subtle line.\n */\nexport const Default = {\n  render: () => html`\n    <nve-divider></nve-divider>\n  `\n};\n\n/**\n * @summary Divider with emphasis color styling for stronger visual separation between content sections.\n * @tags test-case\n */\nexport const Emphasis = {\n  render: () => html`\n    <nve-divider style=\"--color: var(--nve-ref-border-color-emphasis)\"></nve-divider>\n  `\n};\n\n/**\n * @summary Divider with muted color styling for subtle, low-contrast separation in dense layouts.\n * @tags test-case\n */\nexport const Muted = {\n  render: () => html`\n    <nve-divider style=\"--color: var(--nve-ref-border-color-muted)\"></nve-divider>\n  `\n};\n\n/**\n * @summary Vertical divider for separating horizontally arranged elements like toolbar buttons or inline actions.\n */\nexport const Vertical = {\n  render: () => html`\n    <div nve-layout=\"row gap:sm align:vertical-center\" style=\"height: 50px\">\n      <nve-divider orientation=\"vertical\"></nve-divider>\n      <nve-icon-button icon-name=\"information-circle\"></nve-icon-button>\n      <nve-icon-button icon-name=\"more-actions\"></nve-icon-button>\n    </div>\n  `\n};\n\n/**\n * @summary Divider with custom rounded styling, thicker border, and accent color for decorative separation.\n * @tags test-case\n */\nexport const Rounded = {\n  render: () => html`\n    <nve-divider style=\"--size: var(--nve-ref-border-width-xl); --border-radius: var(--nve-ref-border-radius-xs); --color: var(--nve-sys-accent-secondary-background);\"></nve-divider>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/divider/divider.js

@@ -1,6 +1,5 @@
-//#region src/divider/divider.css?inline
+// src/divider/divider.css?inline
 var e = ":host{--color: var(--nve-ref-border-color);--border-radius: 0;--padding: 0;--size: var(--nve-ref-border-width-sm);width:100%}[internal-host]{display:block;width:100%;height:var(--size);background-color:var(--color);border-radius:var(--border-radius);padding:var(--padding)}:host([orientation=\"vertical\"]){align-self:stretch;height:inherit;width:var(--size)}:host([orientation=\"vertical\"]) [internal-host]{height:100%;width:var(--size)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=divider.js.map

package/dist/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","names":[],"sources":["../../src/divider/divider.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  --color: var(--nve-ref-border-color);\n  --border-radius: 0;\n  --padding: 0;\n  --size: var(--nve-ref-border-width-sm);\n  width: 100%;\n}\n\n[internal-host] {\n  display: block;\n  width: 100%;\n  height: var(--size);\n  background-color: var(--color);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n}\n\n:host([orientation='vertical']) {\n  align-self: stretch;\n  height: inherit;\n  width: var(--size);\n}\n\n:host([orientation='vertical']) [internal-host] {\n  height: 100%;\n  width: var(--size);\n}\n"],"mappings":""}
+{"version":3,"file":"divider.js","names":["divider_default"],"sources":["../../src/divider/divider.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  --color: var(--nve-ref-border-color);\n  --border-radius: 0;\n  --padding: 0;\n  --size: var(--nve-ref-border-width-sm);\n  width: 100%;\n}\n\n[internal-host] {\n  display: block;\n  width: 100%;\n  height: var(--size);\n  background-color: var(--color);\n  border-radius: var(--border-radius);\n  padding: var(--padding);\n}\n\n:host([orientation='vertical']) {\n  align-self: stretch;\n  height: inherit;\n  width: var(--size);\n}\n\n:host([orientation='vertical']) [internal-host] {\n  height: 100%;\n  width: var(--size);\n}\n"],"mappings":""}

package/dist/divider/divider2.js

@@ -1,10 +1,10 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import r from "./divider.js";
 import { LitElement as i, html as a } from "lit";
 import { property as o } from "lit/decorators/property.js";
-//#region src/divider/divider.ts
+// src/divider/divider.ts
 var s = class extends i {
 	constructor(...e) {
 		super(...e), this.orientation = "horizontal";
@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-divider",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -32,7 +32,6 @@ n([o({
 	type: String,
 	reflect: !0
 })], s.prototype, "orientation", void 0);
-//#endregion
 export { s as Divider };
 
 //# sourceMappingURL=divider2.js.map

package/dist/divider/divider2.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider2.js","names":[],"sources":["../../src/divider/divider.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 { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './divider.css?inline';\n\n/**\n * @element nve-divider\n * @description Divider is a component that separates and distinguishes sections of content or groups of menuitems.\n * @documentation https://nvidia.github.io/elements/docs/elements/divider/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/divider\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --size\n * @cssprop --border-radius\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role\n */\nexport class Divider extends LitElement {\n  /**\n   * Determines the orientation of the divider.\n   */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-divider',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`<div internal-host></div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'separator';\n    this._internals.ariaOrientation = this.orientation;\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('orientation')) {\n      this._internals.ariaOrientation = this.orientation;\n    }\n  }\n}\n"],"mappings":";;;;;;;AAqBA,IAAa,IAAb,cAA6B,EAAW;;EAI8C,aAAA,KAAA,cAAA;;;EAEpE,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CACb;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,aACvB,KAAK,WAAW,kBAAkB,KAAK;CACzC;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQ,CAAK,GACf,EAAM,IAAI,aAAa,MACzB,KAAK,WAAW,kBAAkB,KAAK;CAE3C;AACF;AA7BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"divider2.js","names":["styles","_decorate","__decorate","divider_default","Divider","LitElement","_args","useStyles","attachInternals","props","property"],"sources":["../../src/divider/divider.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 { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './divider.css?inline';\n\n/**\n * @element nve-divider\n * @description Divider is a component that separates and distinguishes sections of content or groups of menuitems.\n * @documentation https://nvidia.github.io/elements/docs/elements/divider/\n * @since 0.12.0\n * @entrypoint \\@nvidia-elements/core/divider\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --size\n * @cssprop --border-radius\n * @aria https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/separator_role\n */\nexport class Divider extends LitElement {\n  /**\n   * Determines the orientation of the divider.\n   */\n  @property({ type: String, reflect: true }) orientation: 'vertical' | 'horizontal' = 'horizontal';\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-divider',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`<div internal-host></div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'separator';\n    this._internals.ariaOrientation = this.orientation;\n  }\n\n  updated(props: PropertyValues<this>) {\n    super.updated(props);\n    if (props.has('orientation')) {\n      this._internals.ariaOrientation = this.orientation;\n    }\n  }\n}\n"],"mappings":";;;;;;;AAqBA,IAAaI,IAAb,cAA6BC,EAAW;;EAI8C,A,aAAA,KAAA,cAAA;;;EAEpE,KAAA,SAAAE,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAKA,SAAS;EACP,OAAO,CAAI;CACb;CAEA,oBAAoB;EAIlB,AAHA,MAAM,kBAAkB,GACxBQ,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO,aACvB,KAAK,WAAW,kBAAkB,KAAK;CACzC;CAEA,QAAQ,GAA6B;EAEnC,AADA,MAAM,QAAQC,CAAK,GACfA,EAAM,IAAI,aAAa,MACzB,KAAK,WAAW,kBAAkB,KAAK;CAE3C;AACF;AA7BGR,EAAA,CAAAS,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAN,EAAA,WAAA,eAAA,KAAA,CAAA"}

package/dist/divider/index.js

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

package/dist/dot/define.js

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

package/dist/dot/define.js.map

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

package/dist/dot/dot.examples.js

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

package/dist/dot/dot.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dot.examples.js","names":[],"sources":["../../src/dot/dot.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/dot/define.js';\n\nexport default {\n  title: 'Elements/Dot',\n  component: 'nve-dot',\n};\n\n/**\n * @summary Basic dot component with status indicator, providing a simple visual cue for process states and system status.\n */\nexport const Default = {\n  render: () => html`\n<nve-dot status=\"starting\"></nve-dot>\n  `\n};\n\n/**\n * @summary Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-dot size=\"sm\">10</nve-dot>\n  <nve-dot>10</nve-dot>\n  <nve-dot size=\"lg\">10</nve-dot>\n</div>\n<br>\n<div nve-layout=\"row gap:lg\">\n  <nve-dot size=\"sm\"></nve-dot>\n  <nve-dot></nve-dot>\n  <nve-dot size=\"lg\"></nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.\n */\nexport const SupportStatus = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot></nve-dot>\n  <nve-dot status=\"accent\"></nve-dot>\n  <nve-dot status=\"warning\"></nve-dot>\n  <nve-dot status=\"success\"></nve-dot>\n  <nve-dot status=\"danger\"></nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.\n */\nexport const Number = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot>10</nve-dot>\n  <nve-dot status=\"accent\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"warning\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"success\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"danger\" aria-label=\"10 notifications\">10</nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot status=\"scheduled\"></nve-dot>\n  <nve-dot status=\"queued\"></nve-dot>\n  <nve-dot status=\"pending\"></nve-dot>\n  <nve-dot status=\"starting\"></nve-dot>\n  <nve-dot status=\"running\"></nve-dot>\n  <nve-dot status=\"restarting\"></nve-dot>\n  <nve-dot status=\"stopping\"></nve-dot>\n  <nve-dot status=\"finished\"></nve-dot>\n  <nve-dot status=\"failed\"></nve-dot>\n  <nve-dot status=\"unknown\"></nve-dot>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dot.examples.js","names":["dot_examples_default"],"sources":["../../src/dot/dot.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/dot/define.js';\n\nexport default {\n  title: 'Elements/Dot',\n  component: 'nve-dot',\n};\n\n/**\n * @summary Basic dot component with status indicator, providing a simple visual cue for process states and system status.\n */\nexport const Default = {\n  render: () => html`\n<nve-dot status=\"starting\"></nve-dot>\n  `\n};\n\n/**\n * @summary Different dot sizes to accommodate layout contexts from compact indicators to prominent status displays.\n * @tags test-case\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"row gap:sm\">\n  <nve-dot size=\"sm\">10</nve-dot>\n  <nve-dot>10</nve-dot>\n  <nve-dot size=\"lg\">10</nve-dot>\n</div>\n<br>\n<div nve-layout=\"row gap:lg\">\n  <nve-dot size=\"sm\"></nve-dot>\n  <nve-dot></nve-dot>\n  <nve-dot size=\"lg\"></nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Semantic color variations for general status communication, enabling clear visual distinction of different states and priorities.\n */\nexport const SupportStatus = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot></nve-dot>\n  <nve-dot status=\"accent\"></nve-dot>\n  <nve-dot status=\"warning\"></nve-dot>\n  <nve-dot status=\"success\"></nve-dot>\n  <nve-dot status=\"danger\"></nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Dot with numeric content for notification badges and counters, providing clear visual indicators of quantity or alerts.\n */\nexport const Number = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot>10</nve-dot>\n  <nve-dot status=\"accent\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"warning\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"success\" aria-label=\"10 notifications\">10</nve-dot>\n  <nve-dot status=\"danger\" aria-label=\"10 notifications\">10</nve-dot>\n</div>\n  `\n}\n\n/**\n * @summary Comprehensive process status indicators for system operations, providing clear visual feedback on job states and workflow progress.\n */\nexport const Status = {\n  render: () => html`\n<div nve-layout=\"row gap:md\">\n  <nve-dot status=\"scheduled\"></nve-dot>\n  <nve-dot status=\"queued\"></nve-dot>\n  <nve-dot status=\"pending\"></nve-dot>\n  <nve-dot status=\"starting\"></nve-dot>\n  <nve-dot status=\"running\"></nve-dot>\n  <nve-dot status=\"restarting\"></nve-dot>\n  <nve-dot status=\"stopping\"></nve-dot>\n  <nve-dot status=\"finished\"></nve-dot>\n  <nve-dot status=\"failed\"></nve-dot>\n  <nve-dot status=\"unknown\"></nve-dot>\n</div>\n  `\n}\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/dot/dot.js

@@ -1,6 +1,5 @@
-//#region src/dot/dot.css?inline
+// src/dot/dot.css?inline
 var e = ":host{--gap: var(--nve-ref-space-xs);--font-size: var(--nve-ref-font-size-100);--font-weight: var(--nve-ref-font-weight-semibold);--background: var(--status-color);--color: var(--nve-sys-text-white-color);--border-radius: var(--nve-ref-border-radius-full);--height: var(--nve-ref-size-300);--width: var(--nve-ref-size-300);--padding: 0;--border: 0;width:auto;display:inline-flex}[internal-host]{font-weight:var(--font-weight);font-size:var(--font-size);gap:var(--gap);background:var(--background);color:var(--color);border-radius:var(--border-radius);height:var(--height);width:var(--width);padding:var(--padding);border:var(--border);display:flex;line-height:1em;place-items:center;place-content:center}:host([size=\"sm\"]){--height: var(--nve-ref-size-200);--width: var(--nve-ref-size-200);--font-size: var(--nve-ref-font-size-50)}:host([size=\"lg\"]){--height: var(--nve-ref-size-400);--width: var(--nve-ref-size-400);--font-size: var(--nve-ref-font-size-200)}:host(:state(has-text)){--width: fit-content;--height: fit-content;--padding: calc(var(--font-size) * .1) calc(var(--font-size) * .5)}::slotted([nve-text]){color:inherit!important}:host([status=\"warning\"]){--color: var(--nve-sys-text-black-color)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=dot.js.map

package/dist/dot/dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"dot.js","names":[],"sources":["../../src/dot/dot.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  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --background: var(--status-color);\n  --color: var(--nve-sys-text-white-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --height: var(--nve-ref-size-300);\n  --width: var(--nve-ref-size-300);\n  --padding: 0;\n  --border: 0;\n  width: auto;\n  display: inline-flex;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border: var(--border);\n  display: flex;\n  line-height: 1em;\n  place-items: center;\n  place-content: center;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-200);\n  --width: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-50);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-400);\n  --width: var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n}\n\n:host(:state(has-text)) {\n  --width: fit-content;\n  --height: fit-content;\n  --padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.5);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-text-black-color);\n}\n"],"mappings":""}
+{"version":3,"file":"dot.js","names":["dot_default"],"sources":["../../src/dot/dot.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  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --background: var(--status-color);\n  --color: var(--nve-sys-text-white-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --height: var(--nve-ref-size-300);\n  --width: var(--nve-ref-size-300);\n  --padding: 0;\n  --border: 0;\n  width: auto;\n  display: inline-flex;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border: var(--border);\n  display: flex;\n  line-height: 1em;\n  place-items: center;\n  place-content: center;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-200);\n  --width: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-50);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-400);\n  --width: var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n}\n\n:host(:state(has-text)) {\n  --width: fit-content;\n  --height: fit-content;\n  --padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.5);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-text-black-color);\n}\n"],"mappings":""}

package/dist/dot/dot2.js

@@ -1,10 +1,10 @@
 import { attachInternals as e } from "../internal/utils/a11y.js";
 import { statusStateStyles as t, supportStateStyles as n, useStyles as r } from "../internal/styles/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import a from "./dot.js";
 import { LitElement as o, html as s } from "lit";
 import { property as c } from "lit/decorators/property.js";
-//#region src/dot/dot.ts
+// src/dot/dot.ts
 var l = class extends o {
 	static {
 		this.styles = r([
@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	render() {
@@ -36,7 +36,6 @@ i([c({
 	type: String,
 	reflect: !0
 })], l.prototype, "size", void 0);
-//#endregion
 export { l as Dot };
 
 //# sourceMappingURL=dot2.js.map

package/dist/dot/dot2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dot2.js","names":[],"sources":["../../src/dot/dot.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 type { Size, SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './dot.css?inline';\n\n/**\n * @element nve-dot\n * @description A visual indicator that communicates a status or notification of an associated component.\n * @documentation https://nvidia.github.io/elements/docs/elements/dot/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/dot\n * @slot - default text content no more than 2 characters in length\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --border\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Dot extends LitElement {\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus | TaskStatus;\n\n  /** Determines size of dot relative to provided text. */\n  @property({ type: String, reflect: true }) size: Size;\n\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-dot',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateSlot()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n\n  #updateSlot() {\n    this.textContent.length ? this._internals.states.add('has-text') : this._internals.states.delete('has-text');\n  }\n}\n"],"mappings":";;;;;;;AA4BA,IAAa,IAAb,cAAyB,EAAW;;EAOlB,KAAA,SAAA,EAAU;GAAC;GAAQ;GAAmB;EAAkB,CAAC;;;EAE9C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAIA,SAAS;EACP,OAAO,CAAI,+CAEmB,KAAK,GAAY,EAAE;CAGnD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxB,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,KAAc;EACZ,KAAK,YAAY,SAAS,KAAK,WAAW,OAAO,IAAI,UAAU,IAAI,KAAK,WAAW,OAAO,OAAO,UAAU;CAC7G;AACF;AA/BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA"}
+{"version":3,"file":"dot2.js","names":["styles","_decorate","__decorate","dot_default","Dot","LitElement","useStyles","statusStateStyles","supportStateStyles","#updateSlot","attachInternals","property"],"sources":["../../src/dot/dot.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 type { Size, SupportStatus, TaskStatus } from '@nvidia-elements/core/internal';\nimport { attachInternals, statusStateStyles, supportStateStyles, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './dot.css?inline';\n\n/**\n * @element nve-dot\n * @description A visual indicator that communicates a status or notification of an associated component.\n * @documentation https://nvidia.github.io/elements/docs/elements/dot/\n * @since 0.10.0\n * @entrypoint \\@nvidia-elements/core/dot\n * @slot - default text content no more than 2 characters in length\n * @cssprop --gap\n * @cssprop --font-size\n * @cssprop --font-weight\n * @cssprop --background\n * @cssprop --color\n * @cssprop --border-radius\n * @cssprop --height\n * @cssprop --width\n * @cssprop --padding\n * @cssprop --border\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img\n */\nexport class Dot extends LitElement {\n  /** Defines visual treatment to represent a ongoing task or support status. */\n  @property({ type: String, reflect: true }) status: SupportStatus | TaskStatus;\n\n  /** Determines size of dot relative to provided text. */\n  @property({ type: String, reflect: true }) size: Size;\n\n  static styles = useStyles([styles, statusStateStyles, supportStateStyles]);\n\n  static readonly metadata = {\n    tag: 'nve-dot',\n    version: '0.0.0'\n  };\n\n  _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${() => this.#updateSlot()}></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'img';\n  }\n\n  #updateSlot() {\n    this.textContent.length ? this._internals.states.add('has-text') : this._internals.states.delete('has-text');\n  }\n}\n"],"mappings":";;;;;;;AA4BA,IAAaI,IAAb,cAAyBC,EAAW;;EAOlB,KAAA,SAAAC,EAAU;GAACN;GAAQO;GAAmBC;EAAkB,CAAC;;;EAE9C,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;CAIA,SAAS;EACP,OAAO,CAAI,+CAEmB,KAAKC,GAAY,EAAE;CAGnD;CAEA,oBAAoB;EAGlB,AAFA,MAAM,kBAAkB,GACxBC,EAAgB,IAAI,GACpB,KAAK,WAAW,OAAO;CACzB;CAEA,KAAc;EACZ,KAAK,YAAY,SAAS,KAAK,WAAW,OAAO,IAAI,UAAU,IAAI,KAAK,WAAW,OAAO,OAAO,UAAU;CAC7G;AACF;AA/BGT,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,UAAA,KAAA,CAAA,GAGxCH,EAAA,CAAAU,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAP,EAAA,WAAA,QAAA,KAAA,CAAA"}

package/dist/dot/index.js

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

package/dist/drag-handle/define.js

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

package/dist/drag-handle/define.js.map

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

package/dist/drag-handle/drag-handle.examples.js

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

package/dist/drag-handle/drag-handle.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-handle.examples.js","names":[],"sources":["../../src/drag-handle/drag-handle.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/drag-handle/define.js';\n\nexport default {\n  title: 'Elements/Drag Handle',\n  component: 'nve-drag-handle'\n};\n\n/**\n * @summary Labeled grip for application-defined dragging and reordering. Use when an item needs a dedicated move control.\n */\nexport const Default = {\n  render: () => html`<nve-drag-handle aria-label=\"move item\"></nve-drag-handle>`\n};\n\n/**\n * @summary Pressed grip for an item selected for movement. Use to show the handle state while the application manages reordering.\n */\nexport const Pressed = {\n  render: () => html`<nve-drag-handle pressed aria-label=\"move item\"></nve-drag-handle>`\n};\n\n/**\n * @summary Disabled grip for an item that cannot move. Use to keep the control visible while movement is unavailable.\n */\nexport const Disabled = {\n  render: () => html`<nve-drag-handle disabled aria-label=\"move item\"></nve-drag-handle>`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"drag-handle.examples.js","names":["drag_handle_examples_default"],"sources":["../../src/drag-handle/drag-handle.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/drag-handle/define.js';\n\nexport default {\n  title: 'Elements/Drag Handle',\n  component: 'nve-drag-handle'\n};\n\n/**\n * @summary Labeled grip for application-defined dragging and reordering. Use when an item needs a dedicated move control.\n */\nexport const Default = {\n  render: () => html`<nve-drag-handle aria-label=\"move item\"></nve-drag-handle>`\n};\n\n/**\n * @summary Pressed grip for an item selected for movement. Use to show the handle state while the application manages reordering.\n */\nexport const Pressed = {\n  render: () => html`<nve-drag-handle pressed aria-label=\"move item\"></nve-drag-handle>`\n};\n\n/**\n * @summary Disabled grip for an item that cannot move. Use to keep the control visible while movement is unavailable.\n */\nexport const Disabled = {\n  render: () => html`<nve-drag-handle disabled aria-label=\"move item\"></nve-drag-handle>`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/drag-handle/drag-handle.js

@@ -1,6 +1,5 @@
-//#region src/drag-handle/drag-handle.css?inline
+// src/drag-handle/drag-handle.css?inline
 var e = ":host{--nve-sys-interaction-state-base: transparent;--cursor: move;--color: var(--nve-sys-text-muted-color);--width: var(--nve-ref-size-800);--height: var(--nve-ref-size-800);--border-radius: var(--nve-ref-border-radius-xs);display:inline-flex;user-select:none}:host([draggable=\"true\"]){-webkit-user-drag:element}:host(:state(disabled)),:host([readonly]){-webkit-user-drag:none}[internal-host]{display:flex;align-items:center;justify-content:center;width:var(--width);height:var(--height);border-radius:var(--border-radius);cursor:var(--cursor)}nve-icon{--color: inherit;pointer-events:none}:host(:state(pressed)){--color: var(--nve-sys-interaction-selected-color)}:host(:hover:not(:state(disabled),[readonly],:state(pressed))){--color: var(--nve-sys-interaction-hover-color)}:host(:state(pressed)) [interaction-state]{--nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected)}@container style(--nve-sys-color-scheme: dark){:host{--nve-sys-interaction-state-ratio-selected: 16% !important;--nve-sys-interaction-state-ratio-hover: 12% !important}}:host(:state(disabled)){--color: var(--nve-sys-interaction-disabled-color);--cursor: default}:host(:state(disabled)) [interaction-state]{--nve-sys-interaction-state-ratio: 0}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=drag-handle.js.map

package/dist/drag-handle/drag-handle.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-handle.js","names":[],"sources":["../../src/drag-handle/drag-handle.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-state-base: transparent;\n  --cursor: move;\n  --color: var(--nve-sys-text-muted-color);\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  display: inline-flex;\n  user-select: none;\n}\n\n:host([draggable='true']) {\n  -webkit-user-drag: element;\n}\n\n:host(:state(disabled)),\n:host([readonly]) {\n  -webkit-user-drag: none;\n}\n\n[internal-host] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n}\n\nnve-icon {\n  --color: inherit;\n  pointer-events: none;\n}\n\n:host(:state(pressed)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:hover:not(:state(disabled), [readonly], :state(pressed))) {\n  --color: var(--nve-sys-interaction-hover-color);\n}\n\n:host(:state(pressed)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n@container style(--nve-sys-color-scheme: dark) {\n  :host {\n    --nve-sys-interaction-state-ratio-selected: 16% !important;\n    --nve-sys-interaction-state-ratio-hover: 12% !important;\n  }\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: default;\n}\n\n:host(:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"drag-handle.js","names":["drag_handle_default"],"sources":["../../src/drag-handle/drag-handle.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-state-base: transparent;\n  --cursor: move;\n  --color: var(--nve-sys-text-muted-color);\n  --width: var(--nve-ref-size-800);\n  --height: var(--nve-ref-size-800);\n  --border-radius: var(--nve-ref-border-radius-xs);\n  display: inline-flex;\n  user-select: none;\n}\n\n:host([draggable='true']) {\n  -webkit-user-drag: element;\n}\n\n:host(:state(disabled)),\n:host([readonly]) {\n  -webkit-user-drag: none;\n}\n\n[internal-host] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  border-radius: var(--border-radius);\n  cursor: var(--cursor);\n}\n\nnve-icon {\n  --color: inherit;\n  pointer-events: none;\n}\n\n:host(:state(pressed)) {\n  --color: var(--nve-sys-interaction-selected-color);\n}\n\n:host(:hover:not(:state(disabled), [readonly], :state(pressed))) {\n  --color: var(--nve-sys-interaction-hover-color);\n}\n\n:host(:state(pressed)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: var(--nve-sys-interaction-state-ratio-selected);\n}\n\n@container style(--nve-sys-color-scheme: dark) {\n  :host {\n    --nve-sys-interaction-state-ratio-selected: 16% !important;\n    --nve-sys-interaction-state-ratio-hover: 12% !important;\n  }\n}\n\n:host(:state(disabled)) {\n  --color: var(--nve-sys-interaction-disabled-color);\n  --cursor: default;\n}\n\n:host(:state(disabled)) [interaction-state] {\n  --nve-sys-interaction-state-ratio: 0;\n}\n"],"mappings":""}

package/dist/drag-handle/drag-handle2.js

@@ -1,11 +1,11 @@
 import { scopedRegistry as e } from "../internal/decorators/scoped-registry.js";
 import { useStyles as t } from "../internal/styles/index.js";
-import n from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import n from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as r } from "../icon/icon2.js";
 import i from "./drag-handle.js";
 import { LitElement as a, html as o } from "lit";
 import { ButtonFormControlMixin as s } from "@nvidia-elements/forms/mixins";
-//#region src/drag-handle/drag-handle.ts
+// src/drag-handle/drag-handle.ts
 var c = class extends s(a) {
 	static {
 		this.styles = t([i]);
@@ -13,7 +13,7 @@ var c = class extends s(a) {
 	static {
 		this.metadata = {
 			tag: "nve-drag-handle",
-			version: "2.20.0"
+			version: "2.20.2"
 		};
 	}
 	static {
@@ -45,7 +45,6 @@ var c = class extends s(a) {
 	};
 };
 c = n([e()], c);
-//#endregion
 export { c as DragHandle };
 
 //# sourceMappingURL=drag-handle2.js.map

package/dist/drag-handle/drag-handle2.js.map

@@ -1 +1 @@
-{"version":3,"file":"drag-handle2.js","names":[],"sources":["../../src/drag-handle/drag-handle.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './drag-handle.css?inline';\n\n/**\n * @element nve-drag-handle\n * @description A draggable grip button with a native drag preview. Activation toggles the pressed state; the application controls movement.\n * @documentation https://nvidia.github.io/elements/docs/elements/drag-handle/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/drag-handle\n * @cssprop --cursor - The cursor over the handle.\n * @cssprop --color - The grip color.\n * @cssprop --width - The horizontal size of the pointer target.\n * @cssprop --height - The vertical size of the pointer target.\n * @cssprop --border-radius - The handle corner radius.\n * @csspart icon - The fixed grip icon.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class DragHandle extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drag-handle',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  constructor() {\n    super();\n    this.type = 'button';\n    this.pressed = false;\n  }\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <nve-icon name=\"drag\" .appearance=${this.pressed || this.expanded ? 'solid' : 'outline'} aria-hidden=\"true\" part=\"icon\"></nve-icon>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-draggable', 'handle');\n    if (!this.hasAttribute('draggable')) this.draggable = true;\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('dragstart', this.#onDragStart);\n    this.addEventListener('dragend', this.#onDragEnd);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this.#onClick);\n    this.removeEventListener('keydown', this.#onKeydown);\n    this.removeEventListener('dragstart', this.#onDragStart);\n    this.removeEventListener('dragend', this.#onDragEnd);\n    super.disconnectedCallback();\n  }\n\n  #onClick = (event: MouseEvent): void => {\n    if (event.target !== this || event.defaultPrevented || this.disabled || this.readOnly) return;\n\n    this.pressed = !this.pressed;\n  };\n\n  #onDragStart = (event: DragEvent): void => {\n    if (this.disabled || this.readOnly) event.preventDefault();\n  };\n\n  #onDragEnd = (): void => {\n    this._internals.states.delete('active');\n  };\n\n  #onKeydown = (event: KeyboardEvent): void => {\n    if (event.key !== ' ' || event.target !== this || event.defaultPrevented || this.disabled || this.readOnly) {\n      return;\n    }\n\n    event.preventDefault();\n  };\n}\n"],"mappings":";;;;;;;;AAwBO,IAAM,IAAN,cAAyB,EAAuB,CAAU,CAAC,CAAC;;EACjD,KAAA,SAAA,EAAU,CAAC,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAK,SAAS,MAAM,EACvB;;CAEA,cAAc;EAGZ,AAFA,MAAM,GACN,KAAK,OAAO,UACZ,KAAK,UAAU;CACjB;CAEA,SAAS;EACP,OAAO,CAAI,wFAE6B,KAAK,WAAW,KAAK,WAAW,UAAU,UAAU;CAG9F;CAEA,oBAAoB;EAOlB,AANA,MAAM,kBAAkB,GACxB,KAAK,aAAa,iBAAiB,QAAQ,GACtC,KAAK,aAAa,WAAW,MAAG,KAAK,YAAY,KACtD,KAAK,iBAAiB,SAAS,KAAK,EAAQ,GAC5C,KAAK,iBAAiB,WAAW,KAAK,EAAU,GAChD,KAAK,iBAAiB,aAAa,KAAK,EAAY,GACpD,KAAK,iBAAiB,WAAW,KAAK,EAAU;CAClD;CAEA,uBAAuB;EAKrB,AAJA,KAAK,oBAAoB,SAAS,KAAK,EAAQ,GAC/C,KAAK,oBAAoB,WAAW,KAAK,EAAU,GACnD,KAAK,oBAAoB,aAAa,KAAK,EAAY,GACvD,KAAK,oBAAoB,WAAW,KAAK,EAAU,GACnD,MAAM,qBAAqB;CAC7B;CAEA,MAAY,MAA4B;EAClC,EAAM,WAAW,QAAQ,EAAM,oBAAoB,KAAK,YAAY,KAAK,aAE7E,KAAK,UAAU,CAAC,KAAK;CACvB;CAEA,MAAgB,MAA2B;EACzC,CAAI,KAAK,YAAY,KAAK,aAAU,EAAM,eAAe;CAC3D;CAEA,WAAyB;EACvB,KAAK,WAAW,OAAO,OAAO,QAAQ;CACxC;CAEA,MAAc,MAA+B;EACvC,EAAM,QAAQ,OAAO,EAAM,WAAW,QAAQ,EAAM,oBAAoB,KAAK,YAAY,KAAK,YAIlG,EAAM,eAAe;CACvB;AACF;AAlEC,IAAA,EAAA,CAAA,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"drag-handle2.js","names":["styles","_decorate","__decorate","drag_handle_default","DragHandle","ButtonFormControlMixin","LitElement","useStyles","Icon","#onClick","#onKeydown","#onDragStart","#onDragEnd","event","scopedRegistry"],"sources":["../../src/drag-handle/drag-handle.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 { ButtonFormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport { scopedRegistry, useStyles } from '@nvidia-elements/core/internal';\nimport styles from './drag-handle.css?inline';\n\n/**\n * @element nve-drag-handle\n * @description A draggable grip button with a native drag preview. Activation toggles the pressed state; the application controls movement.\n * @documentation https://nvidia.github.io/elements/docs/elements/drag-handle/\n * @since 0.0.0\n * @entrypoint \\@nvidia-elements/core/drag-handle\n * @cssprop --cursor - The cursor over the handle.\n * @cssprop --color - The grip color.\n * @cssprop --width - The horizontal size of the pointer target.\n * @cssprop --height - The vertical size of the pointer target.\n * @cssprop --border-radius - The handle corner radius.\n * @csspart icon - The fixed grip icon.\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/button/\n */\n@scopedRegistry()\nexport class DragHandle extends ButtonFormControlMixin(LitElement) {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drag-handle',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  constructor() {\n    super();\n    this.type = 'button';\n    this.pressed = false;\n  }\n\n  render() {\n    return html`\n      <div internal-host interaction-state focus-within>\n        <nve-icon name=\"drag\" .appearance=${this.pressed || this.expanded ? 'solid' : 'outline'} aria-hidden=\"true\" part=\"icon\"></nve-icon>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('nve-draggable', 'handle');\n    if (!this.hasAttribute('draggable')) this.draggable = true;\n    this.addEventListener('click', this.#onClick);\n    this.addEventListener('keydown', this.#onKeydown);\n    this.addEventListener('dragstart', this.#onDragStart);\n    this.addEventListener('dragend', this.#onDragEnd);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this.#onClick);\n    this.removeEventListener('keydown', this.#onKeydown);\n    this.removeEventListener('dragstart', this.#onDragStart);\n    this.removeEventListener('dragend', this.#onDragEnd);\n    super.disconnectedCallback();\n  }\n\n  #onClick = (event: MouseEvent): void => {\n    if (event.target !== this || event.defaultPrevented || this.disabled || this.readOnly) return;\n\n    this.pressed = !this.pressed;\n  };\n\n  #onDragStart = (event: DragEvent): void => {\n    if (this.disabled || this.readOnly) event.preventDefault();\n  };\n\n  #onDragEnd = (): void => {\n    this._internals.states.delete('active');\n  };\n\n  #onKeydown = (event: KeyboardEvent): void => {\n    if (event.key !== ' ' || event.target !== this || event.defaultPrevented || this.disabled || this.readOnly) {\n      return;\n    }\n\n    event.preventDefault();\n  };\n}\n"],"mappings":";;;;;;;;AAwBO,IAAMI,IAAN,cAAyBC,EAAuBC,CAAU,CAAC,CAAC;;EACjD,KAAA,SAAAC,EAAU,CAACP,CAAM,CAAC;;;EAEP,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBQ,EAAK,SAAS,MAAMA,EACvB;;CAEA,cAAc;EAGZ,AAFA,MAAM,GACN,KAAK,OAAO,UACZ,KAAK,UAAU;CACjB;CAEA,SAAS;EACP,OAAO,CAAI,wFAE6B,KAAK,WAAW,KAAK,WAAW,UAAU,UAAU;CAG9F;CAEA,oBAAoB;EAOlB,AANA,MAAM,kBAAkB,GACxB,KAAK,aAAa,iBAAiB,QAAQ,GACtC,KAAK,aAAa,WAAW,MAAG,KAAK,YAAY,KACtD,KAAK,iBAAiB,SAAS,KAAKC,EAAQ,GAC5C,KAAK,iBAAiB,WAAW,KAAKC,EAAU,GAChD,KAAK,iBAAiB,aAAa,KAAKC,EAAY,GACpD,KAAK,iBAAiB,WAAW,KAAKC,EAAU;CAClD;CAEA,uBAAuB;EAKrB,AAJA,KAAK,oBAAoB,SAAS,KAAKH,EAAQ,GAC/C,KAAK,oBAAoB,WAAW,KAAKC,EAAU,GACnD,KAAK,oBAAoB,aAAa,KAAKC,EAAY,GACvD,KAAK,oBAAoB,WAAW,KAAKC,EAAU,GACnD,MAAM,qBAAqB;CAC7B;CAEA,MAAY,MAA4B;EACtC,AAAIC,EAAM,WAAW,QAAQA,EAAM,oBAAoB,KAAK,YAAY,KAAK,aAE7E,KAAK,UAAU,CAAC,KAAK;CACvB;CAEA,MAAgB,MAA2B;EACzC,CAAI,KAAK,YAAY,KAAK,aAAUA,EAAM,eAAe;CAC3D;CAEA,WAAyB;EACvB,KAAK,WAAW,OAAO,OAAO,QAAQ;CACxC;CAEA,MAAc,MAA+B;EAC3C,AAAIA,EAAM,QAAQ,OAAOA,EAAM,WAAW,QAAQA,EAAM,oBAAoB,KAAK,YAAY,KAAK,YAIlGA,EAAM,eAAe;CACvB;AACF;AAlEC,IAAAZ,EAAA,CAAAa,EAAe,CAAA,GAAAV,CAAA"}

package/dist/drag-handle/index.js

@@ -1,2 +1 @@
-import { DragHandle as e } from "./drag-handle2.js";
-export { e as DragHandle };
+export { DragHandle } from "./drag-handle2.js";