@nvidia-elements/core 0.0.1 → 0.0.2

package/dist/forms/forms.examples.json

@@ -0,0 +1,82 @@
+{
+  "element": "forms",
+  "entrypoint": "@nvidia-elements/core/forms/forms.examples.json",
+  "items": [
+    {
+      "id": "core-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 for complete form design reference.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    }
+  ]
+}

package/dist/forms/index.d.ts

@@ -0,0 +1,3 @@
+export * from './control/control.js';
+export * from './control-group/control-group.js';
+export * from './control-message/control-message.js';

package/dist/forms/index.js

@@ -0,0 +1,4 @@
+import { ControlMessage as e } from "./control-message/control-message2.js";
+import { Control as t } from "./control/control2.js";
+import { ControlGroup as n } from "./control-group/control-group2.js";
+export { t as Control, n as ControlGroup, e as ControlMessage };

package/dist/forms/utils/layout.d.ts

@@ -0,0 +1,12 @@
+import { ControlGroup } from '../control-group/control-group.js';
+import { Control } from '../control/control.js';
+export declare const breakpoints: {
+    vertical: number;
+    verticalInline: number;
+    horizontal: number;
+    horizontalInline: number;
+};
+export declare function setupControlLayoutStates(control: Control | ControlGroup): ResizeObserver;
+export type ControlLayouts = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';
+export declare function getControlLayout(width: number, initalLayout: ControlLayouts): ControlLayouts;
+export declare function isInlineInputType(input: HTMLInputElement): boolean;

package/dist/forms/utils/layout.js

@@ -0,0 +1,28 @@
+//#region src/forms/utils/layout.ts
+var e = {
+	vertical: 300,
+	verticalInline: 400,
+	horizontal: 500,
+	horizontalInline: 600
+};
+function t(e) {
+	let t = e.layout, r = new ResizeObserver((r) => {
+		e.fitContent || (e.layout = n(r[0].contentRect.width, t));
+	});
+	return r.observe(e), r;
+}
+function n(t, n) {
+	let r = n;
+	t < e.vertical ? r = "vertical" : t < e.verticalInline ? r = "vertical-inline" : t < e.horizontal ? r = "horizontal" : t < e.horizontalInline && (r = "horizontal-inline");
+	let i = [
+		"vertical",
+		"vertical-inline",
+		"horizontal",
+		"horizontal-inline"
+	];
+	return i.indexOf(n) < i.indexOf(r) && (r = n), r;
+}
+//#endregion
+export { t as setupControlLayoutStates };
+
+//# sourceMappingURL=layout.js.map

package/dist/forms/utils/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":[],"sources":["../../../src/forms/utils/layout.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport type { Control } from '../control/control.js';\n\nexport const breakpoints = {\n  vertical: 300,\n  verticalInline: 400,\n  horizontal: 500,\n  horizontalInline: 600\n};\n\nexport function setupControlLayoutStates(control: Control | ControlGroup) {\n  const initalLayout = control.layout;\n  const resizeObserver = new ResizeObserver(entries => {\n    if (!(control as Control).fitContent) {\n      control.layout = getControlLayout(entries[0]!.contentRect.width, initalLayout);\n    }\n  });\n  resizeObserver.observe(control);\n  return resizeObserver;\n}\n\nexport type ControlLayouts = 'vertical' | 'vertical-inline' | 'horizontal' | 'horizontal-inline';\n\nexport function getControlLayout(width: number, initalLayout: ControlLayouts) {\n  let layout: ControlLayouts = initalLayout;\n  if (width < breakpoints.vertical) {\n    layout = 'vertical';\n  } else if (width < breakpoints.verticalInline) {\n    layout = 'vertical-inline';\n  } else if (width < breakpoints.horizontal) {\n    layout = 'horizontal';\n  } else if (width < breakpoints.horizontalInline) {\n    layout = 'horizontal-inline';\n  }\n\n  const layouts: ControlLayouts[] = ['vertical', 'vertical-inline', 'horizontal', 'horizontal-inline'];\n  if (layouts.indexOf(initalLayout) < layouts.indexOf(layout)) {\n    layout = initalLayout;\n  }\n\n  return layout;\n}\n\nexport function isInlineInputType(input: HTMLInputElement) {\n  return input.type === 'radio' || input.type === 'checkbox';\n}\n"],"mappings":";AAMA,IAAa,IAAc;CACzB,UAAU;CACV,gBAAgB;CAChB,YAAY;CACZ,kBAAkB;CACnB;AAED,SAAgB,EAAyB,GAAiC;CACxE,IAAM,IAAe,EAAQ,QACvB,IAAiB,IAAI,gBAAe,MAAW;AACnD,EAAM,EAAoB,eACxB,EAAQ,SAAS,EAAiB,EAAQ,GAAI,YAAY,OAAO,EAAa;GAEhF;AAEF,QADA,EAAe,QAAQ,EAAQ,EACxB;;AAKT,SAAgB,EAAiB,GAAe,GAA8B;CAC5E,IAAI,IAAyB;AAC7B,CAAI,IAAQ,EAAY,WACtB,IAAS,aACA,IAAQ,EAAY,iBAC7B,IAAS,oBACA,IAAQ,EAAY,aAC7B,IAAS,eACA,IAAQ,EAAY,qBAC7B,IAAS;CAGX,IAAM,IAA4B;EAAC;EAAY;EAAmB;EAAc;EAAoB;AAKpG,QAJI,EAAQ,QAAQ,EAAa,GAAG,EAAQ,QAAQ,EAAO,KACzD,IAAS,IAGJ"}

package/dist/forms/utils/states.d.ts

@@ -0,0 +1,36 @@
+import { ControlGroup } from '../control-group/control-group.js';
+import { ControlMessage } from '../control-message/control-message.js';
+import { Control } from '../control/control.js';
+export declare const inputQuery = "input, select, selectmenu, textarea, [nve-control], [nve-control]";
+/**
+ * Adds validation states to custom element
+ * :state(valid) form control is in a valid state
+ * :state(invalid) form control is in a invalid state
+ */
+export declare function setupControlValidationStates(control: Control, messages: ControlMessage[]): void;
+/**
+ * Adds control interaction states to custom element
+ * :state(checked) form control is in a checked state
+ * :state(disabled) form control is in a disabled state
+ * :state(readonly) form control is in a readonly state
+ * :state(touched) form control received focus and then blurred
+ * :state(dirty) user modified the form control
+ */
+export declare function setupControlStates(control: Control): MutationObserver[];
+/**
+ * Adds control group interaction states to custom element
+ * :state(disabled) any form control within group is in a disabled state
+ */
+export declare function setupControlGroupStates(controlGroup: ControlGroup): MutationObserver;
+export declare function toggleControlGroupDisabledState(controlGroup: ControlGroup): void;
+/**
+ * Adds control status states to custom element
+ * :state(error) form control is in a error state
+ * :state(success) form control is in a success state
+ */
+export declare function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]): MutationObserver[];
+export declare function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage): void;
+export declare function showNonValidationMessages(messages: ControlMessage[]): void;
+export declare function hideAllValidationMessages(messages: ControlMessage[]): void;
+export declare function showActiveValidationMessages(control: Control, messages: ControlMessage[]): void;
+export declare function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]): void;

