@gov-design-system-ce/components 0.0.36 → 0.0.37

package/dist/collection/components/gov-control-group/gov-control-group.js

@@ -0,0 +1,137 @@
+import { Host, h } from '@stencil/core';
+import { Variants } from '../../core/constants/variants';
+import { govForm } from "../../helpers/Dom/form";
+import { govHost, toBoolAttr, toBoolAttrIfDefined } from '../../helpers/Dom/template';
+import { validateProp } from '../../helpers/Validate/props';
+import { ControlGroupClass } from './constants';
+export class GovControlGroup {
+  constructor() {
+    this.variant = Variants.PRIMARY;
+    this.invalid = undefined;
+    this.disabled = undefined;
+    this.isBordered = false;
+    this.h = govHost(this.host);
+    this.f = govForm(this.h);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, ControlGroupClass.root);
+  }
+  watchDisabled() {
+    this.passControlAttrs();
+  }
+  passControlAttrs() {
+    this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
+    this.f.passAttrToControl("invalid", toBoolAttr(this.invalid));
+  }
+  componentWillLoad() {
+    this.watchDisabled();
+  }
+  render() {
+    const bordered = this.isBordered === true ? " bordered" : "";
+    return (h(Host, { class: this.h.classes(ControlGroupClass.root) + bordered, variant: this.variant, invalid: toBoolAttrIfDefined(this.invalid), disabled: this.disabled }, h("slot", null)));
+  }
+  static get is() { return "gov-control-group"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-control-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-control-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ControlGroupType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "ControlGroupType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the content message."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "Variants.PRIMARY"
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the entered value does not conform to the format expected by the application."
+        },
+        "attribute": "invalid",
+        "reflect": false
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Makes the whole component disabled.\nThis prevents users from being able to interact with the elements, and conveys its inactive state to assistive technologies."
+        },
+        "attribute": "disabled",
+        "reflect": false
+      },
+      "isBordered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies the display of the border between elements"
+        },
+        "attribute": "bordered",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }, {
+        "propName": "disabled",
+        "methodName": "watchDisabled"
+      }, {
+        "propName": "invalid",
+        "methodName": "watchDisabled"
+      }];
+  }
+}
+//# sourceMappingURL=gov-control-group.js.map

package/dist/collection/components/gov-control-group/gov-control-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-control-group.js","sourceRoot":"","sources":["../../../../../../src/components/gov-control-group/gov-control-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhD,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAA;AAErF,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAA;AAC3D,OAAO,EAAE,iBAAiB,EAAoB,MAAM,aAAa,CAAA;AAMjE,MAAM,OAAO,eAAe;EAI3B;mBAS6C,QAAQ,CAAC,OAAO;;;sBAaG,KAAK;IArBpE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC3B,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;GACxB;EAsBD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAA;EACzD,CAAC;EAID,aAAa;IACZ,IAAI,CAAC,gBAAgB,EAAE,CAAA;EACxB,CAAC;EAEO,gBAAgB;IACvB,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,UAAU,EAAE,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC/D,IAAI,CAAC,CAAC,CAAC,iBAAiB,CAAC,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAA;EAC9D,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,aAAa,EAAE,CAAA;EACrB,CAAC;EAED,MAAM;IACL,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;IAC5D,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ;MACzJ,eAAQ,CACF,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, Host, Prop, Watch, h } from '@stencil/core'\nimport { Variants } from '../../core/constants/variants'\nimport { govForm } from \"../../helpers/Dom/form\"\nimport { GovForm } from \"../../helpers/Dom/form.types\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from '../../helpers/Dom/template'\nimport { GovHost } from '../../helpers/Dom/template.types'\nimport { validateProp } from '../../helpers/Validate/props'\nimport { ControlGroupClass, ControlGroupType } from './constants'\n\n@Component({\n\ttag: 'gov-control-group',\n\tstyleUrl: 'gov-control-group.scss',\n})\nexport class GovControlGroup {\n\tprivate h: GovHost\n\tprivate f: GovForm\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t}\n\n\t@Element() host: HTMLGovControlGroupElement\n\t/**\n\t * Style variation of the content message.\n\t */\n\t@Prop() readonly variant: ControlGroupType = Variants.PRIMARY\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean\n\t/**\n\t * Makes the whole component disabled.\n\t * This prevents users from being able to interact with the elements, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Specifies the display of the border between elements\n\t */\n\t@Prop({ attribute: 'bordered' }) readonly isBordered: boolean = false\n\n\t@Watch('variant')\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, ControlGroupClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.watchDisabled()\n\t}\n\n\trender() {\n\t\tconst bordered = this.isBordered === true ? \" bordered\" : \"\"\n\t\treturn (\n\t\t\t<Host class={this.h.classes(ControlGroupClass.root) + bordered} variant={this.variant} invalid={toBoolAttrIfDefined(this.invalid)} disabled={this.disabled}>\n\t\t\t\t<slot />\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-cookiebar/gov-cookiebar.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-empty/gov-empty.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-error-code/gov-error-code.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-form/autocomplete/gov-form-autocomplete.css

