@nvidia-elements/core 0.0.10 → 0.0.12

package/dist/forms/forms.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/forms/forms.examples.json",
   "items": [
     {
-      "id": "core-forms_kitchen-sink",
+      "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",
       "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.",
@@ -14,7 +14,7 @@
       ]
     },
     {
-      "id": "core-forms_vertical",
+      "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",
       "summary": "Traditional vertical form layout with labels above inputs, providing clear visual hierarchy and optimal readability for complex forms.",
@@ -23,7 +23,7 @@
       "tags": []
     },
     {
-      "id": "core-forms_vertical-inline",
+      "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",
       "summary": "Compact vertical layout with inline labels and controls, maximizing space efficiency while maintaining form clarity and accessibility.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-forms_horizontal",
+      "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",
       "summary": "Horizontal form layout with labels beside inputs, creating efficient use of horizontal space and familiar desktop form patterns.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-forms_horizontal-inline",
+      "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",
       "summary": "Space-efficient horizontal layout with inline labels, ideal for dense forms with tight vertical space where quick scanning matters.",
@@ -50,7 +50,7 @@
       "tags": []
     },
     {
-      "id": "core-forms_fit-text",
+      "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",
       "summary": "Form controls that automatically adjust their width to fit content, optimizing space usage for dynamic or variable-length inputs.",
@@ -61,7 +61,7 @@
       ]
     },
     {
-      "id": "core-forms_hidden-message-icon",
+      "id": "forms-hidden-message-icon",
       "name": "HiddenMessageIcon",
       "template": "<style>\n  .hidden-icon::part(icon) {\n    display: none;\n  }\n</style>\n<nve-switch-group style=\"width: 200px\">\n  <nve-switch>\n    <label>default</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>success</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"success\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>error</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"error\">hidden icon control message</nve-control-message>\n  </nve-switch>\n  <nve-switch>\n    <label>warning</label>\n    <input type=\"checkbox\" />\n    <nve-control-message class=\"hidden-icon\" status=\"warning\">hidden icon control message</nve-control-message>\n  </nve-switch>\n</nve-switch-group>\n",
       "summary": "Hidden status icon on the control message in form controls.",
@@ -72,7 +72,7 @@
       ]
     },
     {
-      "id": "core-forms_prominence-muted",
+      "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",
       "summary": "Use the prominence muted state to lower visual weight of controls in forms.",

package/dist/forms/validation.examples.js.map

@@ -1 +1 @@
-{"version":3,"file":"validation.examples.js","names":["#submit","#input"],"sources":["../../src/forms/validation.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, unsafeCSS, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { query } from 'lit/decorators/query.js';\nimport layout from '@nvidia-elements/styles/layout.css?inline';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/password/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n};\n\n/**\n * @summary Use real-time validation with contextual error messages to disable submit until form is valid.\n * @tags pattern\n */\nexport const LoginForm = {\n  render() {\n    return html`\n<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    `\n  }\n}\n\n/**\n * @summary Login form with grouped error display showing all validation issues together after submission attempt.\n */\nexport const ErrorGroup = {\n  render: () => html`\n<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  `\n}\n\n/**\n * @summary Login form example of success feedback with positive confirmation messages for valid input and successful form submission.\n */\nexport const SuccessGroup = {\n  render: () => {\n    return html`\n<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`\n  }\n}\n\n/**\n * @summary Form reset functionality allowing users to clear individual fields or reset the entire form.\n */\nexport const ResetForm = {\n  render: () => {\n    return html`\n<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`\n  }\n}\n\n/* eslint-disable @nvidia-elements/lint/no-missing-popover-trigger */\n\n@customElement('app-login')\nexport class AppLogin extends LitElement {\n  static styles = [unsafeCSS(layout)];\n\n  @query('form') form: HTMLFormElement;\n\n  @state() formValues = { email: '', password: '', remember: false };\n\n  @state() showNotification = false;\n\n  render() {\n    return html`\n      <form @submit=${e => this.#submit(e)} @input=${this.#input} nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 400px\">\n        <nve-input>\n          <label>Email</label>\n          <input .value=${this.formValues.email} type=\"email\" name=\"email\" autocomplete=\"off\" pattern=\".+@nvidia.com\" required />\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 .value=${this.formValues.password} type=\"password\" name=\"password\" minlength=\"6\" required />\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-checkbox>\n          <label>Remember me</label>\n          <input ?checked=${this.formValues.remember} type=\"checkbox\" name=\"remember\" />\n        </nve-checkbox>\n\n        <nve-button interaction=\"emphasis\">Login</nve-button>\n      </form>\n      <pre>${JSON.stringify(this.formValues, null, 2)}</pre>\n      <nve-notification ?hidden=${!this.showNotification} @close=${() => this.showNotification = false} close-timeout=\"2000\" status=\"success\" position=\"top\">Submited: ${JSON.stringify(this.formValues)}</nve-notification>\n    `;\n  }\n\n  #input() {\n    this.formValues = Object.fromEntries(new FormData(this.form)) as unknown as { email: string, password: string, remember: boolean };\n  }\n\n  #submit(e) {\n    e.preventDefault();\n    if (this.form.reportValidity()) {\n      this.showNotification = true\n    }\n  }\n}\n\n/**\n * @summary Forms work with LitElement\n * @tags test-case\n */\nexport const LitForms = {\n  render: () => html`<app-login></app-login>`\n}\n"],"mappings":";AAGA,IAAA,IAAe"}
+{"version":3,"file":"validation.examples.js","names":["#submit","#input"],"sources":["../../src/forms/validation.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, unsafeCSS, LitElement } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { state } from 'lit/decorators/state.js';\nimport { query } from 'lit/decorators/query.js';\nimport layout from '@nvidia-elements/styles/layout.css?inline';\nimport '@nvidia-elements/core/forms/define.js';\nimport '@nvidia-elements/core/button/define.js';\nimport '@nvidia-elements/core/alert/define.js';\nimport '@nvidia-elements/core/input/define.js';\nimport '@nvidia-elements/core/password/define.js';\n\nexport default {\n  title: 'Elements/Forms',\n  component: 'forms'\n};\n\n/**\n * @summary Use real-time validation with contextual error messages to disable submit until form is valid.\n * @tags pattern\n */\nexport const LoginForm = {\n  render() {\n    return html`\n<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    `\n  }\n}\n\n/**\n * @summary Login form with grouped error display showing all validation issues together after submission attempt.\n */\nexport const ErrorGroup = {\n  render: () => html`\n<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  `\n}\n\n/**\n * @summary Login form example of success feedback with positive confirmation messages for valid input and successful form submission.\n */\nexport const SuccessGroup = {\n  render: () => {\n    return html`\n<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`\n  }\n}\n\n/**\n * @summary Form reset functionality allowing users to clear individual fields or reset the entire form.\n */\nexport const ResetForm = {\n  render: () => {\n    return html`\n<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`\n  }\n}\n\n@customElement('app-login')\nexport class AppLogin extends LitElement {\n  static styles = [unsafeCSS(layout)];\n\n  @query('form') form: HTMLFormElement;\n\n  @state() formValues = { email: '', password: '', remember: false };\n\n  @state() showNotification = false;\n\n  render() {\n    return html`\n      <form @submit=${e => this.#submit(e)} @input=${this.#input} nve-layout=\"column gap:lg align:stretch\" style=\"max-width: 400px\">\n        <nve-input>\n          <label>Email</label>\n          <input .value=${this.formValues.email} type=\"email\" name=\"email\" autocomplete=\"off\" pattern=\".+@nvidia.com\" required />\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 .value=${this.formValues.password} type=\"password\" name=\"password\" minlength=\"6\" required />\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-checkbox>\n          <label>Remember me</label>\n          <input ?checked=${this.formValues.remember} type=\"checkbox\" name=\"remember\" />\n        </nve-checkbox>\n\n        <nve-button interaction=\"emphasis\">Login</nve-button>\n      </form>\n      <pre>${JSON.stringify(this.formValues, null, 2)}</pre>\n      <nve-notification ?hidden=${!this.showNotification} @close=${() => this.showNotification = false} close-timeout=\"2000\" status=\"success\" position=\"top\">Submited: ${JSON.stringify(this.formValues)}</nve-notification>\n    `;\n  }\n\n  #input() {\n    this.formValues = Object.fromEntries(new FormData(this.form)) as unknown as { email: string, password: string, remember: boolean };\n  }\n\n  #submit(e) {\n    e.preventDefault();\n    if (this.form.reportValidity()) {\n      this.showNotification = true\n    }\n  }\n}\n\n/**\n * @summary Forms work with LitElement\n * @tags test-case\n */\nexport const LitForms = {\n  render: () => html`<app-login></app-login>`\n}\n"],"mappings":";AAGA,IAAA,IAAe"}

package/dist/forms/validation.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/forms/validation.examples.json",
   "items": [
     {
-      "id": "core-forms-validation_login-form",
+      "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",
       "summary": "Use real-time validation with contextual error messages to disable submit until form is valid.",
@@ -14,7 +14,7 @@
       ]
     },
     {
-      "id": "core-forms-validation_error-group",
+      "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",
       "summary": "Login form with grouped error display showing all validation issues together after submission attempt.",
@@ -23,7 +23,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-validation_success-group",
+      "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",
       "summary": "Login form example of success feedback with positive confirmation messages for valid input and successful form submission.",
@@ -32,7 +32,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-validation_reset-form",
+      "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",
       "summary": "Form reset functionality allowing users to clear individual fields or reset the entire form.",
@@ -41,7 +41,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-validation_lit-forms",
+      "id": "forms-validation-lit-forms",
       "name": "LitForms",
       "template": "<app-login></app-login>\n",
       "summary": "Forms work with LitElement",

package/dist/grid/cell/cell2.js

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

package/dist/grid/column/column2.js

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

package/dist/grid/footer/footer2.js

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