@gov-design-system-ce/components 0.0.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-switch.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/gov-form-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Element, Watch, Method } from \"@stencil/core\"\nimport { createID } from \"../../../../src/utils/string.utils\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { FormSwitchClass, SizesType } from \"./constants\"\nimport { toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { delay } from \"../../../utils/utils\"\nimport { Sizes } from \"../../../core/constants/sizes\"\nimport {GovForm}from \"../../../helpers/Dom/form.d\"\nimport {govHost}from \"../../../helpers/Dom/template\"\nimport {govForm}from \"../../../helpers/Dom/form\"\n\n@Component({\n\ttag: \"gov-form-switch\",\n\tstyleUrl: \"gov-form-switch.scss\",\n})\nexport class GovFormSwitch {\n\tprivate f: GovForm\n\tprivate readonly checkboxId: string\n\n\tconstructor() {\n\t\tthis.checkboxId = createID(\"GovInput\")\n\n\t\tthis.f = govForm(govHost(this.host));\n\t}\n\n\t@Element() host: HTMLGovFormSwitchElement\n\t/**\n\t * Value of switch\n\t */\n\t@Prop() readonly value: string\n\t/**\n\t * Switch default state\n\t */\n\t@Prop({ reflect: true }) readonly checked: boolean = false\n\t/**\n\t * Set whether the input is required or not. Please note that this is necessary for accessible inputs when the user is required to fill them.\n\t * When using this property you need to also set “novalidate” attribute to your form element to prevent browser from displaying its own validation errors.\n\t */\n\t@Prop() readonly required: boolean = false\n\t/**\n\t * Makes the switch component disabled.\n\t * This prevents users from being able to interact with the switch, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\n\t/**\n\t * Name of the switch.\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Switch's size.\n\t */\n\t@Prop() readonly size: SizesType = undefined\n\t/**\n\t * Custom switch identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\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 * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-described-by\" }) readonly wcagDescribedBy: string\n\t/**\n\t * Indicates the id of a component that labels the input.\n\t */\n\t@Prop({ attribute: \"wcag-labelded-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Emitted when the switch has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the switch loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FocusEvent>\n\t/**\n\t * Emitted when the switch change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter\n\n\t@State() isChecked: boolean\n\n\t@Watch(\"checked\")\n\tupdateCheckedState(newValue: boolean): void {\n\t\tthis.isChecked = newValue\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(Sizes, newValue, FormSwitchClass.root)\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.isChecked = this.checked\n\n\t\tthis.f.passAttrToControl('type', 'switch')\n\t}\n\n\tasync componentDidRender() {\n\t\tif (canValidateWcagOnRender()) {\n\t\t\tawait delay(500)\n\t\t\tawait this.validateWcag()\n\t\t}\n\t}\n\n\trender() {\n\t\tconst { isChecked } = this\n\n\t\treturn (\n\t\t\t<Host class={FormSwitchClass.root} is-checked={isChecked} size={this.size} invalid={toBoolAttrIfDefined(this.invalid)}>\n\t\t\t\t<div class={FormSwitchClass.holder}>\n\t\t\t\t\t<input class={FormSwitchClass.input} id={this.identifier || this.checkboxId}\n\t\t\t\t\t       type=\"checkbox\"\n\t\t\t\t\t       value={this.value}\n\t\t\t\t\t       name={this.name}\n\t\t\t\t\t       checked={this.isChecked}\n\t\t\t\t\t       onChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t       onFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t       onBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t       required={this.required}\n\t\t\t\t\t       aria-checked={this.isChecked}\n\t\t\t\t\t       aria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t       aria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t       aria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t       aria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t       aria-disabled={toBoolAttrIfDefined(this.disabled)} />\n\t\t\t\t\t<span class={FormSwitchClass.indicator}></span>\n\t\t\t\t\t<slot name=\"label\"></slot>\n\t\t\t\t</div>\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.govFocus.emit(e)\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.govBlur.emit(e)\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.isChecked = (e.target as HTMLInputElement).checked\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tchecked: this.isChecked,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Validate the WCAG attributes of the component\n\t */\n\t@Method()\n\tasync validateWcag(): Promise<void> {\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSwitchClass.root)\n\t\tvalidateWcagRef(this.wcagLabelledBy, \"wcag-labelled-by\", FormSwitchClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.checkboxId, this.wcagLabelledBy, FormSwitchClass.root)\n\t}\n}\n"]}

