@nvidia-elements/core 2.17.0 → 2.18.0

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 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};"],"mappings":";AAGA,IAAA,IAAS"}
+{"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"}

package/dist/dropdown/dropdown.examples.json

@@ -20,6 +20,18 @@
       "composition": true,
       "tags": []
     },
+    {
+      "id": "dropdown-closed-popover-layout",
+      "name": "ClosedPopoverLayout",
+      "template": "<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    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-0\">Menu 1</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-0\">Menu 1 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-1\">Menu 2</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-1\">Menu 2 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-2\">Menu 3</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-2\">Menu 3 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-3\">Menu 4</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-3\">Menu 4 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-4\">Menu 5</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-4\">Menu 5 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-5\">Menu 6</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-5\">Menu 6 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-6\">Menu 7</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-6\">Menu 7 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-7\">Menu 8</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-7\">Menu 8 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-8\">Menu 9</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-8\">Menu 9 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-9\">Menu 10</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-9\">Menu 10 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-10\">Menu 11</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-10\">Menu 11 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-11\">Menu 12</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-11\">Menu 12 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-12\">Menu 13</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-12\">Menu 13 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-13\">Menu 14</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-13\">Menu 14 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-14\">Menu 15</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-14\">Menu 15 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-15\">Menu 16</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-15\">Menu 16 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-16\">Menu 17</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-16\">Menu 17 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-17\">Menu 18</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-17\">Menu 18 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-18\">Menu 19</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-18\">Menu 19 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-19\">Menu 20</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-19\">Menu 20 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-20\">Menu 21</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-20\">Menu 21 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-21\">Menu 22</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-21\">Menu 22 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-22\">Menu 23</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-22\">Menu 23 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-23\">Menu 24</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-23\">Menu 24 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-24\">Menu 25</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-24\">Menu 25 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-25\">Menu 26</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-25\">Menu 26 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-26\">Menu 27</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-26\">Menu 27 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-27\">Menu 28</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-27\">Menu 28 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-28\">Menu 29</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-28\">Menu 29 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-29\">Menu 30</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-29\">Menu 30 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-30\">Menu 31</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-30\">Menu 31 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-31\">Menu 32</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-31\">Menu 32 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-32\">Menu 33</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-32\">Menu 33 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-33\">Menu 34</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-33\">Menu 34 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-34\">Menu 35</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-34\">Menu 35 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-35\">Menu 36</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-35\">Menu 36 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-36\">Menu 37</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-36\">Menu 37 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-37\">Menu 38</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-37\">Menu 38 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-38\">Menu 39</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-38\">Menu 39 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-39\">Menu 40</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-39\">Menu 40 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-40\">Menu 41</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-40\">Menu 41 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-41\">Menu 42</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-41\">Menu 42 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-42\">Menu 43</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-42\">Menu 43 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-43\">Menu 44</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-43\">Menu 44 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-44\">Menu 45</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-44\">Menu 45 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-45\">Menu 46</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-45\">Menu 46 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-46\">Menu 47</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-46\">Menu 47 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-47\">Menu 48</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-47\">Menu 48 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-48\">Menu 49</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-48\">Menu 49 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-49\">Menu 50</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-49\">Menu 50 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-50\">Menu 51</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-50\">Menu 51 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-51\">Menu 52</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-51\">Menu 52 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-52\">Menu 53</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-52\">Menu 53 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-53\">Menu 54</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-53\">Menu 54 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-54\">Menu 55</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-54\">Menu 55 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-55\">Menu 56</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-55\">Menu 56 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-56\">Menu 57</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-56\">Menu 57 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-57\">Menu 58</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-57\">Menu 58 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-58\">Menu 59</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-58\">Menu 59 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-59\">Menu 60</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-59\">Menu 60 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-60\">Menu 61</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-60\">Menu 61 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-61\">Menu 62</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-61\">Menu 62 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-62\">Menu 63</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-62\">Menu 63 content</nve-dropdown>\n    </div>\n\n    <div nve-layout=\"row full:width align:right\">\n      <nve-button popovertarget=\"closed-popover-layout-menu-63\">Menu 64</nve-button>\n      <nve-dropdown id=\"closed-popover-layout-menu-63\">Menu 64 content</nve-dropdown>\n    </div>\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",
+      "summary": "Closed dropdowns anchored to a resizable panel. Measure repeated layout before and after opening and dismissing every menu.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case",
+        "performance"
+      ]
+    },
     {
       "id": "dropdown-visual",
       "name": "Visual",

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	static {

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

@@ -14,7 +14,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "2.17.0",
+			version: "2.18.0",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends m(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.17.0",
+			version: "2.18.0",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	connectedCallback() {

package/dist/format-bytes/format-bytes2.js

@@ -95,7 +95,7 @@ var g = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-bytes",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	get #e() {

package/dist/format-datetime/format-datetime2.js

@@ -13,7 +13,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	get #e() {

package/dist/format-number/format-number2.js

@@ -29,7 +29,7 @@ var c = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	get #e() {

package/dist/format-relative-time/format-relative-time2.js

@@ -53,7 +53,7 @@ var c = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	#e;

package/dist/format-truncate/format-truncate2.js

@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-format-truncate",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	#e;

package/dist/forms/control/control2.js

@@ -48,7 +48,7 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	render() {

package/dist/forms/control-group/control-group2.js

@@ -24,7 +24,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-control-group",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	render() {

package/dist/forms/control-message/control-message2.js

@@ -23,7 +23,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-control-message",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	static {

package/dist/gauge/gauge2.js

@@ -40,7 +40,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	#e;

package/dist/grid/cell/cell2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-cell",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	render() {

package/dist/grid/column/column2.js

@@ -13,7 +13,7 @@ var c = class r extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-column",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	get #e() {

package/dist/grid/footer/footer2.js

@@ -15,7 +15,7 @@ var s = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-grid-footer",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	static {

package/dist/grid/grid2.js

@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.17.0",
+			version: "2.18.0",
 			children: [
 				d.metadata.tag,
 				f.metadata.tag,

package/dist/grid/header/header2.js

@@ -19,7 +19,7 @@ var m = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-grid-header",
-			version: "2.17.0",
+			version: "2.18.0",
 			children: [c.metadata.tag]
 		};
 	}

package/dist/grid/placeholder/placeholder2.js

@@ -10,7 +10,7 @@ var a = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-grid-placeholder",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	render() {

package/dist/grid/row/row2.js

@@ -15,7 +15,7 @@ var u = class extends s {
 	static {
 		this.metadata = {
 			tag: "nve-grid-row",
-			version: "2.17.0",
+			version: "2.18.0",
 			children: [a.metadata.tag]
 		};
 	}

package/dist/icon/icon2.js

@@ -16,7 +16,7 @@ var f = class e extends o {
 	static {
 		this.metadata = {
 			tag: "nve-icon",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	static {
@@ -103,7 +103,7 @@ a([l({
 })], f.prototype, "name", void 0), a([d()], f.prototype, "svg", void 0);
 function p(t) {
 	if (typeof globalThis.customElements?.get == "function") {
-		let n = e(t.metadata.version), i = e("2.17.0");
+		let n = e(t.metadata.version), i = e("2.18.0");
 		n.minor <= i.minor && n.major <= i.major && (t._icons = {
 			...t._icons,
 			...r

package/dist/icon-button/icon-button2.js

@@ -15,7 +15,7 @@ var l = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-icon-button",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	static {

package/dist/iframe/iframe2.js

@@ -61,7 +61,7 @@ var a = (e) => `
 	static {
 		this.metadata = {
 			tag: "nve-iframe",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	static get observedAttributes() {

package/dist/index.js

@@ -2,7 +2,7 @@ import { I18nService as e } from "./internal/services/i18n.service.js";
 import { getThemeTokens as t } from "./internal/utils/dom.js";
 import { statusIcons as n } from "./internal/types/index.js";
 //#region src/index.ts
-var r = "2.17.0", i = "@nvidia-elements";
+var r = "2.18.0", i = "@nvidia-elements";
 //#endregion
 export { e as I18nService, i as SCOPE, r as VERSION, t as getThemeTokens, n as statusIcons };
 

package/dist/input/input-group2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input-group",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	async connectedCallback() {

package/dist/input/input2.js

@@ -14,7 +14,7 @@ var a = r, o = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-input",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 };

package/dist/internal/controllers/keynav-list.controller.d.ts

@@ -20,6 +20,8 @@ export declare class KeyNavigationListController<T extends ReactiveElement & Key
     constructor(host: T);
     hostConnected(): Promise<void>;
     hostDisconnected(): void;
+    /** Updates the focus order after configured items change without moving focus. */
+    refreshItems(previousItems: readonly HTMLElement[]): void;
 }
 interface KeyListConfig {
     code: KeynavCode;

package/dist/internal/controllers/keynav-list.controller.js

@@ -28,6 +28,14 @@ var s = class {
 	hostDisconnected() {
 		this.host.removeEventListener("pointerup", this.#c), this.host.removeEventListener("keydown", this.#l);
 	}
+	refreshItems(e) {
+		let { manageFocus: t, manageTabindex: n, items: r, initialItem: i } = this.#e;
+		if (!t || !n || this.#t) return;
+		let a = r.find((t) => e.includes(t) && t.tabIndex === 0) ?? (i && r.includes(i) ? i : r[0]);
+		Array.from(this.host.keynavListConfig.items).forEach((e) => {
+			e.tabIndex = e === a ? 0 : -1;
+		});
+	}
 	#n() {
 		let { manageFocus: e, manageTabindex: n, items: i, initialItem: a } = this.#e;
 		e && n && !this.#t && (t(i), a && i.includes(a) && r(i, a));

package/dist/internal/controllers/keynav-list.controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"keynav-list.controller.js","names":[],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, isFocusable, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  initialItem?: HTMLElement;\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n      if (initialItem && items.includes(initialItem)) {\n        setActiveKeyListItem(items, initialItem);\n      }\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getPointerActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getKeyboardActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getKeyboardActiveItem(e: KeyboardEvent, items: HTMLElement[]) {\n    const target = e.composedPath()[0];\n    return target instanceof HTMLElement && items.includes(target) ? target : null;\n  }\n\n  #getPointerActiveItem(e: PointerEvent, items: HTMLElement[]) {\n    const path = e.composedPath();\n    const itemIndex = path.findIndex(item => item instanceof HTMLElement && items.includes(item));\n    const item = path[itemIndex];\n\n    if (!(item instanceof HTMLElement)) return null;\n\n    const hasFocusableDescendant = path\n      .slice(0, itemIndex)\n      .some(descendant => descendant instanceof Element && isFocusable(descendant));\n    return hasFocusableDescendant ? null : item;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}
+{"version":3,"file":"keynav-list.controller.js","names":[],"sources":["../../../src/internal/controllers/keynav-list.controller.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ReactiveController, ReactiveElement } from 'lit';\nimport type { LegacyDecoratorTarget } from '../types/index.js';\nimport { focusElement, initializeKeyListItems, isFocusable, setActiveKeyListItem } from '../utils/focus.js';\nimport { KeynavCode, validKeyNavigationCode } from '../utils/dom.js';\n\nexport interface KeynavListConfig {\n  items: NodeListOf<HTMLElement> | HTMLElement[];\n  initialItem?: HTMLElement;\n  layout?: 'both' | 'horizontal' | 'vertical';\n  manageFocus?: boolean;\n  manageTabindex?: boolean;\n  loop?: boolean;\n  dir?: string | null;\n}\n\nexport interface KeynavListElement {\n  keynavListConfig: KeynavListConfig;\n}\n\n/** https://webaim.org/techniques/keyboard/ */\nexport function keyNavigationList<T extends ReactiveElement & KeynavListElement>(): ClassDecorator {\n  return (target: LegacyDecoratorTarget) =>\n    target.addInitializer!((instance: T) => new KeyNavigationListController(instance));\n}\n\nexport class KeyNavigationListController<T extends ReactiveElement & KeynavListElement> implements ReactiveController {\n  get #config(): KeynavListConfig & { items: HTMLElement[] } {\n    return {\n      layout: 'horizontal',\n      manageFocus: true,\n      manageTabindex: true,\n      loop: false,\n      dir: this.host.getAttribute('rtl'),\n      ...this.host.keynavListConfig,\n      items: Array.from(this.host.keynavListConfig.items).filter(\n        (i: HTMLElement & { disabled?: boolean }) => !i.disabled\n      )\n    };\n  }\n\n  constructor(private host: T) {\n    this.host.addController(this);\n  }\n\n  /** @private attr nve-keynav-disabled is an internal API for advanced use cases only */\n  get #keynavDisabled() {\n    return this.host.hasAttribute('nve-keynav-disabled');\n  }\n\n  async hostConnected() {\n    await this.host.updateComplete;\n    if (!this.host.isConnected) return;\n    this.#initializeTabIndex();\n    this.host.addEventListener('pointerup', this.#onPointerUp);\n    this.host.addEventListener('keydown', this.#onKeyDown);\n  }\n\n  hostDisconnected() {\n    this.host.removeEventListener('pointerup', this.#onPointerUp);\n    this.host.removeEventListener('keydown', this.#onKeyDown);\n  }\n\n  /** Updates the focus order after configured items change without moving focus. */\n  refreshItems(previousItems: readonly HTMLElement[]) {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (!manageFocus || !manageTabindex || this.#keynavDisabled) return;\n\n    const activeItem =\n      items.find(item => previousItems.includes(item) && item.tabIndex === 0) ??\n      (initialItem && items.includes(initialItem) ? initialItem : items[0]);\n    Array.from(this.host.keynavListConfig.items).forEach(item => {\n      item.tabIndex = item === activeItem ? 0 : -1;\n    });\n  }\n\n  #initializeTabIndex() {\n    const { manageFocus, manageTabindex, items, initialItem } = this.#config;\n    if (manageFocus && manageTabindex && !this.#keynavDisabled) {\n      initializeKeyListItems(items);\n      if (initialItem && items.includes(initialItem)) {\n        setActiveKeyListItem(items, initialItem);\n      }\n    }\n  }\n\n  #clickItem(e: PointerEvent) {\n    const item = this.#getPointerActiveItem(e, this.#config.items);\n    if (item) {\n      this.#setActiveItem(e, item);\n    }\n  }\n\n  #focusItem(e: KeyboardEvent) {\n    if (validKeyNavigationCode(e) && !this.#keynavDisabled) {\n      const { loop, layout, dir, items } = this.#config;\n      const activeItem = this.#getKeyboardActiveItem(e, items);\n      if (activeItem) {\n        const { next, previous } = getNextKeyListItem(activeItem, Array.from(items), {\n          loop,\n          layout,\n          dir,\n          code: e.code\n        });\n\n        if (next !== previous) {\n          this.#setActiveItem(e, items[next]!, items[previous]);\n        }\n      }\n    }\n  }\n\n  #getKeyboardActiveItem(e: KeyboardEvent, items: HTMLElement[]) {\n    const target = e.composedPath()[0];\n    return target instanceof HTMLElement && items.includes(target) ? target : null;\n  }\n\n  #getPointerActiveItem(e: PointerEvent, items: HTMLElement[]) {\n    const path = e.composedPath();\n    const itemIndex = path.findIndex(item => item instanceof HTMLElement && items.includes(item));\n    const item = path[itemIndex];\n\n    if (!(item instanceof HTMLElement)) return null;\n\n    const hasFocusableDescendant = path\n      .slice(0, itemIndex)\n      .some(descendant => descendant instanceof Element && isFocusable(descendant));\n    return hasFocusableDescendant ? null : item;\n  }\n\n  #setActiveItem(e: KeyboardEvent | PointerEvent, activeItem: HTMLElement, previousItem?: HTMLElement) {\n    const { manageFocus, manageTabindex, items } = this.#config;\n    if (manageFocus) {\n      if (manageTabindex) {\n        setActiveKeyListItem(items, activeItem);\n      }\n\n      focusElement(activeItem);\n      e.preventDefault();\n    }\n\n    const detail = {\n      activeItem,\n      previousItem,\n      code: e instanceof KeyboardEvent ? e.code : null,\n      metaKey: e.ctrlKey || e.metaKey,\n      items\n    };\n    activeItem.dispatchEvent(new CustomEvent('nve-key-change', { bubbles: true, composed: true, detail }));\n  }\n\n  #onPointerUp = (e: PointerEvent) => this.#clickItem(e);\n\n  #onKeyDown = (e: KeyboardEvent) => this.#focusItem(e);\n}\n\ninterface KeyListConfig {\n  code: KeynavCode;\n  loop?: boolean;\n  layout?: 'horizontal' | 'vertical' | 'both';\n  dir: string | null | undefined;\n}\n\nfunction resolveArrowDirection(config: KeyListConfig): 'backward' | 'forward' | null {\n  const { code, layout, dir } = config;\n  const start = dir === 'rtl' ? KeynavCode.ArrowRight : KeynavCode.ArrowLeft;\n  const end = dir === 'rtl' ? KeynavCode.ArrowLeft : KeynavCode.ArrowRight;\n\n  if (layout !== 'horizontal') {\n    if (code === KeynavCode.ArrowUp) return 'backward';\n    if (code === KeynavCode.ArrowDown) return 'forward';\n  }\n\n  if (layout !== 'vertical') {\n    if (code === start) return 'backward';\n    if (code === end) return 'forward';\n  }\n\n  return null;\n}\n\nfunction resolveSpecialKey(code: KeynavCode): 'home' | 'end' | 'pageup' | 'pagedown' | null {\n  if (code === KeynavCode.End) return 'end';\n  if (code === KeynavCode.Home) return 'home';\n  if (code === KeynavCode.PageUp) return 'pageup';\n  if (code === KeynavCode.PageDown) return 'pagedown';\n  return null;\n}\n\nfunction navigateWithLoop(current: number, step: number, options: { limit: number; loop: boolean | undefined }) {\n  const { limit, loop } = options;\n  const next = current + step;\n  if (next >= 0 && next <= limit) return next;\n  return loop ? (step < 0 ? limit : 0) : current;\n}\n\nexport function getNextKeyListItem(item: HTMLElement, items: HTMLElement[], config: KeyListConfig) {\n  let next = items.indexOf(item);\n  const previous = next;\n  const itemCount = items.length - 1;\n  const direction = resolveArrowDirection(config);\n\n  switch (direction ?? resolveSpecialKey(config.code)) {\n    case 'backward':\n      next = navigateWithLoop(next, -1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'forward':\n      next = navigateWithLoop(next, 1, { limit: itemCount, loop: config.loop });\n      break;\n    case 'end':\n      next = itemCount;\n      break;\n    case 'home':\n      next = 0;\n      break;\n    case 'pageup':\n      next = Math.max(0, next - 4);\n      break;\n    case 'pagedown':\n      next = Math.min(itemCount, next + 4);\n      break;\n    case null:\n      break;\n  }\n\n  return { next, previous };\n}\n"],"mappings":"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"}

package/dist/internal/services/global.service.js

@@ -19,7 +19,7 @@ var a = class {
 				i18nRegistry: {},
 				audit: {}
 			}
-		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.17.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.17.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
+		}, globalThis.NVE_ELEMENTS.state.versions = Array.from(/* @__PURE__ */ new Set([...globalThis.NVE_ELEMENTS.state.versions, "2.18.0"])), globalThis.NVE_ELEMENTS.state.scopedRegistry ??= {}, globalThis.NVE_ELEMENTS.state.scopedRegistry["2.18.0"] = i(), globalThis.NVE_ELEMENTS.state.versions.length > 1 && globalThis.NVE_ELEMENTS.state.env !== "production" && console.warn(e(), `\n\n${JSON.stringify(globalThis.NVE_ELEMENTS.state.versions, null, 2)}`);
 	}
 	get state() {
 		return globalThis.NVE_ELEMENTS.state;

package/dist/internal/styles/popover.js

@@ -1,5 +1,5 @@
 //#region src/internal/styles/popover.css?inline
-var e = ":host{--animation-duration: var(--nve-ref-animation-duration-200);margin:calc(var(--nve-sys-layer-popover-offset) + calc(var(--nve-sys-layer-popover-arrow-offset) * 2));border:0;padding:0;background:none;position:fixed;overflow:visible;contain:initial;width:max-content;z-index:99;inset:revert;interest-delay-start:.5s}:host([popover]){opacity:0;pointer-events:none}:host(:state(transition-start)){transition-duration:var(--animation-duration);transition-timing-function:ease-in-out;transition-property:opacity,display,overlay,translate,transform;transition-behavior:allow-discrete}@supports not (container-type: anchored){:host{--animation-duration: 0}}:host(:popover-open){opacity:1;pointer-events:initial;@starting-style{opacity:0}}:host(:not([nve-popover])),:host([defer-hydration]){opacity:0!important;pointer-events:none!important}[internal-host]{width:var(--width);min-width:var(--min-width);font-family:inherit;display:flex;flex-direction:column;overflow:visible;white-space:nowrap;z-index:9999;border:0;margin:0;user-select:text}@supports (position-area: bottom){[internal-host]{position:relative}.arrow{position-area:bottom;translate:0% 50%}:host([position=\"top\"]) .arrow{position-area:bottom;translate:0% 50%}:host([position=\"top\"][alignment=\"end\"]) .arrow{position-area:bottom right;translate:-50% 50%}:host([position=\"top\"][alignment=\"start\"]) .arrow{position-area:bottom left;translate:50% 50%}:host([position=\"bottom\"]) .arrow{position-area:top;translate:0% -50%}:host([position=\"bottom\"][alignment=\"end\"]) .arrow{position-area:top right;translate:-50% -50%}:host([position=\"bottom\"][alignment=\"start\"]) .arrow{position-area:top left;translate:50% -50%}:host([position=\"left\"]) .arrow{position-area:right;translate:50% 0%}:host([position=\"left\"][alignment=\"end\"]) .arrow{position-area:bottom right;translate:50% -50%}:host([position=\"left\"][alignment=\"start\"]) .arrow{position-area:top right;translate:50% 50%}:host([position=\"right\"]) .arrow{position-area:left;translate:-50% 0%}:host([position=\"right\"][alignment=\"end\"]) .arrow{position-area:bottom left;translate:-50% -50%}:host([position=\"right\"][alignment=\"start\"]) .arrow{position-area:top left;translate:-50% 50%}:host([position=\"center\"]){position-area:center}:host{inset:auto!important;place-self:normal!important;position-anchor:auto!important}:host([position=\"top\"]){position-area:top center}:host([position=\"top\"][alignment=\"start\"]){position-area:top left}:host([position=\"top\"][alignment=\"end\"]){position-area:top right}:host([position=\"top\"][alignment=\"start\"]){position-area:top span-right}:host([position=\"top\"][alignment=\"end\"]){position-area:top span-left}:host([position=\"bottom\"]){position-area:bottom center}:host([position=\"bottom\"][alignment=\"start\"]){position-area:bottom span-right}:host([position=\"bottom\"][alignment=\"end\"]){position-area:bottom span-left}:host([position=\"left\"]){position-area:left center}:host([position=\"left\"][alignment=\"end\"]){position-area:left span-top}:host([position=\"left\"][alignment=\"start\"]){position-area:left span-bottom}:host([position=\"right\"]){position-area:right center}:host([position=\"right\"][alignment=\"end\"]){position-area:right span-top}:host([position=\"right\"][alignment=\"start\"]){position-area:right span-bottom}:host([position=\"top\"]){position-try-fallbacks:top,bottom,left,right}:host([position=\"bottom\"]){position-try-fallbacks:bottom,top,left,right}:host([position=\"left\"]){position-try-fallbacks:left,right,top,bottom}:host([position=\"right\"]){position-try-fallbacks:right,left,top,bottom}}:host([position=\"center\"][alignment=\"center\"]){position-area:unset!important;margin:auto!important;inset:0!important}@supports (not selector(::search-text)) and (position-area: bottom){.arrow{translate:0% -50%}:host([position=\"top\"]) .arrow{translate:0% -50%}:host([position=\"top\"][alignment=\"end\"]) .arrow{translate:-150% -50%}:host([position=\"top\"][alignment=\"start\"]) .arrow{translate:150% -50%}:host([position=\"bottom\"]) .arrow{translate:0% 50%}:host([position=\"bottom\"][alignment=\"end\"]) .arrow{translate:-150% 50%}:host([position=\"bottom\"][alignment=\"start\"]) .arrow{translate:150% 50%}:host([position=\"left\"]) .arrow{translate:-50% 0%}:host([position=\"left\"][alignment=\"end\"]) .arrow{translate:-50% -150%}:host([position=\"left\"][alignment=\"start\"]) .arrow{translate:-50% 150%}:host([position=\"right\"]) .arrow{translate:50% 0%}:host([position=\"right\"][alignment=\"end\"]) .arrow{translate:50% -150%}:host([position=\"right\"][alignment=\"start\"]) .arrow{translate:50% 150%}}:host([popover][modal]):before{content:\" \";display:block;inset:0;z-index:99;position:fixed}";
+var e = ":host{--animation-duration: var(--nve-ref-animation-duration-200);margin:calc(var(--nve-sys-layer-popover-offset) + calc(var(--nve-sys-layer-popover-arrow-offset) * 2));border:0;padding:0;background:none;position:fixed;overflow:visible;contain:initial;width:max-content;z-index:99;inset:revert;interest-delay-start:.5s}:host([popover]){opacity:0;pointer-events:none}:host([popover]:not(:popover-open)){display:none!important}:host(:state(transition-start)){transition-duration:var(--animation-duration);transition-timing-function:ease-in-out;transition-property:opacity,display,overlay,translate,transform;transition-behavior:allow-discrete}@supports not (container-type: anchored){:host{--animation-duration: 0}}:host(:popover-open){opacity:1;pointer-events:initial;@starting-style{opacity:0}}:host(:not([nve-popover])),:host([defer-hydration]){opacity:0!important;pointer-events:none!important}[internal-host]{width:var(--width);min-width:var(--min-width);font-family:inherit;display:flex;flex-direction:column;overflow:visible;white-space:nowrap;z-index:9999;border:0;margin:0;user-select:text}@supports (position-area: bottom){[internal-host]{position:relative}.arrow{position-area:bottom;translate:0% 50%}:host([position=\"top\"]) .arrow{position-area:bottom;translate:0% 50%}:host([position=\"top\"][alignment=\"end\"]) .arrow{position-area:bottom right;translate:-50% 50%}:host([position=\"top\"][alignment=\"start\"]) .arrow{position-area:bottom left;translate:50% 50%}:host([position=\"bottom\"]) .arrow{position-area:top;translate:0% -50%}:host([position=\"bottom\"][alignment=\"end\"]) .arrow{position-area:top right;translate:-50% -50%}:host([position=\"bottom\"][alignment=\"start\"]) .arrow{position-area:top left;translate:50% -50%}:host([position=\"left\"]) .arrow{position-area:right;translate:50% 0%}:host([position=\"left\"][alignment=\"end\"]) .arrow{position-area:bottom right;translate:50% -50%}:host([position=\"left\"][alignment=\"start\"]) .arrow{position-area:top right;translate:50% 50%}:host([position=\"right\"]) .arrow{position-area:left;translate:-50% 0%}:host([position=\"right\"][alignment=\"end\"]) .arrow{position-area:bottom left;translate:-50% -50%}:host([position=\"right\"][alignment=\"start\"]) .arrow{position-area:top left;translate:-50% 50%}:host([position=\"center\"]){position-area:center}:host{inset:auto!important;place-self:normal!important;position-anchor:auto!important}:host([position=\"top\"]){position-area:top center}:host([position=\"top\"][alignment=\"start\"]){position-area:top left}:host([position=\"top\"][alignment=\"end\"]){position-area:top right}:host([position=\"top\"][alignment=\"start\"]){position-area:top span-right}:host([position=\"top\"][alignment=\"end\"]){position-area:top span-left}:host([position=\"bottom\"]){position-area:bottom center}:host([position=\"bottom\"][alignment=\"start\"]){position-area:bottom span-right}:host([position=\"bottom\"][alignment=\"end\"]){position-area:bottom span-left}:host([position=\"left\"]){position-area:left center}:host([position=\"left\"][alignment=\"end\"]){position-area:left span-top}:host([position=\"left\"][alignment=\"start\"]){position-area:left span-bottom}:host([position=\"right\"]){position-area:right center}:host([position=\"right\"][alignment=\"end\"]){position-area:right span-top}:host([position=\"right\"][alignment=\"start\"]){position-area:right span-bottom}:host([position=\"top\"]){position-try-fallbacks:top,bottom,left,right}:host([position=\"bottom\"]){position-try-fallbacks:bottom,top,left,right}:host([position=\"left\"]){position-try-fallbacks:left,right,top,bottom}:host([position=\"right\"]){position-try-fallbacks:right,left,top,bottom}}:host([position=\"center\"][alignment=\"center\"]){position-area:unset!important;margin:auto!important;inset:0!important}@supports (not selector(::search-text)) and (position-area: bottom){.arrow{translate:0% -50%}:host([position=\"top\"]) .arrow{translate:0% -50%}:host([position=\"top\"][alignment=\"end\"]) .arrow{translate:-150% -50%}:host([position=\"top\"][alignment=\"start\"]) .arrow{translate:150% -50%}:host([position=\"bottom\"]) .arrow{translate:0% 50%}:host([position=\"bottom\"][alignment=\"end\"]) .arrow{translate:-150% 50%}:host([position=\"bottom\"][alignment=\"start\"]) .arrow{translate:150% 50%}:host([position=\"left\"]) .arrow{translate:-50% 0%}:host([position=\"left\"][alignment=\"end\"]) .arrow{translate:-50% -150%}:host([position=\"left\"][alignment=\"start\"]) .arrow{translate:-50% 150%}:host([position=\"right\"]) .arrow{translate:50% 0%}:host([position=\"right\"][alignment=\"end\"]) .arrow{translate:50% -150%}:host([position=\"right\"][alignment=\"start\"]) .arrow{translate:50% 150%}}:host([popover][modal]):before{content:\" \";display:block;inset:0;z-index:99;position:fixed}";
 //#endregion
 export { e as default };
 

package/dist/internal/styles/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../../src/internal/styles/popover.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  --animation-duration: var(--nve-ref-animation-duration-200);\n  margin: calc(var(--nve-sys-layer-popover-offset) + calc(var(--nve-sys-layer-popover-arrow-offset) * 2));\n  border: 0;\n  padding: 0;\n  background: none;\n  position: fixed;\n  overflow: visible;\n  contain: initial;\n  width: max-content;\n  z-index: 99;\n  inset: revert;\n  interest-delay-start: 0.5s;\n}\n\n:host([popover]) {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* apply transitions during beforetoggle event to prevent flash of unstyled popover on page load */\n:host(:state(transition-start)) {\n  transition-duration: var(--animation-duration);\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, display, overlay, translate, transform;\n  transition-behavior: allow-discrete;\n}\n\n/** workaround for Safari / Firefox which do not respect transitions on implicit anchor positioning */\n@supports not (container-type: anchored) {\n  :host {\n    --animation-duration: 0;\n  }\n}\n\n:host(:popover-open) {\n  opacity: 1;\n  pointer-events: initial;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n/* lit SSR ensure popovers are not visible until hydration has happened */\n:host(:not([nve-popover])),\n:host([defer-hydration]) {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\n[internal-host] {\n  width: var(--width);\n  min-width: var(--min-width);\n  font-family: inherit;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  white-space: nowrap;\n  z-index: 9999;\n  border: 0;\n  margin: 0;\n  user-select: text;\n}\n\n@supports (position-area: bottom) {\n  [internal-host] {\n    position: relative;\n  }\n\n  .arrow {\n    position-area: bottom;\n    translate: 0% 50%;\n  }\n\n  :host([position='top']) .arrow {\n    position-area: bottom;\n    translate: 0% 50%;\n  }\n\n  :host([position='top'][alignment='end']) .arrow {\n    position-area: bottom right;\n    translate: -50% 50%;\n  }\n\n  :host([position='top'][alignment='start']) .arrow {\n    position-area: bottom left;\n    translate: 50% 50%;\n  }\n\n  :host([position='bottom']) .arrow {\n    position-area: top;\n    translate: 0% -50%;\n  }\n\n  :host([position='bottom'][alignment='end']) .arrow {\n    position-area: top right;\n    translate: -50% -50%;\n  }\n\n  :host([position='bottom'][alignment='start']) .arrow {\n    position-area: top left;\n    translate: 50% -50%;\n  }\n\n  :host([position='left']) .arrow {\n    position-area: right;\n    translate: 50% 0%;\n  }\n\n  :host([position='left'][alignment='end']) .arrow {\n    position-area: bottom right;\n    translate: 50% -50%;\n  }\n\n  :host([position='left'][alignment='start']) .arrow {\n    position-area: top right;\n    translate: 50% 50%;\n  }\n\n  :host([position='right']) .arrow {\n    position-area: left;\n    translate: -50% 0%;\n  }\n\n  :host([position='right'][alignment='end']) .arrow {\n    position-area: bottom left;\n    translate: -50% -50%;\n  }\n\n  :host([position='right'][alignment='start']) .arrow {\n    position-area: top left;\n    translate: -50% 50%;\n  }\n\n  /** positioning */\n  :host([position='center']) {\n    position-area: center;\n  }\n\n  :host {\n    inset: auto !important;\n    place-self: normal !important;\n\n    /*\n     * This line is critical for shadow root positioning and auto anchor association\n     * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#implicit_anchor_association\n     */\n    position-anchor: auto !important;\n  }\n\n  /** top */\n  :host([position='top']) {\n    position-area: top center;\n  }\n\n  :host([position='top'][alignment='start']) {\n    position-area: top left;\n  }\n\n  :host([position='top'][alignment='end']) {\n    position-area: top right;\n  }\n\n  :host([position='top'][alignment='start']) {\n    position-area: top span-right;\n  }\n\n  :host([position='top'][alignment='end']) {\n    position-area: top span-left;\n  }\n\n  /** bottom */\n  :host([position='bottom']) {\n    position-area: bottom center;\n  }\n\n  :host([position='bottom'][alignment='start']) {\n    position-area: bottom span-right;\n  }\n\n  :host([position='bottom'][alignment='end']) {\n    position-area: bottom span-left;\n  }\n\n  /** left */\n  :host([position='left']) {\n    position-area: left center;\n  }\n\n  :host([position='left'][alignment='end']) {\n    position-area: left span-top;\n  }\n\n  :host([position='left'][alignment='start']) {\n    position-area: left span-bottom;\n  }\n\n  /** right */\n  :host([position='right']) {\n    position-area: right center;\n  }\n\n  :host([position='right'][alignment='end']) {\n    position-area: right span-top;\n  }\n\n  :host([position='right'][alignment='start']) {\n    position-area: right span-bottom;\n  }\n\n  :host([position='top']) {\n    position-try-fallbacks: top, bottom, left, right;\n  }\n\n  :host([position='bottom']) {\n    position-try-fallbacks: bottom, top, left, right;\n  }\n\n  :host([position='left']) {\n    position-try-fallbacks: left, right, top, bottom;\n  }\n\n  :host([position='right']) {\n    position-try-fallbacks: right, left, top, bottom;\n  }\n}\n\n:host([position='center'][alignment='center']) {\n  position-area: unset !important;\n  margin: auto !important;\n  inset: 0 !important;\n}\n\n/*\n * Remove the following @supports block after Chrome 145 is stable.\n * This is to compensate for a change in Chrome 144 for how anchor positioning with transforms works.\n * https://developer.chrome.com/blog/chrome-144-beta#css_anchor_positioning_with_transforms\n * https://x.com/una/status/1995538970223018004\n * \n * The (not selector(::search-text)) selector is used to target Chrome 143 and below.\n */\n@supports (not selector(::search-text)) and (position-area: bottom) {\n  .arrow {\n    translate: 0% -50%;\n  }\n\n  :host([position='top']) .arrow {\n    translate: 0% -50%;\n  }\n\n  :host([position='top'][alignment='end']) .arrow {\n    translate: -150% -50%;\n  }\n\n  :host([position='top'][alignment='start']) .arrow {\n    translate: 150% -50%;\n  }\n\n  :host([position='bottom']) .arrow {\n    translate: 0% 50%;\n  }\n\n  :host([position='bottom'][alignment='end']) .arrow {\n    translate: -150% 50%;\n  }\n\n  :host([position='bottom'][alignment='start']) .arrow {\n    translate: 150% 50%;\n  }\n\n  :host([position='left']) .arrow {\n    translate: -50% 0%;\n  }\n\n  :host([position='left'][alignment='end']) .arrow {\n    translate: -50% -150%;\n  }\n\n  :host([position='left'][alignment='start']) .arrow {\n    translate: -50% 150%;\n  }\n\n  :host([position='right']) .arrow {\n    translate: 50% 0%;\n  }\n\n  :host([position='right'][alignment='end']) .arrow {\n    translate: 50% -150%;\n  }\n\n  :host([position='right'][alignment='start']) .arrow {\n    translate: 50% 150%;\n  }\n}\n\n:host([popover][modal])::before {\n  content: ' ';\n  display: block;\n  inset: 0;\n  z-index: 99;\n  position: fixed;\n}\n"],"mappings":""}
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/internal/styles/popover.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  --animation-duration: var(--nve-ref-animation-duration-200);\n  margin: calc(var(--nve-sys-layer-popover-offset) + calc(var(--nve-sys-layer-popover-arrow-offset) * 2));\n  border: 0;\n  padding: 0;\n  background: none;\n  position: fixed;\n  overflow: visible;\n  contain: initial;\n  width: max-content;\n  z-index: 99;\n  inset: revert;\n  interest-delay-start: 0.5s;\n}\n\n:host([popover]) {\n  opacity: 0;\n  pointer-events: none;\n}\n\n/* Closed popovers must not retain layout boxes from host display styles. */\n:host([popover]:not(:popover-open)) {\n  display: none !important;\n}\n\n/* apply transitions during beforetoggle event to prevent flash of unstyled popover on page load */\n:host(:state(transition-start)) {\n  transition-duration: var(--animation-duration);\n  transition-timing-function: ease-in-out;\n  transition-property: opacity, display, overlay, translate, transform;\n  transition-behavior: allow-discrete;\n}\n\n/** workaround for Safari / Firefox which do not respect transitions on implicit anchor positioning */\n@supports not (container-type: anchored) {\n  :host {\n    --animation-duration: 0;\n  }\n}\n\n:host(:popover-open) {\n  opacity: 1;\n  pointer-events: initial;\n\n  @starting-style {\n    opacity: 0;\n  }\n}\n\n/* lit SSR ensure popovers are not visible until hydration has happened */\n:host(:not([nve-popover])),\n:host([defer-hydration]) {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\n[internal-host] {\n  width: var(--width);\n  min-width: var(--min-width);\n  font-family: inherit;\n  display: flex;\n  flex-direction: column;\n  overflow: visible;\n  white-space: nowrap;\n  z-index: 9999;\n  border: 0;\n  margin: 0;\n  user-select: text;\n}\n\n@supports (position-area: bottom) {\n  [internal-host] {\n    position: relative;\n  }\n\n  .arrow {\n    position-area: bottom;\n    translate: 0% 50%;\n  }\n\n  :host([position='top']) .arrow {\n    position-area: bottom;\n    translate: 0% 50%;\n  }\n\n  :host([position='top'][alignment='end']) .arrow {\n    position-area: bottom right;\n    translate: -50% 50%;\n  }\n\n  :host([position='top'][alignment='start']) .arrow {\n    position-area: bottom left;\n    translate: 50% 50%;\n  }\n\n  :host([position='bottom']) .arrow {\n    position-area: top;\n    translate: 0% -50%;\n  }\n\n  :host([position='bottom'][alignment='end']) .arrow {\n    position-area: top right;\n    translate: -50% -50%;\n  }\n\n  :host([position='bottom'][alignment='start']) .arrow {\n    position-area: top left;\n    translate: 50% -50%;\n  }\n\n  :host([position='left']) .arrow {\n    position-area: right;\n    translate: 50% 0%;\n  }\n\n  :host([position='left'][alignment='end']) .arrow {\n    position-area: bottom right;\n    translate: 50% -50%;\n  }\n\n  :host([position='left'][alignment='start']) .arrow {\n    position-area: top right;\n    translate: 50% 50%;\n  }\n\n  :host([position='right']) .arrow {\n    position-area: left;\n    translate: -50% 0%;\n  }\n\n  :host([position='right'][alignment='end']) .arrow {\n    position-area: bottom left;\n    translate: -50% -50%;\n  }\n\n  :host([position='right'][alignment='start']) .arrow {\n    position-area: top left;\n    translate: -50% 50%;\n  }\n\n  /** positioning */\n  :host([position='center']) {\n    position-area: center;\n  }\n\n  :host {\n    inset: auto !important;\n    place-self: normal !important;\n\n    /*\n     * This line is critical for shadow root positioning and auto anchor association\n     * https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Anchor_positioning/Using#implicit_anchor_association\n     */\n    position-anchor: auto !important;\n  }\n\n  /** top */\n  :host([position='top']) {\n    position-area: top center;\n  }\n\n  :host([position='top'][alignment='start']) {\n    position-area: top left;\n  }\n\n  :host([position='top'][alignment='end']) {\n    position-area: top right;\n  }\n\n  :host([position='top'][alignment='start']) {\n    position-area: top span-right;\n  }\n\n  :host([position='top'][alignment='end']) {\n    position-area: top span-left;\n  }\n\n  /** bottom */\n  :host([position='bottom']) {\n    position-area: bottom center;\n  }\n\n  :host([position='bottom'][alignment='start']) {\n    position-area: bottom span-right;\n  }\n\n  :host([position='bottom'][alignment='end']) {\n    position-area: bottom span-left;\n  }\n\n  /** left */\n  :host([position='left']) {\n    position-area: left center;\n  }\n\n  :host([position='left'][alignment='end']) {\n    position-area: left span-top;\n  }\n\n  :host([position='left'][alignment='start']) {\n    position-area: left span-bottom;\n  }\n\n  /** right */\n  :host([position='right']) {\n    position-area: right center;\n  }\n\n  :host([position='right'][alignment='end']) {\n    position-area: right span-top;\n  }\n\n  :host([position='right'][alignment='start']) {\n    position-area: right span-bottom;\n  }\n\n  :host([position='top']) {\n    position-try-fallbacks: top, bottom, left, right;\n  }\n\n  :host([position='bottom']) {\n    position-try-fallbacks: bottom, top, left, right;\n  }\n\n  :host([position='left']) {\n    position-try-fallbacks: left, right, top, bottom;\n  }\n\n  :host([position='right']) {\n    position-try-fallbacks: right, left, top, bottom;\n  }\n}\n\n:host([position='center'][alignment='center']) {\n  position-area: unset !important;\n  margin: auto !important;\n  inset: 0 !important;\n}\n\n/*\n * Remove the following @supports block after Chrome 145 is stable.\n * This is to compensate for a change in Chrome 144 for how anchor positioning with transforms works.\n * https://developer.chrome.com/blog/chrome-144-beta#css_anchor_positioning_with_transforms\n * https://x.com/una/status/1995538970223018004\n * \n * The (not selector(::search-text)) selector is used to target Chrome 143 and below.\n */\n@supports (not selector(::search-text)) and (position-area: bottom) {\n  .arrow {\n    translate: 0% -50%;\n  }\n\n  :host([position='top']) .arrow {\n    translate: 0% -50%;\n  }\n\n  :host([position='top'][alignment='end']) .arrow {\n    translate: -150% -50%;\n  }\n\n  :host([position='top'][alignment='start']) .arrow {\n    translate: 150% -50%;\n  }\n\n  :host([position='bottom']) .arrow {\n    translate: 0% 50%;\n  }\n\n  :host([position='bottom'][alignment='end']) .arrow {\n    translate: -150% 50%;\n  }\n\n  :host([position='bottom'][alignment='start']) .arrow {\n    translate: 150% 50%;\n  }\n\n  :host([position='left']) .arrow {\n    translate: -50% 0%;\n  }\n\n  :host([position='left'][alignment='end']) .arrow {\n    translate: -50% -150%;\n  }\n\n  :host([position='left'][alignment='start']) .arrow {\n    translate: -50% 150%;\n  }\n\n  :host([position='right']) .arrow {\n    translate: 50% 0%;\n  }\n\n  :host([position='right'][alignment='end']) .arrow {\n    translate: 50% -150%;\n  }\n\n  :host([position='right'][alignment='start']) .arrow {\n    translate: 50% 150%;\n  }\n}\n\n:host([popover][modal])::before {\n  content: ' ';\n  display: block;\n  inset: 0;\n  z-index: 99;\n  position: fixed;\n}\n"],"mappings":""}

package/dist/logo/logo2.js

@@ -12,7 +12,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-logo",
-			version: "2.17.0"
+			version: "2.18.0"
 		};
 	}
 	render() {

package/dist/menu/menu-group2.js

@@ -21,7 +21,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-menu-group",
-			version: "2.17.0",
+			version: "2.18.0",
 			children: ["nve-menu"]
 		};
 	}

package/dist/menu/menu-item2.js

@@ -13,7 +13,7 @@ var c = class extends s(i) {
 	static {
 		this.metadata = {
 			tag: "nve-menu-item",
-			version: "2.17.0",
+			version: "2.18.0",
 			parents: ["nve-menu"]
 		};
 	}