@@ -95,6 +95,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-form/checkbox/gov-form-checkbox.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-form/control/gov-form-control.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-form/control/gov-form-control.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
-import { govHost } from "../../../helpers/Dom/template";
 import { govForm } from "../../../helpers/Dom/form";
+import { govHost } from "../../../helpers/Dom/template";
 import { createID, splitByWhitespace } from "../../../utils/string.utils";
 import { FormControlClass } from "./constants";
 export class GovFormControl {
@@ -16,11 +16,10 @@ export class GovFormControl {
     this.f = govForm(this.h);
     this.controlId = createID("GovFormControl");
   }
-  watchInvalid() {
-    this.passChildAttrs();
-  }
   componentDidRender() {
     this.passChildAttrs();
+    this.invalidChildAttrs();
+    this.disabledChildAttrs();
     this.syncControlMessages();
     this.formElementDescriptionControl();
   }
@@ -44,6 +43,38 @@ export class GovFormControl {
       this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
     }
   }
+  invalidChildAttrs() {
+    const formElements = [
+      "gov-form-select",
+      "gov-form-input",
+      "gov-form-switch",
+      "gov-form-checkbox",
+      "gov-form-radio",
+      "gov-form-multi-select",
+      "gov-form-file",
+      "gov-form-search",
+    ];
+    this.h.passChildAttr(formElements, "invalid", this.invalid);
+    if (this.f.hasGroupChildren === false) {
+      this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
+    }
+  }
+  disabledChildAttrs() {
+    const formElements = [
+      "gov-form-select",
+      "gov-form-input",
+      "gov-form-switch",
+      "gov-form-checkbox",
+      "gov-form-radio",
+      "gov-form-multi-select",
+      "gov-form-file",
+      "gov-form-search",
+    ];
+    this.h.passChildAttr(formElements, "disabled", this.disabled);
+    if (this.f.hasGroupChildren === false) {
+      this.h.passChildAttr([...formElements, "gov-form-label"], "identifier", this.identifier || this.controlId);
+    }
+  }
   formElementDescriptionControl() {
     const bottomSlot = this.host.querySelector("." + FormControlClass.bottom);
     if (!bottomSlot)
@@ -221,11 +252,5 @@ export class GovFormControl {
     };
   }
   static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "invalid",
-        "methodName": "watchInvalid"
-      }];
-  }
 }
 //# sourceMappingURL=gov-form-control.js.map

package/dist/collection/components/gov-form/control/gov-form-control.js.map