package/dist/collection/components/gov-form/switch/gov-form-switch.stories.js

@@ -0,0 +1,78 @@
+import { Sizes } from "./constants";
+import { Sizes as GlobalSizes } from "../../../core/constants/sizes";
+// @ts-ignore
+import readme from "./readme.md";
+import { bindProps, removeUndefinedValues } from "../../../../.storybook/helpers";
+const StoryConfiguration = {
+  title: "Design system/Switch",
+  args: {
+    size: GlobalSizes._M,
+    label: 'This is label of switch',
+    errorMessage: '',
+    message: '',
+    disabled: false,
+  },
+  argTypes: {
+    size: {
+      control: "select",
+      options: removeUndefinedValues(Sizes),
+    },
+    label: "string",
+    errorMessage: "string",
+    message: "string",
+    disabled: "boolean",
+  },
+  parameters: {
+    notes: readme,
+  },
+};
+const propsControl = ["size", "disabled"];
+const propsInput = ["disabled"];
+const Template = (args) => {
+  let message;
+  const control = document.createElement('gov-form-control');
+  const label = document.createElement('gov-form-label');
+  const el = document.createElement("gov-form-switch");
+  label.innerHTML = args.label;
+  label.setAttribute('slot', 'label');
+  if (args.message || args.errorMessage) {
+    message = document.createElement('gov-form-message');
+    message.innerHTML = args.errorMessage || args.message;
+    message.setAttribute('slot', 'bottom');
+  }
+  if (args.message) {
+    message.setAttribute('variant', 'secondary');
+    control.appendChild(message);
+  }
+  if (args.errorMessage) {
+    control.setAttribute('invalid', 'true');
+    const icon = document.createElement('i');
+    icon.classList.add("fa-solid");
+    icon.classList.add("fa-warning");
+    icon.setAttribute('slot', 'icon');
+    message.setAttribute('variant', 'error');
+    message.appendChild(icon);
+    control.appendChild(message);
+  }
+  el.appendChild(label);
+  control.appendChild(el);
+  bindProps(control, propsControl, args);
+  bindProps(el, propsInput, args);
+  return control;
+};
+export const Playground = Template.bind({});
+Playground.args = {};
+export const Invalid = Template.bind({});
+Invalid.args = {
+  errorMessage: 'This field is required'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true
+};
+export const WithMessage = Template.bind({});
+WithMessage.args = {
+  message: 'Here you can put your name'
+};
+export default StoryConfiguration;
+//# sourceMappingURL=gov-form-switch.stories.js.map

