@nvidia-elements/core 2.20.3 → 2.21.1

package/dist/custom-elements.json

@@ -11620,7 +11620,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience",
+          "description": "A dropdown group coordinates linked dropdowns and cascading submenus.",
           "name": "DropdownGroup",
           "cssProperties": [
             {
@@ -11673,7 +11673,7 @@
             "since": "1.30.1",
             "status": "stable",
             "behavior": "navigation",
-            "markdown": "## nve-dropdown-group\n\nA Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n\n### Example\n\n```html\n<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\"> item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for dropdown content |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when a dropdown in the group closes |\n| open | `CustomEvent` | Dispatched when a dropdown in the group opens |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| close | `close(): unknown` | Closes every descendant dropdown in the group. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --arrow-transform | `string` | Transform applied to the popover arrow |"
+            "markdown": "## nve-dropdown-group\n\nA dropdown group coordinates linked dropdowns and cascading submenus.\n\n### Example\n\n```html\n<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\"> item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/dropdown-group/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for dropdown content |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| close | `CustomEvent` | Dispatched when a dropdown in the group closes |\n| open | `CustomEvent` | Dispatched when a dropdown in the group opens |\n\n### Methods\n\n| method | signatures | description |\n| ------ | ---------- | ----------- |\n| close | `close(): unknown` | Closes every descendant dropdown in the group. |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --arrow-transform | `string` | Transform applied to the popover arrow |"
           }
         }
       ],
@@ -27912,7 +27912,7 @@
             {
               "name": "host",
               "type": {
-                "text": "HTMLElement & { anchor?: HTMLElement | string; _activeTrigger?: HTMLElement }",
+                "text": "HTMLElement & { anchor?: HTMLElement | string }",
                 "_sourceAliases": []
               }
             }

package/dist/data.html.json

