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

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

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */
@@ -227,7 +230,6 @@
   width: 100%;
   gap: 0.5rem;
   align-items: center;
-  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));
 }
@@ -257,4 +259,10 @@
 .gov-form-search__button {
   flex: 0 0 auto;
   margin: 0.1875rem 0.1875rem 0.1875rem 0;
+}
+.gov-form-search[variant=primary] {
+  border: var(--gov-form-input-border-primary, 0.0625rem solid var(--gov-color-primary-600));
+}
+.gov-form-search[variant=secondary] {
+  border: var(--gov-form-input-border-secondary, 0.0625rem solid var(--gov-color-secondary-700));
 }

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

@@ -1,6 +1,9 @@
 import { h, Host } from '@stencil/core';
 import { FormSearchClass } from './constants';
 export class GovFormSearch {
+  constructor() {
+    this.variant = 'secondary';
+  }
   render() {
     return (h(Host, { class: FormSearchClass.root }, h("span", { class: FormSearchClass.input }, h("slot", { name: "input" })), h("span", { class: FormSearchClass.button }, h("slot", { name: "button" }))));
   }
@@ -15,6 +18,33 @@ export class GovFormSearch {
       "$": ["gov-form-search.css"]
     };
   }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "FormSearchVariantType",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {
+            "FormSearchVariantType": {
+              "location": "import",
+              "path": "./constants"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the form input."
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'secondary'"
+      }
+    };
+  }
   static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=gov-form-search.js.map

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

@@ -1 +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,MAAM,eAAe,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAM7C,MAAM,OAAO,aAAa;EAGzB,MAAM;IACL,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,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core'\nimport { FormSearchClass } from './constants'\n\n@Component({\n\ttag: 'gov-form-search',\n\tstyleUrl: 'gov-form-search.scss',\n})\nexport class GovFormSearch {\n\t@Element() host: HTMLGovFormSearchElement\n\n\trender() {\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<slot name=\"button\" />\n\t\t\t\t</span>\n\t\t\t</Host>\n\t\t)\n\t}\n}\n"]}
+{"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,MAAM,eAAe,CAAA;AACjE,OAAO,EAAE,eAAe,EAAyB,MAAM,aAAa,CAAA;AAKpE,MAAM,OAAO,aAAa;;mBAKyB,WAAW;;EAE7D,MAAM;IACL,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,YAAM,IAAI,EAAC,QAAQ,GAAG,CAChB,CACD,CACP,CAAA;EACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACD","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core'\nimport { FormSearchClass, FormSearchVariantType } from './constants'\n@Component({\n\ttag: 'gov-form-search',\n\tstyleUrl: 'gov-form-search.scss',\n})\nexport class GovFormSearch {\n\t@Element() host: HTMLGovFormSearchElement\n\t/**\n\t * Style variation of the form input.\n\t */\n\t@Prop() readonly variant: FormSearchVariantType = 'secondary'\n\n\trender() {\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<slot name=\"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/gov-form-select.css

@@ -81,6 +81,9 @@
 /*
  -  Variables - Colors
  */
+/*
+ -	Variables - Control Group
+ */
 /*
  -  Variables - Cookiebar
  */
@@ -242,10 +245,8 @@
 .gov-form-select select,
 .gov-form-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-neutral-white));
-  color: var(--gov-form-input-color, var(--gov-color-secondary-700));
   font-family: var(--gov-font-family, "Roboto", sans-serif);
 }
 .gov-form-select input:focus,
@@ -282,7 +283,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;
 }
@@ -292,59 +292,38 @@
 .gov-form-select *[slot=right-icon] {
   right: 0;
 }
-[disabled=""].gov-form-select, [disabled=true i].gov-form-select, [disabled="1"].gov-form-select {
-  pointer-events: none;
+[size=s].gov-form-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);
+  gap: 0.5rem var(--gov-form-input-core-s-icon-size, 1rem);
 }