package/dist/collection/components/gov-form/switch/gov-form-switch.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-form-switch.stories.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/switch/gov-form-switch.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAA;AACpE,aAAa;AACb,OAAO,MAAM,MAAM,aAAa,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAA;AAEjF,MAAM,kBAAkB,GAAG;EAC1B,KAAK,EAAE,sBAAsB;EAC7B,IAAI,EAAE;IACL,IAAI,EAAE,WAAW,CAAC,EAAE;IACpB,KAAK,EAAE,yBAAyB;IAChC,YAAY,EAAE,EAAE;IAChB,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE,KAAK;GACf;EACD,QAAQ,EAAE;IACT,IAAI,EAAE;MACL,OAAO,EAAE,QAAQ;MACjB,OAAO,EAAE,qBAAqB,CAAC,KAAK,CAAC;KACrC;IACD,KAAK,EAAE,QAAQ;IACf,YAAY,EAAE,QAAQ;IACtB,OAAO,EAAE,QAAQ;IACjB,QAAQ,EAAE,SAAS;GACnB;EACD,UAAU,EAAE;IACX,KAAK,EAAE,MAAM;GACb;CACD,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AACzC,MAAM,UAAU,GAAG,CAAC,UAAU,CAAC,CAAA;AAE/B,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACzB,IAAI,OAAO,CAAA;EACX,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;EAC1D,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAA;EACtD,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAA;EAEpD,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC,KAAK,CAAA;EAC5B,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;EAEnC,IAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,YAAY,EAAE;IACrC,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAA;IACpD,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,OAAO,CAAA;IACrD,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;GACtC;EAED,IAAG,IAAI,CAAC,OAAO,EAAE;IAChB,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,WAAW,CAAC,CAAA;IAC5C,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;GAC5B;EAED,IAAG,IAAI,CAAC,YAAY,EAAE;IACrB,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACvC,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACxC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;IAC9B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAA;IAChC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACjC,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,OAAO,CAAC,CAAA;IACxC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAA;IACzB,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;GAC5B;EAED,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAA;EAErB,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;EAEvB,SAAS,CAAC,OAAO,EAAE,YAAY,EAAE,IAAI,CAAC,CAAA;EACtC,SAAS,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,CAAA;EAE/B,OAAO,OAAO,CAAA;AACf,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC3C,UAAU,CAAC,IAAI,GAAG,EAAE,CAAA;AAEpB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;EACd,YAAY,EAAE,wBAAwB;CACtC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACzC,QAAQ,CAAC,IAAI,GAAG;EACf,QAAQ,EAAE,IAAI;CACd,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAC5C,WAAW,CAAC,IAAI,GAAG;EAClB,OAAO,EAAE,4BAA4B;CACrC,CAAA;AACD,eAAe,kBAAkB,CAAA","sourcesContent":["import { Sizes } from \"./constants\"\nimport { Sizes as GlobalSizes } from \"../../../core/constants/sizes\"\n// @ts-ignore\nimport readme from \"./readme.md\"\nimport { bindProps, removeUndefinedValues } from \"../../../../.storybook/helpers\"\n\nconst StoryConfiguration = {\n\ttitle: \"Design system/Switch\",\n\targs: {\n\t\tsize: GlobalSizes._M,\n\t\tlabel: 'This is label of switch',\n\t\terrorMessage: '',\n\t\tmessage: '',\n\t\tdisabled: false,\n\t},\n\targTypes: {\n\t\tsize: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: removeUndefinedValues(Sizes),\n\t\t},\n\t\tlabel: \"string\",\n\t\terrorMessage: \"string\",\n\t\tmessage: \"string\",\n\t\tdisabled: \"boolean\",\n\t},\n\tparameters: {\n\t\tnotes: readme,\n\t},\n}\n\nconst propsControl = [\"size\", \"disabled\"]\nconst propsInput = [\"disabled\"]\n\nconst Template = (args) => {\n\tlet message\n\tconst control = document.createElement('gov-form-control')\n\tconst label = document.createElement('gov-form-label')\n\tconst el = document.createElement(\"gov-form-switch\")\n\n\tlabel.innerHTML = args.label\n\tlabel.setAttribute('slot', 'label')\n\n\tif(args.message || args.errorMessage) {\n\t\tmessage = document.createElement('gov-form-message')\n\t\tmessage.innerHTML = args.errorMessage || args.message\n\t\tmessage.setAttribute('slot', 'bottom')\n\t}\n\n\tif(args.message) {\n\t\tmessage.setAttribute('variant', 'secondary')\n\t\tcontrol.appendChild(message)\n\t}\n\n\tif(args.errorMessage) {\n\t\tcontrol.setAttribute('invalid', 'true')\n\t\tconst icon = document.createElement('i')\n\t\ticon.classList.add(\"fa-solid\")\n\t\ticon.classList.add(\"fa-warning\")\n\t\ticon.setAttribute('slot', 'icon')\n\t\tmessage.setAttribute('variant', 'error')\n\t\tmessage.appendChild(icon)\n\t\tcontrol.appendChild(message)\n\t}\n\n\tel.appendChild(label)\n\n\tcontrol.appendChild(el)\n\n\tbindProps(control, propsControl, args)\n\tbindProps(el, propsInput, args)\n\n\treturn control\n}\n\nexport const Playground = Template.bind({})\nPlayground.args = {}\n\nexport const Invalid = Template.bind({})\nInvalid.args = {\n\terrorMessage: 'This field is required'\n}\n\nexport const Disabled = Template.bind({})\nDisabled.args = {\n\tdisabled: true\n}\n\nexport const WithMessage = Template.bind({})\nWithMessage.args = {\n\tmessage: 'Here you can put your name'\n}\nexport default StoryConfiguration\n"]}

