@nvidia-elements/core 2.12.0 → 2.12.2

package/dist/forms/forms.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "forms-kitchen-sink",
       "name": "KitchenSink",
-      "template": "<div style=\"display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-date layout=\"vertical-inline\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-datetime layout=\"vertical-inline\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n  <nve-month layout=\"vertical-inline\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n  <nve-week layout=\"vertical-inline\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n  <nve-time layout=\"vertical-inline\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n  <nve-color layout=\"vertical-inline\">\n    <label>color label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n  <nve-input layout=\"vertical-inline\">\n    <label>prefix/suffix label</label>\n    <nve-button container=\"flat\" readonly>https://</nve-button>\n    <input type=\"text\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"vertical-inline\">\n    <label>actions label</label>\n    <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n    <input type=\"text\" />\n    <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input-group layout=\"vertical-inline\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n  <nve-input-group layout=\"vertical-inline\">\n    <label>domain</label>\n    <nve-select style=\"width: 120px\">\n      <select aria-label=\"protocol\">\n        <option>https://</option>\n        <option>http://</option>\n      </select>\n    </nve-select>\n    <nve-input>\n      <input placeholder=\"example\" aria-label=\"host\" />\n      <nve-button container=\"flat\" readonly>.com</nve-button>\n    </nve-input>\n    <nve-control-message>Host ID: 123456</nve-control-message>\n  </nve-input-group>\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n  <nve-file>\n    <label>file label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n  <nve-search rounded>\n    <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n    <datalist>\n      <option value=\"search result 1\"></option>\n      <option value=\"search result 2\"></option>\n      <option value=\"search result 3\"></option>\n    </datalist>\n  </nve-search>\n  <nve-input layout=\"vertical-inline\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"vertical-inline\">\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n  <nve-input layout=\"vertical-inline\">\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>\n",
+      "template": "<div style=\"display: grid; gap: 36px 48px; grid-template-columns: 1fr 1fr; max-width: 1400px\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-date layout=\"vertical-inline\">\n    <label>date label</label>\n    <input type=\"date\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-datetime layout=\"vertical-inline\">\n    <label>datetime label</label>\n    <input type=\"datetime-local\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-datetime>\n\n  <nve-month layout=\"vertical-inline\">\n    <label>month label</label>\n    <input type=\"month\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-month>\n\n  <nve-week layout=\"vertical-inline\">\n    <label>week label</label>\n    <input type=\"week\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-week>\n\n  <nve-time layout=\"vertical-inline\">\n    <label>time label</label>\n    <input type=\"time\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-time>\n\n  <nve-color layout=\"vertical-inline\">\n    <label>color label</label>\n    <input type=\"color\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-color>\n\n  <nve-input layout=\"vertical-inline\">\n    <label>prefix/suffix label</label>\n    <nve-button container=\"flat\" readonly>https://</nve-button>\n    <input type=\"text\" />\n    <nve-button container=\"flat\" readonly>.com</nve-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"vertical-inline\">\n    <label>actions label</label>\n    <nve-icon-button icon-name=\"search\" container=\"flat\" readonly></nve-icon-button>\n    <input type=\"text\" />\n    <nve-icon-button icon-name=\"cancel\" container=\"flat\" aria-label=\"clear\"></nve-icon-button>\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input-group layout=\"vertical-inline\">\n    <label>date range</label>\n    <nve-date>\n      <input type=\"date\" aria-label=\"start date\" value=\"2018-07-22\" />\n    </nve-date>\n    <nve-date>\n      <input type=\"date\" aria-label=\"end date\" value=\"2022-07-22\" />\n    </nve-date>\n    <nve-control-message>message</nve-control-message>\n  </nve-input-group>\n\n  <nve-input-group layout=\"vertical-inline\">\n    <label>domain</label>\n    <nve-select style=\"width: 120px\">\n      <select aria-label=\"protocol\">\n        <option>https://</option>\n        <option>http://</option>\n      </select>\n    </nve-select>\n    <nve-input>\n      <input placeholder=\"example\" aria-label=\"host\" />\n      <nve-button container=\"flat\" readonly=\"\">.com</nve-button>\n    </nve-input>\n    <nve-control-message>Host ID: 123456</nve-control-message>\n  </nve-input-group>\n\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n\n  <nve-file>\n    <label>file label</label>\n    <input type=\"file\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-file>\n\n  <nve-search rounded>\n    <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n    <datalist>\n      <option value=\"search result 1\"></option>\n      <option value=\"search result 2\"></option>\n      <option value=\"search result 3\"></option>\n    </datalist>\n  </nve-search>\n\n  <nve-input layout=\"vertical-inline\">\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"vertical-inline\">\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-input>\n\n  <nve-input layout=\"vertical-inline\">\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-input>\n</div>\n",
       "summary": "Comprehensive showcase of all form controls in a grid layout, including input types, states, and advanced patterns use for a complete form design reference.",
       "description": "",
       "composition": true,
