@nvidia-elements/core 2.7.1 → 2.7.3

package/dist/button/button2.js

@@ -12,7 +12,7 @@ var s = class extends o(r) {
 	static {
 		this.metadata = {
 			tag: "nve-button",
-			version: "2.7.1"
+			version: "2.7.3"
 		};
 	}
 	render() {

package/dist/button-group/button-group2.js

@@ -26,7 +26,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-button-group",
-			version: "2.7.1",
+			version: "2.7.3",
 			children: [
 				"nve-button",
 				"nve-icon-button",

package/dist/card/card2.js

@@ -16,7 +16,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card",
-			version: "2.7.1"
+			version: "2.7.3"
 		};
 	}
 	render() {
@@ -37,7 +37,7 @@ var f = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-header",
-			version: "2.7.1",
+			version: "2.7.3",
 			parents: ["nve-card"]
 		};
 	}
@@ -53,7 +53,7 @@ var p = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-content",
-			version: "2.7.1",
+			version: "2.7.3",
 			parents: ["nve-card"]
 		};
 	}
@@ -72,7 +72,7 @@ var m = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-card-footer",
-			version: "2.7.1",
+			version: "2.7.3",
 			parents: ["nve-card"]
 		};
 	}

package/dist/chat-message/chat-message2.js

@@ -13,7 +13,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-chat-message",
-			version: "2.7.1"
+			version: "2.7.3"
 		};
 	}
 	render() {

package/dist/checkbox/checkbox-group2.js

@@ -12,7 +12,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox-group",
-			version: "2.7.1",
+			version: "2.7.3",
 			children: [
 				"label",
 				"nve-control-message",

package/dist/checkbox/checkbox2.js

@@ -15,7 +15,7 @@ var o = class extends i {
 	static {
 		this.metadata = {
 			tag: "nve-checkbox",
-			version: "2.7.1",
+			version: "2.7.3",
 			children: [
 				"label",
 				"input",

package/dist/color/color2.js

@@ -21,7 +21,7 @@ var f = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-color",
-			version: "2.7.1"
+			version: "2.7.3"
 		};
 	}
 	static {

package/dist/combobox/combobox2.js

@@ -31,7 +31,7 @@ var S = class extends l {
 	static {
 		this.metadata = {
 			tag: "nve-combobox",
-			version: "2.7.1"
+			version: "2.7.3"
 		};
 	}
 	static {

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

@@ -32,7 +32,7 @@ var p = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-copy-button",
-			version: "2.7.1"
+			version: "2.7.3"
 		};
 	}
 	static {

package/dist/custom-elements-jsx.d.ts

@@ -1104,7 +1104,7 @@ export type FileProps = {
 };
 
 export type FormatBytesProps = {
-  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  /** Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'. */
   "unit-display"?: "short" | "long";
   /** Pad fraction output to at least this many digits. */
   "minimum-fraction-digits"?: number | undefined;
@@ -1118,7 +1118,7 @@ When both are present, this property takes precedence. */
   display?: "decimal" | "binary";
   /** Optional unit magnitude. When omitted, the component selects a unit from the byte count. */
   unit?: "b" | "kb" | "mb" | "gb" | "tb" | "pb" | undefined;
-  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  /** Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'. */
   unitDisplay?: "short" | "long";
   /** Language tag (such as en-US or de-DE) used to format the number.
 Defaults to document.documentElement.lang or the runtime default. */
@@ -5017,6 +5017,7 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - Validation or supporting message text for the associated control.
+   * - **icon** - override the icon with a custom icon
    *
    * ### **CSS Properties:**
    *  - **--color** - undefined _(default: undefined)_

package/dist/custom-elements-vue.d.ts

@@ -980,7 +980,7 @@ type FileProps = {
 };
 
 type FormatBytesProps = {
-  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  /** Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'. */
   "unit-display"?: "short" | "long";
   /** Pad fraction output to at least this many digits. */
   "minimum-fraction-digits"?: number | undefined;
@@ -994,7 +994,7 @@ When both are present, this property takes precedence. */
   display?: "decimal" | "binary";
   /** Optional unit magnitude. When omitted, the component selects a unit from the byte count. */
   unit?: "b" | "kb" | "mb" | "gb" | "tb" | "pb" | undefined;
-  /** Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. */
+  /** Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'. */
   unitDisplay?: "short" | "long";
   /** Language tag (such as en-US or de-DE) used to format the number.
 Defaults to document.documentElement.lang or the runtime default. */
@@ -4775,6 +4775,7 @@ export type CustomElements = {
    *
    * ### **Slots:**
    *  - _default_ - Validation or supporting message text for the associated control.
+   * - **icon** - override the icon with a custom icon
    *
    * ### **CSS Properties:**
    *  - **--color** - undefined _(default: undefined)_

package/dist/custom-elements.json

@@ -13378,7 +13378,7 @@
                 ]
               },
               "default": "'short'",
-              "description": "Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'.",
+              "description": "Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'.",
               "attribute": "unit-display"
             },
             {
@@ -13524,7 +13524,7 @@
                 ]
               },
               "default": "'short'",
-              "description": "Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'.",
+              "description": "Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'.",
               "fieldName": "unitDisplay"
             },
             {
@@ -13595,7 +13595,7 @@
             "since": "0.0.0",
             "status": "stable",
             "behavior": "content",
-            "markdown": "## nve-format-bytes\n\nFormats a byte count as localized, human-readable decimal or binary units.\n\n### Example\n\n```html\n<div nve-layout=\"column gap:sm\">\n  <nve-format-bytes>1024</nve-format-bytes>\n  <nve-format-bytes>1048576</nve-format-bytes>\n  <nve-format-bytes>1073741824</nve-format-bytes>\n</div>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/format-bytes/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Numeric byte count to format (such as 1048576). Serves as fallback before hydration. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| value | `number \\| undefined` | Optional byte count for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. |\n| display | `'decimal' \\| 'binary'` | Unit system: 'decimal' uses powers of 1000 and 'binary' uses powers of 1024. |\n| unit | `'b' \\| 'kb' \\| 'mb' \\| 'gb' \\| 'tb' \\| 'pb' \\| undefined` | Optional unit magnitude. When omitted, the component selects a unit from the byte count. |\n| unitDisplay (unit-display) | `'short' \\| 'long'` | Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'. |\n| locale | `string \\| undefined` | Language tag (such as en-US or de-DE) used to format the number. Defaults to document.documentElement.lang or the runtime default. |\n| minimumFractionDigits (minimum-fraction-digits) | `number \\| undefined` | Pad fraction output to at least this many digits. |\n| maximumFractionDigits (maximum-fraction-digits) | `number \\| undefined` | Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point. |"
+            "markdown": "## nve-format-bytes\n\nFormats a byte count as localized, human-readable decimal or binary units.\n\n### Example\n\n```html\n<div nve-layout=\"column gap:sm\">\n  <nve-format-bytes>1024</nve-format-bytes>\n  <nve-format-bytes>1048576</nve-format-bytes>\n  <nve-format-bytes>1073741824</nve-format-bytes>\n</div>\n```\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/format-bytes/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Numeric byte count to format (such as 1048576). Serves as fallback before hydration. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| value | `number \\| undefined` | Optional byte count for values supplied by JavaScript or bound data. By default, the component formats the element's text content, which also serves as the SSR fallback. When both are present, this property takes precedence. |\n| display | `'decimal' \\| 'binary'` | Unit system: 'decimal' uses powers of 1000 and 'binary' uses powers of 1024. |\n| unit | `'b' \\| 'kb' \\| 'mb' \\| 'gb' \\| 'tb' \\| 'pb' \\| undefined` | Optional unit magnitude. When omitted, the component selects a unit from the byte count. |\n| unitDisplay (unit-display) | `'short' \\| 'long'` | Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'. |\n| locale | `string \\| undefined` | Language tag (such as en-US or de-DE) used to format the number. Defaults to document.documentElement.lang or the runtime default. |\n| minimumFractionDigits (minimum-fraction-digits) | `number \\| undefined` | Pad fraction output to at least this many digits. |\n| maximumFractionDigits (maximum-fraction-digits) | `number \\| undefined` | Round fraction output to at most this many digits. Defaults to two effective digits after the decimal point. |"
           }
         }
       ],
@@ -15898,6 +15898,10 @@
             {
               "description": "Validation or supporting message text for the associated control.",
               "name": ""
+            },
+            {
+              "description": "override the icon with a custom icon",
+              "name": "icon"
             }
           ],
           "members": [
@@ -16108,7 +16112,7 @@
             "since": "0.3.0",
             "status": "stable",
             "behavior": "form",
-            "markdown": "## nve-control-message\n\nDefining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/forms/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Validation or supporting message text for the associated control. |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled' \\| undefined` | Visual treatment for current form control validation status |\n| error | `'badInput' \\| 'customError' \\| 'patternMismatch' \\| 'rangeOverflow' \\| 'rangeUnderflow' \\| 'stepMismatch' \\| 'tooLong' \\| 'tooShort' \\| 'typeMismatch' \\| 'valid' \\| 'valueMissing' \\| null` | Validation error code for current form control https://mdn.dev/ValidityState |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
+            "markdown": "## nve-control-message\n\nDefining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n\n### Import\n\n```javascript\nimport '@nvidia-elements/core/forms/define.js';\n```\n\n### Slots\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| (default) | `string` | Validation or supporting message text for the associated control. |\n| icon | `string` | override the icon with a custom icon |\n\n### Properties / Attributes\n\n| property (attribute) | value | description |\n| -------------------- | ----- | ----------- |\n| status | `'warning' \\| 'error' \\| 'success' \\| 'disabled' \\| undefined` | Visual treatment for current form control validation status |\n| error | `'badInput' \\| 'customError' \\| 'patternMismatch' \\| 'rangeOverflow' \\| 'rangeUnderflow' \\| 'stepMismatch' \\| 'tooLong' \\| 'tooShort' \\| 'typeMismatch' \\| 'valid' \\| 'valueMissing' \\| null` | Validation error code for current form control https://mdn.dev/ValidityState |\n\n### CSS Properties\n\n| name | value | description |\n| ---- | ----- | ----------- |\n| --color | `string` | [MDN](https://mdn.dev/CSS/color) |\n| --font-weight | `string` | [MDN](https://mdn.dev/CSS/font-weight) |\n| --font-size | `string` | [MDN](https://mdn.dev/CSS/font-size) |"
           }
         }
       ],