package/dist/forms/utils/states.js

@@ -0,0 +1,68 @@
+import { getAttributeChanges as e, getAttributeListChanges as t, getElementUpdate as n, matchesElementName as r, tagSelector as i } from "../../internal/utils/dom.js";
+import { ControlMessage as a } from "../control-message/control-message2.js";
+//#region src/forms/utils/states.ts
+var o = "input, select, selectmenu, textarea, [nve-control], [nve-control]";
+function s(e, t) {
+	if (!e.input.form?.noValidate && !e.input.formNoValidate && !e.input.hasAttribute("formnovalidate")) {
+		p(t);
+		let n = () => {
+			e.input.validity?.valid && (e._internals.states.delete("invalid"), e._internals.states.add("valid"), e.status = null), h(e, t);
+		}, r = () => {
+			e.status = null, e._internals.states.delete("valid"), e._internals.states.delete("invalid"), p(t);
+		};
+		e.input.addEventListener("blur", () => {
+			e.input.checkValidity(), n();
+		}), e.input.addEventListener("input", () => {
+			n();
+		}), e.input.addEventListener("invalid", () => {
+			t.find((e) => e.error) && (p(t), m(e, t)), e.status = "error", e._internals.states.delete("valid"), e._internals.states.add("invalid");
+		}), e.addEventListener("reset", () => r()), e.input.form?.addEventListener("reset", () => r());
+	}
+	e.shadowRoot.addEventListener("slotchange", () => {
+		let t = Array.from(e.querySelectorAll(i(a.metadata.tag)));
+		e._internals.states.delete("valid"), e._internals.states.delete("invalid"), t.find((e) => !e.hidden && (e.status === "error" || e.error)) ? e._internals.states.add("invalid") : e._internals.states.add("valid");
+	});
+}
+function c(e) {
+	let t = [], r = e._internals.states;
+	return e.input.checked ? r.add("checked") : r.delete("checked"), e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"), e.input.addEventListener("focus", () => e._internals.states.add("focus")), e.input.addEventListener("input", () => e._internals.states.add("dirty")), e.input.addEventListener("blur", () => {
+		e._internals.states.add("touched"), e._internals.states.delete("focus");
+	}), e.input.getRootNode().addEventListener("change", (t) => {
+		t.target.name === e.input?.name && (e.input.checked ? r.add("checked") : r.delete("checked"));
+	}), e.input.form?.addEventListener("reset", () => {
+		e._internals.states.delete("touched"), e._internals.states.delete("dirty"), e._internals.states.delete("error"), e._internals.states.delete("success"), e.requestUpdate();
+	}), t.push(n(e.input, "readonly", (e) => e === "" || e ? r.add("readonly") : r.delete("readonly")), n(e.input, "checked", () => e.input.checked ? r.add("checked") : r.delete("checked")), n(e.input, "disabled", (e) => e === "" || e ? r.add("disabled") : r.delete("disabled")), n(e.input, "indeterminate", () => e.input.indeterminate ? r.add("indeterminate") : r.delete("indeterminate"))), t;
+}
+function l(t) {
+	return u(t), e(t, "disabled", () => u(t));
+}
+function u(e) {
+	Array.from(e.inputs).find((e) => e.disabled) ? e._internals.states.add("disabled") : e._internals.states.delete("disabled");
+}
+function d(e, n) {
+	f(e, n.find((e) => !e.hidden));
+	let o = [];
+	return o.push(t(e, ["hidden", "status"], (t) => {
+		let n = t.target;
+		r(n, a) && f(e, n);
+	})), e.shadowRoot.addEventListener("slotchange", () => {
+		let t = Array.from(e.querySelectorAll(i(a.metadata.tag))).find((e) => e.status && !e.hidden);
+		e._internals.states.delete("error"), e._internals.states.delete("success"), t && e._internals.states.add(t.status);
+	}), o;
+}
+function f(e, t) {
+	e._internals.states.delete("error"), e._internals.states.delete("success"), t?.status?.length && !t?.hidden && e._internals.states.add(t.status);
+}
+function p(e) {
+	e.filter((e) => e.hasAttribute("error")).forEach((e) => e.setAttribute("hidden", ""));
+}
+function m(e, t) {
+	t.find((t) => t.error && e.input.validity[t.error])?.removeAttribute("hidden");
+}
+function h(e, t) {
+	t.find((e) => e.error) && e.input.validity.valid && t.filter((t) => t.error && !e.input.validity[t.error]).forEach((e) => e.setAttribute("hidden", ""));
+}
+//#endregion
+export { o as inputQuery, l as setupControlGroupStates, c as setupControlStates, d as setupControlStatusStates, s as setupControlValidationStates };
+
+//# sourceMappingURL=states.js.map

