@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1,235 @@
+/* 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);
+  }
+}
+/*
+*   Form Control
+*/
+.gov-form-control {
+  display: flex;
+  flex-direction: column;
+}
+.gov-form-control__bottom > *:last-child {
+  margin-bottom: 0;
+}
+.gov-form-control[type=file] .gov-form-label[slot=top] .gov-form-label__label {
+  margin: 0rem 0rem 0.5rem;
+}
+.gov-form-control[type=file] .gov-form-control__bottom {
+  margin: 0.5rem 0rem 0rem;
+}
+.gov-form-control[type=input] .gov-form-label .gov-form-label__label, .gov-form-control[type=select] .gov-form-label .gov-form-label__label {
+  margin-bottom: 0rem 0rem 0.25rem;
+}
+.gov-form-control[type=input] .gov-form-control__bottom, .gov-form-control[type=select] .gov-form-control__bottom {
+  margin-top: 0.25rem 0rem 0rem;
+}
+.gov-form-control[invalid=""] .gov-form-label[slot=top] .gov-form-label__label, .gov-form-control[invalid=true i] .gov-form-label[slot=top] .gov-form-label__label, .gov-form-control[invalid="1"] .gov-form-label[slot=top] .gov-form-label__label {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+.gov-form-control[disabled=""] .gov-form-label__label, .gov-form-control[disabled=true i] .gov-form-label__label, .gov-form-control[disabled="1"] .gov-form-label__label {
+  pointer-events: none;
+}
+.gov-form-control[size=xs][type=checkbox] .gov-form-control__bottom, .gov-form-control[size=xs][type=radio] .gov-form-control__bottom {
+  margin-top: 0.5rem;
+  margin-left: 2rem;
+}
+.gov-form-control[size=s][type=checkbox] .gov-form-control__bottom, .gov-form-control[size=s][type=radio] .gov-form-control__bottom {
+  margin-top: 0.5rem;
+  margin-left: 2.125rem;
+}
+.gov-form-control[size=m][type=checkbox] .gov-form-control__bottom, .gov-form-control[size=m][type=radio] .gov-form-control__bottom {
+  margin-top: 0.75rem;
+  margin-left: 2.5rem;
+}
+.gov-form-control[size=l][type=checkbox] .gov-form-control__bottom, .gov-form-control[size=l][type=radio] .gov-form-control__bottom {
+  margin-top: 0.75rem;
+  margin-left: 3rem;
+}
+.gov-form-control[size=xs][type=switch] .gov-form-control__bottom {
+  margin-top: 0.5rem;
+  margin-left: 2.8333333333rem;
+}
+.gov-form-control[size=s][type=switch] .gov-form-control__bottom {
+  margin-top: 0.5rem;
+  margin-left: 3.0416666667rem;
+}
+.gov-form-control[size=m][type=switch] .gov-form-control__bottom {
+  margin-top: 0.75rem;
+  margin-left: 3.5rem;
+}
+.gov-form-control[size=l][type=switch] .gov-form-control__bottom {
+  margin-top: 0.75rem;
+  margin-left: 4.3333333333rem;
+}

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { govHost } from "../../../helpers/Dom/template";
+import { govForm } from "../../../helpers/Dom/form";
+import { createID, splitByWhitespace } from "../../../utils/string.utils";
+import { FormControlClass } from "./constants";
+import { Sizes } from "../../../core/constants/sizes";
+export class GovFormControl {
+  constructor() {
+    this.identifier = undefined;
+    this.invalid = false;
+    this.disabled = false;
+    this.success = false;
+    this.size = Sizes._M;
+    this.h = govHost(this.host);
+    this.f = govForm(this.h);
+    this.controlId = createID("GovFormControl");
+  }
+  watchInvalid() {
+    this.passChildAttrs();
+  }
+  componentDidRender() {
+    this.passChildAttrs();
+    this.syncControlMessages();
+    this.formElementDescriptionControl();
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  passChildAttrs() {
+    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, "size", this.size);
+    this.h.passChildAttr(formElements, "invalid", this.invalid);
+    this.h.passChildAttr(formElements, "disabled", this.disabled);
+    this.h.passChildAttr(formElements, "success", this.success);
+    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)
+      return;
+    this.observer = new MutationObserver(function () {
+      this.syncControlMessages();
+    }.bind(this));
+    this.observer.observe(bottomSlot, { childList: true });
+  }
+  syncControlMessages() {
+    Promise.all(this.f.messageElements.map((message) => message.identifier()))
+      .then((ids) => {
+      this.f.mainElementsInControl.forEach((element) => {
+        const currentValue = splitByWhitespace(element.getAttribute("wcag-described-by"));
+        element.removeAttribute("wcag-described-by");
+        if (Array.isArray(currentValue)) {
+          currentValue.forEach((id) => id.indexOf("GovFormMessage") === -1 ? ids.push(id) : null);
+        }
+        if (ids.length) {
+          element.setAttribute("wcag-described-by", ids.join(" "));
+        }
+      });
+    });
+  }
+  render() {
+    return (h(Host, { size: this.size, class: this.h.classes(FormControlClass.root) }, this.h.hasSlot("top") && h("slot", { name: "top" }), h("slot", null), this.h.hasSlot("bottom") &&
+      h("div", { class: FormControlClass.bottom }, h("slot", { name: "bottom" }))));
+  }
+  static get is() { return "gov-form-control"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-form-control.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-form-control.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "identifier": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Form element identifier"
+        },
+        "attribute": "identifier",
+        "reflect": false
+      },
+      "invalid": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the entered value of child form element does not conform to the format expected by the application."
+        },
+        "attribute": "invalid",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "/**\n  Indicates the form element is disabled"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "success": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "/**\n  Indicates the entered value of child form element does conform to the format expected by the application."
+        },
+        "attribute": "success",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "size": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "SizesType",
+          "resolved": "any",
+          "references": {
+            "SizesType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Form element size."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "Sizes._M"
+      }
+    };
+  }
+  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