@@ -1461,7 +1461,7 @@
     },
     {
       "name": "nve-dropdown-group",
-      "description": "A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n---\n\n\n### **Events:**\n - **open** - Dispatched when a dropdown in the group opens\n- **close** - Dispatched when a dropdown in the group closes\n\n### **Methods:**\n - **close()** - Closes every descendant dropdown in the group.\n\n### **Slots:**\n - _default_ - default slot for dropdown content\n\n### **CSS Properties:**\n - **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_",
+      "description": "A dropdown group coordinates linked dropdowns and cascading submenus.\n---\n\n\n### **Events:**\n - **open** - Dispatched when a dropdown in the group opens\n- **close** - Dispatched when a dropdown in the group closes\n\n### **Methods:**\n - **close()** - Closes every descendant dropdown in the group.\n\n### **Slots:**\n - _default_ - default slot for dropdown content\n\n### **CSS Properties:**\n - **--arrow-transform** - Transform applied to the popover arrow _(default: undefined)_",
       "attributes": [],
       "references": [
         {

package/dist/date/date2.js

@@ -22,7 +22,7 @@ var l = { expand: "expand" }, u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	static {

package/dist/datetime/datetime2.js

@@ -22,7 +22,7 @@ var l = { expand: "expand" }, u = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = { close: "close" }, g = class extends d {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	static {

package/dist/divider/divider2.js

@@ -15,7 +15,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-divider",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	render() {

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	render() {

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

@@ -13,7 +13,7 @@ var c = class extends s(a) {
 	static {
 		this.metadata = {
 			tag: "nve-drag-handle",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	static {

package/dist/drawer/drawer-content2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

@@ -30,7 +30,7 @@ var p = { close: "close" }, m = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	static {

package/dist/dropdown/dropdown-footer2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -9,7 +9,7 @@ var i = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "2.20.3",
+			version: "2.21.1",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown.js

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

package/dist/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":["dropdown_default"],"sources":["../../src/dropdown/dropdown.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: 0px;\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --padding: var(--nve-ref-size-400);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --width: fit-content;\n  --min-width: fit-content;\n  --gap: var(--nve-ref-space-sm);\n  --_divider-padding: var(--padding);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  gap: var(--nve-ref-space-sm);\n  width: var(--width);\n  min-width: var(--min-width);\n  outline: 0;\n}\n\n[internal-host]::backdrop {\n  background: transparent;\n}\n\n.header {\n  display: flex;\n  gap: var(--gap);\n}\n\n.header:has(nve-icon-button) {\n  min-height: var(--nve-ref-size-300);\n}\n\nnve-icon-button {\n  position: absolute;\n  top: var(--nve-ref-size-200);\n  right: var(--nve-ref-size-200);\n  z-index: 99;\n}\n\n.arrow {\n  width: var(--nve-ref-size-400);\n  height: var(--nve-ref-size-400);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-top-left-radius: var(--nve-ref-border-radius-xs);\n  position: absolute;\n  border-left: var(--border);\n  border-top: var(--border);\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(-45deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, -1px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(45deg);\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--_divider-padding));\n}\n"],"mappings":""}
+{"version":3,"file":"dropdown.js","names":["dropdown_default"],"sources":["../../src/dropdown/dropdown.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --nve-sys-interaction-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-interaction-field-background: var(--nve-sys-interaction-background-300);\n  --nve-sys-layer-popover-arrow-padding: 0px;\n  --nve-sys-layer-popover-arrow-offset: 0px;\n  --nve-sys-layer-popover-offset: 0px;\n  --arrow-transform: translate(0, -2px) rotate(225deg);\n  --border: var(--nve-ref-border-width-sm) solid var(--nve-ref-border-color-muted);\n  --border-radius: var(--nve-ref-border-radius-md);\n  --background: var(--nve-sys-layer-overlay-background);\n  --color: var(--nve-sys-layer-overlay-color);\n  --padding: var(--nve-ref-size-400);\n  --box-shadow: var(--nve-ref-shadow-400);\n  --width: fit-content;\n  --min-width: fit-content;\n  --gap: var(--nve-ref-space-sm);\n  --_divider-padding: var(--padding);\n}\n\n[internal-host] {\n  padding: var(--padding);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  background: var(--background);\n  color: var(--color);\n  box-shadow: var(--box-shadow);\n  gap: var(--nve-ref-space-sm);\n  width: var(--width);\n  min-width: var(--min-width);\n  outline: 0;\n}\n\n[internal-host]::backdrop {\n  background: transparent;\n}\n\n.header {\n  display: flex;\n  gap: var(--gap);\n}\n\n.header:has(nve-icon-button) {\n  min-height: var(--nve-ref-size-300);\n}\n\nnve-icon-button {\n  position: absolute;\n  top: var(--nve-ref-size-200);\n  right: var(--nve-ref-size-200);\n  z-index: 99;\n}\n\n.arrow {\n  width: var(--nve-ref-size-400);\n  height: var(--nve-ref-size-400);\n  background: var(--background);\n  transform: var(--arrow-transform);\n  border-top-left-radius: var(--nve-ref-border-radius-xs);\n  /* Cover the panel shadow without painting the unused half over its content. */\n  z-index: 10000;\n  clip-path: polygon(0 0, 100% 0, 0 100%);\n  position: absolute;\n  border-left: var(--border);\n  border-top: var(--border);\n}\n\n:host([position*='top']) {\n  --arrow-transform: translate(0, -2px) rotate(225deg);\n}\n\n:host([position*='right']) {\n  --arrow-transform: translate(2px, 0) rotate(-45deg);\n}\n\n:host([position*='bottom']) {\n  --arrow-transform: translate(0, 2px) rotate(45deg);\n}\n\n:host([position*='left']) {\n  --arrow-transform: translate(-2px, 0) rotate(135deg);\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n\n::slotted(nve-divider) {\n  margin: 0 calc(-1 * var(--_divider-padding));\n}\n"],"mappings":""}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = { close: "close" }, m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	static {
@@ -32,7 +32,7 @@ var p = { close: "close" }, m = class extends c {
 		return this.modal;
 	}
 	render() {
-		return l`<div internal-host><slot name="header"></slot>${this.closable ? l`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @click="${this.hidePopover}" icon-name="cancel" container="flat" size="sm" .ariaLabel="${this.i18n.close}"></nve-icon-button>` : ""}<slot></slot><slot name="footer"></slot>${this.arrow ? l`<div class="arrow"></div>` : ""}</div>`;
+		return l`<div internal-host><slot name="header"></slot>${this.closable ? l`<nve-icon-button part="icon-button" exportparts="icon:icon-button-icon" @click="${this.hidePopover}" icon-name="cancel" container="flat" size="sm" .ariaLabel="${this.i18n.close}"></nve-icon-button>` : ""}<slot></slot><slot name="footer"></slot></div>${this.arrow ? l`<div class="arrow"></div>` : ""}`;
 	}
 };
 a([u({ type: String })], m.prototype, "anchor", void 0), a([u({ type: String })], m.prototype, "trigger", void 0), a([u({

package/dist/dropdown/dropdown2.js.map

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

package/dist/dropdown-group/dropdown-group.d.ts

@@ -2,7 +2,7 @@ import { LitElement } from 'lit';
 import type { Dropdown } from '@nvidia-elements/core/dropdown';
 /**
  * @element nve-dropdown-group
- * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience
+ * @description A dropdown group coordinates linked dropdowns and cascading submenus.
  * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/
  * @since 1.30.1
  * @entrypoint \@nvidia-elements/core/dropdown-group

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.examples.js","names":["dropdown_group_examples_default"],"sources":["../../src/dropdown-group/dropdown-group.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/dropdown-group/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\n\nexport default {\n  title: 'Elements/Dropdown Group',\n  component: 'nve-dropdown-group',\n};\n\n/**\n * @summary Cascading dropdown menu group with nested submenus for hierarchical navigation.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button popovertarget=\"menu-1\">menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item popovertarget=\"menu-3\">\n            item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 2-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with disabled menu items in non-interactive states.\n */\nexport const WithDisabledItems = {\n  render: () => html`\n    <nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"disabled-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"disabled-menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item disabled>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item disabled>item 2-2</nve-menu-item>\n          <nve-menu-item popovertarget=\"disabled-menu-3\">\n            item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item disabled>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with leading icons for visual identification of menu item types.\n */\nexport const WithIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"icon-menu-2\">\n            <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"icon-menu-3\">\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.\n */\nexport const WithMoreIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"more-icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"more-icon-menu-2\">\n            <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"more-icon-menu-3\">\n            <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};"],"mappings":";AAGA,IAAAA,IAAS"}
+{"version":3,"file":"dropdown-group.examples.js","names":["dropdown_group_examples_default"],"sources":["../../src/dropdown-group/dropdown-group.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/dropdown-group/define.js';\nimport '@nvidia-elements/core/dropdown/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/icon/define.js';\nimport '@nvidia-elements/core/menu/define.js';\n\nexport default {\n  title: 'Elements/Dropdown Group',\n  component: 'nve-dropdown-group',\n};\n\n/**\n * @summary Cascading dropdown menu group with nested submenus for hierarchical navigation.\n */\nexport const Default = {\n  render: () => html`\n    <nve-button popovertarget=\"menu-1\">menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item popovertarget=\"menu-3\">\n            item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>item 2-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with disabled menu items in non-interactive states.\n */\nexport const WithDisabledItems = {\n  render: () => html`\n    <nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"disabled-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"disabled-menu-2\">\n            item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item disabled>item 1-2</nve-menu-item>\n          <nve-menu-item>item 1-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 2-1</nve-menu-item>\n          <nve-menu-item disabled>item 2-2</nve-menu-item>\n          <nve-menu-item popovertarget=\"disabled-menu-3\">\n            item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>item 3-1</nve-menu-item>\n          <nve-menu-item disabled>item 3-2</nve-menu-item>\n          <nve-menu-item>item 3-3</nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu with leading icons for visual identification of menu item types.\n */\nexport const WithIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"icon-menu-2\">\n            <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"icon-menu-3\">\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.\n */\nexport const WithMoreIcons = {\n  render: () => html`\n    <nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n    <nve-dropdown-group>\n      <nve-dropdown id=\"more-icon-menu-1\">\n        <nve-menu>\n          <nve-menu-item popovertarget=\"more-icon-menu-2\">\n            <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2\n          </nve-menu-item>\n          <nve-menu-item popovertarget=\"more-icon-menu-3\">\n            <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n      <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n        <nve-menu>\n          <nve-menu-item>\n            <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2\n          </nve-menu-item>\n          <nve-menu-item>\n            <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3\n          </nve-menu-item>\n        </nve-menu>\n      </nve-dropdown>\n    </nve-dropdown-group>\n  `\n};\n\n/**\n * @summary Navigate cascading menus with the keyboard when the document direction is RTL.\n * @description `ArrowLeft` opens the focused item's submenu and focuses its first enabled item.\n * `ArrowRight` closes the current dropdown and returns focus to its opening invoker.\n * Escape closes the group's dropdowns.\n * @tags test-case\n */\nexport const RightToLeft = {\n  render: () => html`\n    <div dir=\"rtl\">\n      <nve-button popovertarget=\"rtl-menu\">Actions</nve-button>\n      <nve-dropdown-group>\n        <nve-dropdown id=\"rtl-menu\">\n          <nve-menu>\n            <nve-menu-item popovertarget=\"rtl-submenu\">\n              Move <nve-icon name=\"caret\" direction=\"left\" size=\"sm\" slot=\"suffix\"></nve-icon>\n            </nve-menu-item>\n          </nve-menu>\n        </nve-dropdown>\n        <nve-dropdown id=\"rtl-submenu\" position=\"left\">\n          <nve-menu>\n            <nve-menu-item>Archive</nve-menu-item>\n            <nve-menu-item>Trash</nve-menu-item>\n          </nve-menu>\n        </nve-dropdown>\n      </nve-dropdown-group>\n    </div>\n  `\n};\n"],"mappings":";AAGA,IAAAA,IAAS"}

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

@@ -37,6 +37,17 @@
       "description": "",
       "composition": true,
       "tags": []
+    },
+    {
+      "id": "dropdown-group-right-to-left",
+      "name": "RightToLeft",
+      "template": "<div dir=\"rtl\">\n  <nve-button popovertarget=\"rtl-menu\">Actions</nve-button>\n  <nve-dropdown-group>\n    <nve-dropdown id=\"rtl-menu\">\n      <nve-menu>\n        <nve-menu-item popovertarget=\"rtl-submenu\"> Move <nve-icon name=\"caret\" direction=\"left\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      </nve-menu>\n    </nve-dropdown>\n    <nve-dropdown id=\"rtl-submenu\" position=\"left\">\n      <nve-menu>\n        <nve-menu-item>Archive</nve-menu-item>\n        <nve-menu-item>Trash</nve-menu-item>\n      </nve-menu>\n    </nve-dropdown>\n  </nve-dropdown-group>\n</div>\n",
+      "summary": "Navigate cascading menus with the keyboard when the document direction is RTL.",
+      "description": "`ArrowLeft` opens the focused item's submenu and focuses its first enabled item. `ArrowRight` closes the current dropdown and returns focus to its opening invoker. Escape closes the group's dropdowns.",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
     }
   ]
 }

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

@@ -1,5 +1,5 @@
 import { audit as e } from "../internal/controllers/audit.controller.js";
-import { isSimpleFocusable as t } from "../internal/utils/focus.js";
+import { getActiveElement as t } from "../internal/utils/focus.js";
 import { appendRootNodeStyle as n, clickOutsideElementBounds as r, getFlattenedFocusableItems as i } from "../internal/utils/dom.js";
 import { useStyles as a } from "../internal/styles/index.js";
 import o from "../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
@@ -14,50 +14,80 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-group",
-			version: "2.20.3",
+			version: "2.21.1",
 			children: ["nve-dropdown"]
 		};
 	}
 	render() {
-		return l`<div internal-host><slot @slotchange="${this.#t}"></slot></div>`;
+		return l`<div internal-host><slot @slotchange="${this.#n}"></slot></div>`;
 	}
-	#e = (e) => this.#n(e);
+	#e = /* @__PURE__ */ new WeakMap();
+	#t;
 	connectedCallback() {
-		super.connectedCallback(), n(this, s), globalThis.document?.addEventListener("pointerup", this.#e), this.addEventListener("keydown", this.#r), this.addEventListener("open", this.#i), this.addEventListener("close", this.#a);
+		super.connectedCallback(), n(this, s), globalThis.document?.addEventListener("pointerup", this.#r), this.addEventListener("keydown", this.#i), this.addEventListener("beforetoggle", this.#u, !0), this.addEventListener("open", this.#l), this.addEventListener("close", this.#d);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), globalThis.document?.removeEventListener("pointerup", this.#e), this.removeEventListener("keydown", this.#r), this.removeEventListener("open", this.#i), this.removeEventListener("close", this.#a);
+		super.disconnectedCallback(), globalThis.document?.removeEventListener("pointerup", this.#r), this.removeEventListener("keydown", this.#i), this.removeEventListener("beforetoggle", this.#u, !0), this.removeEventListener("open", this.#l), this.removeEventListener("close", this.#d);
 	}
-	#t() {
+	#n() {
 		this.dropdowns.forEach((e) => {
 			e.popoverType = "manual";
 		});
 	}
-	#n(e) {
-		let t = this.dropdowns.some((e) => e.matches(":popover-open")), n = this.dropdowns.every((t) => r(e, t));
-		t && n && this.close();
-	}
-	#r(e) {
-		let n = e.target;
-		if (e.code === "Escape" && this.close(), e.code === "ArrowRight") {
-			let e = n.getAttribute("popovertarget");
-			this.dropdowns.find((t) => t.id === e)?.showPopover();
-		}
-		e.code === "ArrowLeft" && t(e.target) && n.closest("nve-dropdown")?.hidePopover();
-	}
+	#r = (e) => {
+		let t = this.dropdowns.filter((e) => e.matches(":popover-open"));
+		t.length && t.every((t) => r(e, t)) && this.close();
+	};
 	#i(e) {
-		let t = e.target;
-		t.localName === "nve-dropdown" && this.dropdowns.find((e) => e === t) && i(t)[0]?.focus();
+		let t = e.code === "Escape" || e.code === "ArrowLeft" || e.code === "ArrowRight";
+		if (e.defaultPrevented || !t) return;
+		let n = e.composedPath(), r = this.#a(n), i = this.#c(r);
+		(i || r === this) && (e.code === "Escape" ? (e.preventDefault(), e.stopPropagation(), this.close()) : i && this.#o(e, n, i));
 	}
 	#a(e) {
-		let t = e.target;
-		t.localName === "nve-dropdown" && this.dropdowns.find((e) => e === t) && t._activeTrigger?.focus();
+		return e.find((e) => e instanceof HTMLElement && (e.localName === "nve-dropdown" || e.localName === "nve-dropdown-group"));
+	}
+	#o(e, n, r) {
+		let i = t(this.ownerDocument);
+		if (!(i instanceof HTMLElement) || !n.includes(i)) return;
+		let a = getComputedStyle(this).direction === "rtl", o = a ? "ArrowLeft" : "ArrowRight", s = a ? "ArrowRight" : "ArrowLeft";
+		e.code === o ? this.#s(i, e) : e.code === s && i.localName === "nve-menu-item" && (e.preventDefault(), e.stopPropagation(), r.hidePopover());
+	}
+	#s(e, t) {
+		if (e.matches("[disabled]") || !("popoverTargetElement" in e)) return;
+		let n = e.popoverTargetElement, r = this.#c(n);
+		r && (t.preventDefault(), t.stopPropagation(), r.showPopover({ source: e }));
+	}
+	#c(e) {
+		return this.dropdowns.find((t) => t === e);
+	}
+	#l(e) {
+		let t = this.#c(e.composedPath()[0]);
+		t && (this.#t?.matches(":popover-open") || (this.#t = t), this.#e.delete(t), e.detail?.trigger instanceof HTMLElement && this.#e.set(t, e.detail.trigger), i(t)[0]?.focus());
+	}
+	#u(e) {
+		let t = this.#c(e.composedPath()[0]);
+		t && e.newState === "closed" && !t.matches(":focus-within") && this.#e.delete(t);
+	}
+	#d(e) {
+		let t = this.#c(e.composedPath()[0]);
+		if (t) {
+			let e = this.#e.get(t);
+			t === this.#t && (this.#t = void 0), this.#e.delete(t);
+			let n = this.ownerDocument.activeElement;
+			(!n || n === this.ownerDocument.body || t.matches(":focus-within")) && e?.isConnected && e.focus();
+		}
 	}
 	close() {
-		this.querySelectorAll("nve-dropdown").forEach((e) => e.hidePopover());
+		let e = this.#t ? this.#e.get(this.#t) : void 0;
+		this.#t = void 0, this.#e = /* @__PURE__ */ new WeakMap();
+		let t = Array.from(this.querySelectorAll("nve-dropdown"));
+		t.forEach((e) => e.hidePopover());
+		let n = this.ownerDocument.activeElement;
+		(!n || n === this.ownerDocument.body || t.some((e) => e.matches(":focus-within"))) && e?.isConnected && e.focus();
 	}
 };
