@gov-design-system-ce/components 4.0.7 → 4.0.8-rc02

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

@@ -227,35 +227,35 @@
     opacity: 1;
   }
 }
-.gov-form-group {
+gov-form-group, gov-form-radio-group, gov-form-checkbox-group, .gov-form-group {
   position: relative;
   display: flex;
   width: 100%;
   flex-direction: column;
   align-items: flex-start;
 }
-.gov-form-group .gov-form-label__label {
+gov-form-group .gov-form-label__label, gov-form-radio-group .gov-form-label__label, gov-form-checkbox-group .gov-form-label__label, .gov-form-group .gov-form-label__label {
   margin: 0;
 }
-.gov-form-group[orientation=horizontal] {
+gov-form-group[orientation=horizontal], gov-form-radio-group[orientation=horizontal], gov-form-checkbox-group[orientation=horizontal], .gov-form-group[orientation=horizontal] {
   flex-direction: row;
   flex-wrap: wrap;
 }
-.gov-form-group[orientation=horizontal] .gov-form-label__label {
+gov-form-group[orientation=horizontal] .gov-form-label__label, gov-form-radio-group[orientation=horizontal] .gov-form-label__label, gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label, .gov-form-group[orientation=horizontal] .gov-form-label__label {
   white-space: nowrap;
 }
-.gov-form-group[gap="2xs"] {
+gov-form-group[gap="2xs"], gov-form-radio-group[gap="2xs"], gov-form-checkbox-group[gap="2xs"], .gov-form-group[gap="2xs"] {
   gap: 0.25rem;
 }
-.gov-form-group[gap=xs] {
+gov-form-group[gap=xs], gov-form-radio-group[gap=xs], gov-form-checkbox-group[gap=xs], .gov-form-group[gap=xs] {
   gap: 0.5rem;
 }
-.gov-form-group[gap=s] {
+gov-form-group[gap=s], gov-form-radio-group[gap=s], gov-form-checkbox-group[gap=s], .gov-form-group[gap=s] {
   gap: 0.75rem;
 }
-.gov-form-group[gap=m] {
+gov-form-group[gap=m], gov-form-radio-group[gap=m], gov-form-checkbox-group[gap=m], .gov-form-group[gap=m] {
   gap: 1rem;
 }
-.gov-form-group[gap=l] {
+gov-form-group[gap=l], gov-form-radio-group[gap=l], gov-form-checkbox-group[gap=l], .gov-form-group[gap=l] {
   gap: 1.25rem;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-form-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AACtE,OAAO,EACL,cAAc,EACd,oBAAoB,EAEpB,cAAc,EAEf,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAM5D,MAAM,OAAO,YAAY;EAGvB;eAQ4C,SAAS;uBAIK,UAAU;IAXlE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAaD,WAAW,CAAC,QAAgB;IAC1B,IAAI,QAAQ,EAAE;MACZ,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;KAC5D;EACH,CAAC;EAGD,mBAAmB,CAAC,QAAgB;IAClC,IAAI,QAAQ,EAAE;MACZ,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;KAClE;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;EAC5C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC;MAC7D,eAAa,CACR,CACR,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, Watch} from \"@stencil/core\"\nimport {\n  FormGroupClass,\n  FormGroupOrientation,\n  FormGroupOrientationType,\n  FormGroupSizes,\n  FormGroupSizesType\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\n\n@Component({\n  tag: \"gov-form-group\",\n  styleUrl: \"gov-form-group.scss\",\n})\nexport class GovFormGroup {\n  private readonly h: GovHost\n\n  constructor() {\n    this.h = govHost(this.host)\n  }\n\n  @Element() host: HTMLGovFormGroupElement\n  /**\n   * Gap's size.\n   */\n  @Prop() readonly gap?: FormGroupSizesType = undefined\n  /**\n   * Elements orientation\n   */\n  @Prop() readonly orientation?: FormGroupOrientationType = 'vertical'\n\n  @Watch(\"gap\")\n  validateGap(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupSizes, newValue, FormGroupClass.root)\n    }\n  }\n\n  @Watch(\"orientation\")\n  validateOrientation(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupOrientation, newValue, FormGroupClass.root)\n    }\n  }\n\n  componentWillLoad(): void {\n    this.validateGap(this.gap)\n    this.validateOrientation(this.orientation)\n  }\n\n  render() {\n    return (\n      <Host gap={this.gap} class={this.h.classes(FormGroupClass.root)}>\n        <slot></slot>\n      </Host>\n    )\n  }\n}\n"]}
+{"version":3,"file":"gov-form-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AACtE,OAAO,EACL,cAAc,EACd,oBAAoB,EAEpB,cAAc,EAEf,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAM5D,MAAM,OAAO,YAAY;EAGvB;eAQ4C,SAAS;uBAIK,UAAU;IAXlE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC5B;EAaD,WAAW,CAAC,QAAgB;IAC1B,IAAI,QAAQ,EAAE;MACZ,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;KAC5D;EACH,CAAC;EAGD,mBAAmB,CAAC,QAAgB;IAClC,IAAI,QAAQ,EAAE;MACZ,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;KAClE;EACH,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;EAC5C,CAAC;EAID,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC;MAC7D,eAAa,CACR,CACR,CAAA;EACH,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {Component, Element, h, Host, Prop, Watch} from \"@stencil/core\"\nimport {\n  FormGroupClass,\n  FormGroupOrientation,\n  FormGroupOrientationType,\n  FormGroupSizes,\n  FormGroupSizesType\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\n\n@Component({\n  tag: \"gov-form-group\",\n  styleUrl: \"gov-form-group.scss\",\n})\nexport class GovFormGroup {\n  private readonly h: GovHost\n\n  constructor() {\n    this.h = govHost(this.host)\n  }\n\n  @Element() host: HTMLGovFormGroupElement\n  /**\n   * Gap's size.\n   */\n  @Prop() readonly gap?: FormGroupSizesType = undefined\n  /**\n   * Elements orientation\n   */\n  @Prop() readonly orientation?: FormGroupOrientationType = 'vertical'\n\n  @Watch(\"gap\")\n  validateGap(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupSizes, newValue, FormGroupClass.root)\n    }\n  }\n\n  @Watch(\"orientation\")\n  validateOrientation(newValue: string): void {\n    if (newValue) {\n      validateProp(FormGroupOrientation, newValue, FormGroupClass.root)\n    }\n  }\n\n  componentWillLoad(): void {\n    this.validateGap(this.gap)\n    this.validateOrientation(this.orientation)\n  }\n\n\n\n  render() {\n    return (\n      <Host gap={this.gap} class={this.h.classes(FormGroupClass.root)}>\n        <slot></slot>\n      </Host>\n    )\n  }\n}\n"]}

package/dist/collection/components/gov-form/group/gov-form-group.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=gov-form-group.types.js.map

package/dist/collection/components/gov-form/group/gov-form-group.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-group.types.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-group.types.ts"],"names":[],"mappings":"","sourcesContent":["import { GovBaseEvent } from \"../../../types/event.types\"\n\nexport interface FormRadioGroupEvent extends GovBaseEvent {\n\tvalue: string;\n}\n\nexport interface FormCheckboxGroupEvent extends GovBaseEvent {\n\tvalue: string[];\n}\n"]}

package/dist/collection/components/gov-form/group/gov-form-radio-group.js

@@ -0,0 +1,166 @@
+import { h, Host } from "@stencil/core";
+import { FormGroupClass, FormGroupOrientation, FormGroupSizes, FormRadioGroupClass } from "./constants";
+import { govHost } from "../../../helpers/Dom/template";
+import { validateProp } from "../../../helpers/Validate/props";
+import { tick } from "../../../utils/stencil.utils";
+export class GovFormRadioGroup {
+  constructor() {
+    this.handleChange = (event) => {
+      event.stopPropagation();
+      this.value = event.detail.value;
+      this.govChange.emit({
+        value: this.value,
+        component: FormRadioGroupClass.root,
+      });
+    };
+    this.gap = undefined;
+    this.orientation = 'vertical';
+    this.value = undefined;
+    this.h = govHost(this.host);
+  }
+  validateGap(newValue) {
+    if (newValue) {
+      validateProp(FormGroupSizes, newValue, FormGroupClass.root);
+    }
+  }
+  validateOrientation(newValue) {
+    if (newValue) {
+      validateProp(FormGroupOrientation, newValue, FormGroupClass.root);
+    }
+  }
+  componentWillLoad() {
+    this.validateGap(this.gap);
+    this.validateOrientation(this.orientation);
+  }
+  componentDidRender() {
+    tick(() => this.rerenderComponent());
+  }
+  rerenderComponent() {
+    this.host.querySelectorAll('gov-form-radio').forEach((element) => {
+      if (!element.hasAttribute('listener-attached')) {
+        element.addEventListener('gov-change', this.handleChange);
+      }
+      element.setAttribute('listener-attached', 'true');
+      element.checked = element.value === this.value;
+    });
+  }
+  render() {
+    return (h(Host, { gap: this.gap, class: this.h.classes(FormGroupClass.root), value: this.value }, h("slot", null)));
+  }
+  static get is() { return "gov-form-radio-group"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-group.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-group.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "gap": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FormGroupSizesType",
+          "resolved": "\"2xs\" | \"l\" | \"m\" | \"s\" | \"xs\"",
+          "references": {
+            "FormGroupSizesType": {
+              "location": "import",
+              "path": "./constants",
+              "id": "../../../packages/core/src/components/gov-form/group/constants.ts::FormGroupSizesType"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Gap's size."
+        },
+        "attribute": "gap",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "orientation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FormGroupOrientationType",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {
+            "FormGroupOrientationType": {
+              "location": "import",
+              "path": "./constants",
+              "id": "../../../packages/core/src/components/gov-form/group/constants.ts::FormGroupOrientationType"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Elements orientation"
+        },
+        "attribute": "orientation",
+        "reflect": false,
+        "defaultValue": "'vertical'"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Group's value"
+        },
+        "attribute": "value",
+        "reflect": false,
+        "defaultValue": "undefined"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "govChange",
+        "name": "gov-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the checkbox change value."
+        },
+        "complexType": {
+          "original": "FormRadioGroupEvent",
+          "resolved": "FormRadioGroupEvent",
+          "references": {
+            "FormRadioGroupEvent": {
+              "location": "import",
+              "path": "./gov-form-group.types",
+              "id": "../../../packages/core/src/components/gov-form/group/gov-form-group.types.ts::FormRadioGroupEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "gap",
+        "methodName": "validateGap"
+      }, {
+        "propName": "orientation",
+        "methodName": "validateOrientation"
+      }];
+  }
+}
+//# sourceMappingURL=gov-form-radio-group.js.map

package/dist/collection/components/gov-form/group/gov-form-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-radio-group.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/group/gov-form-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAC,MAAM,eAAe,CAAA;AAC3F,OAAO,EACN,cAAc,EACd,oBAAoB,EAEpB,cAAc,EAEd,mBAAmB,EACnB,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAC,OAAO,EAAC,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAC,YAAY,EAAC,MAAM,iCAAiC,CAAA;AAG5D,OAAO,EAAC,IAAI,EAAC,MAAM,8BAA8B,CAAA;AAMjD,MAAM,OAAO,iBAAiB;EAG7B;IAoCA,iBAAY,GAAG,CAAC,KAAkC,EAAE,EAAE;MACrD,KAAK,CAAC,eAAe,EAAE,CAAA;MACvB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAA;MAC/B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;QACnB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,SAAS,EAAE,mBAAmB,CAAC,IAAI;OACnC,CAAC,CAAA;IACH,CAAC,CAAA;eAnC2C,SAAS;uBAIK,UAAU;iBAIR,SAAS;IAfpE,IAAI,CAAC,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;GAC3B;EAqBD,WAAW,CAAC,QAAgB;IAC3B,IAAI,QAAQ,EAAE;MACb,YAAY,CAAC,cAAc,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;KAC3D;EACF,CAAC;EAGD,mBAAmB,CAAC,QAAgB;IACnC,IAAI,QAAQ,EAAE;MACb,YAAY,CAAC,oBAAoB,EAAE,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,CAAA;KACjE;EACF,CAAC;EAWD,iBAAiB;IAChB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC1B,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;EAC3C,CAAC;EAED,kBAAkB;IACjB,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAA;EACrC,CAAC;EAED,iBAAiB;IAChB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE;MAChE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,mBAAmB,CAAC,EAAE;QAC/C,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAA;OACzD;MACD,OAAO,CAAC,YAAY,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAA;MACjD,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;IAChD,CAAC,CAAC,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;MACjF,eAAa,CACP,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import {Component, Element, Event, EventEmitter, h, Host, Prop, Watch} from \"@stencil/core\"\nimport {\n\tFormGroupClass,\n\tFormGroupOrientation,\n\tFormGroupOrientationType,\n\tFormGroupSizes,\n\tFormGroupSizesType,\n\tFormRadioGroupClass\n} from \"./constants\"\nimport {GovHost} from \"../../../helpers/Dom/template.types\"\nimport {govHost} from \"../../../helpers/Dom/template\"\nimport {validateProp} from \"../../../helpers/Validate/props\"\nimport {FormRadioEvent} from \"../radio/gov-form-radio.types\"\nimport {FormRadioGroupEvent} from \"./gov-form-group.types\"\nimport {tick} from \"../../../utils/stencil.utils\"\n\n@Component({\n\ttag: \"gov-form-radio-group\",\n\tstyleUrl: \"gov-form-group.scss\",\n})\nexport class GovFormRadioGroup {\n\tprivate readonly h: GovHost\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t}\n\n\t@Element() host: HTMLGovFormGroupElement\n\t/**\n\t * Gap's size.\n\t */\n\t@Prop() readonly gap?: FormGroupSizesType = undefined\n\t/**\n\t * Elements orientation\n\t */\n\t@Prop() readonly orientation?: FormGroupOrientationType = 'vertical'\n\t/**\n\t * Group's value\n\t */\n\t@Prop({attribute: \"value\", mutable: true}) value?: string = undefined\n\t/**\n\t * Emitted when the checkbox change value.\n\t */\n\t@Event({eventName: \"gov-change\"}) govChange: EventEmitter<FormRadioGroupEvent>\n\n\t@Watch(\"gap\")\n\tvalidateGap(newValue: string): void {\n\t\tif (newValue) {\n\t\t\tvalidateProp(FormGroupSizes, newValue, FormGroupClass.root)\n\t\t}\n\t}\n\n\t@Watch(\"orientation\")\n\tvalidateOrientation(newValue: string): void {\n\t\tif (newValue) {\n\t\t\tvalidateProp(FormGroupOrientation, newValue, FormGroupClass.root)\n\t\t}\n\t}\n\n\thandleChange = (event: CustomEvent<FormRadioEvent>) => {\n\t\tevent.stopPropagation()\n\t\tthis.value = event.detail.value\n\t\tthis.govChange.emit({\n\t\t\tvalue: this.value,\n\t\t\tcomponent: FormRadioGroupClass.root,\n\t\t})\n\t}\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateGap(this.gap)\n\t\tthis.validateOrientation(this.orientation)\n\t}\n\n\tcomponentDidRender(): void {\n\t\ttick(() => this.rerenderComponent())\n\t}\n\n\trerenderComponent(): void {\n\t\tthis.host.querySelectorAll('gov-form-radio').forEach((element) => {\n\t\t\tif (!element.hasAttribute('listener-attached')) {\n\t\t\t\telement.addEventListener('gov-change', this.handleChange)\n\t\t\t}\n\t\t\telement.setAttribute('listener-attached', 'true')\n\t\t\telement.checked = element.value === this.value;\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host gap={this.gap} class={this.h.classes(FormGroupClass.root)} value={this.value}>\n\t\t\t\t<slot></slot>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-form/multiselect/gov-form-multi-select.css

@@ -616,6 +616,7 @@
 }
 .gov-form-multi-select__wrap {
   display: flex;
+  align-items: center;
   gap: 0.5rem;
   width: 100%;
 }