@@ -0,0 +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, Host, h, Prop, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.d\"\nimport { GovForm } from \"../../../helpers/Dom/form.d\"\nimport { govHost } from \"../../../helpers/Dom/template\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { createID, splitByWhitespace } from \"../../../utils/string.utils\"\nimport { SizesType, FormControlClass } from \"./constants\"\nimport { Sizes } from \"../../../core/constants/sizes\"\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/**\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 * Form element size.\n\t */\n\t@Prop() readonly size: SizesType = Sizes._M\n\n\t@Element() host: HTMLGovFormControlElement\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 = [\"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\"]\n\t\tthis.h.passChildAttr(formElements, \"size\", this.size)\n\t\tthis.h.passChildAttr(formElements, \"invalid\", this.invalid)\n\t\tthis.h.passChildAttr(formElements, \"disabled\", this.disabled)\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\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(function() {\n\t\t\tthis.syncControlMessages()\n\t\t}.bind(this))\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()))\n\t\t\t.then((ids: string[]) => {\n\t\t\t\tthis.f.mainElementsInControl.forEach((element: Element) => {\n\t\t\t\t\tconst currentValue = splitByWhitespace(element.getAttribute(\"wcag-described-by\"))\n\t\t\t\t\telement.removeAttribute(\"wcag-described-by\")\n\t\t\t\t\tif (Array.isArray(currentValue)) {\n\t\t\t\t\t\tcurrentValue.forEach((id) => id.indexOf(\"GovFormMessage\") === -1 ? ids.push(id) : null)\n\t\t\t\t\t}\n\t\t\t\t\tif (ids.length) {\n\t\t\t\t\t\telement.setAttribute(\"wcag-described-by\", ids.join(\" \"))\n\t\t\t\t\t}\n\t\t\t\t})\n\t\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host size={this.size} class={this.h.classes(FormControlClass.root)}>\n\t\t\t\t{this.h.hasSlot(\"top\") && <slot name=\"top\"></slot>}\n\t\t\t\t<slot></slot>\n\t\t\t\t{this.h.hasSlot(\"bottom\") &&\n\t\t\t\t\t<div class={FormControlClass.bottom}>\n\t\t\t\t\t\t<slot name=\"bottom\" />\n\t\t\t\t\t</div>\n\t\t\t\t}\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

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