package/dist/forms/utils/states.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"states.js","names":[],"sources":["../../../src/forms/utils/states.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  getAttributeChanges,\n  getAttributeListChanges,\n  getElementUpdate,\n  matchesElementName,\n  tagSelector\n} from '@nvidia-elements/core/internal';\nimport type { ControlGroup } from '../control-group/control-group.js';\nimport { ControlMessage } from '../control-message/control-message.js';\nimport type { Control } from '../control/control.js';\n\nexport const inputQuery = 'input, select, selectmenu, textarea, [nve-control], [nve-control]';\n\n/**\n * Adds validation states to custom element\n * :state(valid) form control is in a valid state\n * :state(invalid) form control is in a invalid state\n */\nexport function setupControlValidationStates(control: Control, messages: ControlMessage[]) {\n  if (\n    !control.input.form?.noValidate &&\n    !control.input.formNoValidate &&\n    !control.input.hasAttribute('formnovalidate')\n  ) {\n    hideAllValidationMessages(messages);\n\n    /**\n     * updateValidityState() logic triggered by input blur() or input() change events\n     */\n    const updateValidityState = () => {\n      if (control.input.validity?.valid) {\n        control._internals.states.delete('invalid');\n        control._internals.states.add('valid');\n        control.status = null!;\n      }\n\n      hideInactiveValidationMessages(control, messages);\n    };\n\n    const resetValidityState = () => {\n      control.status = null!;\n      control._internals.states.delete('valid');\n      control._internals.states.delete('invalid');\n      hideAllValidationMessages(messages);\n    };\n\n    control.input.addEventListener('blur', () => {\n      control.input.checkValidity();\n      updateValidityState();\n    });\n\n    control.input.addEventListener('input', () => {\n      updateValidityState();\n    });\n\n    control.input.addEventListener('invalid', () => {\n      if (messages.find(m => m.error)) {\n        hideAllValidationMessages(messages);\n        showActiveValidationMessages(control, messages);\n      }\n\n      control.status = 'error';\n      control._internals.states.delete('valid');\n      control._internals.states.add('invalid');\n    });\n\n    control.addEventListener('reset', () => resetValidityState());\n    control.input.form?.addEventListener('reset', () => resetValidityState());\n  }\n\n  control.shadowRoot!.addEventListener('slotchange', () => {\n    const messages = Array.from(control.querySelectorAll<ControlMessage>(tagSelector(ControlMessage.metadata.tag)));\n    control._internals.states.delete('valid');\n    control._internals.states.delete('invalid');\n    if (messages.find(m => !m.hidden && (m.status === 'error' || m.error))) {\n      control._internals.states.add('invalid');\n    } else {\n      control._internals.states.add('valid');\n    }\n  });\n}\n\n/**\n * Adds control interaction states to custom element\n * :state(checked) form control is in a checked state\n * :state(disabled) form control is in a disabled state\n * :state(readonly) form control is in a readonly state\n * :state(touched) form control received focus and then blurred\n * :state(dirty) user modified the form control\n */\nexport function setupControlStates(control: Control) {\n  const observers: MutationObserver[] = [];\n  const states = control._internals.states;\n  control.input.checked ? states.add('checked') : states.delete('checked');\n  control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate');\n  control.input.addEventListener('focus', () => control._internals.states.add('focus'));\n  control.input.addEventListener('input', () => control._internals.states.add('dirty'));\n  control.input.addEventListener('blur', () => {\n    control._internals.states.add('touched');\n    control._internals.states.delete('focus');\n  });\n\n  control.input.getRootNode().addEventListener('change', (e: Event) => {\n    if ((e.target as HTMLInputElement).name === control.input?.name) {\n      control.input.checked ? states.add('checked') : states.delete('checked');\n    }\n  });\n\n  control.input.form?.addEventListener('reset', () => {\n    control._internals.states.delete('touched');\n    control._internals.states.delete('dirty');\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    control.requestUpdate();\n  });\n\n  observers.push(\n    getElementUpdate(control.input, 'readonly', value =>\n      (value === '' ? true : value) ? states.add('readonly') : states.delete('readonly')\n    ),\n    getElementUpdate(control.input, 'checked', () =>\n      control.input.checked ? states.add('checked') : states.delete('checked')\n    ),\n    getElementUpdate(control.input, 'disabled', value =>\n      (value === '' ? true : value) ? states.add('disabled') : states.delete('disabled')\n    ),\n    getElementUpdate(control.input, 'indeterminate', () =>\n      control.input.indeterminate ? states.add('indeterminate') : states.delete('indeterminate')\n    )\n  );\n  return observers;\n}\n\n/**\n * Adds control group interaction states to custom element\n * :state(disabled) any form control within group is in a disabled state\n */\nexport function setupControlGroupStates(controlGroup: ControlGroup) {\n  toggleControlGroupDisabledState(controlGroup);\n  return getAttributeChanges(controlGroup, 'disabled', () => toggleControlGroupDisabledState(controlGroup));\n}\n\nexport function toggleControlGroupDisabledState(controlGroup: ControlGroup) {\n  if (Array.from(controlGroup.inputs).find(i => i.disabled)) {\n    controlGroup._internals.states.add('disabled');\n  } else {\n    controlGroup._internals.states.delete('disabled');\n  }\n}\n\n/**\n * Adds control status states to custom element\n * :state(error) form control is in a error state\n * :state(success) form control is in a success state\n */\nexport function setupControlStatusStates(control: Control | ControlGroup, messages: ControlMessage[]) {\n  updateControlStatusState(control, messages.find(m => !m.hidden)!);\n  const observers: MutationObserver[] = [];\n  observers.push(\n    getAttributeListChanges(control, ['hidden', 'status'], mutation => {\n      const target = mutation.target as ControlMessage;\n      if (matchesElementName(target, ControlMessage)) {\n        updateControlStatusState(control, target);\n      }\n    })\n  );\n\n  control.shadowRoot!.addEventListener('slotchange', () => {\n    const messages = Array.from(control.querySelectorAll<ControlMessage>(tagSelector(ControlMessage.metadata.tag)));\n    const message = messages.find(m => m.status && !m.hidden);\n    control._internals.states.delete('error');\n    control._internals.states.delete('success');\n    if (message) {\n      control._internals.states.add(message.status!);\n    }\n  });\n\n  return observers;\n}\n\nexport function updateControlStatusState(control: Control | ControlGroup, message: ControlMessage) {\n  control._internals.states.delete('error');\n  control._internals.states.delete('success');\n\n  if (message?.status?.length && !message?.hidden) {\n    control._internals.states.add(message.status);\n  }\n}\n\nexport function showNonValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => !m.hasAttribute('error')).forEach(m => m.removeAttribute('hidden'));\n}\n\nexport function hideAllValidationMessages(messages: ControlMessage[]) {\n  messages.filter(m => m.hasAttribute('error')).forEach(m => m.setAttribute('hidden', ''));\n}\n\nexport function showActiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  messages.find(m => m.error && control.input.validity[m.error])?.removeAttribute('hidden');\n}\n\nexport function hideInactiveValidationMessages(control: Control, messages: ControlMessage[]) {\n  if (messages.find(m => m.error) && control.input.validity.valid) {\n    messages.filter(m => m.error && !control.input.validity[m.error!]).forEach(m => m.setAttribute('hidden', ''));\n  }\n}\n"],"mappings":"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"}