@@ -1 +1 @@
-{"version":3,"file":"gov-form-control.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/control/gov-form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { createID, splitByWhitespace } from \"../../../utils/string.utils\"\nimport { FormControlClass, FormControlSizesType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-form-control\",\n\tstyleUrl: \"gov-form-control.scss\",\n})\nexport class GovFormControl {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate readonly controlId: string\n\tprivate observer: MutationObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.controlId = createID(\"GovFormControl\")\n\t}\n\n\t@Element() host: HTMLGovFormControlElement\n\t/**\n\t * Defines the space between nested components.\n\t */\n\t@Prop() readonly gap?: FormControlSizesType\n\t/**\n\t * Form element identifier\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value of child form element does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean = false\n\t/**\n\t/**\n\t * Indicates the form element is disabled\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean = false\n\t/**\n\t * Use control as a fieldset for better accessibility.\n\t * Note: Don't forget to set the legend attribute of the gov-form-label component\n\t */\n\t@Prop() readonly fieldset: boolean = false\n\t/**\n\t * Form element size.\n\t */\n\t@Prop() readonly size?: FormControlSizesType = \"m\"\n\n\t@Watch(\"invalid\")\n\twatchInvalid(): void {\n\t\tthis.passChildAttrs()\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.passChildAttrs()\n\t\tthis.syncControlMessages()\n\t\tthis.formElementDescriptionControl()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate passChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"success\", this.success)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate formElementDescriptionControl() {\n\t\tconst bottomSlot = this.host.querySelector(\".\" + FormControlClass.bottom)\n\t\tif (!bottomSlot) return\n\t\tthis.observer = new MutationObserver(\n\t\t\tfunction() {\n\t\t\t\tthis.syncControlMessages()\n\t\t\t}.bind(this),\n\t\t)\n\n\t\tthis.observer.observe(bottomSlot, { childList: true })\n\t}\n\n\tprivate syncControlMessages() {\n\t\tPromise.all(this.f.messageElements.map((message: HTMLGovFormMessageElement) => message.identifier())).then((ids: string[]) => {\n\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"wcag-described-by\"))\n\t\t\t\telement.removeAttribute(\"wcag-described-by\")\n\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\tcurrentValue.forEach(id => (id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null))\n\t\t\t\t}\n\t\t\t\tif (ids.length) {\n\t\t\t\t\telement.setAttribute(\"wcag-described-by\", ids.join(\" \"))\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\tconst Tag = this.fieldset ? \"fieldset\" : \"div\"\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t<Tag class={FormControlClass.holder}>\n\t\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t{this.h.hasSlot(\"bottom\") && (\n\t\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t\t<slot name=\"bottom\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-control.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/control/gov-form-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Host, Prop } from \"@stencil/core\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { createID, splitByWhitespace } from \"../../../utils/string.utils\"\nimport { FormControlClass, FormControlSizesType } from \"./constants\"\n\n@Component({\n\ttag: \"gov-form-control\",\n\tstyleUrl: \"gov-form-control.scss\",\n})\nexport class GovFormControl {\n\tprivate readonly h: GovHost\n\tprivate f: GovForm\n\tprivate readonly controlId: string\n\tprivate observer: MutationObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.controlId = createID(\"GovFormControl\")\n\t}\n\n\t@Element() host: HTMLGovFormControlElement\n\t/**\n\t * Defines the space between nested components.\n\t */\n\t@Prop() readonly gap?: FormControlSizesType\n\t/**\n\t * Form element identifier\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Indicates the entered value of child form element does not conform to the format expected by the application.\n\t */\n\t@Prop() readonly invalid: boolean = false\n\t/**\n\t/**\n\t * Indicates the form element is disabled\n\t */\n\t@Prop() readonly disabled: boolean = false\n\t/**\n\t/**\n\t * Indicates the entered value of child form element does conform to the format expected by the application.\n\t */\n\t@Prop() readonly success: boolean = false\n\t/**\n\t * Use control as a fieldset for better accessibility.\n\t * Note: Don't forget to set the legend attribute of the gov-form-label component\n\t */\n\t@Prop() readonly fieldset: boolean = false\n\t/**\n\t * Form element size.\n\t */\n\t@Prop() readonly size?: FormControlSizesType = \"m\"\n\n\tcomponentDidRender() {\n\t\tthis.passChildAttrs()\n\t\tthis.invalidChildAttrs()\n\t\tthis.disabledChildAttrs()\n\t\tthis.syncControlMessages()\n\t\tthis.formElementDescriptionControl()\n\t}\n\n\tdisconnectedCallback(): void {\n\t\tthis.observer?.disconnect()\n\t}\n\n\tprivate passChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"success\", this.success)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate invalidChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"invalid\", this.invalid)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate disabledChildAttrs() {\n\t\tconst formElements = [\n\t\t\t\"gov-form-select\",\n\t\t\t\"gov-form-input\",\n\t\t\t\"gov-form-switch\",\n\t\t\t\"gov-form-checkbox\",\n\t\t\t\"gov-form-radio\",\n\t\t\t\"gov-form-multi-select\",\n\t\t\t\"gov-form-file\",\n\t\t\t\"gov-form-search\",\n\t\t]\n\t\tthis.h.passChildAttr(formElements, \"disabled\", this.disabled)\n\n\t\tif (this.f.hasGroupChildren === false) {\n\t\t\tthis.h.passChildAttr([...formElements, \"gov-form-label\"], \"identifier\", this.identifier || this.controlId)\n\t\t}\n\t}\n\n\tprivate formElementDescriptionControl() {\n\t\tconst bottomSlot = this.host.querySelector(\".\" + FormControlClass.bottom)\n\t\tif (!bottomSlot) return\n\t\tthis.observer = new MutationObserver(\n\t\t\tfunction() {\n\t\t\t\tthis.syncControlMessages()\n\t\t\t}.bind(this),\n\t\t)\n\n\t\tthis.observer.observe(bottomSlot, { childList: true })\n\t}\n\n\tprivate syncControlMessages() {\n\t\tPromise.all(this.f.messageElements.map((message: HTMLGovFormMessageElement) => message.identifier())).then((ids: string[]) => {\n\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"wcag-described-by\"))\n\t\t\t\telement.removeAttribute(\"wcag-described-by\")\n\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\tcurrentValue.forEach(id => (id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null))\n\t\t\t\t}\n\t\t\t\tif (ids.length) {\n\t\t\t\t\telement.setAttribute(\"wcag-described-by\", ids.join(\" \"))\n\t\t\t\t}\n\t\t\t})\n\t\t})\n\t}\n\n\trender() {\n\t\tconst Tag = this.fieldset ? \"fieldset\" : \"div\"\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t<Tag class={FormControlClass.holder}>\n\t\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t\t<slot></slot>\n\t\t\t\t\t{this.h.hasSlot(\"bottom\") && (\n\t\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t\t<slot name=\"bottom\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</Tag>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-form/file/gov-form-file.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */
@@ -278,6 +281,13 @@
 .gov-form-file[expanded=""][invalid=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=""][invalid=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=""][invalid="1"] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i][invalid=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i][invalid=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i][invalid="1"] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"][invalid=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"][invalid=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"][invalid="1"] .gov-form-file__label .gov-form-label__label {
   border-color: var(--gov-form-state-color-error, var(--gov-color-error));
 }
