@nvidia-elements/core 0.1.4 → 0.2.1

package/dist/data.html.json

@@ -865,9 +865,9 @@
           "values": [{ "name": "flat" }]
         },
         {
-          "name": "notags",
-          "description": "Disable rendering of inline tags for many-item select",
-          "values": []
+          "name": "tag-layout",
+          "description": "Manage inline tag rendering for many-item select",
+          "values": [{ "name": "hidden" }, { "name": "wrap" }]
         },
         {
           "name": "behavior-create",
@@ -923,7 +923,7 @@
         },
         {
           "name": "markdown",
-          "url": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| notags | `boolean` | Disable rendering of inline tags for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll |  | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` |  |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
+          "url": "## nve-combobox\n\nAn editable combobox with autocomplete behavior and selection support.\n\n### Example\n\n```html\n<nve-combobox>\n  <label>label</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"status\"></option>\n    <option value=\"priority\"></option>\n    <option value=\"date\"></option>\n    <option value=\"session\"></option>\n    <option value=\"configuration\"></option>\n    <option value=\"contains\"></option>\n  </datalist>\n  <nve-control-message>message</nve-control-message>\n</nve-combobox>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/combobox/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | default slot for an input and a datalist/select element |\n| prefix-icon | `string` | slot for icon before the input |\n| footer | `string` | slot for dropdown footer content |\n| label | `string` | Label element |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| container | `'flat'` | Demonstrates different container styles to accommodate visual weight and context. - `flat` Element has white space bounds but reduced visual container. |\n| tagLayout (tag-layout) | `'hidden' \\| 'wrap'` | Manage inline tag rendering for many-item select |\n| behaviorCreate (behavior-create) | `boolean` | Enable creation of new options when the input value doesn't match any existing option. Dispatches a `create` event with `{ value }` detail. |\n| reset |  | Resets control value to initial attribute value and clears any active validation rules. |\n| selectAll |  | Select all options provided |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled'` | Communicates the intent and semantic meaning of an element to help users understand the outcome of their actions. - `warning` Indicates cautionary actions that require careful consideration before proceeding. - `success` Represents positive outcomes, confirmations, or constructive actions. |\n| layout | `\\| 'vertical'\n    \\| 'vertical-inline'\n    \\| 'horizontal'\n    \\| 'horizontal-inline'` | Controls the directional arrangement and spacing behavior of the element's content. - `vertical` Arranges content in a vertical stack with block-level spacing. - `vertical-inline` Arranges content vertically with compact inline spacing for dense layouts. - `horizontal` Arranges content in a horizontal row with block-level spacing. - `horizontal-inline` Arranges content horizontally with compact inline spacing. |\n| fitText (fit-text) | `boolean` | Sets the input to match the width of the active text content of the control value. Only applicable to vertical input box type controls (input, select) |\n| fitContent (fit-content) | `boolean` | Sets the input to match native default content block |\n| i18n |  | Enables updating internal string values for internationalization. |\n| prominence | `'muted'` | Controls the visual prominence to establish hierarchy and guide user attention. - `muted` Reduces visual weight for supporting content that should remain subtle and unobtrusive. |\n| nveControl | `string` |  |\n| showPicker |  |  |\n\n### Events\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| create | `CustomEvent` | Fires when the user confirms a value that doesn't match any existing option and the `behavior-create` attribute exists. `detail: { value }`. |\n| scroll | `CustomEvent` | Fires when the user scrolls the dropdown option list. Throttled to one dispatch per animation frame. `detail: { scrollTop, scrollHeight, clientHeight }`. |\n| reset | `CustomEvent` |  |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --scroll-height | `string` |  |\n| --padding | `string` | [MDN](https://mdn.dev/CSS/padding) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --height | `string` | [MDN](https://mdn.dev/CSS/height) |\n| --background | `string` | [MDN](https://mdn.dev/CSS/background) |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --border-radius | `string` | [MDN](https://mdn.dev/CSS/border-radius) |\n| --border | `string` | [MDN](https://mdn.dev/CSS/border) |\n| --cursor | `string` | [MDN](https://mdn.dev/CSS/cursor) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --border-color | `string` | [MDN](https://mdn.dev/CSS/border-color) |\n| --max-height | `string` | [MDN](https://mdn.dev/CSS/max-height) |\n| --text-transform | `string` | [MDN](https://mdn.dev/CSS/text-transform) |\n| --accent-color | `string` | [MDN](https://mdn.dev/CSS/accent-color) |\n| --label-color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --label-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --label-font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --label-font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |\n| --control-width | `string` | [MDN](https://mdn.dev/CSS/width) |\n| --control-height | `string` | [MDN](https://mdn.dev/CSS/height) |"
         }
       ]
     },

package/dist/data.snippets.json