-o([u()], d.prototype, "dropdowns", void 0), d = o([e()], d);
+o([u({ selector: "nve-dropdown" })], d.prototype, "dropdowns", void 0), d = o([e()], d);
 export { d as DropdownGroup };
 
 //# sourceMappingURL=dropdown-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","names":["globalStyles","_decorate","__decorate","dropdown_group_global_default","DropdownGroup","LitElement","useStyles","#syncDropdowns","#pointerup","appendRootNodeStyle","#_pointerup","#keydown","#onOpen","#onClose","multipleDropdownsOpen","dropdown","pointerIsOutsideGroup","clickOutsideElementBounds","event","target","targetId","d","isSimpleFocusable","getFlattenedFocusableItems","element","queryAssignedElements","audit"],"sources":["../../src/dropdown-group/dropdown-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  clickOutsideElementBounds,\n  appendRootNodeStyle,\n  getFlattenedFocusableItems,\n  isSimpleFocusable,\n  useStyles,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A Dropdown Group streamlines the management of linked dropdowns and supports nested dropdowns for a more organized and intuitive user experience\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n  static styles = useStyles([]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-group',\n    version: '0.0.0',\n    children: ['nve-dropdown']\n  };\n\n  @queryAssignedElements() protected dropdowns!: Dropdown[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncDropdowns}></slot>\n      </div>\n    `;\n  }\n\n  #_pointerup = (e: PointerEvent) => this.#pointerup(e);\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    globalThis.document?.addEventListener('pointerup', this.#_pointerup);\n    this.addEventListener('keydown', this.#keydown);\n    this.addEventListener('open', this.#onOpen as EventListener);\n    this.addEventListener('close', this.#onClose as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.document?.removeEventListener('pointerup', this.#_pointerup);\n    this.removeEventListener('keydown', this.#keydown);\n    this.removeEventListener('open', this.#onOpen as EventListener);\n    this.removeEventListener('close', this.#onClose as EventListener);\n  }\n\n  #syncDropdowns() {\n    this.dropdowns.forEach(dropdown => {\n      dropdown.popoverType = 'manual';\n    });\n  }\n\n  #pointerup(event: PointerEvent) {\n    const multipleDropdownsOpen = this.dropdowns.some(dropdown => dropdown.matches(':popover-open'));\n    const pointerIsOutsideGroup = this.dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown));\n    if (multipleDropdownsOpen && pointerIsOutsideGroup) {\n      this.close();\n    }\n  }\n\n  #keydown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    if (event.code === 'Escape') {\n      this.close();\n    }\n    if (event.code === 'ArrowRight') {\n      const targetId = target.getAttribute('popovertarget');\n      const dropdown = this.dropdowns.find(d => d.id === targetId);\n      dropdown?.showPopover();\n    }\n    if (event.code === 'ArrowLeft' && isSimpleFocusable(event.target as HTMLElement)) {\n      target.closest('nve-dropdown')?.hidePopover();\n    }\n  }\n\n  #onOpen(event: CustomEvent) {\n    const dropdown = event.target as HTMLElement;\n    const isLocalDropdown = dropdown.localName === 'nve-dropdown' && this.dropdowns.find(d => d === dropdown);\n    if (isLocalDropdown) {\n      getFlattenedFocusableItems(dropdown)[0]?.focus();\n    }\n  }\n\n  #onClose(event: CustomEvent) {\n    const element = event.target as HTMLElement;\n    const isLocalDropdown = element.localName === 'nve-dropdown' && this.dropdowns.find(d => d === element);\n    if (isLocalDropdown) {\n      // _activeTrigger is a popover controller internal API\n      const dropdown = element as Dropdown & { _activeTrigger?: HTMLElement };\n      dropdown._activeTrigger?.focus();\n    }\n  }\n\n  /** Closes every descendant dropdown in the group. */\n  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA6BO,IAAMI,IAAN,cAA4BC,EAAW;;EAC5B,KAAA,SAAAC,EAAU,CAAC,CAAC;;;EAED,KAAA,WAAA;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,cAAc;EAC3B;;CAIA,SAAS;EACP,OAAO,CAAI,yCAEa,KAAKC,GAAe;CAG9C;CAEA,MAAe,MAAoB,KAAKC,GAAW,CAAC;CAEpD,oBAAoB;EAMlB,AALA,MAAM,kBAAkB,GACxBC,EAAoB,MAAMT,CAAY,GACtC,WAAW,UAAU,iBAAiB,aAAa,KAAKU,EAAW,GACnE,KAAK,iBAAiB,WAAW,KAAKC,EAAQ,GAC9C,KAAK,iBAAiB,QAAQ,KAAKC,EAAwB,GAC3D,KAAK,iBAAiB,SAAS,KAAKC,EAAyB;CAC/D;CAEA,uBAAuB;EAKrB,AAJA,MAAM,qBAAqB,GAC3B,WAAW,UAAU,oBAAoB,aAAa,KAAKH,EAAW,GACtE,KAAK,oBAAoB,WAAW,KAAKC,EAAQ,GACjD,KAAK,oBAAoB,QAAQ,KAAKC,EAAwB,GAC9D,KAAK,oBAAoB,SAAS,KAAKC,EAAyB;CAClE;CAEA,KAAiB;EACf,KAAK,UAAU,SAAQ,MAAY;GACjC,EAAS,cAAc;EACzB,CAAC;CACH;CAEA,GAAW,GAAqB;EAC9B,IAAMC,IAAwB,KAAK,UAAU,MAAK,MAAYC,EAAS,QAAQ,eAAe,CAAC,GACzFC,IAAwB,KAAK,UAAU,OAAM,MAAYC,EAA0BC,GAAOH,CAAQ,CAAC;EACzG,AAAID,KAAyBE,KAC3B,KAAK,MAAM;CAEf;CAEA,GAAS,GAAsB;EAC7B,IAAMG,IAASD,EAAM;EAIrB,IAHIA,EAAM,SAAS,YACjB,KAAK,MAAM,GAETA,EAAM,SAAS,cAAc;GAC/B,IAAME,IAAWD,EAAO,aAAa,eAAe;GAEpD,KADsB,UAAU,MAAK,MAAKE,EAAE,OAAOD,CACnD,CAAA,EAAU,YAAY;EACxB;EACA,AAAIF,EAAM,SAAS,eAAeI,EAAkBJ,EAAM,MAAqB,KAC7EC,EAAO,QAAQ,cAAc,CAAC,EAAE,YAAY;CAEhD;CAEA,GAAQ,GAAoB;EAC1B,IAAMJ,IAAWG,EAAM;EAEvB,AADwBH,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAKM,MAAMN,CAAQ,KAEtGQ,EAA2BR,CAAQ,CAAC,CAAC,EAAE,EAAE,MAAM;CAEnD;CAEA,GAAS,GAAoB;EAC3B,IAAMS,IAAUN,EAAM;EAEtB,AADwBM,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAKH,MAAMG,CAAO,KAIpGA,EAAS,gBAAgB,MAAM;CAEnC;CAGA,QAAQ;EACN,KAAK,iBAAiB,cAAc,CAAC,CAAC,SAAQ,MAAKH,EAAE,YAAY,CAAC;CACpE;AACF;AAhFGpB,EAAA,CAAAwB,EAAsB,CAAA,GAAArB,EAAA,WAAA,aAAA,KAAA,CAAA,GAVxB,IAAAH,EAAA,CAAAyB,EAAM,CAAA,GAAAtB,CAAA"}
