@nvidia-elements/core 0.0.10 → 0.0.11

package/dist/format-relative-time/format-relative-time.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/format-relative-time/format-relative-time.examples.json",
   "items": [
     {
-      "id": "core-format-relative-time_default",
+      "id": "format-relative-time",
       "name": "Default",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2024-06-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time>2025-12-01T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Basic relative time formatting with auto unit selection. Use for displaying human-readable relative timestamps in content areas, feeds, or metadata.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_numeric",
+      "id": "format-relative-time-numeric",
       "name": "Numeric",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time numeric=\"always\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time numeric=\"auto\" unit=\"year\">2025-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Numeric formatting control for natural language output. Use 'auto' to display natural forms such as 'yesterday' instead of '1 day ago'.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_format-style",
+      "id": "format-relative-time-format-style",
       "name": "FormatStyle",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time format-style=\"long\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"short\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time format-style=\"narrow\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Format style presets for controlling output verbosity. Use 'short' or 'narrow' for compact layouts such as data tables or timelines.",
@@ -30,7 +30,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_unit",
+      "id": "format-relative-time-unit",
       "name": "Unit",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time unit=\"day\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"month\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time unit=\"year\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Explicit time unit selection for keeping relative time in a fixed unit. Use when you always want output in days, months, or years instead of letting the component auto-select the unit.",
@@ -39,7 +39,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_locale",
+      "id": "format-relative-time-locale",
       "name": "Locale",
       "template": "<div nve-layout=\"column gap:sm\">\n  <nve-format-relative-time locale=\"de-DE\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"ja\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n  <nve-format-relative-time locale=\"fr-FR\">2020-01-15T12:00:00.000Z</nve-format-relative-time>\n</div>\n",
       "summary": "Explicit locale settings for internationalized relative time output. Use when the target audience locale differs from the document language or browser default.",
@@ -48,7 +48,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_date-attribute",
+      "id": "format-relative-time-date-attribute",
       "name": "DateAttribute",
       "template": "<nve-format-relative-time date=\"2020-01-15T12:00:00.000Z\"></nve-format-relative-time>\n",
       "summary": "Date attribute input for values supplied by JavaScript or bound data. By default, the component formats text content, which also serves as the SSR fallback, and `date` wins when both are present.",
@@ -57,7 +57,7 @@
       "tags": []
     },
     {
-      "id": "core-format-relative-time_sync",
+      "id": "format-relative-time-sync",
       "name": "Sync",
       "template": "<nve-format-relative-time sync>2020-01-15T12:00:00.000Z</nve-format-relative-time>\n",
       "summary": "Auto-updating relative time with the sync attribute. Use for live feeds, notifications, or dashboards where freshness matters.",

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

@@ -16,7 +16,7 @@ var c = class extends a {
 	static {
 		this.metadata = {
 			tag: "nve-format-relative-time",
-			version: "0.0.10"
+			version: "0.0.11"
 		};
 	}
 	#e;

package/dist/forms/actions.examples.json

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/forms/actions.examples.json",
   "items": [
     {
-      "id": "core-forms-actions_search-clear",
+      "id": "forms-actions-search-clear",
       "name": "SearchClear",
       "template": "<nve-input>\n  <label>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",
       "summary": "Input with action buttons for search and clear, providing quick access to common operations.",
@@ -12,7 +12,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-actions_label-action",
+      "id": "forms-actions-label-action",
       "name": "LabelAction",
       "template": "<nve-input>\n  <label>label</label>\n  <nve-icon-button\n    icon-name=\"information-circle-stroke\"\n    container=\"flat\"\n    aria-label=\"more details\"\n    slot=\"label\"\n  ></nve-icon-button>\n  <input type=\"text\" />\n  <nve-control-message>message</nve-control-message>\n</nve-input>\n",
       "summary": "Label with an information button to provide contextual help or more details about the field.",
@@ -21,7 +21,7 @@
       "tags": []
     },
     {
-      "id": "core-forms-actions_prefix-suffix",
+      "id": "forms-actions-prefix-suffix",
       "name": "PrefixSuffix",
       "template": "<nve-input>\n  <label>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",
       "summary": "Input with prefix and suffix buttons to show fixed text elements like URL protocols and domains.",

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

@@ -3,7 +3,7 @@
   "entrypoint": "@nvidia-elements/core/forms/control/control.examples.json",
   "items": [
     {
-      "id": "core-forms-control_default",
+      "id": "forms-control",
       "name": "Default",
       "template": "<nve-control>\n  <label>label</label>\n  <input />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
       "summary": "Basic form control wrapper with label, input, and validation message structure.",
@@ -14,7 +14,7 @@
       ]
     },
     {
-      "id": "core-forms-control_responsive",
+      "id": "forms-control-responsive",
       "name": "Responsive",
       "template": "<div\n  nve-layout=\"column gap:lg\"\n  style=\"padding: 12px; border: 1px solid #ccc; overflow-y: auto; resize: horizontal; max-width: 600px\"\n>\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-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-search layout=\"horizontal-inline\">\n    <label>search label</label>\n    <input type=\"search\" placeholder=\"search\" />\n  </nve-search>\n  <nve-checkbox-group layout=\"horizontal-inline\">\n    <label>checkbox label</label>\n    <nve-checkbox>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-checkbox>\n    <nve-checkbox>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-checkbox>\n    <nve-control-message>message</nve-control-message>\n  </nve-checkbox-group>\n  <nve-range layout=\"horizontal-inline\">\n    <label>label</label>\n    <input type=\"range\" />\n    <nve-control-message>message</nve-control-message>\n  </nve-range>\n  <nve-textarea layout=\"horizontal-inline\">\n    <label>label</label>\n    <textarea></textarea>\n  </nve-textarea>\n</div>\n",
       "summary": "Responsive form controls with layout adaptation in resizable containers.",
@@ -25,7 +25,7 @@
       ]
     },
     {
-      "id": "core-forms-control_layout",
+      "id": "forms-control-layout",
       "name": "Layout",
       "template": "<style>\n  #control-layout {\n    display: flex;\n    gap: 48px;\n    flex-direction: column;\n    min-width: 300px;\n    nve-control {\n      outline: 1px solid red;\n    }\n    nve-control-group {\n      outline: 1px solid blue;\n    }\n  }\n</style>\n<div id=\"control-layout\">\n  <nve-control>\n    <label>vertical</label>\n    <input />\n  </nve-control>\n  <nve-control>\n    <label>vertical</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n  </nve-control>\n  <nve-control layout=\"horizontal\">\n    <label>horizontal</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical\">\n    <label>vertical</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"vertical-inline\">\n    <label>vertical-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal\">\n    <label>horizontal</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n    <nve-control-message>message</nve-control-message>\n  </nve-control-group>\n  <nve-control-group layout=\"horizontal-inline\">\n    <label>horizontal-inline</label>\n    <nve-control>\n      <label>local</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n    </nve-control>\n    <nve-control>\n      <label>staging</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n    </nve-control>\n    <nve-control>\n      <label>production</label>\n      <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n    </nve-control>\n  </nve-control-group>\n</div>\n",
       "summary": "All control and control-group layout variations (vertical, horizontal, inline) with visual debugging.",
@@ -36,7 +36,7 @@
       ]
     },
     {
-      "id": "core-forms-control_required-field",
+      "id": "forms-control-required-field",
       "name": "RequiredField",
       "template": "<nve-control>\n  <label>validation</label>\n  <input required />\n  <nve-control-message>message</nve-control-message>\n  <nve-control-message error=\"valueMissing\">required</nve-control-message>\n</nve-control>\n",
       "summary": "Form control with HTML5 validation showing required field error messaging.",
@@ -47,7 +47,7 @@
       ]
     },
     {
-      "id": "core-forms-control_no-label-control",
+      "id": "forms-control-no-label-control",
       "name": "NoLabelControl",
       "template": "<nve-control>\n  <input type=\"search\" aria-label=\"search\" placeholder=\"search\" />\n</nve-control>\n",
       "summary": "Form control without visible label using aria-label for accessibility in compact layouts.",
@@ -58,7 +58,7 @@
       ]
     },
     {
-      "id": "core-forms-control_inline-control",
+      "id": "forms-control-inline-control",
       "name": "InlineControl",
       "template": "<nve-control>\n  <label>enable logging</label>\n  <input type=\"checkbox\" checked />\n</nve-control>\n",
       "summary": "Inline control layout with checkbox positioned before its label for toggle-style inputs.",
@@ -69,7 +69,7 @@
       ]
     },
     {
-      "id": "core-forms-control_group",
+      "id": "forms-control-group",
       "name": "Group",
       "template": "<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"radio\" name=\"radio-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n<br />\n<nve-control-group>\n  <label>environment</label>\n  <nve-control>\n    <label>local</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"1\" checked />\n  </nve-control>\n  <nve-control>\n    <label>staging</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"2\" />\n  </nve-control>\n  <nve-control>\n    <label>production</label>\n    <input type=\"checkbox\" name=\"checkbox-group\" value=\"3\" />\n  </nve-control>\n  <nve-control-message>message</nve-control-message>\n</nve-control-group>\n",
       "summary": "Control group organizing related radio buttons and checkboxes with shared label and messaging.",
@@ -80,7 +80,7 @@
       ]
     },
     {
-      "id": "core-forms-control_date-control",
+      "id": "forms-control-date-control",
       "name": "DateControl",
       "template": "<nve-control>\n  <label>date</label>\n  <input type=\"date\" />\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
       "summary": "Form control wrapping a native date input with label and message support.",
@@ -91,7 +91,7 @@
       ]
     },
     {
-      "id": "core-forms-control_textarea-control",
+      "id": "forms-control-textarea-control",
       "name": "TextareaControl",
       "template": "<nve-control>\n  <label>about</label>\n  <textarea></textarea>\n  <nve-control-message>message</nve-control-message>\n</nve-control>\n",
       "summary": "Form control wrapping a textarea element for multi-line text input.",
@@ -102,7 +102,7 @@
       ]
     },
     {
-      "id": "core-forms-control_datalist",
+      "id": "forms-control-datalist",
       "name": "Datalist",
       "template": "<nve-control>\n  <label>search</label>\n  <input type=\"search\" />\n  <datalist>\n    <option value=\"option 1\"></option>\n    <option value=\"option 2\"></option>\n    <option value=\"option 3\"></option>\n  </datalist>\n</nve-control>\n",
       "summary": "Form control with datalist providing autocomplete suggestions for search input.",
@@ -113,7 +113,7 @@
       ]
     },
     {
-      "id": "core-forms-control_status",
+      "id": "forms-control-status",
       "name": "Status",
       "template": "<div nve-layout=\"column gap:md\">\n  <nve-control>\n    <label>label</label>\n    <input />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>disabled</label>\n    <input disabled />\n    <nve-control-message>message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>success</label>\n    <input />\n    <nve-control-message status=\"success\">message</nve-control-message>\n  </nve-control>\n  <nve-control>\n    <label>error</label>\n    <input />\n    <nve-control-message status=\"error\">message</nve-control-message>\n  </nve-control>\n</div>\n",
       "summary": "Form controls showing all status states (default, disabled, success, error) for validation feedback.",

package/dist/forms/control/control2.js

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

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

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

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

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

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.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.11"
 		};
 	}
 	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.11"
 		};
 	}
 	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.11"
 		};
 	}
 	static {