@@ -16,7 +16,7 @@
     {
       "id": "forms-vertical",
       "name": "Vertical",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-search>\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-password>\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-select>\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-range>\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-checkbox-group>\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-radio-group>\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-switch-group>\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-select>\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-textarea>\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input>\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search>\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password>\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select>\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range>\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group>\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group>\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group>\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select>\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea>\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.",
       "description": "",
       "composition": true,
@@ -25,7 +25,7 @@
     {
       "id": "forms-vertical-inline",
       "name": "VerticalInline",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"vertical-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"vertical-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"vertical-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"vertical-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"vertical-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"vertical-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"vertical-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"vertical-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"vertical-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.",
       "description": "",
       "composition": true,
@@ -34,7 +34,7 @@
     {
       "id": "forms-horizontal",
       "name": "Horizontal",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-search layout=\"horizontal\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-password layout=\"horizontal\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-range layout=\"horizontal\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-radio-group layout=\"horizontal\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-switch-group layout=\"horizontal\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-select layout=\"horizontal\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-textarea layout=\"horizontal\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.",
       "description": "",
       "composition": true,
@@ -43,7 +43,7 @@
     {
       "id": "forms-horizontal-inline",
       "name": "HorizontalInline",
-      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n  <nve-password layout=\"horizontal-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n  <nve-select layout=\"horizontal-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-range layout=\"horizontal-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n  <nve-select layout=\"horizontal-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
+      "template": "<div nve-layout=\"column gap:lg full\">\n  <nve-input layout=\"horizontal-inline\">\n    <label>text label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-search>\n\n  <nve-password layout=\"horizontal-inline\">\n    <label>password label</label>\n    <input type=\"password\" value=\"123456\" autocomplete=\"off\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-password>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 2</option>\n      <option value=\"3\">Option 3</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-range layout=\"horizontal-inline\">\n    <label>range label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox group label</label>\n    <nve-checkbox>\n      <label>checkbox 1</label>\n      <input type=\"checkbox\" checked />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 2</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n\n    <nve-checkbox>\n      <label>checkbox 3</label>\n      <input type=\"checkbox\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n\n  <nve-radio-group layout=\"horizontal-inline\">\n    <label>radio group label</label>\n    <nve-radio>\n      <label>radio 1</label>\n      <input type=\"radio\" checked />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 2</label>\n      <input type=\"radio\" />\n    </nve-radio>\n\n    <nve-radio>\n      <label>radio 3</label>\n      <input type=\"radio\" />\n    </nve-radio>\n    <nve-control-message>message</nve-control-message>\n  </nve-radio-group>\n\n  <nve-switch-group layout=\"horizontal-inline\">\n    <label>switch group label</label>\n    <nve-switch>\n      <label>switch 1</label>\n      <input type=\"checkbox\" />\n    </nve-switch>\n\n    <nve-switch>\n      <label>switch 2</label>\n      <input type=\"checkbox\" checked />\n    </nve-switch>\n    <nve-control-message>message</nve-control-message>\n  </nve-switch-group>\n\n  <nve-select layout=\"horizontal-inline\">\n    <label>select multiple label</label>\n    <select multiple>\n      <option value=\"1\">Option 1</option>\n      <option selected value=\"2\">Option 2</option>\n      <option selected value=\"3\">Option 3</option>\n      <option selected value=\"3\">Option 3</option>\n      <option value=\"4\">Option 4</option>\n      <option value=\"5\">Option 5</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>textarea label</label>\n    <textarea></textarea>\n    <nve-control-message>message</nve-control-message>\n  </nve-textarea>\n</div>\n",
       "summary": "Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.",
       "description": "",
       "composition": true,
@@ -52,7 +52,7 @@
     {
       "id": "forms-fit-text",
       "name": "FitText",
-      "template": "<section nve-layout=\"column gap:md full\">\n  <nve-date fit-text>\n    <label>date</label>\n    <input type=\"date\" value=\"2017-06-01\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n  <nve-input fit-text>\n    <label>label</label>\n    <input value=\"123456789012345678901234567890\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n  <nve-select fit-text>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</section>\n",
+      "template": "<section nve-layout=\"column gap:md full\">\n  <nve-date fit-text>\n    <label>date</label>\n    <input type=\"date\" value=\"2017-06-01\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-date>\n\n  <nve-input fit-text>\n    <label>label</label>\n    <input value=\"123456789012345678901234567890\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-input>\n\n  <nve-select fit-text>\n    <label>label</label>\n    <select>\n      <option value=\"1\">Option 1</option>\n      <option value=\"2\">Option 1234</option>\n      <option value=\"3\">Option 1234567809</option>\n    </select>\n    <nve-control-message>message</nve-control-message>\n  </nve-select>\n</section>\n",
       "summary": "Form controls that automatically adjust their width to fit content, optimizing space usage for dynamic or variable-length inputs.",
       "description": "",
       "composition": true,
@@ -74,7 +74,7 @@
     {
       "id": "forms-prominence-muted",
       "name": "ProminenceMuted",
-      "template": "<div nve-layout=\"row gap:lg\">\n  <div nve-layout=\"column gap:lg pad:lg\">\n    <nve-radio-group prominence=\"muted\">\n      <label>label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n    </nve-radio-group>\n    <nve-checkbox-group prominence=\"muted\">\n      <label>label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n    </nve-checkbox-group>\n    <nve-switch-group prominence=\"muted\">\n      <label>label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 3</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n    </nve-switch-group>\n    <nve-range prominence=\"muted\">\n      <label>label</label>\n      <input type=\"range\" />\n    </nve-range>\n  </div>\n  <nve-card>\n    <nve-card-content>\n      <div nve-layout=\"column gap:lg pad:lg\">\n        <nve-radio-group prominence=\"muted\">\n          <label>label</label>\n          <nve-radio>\n            <label>radio 1</label>\n            <input type=\"radio\" checked />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 2</label>\n            <input type=\"radio\" />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 3</label>\n            <input type=\"radio\" />\n          </nve-radio>\n        </nve-radio-group>\n        <nve-checkbox-group prominence=\"muted\">\n          <label>label</label>\n          <nve-checkbox>\n            <label>checkbox 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 2</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 3</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n        </nve-checkbox-group>\n        <nve-switch-group prominence=\"muted\">\n          <label>label</label>\n          <nve-switch>\n            <label>switch 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 2</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 3</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n        </nve-switch-group>\n        <nve-range prominence=\"muted\">\n          <label>label</label>\n          <input type=\"range\" />\n        </nve-range>\n      </div>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
+      "template": "<div nve-layout=\"row gap:lg\">\n  <div nve-layout=\"column gap:lg pad:lg\">\n    <nve-radio-group prominence=\"muted\">\n      <label>label</label>\n      <nve-radio>\n        <label>radio 1</label>\n        <input type=\"radio\" checked />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 2</label>\n        <input type=\"radio\" />\n      </nve-radio>\n      <nve-radio>\n        <label>radio 3</label>\n        <input type=\"radio\" />\n      </nve-radio>\n    </nve-radio-group>\n\n    <nve-checkbox-group prominence=\"muted\">\n      <label>label</label>\n      <nve-checkbox>\n        <label>checkbox 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 2</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n      <nve-checkbox>\n        <label>checkbox 3</label>\n        <input type=\"checkbox\" />\n      </nve-checkbox>\n    </nve-checkbox-group>\n\n    <nve-switch-group prominence=\"muted\">\n      <label>label</label>\n      <nve-switch>\n        <label>switch 1</label>\n        <input type=\"checkbox\" checked />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 2</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n      <nve-switch>\n        <label>switch 3</label>\n        <input type=\"checkbox\" />\n      </nve-switch>\n    </nve-switch-group>\n\n    <nve-range prominence=\"muted\">\n      <label>label</label>\n      <input type=\"range\" />\n    </nve-range>\n  </div>\n  <nve-card>\n    <nve-card-content>\n      <div nve-layout=\"column gap:lg pad:lg\">\n        <nve-radio-group prominence=\"muted\">\n          <label>label</label>\n          <nve-radio>\n            <label>radio 1</label>\n            <input type=\"radio\" checked />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 2</label>\n            <input type=\"radio\" />\n          </nve-radio>\n          <nve-radio>\n            <label>radio 3</label>\n            <input type=\"radio\" />\n          </nve-radio>\n        </nve-radio-group>\n\n        <nve-checkbox-group prominence=\"muted\">\n          <label>label</label>\n          <nve-checkbox>\n            <label>checkbox 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 2</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n          <nve-checkbox>\n            <label>checkbox 3</label>\n            <input type=\"checkbox\" />\n          </nve-checkbox>\n        </nve-checkbox-group>\n\n        <nve-switch-group prominence=\"muted\">\n          <label>label</label>\n          <nve-switch>\n            <label>switch 1</label>\n            <input type=\"checkbox\" checked />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 2</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n          <nve-switch>\n            <label>switch 3</label>\n            <input type=\"checkbox\" />\n          </nve-switch>\n        </nve-switch-group>\n\n        <nve-range prominence=\"muted\">\n          <label>label</label>\n          <input type=\"range\" />\n        </nve-range>\n      </div>\n    </nve-card-content>\n  </nve-card>\n</div>\n",
       "summary": "Use the prominence muted state to lower visual weight of controls in forms.",
       "description": "",
       "composition": true,

package/dist/forms/validation.examples.json

@@ -5,7 +5,7 @@
     {
       "id": "forms-validation-login-form",
       "name": "LoginForm",
-      "template": "<form id=\"validation\" nve-layout=\"column gap:md\" style=\"max-width: 350px\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n  <nve-button disabled>login to account</nve-button>\n  <nve-alert-group hidden status=\"success\">\n    <nve-alert></nve-alert>\n  </nve-alert-group>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form#validation\");\n  const alertGroup = document.querySelector(\"#validation nve-alert-group\");\n  const alert = document.querySelector(\"#validation nve-alert\");\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const { email, password } = Object.fromEntries(new FormData(form));\n    alert.innerText = email + \" / \" + password;\n    alertGroup.hidden = false;\n  });\n  form.addEventListener(\"input\", (e) => {\n    form.querySelector(\"nve-button\").disabled = form.matches(\":invalid\");\n  });\n</script>\n",
+      "template": "<form id=\"validation\" nve-layout=\"column gap:md\" style=\"max-width: 350px\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"tooShort\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n\n  <nve-button disabled>login to account</nve-button>\n\n  <nve-alert-group hidden status=\"success\">\n    <nve-alert></nve-alert>\n  </nve-alert-group>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form#validation\");\n  const alertGroup = document.querySelector(\"#validation nve-alert-group\");\n  const alert = document.querySelector(\"#validation nve-alert\");\n\n  form.addEventListener(\"submit\", (e) => {\n    e.preventDefault();\n    const { email, password } = Object.fromEntries(new FormData(form));\n    alert.innerText = email + \" / \" + password;\n    alertGroup.hidden = false;\n  });\n\n  form.addEventListener(\"input\", (e) => {\n    form.querySelector(\"nve-button\").disabled = form.matches(\":invalid\");\n  });\n</script>\n",
       "summary": "Use real-time validation with contextual error messages to disable submit until form is valid.",
       "description": "",
       "composition": true,
@@ -16,7 +16,7 @@
     {
       "id": "forms-validation-error-group",
       "name": "ErrorGroup",
-      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\" novalidate>\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">invalid email</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n  <nve-button>login to account</nve-button>\n  <nve-alert-group status=\"danger\">\n    <nve-alert>invalid email</nve-alert>\n    <nve-alert>password required</nve-alert>\n  </nve-alert-group>\n</form>\n",
+      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\" novalidate>\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">invalid email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message status=\"error\">minimum length is 6 characters</nve-control-message>\n  </nve-password>\n\n  <nve-button>login to account</nve-button>\n\n  <nve-alert-group status=\"danger\">\n    <nve-alert>invalid email</nve-alert>\n    <nve-alert>password required</nve-alert>\n  </nve-alert-group>\n</form>\n",
       "summary": "Login form with grouped error display showing all validation issues together after submission attempt.",
       "description": "",
       "composition": true,
@@ -25,7 +25,7 @@
     {
       "id": "forms-validation-success-group",
       "name": "SuccessGroup",
-      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\" novalidate>\n  <nve-input>\n    <label>username</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"success\">username available</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n  </nve-password>\n  <nve-button>login to account</nve-button>\n  <nve-alert-group status=\"success\">\n    <nve-alert closable>account created</nve-alert>\n  </nve-alert-group>\n</form>\n",
+      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\" novalidate>\n  <nve-input>\n    <label>username</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" />\n    <nve-control-message status=\"success\">username available</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n  </nve-password>\n\n  <nve-button>login to account</nve-button>\n\n  <nve-alert-group status=\"success\">\n    <nve-alert closable>account created</nve-alert>\n  </nve-alert-group>\n</form>\n",
       "summary": "Login form example of success feedback with positive confirmation messages for valid input and successful form submission.",
       "description": "",
       "composition": true,
@@ -34,7 +34,7 @@
     {
       "id": "forms-validation-reset-form",
       "name": "ResetForm",
-      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" value=\"test@nvidia.com\" />\n    <nve-icon-button aria-label=\"reset\" icon-name=\"cancel\" container=\"flat\" type=\"button\"></nve-icon-button>\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n  </nve-password>\n  <nve-button type=\"button\">reset form</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const input = form.querySelector(\"nve-input\");\n  const resetInput = form.querySelector('nve-icon-button[icon-name=\"cancel\"]');\n  const resetForm = form.querySelector(\"nve-button\");\n  resetInput.addEventListener(\"click\", (e) => input.reset());\n  resetForm.addEventListener(\"click\", (e) => form.reset());\n  form.addEventListener(\"reset\", (e) => console.log(e));\n</script>\n",
+      "template": "<form nve-layout=\"column gap:md\" style=\"max-width: 350px\">\n  <nve-input>\n    <label>email</label>\n    <input type=\"email\" name=\"email\" required pattern=\".+@nvidia.com\" autocomplete=\"off\" value=\"test@nvidia.com\" />\n    <nve-icon-button aria-label=\"reset\" icon-name=\"cancel\" container=\"flat\" type=\"button\"></nve-icon-button>\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n    <nve-control-message error=\"patternMismatch\">invalid NVIDIA email</nve-control-message>\n  </nve-input>\n\n  <nve-password>\n    <label>password</label>\n    <input type=\"password\" name=\"password\" required minlength=\"6\" autocomplete=\"off\" />\n    <nve-control-message error=\"valueMissing\">required</nve-control-message>\n  </nve-password>\n\n  <nve-button type=\"button\">reset form</nve-button>\n</form>\n<script type=\"module\">\n  const form = document.querySelector(\"form\");\n  const input = form.querySelector(\"nve-input\");\n  const resetInput = form.querySelector('nve-icon-button[icon-name=\"cancel\"]');\n  const resetForm = form.querySelector(\"nve-button\");\n\n  resetInput.addEventListener(\"click\", (e) => input.reset());\n  resetForm.addEventListener(\"click\", (e) => form.reset());\n  form.addEventListener(\"reset\", (e) => console.log(e));\n</script>\n",
       "summary": "Form reset functionality allowing users to clear individual fields or reset the entire form.",
       "description": "",
       "composition": true,

package/dist/gauge/gauge.examples.json

@@ -91,7 +91,7 @@
     {
       "id": "gauge-gradient",
       "name": "Gradient",
-      "template": "<style>\n  nve-gauge#gauge-temperature-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n    );\n  }\n  nve-gauge#gauge-mbps-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n    );\n  }\n</style>\n<div nve-layout=\"row gap:md\">\n  <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n    <span>82&deg;C</span>\n    <span nve-text=\"body sm muted\">TEMP</span>\n  </nve-gauge>\n  <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n    <span nve-text=\"body sm\">980Mbps</span>\n    <span nve-text=\"body sm muted\">Download</span>\n  </nve-gauge>\n</div>\n",
+      "template": "<style>\n  nve-gauge#gauge-temperature-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-success-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-danger-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-success-emphasis-color) 300deg 360deg\n    );\n  }\n\n  nve-gauge#gauge-mbps-example {\n    --background: conic-gradient(\n      from 225deg at 50% 50%,\n      var(--nve-sys-support-danger-emphasis-color) 0deg 18deg,\n      var(--nve-sys-support-warning-emphasis-color) 135deg,\n      var(--nve-sys-support-success-emphasis-color) 252deg 300deg,\n      var(--nve-sys-support-danger-emphasis-color) 300deg 360deg\n    );\n  }\n</style>\n\n<div nve-layout=\"row gap:md\">\n  <nve-gauge thumb=\"dot\" value=\"82\" id=\"gauge-temperature-example\" aria-label=\"Temperature\" aria-valuetext=\"82°C\">\n    <span>82&deg;C</span>\n    <span nve-text=\"body sm muted\">TEMP</span>\n  </nve-gauge>\n\n  <nve-gauge thumb=\"needle\" value=\"98\" id=\"gauge-mbps-example\" aria-label=\"Download\" aria-valuetext=\"980Mbps\">\n    <span nve-text=\"body sm\">980Mbps</span>\n    <span nve-text=\"body sm muted\">Download</span>\n  </nve-gauge>\n</div>\n",
       "summary": "Use gradient colors for gauges with scaled non-segmented values such as temperature and bandwidth.",
       "description": "",
       "composition": false,
@@ -135,7 +135,7 @@
     {
       "id": "gauge-multi-gauge",
       "name": "MultiGauge",
-      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96,\n  };\n  const gauges = {\n    battery: document.querySelector(\"#av-taxi-battery-gauge\"),\n    compute: document.querySelector(\"#av-taxi-compute-gauge\"),\n    perception: document.querySelector(\"#av-taxi-perception-gauge\"),\n  };\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute(\"aria-valuetext\", text);\n    gauge.querySelector(\"span\").textContent = text;\n  };\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n    setGauge(gauges.battery, battery, battery + \"%\", battery < 30 ? \"danger\" : battery < 50 ? \"warning\" : \"success\");\n    setGauge(gauges.compute, compute, compute + \"%\", compute >= 85 ? \"danger\" : compute >= 70 ? \"warning\" : \"success\");\n    setGauge(gauges.perception, perception, perception + \"%\", perception < 90 ? \"danger\" : perception < 94 ? \"warning\" : \"success\");\n  }, 1600);\n</script>\n",
+      "template": "<div nve-layout=\"row gap:sm\">\n  <nve-gauge id=\"av-taxi-battery-gauge\" status=\"success\" value=\"74\" aria-label=\"Battery\" aria-valuetext=\"74%\">\n    <span nve-text=\"grow\">74%</span>\n    <span nve-text=\"body sm muted\">BATTERY</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-perception-gauge\" status=\"success\" value=\"96\" aria-label=\"Perception\" aria-valuetext=\"96%\">\n    <span nve-text=\"grow\">96%</span>\n    <span nve-text=\"body sm muted\">PERCEPTION</span>\n  </nve-gauge>\n  <nve-gauge id=\"av-taxi-compute-gauge\" status=\"success\" value=\"62\" aria-label=\"GPU\" aria-valuetext=\"62%\">\n    <span nve-text=\"grow\">62%</span>\n    <span nve-text=\"body sm muted\">GPU</span>\n  </nve-gauge>\n</div>\n<script type=\"module\">\n  const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n  const telemetry = {\n    battery: 74,\n    compute: 62,\n    perception: 96,\n  };\n  const gauges = {\n    battery: document.querySelector(\"#av-taxi-battery-gauge\"),\n    compute: document.querySelector(\"#av-taxi-compute-gauge\"),\n    perception: document.querySelector(\"#av-taxi-perception-gauge\"),\n  };\n\n  const setGauge = (gauge, value, text, status) => {\n    gauge.value = Math.round(value);\n    gauge.status = status;\n    gauge.setAttribute(\"aria-valuetext\", text);\n    gauge.querySelector(\"span\").textContent = text;\n  };\n\n  setInterval(() => {\n    telemetry.battery = clamp(telemetry.battery - 0.08 + (Math.random() - 0.4) * 0.3, 46, 82);\n    telemetry.compute = clamp(telemetry.compute + (Math.random() - 0.48) * 7, 34, 91);\n    telemetry.perception = clamp(telemetry.perception + (Math.random() - 0.52) * 2.4, 88, 99);\n\n    const battery = Math.round(telemetry.battery);\n    const compute = Math.round(telemetry.compute);\n    const perception = Math.round(telemetry.perception);\n\n    setGauge(gauges.battery, battery, battery + \"%\", battery < 30 ? \"danger\" : battery < 50 ? \"warning\" : \"success\");\n    setGauge(gauges.compute, compute, compute + \"%\", compute >= 85 ? \"danger\" : compute >= 70 ? \"warning\" : \"success\");\n    setGauge(gauges.perception, perception, perception + \"%\", perception < 90 ? \"danger\" : perception < 94 ? \"warning\" : \"success\");\n  }, 1600);\n</script>\n",
       "summary": "Autonomous vehicle taxi gauges combine battery, perception, compute, and link status with realistic drift. Use for live dispatch views that need changing system health.",
       "description": "",
       "composition": false,

package/dist/gauge/gauge2.js

@@ -40,7 +40,7 @@ var l = {
 	static {
 		this.metadata = {
 			tag: "nve-gauge",
-			version: "2.12.0"
+			version: "2.12.2"
 		};
 	}
 	#e;

package/dist/grid/cell/cell2.js

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

package/dist/grid/column/column2.js

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

package/dist/grid/footer/footer2.js

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

package/dist/grid/grid.examples.json

@@ -126,7 +126,7 @@
     {
       "id": "grid-column-width",
       "name": "ColumnWidth",
-      "template": "<nve-grid style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"300px\">column 0</nve-grid-column> <nve-grid-column width=\"300px\">column 1</nve-grid-column> <nve-grid-column width=\"300px\">column 2</nve-grid-column>\n    <nve-grid-column width=\"300px\">column 3</nve-grid-column> <nve-grid-column width>column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell> <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell> <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell> <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell> <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell> <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell> <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell> <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell> <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell> <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell> <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell> <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell> <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell> <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell> <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell> <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell> <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell> <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell> <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell> <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell> <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>footer content</nve-grid-footer>\n</nve-grid>\n",
+      "template": "<nve-grid style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"300px\">column 0</nve-grid-column> <nve-grid-column width=\"300px\">column 1</nve-grid-column> <nve-grid-column width=\"300px\">column 2</nve-grid-column>\n    <nve-grid-column width=\"300px\">column 3</nve-grid-column> <nve-grid-column width=\"\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell> <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell> <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell> <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell> <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell> <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell> <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell> <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell> <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell> <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell> <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell> <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell> <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell> <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell> <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell> <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell> <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell> <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell> <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell> <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell> <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>footer content</nve-grid-footer>\n</nve-grid>\n",
       "summary": "Column width control for responsive grid layouts, enabling flexible content sizing and optimal space usage across different screen sizes.",
       "description": "",
       "composition": false,
@@ -146,7 +146,7 @@
     {
       "id": "grid-column-fixed",
       "name": "ColumnFixed",
-      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"200px\">column 0</nve-grid-column> <nve-grid-column position width=\"200px\">column 1</nve-grid-column> <nve-grid-column position width=\"200px\">column 2</nve-grid-column>\n    <nve-grid-column position width=\"200px\">column 3</nve-grid-column> <nve-grid-column position width=\"200px\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell> <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell> <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell> <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell> <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell> <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell> <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell> <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell> <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell> <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell> <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell> <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell> <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell> <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell> <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell> <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell> <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell> <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell> <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell> <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell> <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"200px\">column 0</nve-grid-column> <nve-grid-column position=\"\" width=\"200px\">column 1</nve-grid-column> <nve-grid-column position=\"\" width=\"200px\">column 2</nve-grid-column>\n    <nve-grid-column position=\"\" width=\"200px\">column 3</nve-grid-column> <nve-grid-column position=\"\" width=\"200px\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell> <nve-grid-cell>cell 0-2</nve-grid-cell> <nve-grid-cell>cell 0-3</nve-grid-cell> <nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell> <nve-grid-cell>cell 1-2</nve-grid-cell> <nve-grid-cell>cell 1-3</nve-grid-cell> <nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell> <nve-grid-cell>cell 2-2</nve-grid-cell> <nve-grid-cell>cell 2-3</nve-grid-cell> <nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell> <nve-grid-cell>cell 3-2</nve-grid-cell> <nve-grid-cell>cell 3-3</nve-grid-cell> <nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell> <nve-grid-cell>cell 4-2</nve-grid-cell> <nve-grid-cell>cell 4-3</nve-grid-cell> <nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell> <nve-grid-cell>cell 5-2</nve-grid-cell> <nve-grid-cell>cell 5-3</nve-grid-cell> <nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell> <nve-grid-cell>cell 6-2</nve-grid-cell> <nve-grid-cell>cell 6-3</nve-grid-cell> <nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell> <nve-grid-cell>cell 7-2</nve-grid-cell> <nve-grid-cell>cell 7-3</nve-grid-cell> <nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell> <nve-grid-cell>cell 8-2</nve-grid-cell> <nve-grid-cell>cell 8-3</nve-grid-cell> <nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell> <nve-grid-cell>cell 9-2</nve-grid-cell> <nve-grid-cell>cell 9-3</nve-grid-cell> <nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
       "summary": "Fix columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
       "description": "",
       "composition": false,
@@ -155,7 +155,7 @@
     {
       "id": "grid-column-multi-fixed",
       "name": "ColumnMultiFixed",
-      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"200px\">column 0</nve-grid-column><nve-grid-column position width=\"200px\">column 1</nve-grid-column><nve-grid-column position width=\"200px\">column 2</nve-grid-column\n    ><nve-grid-column position width=\"200px\">column 3</nve-grid-column><nve-grid-column position=\"fixed\" width=\"200px\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
+      "template": "<nve-grid style=\"height: 400px; max-width: 800px\">\n  <nve-grid-header>\n    <nve-grid-column position=\"fixed\" width=\"200px\">column 0</nve-grid-column><nve-grid-column position=\"\" width=\"200px\">column 1</nve-grid-column><nve-grid-column position=\"\" width=\"200px\">column 2</nve-grid-column\n    ><nve-grid-column position=\"\" width=\"200px\">column 3</nve-grid-column><nve-grid-column position=\"fixed\" width=\"200px\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n</nve-grid>\n",
       "summary": "Fix many columns to any given side, but keep fixed columns from spanning past the half way point of the grid.",
       "description": "",
       "composition": false,
@@ -173,7 +173,7 @@
     {
       "id": "grid-column-dynamic-fixed",
       "name": "ColumnDynamicFixed",
-      "template": "<nve-grid id=\"column-dynamic-fixed-grid\" style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"200px\" position=\"fixed\">column 0</nve-grid-column><nve-grid-column width=\"200px\" position>column 1</nve-grid-column><nve-grid-column width=\"200px\" position>column 2</nve-grid-column\n    ><nve-grid-column width=\"200px\" position>column 3</nve-grid-column><nve-grid-column width=\"200px\" position=\"fixed\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>\n    <nve-button container=\"flat\">add column</nve-button>\n  </nve-grid-footer>\n</nve-grid>\n<script type=\"module\">\n  const grid = document.querySelector(\"#column-dynamic-fixed-grid\");\n  const button = grid.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const columns = Array.from(grid.querySelectorAll(\"nve-grid-column\"));\n    columns.filter((_, i) => i !== 0).forEach((column) => (column.position = null));\n    // add new column\n    const newColumn = document.createElement(\"nve-grid-column\");\n    newColumn.position = \"fixed\";\n    newColumn.width = \"200px\";\n    newColumn.textContent = \"column \" + columns.length;\n    grid.querySelector(\"nve-grid-header\").appendChild(newColumn);\n    // add new cell to each row to the end\n    grid.querySelectorAll(\"nve-grid-row\").forEach((row, i) => {\n      const cell = document.createElement(\"nve-grid-cell\");\n      cell.textContent = \"cell \" + i + \"-\" + columns.length;\n      row.appendChild(cell);\n    });\n  });\n</script>\n",
+      "template": "<nve-grid id=\"column-dynamic-fixed-grid\" style=\"height: 400px\">\n  <nve-grid-header>\n    <nve-grid-column width=\"200px\" position=\"fixed\">column 0</nve-grid-column><nve-grid-column width=\"200px\" position=\"\">column 1</nve-grid-column><nve-grid-column width=\"200px\" position=\"\">column 2</nve-grid-column\n    ><nve-grid-column width=\"200px\" position=\"\">column 3</nve-grid-column><nve-grid-column width=\"200px\" position=\"fixed\">column 4</nve-grid-column>\n  </nve-grid-header>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 0-0</nve-grid-cell><nve-grid-cell>cell 0-1</nve-grid-cell><nve-grid-cell>cell 0-2</nve-grid-cell><nve-grid-cell>cell 0-3</nve-grid-cell><nve-grid-cell>cell 0-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 1-0</nve-grid-cell><nve-grid-cell>cell 1-1</nve-grid-cell><nve-grid-cell>cell 1-2</nve-grid-cell><nve-grid-cell>cell 1-3</nve-grid-cell><nve-grid-cell>cell 1-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 2-0</nve-grid-cell><nve-grid-cell>cell 2-1</nve-grid-cell><nve-grid-cell>cell 2-2</nve-grid-cell><nve-grid-cell>cell 2-3</nve-grid-cell><nve-grid-cell>cell 2-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 3-0</nve-grid-cell><nve-grid-cell>cell 3-1</nve-grid-cell><nve-grid-cell>cell 3-2</nve-grid-cell><nve-grid-cell>cell 3-3</nve-grid-cell><nve-grid-cell>cell 3-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 4-0</nve-grid-cell><nve-grid-cell>cell 4-1</nve-grid-cell><nve-grid-cell>cell 4-2</nve-grid-cell><nve-grid-cell>cell 4-3</nve-grid-cell><nve-grid-cell>cell 4-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 5-0</nve-grid-cell><nve-grid-cell>cell 5-1</nve-grid-cell><nve-grid-cell>cell 5-2</nve-grid-cell><nve-grid-cell>cell 5-3</nve-grid-cell><nve-grid-cell>cell 5-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 6-0</nve-grid-cell><nve-grid-cell>cell 6-1</nve-grid-cell><nve-grid-cell>cell 6-2</nve-grid-cell><nve-grid-cell>cell 6-3</nve-grid-cell><nve-grid-cell>cell 6-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 7-0</nve-grid-cell><nve-grid-cell>cell 7-1</nve-grid-cell><nve-grid-cell>cell 7-2</nve-grid-cell><nve-grid-cell>cell 7-3</nve-grid-cell><nve-grid-cell>cell 7-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 8-0</nve-grid-cell><nve-grid-cell>cell 8-1</nve-grid-cell><nve-grid-cell>cell 8-2</nve-grid-cell><nve-grid-cell>cell 8-3</nve-grid-cell><nve-grid-cell>cell 8-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-row>\n    <nve-grid-cell>cell 9-0</nve-grid-cell><nve-grid-cell>cell 9-1</nve-grid-cell><nve-grid-cell>cell 9-2</nve-grid-cell><nve-grid-cell>cell 9-3</nve-grid-cell><nve-grid-cell>cell 9-4</nve-grid-cell>\n  </nve-grid-row>\n\n  <nve-grid-footer>\n    <nve-button container=\"flat\">add column</nve-button>\n  </nve-grid-footer>\n</nve-grid>\n<script type=\"module\">\n  const grid = document.querySelector(\"#column-dynamic-fixed-grid\");\n  const button = grid.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const columns = Array.from(grid.querySelectorAll(\"nve-grid-column\"));\n    columns.filter((_, i) => i !== 0).forEach((column) => (column.position = null));\n\n    // add new column\n    const newColumn = document.createElement(\"nve-grid-column\");\n    newColumn.position = \"fixed\";\n    newColumn.width = \"200px\";\n    newColumn.textContent = \"column \" + columns.length;\n    grid.querySelector(\"nve-grid-header\").appendChild(newColumn);\n\n    // add new cell to each row to the end\n    grid.querySelectorAll(\"nve-grid-row\").forEach((row, i) => {\n      const cell = document.createElement(\"nve-grid-cell\");\n      cell.textContent = \"cell \" + i + \"-\" + columns.length;\n      row.appendChild(cell);\n    });\n  });\n</script>\n",
       "summary": "Dynamic column management with programmatic addition and positioning, for flexible grid configuration with evolving data requirements.",
       "description": "",
       "composition": false,
@@ -267,7 +267,7 @@
     {
       "id": "grid-performance",
       "name": "Performance",
-      "template": "<section id=\"grid-performance-demo\" nve-layout=\"column gap:md full\" style=\"height: 500px\">\n  <nve-button>show large grid</nve-button>\n  <p nve-text=\"body muted\">1000 rows, 4000 cells</p>\n</section>\n<script type=\"module\">\n  import \"@nvidia-elements/core/grid/define.js\";\n  const section = document.getElementById(\"grid-performance-demo\");\n  const button = section.querySelector(\"nve-button\");\n  button.addEventListener(\"click\", () => {\n    const existingGrid = section.querySelector(\"nve-grid\");\n    if (existingGrid) {\n      existingGrid.remove();\n    } else {\n      const grid = document.createElement(\"nve-grid\");\n      grid.style.setProperty(\"height\", \"400px\");\n      grid.style.setProperty(\"max-width\", \"1024px\");\n      const header = document.createElement(\"nve-grid-header\");\n      const columns = new Array(4).fill(\"\").map((_, i) => {\n        const column = document.createElement(\"nve-grid-column\");\n        column.setAttribute(\"width\", \"25%\");\n        column.textContent = \"Column \" + i;\n        return column;\n      });\n      const rows = new Array(1000).fill(\"\").map((_, i) => {\n        const row = document.createElement(\"nve-grid-row\");\n        new Array(4).fill(\"\").forEach((_, c) => {\n          const cell = document.createElement(\"nve-grid-cell\");\n          cell.textContent = \"Cell \" + i + \"-\" + c;\n          row.appendChild(cell);\n        });\n        return row;\n      });\n      header.append(...columns);\n      grid.appendChild(header);\n      grid.append(...rows);\n      section.appendChild(grid);\n    }\n  });\n</script>\n",
+      "template": "<section id=\"grid-performance-demo\" nve-layout=\"column gap:md full\" style=\"height: 500px\">\n  <nve-button>show large grid</nve-button>\n  <p nve-text=\"body muted\">1000 rows, 4000 cells</p>\n</section>\n<script type=\"module\">\n  import \"@nvidia-elements/core/grid/define.js\";\n  const section = document.getElementById(\"grid-performance-demo\");\n  const button = section.querySelector(\"nve-button\");\n\n  button.addEventListener(\"click\", () => {\n    const existingGrid = section.querySelector(\"nve-grid\");\n    if (existingGrid) {\n      existingGrid.remove();\n    } else {\n      const grid = document.createElement(\"nve-grid\");\n      grid.style.setProperty(\"height\", \"400px\");\n      grid.style.setProperty(\"max-width\", \"1024px\");\n\n      const header = document.createElement(\"nve-grid-header\");\n      const columns = new Array(4).fill(\"\").map((_, i) => {\n        const column = document.createElement(\"nve-grid-column\");\n        column.setAttribute(\"width\", \"25%\");\n        column.textContent = \"Column \" + i;\n        return column;\n      });\n\n      const rows = new Array(1000).fill(\"\").map((_, i) => {\n        const row = document.createElement(\"nve-grid-row\");\n        new Array(4).fill(\"\").forEach((_, c) => {\n          const cell = document.createElement(\"nve-grid-cell\");\n          cell.textContent = \"Cell \" + i + \"-\" + c;\n          row.appendChild(cell);\n        });\n        return row;\n      });\n\n      header.append(...columns);\n      grid.appendChild(header);\n      grid.append(...rows);\n      section.appendChild(grid);\n    }\n  });\n</script>\n",
       "summary": "Datagrid performance is heavily dependent on the content within the grid as well as the host environment.",
       "description": "When rendering large datasets, using the appropriate techniques to maintain good performance matters. - Use pagination or lazy loading to reduce initial render time - Use virtual scroll or batch rendering to improve render performance - Use fixed width columns to improve render performance and reduce layout shift - Avoid duplication of elements within cells, example reuse a single tooltip for all cells vs creating a new tooltip for each cell",
       "composition": false,
@@ -363,7 +363,7 @@
     {
       "id": "grid-panel-detail",
       "name": "PanelDetail",
-      "template": "<nve-page id=\"grid-panel-demo\">\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  </nve-page-header>\n  <section nve-layout=\"column gap:md pad:md full\">\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column> <nve-grid-column>column 2</nve-grid-column>\n        <nve-grid-column width=\"max-content\" aria-label=\"details\"></nve-grid-column>\n      </nve-grid-header>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell> <nve-grid-cell>cell 0-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"0\" aria-label=\"view 0\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row selected>\n        <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell> <nve-grid-cell>cell 1-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"1\" aria-label=\"view 1\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell> <nve-grid-cell>cell 2-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"2\" aria-label=\"view 2\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell> <nve-grid-cell>cell 3-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"3\" aria-label=\"view 3\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell> <nve-grid-cell>cell 4-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"4\" aria-label=\"view 4\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell> <nve-grid-cell>cell 5-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"5\" aria-label=\"view 5\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell> <nve-grid-cell>cell 6-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"6\" aria-label=\"view 6\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell> <nve-grid-cell>cell 7-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"7\" aria-label=\"view 7\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell> <nve-grid-cell>cell 8-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"8\" aria-label=\"view 8\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell> <nve-grid-cell>cell 9-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"9\" aria-label=\"view 9\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  </section>\n  <nve-page-panel slot=\"right\" size=\"sm\" expanded closable>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Row 2 Details</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Task</label>\n          <p nve-text=\"label sm\">Workflow</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Status</label>\n          <nve-badge status=\"success\">Complete</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Priority</label>\n          <nve-badge status=\"pending\">P1</nve-badge>\n        </div>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  const page = document.getElementById(\"grid-panel-demo\");\n  const grid = page.querySelector(\"nve-grid\");\n  const panel = page.querySelector(\"nve-page-panel\");\n  const rows = grid.querySelectorAll(\"nve-grid-row\");\n  const heading = page.querySelector(\"nve-page-panel-header h3\");\n  panel.addEventListener(\"close\", () => {\n    rows.forEach((row) => (row.selected = false));\n    panel.hidden = true;\n  });\n  grid.addEventListener(\"click\", (e) => {\n    if (e.target.localName === \"nve-icon-button\") {\n      const row = e.target.closest(\"nve-grid-row\");\n      rows.forEach((row) => (row.selected = false));\n      panel.hidden = false;\n      heading.textContent = \"Row \" + e.target.value + \" Details\";\n      row.selected = !panel.hidden;\n    }\n  });\n</script>\n",
+      "template": "<nve-page id=\"grid-panel-demo\">\n  <nve-page-header slot=\"header\">\n    <nve-logo slot=\"prefix\" size=\"sm\" color=\"brand-green\">NV</nve-logo>\n    <h2 nve-text=\"heading\" slot=\"prefix\">Infrastructure</h2>\n  </nve-page-header>\n  <section nve-layout=\"column gap:md pad:md full\">\n    <nve-grid>\n      <nve-grid-header>\n        <nve-grid-column>column 0</nve-grid-column> <nve-grid-column>column 1</nve-grid-column> <nve-grid-column>column 2</nve-grid-column>\n        <nve-grid-column width=\"max-content\" aria-label=\"details\"></nve-grid-column>\n      </nve-grid-header>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 0-0</nve-grid-cell> <nve-grid-cell>cell 0-1</nve-grid-cell> <nve-grid-cell>cell 0-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"0\" aria-label=\"view 0\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row selected>\n        <nve-grid-cell>cell 1-0</nve-grid-cell> <nve-grid-cell>cell 1-1</nve-grid-cell> <nve-grid-cell>cell 1-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"1\" aria-label=\"view 1\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 2-0</nve-grid-cell> <nve-grid-cell>cell 2-1</nve-grid-cell> <nve-grid-cell>cell 2-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"2\" aria-label=\"view 2\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 3-0</nve-grid-cell> <nve-grid-cell>cell 3-1</nve-grid-cell> <nve-grid-cell>cell 3-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"3\" aria-label=\"view 3\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 4-0</nve-grid-cell> <nve-grid-cell>cell 4-1</nve-grid-cell> <nve-grid-cell>cell 4-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"4\" aria-label=\"view 4\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 5-0</nve-grid-cell> <nve-grid-cell>cell 5-1</nve-grid-cell> <nve-grid-cell>cell 5-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"5\" aria-label=\"view 5\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 6-0</nve-grid-cell> <nve-grid-cell>cell 6-1</nve-grid-cell> <nve-grid-cell>cell 6-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"6\" aria-label=\"view 6\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 7-0</nve-grid-cell> <nve-grid-cell>cell 7-1</nve-grid-cell> <nve-grid-cell>cell 7-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"7\" aria-label=\"view 7\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 8-0</nve-grid-cell> <nve-grid-cell>cell 8-1</nve-grid-cell> <nve-grid-cell>cell 8-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"8\" aria-label=\"view 8\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n\n      <nve-grid-row>\n        <nve-grid-cell>cell 9-0</nve-grid-cell> <nve-grid-cell>cell 9-1</nve-grid-cell> <nve-grid-cell>cell 9-2</nve-grid-cell>\n        <nve-grid-cell>\n          <nve-icon-button container=\"flat\" icon-name=\"expand-details\" value=\"9\" aria-label=\"view 9\"></nve-icon-button>\n        </nve-grid-cell>\n      </nve-grid-row>\n    </nve-grid>\n  </section>\n  <nve-page-panel slot=\"right\" size=\"sm\" expanded closable>\n    <nve-page-panel-header>\n      <h3 nve-text=\"heading medium sm\">Row 2 Details</h3>\n    </nve-page-panel-header>\n    <nve-page-panel-content>\n      <div nve-layout=\"column gap:md\">\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Task</label>\n          <p nve-text=\"label sm\">Workflow</p>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Status</label>\n          <nve-badge status=\"success\">Complete</nve-badge>\n        </div>\n        <div nve-layout=\"column gap:xs\">\n          <label nve-text=\"body sm muted\">Priority</label>\n          <nve-badge status=\"pending\">P1</nve-badge>\n        </div>\n      </div>\n    </nve-page-panel-content>\n  </nve-page-panel>\n</nve-page>\n<script type=\"module\">\n  const page = document.getElementById(\"grid-panel-demo\");\n  const grid = page.querySelector(\"nve-grid\");\n  const panel = page.querySelector(\"nve-page-panel\");\n  const rows = grid.querySelectorAll(\"nve-grid-row\");\n  const heading = page.querySelector(\"nve-page-panel-header h3\");\n\n  panel.addEventListener(\"close\", () => {\n    rows.forEach((row) => (row.selected = false));\n    panel.hidden = true;\n  });\n\n  grid.addEventListener(\"click\", (e) => {\n    if (e.target.localName === \"nve-icon-button\") {\n      const row = e.target.closest(\"nve-grid-row\");\n      rows.forEach((row) => (row.selected = false));\n      panel.hidden = false;\n      heading.textContent = \"Row \" + e.target.value + \" Details\";\n      row.selected = !panel.hidden;\n    }\n  });\n</script>\n",
       "summary": "Use a nve-page-panel when displaying advanced filtering or display settings for the grid. Item detail panels should be open using a action button placed at the end of the grid row.",
       "description": "",
       "composition": true,

package/dist/grid/grid2.js

@@ -23,7 +23,7 @@ var y = class extends g {
 	static {
 		this.metadata = {
 			tag: "nve-grid",
-			version: "2.12.0",
+			version: "2.12.2",
 			children: [
 				d.metadata.tag,
 				f.metadata.tag,

package/dist/grid/header/header2.js

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

package/dist/grid/placeholder/placeholder2.js

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

package/dist/grid/row/row2.js

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

package/dist/icon/icon.examples.json

@@ -52,7 +52,7 @@
     {
       "id": "icon-registration",
       "name": "Registration",
-      "template": "<nve-icon name=\"smile\" style=\"--width: 75px; --height: 75px\"></nve-icon>\n<script type=\"module\">\n  customElements.get(\"nve-icon\").add({\n    smile: {\n      svg: () =>\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"16\" stroke=\"currentColor\" stroke-width=\"3\"/><circle cx=\"18\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><circle cx=\"30\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><path d=\"M17 29c1.5 2.5 4.2 4 7 4s5.5-1.5 7-4\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>',\n    },\n  });\n</script>\n",
+      "template": "<nve-icon name=\"smile\" style=\"--width: 75px; --height: 75px\"></nve-icon>\n\n<script type=\"module\">\n  customElements.get(\"nve-icon\").add({\n    smile: {\n      svg: () =>\n        '<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 48 48\"><circle cx=\"24\" cy=\"24\" r=\"16\" stroke=\"currentColor\" stroke-width=\"3\"/><circle cx=\"18\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><circle cx=\"30\" cy=\"20\" r=\"2\" fill=\"currentColor\"/><path d=\"M17 29c1.5 2.5 4.2 4 7 4s5.5-1.5 7-4\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"/></svg>',\n    },\n  });\n</script>\n",
       "summary": "Register SVG paths and make them accessible to the `<nve-icon>` element. Define icons via a string or async function returning the resulting string.",
       "description": "",
       "composition": false,

package/dist/icon/icon2.js

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