@@ -179,15 +179,6 @@
     "description": "Dropdown with checkbox select pattern",
     "body": "<nve-button id=\"btn\" nve-control>test suites <nve-icon name=\"caret\" direction=\"down\" size=\"sm\"></nve-icon></nve-button>\n\n<nve-dropdown anchor=\"btn\">\n  <nve-checkbox-group style=\"width: 250px\">\n    <label>${1:Test Suites}</label>\n\n    <nve-checkbox>\n      <label>${2:Local}</label>\n      <input type=\"checkbox\">\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>${3:Nightly}</label>\n      <input type=\"checkbox\" checked>\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>${4:Remote}</label>\n      <input type=\"checkbox\">\n    </nve-checkbox>\n  </nve-checkbox-group>\n</nve-dropdown>\n$0\n"
   },
-  "Dialog": {
-    "srcFile": "dialog.snippets.html",
-    "prefix": [
-      "dialog"
-    ],
-    "type": "pattern",
-    "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
-    "body": "<nve-dialog size=\"${6:md}\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dialog-footer>\n    <nve-button>${3:Cancel}</nve-button>\n    <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n$0\n"
-  },
   "Card": {
     "srcFile": "card.snippets.html",
     "prefix": [
@@ -251,6 +242,33 @@
     "description": "Simple vertical button group with three icon buttons.",
     "body": "<nve-button-group orientation=\"vertical\">\n  <nve-icon-button icon-name=\"${1:copy}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${2:add-comment}\"></nve-icon-button>\n  <nve-icon-button icon-name=\"${3:download}\"></nve-icon-button>\n</nve-button-group>\n"
   },
+  "Alert Group": {
+    "srcFile": "alert.snippets.html",
+    "prefix": [
+      "alert-group"
+    ],
+    "type": "pattern",
+    "description": "Alert group with two alerts.",
+    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert closable>${3:Alert Text}</nve-alert>\n  <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
+  },
+  "Alert with Action": {
+    "srcFile": "alert.snippets.html",
+    "prefix": [
+      "alert-action"
+    ],
+    "type": "pattern",
+    "description": "Alert with action button.",
+    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
+  },
+  "Multiline Alert ": {
+    "srcFile": "alert.snippets.html",
+    "prefix": [
+      "multiline-alert"
+    ],
+    "type": "pattern",
+    "description": "Alert text and preformatted code output.",
+    "body": "<nve-alert-group status=\"danger\">\n  <nve-alert>\n    Session Paused:\n    <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n      <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n      <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n      <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n          </pre>\n    </div>\n  </nve-alert>\n</nve-alert-group>\n$0\n"
+  },
   "Accordion": {
     "srcFile": "accordion.snippets.html",
     "prefix": [
@@ -278,31 +296,13 @@
     "description": "Accordion group with two accordion children.",
     "body": "<nve-accordion-group behavior-expand-single container=\"${1:flat}\">\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${2:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${3:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${4:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${5:Content} </nve-accordion-content>\n  </nve-accordion>\n\n  <nve-accordion>\n    <nve-accordion-header>\n      <div slot=\"title\">${6:Title}</div>\n    </nve-accordion-header>\n\n    <nve-accordion-content> ${7:Content} </nve-accordion-content>\n  </nve-accordion>\n</nve-accordion-group>\n$0\n"
   },
-  "Alert Group": {
-    "srcFile": "alert.snippets.html",
-    "prefix": [
-      "alert-group"
-    ],
-    "type": "pattern",
-    "description": "Alert group with two alerts.",
-    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert closable>${3:Alert Text}</nve-alert>\n  <nve-alert closable>${4:Alert Text}</nve-alert>\n</nve-alert-group>\n$0\n"
-  },
-  "Alert with Action": {
-    "srcFile": "alert.snippets.html",
-    "prefix": [
-      "alert-action"
-    ],
-    "type": "pattern",
-    "description": "Alert with action button.",
-    "body": "<nve-alert-group status=\"${1:accent}\" container=\"${2:flat}\" prominence=\"emphasis\">\n  <nve-alert> ${3:Alert Text} <nve-button slot=\"actions\" container=\"flat\">${4:OK!}</nve-button> </nve-alert>\n</nve-alert-group>\n$0\n"
-  },
-  "Multiline Alert ": {
-    "srcFile": "alert.snippets.html",
+  "Dialog": {
+    "srcFile": "dialog.snippets.html",
     "prefix": [
-      "multiline-alert"
+      "dialog"
     ],
     "type": "pattern",
-    "description": "Alert text and preformatted code output.",
-    "body": "<nve-alert-group status=\"danger\">\n  <nve-alert>\n    Session Paused:\n    <div slot=\"content\" nve-layout=\"column gap:sm align:stretch\">\n      <p nve-text=\"body sm\">Failed to verify drives. <a href=\"#\" nve-text=\"link\">Check Status</a></p>\n      <nve-divider style=\"--color: var(--nve-sys-text-muted-color)\"></nve-divider>\n      <pre nve-text=\"code sm\" style=\"background: transparent !important; margin: 0;\">10:06:01 AM [verify] update /virtual:/verify/\n10:06:11 AM [build] update /virtual:/build/\n10:06:22 AM [error] update /virtual:/error/ - failed to connect to remote\n          </pre>\n    </div>\n  </nve-alert>\n</nve-alert-group>\n$0\n"
+    "description": "Dialog is a component that appears above main content. A modal dialog is used to display critical information that requires users attention.",
+    "body": "<nve-dialog size=\"${6:md}\" closable>\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">${1:Title}</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">${2:Content}</p>\n  <nve-dialog-footer>\n    <nve-button>${3:Cancel}</nve-button>\n    <nve-button interaction=\"${4:emphasis}\">${5:OK}</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n$0\n"
   }
 }

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "0.1.4"
+			version: "0.2.1"
 		};
 	}
 	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.1.4",
