@nvidia-elements/core 2.11.2 → 2.12.1

package/dist/dialog/dialog.examples.json

@@ -109,7 +109,7 @@
     {
       "id": "dialog-alignment",
       "name": "Alignment",
-      "template": "<nve-dialog>center</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n<nve-dialog position=\"right\">right center</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n<nve-dialog position=\"bottom\">bottom center</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n<nve-dialog position=\"left\">left center</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n",
+      "template": "<nve-dialog>center</nve-dialog>\n\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"start\">top start</nve-dialog>\n<nve-dialog position=\"top\">top center</nve-dialog>\n<nve-dialog position=\"top\" alignment=\"end\">top end</nve-dialog>\n\n<nve-dialog position=\"right\" alignment=\"start\">right start</nve-dialog>\n<nve-dialog position=\"right\">right center</nve-dialog>\n<nve-dialog position=\"right\" alignment=\"end\">right end</nve-dialog>\n\n<nve-dialog position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n<nve-dialog position=\"bottom\">bottom center</nve-dialog>\n<nve-dialog position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n\n<nve-dialog position=\"left\" alignment=\"start\">left start</nve-dialog>\n<nve-dialog position=\"left\">left center</nve-dialog>\n<nve-dialog position=\"left\" alignment=\"end\">left end</nve-dialog>\n",
       "summary": "Dialog positioning and alignment options for contextual placement. While center positioning is standard, use edge positioning (top/bottom/left/right) for contextually relevant dialogs that relate to specific interface regions or when working with limited vertical 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>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",
+      "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\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\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>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",
+      "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\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,
@@ -155,7 +155,7 @@
     {
       "id": "dialog-shadow-root",
       "name": "ShadowRoot",
-      "template": "<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>\n      :host {\n        box-sizing: border-box;\n        display: block;\n        margin: 25vh auto;\n        width: 400px;\n        height: 400px;\n        background: red;\n        visibility: visible !important;\n      }\n    </style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n",
+      "template": "<dialog-test-shadow-root>\n  <template shadowrootmode=\"open\">\n    <style>:host { box-sizing: border-box; display: block; margin: 25vh auto; width: 400px; height: 400px; background: red; visibility: visible !important; }</style>\n    <nve-dialog size=\"sm\">center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\">top center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"start\">top start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"top\" alignment=\"end\">top end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"start\">right start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\">right center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"right\" alignment=\"end\">right end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"start\">bottom start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\">bottom center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"bottom\" alignment=\"end\">bottom end</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"start\">left start</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\">left center</nve-dialog>\n    <nve-dialog size=\"sm\" position=\"left\" alignment=\"end\">left end</nve-dialog>\n  </template>\n</dialog-test-shadow-root>\n",
       "summary": "Dialog functionality within shadow DOM, with proper dialog behavior in encapsulated component environments and custom elements.",
       "description": "",
       "composition": false,
@@ -177,7 +177,7 @@
     {
       "id": "dialog-inert-modal",
       "name": "InertModal",
-      "template": "<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n<button popovertarget=\"popover\">btn</button><br />\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n",
+      "template": "<style>\n  body {\n    display: block !important;\n    padding: 24px;\n  }\n</style>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <nve-dialog id=\"popover\" modal>\n      <nve-dialog-header>\n        <h3 nve-text=\"heading semibold\">title</h3>\n      </nve-dialog-header>\n      <button popovertarget=\"dropdown\">button</button>\n      <nve-dropdown id=\"dropdown\">\n        dropdown content\n        <button>btn</button>\n      </nve-dropdown>\n      <p nve-text=\"body\">some text content in a closable dialog</p>\n      <button>btn</button>\n      <button>btn</button>\n    </nve-dialog>\n  </div>\n</div>\n\n<button popovertarget=\"popover\">btn</button><br />\n\n<button popovertarget=\"popover\">btn</button>\n<div>\n  <button popovertarget=\"popover\">btn</button>\n  <div>\n    <button popovertarget=\"popover\">btn</button>\n    <div>\n      <button popovertarget=\"popover\">btn</button>\n    </div>\n  </div>\n</div>\n",
       "summary": "Modal dialog with inert behavior, including proper focus management and accessibility compliance for modal overlays and user interaction.",
       "description": "",
       "composition": false,
@@ -188,7 +188,7 @@
     {
       "id": "dialog-container-styles",
       "name": "ContainerStyles",
-      "template": "<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
+      "template": "<nve-dialog id=\"slots-dialog\" closable popover=\"manual\" position=\"top\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">default</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">default dialog with header and footer components</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n\n<nve-dialog id=\"content-dialog\" closable popover=\"manual\" position=\"right\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-dialog\" closable style=\"--padding: 0\" position=\"bottom\">\n  <h3 nve-text=\"heading semibold\">title</h3>\n  <p nve-text=\"body\">dialog with only content and no header or footer components and --padding set to 0</p>\n  <nve-button>button</nve-button>\n</nve-dialog>\n\n<nve-dialog id=\"custom-slots\" closable style=\"--padding: 48px\" position=\"left\">\n  <nve-dialog-header>\n    <h3 nve-text=\"heading semibold\">title</h3>\n  </nve-dialog-header>\n  <p nve-text=\"body\">dialog with header and footer components with --padding set to 48px</p>\n  <nve-dialog-footer>\n    <nve-button>button</nve-button>\n  </nve-dialog-footer>\n</nve-dialog>\n",
       "summary": "Dialog with different container styles, including custom padding and layout options.",
       "description": "",
       "composition": false,
@@ -210,7 +210,7 @@
     {
       "id": "dialog-legacy-dom-creation",
       "name": "LegacyDOMCreation",
-      "template": "<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import \"@nvidia-elements/core/dialog/define.js\";\n  import \"@nvidia-elements/core/button/define.js\";\n  document.querySelector(\"#dialog-btn\").addEventListener(\"click\", () => {\n    const dialog = document.createElement(\"nve-dialog\");\n    dialog.id = \"dialog-dom-creation\";\n    dialog.modal = true;\n    dialog.closable = true;\n\n    dialog.addEventListener(\n      \"close\",\n      () => {\n        document.body.removeChild(dialog);\n      },\n      { once: true },\n    );\n    document.body.appendChild(dialog);\n  });\n</script>\n",
+      "template": "<nve-button id=\"dialog-btn\">button</nve-button>\n<script type=\"module\">\n  import \"@nvidia-elements/core/dialog/define.js\";\n  import \"@nvidia-elements/core/button/define.js\";\n\n  document.querySelector(\"#dialog-btn\").addEventListener(\"click\", () => {\n    const dialog = document.createElement(\"nve-dialog\");\n    dialog.id = \"dialog-dom-creation\";\n    dialog.modal = true;\n    dialog.closable = true;\n\n    dialog.addEventListener(\n      \"close\",\n      () => {\n        document.body.removeChild(dialog);\n      },\n      { once: true },\n    );\n\n    document.body.appendChild(dialog);\n  });\n</script>\n",
       "summary": "Legacy DOM Creation",
       "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.11.2"
+			version: "2.12.1"
 		};
 	}
 	static {

package/dist/divider/divider2.js

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

package/dist/dot/dot2.js

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

package/dist/drawer/drawer-content2.js

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

package/dist/drawer/drawer-footer2.js

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

package/dist/drawer/drawer-header2.js

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

package/dist/drawer/drawer.examples.json

@@ -80,7 +80,7 @@
     {
       "id": "drawer-position",
       "name": "Position",
-      "template": "<div nve-layout=\"row align:center gap:md\">\n  <nve-button popovertarget=\"popover-top\">open top</nve-button>\n  <nve-button popovertarget=\"popover-left\">open left</nve-button>\n  <nve-button popovertarget=\"popover-right\">open right</nve-button>\n  <nve-button popovertarget=\"popover-bottom\">open bottom</nve-button>\n</div>\n<nve-drawer id=\"popover-top\" closable modal position=\"top\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Top</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a top closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-left\" closable modal position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-right\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer id=\"popover-bottom\" closable modal position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
+      "template": "<div nve-layout=\"row align:center gap:md\">\n  <nve-button popovertarget=\"popover-top\">open top</nve-button>\n  <nve-button popovertarget=\"popover-left\">open left</nve-button>\n  <nve-button popovertarget=\"popover-right\">open right</nve-button>\n  <nve-button popovertarget=\"popover-bottom\">open bottom</nve-button>\n</div>\n\n<nve-drawer id=\"popover-top\" closable modal position=\"top\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Top</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a top closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer id=\"popover-left\" closable modal position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer id=\"popover-right\" closable modal position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer id=\"popover-bottom\" closable modal position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\" style=\"height: 200px\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n",
       "summary": "Drawer positioning from all four screen edges. Use position based on content type and user workflow: right for details/settings, left for navigation, top/bottom for notifications or quick actions that span the width.",
       "description": "",
       "composition": false,
@@ -91,7 +91,7 @@
     {
       "id": "drawer-legacy-position",
       "name": "LegacyPosition",
-      "template": "<div nve-layout=\"row align:center gap:md\" style=\"height: 95vh\">\n  <nve-button class=\"drawer-btn-left\">open left</nve-button>\n  <nve-button class=\"drawer-btn-right\">open right</nve-button>\n  <nve-button class=\"drawer-btn-bottom\">open bottom</nve-button>\n</div>\n<nve-drawer closable modal hidden position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<nve-drawer closable modal hidden position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const leftDrawer = document.querySelector('nve-drawer[position=\"left\"]');\n  document.querySelector(\".drawer-btn-left\").addEventListener(\"click\", () => {\n    leftDrawer.position = \"left\";\n    leftDrawer.hidden = false;\n  });\n  const rightDrawer = document.querySelector('nve-drawer[position=\"right\"]');\n  document.querySelector(\".drawer-btn-right\").addEventListener(\"click\", () => {\n    rightDrawer.position = \"right\";\n    rightDrawer.hidden = false;\n  });\n  const bottomDrawer = document.querySelector('nve-drawer[position=\"bottom\"]');\n  document.querySelector(\".drawer-btn-bottom\").addEventListener(\"click\", () => {\n    bottomDrawer.position = \"bottom\";\n    bottomDrawer.hidden = false;\n  });\n  leftDrawer.addEventListener(\"close\", () => (leftDrawer.hidden = true));\n  rightDrawer.addEventListener(\"close\", () => (rightDrawer.hidden = true));\n  bottomDrawer.addEventListener(\"close\", () => (bottomDrawer.hidden = true));\n</script>\n",
+      "template": "<div nve-layout=\"row align:center gap:md\" style=\"height: 95vh\">\n  <nve-button class=\"drawer-btn-left\">open left</nve-button>\n  <nve-button class=\"drawer-btn-right\">open right</nve-button>\n  <nve-button class=\"drawer-btn-bottom\">open bottom</nve-button>\n</div>\n\n<nve-drawer closable modal hidden position=\"left\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Left</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">drawer content</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">drawer footer</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer closable modal hidden position=\"right\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Right</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a right closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n\n<nve-drawer closable modal hidden position=\"bottom\">\n  <nve-drawer-header>\n    <h3 nve-text=\"heading\">Drawer Header Bottom</h3>\n  </nve-drawer-header>\n  <nve-drawer-content>\n    <p nve-text=\"body\">some text content in a bottom closable drawer</p>\n  </nve-drawer-content>\n  <nve-drawer-footer>\n    <p nve-text=\"body\">some text footer content</p>\n  </nve-drawer-footer>\n</nve-drawer>\n<script type=\"module\">\n  const leftDrawer = document.querySelector('nve-drawer[position=\"left\"]');\n  document.querySelector(\".drawer-btn-left\").addEventListener(\"click\", () => {\n    leftDrawer.position = \"left\";\n    leftDrawer.hidden = false;\n  });\n\n  const rightDrawer = document.querySelector('nve-drawer[position=\"right\"]');\n  document.querySelector(\".drawer-btn-right\").addEventListener(\"click\", () => {\n    rightDrawer.position = \"right\";\n    rightDrawer.hidden = false;\n  });\n\n  const bottomDrawer = document.querySelector('nve-drawer[position=\"bottom\"]');\n  document.querySelector(\".drawer-btn-bottom\").addEventListener(\"click\", () => {\n    bottomDrawer.position = \"bottom\";\n    bottomDrawer.hidden = false;\n  });\n\n  leftDrawer.addEventListener(\"close\", () => (leftDrawer.hidden = true));\n  rightDrawer.addEventListener(\"close\", () => (rightDrawer.hidden = true));\n  bottomDrawer.addEventListener(\"close\", () => (bottomDrawer.hidden = true));\n</script>\n",
       "summary": "Legacy drawer positioning with manual visibility management. Uses an older pattern with programmatic position control and event handling for backward compatibility.",
       "description": "",
       "composition": false,
@@ -102,7 +102,7 @@
     {
       "id": "drawer-inline",
       "name": "Inline",
-      "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button popovertarget=\"drawer\">inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer id=\"drawer\" closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
+      "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button popovertarget=\"drawer\">inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n\n  <nve-drawer id=\"drawer\" closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
       "summary": "Inline drawer constrained within a parent container rather than full viewport. Perfect for detail panels within cards or sections, maintaining context without overlaying the entire application.",
       "description": "",
       "composition": true,
@@ -113,7 +113,7 @@
     {
       "id": "drawer-inline-visible",
       "name": "InlineVisible",
-      "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content> open inline drawer </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer id=\"drawer\" inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
+      "template": "<div nve-layout=\"row align:horizontal-stretch\">\n  <div nve-layout=\"column gap:md align:stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content> open inline drawer </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n\n  <nve-drawer id=\"drawer\" inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n",
       "summary": "Inline drawer in persistent open state for always-visible side panels. Use for navigation, filters, or contextual information that should remain accessible while users interact with main content.",
       "description": "",
       "composition": false,
@@ -124,7 +124,7 @@
     {
       "id": "drawer-legacy-inline",
       "name": "LegacyInline",
-      "template": "<div nve-layout=\"row align:stretch\">\n  <div nve-layout=\"column gap:md align:horizontal-stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button>open inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n  <nve-drawer hidden closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  const open = document.querySelector(\"nve-button\");\n  open.addEventListener(\"click\", () => (drawer.hidden = false));\n  drawer.addEventListener(\"close\", () => (drawer.hidden = true));\n</script>\n",
+      "template": "<div nve-layout=\"row align:stretch\">\n  <div nve-layout=\"column gap:md align:horizontal-stretch\">\n    <nve-card style=\"height: 200px\">\n      <nve-card-content>\n        <nve-button>open inline drawer</nve-button>\n      </nve-card-content>\n    </nve-card>\n    <nve-card style=\"height: 200px\"></nve-card>\n  </div>\n\n  <nve-drawer hidden closable modal inline position=\"right\">\n    <nve-drawer-header>\n      <h3 nve-text=\"heading semibold sm\">Drawer Header</h3>\n    </nve-drawer-header>\n    <nve-drawer-content>\n      <p nve-text=\"body\">drawer content</p>\n    </nve-drawer-content>\n    <nve-drawer-footer>\n      <p nve-text=\"body\">drawer footer</p>\n    </nve-drawer-footer>\n  </nve-drawer>\n</div>\n<script type=\"module\">\n  const drawer = document.querySelector(\"nve-drawer\");\n  const open = document.querySelector(\"nve-button\");\n  open.addEventListener(\"click\", () => (drawer.hidden = false));\n  drawer.addEventListener(\"close\", () => (drawer.hidden = true));\n</script>\n",
       "summary": "Legacy inline drawer pattern with manual visibility control. Uses an older implementation for inline drawer management; prefer the modern popovertarget API for new implementations.",
       "description": "",
       "composition": true,

package/dist/drawer/drawer2.js

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

package/dist/dropdown/dropdown-footer2.js

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

package/dist/dropdown/dropdown-header2.js

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

package/dist/dropdown/dropdown.examples.json

@@ -89,7 +89,7 @@
     {
       "id": "dropdown-alignment",
       "name": "Alignment",
-      "template": "<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px\"></nve-card>\n</div>\n",
+      "template": "<div nve-theme nve-layout=\"row align:center\">\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"start\">top start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"center\">top center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"top\" alignment=\"end\">top end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"start\">right start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"center\">right center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"right\" alignment=\"end\">right end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"start\">bottom start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"center\">bottom center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"bottom\" alignment=\"end\">bottom end</nve-dropdown>\n\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"start\">left start</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"center\">left center</nve-dropdown>\n  <nve-dropdown open anchor=\"card\" position=\"left\" alignment=\"end\">left end</nve-dropdown>\n\n  <nve-card id=\"card\" style=\"width: 450px; height: 300px; margin-top: 50px\"></nve-card>\n</div>\n",
       "summary": "Dropdown alignment, with the alignment attribute controlling horizontal placement relative to the trigger.",
       "description": "",
       "composition": false,
@@ -134,7 +134,7 @@
     {
       "id": "dropdown-hint",
       "name": "Hint",
-      "template": "<nve-dropdown id=\"dropdown\"> dropdown content </nve-dropdown>\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
+      "template": "<nve-dropdown id=\"dropdown\"> dropdown content </nve-dropdown>\n\n<nve-tooltip id=\"tooltip\" hidden behavior-trigger trigger=\"btn\">dropdown content</nve-tooltip>\n\n<nve-icon-button id=\"btn\" popovertarget=\"dropdown\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
       "summary": "Dropdown hint, using the tooltip element to display a hint when the dropdown opens.",
       "description": "",
       "deprecated": true,
@@ -146,7 +146,7 @@
     {
       "id": "dropdown-position-fallback",
       "name": "PositionFallback",
-      "template": "<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\"> dropdown content </nve-dropdown>\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\"> dropdown content </nve-dropdown>\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
+      "template": "<style>\n  body {\n    align-items: start !important;\n    margin: 0;\n    padding: 0 !important;\n  }\n</style>\n\n<nve-dropdown anchor=\"btn\" position=\"bottom\" alignment=\"center\"> dropdown content </nve-dropdown>\n\n<nve-dropdown anchor=\"btn\" position=\"right\" alignment=\"center\"> dropdown content </nve-dropdown>\n\n<nve-icon-button id=\"btn\" icon-name=\"gear\" aria-label=\"settings\"></nve-icon-button>\n",
       "summary": "Dropdown position fallback, using the position and alignment attributes to reposition the dropdown when the trigger is not visible.",
       "description": "",
       "composition": false,

package/dist/dropdown/dropdown2.js

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

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

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

package/dist/dropzone/dropzone.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "dropzone-icon",
       "name": "Icon",
-      "template": "<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n",
+      "template": "<style>\n  nve-dropzone nve-icon {\n    --color: red;\n    background: var(--nve-sys-layer-canvas-accent-background);\n  }\n\n  nve-dropzone[highlighted] nve-icon,\n  nve-dropzone:hover nve-icon {\n    --color: var(--nve-sys-text-white-color);\n    background: var(--nve-sys-accent-primary-background);\n  }\n</style>\n<nve-dropzone name=\"files\">\n  <nve-icon slot=\"icon\" name=\"document\"></nve-icon>\n</nve-dropzone>\n",
       "summary": "Dropzone with custom icon slot showing visual feedback on hover and highlight states.",
       "description": "",
       "composition": false,
@@ -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\">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",
+      "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\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\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const formData = new FormData(e.target);\n    const files = formData.getAll(\"files\");\n\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.11.2",
+			version: "2.12.1",
 			validators: [l, c],
 			valueSchema: {
 				type: "array",

package/dist/file/file.examples.json

@@ -14,7 +14,7 @@
     {
       "id": "file-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file>\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n  <nve-file>\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file>\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file>\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file>\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n\n  <nve-file>\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
       "summary": "Vertical layout file inputs showing all validation states including disabled, success, and error. Use for stacked form layouts where labels appear above inputs.",
       "description": "",
       "composition": false,
@@ -25,7 +25,7 @@
     {
       "id": "file-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n  <nve-file layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg align:stretch\">\n  <nve-file layout=\"horizontal\">\n    <label>label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file layout=\"horizontal\">\n    <label>disabled</label>\n    <input type=\"file\" disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-file layout=\"horizontal\">\n    <label>success</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-file>\n\n  <nve-file layout=\"horizontal\">\n    <label>error</label>\n    <input type=\"file\" />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-file>\n</div>\n",
       "summary": "Horizontal layout file inputs with side-by-side labels. Ideal for compact forms or when aligning labels with other horizontal form controls.",
       "description": "",
       "composition": false,

package/dist/file/file2.js

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

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.11.2"
+			version: "2.12.1"
 		};
 	}
 	get #e() {

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

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

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

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

package/dist/format-truncate/format-truncate2.js

@@ -19,7 +19,7 @@ var d = class extends c {
 	static {
 		this.metadata = {
 			tag: "nve-format-truncate",
-			version: "2.11.2"
+			version: "2.12.1"
 		};
 	}
 	#e;

package/dist/forms/control/control.examples.json

@@ -27,7 +27,7 @@
     {
       "id": "forms-control-layout",
       "name": "Layout",
-      "template": "<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n    nve-control {\n      outline: 1px solid red;\n    }\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>\n",
+      "template": "<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n\n    nve-control {\n      outline: 1px solid red;\n    }\n\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>\n",
       "summary": "All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.",
       "description": "",
       "composition": false,
@@ -71,7 +71,7 @@
     {
       "id": "forms-control-group",
       "name": "Group",
-      "template": "<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n<br />\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n",
+      "template": "<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n\n<br />\n\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n",
       "summary": "Control group organizing related radio buttons and checkboxes with shared label and messaging.",
       "description": "",
       "composition": false,
@@ -115,7 +115,7 @@
     {
       "id": "forms-control-status",
       "name": "Status",
-      "template": "<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>\n",
       "summary": "Form controls showing all status states (default, disabled, success, error) for validation feedback.",
       "description": "",
       "composition": false,

package/dist/forms/control/control2.js

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

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

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

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

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