@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1,108 @@
+import { h, Host } from '@stencil/core';
+import { validateProp } from '../../../helpers/Validate/props';
+import { FormSearchClass, Variants } from './constants';
+import { Sizes } from '../../../core/constants/sizes';
+import { Variants as GlobalVariants } from "../../../core/constants/variants";
+export class GovFormSearch {
+  constructor() {
+    this.size = Sizes._M;
+    this.variant = GlobalVariants.PRIMARY;
+  }
+  validateSize(newValue) {
+    validateProp(Sizes, newValue, FormSearchClass.root);
+  }
+  validateVariant(newValue) {
+    validateProp(Variants, newValue, FormSearchClass.root);
+  }
+  componentWillLoad() {
+    this.validateSize(this.size);
+    this.validateVariant(this.variant);
+  }
+  render() {
+    switch (this.size) {
+      case Sizes._M:
+        var buttonSize = Sizes._S;
+        break;
+      case Sizes._L:
+      default:
+        var buttonSize = Sizes._M;
+        break;
+      case Sizes._XL:
+        var buttonSize = Sizes._L;
+        break;
+    }
+    return (h(Host, { class: FormSearchClass.root }, h("span", { class: FormSearchClass.input }, h("slot", { name: "input" })), h("span", { class: FormSearchClass.button }, h("gov-button", { slot: "button", variant: this.variant, size: buttonSize }, h("slot", { name: "button" })))));
+  }
+  static get is() { return "gov-form-search"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-search.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-search.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizesType",
+          "resolved": "any",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size variation of the component."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Sizes._M"
+      },
+      "variant": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "VariantType",
+          "resolved": "any",
+          "references": {
+            "VariantType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the component."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "GlobalVariants.PRIMARY"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "size",
+        "methodName": "validateSize"
+      }, {
+        "propName": "variant",
+        "methodName": "validateVariant"
+      }];
+  }
+}
+//# sourceMappingURL=gov-form-search.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-search.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/search/gov-form-search.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAa,QAAQ,EAAe,MAAM,aAAa,CAAA;AAC/E,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAA;AACrD,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAM7E,MAAM,OAAO,aAAa;;gBAOU,KAAK,CAAC,EAAE;mBAIH,cAAc,CAAC,OAAO;;EAG9D,YAAY,CAAC,QAAgB;IAC5B,YAAY,CAAC,KAAK,EAAE,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,CAAA;EACpD,CAAC;EAGD,eAAe,CAAC,QAAgB;IAC/B,YAAY,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,CAAA;EACvD,CAAC;EAGD,iBAAiB;IAChB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC5B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;EACnC,CAAC;EAGD,MAAM;IACL,QAAQ,IAAI,CAAC,IAAI,EAAE;MAClB,KAAK,KAAK,CAAC,EAAE;QACZ,IAAI,UAAU,GAAG,KAAK,CAAC,EAAE,CAAA;QACzB,MAAM;MACP,KAAK,KAAK,CAAC,EAAE,CAAC;MACd;QACC,IAAI,UAAU,GAAG,KAAK,CAAC,EAAE,CAAA;QACzB,MAAM;MACP,KAAK,KAAK,CAAC,GAAG;QACb,IAAI,UAAU,GAAG,KAAK,CAAC,EAAE,CAAA;QACzB,MAAM;KACP;IAED,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,eAAe,CAAC,IAAI;MAChC,YAAM,KAAK,EAAE,eAAe,CAAC,KAAK;QACjC,YAAM,IAAI,EAAC,OAAO,GAAG,CACf;MACP,YAAM,KAAK,EAAE,eAAe,CAAC,MAAM;QAClC,kBAAY,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,UAAU;UAChE,YAAM,IAAI,EAAC,QAAQ,GAAG,CACV,CACP,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'\nimport { validateProp } from '../../../helpers/Validate/props'\nimport { FormSearchClass, SizesType, Variants, VariantType } from './constants'\nimport { Sizes } from '../../../core/constants/sizes'\nimport { Variants as GlobalVariants } from \"../../../core/constants/variants\"\n\n@Component({\n\ttag: 'gov-form-search',\n\tstyleUrl: 'gov-form-search.scss',\n})\nexport class GovFormSearch {\n\t\n\t@Element() host: HTMLGovFormSearchElement\n\n\t/**\n\t * Size variation of the component.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\t/**\n\t * Style variation of the component.\n\t */\n\t@Prop() readonly variant: VariantType = GlobalVariants.PRIMARY\n\n\t@Watch('size')\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSearchClass.root)\n\t}\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(Variants, newValue, FormSearchClass.root)\n\t}\n\n\n\tcomponentWillLoad(): void {\n\t\tthis.validateSize(this.size)\n\t\tthis.validateVariant(this.variant)\n\t}\n\n\n\trender() {\n\t\tswitch (this.size) {\n\t\t\tcase Sizes._M:\n\t\t\t\tvar buttonSize = Sizes._S\n\t\t\t\tbreak;\n\t\t\tcase Sizes._L:\n\t\t\tdefault:\n\t\t\t\tvar buttonSize = Sizes._M\n\t\t\t\tbreak;\n\t\t\tcase Sizes._XL:\n\t\t\t\tvar buttonSize = Sizes._L\n\t\t\t\tbreak;\n\t\t}\n\n\t\treturn (\n\t\t\t<Host class={FormSearchClass.root}>\n\t\t\t\t<span class={FormSearchClass.input}>\n\t\t\t\t\t<slot name=\"input\" />\n\t\t\t\t</span>\n\t\t\t\t<span class={FormSearchClass.button}>\n\t\t\t\t\t<gov-button slot=\"button\" variant={this.variant} size={buttonSize}>\n\t\t\t\t\t\t<slot name=\"button\" />\n\t\t\t\t\t</gov-button>\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,15 @@
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+import { Variants as GlobalVariants } from "../../../core/constants/variants";
+export const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL];
+export const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY];
+export const FormSelectClass = {
+  root: 'gov-form-select',
+  icon: 'gov-form-select__icon',
+};
+export const FormMultiSelectClass = {
+  root: 'gov-form-multi-select',
+  wrap: 'gov-form-multi-select__wrap',
+  list: 'gov-form-multi-select__list',
+  item: 'gov-form-multi-select__item',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/constants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,QAAQ,IAAI,cAAc,EAAE,MAAM,kCAAkC,CAAA;AAE7E,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,EAAE,EAAE,WAAW,CAAC,GAAG,CAAU,CAAA;AAG1F,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,cAAc,CAAC,SAAS,CAAU,CAAA;AAG9F,MAAM,CAAC,MAAM,eAAe,GAAG;EAC9B,IAAI,EAAE,iBAAiB;EACvB,IAAI,EAAE,uBAAuB;CAC7B,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG;EACnC,IAAI,EAAE,uBAAuB;EAC7B,IAAI,EAAE,6BAA6B;EACnC,IAAI,EAAE,6BAA6B;EACnC,IAAI,EAAE,6BAA6B;CACnC,CAAA","sourcesContent":["import { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\nimport { Variants as GlobalVariants } from \"../../../core/constants/variants\"\n\nexport const Sizes = [undefined, GlobalSizes._M, GlobalSizes._L, GlobalSizes._XL] as const\nexport type SizesType = typeof Sizes[number]\n\nexport const Variants = [undefined, GlobalVariants.PRIMARY, GlobalVariants.SECONDARY] as const\nexport type VariantType = typeof Variants[number]\n\nexport const FormSelectClass = {\n\troot: 'gov-form-select',\n\ticon: 'gov-form-select__icon',\n}\n\nexport const FormMultiSelectClass = {\n\troot: 'gov-form-multi-select',\n\twrap: 'gov-form-multi-select__wrap',\n\tlist: 'gov-form-multi-select__list',\n\titem: 'gov-form-multi-select__item',\n}\n\n\n"]}

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