@@ -25960,13 +25964,32 @@
             },
             {
               "kind": "method",
-              "name": "#getActiveItem",
+              "name": "#getKeyboardActiveItem",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "items",
+                  "type": {
+                    "text": "HTMLElement[]"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#getPointerActiveItem",
               "privacy": "private",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "Event"
+                    "text": "PointerEvent"
                   }
                 },
                 {

package/dist/data.html.json

@@ -1637,7 +1637,7 @@
         },
         {
           "name": "unit-display",
-          "description": "Unit label length: 'short' renders labels such as 'mb'; 'long' renders labels such as 'megabytes'.",
+          "description": "Unit label length: 'short' renders labels such as 'MB'; 'long' renders labels such as 'megabytes'.",
           "values": [{ "name": "short" }, { "name": "long" }]
         },
         {
@@ -2022,7 +2022,7 @@
     },
     {
       "name": "nve-control-message",
-      "description": "Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n---\n\n\n### **Slots:**\n - _default_ - Validation or supporting message text for the associated control.\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
+      "description": "Defining a Validity State on a control-message allows messages to show conditionally based on the current HTML5 validity state.\n---\n\n\n### **Slots:**\n - _default_ - Validation or supporting message text for the associated control.\n- **icon** - override the icon with a custom icon\n\n### **CSS Properties:**\n - **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon** - The icon element",
       "attributes": [
         {
           "name": "status",

package/dist/data.snippets.json

@@ -188,6 +188,33 @@
     "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": [
+      "card"
+    ],
+    "type": "pattern",
+    "description": "Basic Card with header and footer",
+    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card"
+    ],
+    "type": "pattern",
+    "description": "Basic media Card with card content and card footer",
+    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
+  },
+  "Media Card Grid": {
+    "srcFile": "card.snippets.html",
+    "prefix": [
+      "media-card-grid"
+    ],
+    "type": "pattern",
+    "description": "Grid layout with 3 media cards",
+    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
+  },
   "Button Group": {
     "srcFile": "button-group.snippets.html",
     "prefix": [
@@ -224,32 +251,32 @@
     "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"
   },
-  "Card": {
-    "srcFile": "card.snippets.html",
+  "Alert Group": {
+    "srcFile": "alert.snippets.html",
     "prefix": [
-      "card"
+      "alert-group"
     ],
     "type": "pattern",
-    "description": "Basic Card with header and footer",
-    "body": "<nve-card>\n  <nve-card-header>\n    <div>\n      <h2>${1:Title}</h2>\n      <p>${2:Sub Title}</p>\n    </div>\n  </nve-card-header>\n  <nve-card-content>\n    ${3:\n    <p>card content</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <nve-button style=\"margin-left: auto\">Action</nve-button>\n  </nve-card-footer>\n</nve-card>\n"
+    "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"
   },
-  "Media Card": {
-    "srcFile": "card.snippets.html",
+  "Alert with Action": {
+    "srcFile": "alert.snippets.html",
     "prefix": [
-      "media-card"
+      "alert-action"
     ],
     "type": "pattern",
-    "description": "Basic media Card with card content and card footer",
-    "body": "<nve-card style=\"height: 100%; width: 100%;\">\n  <img alt=\"example visualization for media card demo\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n  <nve-card-content>\n    ${1:\n    <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n    }\n  </nve-card-content>\n  <nve-card-footer>\n    <div nve-layout=\"grid span-items:6 gap:xs\">\n      <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n      <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n    </div>\n  </nve-card-footer>\n</nve-card>\n"
+    "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"
   },
-  "Media Card Grid": {
-    "srcFile": "card.snippets.html",
+  "Multiline Alert ": {
+    "srcFile": "alert.snippets.html",
     "prefix": [
-      "media-card-grid"
+      "multiline-alert"
     ],
     "type": "pattern",
-    "description": "Grid layout with 3 media cards",
-    "body": "<section nve-layout=\"grid span-items:4 gap:md\">\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 1\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${1:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${2:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${3:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 2\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${4:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${5:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${6:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n\n  <nve-card style=\"height: 100%; width: 100%;\">\n    <img alt=\"example visualization for media card 3\" loading=\"lazy\" style=\"width: 100%; height: 100%; object-fit: cover;\">\n    <nve-card-content>\n      ${7:\n      <p>•︎•︎•︎ •︎•︎•︎ •︎•︎•︎</p>\n      }\n    </nve-card-content>\n    <nve-card-footer>\n      <div nve-layout=\"grid span-items:6 gap:xs\">\n        <nve-button>${8:•︎•︎•︎•︎•︎•︎}</nve-button>\n        <nve-button>${9:•︎•︎•︎•︎•︎•︎}</nve-button>\n      </div>\n    </nve-card-footer>\n  </nve-card>\n</section>\n"
+    "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",
@@ -277,32 +304,5 @@
     "type": "pattern",
     "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>${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>${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>${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",
-    "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"
   }
 }

package/dist/date/date2.js

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

package/dist/datetime/datetime2.js

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

package/dist/dialog/dialog-footer2.js

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

package/dist/dialog/dialog2.js

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

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content2.js

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

package/dist/drawer/drawer2.js

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

package/dist/dropdown/dropdown-footer2.js

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

package/dist/dropdown/dropdown2.js

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

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

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

package/dist/dropzone/dropzone.js

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

package/dist/dropzone/dropzone.js.map

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

package/dist/dropzone/dropzone2.js

@@ -20,7 +20,7 @@ var g = class extends m(d) {
 	static {
 		this.metadata = {
 			tag: "nve-dropzone",
-			version: "2.7.1",
+			version: "2.7.3",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",
@@ -91,7 +91,7 @@ var g = class extends m(d) {
 		e.target.assignedNodes().forEach((e) => n(e));
 	}
 	render() {
-		return f`<div internal-host><div class="container" @click="${this.#n}" @dragenter="${this.#r}" @dragover="${this.#i}" @dragleave="${this.#a}" @drop="${this.#o}"><svg class="border" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><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"/></svg><slot name="icon"><nve-icon part="icon" class="icon" name="upload"></nve-icon></slot><slot @slotchange="${this.#d}"><div class="text-center"><div class="text-bold">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class="text-emphasized">${this.i18n.browseFiles}</span></div><div class="text-muted">${this.#l(this.accept)} — ${this.i18n.maxFileSize} ${e(this.maxFileSize)}</div></div></slot><input id="dropzone-input" type="file" accept="${this.accept}" @change="${this.#s}" multiple="multiple" hidden></div></div>`;
+		return f`<div internal-host><div class="container" @click="${this.#n}" @dragenter="${this.#r}" @dragover="${this.#i}" @dragleave="${this.#a}" @drop="${this.#o}"><svg class="dropzone-border" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><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"/></svg><slot name="icon"><nve-icon part="icon" class="icon" name="upload"></nve-icon></slot><slot @slotchange="${this.#d}"><div class="dropzone-text-center"><div class="dropzone-text-bold">${this.i18n.dragAndDrop} ${this.i18n.files} ${this.i18n.or} <span class="text-emphasized">${this.i18n.browseFiles}</span></div><div class="text-muted">${this.#l(this.accept)} — ${this.i18n.maxFileSize} ${e(this.maxFileSize)}</div></div></slot><input id="dropzone-input" type="file" accept="${this.accept}" @change="${this.#s}" multiple="multiple" hidden></div></div>`;
 	}
 };
 a([p()], g.prototype, "accept", void 0), a([p({