+			version: "0.2.1",
 			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.1.4",
+			version: "0.2.1",
 			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.1.4"
+			version: "0.2.1"
 		};
 	}
 	static {

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-drawer-content",
-			version: "0.1.4",
+			version: "0.2.1",
 			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.1.4",
+			version: "0.2.1",
 			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.1.4",
+			version: "0.2.1",
 			parents: ["nve-drawer"]
 		};
 	}

package/dist/drawer/drawer2.js

@@ -30,7 +30,7 @@ var p = class extends u {
 	static {
 		this.metadata = {
 			tag: "nve-drawer",
-			version: "0.1.4"
+			version: "0.2.1"
 		};
 	}
 	static {

package/dist/dropdown/dropdown-footer2.js

@@ -11,7 +11,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown-footer",
-			version: "0.1.4",
+			version: "0.2.1",
 			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.1.4",
+			version: "0.2.1",
 			parents: ["nve-dropdown"]
 		};
 	}

package/dist/dropdown/dropdown2.js

@@ -21,7 +21,7 @@ var p = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-dropdown",
-			version: "0.1.4"
+			version: "0.2.1"
 		};
 	}
 	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.1.4",
+			version: "0.2.1",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone2.js

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

package/dist/file/file2.js

@@ -11,7 +11,7 @@ var a = class extends n {
 	static {
 		this.metadata = {
 			tag: "nve-file",
-			version: "0.1.4"
+			version: "0.2.1"
 		};
 	}
 	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.1.4"
+			version: "0.2.1"
 		};
 	}
 	get #e() {

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

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

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

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

package/dist/forms/control/control2.js

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

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

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

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

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

package/dist/grid/cell/cell2.js

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

package/dist/grid/column/column2.js

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

package/dist/grid/footer/footer2.js

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

package/dist/grid/grid2.js