@@ -0,0 +1,10 @@
+export const FormFileClass = {
+  root: 'gov-form-file',
+  area: 'gov-form-file__area',
+  label: 'gov-form-file__label',
+  input: 'gov-form-file__input',
+  list: 'gov-form-file__list',
+  item: 'gov-form-file__item',
+  attachments: 'gov-form-file__attachments',
+};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/file/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;EAC5B,IAAI,EAAE,eAAe;EACrB,IAAI,EAAE,qBAAqB;EAC3B,KAAK,EAAE,sBAAsB;EAC7B,KAAK,EAAE,sBAAsB;EAC7B,IAAI,EAAE,qBAAqB;EAC3B,IAAI,EAAE,qBAAqB;EAC3B,WAAW,EAAE,4BAA4B;CACzC,CAAA","sourcesContent":["export const FormFileClass = {\n\troot: 'gov-form-file',\n\tarea: 'gov-form-file__area',\n\tlabel: 'gov-form-file__label',\n\tinput: 'gov-form-file__input',\n\tlist: 'gov-form-file__list',\n\titem: 'gov-form-file__item',\n\tattachments: 'gov-form-file__attachments',\n}\n"]}

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

@@ -0,0 +1,240 @@
+/* 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);
+  }
+}
+/*
+*   File
+*/
+.gov-form-file {
+  position: relative;
+  display: block;
+  width: 100%;
+}
+.gov-form-file__label .gov-form-label__label > *:last-child {
+  margin-bottom: 0;
+}
+.gov-form-file__input {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.0001;
+  cursor: pointer;
+}
+.gov-form-file__attachments {
+  margin-top: 1rem 0rem 0rem;
+}
+.gov-form-file__item {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+.gov-form-file[disabled=""] .gov-form-label__label, .gov-form-file[disabled=true i] .gov-form-label__label, .gov-form-file[disabled="1"] .gov-form-label__label {
+  pointer-events: none;
+}
+.gov-form-file[disabled=""] .gov-form-label__label *, .gov-form-file[disabled=true i] .gov-form-label__label *, .gov-form-file[disabled="1"] .gov-form-label__label * {
+  color: var(--gov-form-file-disabled-color, var(--gov-color-secondary-600));
+}
+.gov-form-file[expanded=""] .gov-form-file__area, .gov-form-file[expanded=true i] .gov-form-file__area, .gov-form-file[expanded="1"] .gov-form-file__area {
+  position: relative;
+  width: 100%;
+  padding: 2rem 1.375rem 1.375rem;
+  border: var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));
+  text-align: center;
+  transition: background-color 150ms ease-in-out;
+  will-change: background-color;
+}
+.gov-form-file[expanded=""] .gov-form-file__area.highlight, .gov-form-file[expanded=true i] .gov-form-file__area.highlight, .gov-form-file[expanded="1"] .gov-form-file__area.highlight {
+  background-color: var(--gov-color-primary-200);
+}
+.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 {
+  width: 100%;
+  padding: 1.375rem;
+  border: var(--gov-form-file-border, 0.0625rem dashed var(--gov-color-secondary-500));
+  text-align: center;
+}
+.gov-form-file[expanded=""] .gov-form-file__attachments, .gov-form-file[expanded=true i] .gov-form-file__attachments, .gov-form-file[expanded="1"] .gov-form-file__attachments {
+  margin: 1.5rem 0rem 0rem;
+}
+.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));
+}
+@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;
+  }
+}