@nvidia-elements/core 2.8.0 → 2.9.0

package/dist/data.html.json

@@ -5276,7 +5276,7 @@
     },
     {
       "name": "nve-textarea",
-      "description": "A textarea is a control that enables users to enter and edit text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
+      "description": "A textarea is a control that enables users to enter and edit text.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - **prefix** - Content to display before the textarea.\n- **suffix** - Content to display after the textarea.\n- _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_",
       "attributes": [
         {
           "name": "status",
@@ -5718,6 +5718,100 @@
         }
       ]
     },
+    {
+      "name": "nve-viewport-gridlines",
+      "description": "Renders origin-stable, zoom-adaptive gridlines behind viewport content.\n---\n\n\n### **CSS Properties:**\n - **--color** - Sets the gridline stroke color. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--line-width** - Sets the approximate stroke width in CSS pixels. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "step",
+          "description": "Smallest gridline interval in content-space units.",
+          "values": []
+        },
+        {
+          "name": "origin-x",
+          "description": "Content-space x coordinate of the grid origin.",
+          "values": []
+        },
+        {
+          "name": "origin-y",
+          "description": "Content-space y coordinate of the grid origin.",
+          "values": []
+        },
+        {
+          "name": "target-spacing",
+          "description": "Target on-screen separation used to choose the adaptive gridline interval, in CSS pixels.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://nvidia.github.io/elements/docs/elements/viewport/"
+        }
+      ]
+    },
+    {
+      "name": "nve-viewport",
+      "description": "A viewport provides a spatial surface for arbitrary content, with optional pan and zoom navigation.\n---\n\n\n### **Events:**\n - **viewportchange** - Dispatched once after a render that commits one or more viewport transform changes.\n- **type**\n- **panstart** - Dispatched when pointer movement crosses the pan threshold. Cancel to disable built-in pointer panning for the sequence.\n- **pan** - Dispatched when pointer, wheel, keyboard, or command input requests a pan. Cancel to skip the proposed transform mutation.\n- **panend** - Dispatched when a pointer pan ends, including its terminal reason.\n- **zoom** - Dispatched when wheel, pinch, or command input requests a scale change. Cancel to skip the proposed transform mutation.\n\n### **Methods:**\n - **toViewportCoords(contentX: _number_, contentY: _number_): _ViewportPoint_** - Converts a content-space point to viewport CSS pixels.\n- **toContentCoords(viewportX: _number_, viewportY: _number_): _ViewportPoint_** - Converts a viewport CSS-pixel point to content space.\n- **getTransform(): _ViewportTransform_** - Returns the current content-space origin and CSS-pixel scale.\n- **getVisibleRect(): _ViewportRect_** - Returns the visible content-space rectangle.\n- **animateTo(target: _Partial<ViewportTransform>_, options: _ViewportAnimationOptions_): _void_** - Animates the viewport to the requested partial transform.\n- **reveal(region: _{ x: number; y: number; width?: number; height?: number }_, options: _ViewportRevealOptions_): _void_** - Centers or fits a content-space region within the viewport.\n- **fitContents(options: _ViewportRevealOptions_): _void_** - Fits the union of direct default-slot element boxes within the viewport.\n\n### **Slots:**\n - _default_ - Content positioned in the viewport's infinite content space.\n- **background** - Custom content rendered behind viewport content and excluded from content fitting\n\n### **CSS Properties:**\n - **--background** - Background color of the fixed viewport area. [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--min-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) _(default: undefined)_\n- **--pan-cursor** - Cursor shown over a background eligible for primary-pointer panning. _(default: undefined)_\n- **--panning-cursor** - Cursor shown while a pointer pan is active. _(default: undefined)_",
+      "attributes": [
+        {
+          "name": "x",
+          "description": "Horizontal content-space coordinate at the viewport origin.",
+          "values": []
+        },
+        {
+          "name": "y",
+          "description": "Vertical content-space coordinate at the viewport origin.",
+          "values": []
+        },
+        {
+          "name": "scale",
+          "description": "Content-to-viewport CSS-pixel scale.",
+          "values": []
+        },
+        {
+          "name": "min-scale",
+          "description": "Inclusive lower scale limit.",
+          "values": []
+        },
+        {
+          "name": "max-scale",
+          "description": "Inclusive upper scale limit.",
+          "values": []
+        },
+        {
+          "name": "behavior-pan",
+          "description": "Enables panning by pointer, focused wheel, focused keyboard, and Invoker commands; requires Space for primary-pointer dragging when set to space.",
+          "values": [{ "name": "space" }]
+        },
+        {
+          "name": "behavior-zoom",
+          "description": "Enables zooming by pinch, focused modified wheel, focused keyboard, and Invoker commands.",
+          "values": []
+        },
+        {
+          "name": "autoFit",
+          "description": "Fits measurable direct default-slot content once after initial layout.",
+          "values": []
+        },
+        {
+          "name": "fit-inset",
+          "description": "Default uniform CSS-pixel inset reserved around bounds when fitting content.",
+          "values": []
+        },
+        {
+          "name": "drag-threshold",
+          "description": "CSS-pixel pointer movement required before a pointer pan begins.",
+          "values": []
+        }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://nvidia.github.io/elements/docs/elements/viewport/"
+        }
+      ]
+    },
     {
       "name": "nve-week",
       "description": "A week picker is a control that enables users to choose a week value.\n---\n\n\n### **Events:**\n - **reset**\n\n### **Methods:**\n - **reset()** - Resets control value to initial attribute value and clears any active validation rules.\n\n### **Slots:**\n - _default_ - Control input element\n- **label** - Label element\n\n### **CSS Properties:**\n - **--padding** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) _(default: undefined)_\n- **--font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n- **--background** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background) _(default: undefined)_\n- **--border-radius** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) _(default: undefined)_\n- **--border** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/border) _(default: undefined)_\n- **--cursor** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) _(default: undefined)_\n- **--accent-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) _(default: undefined)_\n- **--color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-color** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color) _(default: undefined)_\n- **--label-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--label-font-weight** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) _(default: undefined)_\n- **--label-font-size** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) _(default: undefined)_\n- **--control-width** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/width) _(default: undefined)_\n- **--control-height** - [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/height) _(default: undefined)_\n\n### **CSS Parts:**\n - **icon-button** - The calendar icon button element",

package/dist/data.snippets.json

@@ -71,24 +71,6 @@
     "description": "Basic inline search",
     "body": "<nve-search>\n  <input type=\"search\" aria-label=\"${2:search}\" placeholder=\"${3:search}\">\n</nve-search>\n"
   },