+.gov-form-file[expanded=""][invalid=""] .gov-form-file__area, .gov-form-file[expanded=""][invalid=true i] .gov-form-file__area, .gov-form-file[expanded=""][invalid="1"] .gov-form-file__area, .gov-form-file[expanded=true i][invalid=""] .gov-form-file__area, .gov-form-file[expanded=true i][invalid=true i] .gov-form-file__area, .gov-form-file[expanded=true i][invalid="1"] .gov-form-file__area, .gov-form-file[expanded="1"][invalid=""] .gov-form-file__area, .gov-form-file[expanded="1"][invalid=true i] .gov-form-file__area, .gov-form-file[expanded="1"][invalid="1"] .gov-form-file__area {
+  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+.gov-form-file[expanded=""][disabled=""] .gov-form-file__area, .gov-form-file[expanded=""][disabled=true i] .gov-form-file__area, .gov-form-file[expanded=""][disabled="1"] .gov-form-file__area, .gov-form-file[expanded=true i][disabled=""] .gov-form-file__area, .gov-form-file[expanded=true i][disabled=true i] .gov-form-file__area, .gov-form-file[expanded=true i][disabled="1"] .gov-form-file__area, .gov-form-file[expanded="1"][disabled=""] .gov-form-file__area, .gov-form-file[expanded="1"][disabled=true i] .gov-form-file__area, .gov-form-file[expanded="1"][disabled="1"] .gov-form-file__area {
+  pointer-events: none;
+  color: var(--gov-form-file-disabled-color, var(--gov-color-secondary-600));
+}
 @media (min-width: 30em) {
   .gov-form-file[expanded=""] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded=true i] .gov-form-file__label .gov-form-label__label, .gov-form-file[expanded="1"] .gov-form-file__label .gov-form-label__label {
     padding: 2rem;

package/dist/collection/components/gov-form/group/gov-form-group.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */

package/dist/collection/components/gov-form/input/constants.js

@@ -1,7 +1,7 @@
 import { Sizes } from '../../../core/constants/sizes';
 import { Variants } from '../../../core/constants/variants';
 import { pick } from '../../../utils/utils';
-export const FormInputSizes = pick(Sizes, ['_M', '_L', '_XL']);
+export const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL']);
 export const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY']);
 export var InputTypes;
 (function (InputTypes) {

package/dist/collection/components/gov-form/input/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAG3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAG9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAGzE,MAAM,CAAN,IAAY,UAcX;AAdD,WAAY,UAAU;EACrB,6BAAe,CAAA;EACf,2BAAa,CAAA;EACb,+CAAiC,CAAA;EACjC,6BAAe,CAAA;EACf,6BAAe,CAAA;EACf,+BAAiB,CAAA;EACjB,mCAAqB,CAAA;EACrB,+BAAiB,CAAA;EACjB,yBAAW,CAAA;EACX,2BAAa,CAAA;EACb,2BAAa,CAAA;EACb,yBAAW,CAAA;EACX,2BAAa,CAAA;AACd,CAAC,EAdW,UAAU,KAAV,UAAU,QAcrB;AAID,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;EACf,uBAAe,CAAA;AAChB,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf;AAID,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { pick } from '../../../utils/utils'\nimport { ValueOf } from '../../../types/interfaces'\n\nexport const FormInputSizes = pick(Sizes, ['_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormInputVariantType = `${ValueOf<typeof FormInputVariants>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\n\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\n\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/input/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAE3C,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAA;AAGpE,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAA;AAGzE,MAAM,CAAN,IAAY,UAcX;AAdD,WAAY,UAAU;EACrB,6BAAe,CAAA;EACf,2BAAa,CAAA;EACb,+CAAiC,CAAA;EACjC,6BAAe,CAAA;EACf,6BAAe,CAAA;EACf,+BAAiB,CAAA;EACjB,mCAAqB,CAAA;EACrB,+BAAiB,CAAA;EACjB,yBAAW,CAAA;EACX,2BAAa,CAAA;EACb,2BAAa,CAAA;EACb,yBAAW,CAAA;EACX,2BAAa,CAAA;AACd,CAAC,EAdW,UAAU,KAAV,UAAU,QAcrB;AAID,MAAM,CAAN,IAAY,IAEX;AAFD,WAAY,IAAI;EACf,uBAAe,CAAA;AAChB,CAAC,EAFW,IAAI,KAAJ,IAAI,QAEf;AAID,MAAM,CAAC,MAAM,cAAc,GAAG;EAC7B,IAAI,EAAE,gBAAgB;CACtB,CAAA","sourcesContent":["import { Sizes } from '../../../core/constants/sizes'\nimport { Variants } from '../../../core/constants/variants'\nimport { ValueOf } from '../../../types/interfaces'\nimport { pick } from '../../../utils/utils'\n\nexport const FormInputSizes = pick(Sizes, ['_S', '_M', '_L', '_XL'])\nexport type FormInputSizesType = `${ValueOf<typeof FormInputSizes>}`\n\nexport const FormInputVariants = pick(Variants, ['PRIMARY', 'SECONDARY'])\nexport type FormInputVariantType = `${ValueOf<typeof FormInputVariants>}`\n\nexport enum InputTypes {\n\tCOLOR = 'color',\n\tDATE = 'date',\n\tDATETIME_LOCAL = 'datetime-local',\n\tEMAIL = 'email',\n\tMONTH = 'month',\n\tNUMBER = 'number',\n\tPASSWORD = 'password',\n\tSEARCH = 'search',\n\tTEL = 'tel',\n\tTEXT = 'text',\n\tTIME = 'time',\n\tURL = 'url',\n\tWEEK = 'week',\n}\n\nexport type InputType = `${ValueOf<typeof InputTypes>}`\n\nexport enum Type {\n\tRESET = 'reset',\n}\n\nexport type TypesType = `${ValueOf<typeof Type>}`\n\nexport const FormInputClass = {\n\troot: 'gov-form-input',\n}\n"]}

package/dist/collection/components/gov-form/input/gov-form-input.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */
@@ -239,10 +242,8 @@
 .gov-form-input select,
 .gov-form-input textarea {
   width: 100%;
-  border: var(--gov-form-input-border-width, 0.0625rem solid var(--gov-color-secondary-700));
   border-radius: var(--gov-border-radius, 0.1875rem);
   background-color: var(--gov-form-bg-color, var(--gov-color-neutral-white));
-  color: var(--gov-form-input-color, var(--gov-color-secondary-700));
   font-family: var(--gov-font-family, "Roboto", sans-serif);
 }
 .gov-form-input input:focus,
@@ -279,7 +280,6 @@
   top: 50%;
   display: flex;
   justify-content: center;
-  color: var(--gov-form-input-icon-color, var(--gov-color-primary));
   transform: translateY(-50%);
   pointer-events: none;
 }
@@ -289,59 +289,38 @@
 .gov-form-input *[slot=right-icon] {
   right: 0;
 }
-[disabled=""].gov-form-input, [disabled=true i].gov-form-input, [disabled="1"].gov-form-input {
-  pointer-events: none;
+[size=s].gov-form-input {
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+  gap: 0.5rem var(--gov-form-input-core-s-icon-size, 1rem);
 }
-[disabled=""].gov-form-input input,
-[disabled=""].gov-form-input select,
-[disabled=""].gov-form-input textarea, [disabled=true i].gov-form-input input,
-[disabled=true i].gov-form-input select,
-[disabled=true i].gov-form-input textarea, [disabled="1"].gov-form-input input,
-[disabled="1"].gov-form-input select,
-[disabled="1"].gov-form-input textarea {
-  border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
-  background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
-  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
-}
-[disabled=""].gov-form-input *[slot=left-icon],
-[disabled=""].gov-form-input *[slot=right-icon], [disabled=true i].gov-form-input *[slot=left-icon],
-[disabled=true i].gov-form-input *[slot=right-icon], [disabled="1"].gov-form-input *[slot=left-icon],
-[disabled="1"].gov-form-input *[slot=right-icon] {
-  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
-}
-[invalid=""].gov-form-input input,
-[invalid=""].gov-form-input select,
-[invalid=""].gov-form-input textarea, [invalid=true i].gov-form-input input,
-[invalid=true i].gov-form-input select,
-[invalid=true i].gov-form-input textarea, [invalid="1"].gov-form-input input,
-[invalid="1"].gov-form-input select,
-[invalid="1"].gov-form-input textarea {
-  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
-  color: var(--gov-form-state-color-error, var(--gov-color-error));
+[size=s].gov-form-input input,
+[size=s].gov-form-input select {
+  font-weight: var(--gov-text-s-font-weight);
+  font-size: var(--gov-text-s-font-size);
+  line-height: var(--gov-text-s-line-height);
+  letter-spacing: var(--gov-text-s-letter-spacing);
+  height: var(--gov-form-input-core-s-height, 2rem);
+  padding: var(--gov-form-input-core-s-padding, 0.25rem 0.75rem);
 }
-[invalid=""].gov-form-input input::-moz-placeholder, [invalid=""].gov-form-input select::-moz-placeholder, [invalid=""].gov-form-input textarea::-moz-placeholder, [invalid=true i].gov-form-input input::-moz-placeholder, [invalid=true i].gov-form-input select::-moz-placeholder, [invalid=true i].gov-form-input textarea::-moz-placeholder, [invalid="1"].gov-form-input input::-moz-placeholder, [invalid="1"].gov-form-input select::-moz-placeholder, [invalid="1"].gov-form-input textarea::-moz-placeholder {
-  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+[size=s].gov-form-input *[slot=left-icon],
+[size=s].gov-form-input *[slot=right-icon] {
+  width: var(--gov-form-input-core-s-icon-size, 1rem);
+  height: var(--gov-form-input-core-s-icon-size, 1rem);
 }
-[invalid=""].gov-form-input input::placeholder,
-[invalid=""].gov-form-input select::placeholder,
-[invalid=""].gov-form-input textarea::placeholder, [invalid=true i].gov-form-input input::placeholder,
-[invalid=true i].gov-form-input select::placeholder,
-[invalid=true i].gov-form-input textarea::placeholder, [invalid="1"].gov-form-input input::placeholder,
-[invalid="1"].gov-form-input select::placeholder,
-[invalid="1"].gov-form-input textarea::placeholder {
-  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+[size=s].gov-form-input *[slot=left-icon] {
+  left: calc((var(--gov-form-input-core-s-icon-padding, 2rem) - var(--gov-form-input-core-s-icon-size, 1rem)) / 2);
 }
-[invalid=""].gov-form-input *[slot=left-icon],
-[invalid=""].gov-form-input *[slot=right-icon], [invalid=true i].gov-form-input *[slot=left-icon],
-[invalid=true i].gov-form-input *[slot=right-icon], [invalid="1"].gov-form-input *[slot=left-icon],
-[invalid="1"].gov-form-input *[slot=right-icon] {
-  color: var(--gov-form-state-color-error, var(--gov-color-error));
+[size=s].gov-form-input *[slot=left-icon] ~ input {
+  padding-left: var(--gov-form-input-core-s-icon-padding, 2rem);
 }
-[success=""].gov-form-input *[slot=right-icon], [success=true i].gov-form-input *[slot=right-icon], [success="1"].gov-form-input *[slot=right-icon] {
-  color: var(--gov-form-state-color-success, var(--gov-color-success));
+[size=s].gov-form-input *[slot=right-icon] {
+  right: calc((var(--gov-form-input-core-s-icon-padding, 2rem) - var(--gov-form-input-core-s-icon-size, 1rem)) / 2);
 }
-[success=""].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
-  display: none;
+[size=s].gov-form-input *[slot=right-icon] ~ input, [size=s].gov-form-input *[slot=right-icon] ~ select {
+  padding-right: var(--gov-form-input-core-s-icon-padding, 2rem);
 }
 [size=m].gov-form-input {
   font-weight: var(--gov-text-m-font-weight);
@@ -442,6 +421,80 @@
 [size=xl].gov-form-input *[slot=right-icon] ~ input, [size=xl].gov-form-input *[slot=right-icon] ~ select {
   padding-right: var(--gov-form-input-core-xl-icon-padding, 3rem);
 }
+[variant=primary].gov-form-input input,
+[variant=primary].gov-form-input select,
+[variant=primary].gov-form-input textarea {
+  color: var(--gov-form-input-color-primary, var(--gov-color-secondary-700));
+  border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
+}
+[variant=primary].gov-form-input *[slot=left-icon],
+[variant=primary].gov-form-input *[slot=right-icon] {
+  color: var(--gov-form-input-icon-color-primary, var(--gov-color-primary));
+}
+[variant=secondary].gov-form-input input,
+[variant=secondary].gov-form-input select,
+[variant=secondary].gov-form-input textarea {
+  color: var(--gov-form-input-color-secondary, var(--gov-color-secondary-700));
+  border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
+}
+[variant=secondary].gov-form-input *[slot=left-icon],
+[variant=secondary].gov-form-input *[slot=right-icon] {
+  color: var(--gov-form-input-icon-color-secondary, var(--gov-color-primary));
+}
+[disabled=""].gov-form-input, [disabled=true i].gov-form-input, [disabled="1"].gov-form-input {
+  pointer-events: none;
+}
+[disabled=""].gov-form-input input,
+[disabled=""].gov-form-input select,
+[disabled=""].gov-form-input textarea, [disabled=true i].gov-form-input input,
+[disabled=true i].gov-form-input select,
+[disabled=true i].gov-form-input textarea, [disabled="1"].gov-form-input input,
+[disabled="1"].gov-form-input select,
+[disabled="1"].gov-form-input textarea {
+  border-color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+  background: var(--gov-form-input-disabled-bg, var(--gov-color-secondary-300));
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[disabled=""].gov-form-input *[slot=left-icon],
+[disabled=""].gov-form-input *[slot=right-icon], [disabled=true i].gov-form-input *[slot=left-icon],
+[disabled=true i].gov-form-input *[slot=right-icon], [disabled="1"].gov-form-input *[slot=left-icon],
+[disabled="1"].gov-form-input *[slot=right-icon] {
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[invalid=""].gov-form-input input,
+[invalid=""].gov-form-input select,
+[invalid=""].gov-form-input textarea, [invalid=true i].gov-form-input input,
+[invalid=true i].gov-form-input select,
+[invalid=true i].gov-form-input textarea, [invalid="1"].gov-form-input input,
+[invalid="1"].gov-form-input select,
+[invalid="1"].gov-form-input textarea {
+  border-color: var(--gov-form-state-color-error, var(--gov-color-error));
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[invalid=""].gov-form-input input::-moz-placeholder, [invalid=""].gov-form-input select::-moz-placeholder, [invalid=""].gov-form-input textarea::-moz-placeholder, [invalid=true i].gov-form-input input::-moz-placeholder, [invalid=true i].gov-form-input select::-moz-placeholder, [invalid=true i].gov-form-input textarea::-moz-placeholder, [invalid="1"].gov-form-input input::-moz-placeholder, [invalid="1"].gov-form-input select::-moz-placeholder, [invalid="1"].gov-form-input textarea::-moz-placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-input input::placeholder,
+[invalid=""].gov-form-input select::placeholder,
+[invalid=""].gov-form-input textarea::placeholder, [invalid=true i].gov-form-input input::placeholder,
+[invalid=true i].gov-form-input select::placeholder,
+[invalid=true i].gov-form-input textarea::placeholder, [invalid="1"].gov-form-input input::placeholder,
+[invalid="1"].gov-form-input select::placeholder,
+[invalid="1"].gov-form-input textarea::placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-input *[slot=left-icon],
+[invalid=""].gov-form-input *[slot=right-icon], [invalid=true i].gov-form-input *[slot=left-icon],
+[invalid=true i].gov-form-input *[slot=right-icon], [invalid="1"].gov-form-input *[slot=left-icon],
+[invalid="1"].gov-form-input *[slot=right-icon] {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[success=""].gov-form-input *[slot=right-icon], [success=true i].gov-form-input *[slot=right-icon], [success="1"].gov-form-input *[slot=right-icon] {
+  color: var(--gov-form-state-color-success, var(--gov-color-success));
+}
+[success=""].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-input *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
+  display: none;
+}
 
 .gov-form-input[invalid=""] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), .gov-form-input[invalid=true i] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), .gov-form-input[invalid="1"] *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
   display: none;

package/dist/collection/components/gov-form/input/gov-form-input.js

@@ -1,13 +1,12 @@
 import { Host, h } from '@stencil/core';
-import { FormInputSizes } from './constants';
-import { createID } from '../../../utils/string.utils';
+import { govForm } from '../../../helpers/Dom/form';
 import { govHost, toBoolAttr, toBoolAttrIfDefined, toOnOffAttrIfDefined } from "../../../helpers/Dom/template";
-import { FormInputClass, FormInputVariants } from './constants';
-import { validateProp } from '../../../helpers/Validate/props';
 import { canValidateWcagOnRender } from '../../../helpers/Dom/win';
-import { delay } from '../../../utils/utils';
+import { validateProp } from '../../../helpers/Validate/props';
 import { validateWcagLabelFor, validateWcagRef } from '../../../helpers/Validate/wcag';
-import { govForm } from '../../../helpers/Dom/form';
+import { createID } from '../../../utils/string.utils';
+import { delay } from '../../../utils/utils';
+import { FormInputClass, FormInputSizes, FormInputVariants } from './constants';
 var Tags;
 (function (Tags) {
   Tags["INPUT"] = "input";
@@ -17,7 +16,7 @@ export class GovFormInput {
   constructor() {
     this.value = undefined;
     this.identifier = undefined;
-    this.variant = undefined;
+    this.variant = 'secondary';
     this.success = undefined;
     this.size = 'm';
     this.name = undefined;
@@ -223,7 +222,8 @@ export class GovFormInput {
           "text": "Style variation of the form input."
         },
         "attribute": "variant",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "'secondary'"
       },
       "success": {
         "type": "boolean",
@@ -247,7 +247,7 @@ export class GovFormInput {
         "mutable": false,
         "complexType": {
           "original": "FormInputSizesType",
-          "resolved": "\"l\" | \"m\" | \"xl\"",
+          "resolved": "\"l\" | \"m\" | \"s\" | \"xl\"",
           "references": {
             "FormInputSizesType": {
               "location": "import",