package/dist/forms/utils/types.d.ts

@@ -0,0 +1,25 @@
+export interface ValidityState {
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/badInput) */
+    readonly badInput: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/customError) */
+    readonly customError: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/patternMismatch) */
+    readonly patternMismatch: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/rangeOverflow) */
+    readonly rangeOverflow: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/rangeUnderflow) */
+    readonly rangeUnderflow: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/stepMismatch) */
+    readonly stepMismatch: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/tooLong) */
+    readonly tooLong: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/tooShort) */
+    readonly tooShort: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/typeMismatch) */
+    readonly typeMismatch: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/valid) */
+    readonly valid: boolean;
+    /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ValidityState/valueMissing) */
+    readonly valueMissing: boolean;
+}
+export type ValidityStateError = 'badInput' | 'customError' | 'patternMismatch' | 'rangeOverflow' | 'rangeUnderflow' | 'stepMismatch' | 'tooLong' | 'tooShort' | 'typeMismatch' | 'valid' | 'valueMissing';

package/dist/forms/validation.examples.js

@@ -0,0 +1,6 @@
+//#region src/forms/validation.examples.ts
+var e = "";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=validation.examples.js.map

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

@@ -0,0 +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"}

package/dist/forms/validation.examples.json

@@ -0,0 +1,55 @@
+{
+  "element": "forms",
+  "entrypoint": "@nvidia-elements/core/forms/validation.examples.json",
+  "items": [
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": [
+        "pattern"
+      ]
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-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.",
+      "description": "",
+      "composition": true,
+      "tags": []
+    },
+    {
+      "id": "core-forms-validation_lit-forms",
+      "name": "LitForms",
+      "template": "<app-login></app-login>\n",
+      "summary": "Forms work with LitElement",
+      "description": "",
+      "composition": false,
+      "tags": [
+        "test-case"
+      ]
+    }
+  ]
+}