-  "Page Header": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
-  },
-  "Page Header with Links": {
-    "srcFile": "page-header.snippets.html",
-    "prefix": [
-      "page-header-with-links"
-    ],
-    "type": "pattern",
-    "description": "Basic page-header layout with links.",
-    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
-  },
   "Page": {
     "srcFile": "page.snippets.html",
     "prefix": [
@@ -134,6 +116,24 @@
     "description": "Basic page subheader using toolbar.",
     "body": "<nve-toolbar slot=\"subheader\">\n  <h2 nve-text=\"emphasis heading sm\">${1:Subheader}</h2>\n</nve-toolbar>\n"
   },
+  "Page Header": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout.",
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n</nve-page-header>\n"
+  },
+  "Page Header with Links": {
+    "srcFile": "page-header.snippets.html",
+    "prefix": [
+      "page-header-with-links"
+    ],
+    "type": "pattern",
+    "description": "Basic page-header layout with links.",
+    "body": "<nve-page-header slot=\"header\">\n  <nve-logo slot=\"prefix\" size=\"sm\">NV</nve-logo>\n  <h2 slot=\"prefix\">${1:NVIDIA}</h2>\n  <nve-button selected container=\"flat\"><a href=\"#\">${2:Link 1}</a></nve-button>\n  <nve-button container=\"flat\"><a href=\"#\">${3:Link 2}</a></nve-button>\n</nve-page-header>\n"
+  },
   "Input Group": {
     "srcFile": "input.snippets.html",
     "prefix": [
@@ -251,33 +251,6 @@
     "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": [
@@ -304,5 +277,32 @@
     "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.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

package/dist/datetime/datetime2.js

@@ -19,7 +19,7 @@ var l = class extends r {
 	static {
 		this.metadata = {
 			tag: "nve-datetime",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	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.8.0",
+			version: "2.9.0",
 			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.8.0",
+			version: "2.9.0",
 			parents: ["nve-dialog"]
 		};
 	}

package/dist/dialog/dialog.examples.json

@@ -87,7 +87,7 @@
     {
       "id": "dialog-text-wrap",
       "name": "TextWrap",
-      "template": "<nve-dialog closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content\n    in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some\n    text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a\n    small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text\n    wrapped content in a small dialog. Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n",
+      "template": "<nve-dialog closable>\n  <h3 nve-text=\"heading\">Text Wrap</h3>\n  <p nve-text=\"body\">\n    Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small\n    dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in\n    a small dialog. Some text wrapped content in a small dialog. Some text wrapped content in a small dialog.\n  </p>\n</nve-dialog>\n",
       "summary": "Dialog with text wrapping behavior, where content adapts to dialog constraints and maintains readability in limited space.",
       "description": "",
       "composition": false,
@@ -131,7 +131,7 @@
     {
       "id": "dialog-legacy-trigger",
       "name": "LegacyTrigger",
-      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences including theme, notification settings, and default project configurations to\n      customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector(\"nve-dialog\");\n  dialog.addEventListener(\"open\", (e) => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n",
+      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n<script type=\"module\">\n  const dialog = document.querySelector(\"nve-dialog\");\n  dialog.addEventListener(\"open\", (e) => {\n    console.log(e);\n    dialog.hidden = false;\n  });\n  dialog.addEventListener(\"close\", (e) => {\n    console.log(e);\n    dialog.hidden = true;\n  });\n</script>\n",
       "summary": "Legacy trigger mechanism for dialog opening, with backward compatibility and alternative interaction patterns for dialog activation.",
       "description": "",
       "deprecated": true,
@@ -143,7 +143,7 @@
     {
       "id": "dialog-legacy-behavior-trigger",
       "name": "LegacyBehaviorTrigger",
-      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content\n      >Adjust workspace preferences including theme, notification settings, and default project configurations to\n      customize your experience.</nve-accordion-content\n    >\n  </nve-accordion>\n</nve-dialog>\n",
+      "template": "<nve-button id=\"dialog-btn\">open</nve-button>\n<nve-dialog trigger=\"dialog-btn\" behavior-trigger closable modal hidden>\n  <h3 nve-text=\"heading\">Title</h3>\n  <p nve-text=\"body\">some text content in a closable dialog</p>\n  <nve-accordion behavior-expand>\n    <nve-accordion-header>\n      <h2 nve-text=\"heading xs medium\" slot=\"prefix\">Heading</h2>\n    </nve-accordion-header>\n    <nve-accordion-content>Adjust workspace preferences including theme, notification settings, and default project configurations to customize your experience.</nve-accordion-content>\n  </nve-accordion>\n</nve-dialog>\n",
       "summary": "Legacy behavior trigger for dialog management, showing traditional dialog control patterns and event handling for dialog lifecycle.",
       "description": "",
       "deprecated": true,

package/dist/dialog/dialog2.js

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

package/dist/divider/divider.examples.json

@@ -45,7 +45,7 @@
     {
       "id": "divider-rounded",
       "name": "Rounded",
-      "template": "<nve-divider\n  style=\"\n    --size: var(--nve-ref-border-width-xl);\n    --border-radius: var(--nve-ref-border-radius-xs);\n    --color: var(--nve-sys-accent-secondary-background);\n  \"\n></nve-divider>\n",
+      "template": "<nve-divider style=\"--size: var(--nve-ref-border-width-xl); --border-radius: var(--nve-ref-border-radius-xs); --color: var(--nve-sys-accent-secondary-background)\"></nve-divider>\n",
       "summary": "Divider with custom rounded styling, thicker border, and accent color for decorative separation.",
       "description": "",
       "composition": false,

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

@@ -16,7 +16,7 @@ var l = class extends o {
 	static {
 		this.metadata = {
 			tag: "nve-dot",
-			version: "2.8.0"
+			version: "2.9.0"
 		};
 	}
 	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.8.0",
+			version: "2.9.0",
 			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.8.0",
+			version: "2.9.0",
 			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.8.0",
+			version: "2.9.0",
 			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.8.0"
+			version: "2.9.0"
 		};
 	}
 	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.8.0",
+			version: "2.9.0",
 			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.8.0",
+			version: "2.9.0",
 			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.8.0"
+			version: "2.9.0"
 		};
 	}
 	static {

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

@@ -5,7 +5,7 @@
     {
       "id": "dropdown-group",
       "name": "Default",
-      "template": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\">\n        item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"menu-1\">menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item popovertarget=\"menu-3\"> item 2-2 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item>item 2-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu group with nested submenus for hierarchical navigation.",
       "description": "",
       "composition": true,
@@ -14,7 +14,7 @@
     {
       "id": "dropdown-group-with-disabled-items",
       "name": "WithDisabledItems",
-      "template": "<nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"disabled-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"disabled-menu-2\">\n        item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item disabled>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item disabled>item 2-2</nve-menu-item>\n      <nve-menu-item popovertarget=\"disabled-menu-3\">\n        item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item disabled>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"disabled-menu-1\">Disabled Items</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"disabled-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"disabled-menu-2\"> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n      <nve-menu-item disabled>item 1-2</nve-menu-item>\n      <nve-menu-item>item 1-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 2-1</nve-menu-item>\n      <nve-menu-item disabled>item 2-2</nve-menu-item>\n      <nve-menu-item popovertarget=\"disabled-menu-3\"> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\" slot=\"suffix\"></nve-icon> </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"disabled-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item>item 3-1</nve-menu-item>\n      <nve-menu-item disabled>item 3-2</nve-menu-item>\n      <nve-menu-item>item 3-3</nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu with disabled menu items in non-interactive states.",
       "description": "",
       "composition": true,
@@ -23,7 +23,7 @@
     {
       "id": "dropdown-group-with-icons",
       "name": "WithIcons",
-      "template": "<nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"icon-menu-2\">\n        <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"icon-menu-3\">\n        <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"icon-menu-1\">Icons Menu</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"icon-menu-2\"> <nve-icon name=\"folder\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"image\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"video-camera\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"document\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"icon-menu-3\"> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"terminal\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu with leading icons for visual identification of menu item types.",
       "description": "",
       "composition": true,
@@ -32,7 +32,7 @@
     {
       "id": "dropdown-group-with-more-icons",
       "name": "WithMoreIcons",
-      "template": "<nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"more-icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"more-icon-menu-2\">\n        <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1\n        <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"more-icon-menu-3\">\n        <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3\n        <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon>\n      </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
+      "template": "<nve-button popovertarget=\"more-icon-menu-1\">More Icons</nve-button>\n<nve-dropdown-group>\n  <nve-dropdown id=\"more-icon-menu-1\">\n    <nve-menu>\n      <nve-menu-item popovertarget=\"more-icon-menu-2\"> <nve-icon name=\"person\" size=\"sm\"></nve-icon> item 1-1 <nve-icon name=\"caret\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"arrow\" direction=\"right\" size=\"sm\"></nve-icon> item 1-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"star\" size=\"sm\"></nve-icon> item 1-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-2\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"flag\" size=\"sm\"></nve-icon> item 2-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"home\" size=\"sm\"></nve-icon> item 2-2 </nve-menu-item>\n      <nve-menu-item popovertarget=\"more-icon-menu-3\"> <nve-icon name=\"gear\" size=\"sm\"></nve-icon> item 2-3 <nve-icon name=\"chevron\" direction=\"right\" size=\"sm\"></nve-icon> </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n  <nve-dropdown id=\"more-icon-menu-3\" position=\"right\">\n    <nve-menu>\n      <nve-menu-item> <nve-icon name=\"dot\" size=\"sm\"></nve-icon> item 3-1 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"exclamation-mark\" size=\"sm\"></nve-icon> item 3-2 </nve-menu-item>\n      <nve-menu-item> <nve-icon name=\"edit\" size=\"sm\"></nve-icon> item 3-3 </nve-menu-item>\n    </nve-menu>\n  </nve-dropdown>\n</nve-dropdown-group>\n",
       "summary": "Cascading dropdown menu showcasing extra icon varieties for diverse menu actions.",
       "description": "",
       "composition": true,

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.8.0",
+			version: "2.9.0",
 			children: ["nve-dropdown"]
 		};
 	}

package/dist/dropzone/dropzone.examples.json

@@ -25,7 +25,7 @@
     {
       "id": "dropzone-form",
       "name": "Form",
-      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\"\n        >Unsupported file type — this upload only accepts images</nve-control-message\n      >\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const dropzone = document.querySelector(\"#form-demo nve-dropzone\");\n  dropzone.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n    const files = e.target.value;\n    console.log(\"Validity:\", e.target.validity);\n    console.log(\"Validation Message:\", e.target.validationMessage);\n  });\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n    if (form.checkValidity()) {\n      console.log(\"Form submitted successfully!\");\n    } else {\n      console.log(\"Form validation failed\");\n    }\n  });\n</script>\n",
+      "template": "<form id=\"form-demo\" nve-layout=\"column gap:lg\">\n  <section>\n    <nve-control>\n      <nve-dropzone name=\"files\" accept=\"image/gif, image/jpeg, image/png\" max-file-size=\"1048576\"></nve-dropzone>\n      <nve-control-message error=\"typeMismatch\">Unsupported file type — this upload only accepts images</nve-control-message>\n      <nve-control-message error=\"rangeOverflow\">File too big - maximum 1.00 MB allowed</nve-control-message>\n    </nve-control>\n  </section>\n  <nve-button type=\"submit\">submit</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"#form-demo\");\n  const dropzone = document.querySelector(\"#form-demo nve-dropzone\");\n  dropzone.addEventListener(\"change\", (e) => {\n    console.log(\"change\", e.target.value);\n    const files = e.target.value;\n    console.log(\"Validity:\", e.target.validity);\n    console.log(\"Validation Message:\", e.target.validationMessage);\n  });\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n    if (form.checkValidity()) {\n      console.log(\"Form submitted successfully!\");\n    } else {\n      console.log(\"Form validation failed\");\n    }\n  });\n</script>\n",
       "summary": "Dropzone integrated with form validation showing file type and size constraint errors.",
       "description": "",
       "composition": true,

package/dist/dropzone/dropzone2.js

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

package/dist/file/file2.js

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

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

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

package/dist/format-datetime/format-datetime.examples.json

@@ -32,7 +32,7 @@
     {
       "id": "format-datetime-granular",
       "name": "Granular",
-      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime weekday=\"long\" month=\"short\" day=\"numeric\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime month=\"long\" year=\"numeric\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Granular date part options for precise formatting control. Use when presets don't match your layout, such as weekday and month only. Do not combine with date-style or time-style; style presets take priority if both appear.",
       "description": "",
       "composition": false,
@@ -68,7 +68,7 @@
     {
       "id": "format-datetime-time-zone",
       "name": "TimeZone",
-      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"America/New_York\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime date-style=\"long\" time-style=\"long\" time-zone=\"Asia/Tokyo\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Time zone conversion for displaying dates in a specific region. Use for global teams, scheduling interfaces, or when UTC or server timestamps need a fixed time zone.",
       "description": "",
       "composition": false,
@@ -77,7 +77,7 @@
     {
       "id": "format-datetime-time-zone-name",
       "name": "TimeZoneName",
-      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"short\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n  <nve-format-datetime\n    locale=\"en-US\"\n    month=\"long\"\n    day=\"numeric\"\n    year=\"numeric\"\n    hour=\"numeric\"\n    minute=\"2-digit\"\n    time-zone=\"America/New_York\"\n    time-zone-name=\"long\"\n    >2023-07-28T04:20:17.434Z</nve-format-datetime\n  >\n</div>\n",
+      "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-datetime locale=\"en-US\" month=\"long\" day=\"numeric\" year=\"numeric\" hour=\"numeric\" minute=\"2-digit\" time-zone=\"America/New_York\" time-zone-name=\"short\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n  <nve-format-datetime locale=\"en-US\" month=\"long\" day=\"numeric\" year=\"numeric\" hour=\"numeric\" minute=\"2-digit\" time-zone=\"America/New_York\" time-zone-name=\"long\">2023-07-28T04:20:17.434Z</nve-format-datetime>\n</div>\n",
       "summary": "Time zone name labels in short and long form alongside the formatted date. Use with granular options when the viewer needs to know which time zone applies, such as meeting schedulers or cross-region dashboards.",
       "description": "",
       "composition": false,

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

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

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

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

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

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