package/dist/collection/components/gov-grid/constants.js

@@ -0,0 +1,4 @@
+export const GridClass = {
+  root: "gov-grid",
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-grid/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;CAChB,CAAA","sourcesContent":["export const GridClass = {\n\troot: \"gov-grid\",\n}\n"]}

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

@@ -0,0 +1,262 @@
+/* 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);
+  }
+}
+/*
+*   Grid
+*/
+.gov-grid {
+  overflow: hidden;
+}
+.gov-grid > * {
+  margin: 0 -0.0625rem -0.0625rem 0;
+  border: 0.0625rem solid var(--gov-grid-border-color, var(--gov-color-secondary-500));
+  border-width: 0 0 0.0625rem;
+}
+.gov-grid > *:last-child {
+  border-bottom-width: 0;
+}
+@media (min-width: 48em) {
+  .gov-grid {
+    display: grid;
+  }
+  .gov-grid--x2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .gov-grid--x2 > * {
+    border-width: 0.0625rem 0.0625rem 0.0625rem 0;
+  }
+  .gov-grid--x2 > *:nth-child(-n+3) {
+    border-top-width: 0;
+  }
+  .gov-grid--x2 > *:nth-child(2n+2) {
+    border-right-width: 0;
+  }
+}
+@media (min-width: 48em) and (max-width: 63.99em) {
+  .gov-grid--x3, .gov-grid--x4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .gov-grid--x3 > *, .gov-grid--x4 > * {
+    border-width: 0.0625rem 0.0625rem 0.0625rem 0;
+  }
+  .gov-grid--x3 > *:nth-child(-n+3), .gov-grid--x4 > *:nth-child(-n+3) {
+    border-top-width: 0;
+  }
+  .gov-grid--x3 > *:nth-child(2n+2), .gov-grid--x4 > *:nth-child(2n+2) {
+    border-right-width: 0;
+  }
+}
+@media (min-width: 64em) {
+  .gov-grid--x3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .gov-grid--x3 > * {
+    border-width: 0.0625rem 0.0625rem 0.0625rem 0;
+  }
+  .gov-grid--x3 > *:nth-child(-n+4) {
+    border-top-width: 0;
+  }
+  .gov-grid--x3 > *:nth-child(3n+3) {
+    border-right-width: 0;
+  }
+}
+@media (min-width: 64em) and (max-width: 74.99em) {
+  .gov-grid--x4 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .gov-grid--x4 > * {
+    border-width: 0.0625rem 0.0625rem 0.0625rem 0;
+  }
+  .gov-grid--x4 > *:nth-child(-n+4) {
+    border-top-width: 0;
+  }
+  .gov-grid--x4 > *:nth-child(3n+3) {
+    border-right-width: 0;
+  }
+}
+@media (min-width: 75em) {
+  .gov-grid--x4 {
+    grid-template-columns: repeat(4, 1fr);
+  }
+  .gov-grid--x4 > * {
+    border-width: 0.0625rem 0.0625rem 0.0625rem 0;
+  }
+  .gov-grid--x4 > *:nth-child(-n+5) {
+    border-top-width: 0;
+  }
+  .gov-grid--x4 > *:nth-child(4n+4) {
+    border-right-width: 0;
+  }
+}