@@ -22,7 +22,7 @@ var v = class extends h {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "0.1.4",
+			version: "0.2.1",
 			children: [
 				u.metadata.tag,
 				d.metadata.tag,

package/dist/grid/header/header2.js

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

package/dist/grid/placeholder/placeholder2.js

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

package/dist/grid/row/row2.js

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

package/dist/icon/icon2.js

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

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

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

package/dist/index.js

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

package/dist/input/input-group2.js

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

package/dist/input/input2.js

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

package/dist/internal/controllers/type-native-popover.controller.js

@@ -23,19 +23,19 @@ var c = class {
 		};
 	}
 	async hostConnected() {
-		i(this.host), this.host.popover = this.host.popoverType ?? null, await this.host.updateComplete, this.host.setAttribute("nve-popover", ""), this.#l(), this.#c(), this.#o(), this.host.inert = this.host.matches(":not(:popover-open)") && !!this.#e.length, this.host.addEventListener("beforetoggle", (e) => {
+		i(this.host), this.host.popover = this.host.popoverType ?? null, await this.host.updateComplete, this.host.setAttribute("nve-popover", ""), this.#u(), this.#l(), this.#s(), this.host.inert = this.host.matches(":not(:popover-open)") && !!this.#e.length, this.host.addEventListener("beforetoggle", (e) => {
 			e.newState === "open" && this.host._internals.states.add("transition-start");
 		}), this.host.addEventListener("toggle", (e) => {
-			this.host.behaviorTrigger && (this.host.hidden = e.newState === "closed"), e.newState === "open" && this.host.closeTimeout && setTimeout(() => this.host.hidePopover(), this.host.closeTimeout), this.host.inert = this.host.matches(":not(:popover-open)"), this.host.modal && this.#u(e.newState === "open", e.target), this.host.dispatchEvent(new CustomEvent(e.newState === "open" && e.oldState !== "open" ? "open" : "close", {
+			this.host.behaviorTrigger && (this.host.hidden = e.newState === "closed"), e.newState === "open" && this.host.closeTimeout && setTimeout(() => this.host.hidePopover(), this.host.closeTimeout), e.newState === "closed" && this.#i(), this.host.inert = this.host.matches(":not(:popover-open)"), this.host.modal && this.#d(e.newState === "open", e.target), this.host.dispatchEvent(new CustomEvent(e.newState === "open" && e.oldState !== "open" ? "open" : "close", {
 				bubbles: !0,
 				composed: !0,
 				detail: { trigger: e.source }
 			}));
 		}), this.host.addEventListener("command", ((e) => {
-			e.command === "toggle-popover" && this.host.togglePopover({ source: e.source }), e.command === "hide-popover" && this.host.hidePopover(), e.command === "show-popover" && this.host.showPopover({ source: e.source });
+			e.command === "toggle-popover" && this.host.togglePopover({ source: e.source }), e.command === "hide-popover" && (this.host.hidePopover(), this.#i()), e.command === "show-popover" && this.host.showPopover({ source: e.source });
 		})), this.host.addEventListener("interest", ((e) => {
 			if (e.source?.localName.includes("-")) {
-				let t = this.host.openDelay ?? this.#i();
+				let t = this.host.openDelay ?? this.#a();
 				t ? this.#t = setTimeout(() => {
 					this.host.isConnected && this.host.showPopover({ source: e.source });
 				}, t) : this.host.showPopover({ source: e.source });
@@ -48,38 +48,41 @@ var c = class {
 	#n = [];
 	#r = null;
 	async hostUpdated() {
-		this.host.popover = this.host.popoverType ?? null, this.#l();
+		this.host.popover = this.host.popoverType ?? null, this.#u();
 	}
 	hostDisconnected() {
-		this.#n.forEach((e) => e.disconnect()), this.#t &&= (clearTimeout(this.#t), null);
+		this.#n.forEach((e) => e.disconnect()), this.#i();
 	}
 	#i() {
+		this.#t &&= (clearTimeout(this.#t), null);
+	}
+	#a() {
 		let e = getComputedStyle(this.host).interestDelayStart;
 		if (!e) return 0;
 		let t = parseFloat(e);
 		return e.endsWith("ms") ? t : t * 1e3;
 	}
-	#a = !1;
-	#o() {
+	#o = !1;
+	#s() {
 		this.host.addEventListener("pointerdown", (e) => {
-			this.host.modal && this.host.matches(":popover-open") && (this.#a = t(e, this.host));
+			this.host.modal && this.host.matches(":popover-open") && (this.#o = t(e, this.host));
 		}), this.host.addEventListener("pointerup", (e) => {
-			this.#a && this.host.popoverDismissible && this.host.modal && this.host.matches(":popover-open") && !s(this.host) && t(e, this.host) && this.host.hidePopover();
+			this.#o && this.host.popoverDismissible && this.host.modal && this.host.matches(":popover-open") && !s(this.host) && t(e, this.host) && this.host.hidePopover();
 		});
 	}
-	get #s() {
+	get #c() {
 		return this.host.trigger ? o(this.host, this.host.trigger) : null;
 	}
-	async #c() {
+	async #l() {
 		await new Promise((e) => requestAnimationFrame(e)), this.#n.push(r(this.host, ["hidden"], () => {
 			this.host.isConnected && !this.host.hidden && !this.host.matches(":popover-open") && this.host.showPopover(), this.host.isConnected && this.host.hidden && this.host.matches(":popover-open") && this.host.hidePopover();
 		})), this.host.isConnected && !this.#e.length && !this.host.hidden && !this.host.matches(":popover-open") && (this.host.popover = "manual", this.host.showPopover());
 	}
-	#l() {
-		let e = this.#s;
+	#u() {
+		let e = this.#c;
 		this.#r && this.#r !== e && (this.#r.popoverTargetElement = null, this.#r.removeAttribute("popovertarget")), e && (this.host.popoverType === "hint" ? (e.addEventListener("mouseenter", () => this.host.showPopover({ source: e })), e.addEventListener("mouseleave", () => this.host.hidePopover()), e.addEventListener("focusout", () => this.host.hidePopover())) : (this.host.id = this.host.id ? this.host.id : n(), e.popoverTargetElement = this.host, e.setAttribute("popovertarget", this.host.id)), this.#r = e);
 	}
-	#u(t, n) {
+	#d(t, n) {
 		t ? this.host.getRootNode().activeElement !== this.host && !this.host.shadowRoot.activeElement && e(this.host) : e(n);
 	}
 };