package/dist/grid/cell/cell.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+/**
+ * @element nve-grid-cell
+ * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/grid
+ * @slot - default slot for content
+ * @cssprop --background
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --min-height
+ * @cssprop --min-width
+ * @cssprop --font-weight
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --border-left
+ * @cssprop --border-right
+ * @cssprop --justify-content
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ */
+export declare class GridCell extends LitElement {
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+}

package/dist/grid/cell/cell.js

@@ -0,0 +1,6 @@
+//#region src/grid/cell/cell.css?inline
+var e = ":host{--color: var(--nve-sys-layer-canvas-color);--padding: var(--nve-ref-size-200) var(--nve-ref-size-500);--min-height: var(--row-height);--min-width: var(--nve-ref-size-1000);--font-weight: var(--nve-ref-font-weight-medium);--font-size: var(--nve-ref-font-size-100);--height: 100%;--border-left: 0;--border-right: 0;--justify-content: start;transition:box-shadow .3s ease-in-out}[internal-host]{background:color-mix(in oklab,var(--background, var(--nve-sys-layer-canvas-background)) 100%,var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, .01%));color:var(--color);padding:var(--padding);height:var(--height);min-height:var(--min-height);font-size:var(--font-size);min-width:var(--min-width);border-left:var(--border-left);border-right:var(--border-right);justify-content:var(--justify-content);font-weight:var(--font-weight);display:flex;align-items:center;outline-offset:-2px}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=cell.js.map

