@nvidia-elements/core 2.20.1 → 2.20.3

package/dist/dropdown/dropdown.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.examples.js","names":[],"sources":["../../src/dropdown/dropdown.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\n\nexport default {\n  title: 'Elements/Dropdown',\n  component: 'nve-dropdown'\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.\n */\nexport const Default = {\n  render: () => html`\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  `\n};\n\n/**\n * @summary Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.\n */\nexport const Menu = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Closed dropdowns anchored to a resizable panel. Measure repeated layout before and after opening and dismissing every menu.\n * @tags test-case performance\n */\nexport const ClosedPopoverLayout = {\n  render: () => html`\n<section id=\"closed-popover-layout\" nve-layout=\"column gap:md\">\n  <p nve-text=\"body\">Measure 120 resize/layout operations with 64 closed menus, first fresh and then after dismissal. Lower times mean less work.</p>\n  <nve-button data-run>Run benchmark</nve-button>\n  <p nve-text=\"body\" role=\"status\">Ready. Each run resets the menus; setup time is excluded.</p>\n  <div data-panel nve-layout=\"column gap:sm pad:sm\" style=\"resize: horizontal; overflow: auto; width: 640px; min-width: 320px; max-width: 100%; height: 360px;\">\n    ${Array.from({ length: 64 }, (_, index) => html`\n      <div nve-layout=\"row full:width align:right\">\n        <nve-button popovertarget=${`closed-popover-layout-menu-${index}`}>Menu ${index + 1}</nve-button>\n        <nve-dropdown id=${`closed-popover-layout-menu-${index}`}>Menu ${index + 1} content</nve-dropdown>\n      </div>\n    `)}\n  </div>\n</section>\n<script type=\"module\">\n  const root = document.querySelector('#closed-popover-layout');\n  let panel = root.querySelector('[data-panel]');\n  const template = panel.cloneNode(true);\n  const button = root.querySelector('[data-run]');\n  const status = root.querySelector('[role=\"status\"]');\n\n  function measure() {\n    panel.style.width = '640px';\n    panel.getBoundingClientRect();\n    const start = performance.now();\n    for (let iteration = 0; iteration < 120; iteration++) {\n      panel.style.width = (iteration % 2 ? 800 : 480) + 'px';\n      // Force each width change to finish layout within the measured interval.\n      panel.getBoundingClientRect();\n    }\n    const elapsed = performance.now() - start;\n    return elapsed.toFixed(1) + ' ms (' + (elapsed / 120).toFixed(2) + ' ms/operation)';\n  }\n\n  button.addEventListener('click', async () => {\n    button.disabled = true;\n    status.textContent = 'Running both measurements…';\n    try {\n      const freshPanel = template.cloneNode(true);\n      panel.replaceWith(freshPanel);\n      panel = freshPanel;\n      const menus = Array.from(panel.querySelectorAll('nve-dropdown'));\n      await Promise.all(menus.map(menu => menu.updateComplete));\n      await new Promise(requestAnimationFrame);\n      const fresh = measure();\n      for (const menu of menus) {\n        menu.showPopover({ source: menu.previousElementSibling });\n        // Flush open layout only during preparation so exit transitions can run.\n        menu.getBoundingClientRect();\n        menu.hidePopover();\n      }\n      await new Promise(requestAnimationFrame);\n      await Promise.allSettled(menus.flatMap(menu => menu.getAnimations().map(animation => animation.finished)));\n      const dismissed = measure();\n      status.textContent = '120 resize/layout operations each. Never opened: ' + fresh + '. After dismissal: ' + dismissed + '.';\n    } finally {\n      button.disabled = false;\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">dropdown content</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Event handling for dropdown open and close events. Useful for adding custom behavior when dropdown state changes.\n * @tags test-case\n */\nexport const Events = {\n  inline: false,\n  render: () => html`\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<script type=\"module\">\n  const dropdown = document.querySelector('nve-dropdown');\n  dropdown.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  dropdown.addEventListener('toggle', () => console.log('toggle'));\n  dropdown.addEventListener('open', () => console.log('open'));\n  dropdown.addEventListener('close', () => console.log('close'));\n</script>\n  `\n};\n\n/**\n * @summary Dropdown with closable attribute that allows users to dismiss the dropdown by clicking close button.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\" closable>\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.\n * @tags test-case\n */\nexport const Layout = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-dropdown-header>\n    <h3 nve-text=\"heading semibold sm\">heading</h3>\n  </nve-dropdown-header>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n  <nve-dropdown-footer>\n    <p nve-text=\"body\">footer</p>\n  </nve-dropdown-footer>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.\n * @tags test-case\n */\nexport const MultipleTriggers = {\n  render: () => html`\n<div nve-layout=\"row gap:sm align:center\">\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-dropdown id=\"dropdown\">hello there</nve-dropdown>\n</div>\n  `\n};\n\n/**\n * @summary Dropdown position, with the position attribute controlling placement when the trigger is not visible.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-dropdown anchor=\"card\" position=\"top\" alignment=\"center\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">dropdown positioned top</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"right\" alignment=\"center\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">dropdown positioned right</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"bottom\" alignment=\"center\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">dropdown positioned bottom</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"left\" alignment=\"center\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">dropdown positioned left</p>\n</nve-dropdown>\n<nve-card id=\"card\" style=\"width: 250px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px;\"></nve-card>\n</div>\n  `\n};\n\n/**\n * @summary Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.\n * @tags test-case\n */\nexport const RadioGroup = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-radio-group style=\"width: 250px\">\n    <label>Sort By</label>\n    <nve-radio>\n      <label>Completed</label>\n      <input type=\"radio\" checked />\n      <nve-control-message>latest completed tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Failing</label>\n      <input type=\"radio\" />\n      <nve-control-message>latest failing tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Status</label>\n      <input type=\"radio\" />\n      <nve-control-message>task status priority</nve-control-message>\n    </nve-radio>\n  </nve-radio-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>completed <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.\n * @tags test-case\n */\nexport const CheckboxGroup = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>Test Suites</label>\n    <nve-checkbox>\n      <label>Local</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Nightly</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Remote</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy behavior trigger for dropdown, using the behavior-trigger attribute to open the dropdown on button click.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dropdown-btn\">open</nve-button>\n<nve-dropdown anchor=\"dropdown-btn\" trigger=\"dropdown-btn\" behavior-trigger hidden>\n  <p nve-text=\"body\">hello there</p>\n</nve-dropdown>\n  `\n};\n\n/**\n * @deprecated\n * @summary Dropdown hint, using the tooltip element to display a hint when the dropdown opens.\n * @tags test-case\n */\nexport const Hint = {\n  render: () => html`\n<nve-dropdown id=\"dropdown\">\n  dropdown content\n</nve-dropdown>\n\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.\n * @tags test-case\n */\nexport const PositionFallback = {\n  render: () => html`\n<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\">\n  dropdown content\n</nve-dropdown>\n\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\">\n  dropdown content\n</nve-dropdown>\n\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n  `\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dropdown.examples.js","names":["dropdown_examples_default"],"sources":["../../src/dropdown/dropdown.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/radio/define.js';\nimport '@nvidia-elements/core/checkbox/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\nimport '@nvidia-elements/core/tooltip/define.js';\n\nexport default {\n  title: 'Elements/Dropdown',\n  component: 'nve-dropdown'\n};\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n/**\n * @summary Basic dropdown implementation using popovertarget attribute to connect trigger and dropdown. Useful for simple dropdown menus.\n */\nexport const Default = {\n  render: () => html`\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n  `\n};\n\n/**\n * @summary Dropdown with popover-positioned menu for trigger-based actions. Use for context menus, settings, and user actions where content appears on demand relative to a trigger button.\n */\nexport const Menu = {\n  render: () => html`\n  <nve-button popovertarget=\"dropdown-menu\">dropdown</nve-button>\n  <nve-dropdown id=\"dropdown-menu\">\n    <nve-menu>\n      <nve-menu-item><nve-icon name=\"person\"></nve-icon> profile</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"gear\"></nve-icon> settings</nve-menu-item>\n      <nve-menu-item><nve-icon name=\"star\"></nve-icon> favorites</nve-menu-item>\n      <nve-divider></nve-divider>\n      <nve-menu-item><nve-icon name=\"logout\"></nve-icon> logout</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  `\n};\n\n/**\n * @summary Closed dropdowns anchored to a resizable panel. Measure repeated layout before and after opening and dismissing every menu.\n * @tags test-case performance\n */\nexport const ClosedPopoverLayout = {\n  render: () => html`\n<section id=\"closed-popover-layout\" nve-layout=\"column gap:md\">\n  <p nve-text=\"body\">Measure 120 resize/layout operations with 64 closed menus, first fresh and then after dismissal. Lower times mean less work.</p>\n  <nve-button data-run>Run benchmark</nve-button>\n  <p nve-text=\"body\" role=\"status\">Ready. Each run resets the menus; setup time is excluded.</p>\n  <div data-panel nve-layout=\"column gap:sm pad:sm\" style=\"resize: horizontal; overflow: auto; width: 640px; min-width: 320px; max-width: 100%; height: 360px;\">\n    ${Array.from({ length: 64 }, (_, index) => html`\n      <div nve-layout=\"row full:width align:right\">\n        <nve-button popovertarget=${`closed-popover-layout-menu-${index}`}>Menu ${index + 1}</nve-button>\n        <nve-dropdown id=${`closed-popover-layout-menu-${index}`}>Menu ${index + 1} content</nve-dropdown>\n      </div>\n    `)}\n  </div>\n</section>\n<script type=\"module\">\n  const root = document.querySelector('#closed-popover-layout');\n  let panel = root.querySelector('[data-panel]');\n  const template = panel.cloneNode(true);\n  const button = root.querySelector('[data-run]');\n  const status = root.querySelector('[role=\"status\"]');\n\n  function measure() {\n    panel.style.width = '640px';\n    panel.getBoundingClientRect();\n    const start = performance.now();\n    for (let iteration = 0; iteration < 120; iteration++) {\n      panel.style.width = (iteration % 2 ? 800 : 480) + 'px';\n      // Force each width change to finish layout within the measured interval.\n      panel.getBoundingClientRect();\n    }\n    const elapsed = performance.now() - start;\n    return elapsed.toFixed(1) + ' ms (' + (elapsed / 120).toFixed(2) + ' ms/operation)';\n  }\n\n  button.addEventListener('click', async () => {\n    button.disabled = true;\n    status.textContent = 'Running both measurements…';\n    try {\n      const freshPanel = template.cloneNode(true);\n      panel.replaceWith(freshPanel);\n      panel = freshPanel;\n      const menus = Array.from(panel.querySelectorAll('nve-dropdown'));\n      await Promise.all(menus.map(menu => menu.updateComplete));\n      await new Promise(requestAnimationFrame);\n      const fresh = measure();\n      for (const menu of menus) {\n        menu.showPopover({ source: menu.previousElementSibling });\n        // Flush open layout only during preparation so exit transitions can run.\n        menu.getBoundingClientRect();\n        menu.hidePopover();\n      }\n      await new Promise(requestAnimationFrame);\n      await Promise.allSettled(menus.flatMap(menu => menu.getAnimations().map(animation => animation.finished)));\n      const dismissed = measure();\n      status.textContent = '120 resize/layout operations each. Never opened: ' + fresh + '. After dismissal: ' + dismissed + '.';\n    } finally {\n      button.disabled = false;\n    }\n  });\n</script>\n  `\n};\n\n/**\n * @summary Dropdown using anchor attribute to reference trigger element by ID. Alternative approach for connecting dropdowns to their triggers.\n * @tags test-case\n */\nexport const Visual = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">dropdown content</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Event handling for dropdown open and close events. Useful for adding custom behavior when dropdown state changes.\n * @tags test-case\n */\nexport const Events = {\n  inline: false,\n  render: () => html`\n<nve-dropdown id=\"dropdown\">dropdown content</nve-dropdown>\n<nve-button popovertarget=\"dropdown\">button</nve-button>\n<script type=\"module\">\n  const dropdown = document.querySelector('nve-dropdown');\n  dropdown.addEventListener('beforetoggle', () => console.log('beforetoggle'));\n  dropdown.addEventListener('toggle', () => console.log('toggle'));\n  dropdown.addEventListener('open', () => console.log('open'));\n  dropdown.addEventListener('close', () => console.log('close'));\n</script>\n  `\n};\n\n/**\n * @summary Dropdown with closable attribute that allows users to dismiss the dropdown by clicking close button.\n * @tags test-case\n */\nexport const Closable = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\" closable>\n  <h3 nve-text=\"label\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Dropdown with structured content using header and footer sections. Perfect for complex dropdown content that needs clear visual hierarchy.\n * @tags test-case\n */\nexport const Layout = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-dropdown-header>\n    <h3 nve-text=\"heading semibold sm\">heading</h3>\n  </nve-dropdown-header>\n  <p nve-text=\"body\">some text content in a closable dropdown</p>\n  <nve-dropdown-footer>\n    <p nve-text=\"body\">footer</p>\n  </nve-dropdown-footer>\n</nve-dropdown>\n<nve-button id=\"btn\">button</nve-button>\n  `\n};\n\n/**\n * @summary Dropdown with many triggers, showing how to use the popovertarget attribute to connect many triggers to the same dropdown.\n * @tags test-case\n */\nexport const MultipleTriggers = {\n  render: () => html`\n<div nve-layout=\"row gap:sm align:center\">\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-button popovertarget=\"dropdown\">button</nve-button>\n  <nve-dropdown id=\"dropdown\">hello there</nve-dropdown>\n</div>\n  `\n};\n\n/**\n * @summary Dropdown position, with the position attribute controlling placement when the trigger is not visible.\n * @tags test-case\n */\nexport const Position = {\n  render: () => html`\n<nve-dropdown anchor=\"card\" position=\"top\" alignment=\"center\">\n  <h3 nve-text=\"label\">Top</h3>\n  <p nve-text=\"body\">dropdown positioned top</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"right\" alignment=\"center\">\n  <h3 nve-text=\"label\">Right</h3>\n  <p nve-text=\"body\">dropdown positioned right</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"bottom\" alignment=\"center\">\n  <h3 nve-text=\"label\">Bottom</h3>\n  <p nve-text=\"body\">dropdown positioned bottom</p>\n</nve-dropdown>\n<nve-dropdown anchor=\"card\" position=\"left\" alignment=\"center\">\n  <h3 nve-text=\"label\">Left</h3>\n  <p nve-text=\"body\">dropdown positioned left</p>\n</nve-dropdown>\n<nve-card id=\"card\" style=\"width: 250px; height: 200px;\"></nve-card>\n  `\n};\n\n/**\n * @summary Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.\n * @tags test-case\n */\nexport const Alignment = {\n  render: () => html`\n<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px;\"></nve-card>\n</div>\n  `\n};\n\n/**\n * @summary Dropdown containing a radio group for single-selection options. Perfect for sort controls, filter selections, or preference settings.\n * @tags test-case\n */\nexport const RadioGroup = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-radio-group style=\"width: 250px\">\n    <label>Sort By</label>\n    <nve-radio>\n      <label>Completed</label>\n      <input type=\"radio\" checked />\n      <nve-control-message>latest completed tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Failing</label>\n      <input type=\"radio\" />\n      <nve-control-message>latest failing tasks</nve-control-message>\n    </nve-radio>\n    <nve-radio>\n      <label>Status</label>\n      <input type=\"radio\" />\n      <nve-control-message>task status priority</nve-control-message>\n    </nve-radio>\n  </nve-radio-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>completed <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n  `\n};\n\n/**\n * @summary Dropdown containing a checkbox group for multi-selection options. Ideal for filter controls, feature toggles, or bulk action selections.\n * @tags test-case\n */\nexport const CheckboxGroup = {\n  render: () => html`\n<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>Test Suites</label>\n    <nve-checkbox>\n      <label>Local</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Nightly</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>Remote</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n  `\n};\n\n/* eslint-disable @nvidia-elements/lint/no-deprecated-popover-attributes */\n\n/**\n * @deprecated\n * @summary Legacy behavior trigger for dropdown, using the behavior-trigger attribute to open the dropdown on button click.\n * @tags test-case\n */\nexport const LegacyBehaviorTrigger = {\n  inline: false,\n  render: () => html`\n<nve-button id=\"dropdown-btn\">open</nve-button>\n<nve-dropdown anchor=\"dropdown-btn\" trigger=\"dropdown-btn\" behavior-trigger hidden>\n  <p nve-text=\"body\">hello there</p>\n</nve-dropdown>\n  `\n};\n\n/**\n * @deprecated\n * @summary Dropdown hint, using the tooltip element to display a hint when the dropdown opens.\n * @tags test-case\n */\nexport const Hint = {\n  render: () => html`\n<nve-dropdown id=\"dropdown\">\n  dropdown content\n</nve-dropdown>\n\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n  `\n};\n\n/**\n * @summary Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.\n * @tags test-case\n */\nexport const PositionFallback = {\n  render: () => html`\n<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\">\n  dropdown content\n</nve-dropdown>\n\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\">\n  dropdown content\n</nve-dropdown>\n\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/dropdown/dropdown.js

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

package/dist/dropdown/dropdown.js.map

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

package/dist/dropdown/dropdown2.js

@@ -3,14 +3,14 @@ import { TypeNativePopoverController as t } from "../internal/controllers/type-n
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
 import { popoverStyles as i } from "../internal/styles/popover2.js";
-import a from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import a from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { IconButton as o } from "../icon-button/icon-button2.js";
 import s from "./dropdown.js";
 import { LitElement as c, html as l } from "lit";
 import { property as u } from "lit/decorators/property.js";
 import { I18nController as d } from "@nvidia-elements/foundations/internal/i18n";
 import { query as f } from "lit/decorators/query.js";
-//#region src/dropdown/dropdown.ts
+// src/dropdown/dropdown.ts
 var p = { close: "close" }, m = class extends c {
 	constructor(...e) {
 		super(...e), this.position = "bottom", this.alignment = "start", this.closable = !1, this.arrow = !1, this.modal = !0, this.popoverType = "auto", this.#e = new d(this, p), this.typeNativePopoverController = new t(this), this.i18n = this.#e.i18n;
@@ -21,7 +21,7 @@ var p = { close: "close" }, m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "2.20.1"
+			version: "2.20.3"
 		};
 	}
 	static {
@@ -52,7 +52,6 @@ a([u({ type: String })], m.prototype, "anchor", void 0), a([u({ type: String })]
 	type: String,
 	attribute: "popover-type"
 })], m.prototype, "popoverType", void 0), a([f(".arrow")], m.prototype, "popoverArrow", void 0), a([u({ type: Object })], m.prototype, "i18n", void 0), m = a([e({ excessiveInstanceLimit: 50 }), n()], m);
-//#endregion
 export { m as Dropdown };
 
 //# sourceMappingURL=dropdown2.js.map

package/dist/dropdown/dropdown2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown2.js","names":[],"sources":["../../src/dropdown/dropdown.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  scopedRegistry,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './dropdown.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-dropdown\n * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dropdown\n * @event beforetoggle - Dispatched on a popover just before showing or hiding.\n * @event toggle - Dispatched on a popover element just after showing or hiding.\n * @event open - Dispatched when the dropdown opens.\n * @event close - Dispatched when the dropdown closes.\n * @slot - default slot for dropdown content\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @cssprop --animation-duration - Duration of dropdown open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dropdown extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\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;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'bottom';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alginment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'start';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within dropdown. Non-closable\n   * dropdowns suit menu or selection patterns.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines if an arrow renders.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /** @private */\n  @property({ type: Boolean, reflect: true }) modal = true;\n\n  /** @private */\n  @property({ type: String, attribute: 'popover-type' }) popoverType: PopoverType = 'auto';\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Dropdown>(this);\n\n  /** @private */\n  get popoverDismissible() {\n    return this.modal;\n  }\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot name=\"header\"></slot>\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n      ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n    </div>\n  `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAM,IAAe,EACnB,OAAO,QACT,GA6Ba,IAAN,cAAuB,EAAW;;EA0EJ,aA9CoC,KAAA,WAAA,UAMF,KAAA,YAAA,SAY7B,KAAA,WAAA,IAKH,KAAA,QAAA,IAGe,KAAA,QAAA,IAG8B,KAAA,cAAA,QAK1C,KAAA,KAAA,IAAI,EAAqB,MAAM,CAAY,GAE3C,KAAA,8BAAA,IAAI,EAAsC,IAAI,GAUnD,KAAA,OAAA,KAAK,GAAgB;;;EAzExC,KAAA,SAAA,EAAU,CAAC,GAAe,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzB,EAAW,SAAS,MAAM,EAC7B;;CAoDA;CAKA,IAAI,qBAAqB;EACvB,OAAO,KAAK;CACd;CAOA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,0CAG7N,KAAK,QAAQ,CAAI,8BAA8B,GAAG;CAGxD;AACF;AAvEG,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzB,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAMxE,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1B,EAAA,CAAA,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAG1B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAe,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAGpD,EAAA,CAAA,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAcd,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GA5E3B,IAAA,EAAA,CAAA,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChC,EAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"dropdown2.js","names":["styles","_decorate","__decorate","dropdown_default","i18nDefaults","Dropdown","LitElement","_args","#i18nController","I18nController","TypeNativePopoverController","useStyles","popoverStyles","IconButton","property","query","audit","scopedRegistry"],"sources":["../../src/dropdown/dropdown.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport type { PopoverAlign, PopoverPosition, PopoverType } from '@nvidia-elements/core/internal';\nimport {\n  audit,\n  excessiveInstanceLimit,\n  popoverStyles,\n  scopedRegistry,\n  TypeNativePopoverController,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport styles from './dropdown.css?inline';\n\nconst i18nDefaults = {\n  close: 'close'\n} satisfies I18nDefaults;\n\n/**\n * @element nve-dropdown\n * @description Generic dropdown element for rendering a variety of different content such as interactive navigation or form controls.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown/\n * @since 0.6.0\n * @entrypoint \\@nvidia-elements/core/dropdown\n * @event beforetoggle - Dispatched on a popover just before showing or hiding.\n * @event toggle - Dispatched on a popover element just after showing or hiding.\n * @event open - Dispatched when the dropdown opens.\n * @event close - Dispatched when the dropdown closes.\n * @slot - default slot for dropdown content\n * @cssprop --border\n * @cssprop --border-radius\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --width\n * @cssprop --min-width\n * @cssprop --gap\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @cssprop --animation-duration - Duration of dropdown open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit({ excessiveInstanceLimit })\n@scopedRegistry()\nexport class Dropdown extends LitElement {\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\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;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   */\n  @property({ type: String, reflect: true }) position: PopoverPosition = 'bottom';\n\n  /**\n   * Sets the alignment of the popover relative to the provided anchor element.\n   * If an arrow exists the alginment will be relative to the arrow against the anchor.\n   */\n  @property({ type: String, reflect: true }) alignment: PopoverAlign = 'start';\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  /**\n   * Determines if a close button should render within dropdown. Non-closable\n   * dropdowns suit menu or selection patterns.\n   */\n  @property({ type: Boolean }) closable = false;\n\n  /**\n   * Determines if an arrow renders.\n   */\n  @property({ type: Boolean }) arrow = false;\n\n  /** @private */\n  @property({ type: Boolean, reflect: true }) modal = true;\n\n  /** @private */\n  @property({ type: String, attribute: 'popover-type' }) popoverType: PopoverType = 'auto';\n\n  /** @private */\n  @query('.arrow') popoverArrow: HTMLElement;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this, i18nDefaults);\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Dropdown>(this);\n\n  /** @private */\n  get popoverDismissible() {\n    return this.modal;\n  }\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  render() {\n    return html`\n    <div internal-host>\n      <slot name=\"header\"></slot>\n      ${this.closable ? html`<nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" @click=${this.hidePopover} icon-name=\"cancel\" container=\"flat\" size=\"sm\" .ariaLabel=${this.i18n.close}></nve-icon-button>` : ''}\n      <slot></slot>\n      <slot name=\"footer\"></slot>\n      ${this.arrow ? html`<div class=\"arrow\"></div>` : ''}\n    </div>\n  `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AAmBA,IAAMI,IAAe,EACnB,OAAO,QACT,GA6BaC,IAAN,cAAuBC,EAAW;;EA0EJ,A,aA9CoC,KAAA,WAAA,UAMF,KAAA,YAAA,SAY7B,KAAA,WAAA,IAKH,KAAA,QAAA,IAGe,KAAA,QAAA,IAG8B,KAAA,cAAA,QAK1C,KAAAE,KAAA,IAAIC,EAAqB,MAAML,CAAY,GAE3C,KAAA,8BAAA,IAAIM,EAAsC,IAAI,GAUnD,KAAA,OAAA,KAAKF,GAAgB;;;EAzExC,KAAA,SAAAG,EAAU,CAACC,GAAeZ,CAAM,CAAC;;;EAEtB,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;EACX;;;EAE4B,KAAA,qBAAA,GACzBa,EAAW,SAAS,MAAMA,EAC7B;;CAoDA;CAKA,IAAI,qBAAqB;EACvB,OAAO,KAAK;CACd;CAOA,SAAS;EACP,OAAO,CAAI,iDAGP,KAAK,WAAW,CAAI,mFAAkF,KAAK,YAAY,8DAA4D,KAAK,KAAK,MAAM,wBAAuB,GAAG,0CAG7N,KAAK,QAAQ,CAAI,8BAA8B,GAAG;CAGxD;AACF;AAvEGZ,EAAA,CAAAa,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,UAAA,KAAA,CAAA,GAOzBJ,EAAA,CAAAa,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,WAAA,KAAA,CAAA,GAKzBJ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,YAAA,KAAA,CAAA,GAMxCJ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,aAAA,KAAA,CAAA,GAMxCJ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAmB,CAAC,CAAA,GAAAT,EAAA,WAAA,mBAAA,KAAA,CAAA,GAMxEJ,EAAA,CAAAa,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAT,EAAA,WAAA,YAAA,KAAA,CAAA,GAK1BJ,EAAA,CAAAa,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAAT,EAAA,WAAA,SAAA,KAAA,CAAA,GAG1BJ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAAT,EAAA,WAAA,SAAA,KAAA,CAAA,GAGzCJ,EAAA,CAAAa,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAe,CAAC,CAAA,GAAAT,EAAA,WAAA,eAAA,KAAA,CAAA,GAGpDJ,EAAA,CAAAc,EAAM,QAAQ,CAAA,GAAAV,EAAA,WAAA,gBAAA,KAAA,CAAA,GAcdJ,EAAA,CAAAa,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAAT,EAAA,WAAA,QAAA,KAAA,CAAA,GA5E3B,IAAAJ,EAAA,CAAAe,EAAM,EAAE,wBAAA,GAAuB,CAAC,GAChCC,EAAe,CAAA,GAAAZ,CAAA"}

package/dist/dropdown-group/define.js

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

package/dist/dropdown-group/define.js.map

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

package/dist/dropdown-group/dropdown-group.examples.js

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

package/dist/dropdown-group/dropdown-group.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.examples.js","names":[],"sources":["../../src/dropdown-group/dropdown-group.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/dropdown-group/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\n\nexport default {\n  title: 'Elements/Dropdown Group',\n  component: 'nve-dropdown-group',\n};\n\n/**\n * @summary Cascading dropdown menu group with nested submenus for hierarchical navigation.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button popovertarget=\"menu-1\">menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item popovertarget=\"menu-3\">\n            item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 2-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with disabled menu items in non-interactive states.\n */\nexport const WithDisabledItems = {\n  render: () => html`\n    <nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"disabled-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"disabled-menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item disabled>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item disabled>item 2-2</nve-menu-item>\n          <nve-menu-item popovertarget=\"disabled-menu-3\">\n            item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item disabled>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with leading icons for visual identification of menu item types.\n */\nexport const WithIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"icon-menu-2\">\n            <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"icon-menu-3\">\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.\n */\nexport const WithMoreIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"more-icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"more-icon-menu-2\">\n            <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"more-icon-menu-3\">\n            <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dropdown-group.examples.js","names":["dropdown_group_examples_default"],"sources":["../../src/dropdown-group/dropdown-group.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/dropdown-group/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\n\nexport default {\n  title: 'Elements/Dropdown Group',\n  component: 'nve-dropdown-group',\n};\n\n/**\n * @summary Cascading dropdown menu group with nested submenus for hierarchical navigation.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button popovertarget=\"menu-1\">menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item popovertarget=\"menu-3\">\n            item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 2-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with disabled menu items in non-interactive states.\n */\nexport const WithDisabledItems = {\n  render: () => html`\n    <nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"disabled-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"disabled-menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item disabled>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item disabled>item 2-2</nve-menu-item>\n          <nve-menu-item popovertarget=\"disabled-menu-3\">\n            item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item disabled>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with leading icons for visual identification of menu item types.\n */\nexport const WithIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"icon-menu-2\">\n            <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"icon-menu-3\">\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.\n */\nexport const WithMoreIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"more-icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"more-icon-menu-2\">\n            <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"more-icon-menu-3\">\n            <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/dropdown-group/dropdown-group.global.js

@@ -1,6 +1,5 @@
-//#region src/dropdown-group/dropdown-group.global.css?inline
+// src/dropdown-group/dropdown-group.global.css?inline
 var e = "nve-dropdown-group>nve-dropdown+nve-dropdown{--nve-sys-layer-popover-offset: calc(var(--nve-ref-size-400) + 2px);margin-block-start:calc(var(--nve-ref-size-400) * -1)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=dropdown-group.global.js.map

package/dist/dropdown-group/dropdown-group.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.global.js","names":[],"sources":["../../src/dropdown-group/dropdown-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-dropdown-group > nve-dropdown + nve-dropdown {\n  --nve-sys-layer-popover-offset: calc(var(--nve-ref-size-400) + 2px);\n  margin-block-start: calc(var(--nve-ref-size-400) * -1);\n}\n"],"mappings":""}
+{"version":3,"file":"dropdown-group.global.js","names":["dropdown_group_global_default"],"sources":["../../src/dropdown-group/dropdown-group.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-dropdown-group > nve-dropdown + nve-dropdown {\n  --nve-sys-layer-popover-offset: calc(var(--nve-ref-size-400) + 2px);\n  margin-block-start: calc(var(--nve-ref-size-400) * -1);\n}\n"],"mappings":""}

package/dist/dropdown-group/dropdown-group.js

@@ -2,11 +2,11 @@ import { audit as e } from "../internal/controllers/audit.controller.js";
 import { isSimpleFocusable as t } from "../internal/utils/focus.js";
 import { appendRootNodeStyle as n, clickOutsideElementBounds as r, getFlattenedFocusableItems as i } from "../internal/utils/dom.js";
 import { useStyles as a } from "../internal/styles/index.js";
-import o from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import s from "./dropdown-group.global.js";
 import { LitElement as c, html as l } from "lit";
 import { queryAssignedElements as u } from "lit/decorators/query-assigned-elements.js";
-//#region src/dropdown-group/dropdown-group.ts
+// src/dropdown-group/dropdown-group.ts
 var d = class extends c {
 	static {
 		this.styles = a([]);
@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "2.20.1",
+			version: "2.20.3",
 			children: ["nve-dropdown"]
 		};
 	}
@@ -58,7 +58,6 @@ var d = class extends c {
 	}
 };
 o([u()], d.prototype, "dropdowns", void 0), d = o([e()], d);
-//#endregion
 export { d as DropdownGroup };
 
 //# sourceMappingURL=dropdown-group.js.map

package/dist/dropdown-group/dropdown-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","names":[],"sources":["../../src/dropdown-group/dropdown-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  clickOutsideElementBounds,\n  appendRootNodeStyle,\n  getFlattenedFocusableItems,\n  isSimpleFocusable,\n  useStyles,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n  static styles = useStyles([]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-group',\n    version: '0.0.0',\n    children: ['nve-dropdown']\n  };\n\n  @queryAssignedElements() protected dropdowns!: Dropdown[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncDropdowns}></slot>\n      </div>\n    `;\n  }\n\n  #_pointerup = (e: PointerEvent) => this.#pointerup(e);\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    globalThis.document?.addEventListener('pointerup', this.#_pointerup);\n    this.addEventListener('keydown', this.#keydown);\n    this.addEventListener('open', this.#onOpen as EventListener);\n    this.addEventListener('close', this.#onClose as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.document?.removeEventListener('pointerup', this.#_pointerup);\n    this.removeEventListener('keydown', this.#keydown);\n    this.removeEventListener('open', this.#onOpen as EventListener);\n    this.removeEventListener('close', this.#onClose as EventListener);\n  }\n\n  #syncDropdowns() {\n    this.dropdowns.forEach(dropdown => {\n      dropdown.popoverType = 'manual';\n    });\n  }\n\n  #pointerup(event: PointerEvent) {\n    const multipleDropdownsOpen = this.dropdowns.some(dropdown => dropdown.matches(':popover-open'));\n    const pointerIsOutsideGroup = this.dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown));\n    if (multipleDropdownsOpen && pointerIsOutsideGroup) {\n      this.close();\n    }\n  }\n\n  #keydown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    if (event.code === 'Escape') {\n      this.close();\n    }\n    if (event.code === 'ArrowRight') {\n      const targetId = target.getAttribute('popovertarget');\n      const dropdown = this.dropdowns.find(d => d.id === targetId);\n      dropdown?.showPopover();\n    }\n    if (event.code === 'ArrowLeft' && isSimpleFocusable(event.target as HTMLElement)) {\n      target.closest('nve-dropdown')?.hidePopover();\n    }\n  }\n\n  #onOpen(event: CustomEvent) {\n    const dropdown = event.target as HTMLElement;\n    const isLocalDropdown = dropdown.localName === 'nve-dropdown' && this.dropdowns.find(d => d === dropdown);\n    if (isLocalDropdown) {\n      getFlattenedFocusableItems(dropdown)[0]?.focus();\n    }\n  }\n\n  #onClose(event: CustomEvent) {\n    const element = event.target as HTMLElement;\n    const isLocalDropdown = element.localName === 'nve-dropdown' && this.dropdowns.find(d => d === element);\n    if (isLocalDropdown) {\n      // _activeTrigger is a popover controller internal API\n      const dropdown = element as Dropdown & { _activeTrigger?: HTMLElement };\n      dropdown._activeTrigger?.focus();\n    }\n  }\n\n  /** Closes every descendant dropdown in the group. */\n  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA6BO,IAAM,IAAN,cAA4B,EAAW;;EAC5B,KAAA,SAAA,EAAU,CAAC,CAAC;;;EAED,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,cAAc;EAC3B;;CAIA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAK,GAAe;CAG9C;CAEA,MAAe,MAAoB,KAAK,GAAW,CAAC;CAEpD,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxB,EAAoB,MAAM,CAAY,GACtC,WAAW,UAAU,iBAAiB,aAAa,KAAK,EAAW,GACnE,KAAK,iBAAiB,WAAW,KAAK,EAAQ,GAC9C,KAAK,iBAAiB,QAAQ,KAAK,EAAwB,GAC3D,KAAK,iBAAiB,SAAS,KAAK,EAAyB;CAC/D;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GAC3B,WAAW,UAAU,oBAAoB,aAAa,KAAK,EAAW,GACtE,KAAK,oBAAoB,WAAW,KAAK,EAAQ,GACjD,KAAK,oBAAoB,QAAQ,KAAK,EAAwB,GAC9D,KAAK,oBAAoB,SAAS,KAAK,EAAyB;CAClE;CAEA,KAAiB;EACf,KAAK,UAAU,SAAQ,MAAY;GACjC,EAAS,cAAc;EACzB,CAAC;CACH;CAEA,GAAW,GAAqB;EAC9B,IAAM,IAAwB,KAAK,UAAU,MAAK,MAAY,EAAS,QAAQ,eAAe,CAAC,GACzF,IAAwB,KAAK,UAAU,OAAM,MAAY,EAA0B,GAAO,CAAQ,CAAC;EACzG,AAAI,KAAyB,KAC3B,KAAK,MAAM;CAEf;CAEA,GAAS,GAAsB;EAC7B,IAAM,IAAS,EAAM;EAIrB,IAHI,EAAM,SAAS,YACjB,KAAK,MAAM,GAET,EAAM,SAAS,cAAc;GAC/B,IAAM,IAAW,EAAO,aAAa,eAAe;GAEpD,KADsB,UAAU,MAAK,MAAK,EAAE,OAAO,CACnD,CAAA,EAAU,YAAY;EACxB;EACA,AAAI,EAAM,SAAS,eAAe,EAAkB,EAAM,MAAqB,KAC7E,EAAO,QAAQ,cAAc,CAAC,EAAE,YAAY;CAEhD;CAEA,GAAQ,GAAoB;EAC1B,IAAM,IAAW,EAAM;EAEvB,AADwB,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,CAAQ,KAEtG,EAA2B,CAAQ,CAAC,CAAC,EAAE,EAAE,MAAM;CAEnD;CAEA,GAAS,GAAoB;EAC3B,IAAM,IAAU,EAAM;EAEtB,AADwB,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,CAAO,KAIpG,EAAS,gBAAgB,MAAM;CAEnC;CAGA,QAAQ;EACN,KAAK,iBAAiB,cAAc,CAAC,CAAC,SAAQ,MAAK,EAAE,YAAY,CAAC;CACpE;AACF;AAhFG,EAAA,CAAA,EAAsB,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAVxB,IAAA,EAAA,CAAA,EAAM,CAAA,GAAA,CAAA"}
+{"version":3,"file":"dropdown-group.js","names":["globalStyles","_decorate","__decorate","dropdown_group_global_default","DropdownGroup","LitElement","useStyles","#syncDropdowns","#pointerup","appendRootNodeStyle","#_pointerup","#keydown","#onOpen","#onClose","multipleDropdownsOpen","dropdown","pointerIsOutsideGroup","clickOutsideElementBounds","event","target","targetId","d","isSimpleFocusable","getFlattenedFocusableItems","element","queryAssignedElements","audit"],"sources":["../../src/dropdown-group/dropdown-group.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 { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  clickOutsideElementBounds,\n  appendRootNodeStyle,\n  getFlattenedFocusableItems,\n  isSimpleFocusable,\n  useStyles,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n  static styles = useStyles([]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-group',\n    version: '0.0.0',\n    children: ['nve-dropdown']\n  };\n\n  @queryAssignedElements() protected dropdowns!: Dropdown[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncDropdowns}></slot>\n      </div>\n    `;\n  }\n\n  #_pointerup = (e: PointerEvent) => this.#pointerup(e);\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    globalThis.document?.addEventListener('pointerup', this.#_pointerup);\n    this.addEventListener('keydown', this.#keydown);\n    this.addEventListener('open', this.#onOpen as EventListener);\n    this.addEventListener('close', this.#onClose as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.document?.removeEventListener('pointerup', this.#_pointerup);\n    this.removeEventListener('keydown', this.#keydown);\n    this.removeEventListener('open', this.#onOpen as EventListener);\n    this.removeEventListener('close', this.#onClose as EventListener);\n  }\n\n  #syncDropdowns() {\n    this.dropdowns.forEach(dropdown => {\n      dropdown.popoverType = 'manual';\n    });\n  }\n\n  #pointerup(event: PointerEvent) {\n    const multipleDropdownsOpen = this.dropdowns.some(dropdown => dropdown.matches(':popover-open'));\n    const pointerIsOutsideGroup = this.dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown));\n    if (multipleDropdownsOpen && pointerIsOutsideGroup) {\n      this.close();\n    }\n  }\n\n  #keydown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    if (event.code === 'Escape') {\n      this.close();\n    }\n    if (event.code === 'ArrowRight') {\n      const targetId = target.getAttribute('popovertarget');\n      const dropdown = this.dropdowns.find(d => d.id === targetId);\n      dropdown?.showPopover();\n    }\n    if (event.code === 'ArrowLeft' && isSimpleFocusable(event.target as HTMLElement)) {\n      target.closest('nve-dropdown')?.hidePopover();\n    }\n  }\n\n  #onOpen(event: CustomEvent) {\n    const dropdown = event.target as HTMLElement;\n    const isLocalDropdown = dropdown.localName === 'nve-dropdown' && this.dropdowns.find(d => d === dropdown);\n    if (isLocalDropdown) {\n      getFlattenedFocusableItems(dropdown)[0]?.focus();\n    }\n  }\n\n  #onClose(event: CustomEvent) {\n    const element = event.target as HTMLElement;\n    const isLocalDropdown = element.localName === 'nve-dropdown' && this.dropdowns.find(d => d === element);\n    if (isLocalDropdown) {\n      // _activeTrigger is a popover controller internal API\n      const dropdown = element as Dropdown & { _activeTrigger?: HTMLElement };\n      dropdown._activeTrigger?.focus();\n    }\n  }\n\n  /** Closes every descendant dropdown in the group. */\n  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA6BO,IAAMI,IAAN,cAA4BC,EAAW;;EAC5B,KAAA,SAAAC,EAAU,CAAC,CAAC;;;EAED,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,cAAc;EAC3B;;CAIA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAKC,GAAe;CAG9C;CAEA,MAAe,MAAoB,KAAKC,GAAW,CAAC;CAEpD,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxBC,EAAoB,MAAMT,CAAY,GACtC,WAAW,UAAU,iBAAiB,aAAa,KAAKU,EAAW,GACnE,KAAK,iBAAiB,WAAW,KAAKC,EAAQ,GAC9C,KAAK,iBAAiB,QAAQ,KAAKC,EAAwB,GAC3D,KAAK,iBAAiB,SAAS,KAAKC,EAAyB;CAC/D;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GAC3B,WAAW,UAAU,oBAAoB,aAAa,KAAKH,EAAW,GACtE,KAAK,oBAAoB,WAAW,KAAKC,EAAQ,GACjD,KAAK,oBAAoB,QAAQ,KAAKC,EAAwB,GAC9D,KAAK,oBAAoB,SAAS,KAAKC,EAAyB;CAClE;CAEA,KAAiB;EACf,KAAK,UAAU,SAAQ,MAAY;GACjC,EAAS,cAAc;EACzB,CAAC;CACH;CAEA,GAAW,GAAqB;EAC9B,IAAMC,IAAwB,KAAK,UAAU,MAAK,MAAYC,EAAS,QAAQ,eAAe,CAAC,GACzFC,IAAwB,KAAK,UAAU,OAAM,MAAYC,EAA0BC,GAAOH,CAAQ,CAAC;EACzG,AAAID,KAAyBE,KAC3B,KAAK,MAAM;CAEf;CAEA,GAAS,GAAsB;EAC7B,IAAMG,IAASD,EAAM;EAIrB,IAHIA,EAAM,SAAS,YACjB,KAAK,MAAM,GAETA,EAAM,SAAS,cAAc;GAC/B,IAAME,IAAWD,EAAO,aAAa,eAAe;GAEpD,KADsB,UAAU,MAAK,MAAKE,EAAE,OAAOD,CACnD,CAAA,EAAU,YAAY;EACxB;EACA,AAAIF,EAAM,SAAS,eAAeI,EAAkBJ,EAAM,MAAqB,KAC7EC,EAAO,QAAQ,cAAc,CAAC,EAAE,YAAY;CAEhD;CAEA,GAAQ,GAAoB;EAC1B,IAAMJ,IAAWG,EAAM;EAEvB,AADwBH,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAKM,MAAMN,CAAQ,KAEtGQ,EAA2BR,CAAQ,CAAC,CAAC,EAAE,EAAE,MAAM;CAEnD;CAEA,GAAS,GAAoB;EAC3B,IAAMS,IAAUN,EAAM;EAEtB,AADwBM,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAKH,MAAMG,CAAO,KAIpGA,EAAS,gBAAgB,MAAM;CAEnC;CAGA,QAAQ;EACN,KAAK,iBAAiB,cAAc,CAAC,CAAC,SAAQ,MAAKH,EAAE,YAAY,CAAC;CACpE;AACF;AAhFGpB,EAAA,CAAAwB,EAAsB,CAAA,GAAArB,EAAA,WAAA,aAAA,KAAA,CAAA,GAVxB,IAAAH,EAAA,CAAAyB,EAAM,CAAA,GAAAtB,CAAA"}

package/dist/dropdown-group/index.js

@@ -1,2 +1 @@
-import { DropdownGroup as e } from "./dropdown-group.js";
-export { e as DropdownGroup };
+export { DropdownGroup } from "./dropdown-group.js";

package/dist/dropzone/define.js

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

package/dist/dropzone/define.js.map

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

package/dist/dropzone/dropzone.examples.js

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

package/dist/dropzone/dropzone.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.examples.js","names":[],"sources":["../../src/dropzone/dropzone.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropzone/define.js';\n\nexport default {\n  title: 'Elements/Dropzone',\n  component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n * @tags theme\n */\nexport const Icon = {\n  render: () => html`\n<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n  dropzone.addEventListener('change', e => {\n    console.log('change', e.target.value);\n    const files = e.target.value;\n    console.log('Validity:', e.target.validity);\n    console.log('Validation Message:', e.target.validationMessage);\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll('files');\n\n    if (form.checkValidity()) {\n      console.log('Form submitted successfully!');\n    } else {\n      console.log('Form validation failed');\n    }\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"dropzone.examples.js","names":["dropzone_examples_default"],"sources":["../../src/dropzone/dropzone.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/dropzone/define.js';\n\nexport default {\n  title: 'Elements/Dropzone',\n  component: 'nve-dropzone'\n};\n\n/**\n * @summary Basic file dropzone with drag-and-drop area for file upload interactions.\n */\nexport const Default = {\n  render: () => html`\n<nve-dropzone name=\"files\" style=\"--min-height: 200px;\"></nve-dropzone>`\n};\n\n/**\n * @summary Dropzone with custom icon slot showing visual feedback on hover and highlight states.\n * @tags theme\n */\nexport const Icon = {\n  render: () => html`\n<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n`\n};\n\n/**\n * @summary Dropzone integrated with form validation showing file type and size constraint errors.\n */\nexport const Form = {\n  render: () => html`\n<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector('#form-demo');\n  const dropzone = document.querySelector('#form-demo nve-dropzone');\n\n  dropzone.addEventListener('change', e => {\n    console.log('change', e.target.value);\n    const files = e.target.value;\n    console.log('Validity:', e.target.validity);\n    console.log('Validation Message:', e.target.validationMessage);\n  });\n\n  form.addEventListener('submit', e => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll('files');\n\n    if (form.checkValidity()) {\n      console.log('Form submitted successfully!');\n    } else {\n      console.log('Form validation failed');\n    }\n  });\n</script>\n`\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

package/dist/dropzone/dropzone.js

@@ -1,6 +1,5 @@
-//#region src/dropzone/dropzone.css?inline
+// src/dropzone/dropzone.css?inline
 var e = ":host{--background: inherit;--min-height: 50px;--border-radius: var(--nve-ref-border-radius-xs);--border-color: var(--nve-ref-border-color);--padding: var(--nve-ref-space-lg)}[internal-host]{display:flex;flex-direction:column;gap:var(--nve-ref-space-md)}.container{background:var(--background);border-radius:var(--border-radius);justify-content:center;gap:var(--nve-ref-space-xs);min-height:var(--min-height);padding:var(--padding);color:var(--nve-sys-text-color);position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;user-select:none}.dropzone-border{border-radius:var(--border-radius);color:var(--border-color);position:absolute;inset:0}.icon{padding:var(--nve-ref-space-xs);border-radius:var(--nve-ref-border-radius-sm);background:var(--nve-sys-layer-canvas-accent-background)}slot[name=icon]::slotted(*){padding:var(--nve-ref-space-xs);border-radius:var(--nve-ref-border-radius-sm);background:var(--nve-sys-layer-canvas-accent-background)}.text-emphasized{color:var(--nve-sys-text-emphasis-color)}.dropzone-text-center{text-align:center;line-height:var(--nve-ref-font-line-height-relaxed);font-size:var(--nve-ref-font-size-200)}.dropzone-text-center:first-letter{text-transform:capitalize}.dropzone-text-bold{font-weight:var(--nve-ref-font-weight-semibold)}.text-muted{color:var(--nve-sys-text-muted-color);font-size:var(--nve-ref-font-size-100);font-weight:var(--nve-ref-font-weight-regular)}:host([highlighted]),:host(:hover){--background: color-mix(in oklab, transparent, var(--nve-sys-accent-secondary-background) 20%);--border-color: var(--nve-ref-border-color-emphasis);.icon{background:var(--nve-sys-accent-secondary-background);--color: var(--nve-sys-text-white-color)}slot[name=icon]::slotted(*){background:var(--nve-sys-accent-secondary-background);--color: var(--nve-sys-text-white-color)}.text-emphasized{color:var(--nve-sys-text-color)}}:host([highlighted]),:host(:active){--background: color-mix(in oklab, transparent, var(--nve-sys-accent-secondary-background) 30%)}";
-//#endregion
 export { e as default };
 
 //# sourceMappingURL=dropzone.js.map

package/dist/dropzone/dropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.js","names":[],"sources":["../../src/dropzone/dropzone.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: inherit;\n  --min-height: 50px;\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-color: var(--nve-ref-border-color);\n  --padding: var(--nve-ref-space-lg);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nve-ref-space-md);\n}\n\n.container {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  justify-content: center;\n  gap: var(--nve-ref-space-xs);\n  min-height: var(--min-height);\n  padding: var(--padding);\n  color: var(--nve-sys-text-color);\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  user-select: none;\n}\n\n.dropzone-border {\n  border-radius: var(--border-radius);\n  color: var(--border-color);\n  position: absolute;\n  inset: 0;\n}\n\n.icon {\n  padding: var(--nve-ref-space-xs);\n  border-radius: var(--nve-ref-border-radius-sm);\n  background: var(--nve-sys-layer-canvas-accent-background);\n}\n\nslot[name='icon']::slotted(*) {\n  padding: var(--nve-ref-space-xs);\n  border-radius: var(--nve-ref-border-radius-sm);\n  background: var(--nve-sys-layer-canvas-accent-background);\n}\n\n.text-emphasized {\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n.dropzone-text-center {\n  text-align: center;\n  line-height: var(--nve-ref-font-line-height-relaxed);\n  font-size: var(--nve-ref-font-size-200);\n}\n\n.dropzone-text-center::first-letter {\n  text-transform: capitalize;\n}\n\n.dropzone-text-bold {\n  font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n.text-muted {\n  color: var(--nve-sys-text-muted-color);\n  font-size: var(--nve-ref-font-size-100);\n  font-weight: var(--nve-ref-font-weight-regular);\n}\n\n:host([highlighted]),\n:host(:hover) {\n  --background: color-mix(in oklab, transparent, var(--nve-sys-accent-secondary-background) 20%);\n  --border-color: var(--nve-ref-border-color-emphasis);\n\n  .icon {\n    background: var(--nve-sys-accent-secondary-background);\n    --color: var(--nve-sys-text-white-color);\n  }\n\n  slot[name='icon']::slotted(*) {\n    background: var(--nve-sys-accent-secondary-background);\n    --color: var(--nve-sys-text-white-color);\n  }\n\n  .text-emphasized {\n    color: var(--nve-sys-text-color);\n  }\n}\n\n:host([highlighted]),\n:host(:active) {\n  --background: color-mix(in oklab, transparent, var(--nve-sys-accent-secondary-background) 30%);\n}\n"],"mappings":""}
+{"version":3,"file":"dropzone.js","names":["dropzone_default"],"sources":["../../src/dropzone/dropzone.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --background: inherit;\n  --min-height: 50px;\n  --border-radius: var(--nve-ref-border-radius-xs);\n  --border-color: var(--nve-ref-border-color);\n  --padding: var(--nve-ref-space-lg);\n}\n\n[internal-host] {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nve-ref-space-md);\n}\n\n.container {\n  background: var(--background);\n  border-radius: var(--border-radius);\n  justify-content: center;\n  gap: var(--nve-ref-space-xs);\n  min-height: var(--min-height);\n  padding: var(--padding);\n  color: var(--nve-sys-text-color);\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  user-select: none;\n}\n\n.dropzone-border {\n  border-radius: var(--border-radius);\n  color: var(--border-color);\n  position: absolute;\n  inset: 0;\n}\n\n.icon {\n  padding: var(--nve-ref-space-xs);\n  border-radius: var(--nve-ref-border-radius-sm);\n  background: var(--nve-sys-layer-canvas-accent-background);\n}\n\nslot[name='icon']::slotted(*) {\n  padding: var(--nve-ref-space-xs);\n  border-radius: var(--nve-ref-border-radius-sm);\n  background: var(--nve-sys-layer-canvas-accent-background);\n}\n\n.text-emphasized {\n  color: var(--nve-sys-text-emphasis-color);\n}\n\n.dropzone-text-center {\n  text-align: center;\n  line-height: var(--nve-ref-font-line-height-relaxed);\n  font-size: var(--nve-ref-font-size-200);\n}\n\n.dropzone-text-center::first-letter {\n  text-transform: capitalize;\n}\n\n.dropzone-text-bold {\n  font-weight: var(--nve-ref-font-weight-semibold);\n}\n\n.text-muted {\n  color: var(--nve-sys-text-muted-color);\n  font-size: var(--nve-ref-font-size-100);\n  font-weight: var(--nve-ref-font-weight-regular);\n}\n\n:host([highlighted]),\n:host(:hover) {\n  --background: color-mix(in oklab, transparent, var(--nve-sys-accent-secondary-background) 20%);\n  --border-color: var(--nve-ref-border-color-emphasis);\n\n  .icon {\n    background: var(--nve-sys-accent-secondary-background);\n    --color: var(--nve-sys-text-white-color);\n  }\n\n  slot[name='icon']::slotted(*) {\n    background: var(--nve-sys-accent-secondary-background);\n    --color: var(--nve-sys-text-white-color);\n  }\n\n  .text-emphasized {\n    color: var(--nve-sys-text-color);\n  }\n}\n\n:host([highlighted]),\n:host(:active) {\n  --background: color-mix(in oklab, transparent, var(--nve-sys-accent-secondary-background) 30%);\n}\n"],"mappings":""}

package/dist/dropzone/dropzone.util.js

@@ -1,5 +1,5 @@
 import { formatFileSize as e } from "../internal/utils/strings.js";
-//#region src/dropzone/dropzone.util.ts
+// src/dropzone/dropzone.util.ts
 function t(e) {
 	return e.split(",").map((e) => {
 		let t = e.trim();
@@ -28,7 +28,6 @@ function r(e, n) {
 		message: "Some files are not of accepted types"
 	} : { validity: { valid: !0 } };
 }
-//#endregion
 export { n as fileSizeValidator, r as fileTypeValidator, t as getFileTypeSpecifiers };
 
 //# sourceMappingURL=dropzone.util.js.map

package/dist/dropzone/dropzone.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone.util.js","names":[],"sources":["../../src/dropzone/dropzone.util.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { formatFileSize } from '@nvidia-elements/core/internal';\nimport type { Dropzone } from './dropzone';\nimport type { ValidatorResult } from '@nvidia-elements/forms';\n\nexport function getFileTypeSpecifiers(acceptTypes: string) {\n  const types = acceptTypes.split(',').map((value: string) => {\n    let type = value.trim();\n    if (type.startsWith('.')) {\n      type = type.slice(1);\n    }\n    if (type.endsWith('/*')) {\n      type = type.split('/')[0]!;\n    }\n    if (type.includes('/')) {\n      type = type.split('/')[1]!;\n    }\n    if (type.includes('+')) {\n      type = type.split('+')[0]!;\n    }\n    return type;\n  });\n  return types;\n}\n\nexport function fileSizeValidator(value: unknown, element: unknown): ValidatorResult {\n  const dropzone = element as Dropzone;\n  const files = value as File[];\n\n  if (!files || !Array.isArray(files) || files.length === 0) {\n    return { validity: { valid: true } };\n  }\n\n  const invalid = files.filter(file => file.size > dropzone.maxFileSize).length > 0;\n\n  if (invalid) {\n    return {\n      validity: { rangeOverflow: true, valid: false },\n      message: `Some files exceed the maximum size of ${formatFileSize(dropzone.maxFileSize)}`\n    };\n  }\n  return { validity: { valid: true } };\n}\n\nexport function fileTypeValidator(value: unknown, element: unknown): ValidatorResult {\n  const dropzone = element as Dropzone;\n  const files = value as File[];\n\n  if (!files || !Array.isArray(files) || files.length === 0) {\n    return { validity: { valid: true } };\n  }\n\n  const acceptedTypes = getFileTypeSpecifiers(dropzone.accept);\n\n  const invalidFiles = files.filter(file => {\n    return !acceptedTypes.some((acceptedType: string) => {\n      return file.type.includes(acceptedType);\n    });\n  });\n\n  if (invalidFiles.length > 0) {\n    return { validity: { typeMismatch: true, valid: false }, message: `Some files are not of accepted types` };\n  }\n  return { validity: { valid: true } };\n}\n"],"mappings":";;AAOA,SAAgB,EAAsB,GAAqB;CAiBzD,OAhBc,EAAY,MAAM,GAAG,CAAC,CAAC,KAAK,MAAkB;EAC1D,IAAI,IAAO,EAAM,KAAK;EAatB,OAZI,EAAK,WAAW,GAAG,MACrB,IAAO,EAAK,MAAM,CAAC,IAEjB,EAAK,SAAS,IAAI,MACpB,IAAO,EAAK,MAAM,GAAG,CAAC,CAAC,KAErB,EAAK,SAAS,GAAG,MACnB,IAAO,EAAK,MAAM,GAAG,CAAC,CAAC,KAErB,EAAK,SAAS,GAAG,MACnB,IAAO,EAAK,MAAM,GAAG,CAAC,CAAC,KAElB;CACT,CACO;AACT;AAEA,SAAgB,EAAkB,GAAgB,GAAmC;CACnF,IAAM,IAAW,GACX,IAAQ;CAcd,OAZI,CAAC,KAAS,CAAC,MAAM,QAAQ,CAAK,KAAK,EAAM,WAAW,IAC/C,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE,IAGrB,EAAM,QAAO,MAAQ,EAAK,OAAO,EAAS,WAAW,CAAC,CAAC,SAAS,IAGvE;EACL,UAAU;GAAE,eAAe;GAAM,OAAO;EAAM;EAC9C,SAAS,yCAAyC,EAAe,EAAS,WAAW;CACvF,IAEK,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE;AACrC;AAEA,SAAgB,EAAkB,GAAgB,GAAmC;CACnF,IAAM,IAAW,GACX,IAAQ;CAEd,IAAI,CAAC,KAAS,CAAC,MAAM,QAAQ,CAAK,KAAK,EAAM,WAAW,GACtD,OAAO,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE;CAGrC,IAAM,IAAgB,EAAsB,EAAS,MAAM;CAW3D,OATqB,EAAM,QAAO,MACzB,CAAC,EAAc,MAAM,MACnB,EAAK,KAAK,SAAS,CAAY,CACvC,CAGC,CAAA,CAAa,SAAS,IACjB;EAAE,UAAU;GAAE,cAAc;GAAM,OAAO;EAAM;EAAG,SAAS;CAAuC,IAEpG,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE;AACrC"}
+{"version":3,"file":"dropzone.util.js","names":["getFileTypeSpecifiers","acceptTypes","type","value","fileSizeValidator","dropzone","element","files","file","formatFileSize","fileTypeValidator","acceptedTypes","acceptedType"],"sources":["../../src/dropzone/dropzone.util.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { formatFileSize } from '@nvidia-elements/core/internal';\nimport type { Dropzone } from './dropzone';\nimport type { ValidatorResult } from '@nvidia-elements/forms';\n\nexport function getFileTypeSpecifiers(acceptTypes: string) {\n  const types = acceptTypes.split(',').map((value: string) => {\n    let type = value.trim();\n    if (type.startsWith('.')) {\n      type = type.slice(1);\n    }\n    if (type.endsWith('/*')) {\n      type = type.split('/')[0]!;\n    }\n    if (type.includes('/')) {\n      type = type.split('/')[1]!;\n    }\n    if (type.includes('+')) {\n      type = type.split('+')[0]!;\n    }\n    return type;\n  });\n  return types;\n}\n\nexport function fileSizeValidator(value: unknown, element: unknown): ValidatorResult {\n  const dropzone = element as Dropzone;\n  const files = value as File[];\n\n  if (!files || !Array.isArray(files) || files.length === 0) {\n    return { validity: { valid: true } };\n  }\n\n  const invalid = files.filter(file => file.size > dropzone.maxFileSize).length > 0;\n\n  if (invalid) {\n    return {\n      validity: { rangeOverflow: true, valid: false },\n      message: `Some files exceed the maximum size of ${formatFileSize(dropzone.maxFileSize)}`\n    };\n  }\n  return { validity: { valid: true } };\n}\n\nexport function fileTypeValidator(value: unknown, element: unknown): ValidatorResult {\n  const dropzone = element as Dropzone;\n  const files = value as File[];\n\n  if (!files || !Array.isArray(files) || files.length === 0) {\n    return { validity: { valid: true } };\n  }\n\n  const acceptedTypes = getFileTypeSpecifiers(dropzone.accept);\n\n  const invalidFiles = files.filter(file => {\n    return !acceptedTypes.some((acceptedType: string) => {\n      return file.type.includes(acceptedType);\n    });\n  });\n\n  if (invalidFiles.length > 0) {\n    return { validity: { typeMismatch: true, valid: false }, message: `Some files are not of accepted types` };\n  }\n  return { validity: { valid: true } };\n}\n"],"mappings":";;AAOA,SAAgBA,EAAsB,GAAqB;CAiBzD,OAhBcC,EAAY,MAAM,GAAG,CAAC,CAAC,KAAK,MAAkB;EAC1D,IAAIC,IAAOC,EAAM,KAAK;EAatB,OAZID,EAAK,WAAW,GAAG,MACrB,IAAOA,EAAK,MAAM,CAAC,IAEjBA,EAAK,SAAS,IAAI,MACpB,IAAOA,EAAK,MAAM,GAAG,CAAC,CAAC,KAErBA,EAAK,SAAS,GAAG,MACnB,IAAOA,EAAK,MAAM,GAAG,CAAC,CAAC,KAErBA,EAAK,SAAS,GAAG,MACnB,IAAOA,EAAK,MAAM,GAAG,CAAC,CAAC,KAElBA;CACT,CACO;AACT;AAEA,SAAgBE,EAAkB,GAAgB,GAAmC;CACnF,IAAMC,IAAWC,GACXC,IAAQJ;CAcd,OAZI,CAACI,KAAS,CAAC,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,IAC/C,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE,IAGrBA,EAAM,QAAO,MAAQC,EAAK,OAAOH,EAAS,WAAW,CAAC,CAAC,SAAS,IAGvE;EACL,UAAU;GAAE,eAAe;GAAM,OAAO;EAAM;EAC9C,SAAS,yCAAyCI,EAAeJ,EAAS,WAAW;CACvF,IAEK,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE;AACrC;AAEA,SAAgBK,EAAkB,GAAgB,GAAmC;CACnF,IAAML,IAAWC,GACXC,IAAQJ;CAEd,IAAI,CAACI,KAAS,CAAC,MAAM,QAAQA,CAAK,KAAKA,EAAM,WAAW,GACtD,OAAO,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE;CAGrC,IAAMI,IAAgBX,EAAsBK,EAAS,MAAM;CAW3D,OATqBE,EAAM,QAAO,MACzB,CAACI,EAAc,MAAM,MACnBH,EAAK,KAAK,SAASI,CAAY,CACvC,CAGC,CAAA,CAAa,SAAS,IACjB;EAAE,UAAU;GAAE,cAAc;GAAM,OAAO;EAAM;EAAG,SAAS;CAAuC,IAEpG,EAAE,UAAU,EAAE,OAAO,GAAK,EAAE;AACrC"}

package/dist/dropzone/dropzone2.js

@@ -2,7 +2,7 @@ import { formatFileSize as e } from "../internal/utils/strings.js";
 import { removeEmptyTextNode as t } from "../internal/utils/dom.js";
 import { scopedRegistry as n } from "../internal/decorators/scoped-registry.js";
 import { useStyles as r } from "../internal/styles/index.js";
-import i from "../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import i from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import { Icon as a } from "../icon/icon2.js";
 import o from "./dropzone.js";
 import { fileSizeValidator as s, fileTypeValidator as c, getFileTypeSpecifiers as l } from "./dropzone.util.js";
@@ -11,7 +11,7 @@ import { property as f } from "lit/decorators/property.js";
 import { I18nController as p } from "@nvidia-elements/foundations/internal/i18n";
 import { FormControlMixin as m } from "@nvidia-elements/forms/mixins";
 import { query as h } from "lit/decorators/query.js";
-//#region src/dropzone/dropzone.ts
+// src/dropzone/dropzone.ts
 var g = {
 	or: "or",
 	files: "files",
@@ -26,7 +26,7 @@ var g = {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.20.1",
+			version: "2.20.3",
 			validators: [c, s],
 			valueSchema: {
 				type: "array",
@@ -104,7 +104,6 @@ i([f()], _.prototype, "accept", void 0), i([f({
 	attribute: "max-file-size",
 	type: Number
 })], _.prototype, "maxFileSize", void 0), i([f({ type: Object })], _.prototype, "i18n", void 0), i([h("#dropzone-input")], _.prototype, "fileInput", void 0), _ = i([n()], _);
-//#endregion
 export { _ as Dropzone };
 
 //# sourceMappingURL=dropzone2.js.map

package/dist/dropzone/dropzone2.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropzone2.js","names":[],"sources":["../../src/dropzone/dropzone.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { formatFileSize, useStyles, removeEmptyTextNode, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\nconst i18nDefaults = {\n  or: 'or',\n  files: 'files',\n  dragAndDrop: 'drag & drop',\n  browseFiles: 'browse files',\n  maxFileSize: 'max file size'\n} satisfies I18nDefaults;\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc type because the CEM analyzer loses the inherited generic specialization.\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropzone/\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @property {File[]} value - Files selected or dropped by the user. Assign files through the JavaScript property; the HTML `value` attribute is not supported.\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - Custom messaging that replaces the default upload instructions.\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - Custom icon that replaces the default upload icon.\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n  /** Comma-separated file extensions or MIME types accepted by the dropzone. */\n  @property()\n  accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n  /** File size limit in bytes. */\n  @property({ attribute: 'max-file-size', type: Number })\n  maxFileSize: number = 2 * 1024 ** 2;\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  @query('#dropzone-input')\n  private fileInput: HTMLInputElement;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropzone',\n    version: '0.0.0',\n    validators: [fileTypeValidator, fileSizeValidator],\n    valueSchema: {\n      type: 'array' as const,\n      items: {\n        type: 'object' as const,\n        properties: {\n          name: { type: 'string' as const },\n          size: { type: 'number' as const },\n          type: { type: 'string' as const }\n        }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @protected */\n  formResetCallback() {\n    this.value = [];\n    this.requestUpdate();\n  }\n\n  constructor() {\n    super();\n    this.value = [];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    globalThis.document.addEventListener('dragover', this.#preventDefaults);\n    globalThis.document.addEventListener('drop', this.#preventDefaults);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n    globalThis.document.removeEventListener('drop', this.#preventDefaults);\n  }\n\n  #preventDefaults(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  #handleClick() {\n    this.fileInput.click();\n  }\n\n  #handleDragEnter(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragOver(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragLeave(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n  }\n\n  #handleDrop(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n\n    const files = Array.from(event.dataTransfer!.files);\n    this.#addFiles(files);\n  }\n\n  #handleFileInputChange(event: Event) {\n    this.#preventDefaults(event);\n\n    const files = Array.from(this.fileInput.files!);\n    this.#addFiles(files);\n\n    this.fileInput.value = '';\n  }\n\n  #addFiles(files: File[]) {\n    this.value = [...(this.value ?? []), ...files];\n    this.dispatchChangeEvent();\n  }\n\n  #formatFileTypeSpecifiers(acceptTypes: string) {\n    const types = getFileTypeSpecifiers(acceptTypes);\n\n    if (types.length === 1) {\n      return types[0]!.toUpperCase();\n    }\n\n    const lastType = types.pop();\n    return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n  }\n\n  #toggleHighlighted(highlighted: boolean) {\n    this.toggleAttribute('highlighted', highlighted);\n  }\n\n  #removeEmptyNodes(e: Event) {\n    (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n  }\n\n  render() {\n    return html`<div internal-host>\n      <div class=\"container\"\n        @click=${this.#handleClick} \n        @dragenter=${this.#handleDragEnter}\n        @dragover=${this.#handleDragOver}\n        @dragleave=${this.#handleDragLeave}\n        @drop=${this.#handleDrop}>\n        <svg class=\"dropzone-border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n        </svg>\n        <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n        <slot @slotchange=${this.#removeEmptyNodes}>\n          <div class=\"dropzone-text-center\">\n            <div class=\"dropzone-text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n            <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n          </div>\n        </slot>\n        <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n      </div>\n    </div>`;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropzone2.js","names":["styles","_decorate","__decorate","dropzone_default","i18nDefaults","Dropzone","FormControlMixin","LitElement","useStyles","fileTypeValidator","fileSizeValidator","Icon","#i18nController","I18nController","#preventDefaults","event","#toggleHighlighted","files","#addFiles","types","getFileTypeSpecifiers","acceptTypes","lastType","highlighted","removeEmptyTextNode","node","#handleClick","#handleDragEnter","#handleDragOver","#handleDragLeave","#handleDrop","#removeEmptyNodes","#formatFileTypeSpecifiers","formatFileSize","#handleFileInputChange","property","query","scopedRegistry"],"sources":["../../src/dropzone/dropzone.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport { query } from 'lit/decorators/query.js';\nimport { formatFileSize, useStyles, removeEmptyTextNode, scopedRegistry } from '@nvidia-elements/core/internal';\nimport { I18nController, type I18nDefaults } from '@nvidia-elements/foundations/internal/i18n';\nimport { Icon } from '@nvidia-elements/core/icon';\nimport styles from './dropzone.css?inline';\nimport { FormControlMixin } from '@nvidia-elements/forms/mixins';\nimport { fileTypeValidator, fileSizeValidator, getFileTypeSpecifiers } from './dropzone.util';\n\nconst i18nDefaults = {\n  or: 'or',\n  files: 'files',\n  dragAndDrop: 'drag & drop',\n  browseFiles: 'browse files',\n  maxFileSize: 'max file size'\n} satisfies I18nDefaults;\n\n/* eslint-disable jsdoc/no-types */\n// Explicit JSDoc type because the CEM analyzer loses the inherited generic specialization.\n\n/**\n * @element nve-dropzone\n * @description A dropzone form control that enables users to drag and drop files onto it.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropzone/\n * @since 1.29.0\n * @entrypoint \\@nvidia-elements/core/dropzone\n * @property {File[]} value - Files selected or dropped by the user. Assign files through the JavaScript property; the HTML `value` attribute is not supported.\n * @event change - Dispatched when the value has changed (files located in event.target)\n * @slot - Custom messaging that replaces the default upload instructions.\n * @cssprop --background\n * @cssprop --border-color\n * @cssprop --border-radius\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --color\n * @slot icon - Custom icon that replaces the default upload icon.\n * @csspart icon - The upload icon element\n * @aria https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file\n */\n@scopedRegistry()\nexport class Dropzone extends FormControlMixin<typeof LitElement, File[]>(LitElement) {\n  /** Comma-separated file extensions or MIME types accepted by the dropzone. */\n  @property()\n  accept: string = `image/gif, image/jpeg, image/png, image/svg+xml`;\n\n  /** File size limit in bytes. */\n  @property({ attribute: 'max-file-size', type: Number })\n  maxFileSize: number = 2 * 1024 ** 2;\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  @query('#dropzone-input')\n  private fileInput: HTMLInputElement;\n\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-dropzone',\n    version: '0.0.0',\n    validators: [fileTypeValidator, fileSizeValidator],\n    valueSchema: {\n      type: 'array' as const,\n      items: {\n        type: 'object' as const,\n        properties: {\n          name: { type: 'string' as const },\n          size: { type: 'number' as const },\n          type: { type: 'string' as const }\n        }\n      }\n    }\n  };\n\n  static elementDefinitions = {\n    [Icon.metadata.tag]: Icon\n  };\n\n  /** @protected */\n  formResetCallback() {\n    this.value = [];\n    this.requestUpdate();\n  }\n\n  constructor() {\n    super();\n    this.value = [];\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('nve-control', '');\n    globalThis.document.addEventListener('dragover', this.#preventDefaults);\n    globalThis.document.addEventListener('drop', this.#preventDefaults);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    globalThis.document.removeEventListener('dragover', this.#preventDefaults);\n    globalThis.document.removeEventListener('drop', this.#preventDefaults);\n  }\n\n  #preventDefaults(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n  }\n\n  #handleClick() {\n    this.fileInput.click();\n  }\n\n  #handleDragEnter(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragOver(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(true);\n  }\n\n  #handleDragLeave(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n  }\n\n  #handleDrop(event: DragEvent) {\n    this.#preventDefaults(event);\n    this.#toggleHighlighted(false);\n\n    const files = Array.from(event.dataTransfer!.files);\n    this.#addFiles(files);\n  }\n\n  #handleFileInputChange(event: Event) {\n    this.#preventDefaults(event);\n\n    const files = Array.from(this.fileInput.files!);\n    this.#addFiles(files);\n\n    this.fileInput.value = '';\n  }\n\n  #addFiles(files: File[]) {\n    this.value = [...(this.value ?? []), ...files];\n    this.dispatchChangeEvent();\n  }\n\n  #formatFileTypeSpecifiers(acceptTypes: string) {\n    const types = getFileTypeSpecifiers(acceptTypes);\n\n    if (types.length === 1) {\n      return types[0]!.toUpperCase();\n    }\n\n    const lastType = types.pop();\n    return `${types.join(', ').toUpperCase()} or ${lastType!.toUpperCase()}`;\n  }\n\n  #toggleHighlighted(highlighted: boolean) {\n    this.toggleAttribute('highlighted', highlighted);\n  }\n\n  #removeEmptyNodes(e: Event) {\n    (e.target as HTMLSlotElement).assignedNodes().forEach((node: Node) => removeEmptyTextNode(node));\n  }\n\n  render() {\n    return html`<div internal-host>\n      <div class=\"container\"\n        @click=${this.#handleClick} \n        @dragenter=${this.#handleDragEnter}\n        @dragover=${this.#handleDragOver}\n        @dragleave=${this.#handleDragLeave}\n        @drop=${this.#handleDrop}>\n        <svg class=\"dropzone-border\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\">\n          <rect width=\"100%\" height=\"100%\" fill=\"none\" rx=\"4\" ry=\"4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-dasharray=\"6,6\" stroke-dashoffset=\"0\" stroke-linecap=\"square\" />\n        </svg>\n        <slot name=\"icon\"><nve-icon part=\"icon\" class=\"icon\" name=\"upload\"></nve-icon></slot>\n        <slot @slotchange=${this.#removeEmptyNodes}>\n          <div class=\"dropzone-text-center\">\n            <div class=\"dropzone-text-bold\">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class=\"text-emphasized\">${this.i18n.browseFiles}</span></div>\n            <div class=\"text-muted\">${this.#formatFileTypeSpecifiers(this.accept)} &mdash; ${this.i18n.maxFileSize} ${formatFileSize(this.maxFileSize)}</div>\n          </div>\n        </slot>\n        <input id=\"dropzone-input\" type=\"file\" accept=${this.accept} @change=${this.#handleFileInputChange} multiple hidden></input>\n      </div>\n    </div>`;\n  }\n}\n"],"mappings":"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"}

package/dist/dropzone/index.js

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

package/dist/file/define.js

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

package/dist/file/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","names":[],"sources":["../../src/file/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 { File } from '@nvidia-elements/core/file';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(File);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-file': File;\n  }\n}\n"],"mappings":";;;;;AAOA,EAAO,CAAI,GACX,EAAO,CAAO,GACd,EAAO,CAAY,GACnB,EAAO,CAAc"}
+{"version":3,"file":"define.js","names":["define","File","Control","ControlGroup","ControlMessage"],"sources":["../../src/file/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 { File } from '@nvidia-elements/core/file';\nimport { Control, ControlGroup, ControlMessage } from '@nvidia-elements/core/forms';\n\ndefine(File);\ndefine(Control);\ndefine(ControlGroup);\ndefine(ControlMessage);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nve-file': File;\n  }\n}\n"],"mappings":";;;;;AAOAA,EAAOC,CAAI,GACXD,EAAOE,CAAO,GACdF,EAAOG,CAAY,GACnBH,EAAOI,CAAc"}

package/dist/file/file.examples.js

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