-[disabled=""].gov-form-select input,
-[disabled=""].gov-form-select select,
-[disabled=""].gov-form-select textarea, [disabled=true i].gov-form-select input,
-[disabled=true i].gov-form-select select,
-[disabled=true i].gov-form-select textarea, [disabled="1"].gov-form-select input,
-[disabled="1"].gov-form-select select,
-[disabled="1"].gov-form-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-select *[slot=left-icon],
-[disabled=""].gov-form-select *[slot=right-icon], [disabled=true i].gov-form-select *[slot=left-icon],
-[disabled=true i].gov-form-select *[slot=right-icon], [disabled="1"].gov-form-select *[slot=left-icon],
-[disabled="1"].gov-form-select *[slot=right-icon] {
-  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
-}
-[invalid=""].gov-form-select input,
-[invalid=""].gov-form-select select,
-[invalid=""].gov-form-select textarea, [invalid=true i].gov-form-select input,
-[invalid=true i].gov-form-select select,
-[invalid=true i].gov-form-select textarea, [invalid="1"].gov-form-select input,
-[invalid="1"].gov-form-select select,
-[invalid="1"].gov-form-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));
+[size=s].gov-form-select input,
+[size=s].gov-form-select 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-select input::-moz-placeholder, [invalid=""].gov-form-select select::-moz-placeholder, [invalid=""].gov-form-select textarea::-moz-placeholder, [invalid=true i].gov-form-select input::-moz-placeholder, [invalid=true i].gov-form-select select::-moz-placeholder, [invalid=true i].gov-form-select textarea::-moz-placeholder, [invalid="1"].gov-form-select input::-moz-placeholder, [invalid="1"].gov-form-select select::-moz-placeholder, [invalid="1"].gov-form-select textarea::-moz-placeholder {
-  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+[size=s].gov-form-select *[slot=left-icon],
+[size=s].gov-form-select *[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-select input::placeholder,
-[invalid=""].gov-form-select select::placeholder,
-[invalid=""].gov-form-select textarea::placeholder, [invalid=true i].gov-form-select input::placeholder,
-[invalid=true i].gov-form-select select::placeholder,
-[invalid=true i].gov-form-select textarea::placeholder, [invalid="1"].gov-form-select input::placeholder,
-[invalid="1"].gov-form-select select::placeholder,
-[invalid="1"].gov-form-select textarea::placeholder {
-  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+[size=s].gov-form-select *[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-select *[slot=left-icon],
-[invalid=""].gov-form-select *[slot=right-icon], [invalid=true i].gov-form-select *[slot=left-icon],
-[invalid=true i].gov-form-select *[slot=right-icon], [invalid="1"].gov-form-select *[slot=left-icon],
-[invalid="1"].gov-form-select *[slot=right-icon] {
-  color: var(--gov-form-state-color-error, var(--gov-color-error));
+[size=s].gov-form-select *[slot=left-icon] ~ input {
+  padding-left: var(--gov-form-input-core-s-icon-padding, 2rem);
 }
-[success=""].gov-form-select *[slot=right-icon], [success=true i].gov-form-select *[slot=right-icon], [success="1"].gov-form-select *[slot=right-icon] {
-  color: var(--gov-form-state-color-success, var(--gov-color-success));
+[size=s].gov-form-select *[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-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
-  display: none;
+[size=s].gov-form-select *[slot=right-icon] ~ input, [size=s].gov-form-select *[slot=right-icon] ~ select {
+  padding-right: var(--gov-form-input-core-s-icon-padding, 2rem);
 }
 [size=m].gov-form-select {
   font-weight: var(--gov-text-m-font-weight);
@@ -445,6 +424,80 @@
 [size=xl].gov-form-select *[slot=right-icon] ~ input, [size=xl].gov-form-select *[slot=right-icon] ~ select {
   padding-right: var(--gov-form-input-core-xl-icon-padding, 3rem);
 }
+[variant=primary].gov-form-select input,
+[variant=primary].gov-form-select select,
+[variant=primary].gov-form-select 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-select *[slot=left-icon],
+[variant=primary].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-input-icon-color-primary, var(--gov-color-primary));
+}
+[variant=secondary].gov-form-select input,
+[variant=secondary].gov-form-select select,
+[variant=secondary].gov-form-select 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-select *[slot=left-icon],
+[variant=secondary].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-input-icon-color-secondary, var(--gov-color-primary));
+}
+[disabled=""].gov-form-select, [disabled=true i].gov-form-select, [disabled="1"].gov-form-select {
+  pointer-events: none;
+}
+[disabled=""].gov-form-select input,
+[disabled=""].gov-form-select select,
+[disabled=""].gov-form-select textarea, [disabled=true i].gov-form-select input,
+[disabled=true i].gov-form-select select,
+[disabled=true i].gov-form-select textarea, [disabled="1"].gov-form-select input,
+[disabled="1"].gov-form-select select,
+[disabled="1"].gov-form-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-select *[slot=left-icon],
+[disabled=""].gov-form-select *[slot=right-icon], [disabled=true i].gov-form-select *[slot=left-icon],
+[disabled=true i].gov-form-select *[slot=right-icon], [disabled="1"].gov-form-select *[slot=left-icon],
+[disabled="1"].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-disabled, var(--gov-color-secondary-600));
+}
+[invalid=""].gov-form-select input,
+[invalid=""].gov-form-select select,
+[invalid=""].gov-form-select textarea, [invalid=true i].gov-form-select input,
+[invalid=true i].gov-form-select select,
+[invalid=true i].gov-form-select textarea, [invalid="1"].gov-form-select input,
+[invalid="1"].gov-form-select select,
+[invalid="1"].gov-form-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-select input::-moz-placeholder, [invalid=""].gov-form-select select::-moz-placeholder, [invalid=""].gov-form-select textarea::-moz-placeholder, [invalid=true i].gov-form-select input::-moz-placeholder, [invalid=true i].gov-form-select select::-moz-placeholder, [invalid=true i].gov-form-select textarea::-moz-placeholder, [invalid="1"].gov-form-select input::-moz-placeholder, [invalid="1"].gov-form-select select::-moz-placeholder, [invalid="1"].gov-form-select textarea::-moz-placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-select input::placeholder,
+[invalid=""].gov-form-select select::placeholder,
+[invalid=""].gov-form-select textarea::placeholder, [invalid=true i].gov-form-select input::placeholder,
+[invalid=true i].gov-form-select select::placeholder,
+[invalid=true i].gov-form-select textarea::placeholder, [invalid="1"].gov-form-select input::placeholder,
+[invalid="1"].gov-form-select select::placeholder,
+[invalid="1"].gov-form-select textarea::placeholder {
+  color: var(--gov-form-state-color-error, var(--gov-color-error-300));
+}
+[invalid=""].gov-form-select *[slot=left-icon],
+[invalid=""].gov-form-select *[slot=right-icon], [invalid=true i].gov-form-select *[slot=left-icon],
+[invalid=true i].gov-form-select *[slot=right-icon], [invalid="1"].gov-form-select *[slot=left-icon],
+[invalid="1"].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-error, var(--gov-color-error));
+}
+[success=""].gov-form-select *[slot=right-icon], [success=true i].gov-form-select *[slot=right-icon], [success="1"].gov-form-select *[slot=right-icon] {
+  color: var(--gov-form-state-color-success, var(--gov-color-success));
+}
+[success=""].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success=true i].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow), [success="1"].gov-form-select *[slot=right-icon]:not(.icon-validation):not(.icon-arrow) {
+  display: none;
+}
 
 .gov-form-select {
   background: none;

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

@@ -36,6 +36,9 @@ export class GovFormSelect {
   watchDisabled() {
     this.passControlAttrs();
   }
+  watchValue() {
+    this.markSelectedValue();
+  }
   passControlAttrs() {
     this.f.passAttrToControl("size", this.size);
     this.f.passAttrToControl("disabled", toBoolAttr(this.disabled));
@@ -45,11 +48,7 @@ export class GovFormSelect {
   componentWillLoad() {
     this.validateVariant(this.variant);
     this.validateSize(this.size);
-    this.host.querySelectorAll("option").forEach((option) => {
-      if (option.value === this.value) {
-        option.setAttribute("selected", "true");
-      }
-    });
+    this.markSelectedValue();
     this.passControlAttrs();
     this.f.passAttrToLabel("required", String(this.required));
   }
@@ -59,6 +58,11 @@ export class GovFormSelect {
       await this.validateWcag();
     }
   }
+  markSelectedValue() {
+    this.host.querySelectorAll("option").forEach((option) => {
+      option.setAttribute("selected", toBoolAttr(option.value === this.value));
+    });
+  }
   render() {
     return (h(Host, { class: FormSelectClass.root, size: this.size, variant: this.variant }, this.h.hasSlot("prefix") && h("slot", { name: "prefix" }), h("span", { class: "element" }, h("gov-icon", { slot: "right-icon", name: "chevron-down" }), h("select", { id: this.identifier || this.selectId, onFocus: this.onFocusHandler.bind(this), onChange: this.onChangeHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-activedescendant": this.wcagActiveDescendant, "aria-controls": this.wcagControls, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns }, h("slot", null))), this.h.hasSlot("sufix") && h("slot", { name: "sufix" })));
   }
@@ -528,6 +532,9 @@ export class GovFormSelect {
       }, {
         "propName": "size",
         "methodName": "watchDisabled"
+      }, {
+        "propName": "value",
+        "methodName": "watchValue"
       }];
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport {\n\tFormSelectClass,\n\tFormSelectSizes,\n\tFormSelectSizesType,\n\tFormSelectVariants,\n\tFormSelectVariantType,\n} from \"./constants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { FormSelectEvent } from \"./gov-form-select.types\"\n\n@Component({\n\ttag: \"gov-form-select\",\n\tstyleUrl: \"gov-form-select.scss\",\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.selectId = createID(\"GovSelect\")\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({ reflect: true, mutable: true }) value: string\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant?: FormSelectVariantType\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormSelectSizesType = \"m\"\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\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 select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\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 related component’s visually focused element.\n\t */\n\t@Prop({ attribute: \"wcag-active-descendant\" }) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\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-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormSelectEvent>\n\t@State() focused: boolean\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormSelectVariants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSelectSizes, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"type\", \"select\")\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.host.querySelectorAll(\"option\").forEach((option: HTMLOptionElement) => {\n\t\t\tif (option.value === this.value) {\n\t\t\t\toption.setAttribute(\"selected\", \"true\")\n\t\t\t}\n\t\t})\n\n\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\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\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot(\"prefix\") && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-owns={this.wcagOwns}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</select>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot(\"sufix\") && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\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.wcagActiveDescendant, \"wcag-active-descendant\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, \"wcag-controls\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}
+{"version":3,"file":"gov-form-select.js","sourceRoot":"","sources":["../../../../../../../src/components/gov-form/select/gov-form-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from \"@stencil/core\"\nimport { GovHost } from \"../../../helpers/Dom/template.types\"\nimport { govHost, toBoolAttr, toBoolAttrIfDefined } from \"../../../helpers/Dom/template\"\nimport {\n\tFormSelectClass,\n\tFormSelectSizes,\n\tFormSelectSizesType,\n\tFormSelectVariants,\n\tFormSelectVariantType,\n} from \"./constants\"\nimport { validateProp } from \"../../../helpers/Validate/props\"\nimport { validateWcagLabelFor, validateWcagRef } from \"../../../helpers/Validate/wcag\"\nimport { canValidateWcagOnRender } from \"../../../helpers/Dom/win\"\nimport { createID } from \"../../../utils/string.utils\"\nimport { delay } from \"../../../utils/utils\"\nimport { GovForm } from \"../../../helpers/Dom/form.types\"\nimport { govForm } from \"../../../helpers/Dom/form\"\nimport { FormSelectEvent } from \"./gov-form-select.types\"\n\n@Component({\n\ttag: \"gov-form-select\",\n\tstyleUrl: \"gov-form-select.scss\",\n})\nexport class GovFormSelect {\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\tprivate selectRef?: HTMLSelectElement\n\n\tprivate readonly selectId: string\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.selectId = createID(\"GovSelect\")\n\t}\n\n\t@Element() host: HTMLGovFormSelectElement\n\t/**\n\t * Value of select\n\t */\n\t@Prop({ reflect: true, mutable: true }) value: string\n\t/**\n\t * Custom select identifier.\n\t */\n\t@Prop({ attribute: \"identifier\" }) readonly identifier: string\n\t/**\n\t * Style variation of the form select.\n\t */\n\t@Prop() readonly variant?: FormSelectVariantType\n\t/**\n\t * Select’s size.\n\t */\n\t@Prop() readonly size?: FormSelectSizesType = \"m\"\n\t/**\n\t * Name of the select.\n\t */\n\t@Prop() readonly name: string\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 select component disabled.\n\t * This prevents users from being able to interact with the select, and conveys its inactive state to assistive technologies.\n\t */\n\t@Prop() readonly disabled: boolean\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 related component’s visually focused element.\n\t */\n\t@Prop({ attribute: \"wcag-active-descendant\" }) readonly wcagActiveDescendant: string\n\t/**\n\t * Use this prop to add an aria-controls attribute. Use the attribute to indicate the id of a component controlled by this component.\n\t */\n\t@Prop({ attribute: \"wcag-controls\" }) readonly wcagControls: string\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-labelled-by\" }) readonly wcagLabelledBy: string\n\t/**\n\t * Indicates the id of a component that describes the input.\n\t */\n\t@Prop({ attribute: \"wcag-owns\" }) readonly wcagOwns: string\n\t/**\n\t * Emitted when the select has focus.\n\t */\n\t@Event({ eventName: \"gov-focus\" }) govFocus: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select loses focus.\n\t */\n\t@Event({ eventName: \"gov-blur\" }) govBlur: EventEmitter<FormSelectEvent>\n\t/**\n\t * Emitted when the select change value.\n\t */\n\t@Event({ eventName: \"gov-change\" }) govChange: EventEmitter<FormSelectEvent>\n\t@State() focused: boolean\n\n\t@Watch(\"variant\")\n\tvalidateVariant(newValue: string): void {\n\t\tvalidateProp(FormSelectVariants, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormSelectSizes, newValue, FormSelectClass.root)\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"size\")\n\twatchDisabled(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\t@Watch(\"value\")\n\twatchValue(): void {\n\t\tthis.markSelectedValue()\n\t}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t\tthis.f.passAttrToControl(\"type\", \"select\")\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateVariant(this.variant)\n\t\tthis.validateSize(this.size)\n\n\t\tthis.markSelectedValue()\n\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\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\tprivate markSelectedValue() {\n\t\tthis.host.querySelectorAll(\"option\").forEach((option: HTMLOptionElement) => {\n\t\t\toption.setAttribute(\"selected\", toBoolAttr(option.value === this.value))\n\t\t})\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormSelectClass.root} size={this.size} variant={this.variant}>\n\t\t\t\t{this.h.hasSlot(\"prefix\") && <slot name=\"prefix\"></slot>}\n\t\t\t\t<span class=\"element\">\n\t\t\t\t\t<gov-icon slot=\"right-icon\" name=\"chevron-down\"></gov-icon>\n\t\t\t\t\t<select\n\t\t\t\t\t\tid={this.identifier || this.selectId}\n\t\t\t\t\t\tonFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\tonChange={this.onChangeHandler.bind(this)}\n\t\t\t\t\t\tonBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\trequired={this.required}\n\t\t\t\t\t\tname={this.name}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\tref={el => (this.selectRef = el as HTMLSelectElement)}\n\t\t\t\t\t\taria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t\taria-activedescendant={this.wcagActiveDescendant}\n\t\t\t\t\t\taria-controls={this.wcagControls}\n\t\t\t\t\t\taria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\taria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\taria-describedby={this.wcagDescribedBy}\n\t\t\t\t\t\taria-labelledby={this.wcagLabelledBy}\n\t\t\t\t\t\taria-owns={this.wcagOwns}\n\t\t\t\t\t>\n\t\t\t\t\t\t<slot></slot>\n\t\t\t\t\t</select>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot(\"sufix\") && <slot name=\"sufix\"></slot>}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\tthis.focused = true\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\tthis.focused = false\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\tprivate onChangeHandler(e: Event) {\n\t\tthis.value = (e.target as HTMLSelectElement).value\n\t\te.stopPropagation()\n\t\tthis.govChange.emit({\n\t\t\tcomponent: FormSelectClass.root,\n\t\t\toriginalEvent: e,\n\t\t\tvalue: this.value,\n\t\t})\n\t}\n\n\t/**\n\t * Returns the current state of the component\n\t */\n\t@Method()\n\tasync setFocus(options?: FocusOptions): Promise<void> {\n\t\treturn this.selectRef.focus(options)\n\t}\n\n\t/**\n\t * Sets the ordered value of the element\n\t */\n\t@Method()\n\tasync setValue(value: string): Promise<void> {\n\t\tthis.value = value\n\t}\n\n\t/**\n\t * Returns an instance of the native html select element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLSelectElement> {\n\t\treturn this.selectRef\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.wcagActiveDescendant, \"wcag-active-descendant\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagControls, \"wcag-controls\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagDescribedBy, \"wcag-described-by\", FormSelectClass.root)\n\t\tvalidateWcagRef(this.wcagOwns, \"wcag-owns\", FormSelectClass.root)\n\t\tvalidateWcagLabelFor(this.identifier || this.selectId, this.wcagLabelledBy, FormSelectClass.root)\n\t}\n}\n"]}

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

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

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

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

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

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

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

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

package/dist/collection/components/gov-layout/gov-layout-column.css

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

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

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

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

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

package/dist/collection/components/gov-loading/skeleton/gov-skeleton.css

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

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

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

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

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

package/dist/collection/components/gov-nav/gov-nav-item.css

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

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

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

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

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

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

@@ -14,7 +14,7 @@ export class GovPagination {
   constructor() {
     this.type = "button";
     this.current = 1;
-    this.total = undefined;
+    this.total = 0;
     this.inverse = undefined;
     this.size = "m";
     this.variant = "primary";
@@ -38,6 +38,9 @@ export class GovPagination {
   validateVariant(newValue) {
     validateProp(PaginationVariants, newValue, PaginationClass.root);
   }
+  recalculate() {
+    this.recalculatePagination(this.current);
+  }
   componentWillLoad() {
     this.recalculatePagination(this.current);
     this.validateSize(this.size);
@@ -80,7 +83,7 @@ export class GovPagination {
       const ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined);
       return (h("gov-button", { href: this.prepareLinkUrl(page), variant: this.variant, size: this.size, type: "base", disabled: isDisabled, "on-gov-click": (e) => this.onClickHandler(e, page), "wcag-label": page > -1 ? this.wcagPageLabel + " " + page : undefined, "wcag-current": ariaCurrent, class: PaginationClass.inner }, content));
     };
-    return (h(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, h("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, h("ul", { class: PaginationClass.list }, h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }))), this.type == "select" ? (h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, h("span", { class: PaginationClass.inner }, h("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), h("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (h("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (h(Fragment, null, this.pagination.pages.map(page => (h("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page)))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, h("span", { class: PaginationClass.inner }, h("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), h("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, h("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (h("option", { value: page, selected: false }, page)))))))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" })))))));
+    return (h(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, h("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, h("ul", { class: PaginationClass.list }, h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }))), this.type == "select" ? (h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, h("span", { class: PaginationClass.inner }, h("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), h("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (h("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (h(Fragment, null, this.pagination.pages.map(page => (h("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page)))), this.pagination.totalPages ? (h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, h("span", { class: PaginationClass.inner }, h("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), h("gov-form-select", { size: "m", variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, h("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (h("option", { value: page, selected: false }, page))))))) : null)), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }))), h("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, h("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" })))))));
   }
   onClickHandler(e, page) {
     e.stopPropagation();
@@ -184,7 +187,8 @@ export class GovPagination {
           "text": "Total count of entries"
         },
         "attribute": "total",
-        "reflect": false
+        "reflect": false,
+        "defaultValue": "0"
       },
       "inverse": {
         "type": "boolean",
@@ -433,6 +437,18 @@ export class GovPagination {
       }, {
         "propName": "variant",
         "methodName": "validateVariant"
+      }, {
+        "propName": "current",
+        "methodName": "recalculate"
+      }, {
+        "propName": "total",
+        "methodName": "recalculate"
+      }, {
+        "propName": "pageSize",
+        "methodName": "recalculate"
+      }, {
+        "propName": "maxPages",
+        "methodName": "recalculate"
       }];
   }
 }