package/dist/grid/cell/cell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell.js","names":[],"sources":["../../../src/grid/cell/cell.css?inline"],"sourcesContent":["/* SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved. */\n/* SPDX-License-Identifier: Apache-2.0 */\n\n:host {\n  --color: var(--nve-sys-layer-canvas-color);\n  --padding: var(--nve-ref-size-200) var(--nve-ref-size-500);\n  --min-height: var(--row-height);\n  --min-width: var(--nve-ref-size-1000);\n  --font-weight: var(--nve-ref-font-weight-medium);\n  --font-size: var(--nve-ref-font-size-100);\n  --height: 100%;\n  --border-left: 0;\n  --border-right: 0;\n  --justify-content: start;\n  transition: box-shadow 300ms ease-in-out;\n}\n\n[internal-host] {\n  background: color-mix(\n    in oklab,\n    var(--background, var(--nve-sys-layer-canvas-background)) 100%,\n    var(--nve-sys-interaction-state-mix) var(--interaction-state-ratio, 0.01%)\n  ); /* 0.01 to prevent css optimizer from removing % type */\n  color: var(--color);\n  padding: var(--padding);\n  height: var(--height);\n  min-height: var(--min-height);\n  font-size: var(--font-size);\n  min-width: var(--min-width);\n  border-left: var(--border-left);\n  border-right: var(--border-right);\n  justify-content: var(--justify-content);\n  font-weight: var(--font-weight);\n  display: flex;\n  align-items: center;\n  outline-offset: -2px;\n}\n"],"mappings":""}

package/dist/grid/cell/cell2.js

@@ -0,0 +1,26 @@
+import { attachInternals as e } from "../../internal/utils/a11y.js";
+import { useStyles as t } from "../../internal/styles/index.js";
+import n from "./cell.js";
+import { LitElement as r, html as i } from "lit";
+//#region src/grid/cell/cell.ts
+var a = class extends r {
+	static {
+		this.styles = t([n]);
+	}
+	static {
+		this.metadata = {
+			tag: "nve-grid-cell",
+			version: "0.0.2"
+		};
+	}
+	render() {
+		return i`<div internal-host focusable="active"><slot></slot></div>`;
+	}
+	connectedCallback() {
+		super.connectedCallback(), e(this), this._internals.role = "gridcell";
+	}
+};
+//#endregion
+export { a as GridCell };
+
+//# sourceMappingURL=cell2.js.map