@@ -0,0 +1,460 @@
+.gov-form-multi-select__list {
+  margin: 0;
+  padding: 0;
+}
+
+.gov-form-multi-select__list > .gov-form-multi-select__item {
+  margin: 0;
+  padding: 0;
+  background: none;
+}
+.gov-form-multi-select__list > .gov-form-multi-select__item::before {
+  display: none;
+}
+
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* stylelint-disable */
+/* stylelint-enable */
+/* [Core] - Buttons
+------------------------------------------------------------------ */
+/*
+ * Gets color from theme-colors or from palette-colors
+ */
+/*
+ * Converts hex value to rgb colors value
+ */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/*
+ * Generates list of utility classes for margin, padding
+ *
+ * Make sure $list of definitions is sorted so that last item is defined last
+ * So largest views are mentioned last.
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Layout
+ */
+/**
+* Utilities - Offset
+*/
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/* stylelint-disable order/order */
+/* stylelint-enable order/order */
+/**
+* Generates CSS3 var with default value
+*/
+/*
+ -  Variables - General
+ */
+/*
+ -  Variables - Typography
+ */
+/*
+ -  Variables - Sizes
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Variants
+ */
+/*
+ -  Variables - Layout
+ */
+/*
+ -  Variables - Accordion
+ */
+/*
+ -  Variables - Attachments
+ */
+/*
+ -  Variables - Alert
+ */
+/*
+ -  Variables - Backdrop
+ */
+/*
+ -  Variables - Buttons (&& Badges)
+ */
+/*
+ -  Variables - Classes
+ */
+/*
+ -  Variables - Colors
+ */
+/*
+ -  Variables - Cookiebar
+ */
+/*
+ -  Variables - Card
+ */
+/*
+ -  Variables - Container
+ */
+/*
+ -  Variables - Message
+ */
+/*
+ -  Variables - Empty
+ */
+/*
+ -  Variables - Error code
+ */
+/*
+ -  Variables - Grid
+ */
+/*
+ -  Variables - Modal & Prompt
+ */
+/**
+* Utilities - Offset
+*/
+/*
+ -  Variables - shadows
+ */
+/* "Constants" for general usage */
+/*
+ -  Variables - Statsbar
+ */
+/*
+ -  Variables - Tabs
+ */
+/*
+ -  Variables - Tooltip
+ */
+/*
+ -	Variables - Forms
+ */
+/*
+ -  Variables - Form Autocomplete
+ */
+/*
+ -  Variables - Form Message
+ */
+/*
+ -	Variables - Form label
+ */
+/*
+ -	Variables - Form switch
+ */
+/*
+ -	Variables - Form select
+ */
+/*
+ -	Variables - Form input
+ */
+/*
+ -	Variables - Form multiselect
+ */
+/*
+ -	Variables - Form checkbox & radio
+ */
+/*
+ -	Variables - Form file
+ */
+/*
+ -  Variables - Toast Message
+ */
+/*
+ -  Variables - Wizzard
+ */
+/*
+ -  Variables - Stepper
+ */
+/*
+ -  Variables - Grid & Tile
+ */
+/*
+ -  Variables - Pagination
+ */
+.gov-spin-animation,
+.gov-pseudo-spin-animation::before {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+/*
+*   Multiselect
+*/
+.gov-form-multi-select {
+  display: flex;
+  align-items: center;
+}
+.gov-form-multi-select .element {
+  position: relative;
+  flex: 1 1 auto;
+}
+.gov-form-multi-select input,
+.gov-form-multi-select select,
+.gov-form-multi-select 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-secondary-100));
+  color: var(--gov-form-input-color, var(--gov-color-secondary-700));
+  font-family: "Roboto", sans-serif;
+}
+.gov-form-multi-select input:focus,
+.gov-form-multi-select select:focus,
+.gov-form-multi-select textarea:focus {
+  outline: none;
+}
+.gov-form-multi-select input:focus-visible,
+.gov-form-multi-select select:focus-visible,
+.gov-form-multi-select textarea:focus-visible {
+  border-radius: var(--gov-border-radius, 0.1875rem);
+  outline: var(--gov-outline-width, 0.125rem) solid var(--gov-color-focus-base);
+  outline-offset: 0;
+}
+.gov-form-multi-select input::-moz-placeholder, .gov-form-multi-select select::-moz-placeholder, .gov-form-multi-select textarea::-moz-placeholder {
+  color: var(--gov-form-placeholder-color, var(--gov-color-secondary-600));
+}
+.gov-form-multi-select input::placeholder,
+.gov-form-multi-select select::placeholder,
+.gov-form-multi-select textarea::placeholder {
+  color: var(--gov-form-placeholder-color, var(--gov-color-secondary-600));
+}
+.gov-form-multi-select textarea {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  padding: 0.5rem 0.75rem;
+  resize: none;
+}
+.gov-form-multi-select *[slot=left-icon],
+.gov-form-multi-select *[slot=right-icon] {
+  position: absolute;
+  top: 50%;
+  display: flex;
+  justify-content: center;
+  color: var(--gov-form-input-icon-color, var(--gov-color-primary));
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+.gov-form-multi-select *[slot=left-icon] {
+  left: 0;
+}
+.gov-form-multi-select *[slot=right-icon] {
+  right: 0;
+}
+[disabled=""].gov-form-multi-select, [disabled=true i].gov-form-multi-select, [disabled="1"].gov-form-multi-select {
+  pointer-events: none;
+}
+[disabled=""].gov-form-multi-select input,
+[disabled=""].gov-form-multi-select select,
+[disabled=""].gov-form-multi-select textarea, [disabled=true i].gov-form-multi-select input,
+[disabled=true i].gov-form-multi-select select,
+[disabled=true i].gov-form-multi-select textarea, [disabled="1"].gov-form-multi-select input,
+[disabled="1"].gov-form-multi-select select,
+[disabled="1"].gov-form-multi-select 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-multi-select *[slot=left-icon],
+[disabled=""].gov-form-multi-select *[slot=right-icon], [disabled=true i].gov-form-multi-select *[slot=left-icon],
+[disabled=true i].gov-form-multi-select *[slot=right-icon], [disabled="1"].gov-form-multi-select *[slot=left-icon],
+[disabled="1"].gov-form-multi-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[invalid=""].gov-form-multi-select input,
+[invalid=""].gov-form-multi-select select,
+[invalid=""].gov-form-multi-select textarea, [invalid=true i].gov-form-multi-select input,
+[invalid=true i].gov-form-multi-select select,
+[invalid=true i].gov-form-multi-select textarea, [invalid="1"].gov-form-multi-select input,
+[invalid="1"].gov-form-multi-select select,
+[invalid="1"].gov-form-multi-select 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-multi-select input::-moz-placeholder, [invalid=""].gov-form-multi-select select::-moz-placeholder, [invalid=""].gov-form-multi-select textarea::-moz-placeholder, [invalid=true i].gov-form-multi-select input::-moz-placeholder, [invalid=true i].gov-form-multi-select select::-moz-placeholder, [invalid=true i].gov-form-multi-select textarea::-moz-placeholder, [invalid="1"].gov-form-multi-select input::-moz-placeholder, [invalid="1"].gov-form-multi-select select::-moz-placeholder, [invalid="1"].gov-form-multi-select textarea::-moz-placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-multi-select input::placeholder,
+[invalid=""].gov-form-multi-select select::placeholder,
+[invalid=""].gov-form-multi-select textarea::placeholder, [invalid=true i].gov-form-multi-select input::placeholder,
+[invalid=true i].gov-form-multi-select select::placeholder,
+[invalid=true i].gov-form-multi-select textarea::placeholder, [invalid="1"].gov-form-multi-select input::placeholder,
+[invalid="1"].gov-form-multi-select select::placeholder,
+[invalid="1"].gov-form-multi-select textarea::placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-multi-select *[slot=left-icon],
+[invalid=""].gov-form-multi-select *[slot=right-icon], [invalid=true i].gov-form-multi-select *[slot=left-icon],
+[invalid=true i].gov-form-multi-select *[slot=right-icon], [invalid="1"].gov-form-multi-select *[slot=left-icon],
+[invalid="1"].gov-form-multi-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[invalid=""].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [invalid=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [invalid="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
+  display: none;
+}
+[success=""].gov-form-multi-select *[slot=right-icon], [success=true i].gov-form-multi-select *[slot=right-icon], [success="1"].gov-form-multi-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-success, var(--gov-color-success));
+}
+[success=""].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-multi-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
+  display: none;
+}
+[size=m].gov-form-multi-select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  gap: 0.5rem 1rem;
+}
+[size=m].gov-form-multi-select input,
+[size=m].gov-form-multi-select select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  padding: 0.4375rem 0.75rem;
+}
+[size=m].gov-form-multi-select *[slot=left-icon],
+[size=m].gov-form-multi-select *[slot=right-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+[size=m].gov-form-multi-select *[slot=left-icon] {
+  left: 0.75rem;
+}
+[size=m].gov-form-multi-select *[slot=left-icon] ~ input {
+  padding-left: 2.5rem;
+}
+[size=m].gov-form-multi-select *[slot=right-icon] {
+  right: 0.75rem;
+}
+[size=m].gov-form-multi-select *[slot=right-icon] ~ input, [size=m].gov-form-multi-select *[slot=right-icon] ~ select {
+  padding-right: 2.5rem;
+}
+[size=l].gov-form-multi-select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  gap: 0.5rem 1rem;
+}
+[size=l].gov-form-multi-select input,
+[size=l].gov-form-multi-select select {
+  font-weight: var(--gov-text-m-font-weight);
+  font-size: var(--gov-text-m-font-size);
+  line-height: var(--gov-text-m-line-height);
+  letter-spacing: var(--gov-text-m-letter-spacing);
+  padding: 0.6875rem 0.75rem;
+}
+[size=l].gov-form-multi-select *[slot=left-icon],
+[size=l].gov-form-multi-select *[slot=right-icon] {
+  width: 1rem;
+  height: 1rem;
+}
+[size=l].gov-form-multi-select *[slot=left-icon] {
+  left: 0.75rem;
+}
+[size=l].gov-form-multi-select *[slot=left-icon] ~ input {
+  padding-left: 2.5rem;
+}
+[size=l].gov-form-multi-select *[slot=right-icon] {
+  right: 0.75rem;
+}
+[size=l].gov-form-multi-select *[slot=right-icon] ~ input, [size=l].gov-form-multi-select *[slot=right-icon] ~ select {
+  padding-right: 2.5rem;
+}
+[size=xl].gov-form-multi-select {
+  font-weight: var(--gov-text-l-font-weight);
+  font-size: var(--gov-text-l-font-size);
+  line-height: var(--gov-text-l-line-height);
+  letter-spacing: var(--gov-text-l-letter-spacing);
+  gap: 0.5rem 1.25rem;
+}
+[size=xl].gov-form-multi-select input,
+[size=xl].gov-form-multi-select select {
+  font-weight: var(--gov-text-l-font-weight);
+  font-size: var(--gov-text-l-font-size);
+  line-height: var(--gov-text-l-line-height);
+  letter-spacing: var(--gov-text-l-letter-spacing);
+  padding: 0.9375rem 1rem 0.875rem;
+}
+[size=xl].gov-form-multi-select *[slot=left-icon],
+[size=xl].gov-form-multi-select *[slot=right-icon] {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+[size=xl].gov-form-multi-select *[slot=left-icon] {
+  left: 0.875rem;
+}
+[size=xl].gov-form-multi-select *[slot=left-icon] ~ input {
+  padding-left: 3rem;
+}
+[size=xl].gov-form-multi-select *[slot=right-icon] {
+  right: 0.875rem;
+}
+[size=xl].gov-form-multi-select *[slot=right-icon] ~ input, [size=xl].gov-form-multi-select *[slot=right-icon] ~ select {
+  padding-right: 3rem;
+}
+
+.gov-form-multi-select {
+  background: none;
+}
+.gov-form-multi-select select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+.gov-form-multi-select select::-ms-expand {
+  display: none;
+}
+[size=m].gov-form-multi-select *[slot=right-icon] {
+  right: 1rem;
+  width: 0.5rem;
+  height: 0.5rem;
+}
+[size=l].gov-form-multi-select *[slot=right-icon] {
+  right: 1rem;
+  width: 0.5rem;
+  height: 0.5rem;
+}
+[size=xl].gov-form-multi-select *[slot=right-icon] {
+  right: 1.3125rem;
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+.gov-form-multi-select {
+  flex-wrap: wrap;
+}
+.gov-form-multi-select__wrap {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+.gov-form-multi-select__list {
+  font-weight: var(--gov-text-xs-font-weight);
+  font-size: var(--gov-text-xs-font-size);
+  line-height: var(--gov-text-xs-line-height);
+  letter-spacing: var(--gov-text-xs-letter-spacing);
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.gov-form-multi-select__list > .gov-form-multi-select__item {
+  position: relative;
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  padding: 0rem 0rem 0rem 0.5rem;
+  background: var(--gov-form-multiselect-bg, var(--gov-color-primary-200));
+  transition: 150ms linear background-color;
+}