package/dist/collection/components/gov-grid/gov-grid.js

@@ -0,0 +1,55 @@
+import { h, Host } from '@stencil/core';
+import { GridClass } from './constants';
+import { prepareClasses } from "../../helpers/Dom/template";
+// import { govHost } from '../../helpers/Dom/template'
+// import { GovHost } from '../../helpers/Dom/template.d'
+export class GovGrid {
+  // private h: GovHost
+  constructor() {
+    this.columns = 3;
+  }
+  get classNames() {
+    return prepareClasses([
+      GridClass.root,
+      this.columns && GridClass.root + '--x' + this.columns
+    ]);
+  }
+  render() {
+    return (h(Host, { class: this.classNames }, h("slot", null)));
+  }
+  static get is() { return "gov-grid"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["gov-grid.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["gov-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "columns": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determide if component should have inversed colors to be used on dark background"
+        },
+        "attribute": "columns",
+        "reflect": false,
+        "defaultValue": "3"
+      }
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=gov-grid.js.map

package/dist/collection/components/gov-grid/gov-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gov-grid.js","sourceRoot":"","sources":["../../../../../../src/components/gov-grid/gov-grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAC3D,uDAAuD;AACvD,yDAAyD;AAMzD,MAAM,OAAO,OAAO;EACnB,qBAAqB;EAErB;mBAOmC,CAAC;GALnC;EASD,IAAI,UAAU;IAEb,OAAO,cAAc,CAAC;MACrB,SAAS,CAAC,IAAI;MACd,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO;KACrD,CAAC,CAAA;EACH,CAAC;EAED,MAAM;IACL,OAAO,CACN,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,UAAU;MAC3B,eAAO,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { GridClass } from './constants'\nimport { prepareClasses } from \"../../helpers/Dom/template\"\n// import { govHost } from '../../helpers/Dom/template'\n// import { GovHost } from '../../helpers/Dom/template.d'\n\n@Component({\n\ttag: 'gov-grid',\n\tstyleUrl: 'gov-grid.scss',\n})\nexport class GovGrid {\n\t// private h: GovHost\n\n\tconstructor() {\n\t\t// this.h = govHost(this.host)\n\t}\n\n\t/**\n\t * Determide if component should have inversed colors to be used on dark background\n\t */\n\t@Prop() readonly columns: number = 3\n\n\t@Element() host: HTMLGovGridElement\n\n\tget classNames(): string {\n\n\t\treturn prepareClasses([\n\t\t\tGridClass.root,\n\t\t\tthis.columns && GridClass.root + '--x' + this.columns\n\t\t])\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={this.classNames}>\n\t\t\t\t<slot/>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}

package/dist/collection/components/gov-icon/constants.js

@@ -0,0 +1,6 @@
+export const Types = ['basic', 'complex', 'colored'];
+export const IconClass = {
+  root: "gov-icon",
+  holder: "gov-icon__holder",
+};
+//# sourceMappingURL=constants.js.map

package/dist/collection/components/gov-icon/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../src/components/gov-icon/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU,CAAA;AAG7D,MAAM,CAAC,MAAM,SAAS,GAAG;EACxB,IAAI,EAAE,UAAU;EAChB,MAAM,EAAE,kBAAkB;CAC1B,CAAA","sourcesContent":["export const Types = ['basic', 'complex', 'colored'] as const\nexport type Type = typeof Types[number]\n\nexport const IconClass = {\n\troot: \"gov-icon\",\n\tholder: \"gov-icon__holder\",\n}"]}

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

@@ -0,0 +1,187 @@
+/* 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);
+  }
+}
+/*
+*   Icon
+*/
+.gov-icon {
+  display: inline-flex;
+}
+.gov-icon__holder,
+.gov-icon svg {
+  display: inline-flex;
+  width: 100%;
+  height: 100%;
+}