package/dist/grid/cell/cell2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cell2.js","names":[],"sources":["../../../src/grid/cell/cell.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html, LitElement } from 'lit';\nimport { useStyles, attachInternals } from '@nvidia-elements/core/internal';\nimport styles from './cell.css?inline';\n\n/**\n * @element nve-grid-cell\n * @description Represents an individual data cell within a grid row, displaying content aligned to its parent column.\n * @since 0.11.0\n * @entrypoint \\@nvidia-elements/core/grid\n * @slot - default slot for content\n * @cssprop --background\n * @cssprop --color\n * @cssprop --padding\n * @cssprop --min-height\n * @cssprop --min-width\n * @cssprop --font-weight\n * @cssprop --font-size\n * @cssprop --height\n * @cssprop --border-left\n * @cssprop --border-right\n * @cssprop --justify-content\n * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/\n */\nexport class GridCell extends LitElement {\n  static styles = useStyles([styles]);\n\n  static readonly metadata = {\n    tag: 'nve-grid-cell',\n    version: '0.0.0'\n  };\n\n  /** @private */\n  declare _internals: ElementInternals;\n\n  render() {\n    return html`\n      <div internal-host focusable=\"active\">\n        <slot></slot>\n      </div>\n    `;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    attachInternals(this);\n    this._internals.role = 'gridcell';\n  }\n}\n"],"mappings":";;;;;AA0BA,IAAa,IAAb,cAA8B,EAAW;;gBACvB,EAAU,CAAC,EAAO,CAAC;;;kBAER;GACzB,KAAK;GACL,SAAS;GACV;;CAKD,SAAS;AACP,SAAO,CAAI;;CAOb,oBAAoB;AAGlB,EAFA,MAAM,mBAAmB,EACzB,EAAgB,KAAK,EACrB,KAAK,WAAW,OAAO"}

package/dist/grid/column/column.d.ts

@@ -0,0 +1,52 @@
+import { PropertyValues, LitElement } from 'lit';
+/**
+ * @element nve-grid-column
+ * @description Defines a column header within a grid, specifying the column's label, width, and alignment for all cells beneath it.
+ * @since 0.11.0
+ * @entrypoint \@nvidia-elements/core/grid
+ * @slot - default slot for content
+ * @slot actions - slot for column actions
+ * @cssprop --color
+ * @cssprop --padding
+ * @cssprop --font-weight
+ * @cssprop --font-size
+ * @cssprop --height
+ * @cssprop --min-width
+ * @cssprop --justify-content
+ * @cssprop --border-left
+ * @cssprop --border-right
+ * @aria https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+ */
+export declare class GridColumn extends LitElement {
+    #private;
+    /**
+     * Only set a fixed px width when you know the grid width. Most cases this should remain unset.
+     * If the total width of all columns is less than the grid width then the last column fills the remaining space.
+     * By default column widths are evenly divided unless width is explicitly provided.
+     */
+    width: string;
+    /**
+     * Set the `position` property or attribute to `fixed` or `sticky` to make the column fixed or sticky.
+     * Fixed columns do not scroll horizontally with the grid. Sticky columns scroll horizontally with the grid
+     * until the column reaches the edge of the grid.
+     */
+    position: 'fixed' | 'sticky' | '';
+    /**
+     * Control the content alignment within a given column.
+     */
+    columnAlign: 'start' | 'center' | 'end';
+    /**
+     * @private
+     */
+    ariaColIndex: string;
+    static styles: import('lit').CSSResult[];
+    static readonly metadata: {
+        tag: string;
+        version: string;
+    };
+    /** @private */
+    _internals: ElementInternals;
+    render(): import('lit-html').TemplateResult<1>;
+    connectedCallback(): void;
+    updated(props: PropertyValues<this>): Promise<void>;
+}