@nvidia-elements/core 0.0.6 → 0.0.8

package/dist/data.html.json

@@ -3345,7 +3345,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-page-header\n\nAn element that appears across the top of all pages containing the application name and primary navigation.\n\n### Example\n\n```html\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\"></nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">NVIDIA</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page-header/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The default content slot |\n| prefix | `string` | Content displayed at the start of the header |\n| suffix | `string` | Content displayed at the end of the header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the header [MDN](https://mdn.dev/CSS/background) |\n| --padding | `string` | Padding inside the header [MDN](https://mdn.dev/CSS/padding) |\n| --border-bottom | `string` | Border below the header [MDN](https://mdn.dev/CSS/border-bottom) |\n| --gap | `string` | Gap between the prefix, default, and suffix slots [MDN](https://mdn.dev/CSS/gap) |\n| --margin-inline | `string` | left and right margin applied to the default content slot |"
+          "url": "## nve-page-header\n\nAn element that appears across the top of all pages containing the application name and primary navigation.\n\n### Example\n\n```html\n<nve-page-header>\n  <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n  <h2 slot=\"prefix\" nve-text=\"heading sm\">Infrastructure</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">Link 1</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">Link 2</a></nve-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"chat-bubble\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"search\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" container=\"flat\" icon-name=\"switch-apps\"></nve-icon-button>\n  <nve-icon-button slot=\"suffix\" interaction=\"emphasis\" size=\"sm\">EL</nve-icon-button>\n</nve-page-header>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/page-header/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | The default content slot |\n| prefix | `string` | Content displayed at the start of the header |\n| suffix | `string` | Content displayed at the end of the header |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --background | `string` | Background color of the header [MDN](https://mdn.dev/CSS/background) |\n| --padding | `string` | Padding inside the header [MDN](https://mdn.dev/CSS/padding) |\n| --border-bottom | `string` | Border below the header [MDN](https://mdn.dev/CSS/border-bottom) |\n| --gap | `string` | Gap between the prefix, default, and suffix slots [MDN](https://mdn.dev/CSS/gap) |\n| --margin-inline | `string` | left and right margin applied to the default content slot |"
         }
       ]
     },
@@ -4513,7 +4513,7 @@
     },
     {
       "name": "nve-steps-item",
-      "description": "Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n---\n\n\n### **Slots:**\n - _default_ - default slot for step text\n- **status-icon** - custom slotted step icon\n\n### **CSS Properties:**\n - **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element\n- **progress-ring** - The progress ring element",
+      "description": "Represents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n---\n\n\n### **Slots:**\n - _default_ - default slot for step text\n- **status-icon** - custom slotted step icon\n\n### **CSS Properties:**\n - **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--border-top** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--text-transform** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The icon button element\n- **progress-ring** - The progress ring element",
       "attributes": [
         {
           "name": "selected",
@@ -4637,7 +4637,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-steps-item\n\nRepresents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n\n### Example\n\n```html\n<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/steps/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for step text |\n| status-icon | `string` | custom slotted step icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| status | `'accent' \\| 'danger' \\| 'success' \\| 'pending' \\| \"default\"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| container | `'condensed' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| readonly | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `HTMLFormElement \\| null \\| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| commandfor | `string \\| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n| interestfor | `string \\| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
+          "url": "## nve-steps-item\n\nRepresents an individual step within a multi-step workflow, displaying its status and enabling navigation within the parent steps component.\n\n### Example\n\n```html\n<nve-steps behavior-select>\n  <nve-steps-item status=\"success\">Step 1</nve-steps-item>\n  <nve-steps-item status=\"danger\">Step 2</nve-steps-item>\n  <nve-steps-item selected>Step 3</nve-steps-item>\n  <nve-steps-item status=\"pending\">Step 4</nve-steps-item>\n  <nve-steps-item disabled>Disabled</nve-steps-item>\n</nve-steps>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/steps/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for step text |\n| status-icon | `string` | custom slotted step icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| selected | `boolean` | Indicates whether an element currently holds selection within a multi-option selection group. [MDN](https://mdn.dev/ARIA/Attributes/aria-selected) - `true` The element holds selection and represents the user's current choice within the group. - `false` The element does not hold selection and the user can choose it. |\n| status | `'accent' \\| 'danger' \\| 'success' \\| 'pending' \\| \"default\"` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `accent` Highlights important actions or draws attention to primary interactive elements. - `danger` Signals destructive or irreversible actions that need extra attention and confirmation. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| container | `'condensed' \\| \"default\"` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. - `inline` Element container reduces to fit within inline content such as a block of text. - `inset` Element container optimizes for embedding or inset placement inside another containing element. - `full` Element container optimizes for filling its container bounds. |\n| type | `'button' \\| 'submit' \\| 'reset'` | Defines the button behavior when associated within an <form> element. https://mdn.dev/HTML/Element/button#attr-type |\n| pressed | `boolean` | Indicates the current state of a toggle button that switches on or off. [MDN](https://mdn.dev/ARIA/Attributes/aria-pressed) - `true` The button is in the pressed (on) state and the associated action or setting is active. - `false` The button is in the unpressed (off) state and the associated action or setting is inactive. |\n| expanded | `boolean` | Indicates whether collapsible content is currently visible or hidden from the user. [MDN](https://mdn.dev/ARIA/Attributes/aria-expanded) - `true` The associated content expands and becomes visible to the user. - `false` The associated content collapses and hides from the user. |\n| readonly | `boolean` | Indicates whether the user can change the element's value while it remains visible and focusable. [MDN](https://mdn.dev/HTML/Attributes/readonly) - `true` The element has a readonly state: the user cannot change its value, but can still focus and copy it. - `false` The element allows editing and the user can change its value through interaction. |\n| form | `HTMLFormElement \\| null \\| string` | Like input form, sets a button to submit a form outside its parent form. Returns a reference to the form element if available. https://mdn.dev/ElementInternals/form |\n| name | `string` | The name of the button, submitted as a pair with the button's value as part of the form data, when that button submits the form. https://mdn.dev/HTML/Element/button#attr-name |\n| value | `string` | Defines the value associated with the element's name when submitting the form data. The server receives this value in params when the form submits through this button. [MDN](https://mdn.dev/HTML/Element/input#value) |\n| disabled | `boolean` | This Boolean attribute prevents the user from interacting with the element: it cannot receive press or focus events. [MDN](https://mdn.dev/ARIA/Attributes/aria-disabled) - `true` The element has a disabled state and does not accept interaction. - `false` The element has an enabled state and accepts interaction. |\n| current | `'page' \\| 'step'` | Indicates the element that represents the user's current location or position within a set. [MDN](https://mdn.dev/ARIA/Attributes/aria-current) - `page` Marks the current page within a set of navigation links. - `step` Marks the current step within a multi-step process or workflow. |\n| popoverTargetElement | `HTMLElement \\| null` | Establishing a relationship between a popover and its invoker button. https://mdn.dev/HTMLInputElement/popoverTargetElement |\n| popovertarget | `string` | The idref of the element that receives the popover. https://mdn.dev/HTML/Reference/Elements/button#popovertarget |\n| popoverTargetAction (popovertargetaction) | `'show' \\| 'hide' \\| 'toggle'` | The popover target action to perform on the popover target element. https://mdn.dev/HTMLInputElement/popoverTargetAction |\n| commandForElement | `HTMLElement \\| null` | The element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| commandfor | `string \\| null` | The idref of the element that receives the command. https://mdn.dev/Invoker_Commands_API |\n| command | `string` | The command to execute on the element. https://mdn.dev/Invoker_Commands_API |\n| interestForElement | `HTMLElement \\| null` | The element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n| interestfor | `string \\| null` | The idref of the element that receives the interest. https://mdn.dev/HTMLAnchorElement/interestForElement |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --border-top | `string` | [MDN](https://mdn.dev/CSS/border-top) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |"
         }
       ]
     },