+{"version":3,"file":"dropdown-group.js","names":["globalStyles","_decorate","__decorate","dropdown_group_global_default","DropdownGroup","LitElement","useStyles","#syncDropdowns","appendRootNodeStyle","#pointerup","#keydown","#onBeforeToggle","#onOpen","#onClose","dropdowns","dropdown","clickOutsideElementBounds","event","isNavigationKey","path","boundary","#findDropdownBoundary","#findOwnedDropdown","#navigate","node","target","getActiveElement","rtl","openKey","closeKey","#openSubmenu","trigger","submenu","#rootDropdown","#openingTriggers","getFlattenedFocusableItems","activeElement","item","queryAssignedElements","audit"],"sources":["../../src/dropdown-group/dropdown-group.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';\nimport {\n  clickOutsideElementBounds,\n  appendRootNodeStyle,\n  getFlattenedFocusableItems,\n  getActiveElement,\n  useStyles,\n  audit\n} from '@nvidia-elements/core/internal';\nimport type { Dropdown } from '@nvidia-elements/core/dropdown';\nimport globalStyles from './dropdown-group.global.css?inline';\n\n/**\n * @element nve-dropdown-group\n * @description A dropdown group coordinates linked dropdowns and cascading submenus.\n * @documentation https://nvidia.github.io/elements/docs/elements/dropdown-group/\n * @since 1.30.1\n * @entrypoint \\@nvidia-elements/core/dropdown-group\n * @slot - default slot for dropdown content\n * @event open - Dispatched when a dropdown in the group opens\n * @event close - Dispatched when a dropdown in the group closes\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n */\n@audit()\nexport class DropdownGroup extends LitElement {\n  static styles = useStyles([]);\n\n  static readonly metadata = {\n    tag: 'nve-dropdown-group',\n    version: '0.0.0',\n    children: ['nve-dropdown']\n  };\n\n  @queryAssignedElements({ selector: 'nve-dropdown' }) protected dropdowns!: Dropdown[];\n\n  render() {\n    return html`\n      <div internal-host>\n        <slot @slotchange=${this.#syncDropdowns}></slot>\n      </div>\n    `;\n  }\n\n  #openingTriggers = new WeakMap<Dropdown, HTMLElement>();\n  #rootDropdown?: Dropdown;\n\n  connectedCallback() {\n    super.connectedCallback();\n    appendRootNodeStyle(this, globalStyles);\n    globalThis.document?.addEventListener('pointerup', this.#pointerup);\n    this.addEventListener('keydown', this.#keydown);\n    this.addEventListener('beforetoggle', this.#onBeforeToggle, true);\n    this.addEventListener('open', this.#onOpen as EventListener);\n    this.addEventListener('close', this.#onClose as EventListener);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    globalThis.document?.removeEventListener('pointerup', this.#pointerup);\n    this.removeEventListener('keydown', this.#keydown);\n    this.removeEventListener('beforetoggle', this.#onBeforeToggle, true);\n    this.removeEventListener('open', this.#onOpen as EventListener);\n    this.removeEventListener('close', this.#onClose as EventListener);\n  }\n\n  #syncDropdowns() {\n    this.dropdowns.forEach(dropdown => {\n      dropdown.popoverType = 'manual';\n    });\n  }\n\n  #pointerup = (event: PointerEvent) => {\n    const dropdowns = this.dropdowns.filter(dropdown => dropdown.matches(':popover-open'));\n    if (dropdowns.length && dropdowns.every(dropdown => clickOutsideElementBounds(event, dropdown))) {\n      this.close();\n    }\n  };\n\n  #keydown(event: KeyboardEvent) {\n    const isNavigationKey = event.code === 'Escape' || event.code === 'ArrowLeft' || event.code === 'ArrowRight';\n    if (event.defaultPrevented || !isNavigationKey) return;\n    const path = event.composedPath();\n    const boundary = this.#findDropdownBoundary(path);\n    const dropdown = this.#findOwnedDropdown(boundary);\n    if (!dropdown && boundary !== this) return;\n\n    if (event.code === 'Escape') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.close();\n      return;\n    }\n    if (dropdown) this.#navigate(event, path, dropdown);\n  }\n\n  #findDropdownBoundary(path: EventTarget[]) {\n    return path.find(\n      node =>\n        node instanceof HTMLElement && (node.localName === 'nve-dropdown' || node.localName === 'nve-dropdown-group')\n    );\n  }\n\n  #navigate(event: KeyboardEvent, path: EventTarget[], dropdown: Dropdown) {\n    const target = getActiveElement(this.ownerDocument);\n    if (!(target instanceof HTMLElement) || !path.includes(target)) return;\n    const rtl = getComputedStyle(this).direction === 'rtl';\n    const openKey = rtl ? 'ArrowLeft' : 'ArrowRight';\n    const closeKey = rtl ? 'ArrowRight' : 'ArrowLeft';\n\n    if (event.code === openKey) {\n      this.#openSubmenu(target, event);\n      return;\n    }\n\n    if (event.code === closeKey && target.localName === 'nve-menu-item') {\n      event.preventDefault();\n      event.stopPropagation();\n      dropdown.hidePopover();\n    }\n  }\n\n  #openSubmenu(trigger: HTMLElement, event: KeyboardEvent) {\n    if (trigger.matches('[disabled]') || !('popoverTargetElement' in trigger)) return;\n    const target = trigger.popoverTargetElement;\n    const submenu = this.#findOwnedDropdown(target);\n    if (!submenu) return;\n    event.preventDefault();\n    event.stopPropagation();\n    submenu.showPopover({ source: trigger });\n  }\n\n  #findOwnedDropdown(target: unknown): Dropdown | undefined {\n    return this.dropdowns.find(dropdown => dropdown === target);\n  }\n\n  #onOpen(event: CustomEvent<{ trigger?: HTMLElement }>) {\n    const dropdown = this.#findOwnedDropdown(event.composedPath()[0]);\n    if (dropdown) {\n      if (!this.#rootDropdown?.matches(':popover-open')) {\n        this.#rootDropdown = dropdown;\n      }\n      this.#openingTriggers.delete(dropdown);\n      if (event.detail?.trigger instanceof HTMLElement) {\n        this.#openingTriggers.set(dropdown, event.detail.trigger);\n      }\n      getFlattenedFocusableItems(dropdown)[0]?.focus();\n    }\n  }\n\n  #onBeforeToggle(event: ToggleEvent) {\n    const dropdown = this.#findOwnedDropdown(event.composedPath()[0]);\n    if (dropdown && event.newState === 'closed' && !dropdown.matches(':focus-within')) {\n      this.#openingTriggers.delete(dropdown);\n    }\n  }\n\n  #onClose(event: CustomEvent) {\n    const dropdown = this.#findOwnedDropdown(event.composedPath()[0]);\n    if (dropdown) {\n      const trigger = this.#openingTriggers.get(dropdown);\n      if (dropdown === this.#rootDropdown) {\n        this.#rootDropdown = undefined;\n      }\n      this.#openingTriggers.delete(dropdown);\n      const activeElement = this.ownerDocument.activeElement;\n      const focusLost = !activeElement || activeElement === this.ownerDocument.body;\n      const restoreFocus = focusLost || dropdown.matches(':focus-within');\n      if (restoreFocus && trigger?.isConnected) {\n        trigger.focus();\n      }\n    }\n  }\n\n  /** Closes every descendant dropdown in the group. */\n  close() {\n    const trigger = this.#rootDropdown ? this.#openingTriggers.get(this.#rootDropdown) : undefined;\n    this.#rootDropdown = undefined;\n    this.#openingTriggers = new WeakMap();\n    const dropdowns = Array.from(this.querySelectorAll('nve-dropdown'));\n    dropdowns.forEach(dropdown => dropdown.hidePopover());\n    const activeElement = this.ownerDocument.activeElement;\n    const focusLost = !activeElement || activeElement === this.ownerDocument.body;\n    const restoreFocus = focusLost || dropdowns.some(item => item.matches(':focus-within'));\n    if (restoreFocus && trigger?.isConnected) {\n      trigger.focus();\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/dropzone/dropzone2.js

@@ -26,7 +26,7 @@ var g = {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.20.3",
+			version: "2.21.1",
 			validators: [c, s],
 			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.20.3"
+			version: "2.21.1"
 		};
 	}
 	connectedCallback() {

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

@@ -94,7 +94,7 @@ var h = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-format-bytes",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	get #e() {

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

@@ -12,7 +12,7 @@ var s = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-format-datetime",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	get #e() {

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

@@ -28,7 +28,7 @@ var s = [
 	static {
 		this.metadata = {
 			tag: "nve-format-number",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	get #e() {

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

@@ -52,7 +52,7 @@ var s = {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "2.20.3"
+			version: "2.21.1"
 		};
 	}
 	#e;