package/dist/date/date2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-date",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	static {

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	static {

package/dist/dialog/dialog-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-footer",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dialog-header",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog2.js

@@ -30,7 +30,7 @@ var h = class extends f {
 	static {
 		this.metadata = {
 			tag: "nve-dialog",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	static {

package/dist/divider/divider2.js

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

package/dist/dot/dot.js.map

@@ -1 +1 @@
-{"version":3,"file":"dot.js","names":[],"sources":["../../src/dot/dot.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --background: var(--status-color);\n  --color: var(--nve-sys-text-white-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --height: var(--nve-ref-size-300);\n  --width: var(--nve-ref-size-300);\n  --padding: 0;\n  --border: 0;\n  width: auto;\n  display: inline-flex;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border: var(--border);\n  display: flex;\n  line-height: 1em;\n  place-items: center;\n  place-content: center;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-200);\n  --width: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-50);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-400);\n  --width: var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n}\n\n:host(:state(has-text)) {\n  --width: fit-content;\n  --height: fit-content;\n  --padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.5);\n}\n\n::slotted([nve-text]),\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-text-black-color);\n}\n"],"mappings":""}
+{"version":3,"file":"dot.js","names":[],"sources":["../../src/dot/dot.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --gap: var(--nve-ref-space-xs);\n  --font-size: var(--nve-ref-font-size-100);\n  --font-weight: var(--nve-ref-font-weight-semibold);\n  --background: var(--status-color);\n  --color: var(--nve-sys-text-white-color);\n  --border-radius: var(--nve-ref-border-radius-full);\n  --height: var(--nve-ref-size-300);\n  --width: var(--nve-ref-size-300);\n  --padding: 0;\n  --border: 0;\n  width: auto;\n  display: inline-flex;\n}\n\n[internal-host] {\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  gap: var(--gap);\n  background: var(--background);\n  color: var(--color);\n  border-radius: var(--border-radius);\n  height: var(--height);\n  width: var(--width);\n  padding: var(--padding);\n  border: var(--border);\n  display: flex;\n  line-height: 1em;\n  place-items: center;\n  place-content: center;\n}\n\n:host([size='sm']) {\n  --height: var(--nve-ref-size-200);\n  --width: var(--nve-ref-size-200);\n  --font-size: var(--nve-ref-font-size-50);\n}\n\n:host([size='lg']) {\n  --height: var(--nve-ref-size-400);\n  --width: var(--nve-ref-size-400);\n  --font-size: var(--nve-ref-font-size-200);\n}\n\n:host(:state(has-text)) {\n  --width: fit-content;\n  --height: fit-content;\n  --padding: calc(var(--font-size) * 0.1) calc(var(--font-size) * 0.5);\n}\n\n::slotted([nve-text]) {\n  color: inherit !important;\n}\n\n:host([status='warning']) {\n  --color: var(--nve-sys-text-black-color);\n}\n"],"mappings":""}

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer-content.js","names":[],"sources":["../../src/drawer/drawer-content.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  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  justify-content: stretch;\n  flex-direction: column;\n  display: flex;\n  overflow: auto;\n  gap: var(--gap);\n  contain: none;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  height: 100%;\n  width: 100%;\n  flex: 1;\n}\n\n::slotted(nve-menu),\n::slotted(nve-menu) {\n  --width: 100%;\n}\n"],"mappings":""}
+{"version":3,"file":"drawer-content.js","names":[],"sources":["../../src/drawer/drawer-content.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  --padding: var(--nve-ref-size-300) var(--nve-ref-size-400);\n  --gap: var(--nve-ref-space-sm);\n  width: 100%;\n  height: 100%;\n  flex: 1;\n  justify-content: stretch;\n  flex-direction: column;\n  display: flex;\n  overflow: auto;\n  gap: var(--gap);\n  contain: none;\n}\n\n[internal-host] {\n  background: var(--background);\n  padding: var(--padding);\n  height: 100%;\n  width: 100%;\n  flex: 1;\n}\n\n::slotted(nve-menu) {\n  --width: 100%;\n}\n"],"mappings":""}

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-footer",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-header",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer.d.ts

@@ -86,4 +86,5 @@ export declare class Drawer extends LitElement {
     };
     render(): import('lit-html').TemplateResult<1>;
     connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/dist/drawer/drawer2.js

@@ -28,7 +28,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	static {
@@ -39,10 +39,14 @@ var p = class extends u {
 	}
 	#t;
 	connectedCallback() {
-		super.connectedCallback(), this.addEventListener("toggle", (t) => {
-			this.inline && (this.#t && t.newState === "closed" ? this.#t.remove() : (this.#t = e(this), this.after(this.#t)));
-		});
+		super.connectedCallback(), this.addEventListener("toggle", this.#n);
 	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("toggle", this.#n), this.#t?.remove(), this.#t = void 0;
+	}
+	#n = (t) => {
+		this.inline && (this.#t && t.newState === "closed" ? this.#t.remove() : (this.#t = e(this), this.after(this.#t)));
+	};
 };
 t([f({
 	type: String,

package/dist/drawer/drawer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer2.js","names":["#i18nController","#inlineElement"],"sources":["../../src/drawer/drawer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n  createGhostElement,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  TypeNativePopoverController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './drawer.css?inline';\n\n/**\n * @element nve-drawer\n * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the drawer opens.\n * @event close - Dispatched when the drawer closes.\n * @slot - default content slot\n * @cssprop --border\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --top\n * @cssprop --max-width\n * @cssprop --width\n * @cssprop --animation-duration - Duration of drawer open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@typeSSR()\n@scopedRegistry()\nexport class Drawer extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For drawer the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: 'left' | 'right' | 'bottom' | 'top' = 'left';\n\n  /**\n   * Sets the max size of the drawer.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within drawer. Non-closable\n   * drawers suit drawers that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a drawer should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)\n   * https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n   */\n  @property({ type: Boolean, reflect: true }) inline: boolean;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return !!this.closable;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Drawer>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drawer',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <div class=\"header\">\n        <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .hidden=${!this.closable} @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close} container=\"flat\"></nve-icon-button>\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n      <div>\n        <slot name=\"footer\"></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  #inlineElement: HTMLElement;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('toggle', (e: ToggleEvent) => {\n      if (this.inline) {\n        if (this.#inlineElement && e.newState === 'closed') {\n          this.#inlineElement.remove();\n        } else {\n          this.#inlineElement = createGhostElement(this);\n          this.after(this.#inlineElement);\n        }\n      }\n    });\n  }\n}\n"],"mappings":";;;;;;;;;;;;;AA2CO,IAAA,IAAA,cAAqB,EAAW;;+BAKsD,sBAsBhC,WAAW,UAAU,kBA0B7C,MAAA,EAAqB,yCAYhB,IAAI,EAAoC,KAAK;;CAjBrF,KAAwC,IAAI,EAAqB,KAAK;CAQtE,IAAI,cAA2B;AAC7B,SAAO,KAAK,QAAQ,SAAS;;CAI/B,IAAI,qBAAqB;AACvB,SAAO,CAAC,CAAC,KAAK;;;gBAKA,EAAU,CAAC,GAAe,EAAO,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,SAAS;AACP,SAAO,CAAI,2HAG2E,CAAC,KAAK,SAAS,YAAU,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM;;CAanL;CAEA,oBAA0B;AAExB,EADA,MAAM,mBAAmB,EACzB,KAAK,iBAAiB,WAAW,MAAmB;AAClD,GAAI,KAAK,WACH,MAAA,KAAuB,EAAE,aAAa,WACxC,MAAA,EAAoB,QAAQ,IAE5B,MAAA,IAAsB,EAAmB,KAAK,EAC9C,KAAK,MAAM,MAAA,EAAoB;IAGnC;;;GAvGH,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAMzC,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK3B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAM1C,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAO1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAM1B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAM1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,KAOzE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvD5B,GAAS,EACT,GAAgB,CAAA,EAAA,EAAA"}
+{"version":3,"file":"drawer2.js","names":["#i18nController","#onToggle","#inlineElement"],"sources":["../../src/drawer/drawer.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators/property.js';\nimport type { PopoverType, Size } from '@nvidia-elements/core/internal';\nimport {\n  createGhostElement,\n  I18nController,\n  popoverStyles,\n  scopedRegistry,\n  TypeNativePopoverController,\n  typeSSR,\n  useStyles\n} from '@nvidia-elements/core/internal';\nimport { IconButton } from '@nvidia-elements/core/icon-button';\nimport styles from './drawer.css?inline';\n\n/**\n * @element nve-drawer\n * @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * @since 0.16.0\n * @entrypoint \\@nvidia-elements/core/drawer\n * @event beforetoggle - Dispatched on a popover just before showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforetoggle_event)\n * @event toggle - Dispatched on a popover element just after showing or hiding. [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event)\n * @event open - Dispatched when the drawer opens.\n * @event close - Dispatched when the drawer closes.\n * @slot - default content slot\n * @cssprop --border\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --box-shadow\n * @cssprop --gap\n * @cssprop --top\n * @cssprop --max-width\n * @cssprop --width\n * @cssprop --animation-duration - Duration of drawer open/close animations\n * @csspart icon-button - The close icon button element\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n */\n@typeSSR()\n@scopedRegistry()\nexport class Drawer extends LitElement {\n  /**\n   * Sets the side position of the popover relative to the provided anchor element.\n   * For drawer the anchor defaults to the document body.\n   */\n  @property({ type: String, reflect: true }) position: 'left' | 'right' | 'bottom' | 'top' = 'left';\n\n  /**\n   * Sets the max size of the drawer.\n   */\n  @property({ type: String, reflect: true }) size?: Size;\n\n  /**\n   * Determines if a close button should render within drawer. Non-closable\n   * drawers suit drawers that require user confirmation steps.\n   */\n  @property({ type: Boolean }) closable: boolean;\n\n  /**\n   * Determines if a drawer should have a modal backdrop that visually overlays the UI.\n   */\n  @property({ type: Boolean, reflect: true }) modal: boolean;\n\n  /**\n   * (optional) By default the popover will automatically anchor itself relative to the trigger element.\n   * Pass an optional custom anchor element as an idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) anchor: string | HTMLElement = globalThis.document?.body;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * The trigger defines what element triggers an `open` interaction event.\n   * A trigger can accept a idref string within the same render root or a HTMLElement DOM reference.\n   */\n  @property({ type: String }) trigger: string | HTMLElement;\n\n  /**\n   * Create a inline layout effect while retaining the a11y characteristics and top layer behavior (light dismiss, focus trap, non interactive background)\n   * https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/\n   */\n  @property({ type: Boolean, reflect: true }) inline: boolean;\n\n  /**\n   * @deprecated Use the popover API instead.\n   * Determines if popover visibility behavior should be automatically controlled by the trigger.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'behavior-trigger' }) behaviorTrigger: boolean;\n\n  #i18nController: I18nController<this> = new I18nController<this>(this);\n\n  /**\n   * Enables internal string values to update for internationalization.\n   */\n  @property({ type: Object }) i18n = this.#i18nController.i18n;\n\n  /** @private */\n  get popoverType(): PopoverType {\n    return this.modal ? 'auto' : 'manual';\n  }\n\n  /** @private */\n  get popoverDismissible() {\n    return !!this.closable;\n  }\n\n  protected typeNativePopoverController = new TypeNativePopoverController<Drawer>(this);\n\n  static styles = useStyles([popoverStyles, styles]);\n\n  static readonly metadata = {\n    tag: 'nve-drawer',\n    version: '0.0.0'\n  };\n\n  static elementDefinitions = {\n    [IconButton.metadata.tag]: IconButton\n  };\n\n  render() {\n    return html`\n    <div internal-host>\n      <div class=\"header\">\n        <nve-icon-button part=\"icon-button\" exportparts=\"icon:icon-button-icon\" .hidden=${!this.closable} @click=${this.hidePopover} icon-name=\"cancel\" .ariaLabel=${this.i18n.close} container=\"flat\"></nve-icon-button>\n        <slot name=\"header\"></slot>\n      </div>\n      <div class=\"content\">\n        <slot></slot>\n      </div>\n      <div>\n        <slot name=\"footer\"></slot>\n      </div>\n    </div>\n    `;\n  }\n\n  #inlineElement?: HTMLElement;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('toggle', this.#onToggle);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('toggle', this.#onToggle);\n    this.#inlineElement?.remove();\n    this.#inlineElement = undefined;\n  }\n\n  #onToggle = (toggleEvent: ToggleEvent) => {\n    if (this.inline) {\n      if (this.#inlineElement && toggleEvent.newState === 'closed') {\n        this.#inlineElement.remove();\n      } else {\n        this.#inlineElement = createGhostElement(this);\n        this.after(this.#inlineElement);\n      }\n    }\n  };\n}\n"],"mappings":";;;;;;;;;;;;;AA2CO,IAAA,IAAA,cAAqB,EAAW;;+BAKsD,sBAsBhC,WAAW,UAAU,kBA0B7C,MAAA,EAAqB,yCAYhB,IAAI,EAAoC,KAAK;;CAjBrF,KAAwC,IAAI,EAAqB,KAAK;CAQtE,IAAI,cAA2B;AAC7B,SAAO,KAAK,QAAQ,SAAS;;CAI/B,IAAI,qBAAqB;AACvB,SAAO,CAAC,CAAC,KAAK;;;gBAKA,EAAU,CAAC,GAAe,EAAO,CAAC;;;kBAEvB;GACzB,KAAK;GACL,SAAS;GACV;;;4BAE2B,GACzB,EAAW,SAAS,MAAM,GAC5B;;CAED,SAAS;AACP,SAAO,CAAI,2HAG2E,CAAC,KAAK,SAAS,YAAU,KAAK,YAAY,mCAAiC,KAAK,KAAK,MAAM;;CAanL;CAEA,oBAA0B;AAExB,EADA,MAAM,mBAAmB,EACzB,KAAK,iBAAiB,UAAU,MAAA,EAAe;;CAGjD,uBAA6B;AAI3B,EAHA,MAAM,sBAAsB,EAC5B,KAAK,oBAAoB,UAAU,MAAA,EAAe,EAClD,MAAA,GAAqB,QAAQ,EAC7B,MAAA,IAAsB,KAAA;;CAGxB,MAAa,MAA6B;AACxC,EAAI,KAAK,WACH,MAAA,KAAuB,EAAY,aAAa,WAClD,MAAA,EAAoB,QAAQ,IAE5B,MAAA,IAAsB,EAAmB,KAAK,EAC9C,KAAK,MAAM,MAAA,EAAoB;;;GA9GpC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAKzC,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,KAMzC,EAAS,EAAE,MAAM,SAAS,CAAC,CAAA,EAAA,EAAA,WAAA,YAAA,KAAA,EAAA,KAK3B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,SAAA,KAAA,EAAA,KAM1C,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAO1B,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,WAAA,KAAA,EAAA,KAM1B,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,CAAC,CAAA,EAAA,EAAA,WAAA,UAAA,KAAA,EAAA,KAM1C,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;CAAoB,CAAC,CAAA,EAAA,EAAA,WAAA,mBAAA,KAAA,EAAA,KAOzE,EAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,EAAA,EAAA,WAAA,QAAA,KAAA,EAAA,SAvD5B,GAAS,EACT,GAAgB,CAAA,EAAA,EAAA"}

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown-header2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-header",
-			version: "0.0.6",
+			version: "0.0.8",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown.js.map

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

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	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: "0.0.6",
+			version: "0.0.8",
 			children: ["nve-dropdown"]
 		};
 	}
@@ -26,7 +26,7 @@ var d = class extends c {
 		super.connectedCallback(), t(this, s), globalThis.document?.addEventListener("pointerup", this.#e), this.addEventListener("keydown", this.#r), this.addEventListener("open", this.#i), this.addEventListener("close", this.#a);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), globalThis.document?.removeEventListener("pointerup", this.#e);
+		super.disconnectedCallback(), globalThis.document?.removeEventListener("pointerup", this.#e), this.removeEventListener("keydown", this.#r), this.removeEventListener("open", this.#i), this.removeEventListener("close", this.#a);
 	}
 	#t() {
 		this.dropdowns.forEach((e) => {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown-group.js","names":["#syncDropdowns","#pointerup","#_pointerup","#keydown","#onOpen","#onClose"],"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 * @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 --nve-dropdown-group-spacing\n * @cssprop --nve-dropdown-group-transition\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n * @stable false\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  }\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(dropdown => dropdown.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  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA+BO,IAAA,IAAA,cAA4B,EAAW;;gBAC5B,EAAU,EAAE,CAAC;;;kBAEF;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAA;GACZ;;CAID,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAoB;;CAK9C,MAAe,MAAoB,MAAA,EAAgB,EAAE;CAErD,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACvC,WAAW,UAAU,iBAAiB,aAAa,MAAA,EAAiB,EACpE,KAAK,iBAAiB,WAAW,MAAA,EAAc,EAC/C,KAAK,iBAAiB,QAAQ,MAAA,EAA8B,EAC5D,KAAK,iBAAiB,SAAS,MAAA,EAA+B;;CAGhE,uBAAuB;AAErB,EADA,MAAM,sBAAsB,EAC5B,WAAW,UAAU,oBAAoB,aAAa,MAAA,EAAiB;;CAGzE,KAAiB;AACf,OAAK,UAAU,SAAQ,MAAY;AACjC,KAAS,cAAc;IACvB;;CAGJ,GAAW,GAAqB;EAC9B,IAAM,IAAwB,KAAK,UAAU,MAAK,MAAY,EAAS,QAAQ,gBAAgB,CAAC,EAC1F,IAAwB,KAAK,UAAU,OAAM,MAAY,EAA0B,GAAO,EAAS,CAAC;AAC1G,EAAI,KAAyB,KAC3B,KAAK,OAAO;;CAIhB,GAAS,GAAsB;EAC7B,IAAM,IAAS,EAAM;AAIrB,MAHI,EAAM,SAAS,YACjB,KAAK,OAAO,EAEV,EAAM,SAAS,cAAc;GAC/B,IAAM,IAAW,EAAO,aAAa,gBAAgB;AACpC,QAAK,UAAU,MAAK,MAAY,EAAS,OAAO,EAAS,EAChE,aAAa;;AAEzB,EAAI,EAAM,SAAS,eAAe,EAAkB,EAAM,OAAsB,IAC9E,EAAO,QAAQ,eAAe,EAAE,aAAa;;CAIjD,GAAQ,GAAoB;EAC1B,IAAM,IAAW,EAAM;AAEvB,EADwB,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAS,IAEvG,EAA2B,EAAS,CAAC,IAAI,OAAO;;CAIpD,GAAS,GAAoB;EAC3B,IAAM,IAAU,EAAM;AAEtB,EADwB,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAQ,IAGpF,EACR,gBAAgB,OAAO;;CAIpC,QAAQ;AACN,OAAK,iBAAiB,eAAe,CAAC,SAAQ,MAAK,EAAE,aAAa,CAAC;;;GA1EpE,GAAuB,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAVzB,GAAO,CAAA,EAAA,EAAA"}
+{"version":3,"file":"dropdown-group.js","names":["#syncDropdowns","#pointerup","#_pointerup","#keydown","#onOpen","#onClose"],"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 * @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 --nve-dropdown-group-spacing\n * @cssprop --nve-dropdown-group-transition\n * @cssprop --arrow-transform - Transform applied to the popover arrow\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/menubar/\n * @stable false\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(dropdown => dropdown.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  close() {\n    this.querySelectorAll('nve-dropdown').forEach(d => d.hidePopover());\n  }\n}\n"],"mappings":";;;;;;;;;AA+BO,IAAA,IAAA,cAA4B,EAAW;;gBAC5B,EAAU,EAAE,CAAC;;;kBAEF;GACzB,KAAK;GACL,SAAS;GACT,UAAU,CAAC,eAAA;GACZ;;CAID,SAAS;AACP,SAAO,CAAI,yCAEa,MAAA,EAAoB;;CAK9C,MAAe,MAAoB,MAAA,EAAgB,EAAE;CAErD,oBAAoB;AAMlB,EALA,MAAM,mBAAmB,EACzB,EAAoB,MAAM,EAAa,EACvC,WAAW,UAAU,iBAAiB,aAAa,MAAA,EAAiB,EACpE,KAAK,iBAAiB,WAAW,MAAA,EAAc,EAC/C,KAAK,iBAAiB,QAAQ,MAAA,EAA8B,EAC5D,KAAK,iBAAiB,SAAS,MAAA,EAA+B;;CAGhE,uBAAuB;AAKrB,EAJA,MAAM,sBAAsB,EAC5B,WAAW,UAAU,oBAAoB,aAAa,MAAA,EAAiB,EACvE,KAAK,oBAAoB,WAAW,MAAA,EAAc,EAClD,KAAK,oBAAoB,QAAQ,MAAA,EAA8B,EAC/D,KAAK,oBAAoB,SAAS,MAAA,EAA+B;;CAGnE,KAAiB;AACf,OAAK,UAAU,SAAQ,MAAY;AACjC,KAAS,cAAc;IACvB;;CAGJ,GAAW,GAAqB;EAC9B,IAAM,IAAwB,KAAK,UAAU,MAAK,MAAY,EAAS,QAAQ,gBAAgB,CAAC,EAC1F,IAAwB,KAAK,UAAU,OAAM,MAAY,EAA0B,GAAO,EAAS,CAAC;AAC1G,EAAI,KAAyB,KAC3B,KAAK,OAAO;;CAIhB,GAAS,GAAsB;EAC7B,IAAM,IAAS,EAAM;AAIrB,MAHI,EAAM,SAAS,YACjB,KAAK,OAAO,EAEV,EAAM,SAAS,cAAc;GAC/B,IAAM,IAAW,EAAO,aAAa,gBAAgB;AACpC,QAAK,UAAU,MAAK,MAAY,EAAS,OAAO,EAAS,EAChE,aAAa;;AAEzB,EAAI,EAAM,SAAS,eAAe,EAAkB,EAAM,OAAsB,IAC9E,EAAO,QAAQ,eAAe,EAAE,aAAa;;CAIjD,GAAQ,GAAoB;EAC1B,IAAM,IAAW,EAAM;AAEvB,EADwB,EAAS,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAS,IAEvG,EAA2B,EAAS,CAAC,IAAI,OAAO;;CAIpD,GAAS,GAAoB;EAC3B,IAAM,IAAU,EAAM;AAEtB,EADwB,EAAQ,cAAc,kBAAkB,KAAK,UAAU,MAAK,MAAK,MAAM,EAAQ,IAGpF,EACR,gBAAgB,OAAO;;CAIpC,QAAQ;AACN,OAAK,iBAAiB,eAAe,CAAC,SAAQ,MAAK,EAAE,aAAa,CAAC;;;GA7EpE,GAAuB,CAAA,EAAA,EAAA,WAAA,aAAA,KAAA,EAAA,SAVzB,GAAO,CAAA,EAAA,EAAA"}

package/dist/dropzone/dropzone.d.ts

@@ -29,6 +29,8 @@ declare const Dropzone_base: {
         readonly _validators: import('@nvidia-elements/forms').Validator[];
         readonly _internals: ElementInternals;
         connectedCallback(): void;
+        disconnectedCallback(): void;
+        _stopInternalPropagation: (event: Event) => void;
         attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
         _handleAttributeChange(name: string, newValue: string): void;
         formResetCallback(): void;
@@ -397,7 +399,6 @@ declare const Dropzone_base: {
         tabIndex: number;
         blur(): void;
         focus(options?: FocusOptions): void;
-        disconnectedCallback?(): void;
         requestUpdate?(name?: string, oldValue?: unknown): void;
     };
     formAssociated: boolean;

package/dist/dropzone/dropzone2.js

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

package/dist/dropzone/dropzone2.js.map

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

package/dist/file/file.global.js.map

@@ -1 +1 @@
-{"version":3,"file":"file.global.js","names":[],"sources":["../../src/file/file.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-file > input,\nnve-file > input {\n  color: var(--color);\n}\n\nnve-file > input::file-selector-button,\nnve-file > input::file-selector-button {\n  background: var(--background);\n  padding: var(--padding);\n  height: var(--height);\n  width: var(--width);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  text-decoration: var(--text-decoration);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  gap: var(--gap);\n  margin-inline-end: var(--nve-ref-space-sm);\n  display: inline-flex;\n  place-items: center;\n  appearance: none;\n  line-height: 1.2em;\n}\n\nnve-file > input::file-selector-button:hover,\nnve-file > input::file-selector-button:hover {\n  --color: var(--nve-sys-interaction-hover-color);\n  --background: var(--nve-sys-interaction-background);\n}\n\nnve-file > input::file-selector-button:active,\nnve-file > input::file-selector-button:active {\n  --color: var(--nve-sys-interaction-active-color);\n  --background: var(--nve-sys-interaction-background);\n}\n"],"mappings":""}
+{"version":3,"file":"file.global.js","names":[],"sources":["../../src/file/file.global.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\nnve-file > input {\n  color: var(--color);\n}\n\nnve-file > input::file-selector-button {\n  background: var(--background);\n  padding: var(--padding);\n  height: var(--height);\n  width: var(--width);\n  border-radius: var(--border-radius);\n  border: var(--border);\n  text-decoration: var(--text-decoration);\n  font-weight: var(--font-weight);\n  font-size: var(--font-size);\n  cursor: var(--cursor);\n  gap: var(--gap);\n  margin-inline-end: var(--nve-ref-space-sm);\n  display: inline-flex;\n  place-items: center;\n  appearance: none;\n  line-height: 1.2em;\n}\n\nnve-file > input::file-selector-button:hover {\n  --color: var(--nve-sys-interaction-hover-color);\n  --background: var(--nve-sys-interaction-background);\n}\n\nnve-file > input::file-selector-button:active {\n  --color: var(--nve-sys-interaction-active-color);\n  --background: var(--nve-sys-interaction-background);\n}\n"],"mappings":""}

package/dist/file/file2.js

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

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

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

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

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	#e;

package/dist/forms/control/control.d.ts

@@ -21,7 +21,7 @@ import { TemplateResult, LitElement, nothing } from 'lit';
  */
 export declare class Control extends LitElement {
     #private;
-    /** Set current visaul state for control. This overrides any validation states active. */
+    /** Set current visual state for control. This overrides any validation states active. */
     status: 'warning' | 'error' | 'success' | 'disabled';
     /** Set current control + label + control message layout. Layouts will collapse based on available container space. */
     layout: 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';

package/dist/forms/control/control.js.map

@@ -1 +1 @@
-{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.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  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: capitalize;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n:host([nve-control='inline']) {\n  --control-height: auto;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n  text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button),\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]),\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"control.js","names":[],"sources":["../../../src/forms/control/control.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  --cursor: pointer;\n  --accent-color: var(--nve-sys-accent-secondary-background);\n  --color: var(--nve-sys-interaction-field-color);\n  --label-color: var(--nve-sys-interaction-field-color);\n  --label-text-transform: capitalize;\n  --label-font-weight: var(--nve-ref-font-weight-medium);\n  --label-font-size: var(--nve-ref-font-size-100);\n  --control-width: 100%;\n  --control-height: var(--nve-sys-interaction-field-height);\n  --_label-width: var(--label-width, 180px);\n  --nve-sys-interaction-state-base: var(--background, var(--nve-sys-layer-canvas-background));\n  --opacity: 1;\n  --filter: none;\n  contain: content;\n}\n\n:host([nve-control='inline']) {\n  --control-height: auto;\n}\n\n::slotted(*) {\n  color-scheme: var(--nve-sys-color-scheme);\n  font-family: inherit;\n}\n\n::slotted(label) {\n  font-weight: var(--label-font-weight) !important;\n  font-size: var(--label-font-size) !important;\n  color: var(--label-color) !important;\n  cursor: var(--cursor) !important;\n  text-transform: var(--label-text-transform) !important;\n  display: inline-block !important;\n  line-height: 1em !important;\n  align-self: center !important;\n}\n\n::slotted(label::first-letter) {\n  text-transform: capitalize;\n}\n\n:host(:state(disabled)),\n:host(:state(disabled)) ::slotted(nve-control-message:not([status])) {\n  --cursor: not-allowed;\n}\n\n:host(:state(disabled)) {\n  --opacity: var(--nve-ref-opacity-500);\n}\n\n:host(:state(invalid)) ::slotted(nve-control-message:not([error], [status])) {\n  display: none;\n}\n\n:host([fit-content]) {\n  --control-width: fit-content;\n  --label-width: fit-content;\n  --width: fit-content;\n}\n\n:host([nve-control]) ::slotted(input:focus),\n:host([nve-control]) ::slotted(select:focus),\n:host([nve-control]) ::slotted(textarea:focus),\n:host([nve-control]:focus-within) [internal-host]:has(nve-icon-button:focus) [input],\n[internal-host]:has(nve-icon-button) {\n  outline: 0 !important;\n}\n\n@container style(--control-type: custom) {\n  [input] {\n    outline: 0 !important;\n  }\n}\n\n::slotted(nve-button[nve-control]) {\n  width: 100%;\n}\n\n[input] {\n  cursor: var(--cursor);\n  min-height: var(--control-height);\n  opacity: var(--opacity);\n  filter: var(--filter);\n  grid-area: input;\n  display: flex;\n  line-height: 1;\n}\n\n:host([nve-control='inline']) {\n  [internal-host] {\n    min-height: var(--control-height);\n  }\n\n  [input] {\n    min-height: min-content;\n  }\n}\n\nslot {\n  line-height: 1;\n  width: 100%;\n}\n\nslot[name='label'] {\n  grid-area: label;\n  display: inline-flex;\n  align-self: center;\n}\n\nslot[name='messages'] {\n  grid-area: messages;\n  display: inline-flex;\n}\n\n[name='messages']:not(:has-slotted),\n[name='label']:not(:has-slotted) {\n  display: none !important;\n}\n\n[internal-host] {\n  display: grid;\n  width: 100%;\n  gap: var(--nve-ref-space-xs);\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-template-rows: auto;\n  grid-template-areas: 'input input input';\n}\n\n:host([nve-control='inline']) [internal-host] {\n  align-items: center;\n  grid-template-columns: auto 1fr 1fr;\n\n  slot[name='label'],\n  slot[name='messages'] {\n    align-items: center;\n  }\n\n  & ::slotted(label) {\n    font-weight: var(--nve-ref-font-weight-regular) !important;\n    color: var(--color) !important;\n    width: 100%;\n  }\n\n  slot[name='label'] {\n    line-height: 1;\n    width: 100%;\n  }\n}\n\n:host([layout='horizontal']) [internal-host],\n:host([layout='horizontal-inline']) [internal-host] {\n  grid-template-columns: var(--_label-width) 1fr minmax(0, var(--_label-width));\n}\n\n/** block controls */\n[internal-host] {\n  &:has([name='label']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input';\n  }\n\n  &:has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'input input input'\n      'messages messages messages';\n  }\n\n  &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n    grid-template-areas:\n      'label label label'\n      'input input input'\n      'messages messages messages';\n  }\n}\n\n:host([layout='horizontal']),\n:host([layout='horizontal-inline']) {\n  [internal-host] {\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'label input input'\n        '. messages messages';\n    }\n\n    &:not(:has([name='messages']:has-slotted)) {\n      grid-template-areas: 'label input input';\n    }\n  }\n}\n\n/** inline controls */\n:host([nve-control='inline']) {\n  [internal-host] {\n    grid-template-areas: 'input input input';\n\n    &:has([name='label']:has-slotted) {\n      grid-template-areas: 'input label label';\n    }\n\n    &:has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input input input'\n        'messages messages messages';\n    }\n\n    &:has([name='label']:has-slotted):has([name='messages']:has-slotted) {\n      grid-template-areas:\n        'input label label'\n        'messages messages messages';\n    }\n  }\n}\n"],"mappings":""}

package/dist/forms/control/control2.js

@@ -25,7 +25,7 @@ var C = class extends v {
 	}
 	#r;
 	get input() {
-		return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control], [nve-control]"))) || this.querySelector(d)), this.#r;
+		return !b && !this.#r && (this.#r = (this.querySelector("slot")?.assignedElements()?.find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]")) ?? Array.from(this.shadowRoot.querySelector("slot")?.assignedElements({ flatten: !0 }) ?? []).find((e) => e.matches("input, select, selectmenu, textarea, [nve-control]"))) || this.querySelector(d)), this.#r;
 	}
 	get prefixContent() {
 		return x;
@@ -40,50 +40,55 @@ var C = class extends v {
 	static {
 		this.metadata = {
 			tag: "nve-control",
-			version: "0.0.6"
+			version: "0.0.8"
 		};
 	}
 	render() {
 		return this.nveControl === "inline" ? y`<div internal-host part="_internal-host"><div input part="_input"><slot interaction-state></slot></div><slot name="label" part="_label"></slot><slot name="messages" part="_messages"></slot></div>` : y`<div internal-host part="_internal-host"><slot name="label" part="_label"></slot><div input part="_input">${this.prefixContent}<slot></slot>${this.suffixContent}</div><slot name="messages" part="_messages"></slot></div>`;
 	}
 	connectedCallback() {
-		super.connectedCallback(), a(this), e(this, g), this.shadowRoot.addEventListener("slotchange", () => {
-			this.#l(), this.input && this.#i.length === 0 && (this.#a(), this.#o());
-		});
+		super.connectedCallback(), a(this), e(this, g), this.shadowRoot.addEventListener("slotchange", this.#a);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#i.forEach((e) => e.disconnect());
+		super.disconnectedCallback(), this.shadowRoot.removeEventListener("slotchange", this.#a), this.shadowRoot.removeEventListener("slotchange", this.#s), this.fitText && this.input && (this.input.removeEventListener("input", this.#l), this.input.removeEventListener("change", this.#l)), this.#i.forEach((e) => e.disconnect()), this.#i.length = 0;
 	}
+	#a = () => {
+		this.#f(), this.input && this.#i.length === 0 && (this.#o(), this.#c());
+	};
 	reset() {
 		this.input.value = this.input.getAttribute("value") ?? "", this.requestUpdate(), this.dispatchEvent(new CustomEvent("reset", {
 			bubbles: !0,
 			composed: !0
 		}));
 	}
-	#a() {
-		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), t(this, ["hidden", "status"], () => this.#l())), this.#c(), this.#u(), this.shadowRoot.addEventListener("slotchange", () => {
-			this.#l(), this.#u();
-		});
-	}
 	#o() {
-		this.fitText && (this.#s(), this.input.addEventListener("input", () => this.#s()), this.input.addEventListener("change", () => this.#s()));
+		m(this, this.#n), this.#i.push(...f(this), ...p(this, this.#n), h(this), t(this, ["hidden", "status"], () => this.#f())), this.#d(), this.#p(), this.shadowRoot.addEventListener("slotchange", this.#s);
+	}
+	#s = () => {
+		this.#f(), this.#p();
+	};
+	#c() {
+		this.fitText && (this.#u(), this.input.addEventListener("input", this.#l), this.input.addEventListener("change", this.#l));
 	}
-	#s() {
+	#l = () => {
+		this.#u();
+	};
+	#u() {
 		if (this.input.tagName === "INPUT") {
 			let e = this.input.type === "text" ? 0 : 4;
 			this.style.setProperty("--control-width", `${this.input.value.length + e}ch`), this.input.style.setProperty("max-width", `${this.input.value.length + 2}ch`, "important");
 		} else this.input.tagName === "SELECT" && this.style.setProperty("--control-width", `${this.input.options[this.input.selectedIndex].textContent.length + 4}ch`);
 	}
-	#c() {
+	#d() {
 		this.input.showPicker || (this.input.showPicker = () => this.input.focus());
 	}
-	#l() {
+	#f() {
 		this.input && (this.toggleAttribute("multiple", this.input?.multiple), this.input?.hasAttribute("size") ? this.setAttribute("size", "") : this.removeAttribute("size"));
 	}
-	#u() {
-		this.#d(), i(this.#t, this.input), n(Array.from(this.#n), this.input), this._associateDatalist && r(this.querySelector("datalist"), this.input);
+	#p() {
+		this.#m(), i(this.#t, this.input), n(Array.from(this.#n), this.input), this._associateDatalist && r(this.querySelector("datalist"), this.input);
 	}
-	#d() {
+	#m() {
 		let e = this.querySelector("label") || this.shadowRoot.querySelector("slot").assignedNodes({ flatten: !0 }).find((e) => e.tagName === "LABEL");
 		e && (e.slot = "label");
 	}