@gov-design-system-ce/components 4.2.0 → 4.2.1

package/dist/cjs/gov-dropdown.cjs.entry.js

@@ -117,7 +117,7 @@ const GovDropdown = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '82ddf678be9e128e899f136598d923a9c62858b4', class: this.h.classes([DropdownClass.root]), open: this.open, position: this.position }, index.h("slot", { key: '5de32c9654140fb67fff7f55ce8fba4fa7ef282f' }), index.h("div", { key: '19bda970452623c7ddef45ff96b843698bb8cd1a', ref: el => registerClickOutside(this, el, () => this.open = false), class: DropdownClass.list, id: this.listId, "aria-labelledby": this.controlId, "aria-hidden": template.toBoolAttr(!this.open), hidden: !this.open }, index.h("slot", { key: 'd1429110f4e4bd054bf38d4a038946475d791323', name: "list" }))));
+        return (index.h(index.Host, { key: 'ed9beb8952cacb4b76fc73ab31345bbe8c5d206d', class: this.h.classes([DropdownClass.root]), open: this.open, position: this.position }, index.h("slot", { key: '49d4da21a53be27e687622d17e21474c7cedb26d' }), index.h("div", { key: '941b05aab703a6bfd981d912763f4576899fd617', ref: el => registerClickOutside(this, el, () => this.open = false), class: DropdownClass.list, id: this.listId, "aria-labelledby": this.controlId, "aria-hidden": template.toBoolAttr(!this.open), hidden: !this.open }, index.h("slot", { key: 'cd0c1f28b7d717efd0fe8faa964df78dfbeca49f', name: "list" }))));
     }
     /**
      * Returns the current state of the dropdown

package/dist/cjs/gov-empty.cjs.entry.js

@@ -29,7 +29,7 @@ const GovEmpty = class {
         this.validateSize(this.size);
     }
     render() {
-        return (index.h(index.Host, { key: '536c14b44e86e71ded94980cce96cfcef26c13d5', class: this.h.classes(EmptyClass.root), size: this.size }, this.h.hasSlot('icon') && (index.h("slot", { key: '11e8a26c901809dc67cc2db2ff1aff47257a8014', name: "icon" })), index.h("div", { key: '4aac9fffa417df01fb668dab89aa19ed29469cc0', class: EmptyClass.content }, index.h("slot", { key: '1b663ce7931eaf8cccd00342e0f1f9fec7abe2d3', name: "headline" }), index.h("slot", { key: 'f1b1ad8a80fe12d01008da1efd335e14cee0a16d' }))));
+        return (index.h(index.Host, { key: '93155f92af0574538fd919e52f312b0f02d07e21', class: this.h.classes(EmptyClass.root), size: this.size }, this.h.hasSlot('icon') && (index.h("slot", { key: 'e9504c9396c9743ea7e454bb2df5d0f2a046aabe', name: "icon" })), index.h("div", { key: '78f2d30f570c6123a58d2ac93db58b4e471796b3', class: EmptyClass.content }, index.h("slot", { key: '7b5e1121dbfccf6d647e168e80c60cad4a1ca136', name: "headline" }), index.h("slot", { key: 'd435390c88c0304f9ee129b268c454b2147fddb0' }))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gov-error-code.cjs.entry.js

@@ -16,7 +16,7 @@ const GovErrorCode = class {
         this.h = template.govHost(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '3355f2c43f55001d6b12bae918220f858721279b', class: this.h.classes(ErrorCodeClass.root), align: "center" }, this.h.hasSlot('icon') && (index.h("slot", { key: '721e74886d890b048bc268cadf9fb05979234ad6', name: "icon" })), index.h("div", { key: '9a1e0ce9d1aa43eacd4967a2688123fcd9164d8f', class: ErrorCodeClass.content }, index.h("slot", { key: '5193304f9720b28d12176e805436e7ebbee2f704', name: "headline" }), index.h("slot", { key: '12d538e92472745e3613149a7c824e6cd345e776' }))));
+        return (index.h(index.Host, { key: 'b253a0e9141dca1662d4d2b792f4c9d25f869a38', class: this.h.classes(ErrorCodeClass.root), align: "center" }, this.h.hasSlot('icon') && (index.h("slot", { key: '4ca7e5788170cdf49d969d1a6ed3e12a0f368914', name: "icon" })), index.h("div", { key: '1822320601777bba88b698375f8ccfc55e33567e', class: ErrorCodeClass.content }, index.h("slot", { key: 'f3b7e46e878f7ff87291bae34a043d5e228dac4c', name: "headline" }), index.h("slot", { key: 'f63ac6838e3397bd6828853f96f476454a0bcda7' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/gov-flex_3.cjs.entry.js

@@ -28,7 +28,7 @@ const GovFlex = class {
         this.h = template.govHost(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '082daf61e75a8b30f7faa2cbd6a44ad8a74b0442', class: this.h.classes(FlexClass.root) }, index.h("slot", { key: '120882be8540480b11df18d006414dabbb00e1d0' })));
+        return (index.h(index.Host, { key: '71dadfbe4c7ddd45b36ffe74d8fd0c38e5069756', class: this.h.classes(FlexClass.root) }, index.h("slot", { key: 'b86bd5e8abbf157f2476cad87134ff9eedd307cc' })));
     }
     get host() { return index.getElement(this); }
 };
@@ -57,7 +57,7 @@ const IconClass = {
     holder: 'gov-icon__holder',
 };
 
-const version = "4.2.0";
+const version = "4.2.1";
 
 const dsVersion = () => {
     return version;
@@ -308,7 +308,7 @@ const GovThemeSwitch = class {
         if (this.theme === ThemeList.auto) {
             isDark = this.isSystemPrefersColorDark;
         }
-        return (index.h(index.Host, { key: '7c9fc2abd555e5254c86ff58fe3e70be5a30b83c', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, index.h("button", { key: '1dc6ac1588fc2f2b48089400953c44e04d59e213', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, index.h("span", { key: '59e19f4450ea2043edf7c037538bab5a0d605569' }, index.h("span", { key: '34640deb4ff3215653f47d54b59ae6763a793333', class: ThemeSwitchClass.indicator }, ThemeList.light && index.h("gov-icon", { key: 'e1583fe54eae0ab7eeb2eb4919b5dd144bb43aa3', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && index.h("gov-icon", { key: 'cb63ce2aa41321bcb7c59d0c02f47f62b80fd104', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel ? (index.h("span", { class: ThemeSwitchClass.label }, isDark ? this.labelDark : this.labelLight)) : null))));
+        return (index.h(index.Host, { key: '492cf756810462ba0764668a134b2ecd5133d562', class: this.h.classes(ThemeSwitchClass.root), theme: isDark ? ThemeList.dark : ThemeList.light, size: this.size }, index.h("button", { key: '02b94994619dd3fbb998acdcc16c907c69ea6723', onClick: () => this.setThemeState(isDark ? ThemeList.light : ThemeList.dark), "aria-current": this.theme, "aria-label": isDark ? this.ariaLabelDark : this.ariaLabelLight }, index.h("span", { key: '0beb069c94ed4337a6c2de4d8ee8640123bc3bc5' }, index.h("span", { key: '57d9fc00520b8cf98108d9b5a9710d6066861157', class: ThemeSwitchClass.indicator }, ThemeList.light && index.h("gov-icon", { key: '3cd1693dcf28658943146386c97b834e5cf4534a', name: "sun", class: ThemeSwitchClass.iconLight, type: "components" }), ThemeList.dark && index.h("gov-icon", { key: '139adcafc399eed5482c15273a37331598bbe179', name: "moon", class: ThemeSwitchClass.iconDark, type: "components" })), this.displayLabel ? (index.h("span", { class: ThemeSwitchClass.label }, isDark ? this.labelDark : this.labelLight)) : null))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gov-form-autocomplete.cjs.entry.js

@@ -8,12 +8,12 @@ const props = require('./props-d189860c.js');
 const string_utils = require('./string.utils-b84c81cf.js');
 const utils = require('./utils-d263c5c6.js');
 const constants = require('./constants-47ba678b.js');
-const array_utils = require('./array.utils-96eadde3.js');
+const array_utils = require('./array.utils-211fffc0.js');
 const attribute = require('./attribute-06dc5228.js');
 const accessibility = require('./accessibility-c475826b.js');
 require('./gov.log-bfea3151.js');
 require('./sizes-89f8d3b2.js');
-require('./helpers.types-ff60c9bd.js');
+require('./helpers.types-9066e4a4.js');
 
 const GovFormAutocomplete = class {
     constructor(hostRef) {
@@ -124,7 +124,7 @@ const GovFormAutocomplete = class {
         this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     render() {
-        return (index.h(index.Host, { key: '9aab109be9dc6f21e88a2da79223866b1b39732a', class: constants.FormAutocompleteClass.root, size: this.size }, index.h("gov-form-input", Object.assign({ key: '62828ff7629c39a283925c24113f0db2c7558ca5', placeholder: this.placeholder, name: this.name, disabled: this.disabled, readonly: this.readonly, autocomplete: false, size: this.size, required: this.required, invalid: this.invalid, success: this.success, role: 'searchbox', value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": utils.throttle(this.onInputHandler.bind(this), this.throttleTime), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-keydown": this.onKeyDownHandler.bind(this), "on-gov-focus": this.onFocusHandler.bind(this), "on-gov-blur": this.onBlurHandler.bind(this) }, this.inheritedAttributes, { "aria-autocomplete": 'list', "aria-owns": [this.listBoxId, this.inheritedAttributes['aria-owns']].join(' '), "aria-expanded": template.booleanString(this.list.length && this.focused ? true : false), ref: el => (this.inputRef = el) }), index.h("slot", { key: 'd722dd5d3241853d45a5153f0197403a42872c4a', name: "validation-icon" }), index.h("slot", { key: 'bb003098d072de7c33cb1f538470b2ba6a79d920', name: "icon-end" })), index.h("ul", { key: '4d54077583a9eed5682501372cd75f655e635203', class: constants.FormAutocompleteClass.list, role: 'listbox', "aria-hidden": template.toBoolAttr(!this.focused), hidden: !this.focused, id: this.listBoxId, ref: el => (this.listRef = el) }, this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (index.h("li", { class: constants.FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (index.h("li", { class: constants.FormAutocompleteClass.loading }, index.h("gov-skeleton", { size: "m" }))) : null, this.focused ? this.list.map((item, index$1) => {
+        return (index.h(index.Host, { key: '22d9a81f648404e942ee680acddda83165af4dc2', class: constants.FormAutocompleteClass.root, size: this.size }, index.h("gov-form-input", Object.assign({ key: '4b60cfea2591a4bde6c97dee3c11b75461db3c5d', placeholder: this.placeholder, name: this.name, disabled: this.disabled, readonly: this.readonly, autocomplete: false, size: this.size, required: this.required, invalid: this.invalid, success: this.success, role: 'searchbox', value: this.value, minlength: this.minlength, maxlength: this.maxlength, "on-gov-input": utils.throttle(this.onInputHandler.bind(this), this.throttleTime), "on-gov-keyup": this.onKeyUpHandler.bind(this), "on-gov-keydown": this.onKeyDownHandler.bind(this), "on-gov-focus": this.onFocusHandler.bind(this), "on-gov-blur": this.onBlurHandler.bind(this) }, this.inheritedAttributes, { "aria-autocomplete": 'list', "aria-owns": [this.listBoxId, this.inheritedAttributes['aria-owns']].join(' '), "aria-expanded": template.booleanString(this.list.length && this.focused ? true : false), ref: el => (this.inputRef = el) }), index.h("slot", { key: '739722e49f8062d3ebec84dc2a1f840413439c7c', name: "validation-icon" }), index.h("slot", { key: '6f3b3c7695a5c7d56276fbc41f854b9afff3800e', name: "icon-end" })), index.h("ul", { key: '52b34c8501d976b438350104594b02137d40a386', class: constants.FormAutocompleteClass.list, role: 'listbox', "aria-hidden": template.toBoolAttr(!this.focused), hidden: !this.focused, id: this.listBoxId, ref: el => (this.listRef = el) }, this.focused && this.list.length === 0 && this.processing === false && this.isValueAccepted && this.messageEmpty ? (index.h("li", { class: constants.FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (index.h("li", { class: constants.FormAutocompleteClass.loading }, index.h("gov-skeleton", { size: "m" }))) : null, this.focused ? this.list.map((item, index$1) => {
             const isSelected = this.arrowCounter === index$1;
             return (index.h("li", { class: constants.FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: 'option', "aria-posinset": index$1, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onTouchStart: (e) => this.onSelectHandler(e, index$1), onMouseDown: (e) => this.onSelectHandler(e, index$1), "aria-selected": template.toBoolAttr(isSelected) }, index.h("slot", { name: "list-item-left" }), index.h("slot", { name: "list-item-right" })));
         }) : null)));

package/dist/cjs/gov-form-checkbox-group.cjs.entry.js

@@ -7,11 +7,11 @@ const constants = require('./constants-7f713d6c.js');
 const template = require('./template-39939fd6.js');
 const props = require('./props-d189860c.js');
 const stencil_utils = require('./stencil.utils-182382ee.js');
-const array_utils = require('./array.utils-96eadde3.js');
+const array_utils = require('./array.utils-211fffc0.js');
 require('./utils-d263c5c6.js');
 require('./sizes-89f8d3b2.js');
 require('./gov.log-bfea3151.js');
-require('./helpers.types-ff60c9bd.js');
+require('./helpers.types-9066e4a4.js');
 
 const govFormGroupCss = "gov-form-group,.gov-form-group,gov-form-radio-group,.gov-form-radio-group,gov-form-checkbox-group,.gov-form-checkbox-group{margin-top:0;margin-bottom:0;position:relative;display:flex;width:100%;flex-direction:column;align-items:flex-start}gov-form-group .gov-form-label__label,.gov-form-group .gov-form-label__label,gov-form-radio-group .gov-form-label__label,.gov-form-radio-group .gov-form-label__label,gov-form-checkbox-group .gov-form-label__label,.gov-form-checkbox-group .gov-form-label__label{margin:0}gov-form-group[orientation=horizontal],.gov-form-group[orientation=horizontal],gov-form-radio-group[orientation=horizontal],.gov-form-radio-group[orientation=horizontal],gov-form-checkbox-group[orientation=horizontal],.gov-form-checkbox-group[orientation=horizontal]{flex-direction:row;flex-wrap:wrap}gov-form-group[orientation=horizontal] .gov-form-label__label,.gov-form-group[orientation=horizontal] .gov-form-label__label,gov-form-radio-group[orientation=horizontal] .gov-form-label__label,.gov-form-radio-group[orientation=horizontal] .gov-form-label__label,gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label,.gov-form-checkbox-group[orientation=horizontal] .gov-form-label__label{white-space:nowrap}gov-form-group[gap=xs],.gov-form-group[gap=xs],gov-form-radio-group[gap=xs],.gov-form-radio-group[gap=xs],gov-form-checkbox-group[gap=xs],.gov-form-checkbox-group[gap=xs]{gap:var(--gap, var(--spacing-xs-nudge))}gov-form-group[gap=s],.gov-form-group[gap=s],gov-form-radio-group[gap=s],.gov-form-radio-group[gap=s],gov-form-checkbox-group[gap=s],.gov-form-checkbox-group[gap=s]{gap:var(--gap, var(--spacing-s))}gov-form-group[gap=m],.gov-form-group[gap=m],gov-form-radio-group[gap=m],.gov-form-radio-group[gap=m],gov-form-checkbox-group[gap=m],.gov-form-checkbox-group[gap=m]{gap:var(--gap, var(--spacing-m))}gov-form-group[gap=l],.gov-form-group[gap=l],gov-form-radio-group[gap=l],.gov-form-radio-group[gap=l],gov-form-checkbox-group[gap=l],.gov-form-checkbox-group[gap=l]{gap:var(--gap, var(--spacing-l))}gov-form-group[gap=xl],.gov-form-group[gap=xl],gov-form-radio-group[gap=xl],.gov-form-radio-group[gap=xl],gov-form-checkbox-group[gap=xl],.gov-form-checkbox-group[gap=xl]{gap:var(--gap, var(--spacing-xl))}";
 const GovFormCheckboxGroupStyle0 = govFormGroupCss;
@@ -70,7 +70,7 @@ const GovFormCheckboxGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '22f738e5251d68688b6d21c471a5c18ae2532a5a', gap: this.gap, class: this.h.classes(constants.FormGroupClass.root), value: this.value }, index.h("slot", { key: '8028ab95f42dc8c8dfb8f1ee1b70879c291db6d4' })));
+        return (index.h(index.Host, { key: '332a7e45344ebd6bafbcf20813ab7a06a99aae7e', gap: this.gap, class: this.h.classes(constants.FormGroupClass.root), value: this.value }, index.h("slot", { key: 'd00028b250fa309ee22d25bd07f0f940fec0590e' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gov-form-control.cjs.entry.js

@@ -58,7 +58,7 @@ const GovFormControl = class {
     }
     render() {
         const Tag = this.fieldset ? "fieldset" : "div";
-        return (index.h(index.Host, { key: '2f6a44e96f79c5ec6fa6326fb01dba74d2f405cc', size: this.size, class: this.h.classes(form.FormControlClass.root) }, index.h(Tag, { key: '5b4ec1e274416aa4330f60727662f9f441cb5973', class: form.FormControlClass.holder }, this.h.hasSlot("top") && index.h("slot", { key: '51738751699005e6642bdf855f6fafbea9af83f6', name: "top" }), index.h("slot", { key: 'f765b4b014274832bbef5118312a0e8a70939cda' }), this.h.hasSlot("bottom") && (index.h("div", { key: '048b08353a3bb6c6246e297bc183288cb9c78034', class: form.FormControlClass.bottom }, index.h("slot", { key: '24e79aa1a2d87c12ac0ebefde129a8055f38525e', name: "bottom" }))))));
+        return (index.h(index.Host, { key: '1502fcaa64e9c9839e7393573f10aa7a98161f8a', size: this.size, class: this.h.classes(form.FormControlClass.root) }, index.h(Tag, { key: 'ea3147966c1e34366293c19228793679f5065d53', class: form.FormControlClass.holder }, this.h.hasSlot("top") && index.h("slot", { key: '803c63b94d671bdcd30eeb2bf4a9ab9f23633358', name: "top" }), index.h("slot", { key: 'c46d8faf4cea51bc15e6f57e0f2e9bea895b4454' }), this.h.hasSlot("bottom") && (index.h("div", { key: '78fcf2aa671f3741f6d38f0519cd8983be5d6082', class: form.FormControlClass.bottom }, index.h("slot", { key: '0d25b0c2d06a1f5612c2bf85dc428715e2a8f97a', name: "bottom" }))))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/gov-form-file.cjs.entry.js

@@ -184,7 +184,7 @@ const GovFormFile = class {
         this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     render() {
-        return (index.h(index.Host, { key: '57a2ec8520c058114c22a58cc666d74efccb9a96', class: this.h.classes([FormFileClass.root]), invalid: template.toBoolAttrIfDefined(this.invalid), expanded: template.toBoolAttrIfDefined(this.expanded) }, index.h("div", { key: '6a31911301d1b3eaaeafe32f3167fc0a5893125a', class: FormFileClass.area, ref: el => (this.areaRef = el) }, index.h("slot", { key: 'feae9382b0223eec714593882ade1904d284e40d' }), index.h("input", Object.assign({ key: 'b6a16d19ba27cdd878540b39bc440d11761a3ab5', class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, multiple: this.multiple, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled }, this.inheritedAttributes, { "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid), "aria-disabled": template.toBoolAttrIfDefined(this.disabled) }))), this.h.hasSlot("attachments") ? (index.h("div", { class: FormFileClass.attachments }, index.h("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (index.h("div", { class: FormFileClass.attachments }, index.h("gov-attachments", { label: this.accessibleAttachmentsLabel, "accessible-label": this.accessibleAttachmentsLabel }, this.files.map(item => (index.h("gov-attachments-item", { "accessible-remove-labelledby": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, index.h("span", { class: "sr-only", id: item.id }, this.accessibleRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (index.h("gov-form-message", { slot: "message", color: "error" }, index.h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (index.h("gov-form-message", { slot: "message", color: "error" }, index.h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, index.h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+        return (index.h(index.Host, { key: '6fe6eb71a8275871bb0aeebae9531d846123ae06', class: this.h.classes([FormFileClass.root]), invalid: template.toBoolAttrIfDefined(this.invalid), expanded: template.toBoolAttrIfDefined(this.expanded) }, index.h("div", { key: 'cd7ab5a0c223214f5d825c8695993e8c64b9ea78', class: FormFileClass.area, ref: el => (this.areaRef = el) }, index.h("slot", { key: '6197c08c6a50725a261da65069159f75e3e47834' }), index.h("input", Object.assign({ key: 'f6897d875af8c47268118ef5d7dd9c19cec6e9a1', class: FormFileClass.input, ref: el => (this.inputRef = el), id: this.identifier || this.fileId, type: "file", name: this.name, accept: this.accept, multiple: this.multiple, onChange: this.onChangeHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), required: this.required, disabled: this.disabled }, this.inheritedAttributes, { "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid), "aria-disabled": template.toBoolAttrIfDefined(this.disabled) }))), this.h.hasSlot("attachments") ? (index.h("div", { class: FormFileClass.attachments }, index.h("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (index.h("div", { class: FormFileClass.attachments }, index.h("gov-attachments", { label: this.accessibleAttachmentsLabel, "accessible-label": this.accessibleAttachmentsLabel }, this.files.map(item => (index.h("gov-attachments-item", { "accessible-remove-labelledby": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, index.h("span", { class: "sr-only", id: item.id }, this.accessibleRemoveLabel.replace("{FILE_NAME}", item.file.name)), item.file.name, item.acceptValid === false ? (index.h("gov-form-message", { slot: "message", color: "error" }, index.h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (index.h("gov-form-message", { slot: "message", color: "error" }, index.h("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, index.h("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
     }
     onRemoveFileHandler(file) {
         const index = this.files.findIndex(item => item.id === file.id);

package/dist/cjs/gov-form-group.cjs.entry.js

@@ -32,7 +32,7 @@ const GovFormGroup = class {
         this.validateOrientation(this.orientation);
     }
     render() {
-        return (index.h(index.Host, { key: '23bc665133af4d63acae967405c379aef79f9125', gap: this.gap, class: this.h.classes(constants.FormGroupClass.root) }, index.h("slot", { key: '11d303816dae7149170180b450542c2cd1a322c6' })));
+        return (index.h(index.Host, { key: 'a16a99205899fe2a9e49702708c8f879c363b111', gap: this.gap, class: this.h.classes(constants.FormGroupClass.root) }, index.h("slot", { key: '871900cb0682f57fa0856d90b38a683a005240dd' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gov-form-input_2.cjs.entry.js

@@ -102,11 +102,11 @@ const GovFormInput = class {
     }
     render() {
         const Tag = this.multiline ? Tags.TEXTAREA : Tags.INPUT;
-        return (index.h(index.Host, { key: 'bdbab2105ea328155d7a023e2070c4ca22a5afba', class: form.FormInputClass.root, size: this.size, type: this.type }, this.h.hasSlot("prefix") && index.h("slot", { key: '71be98f4ba1933c8a5affd3f41b496633528bcc8', name: "prefix" }), index.h("span", { key: '820a6cc14d90fb52b3fa809858c9b7223d7dec21', class: "element" }, (this.h.hasSlot("icon-start") && !this.multiline) &&
-            index.h("div", { key: '6c001fb96074d4f5b7779a14cbceee9169b4a70a', class: form.FormInputClass.icons, onClick: () => this.inputRef.focus() }, index.h("slot", { key: '15da634518db7ac788de51911296d1a0ca87c993', name: "icon-start" })), index.h(Tag, Object.assign({ key: 'f43777146426ddbe5d37408a734ca61aa51e0e69', type: this.inputType === 'password' && this.showPassword ? 'text' : this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, spellcheck: template.toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: template.toBoolAttrIfDefined(this.readonly), autocomplete: template.toOnOffAttrIfDefined(this.autocomplete), autocorrect: template.toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, required: this.required, rows: this.rows, cols: this.cols, role: this.role, value: this.value }, this.inheritedAttributes, { "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid), "aria-disabled": template.toBoolAttrIfDefined(this.disabled) })), ((this.success || this.invalid || this.h.hasSlot("icon-end") || this.inputType === 'password') && !this.multiline) &&
-            index.h("div", { key: '716e004caf2077ce8d5ee5101bcb541fbdb45d38', class: form.FormInputClass.icons, onClick: () => this.inputRef.focus() }, this.success && !this.multiline &&
-                index.h("gov-icon", { key: '96c5fcdad8332c08d3eaf9a5a6af573962a96744', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && !this.multiline &&
-                index.h("gov-icon", { key: '4883e137f51052a2659f46a09270c656bc3347f7', class: "validation-icon", name: "exclamation-lg", type: "components" }), this.h.hasSlot("icon-end") && this.inputType !== 'password' && index.h("slot", { key: 'a74b2df0932087834fc33de45aa341444c61042a', name: "icon-end" }), this.inputType === 'password' ? (index.h("gov-button", { color: 'primary', type: 'base', size: this.size, "aria-label": this.showPassword ? this.accessibleHidePasswordLabel : this.accessibleShowPasswordLabel, "on-gov-click": () => this.showPassword = !this.showPassword }, index.h("gov-icon", { slot: "icon-start", name: "eye", type: "components" }))) : null)), this.h.hasSlot("sufix") && index.h("slot", { key: '9d15adccc023a5501114982c4417df6db9a4d8c1', name: "sufix" })));
+        return (index.h(index.Host, { key: 'f2b0e3a105b6a3904d59821bc68e13bfa01acea9', class: form.FormInputClass.root, size: this.size, type: this.type }, this.h.hasSlot("prefix") && index.h("slot", { key: '13ff8da008e08322cd0eb241600751f8e896416b', name: "prefix" }), index.h("span", { key: '22c1467190afaf1a2c8e98d0cd4500f123494885', class: "element" }, (this.h.hasSlot("icon-start") && !this.multiline) &&
+            index.h("div", { key: '1ab85a6556b44fd92959c0311b57028a8e3b8d74', class: form.FormInputClass.icons, onClick: () => this.inputRef.focus() }, index.h("slot", { key: 'dcc9f5a1da1245bd4eccc0a919b08b73a556efe7', name: "icon-start" })), index.h(Tag, Object.assign({ key: 'f05f59a1ad7d28acfd005942fdd22e7ba04e2d73', type: this.inputType === 'password' && this.showPassword ? 'text' : this.inputType, disabled: this.disabled, id: this.identifier || this.inputId, name: this.name, onFocus: this.onFocusHandler.bind(this), onInput: this.onInputHandler.bind(this), onBlur: this.onBlurHandler.bind(this), onKeyUp: this.onKeyUpHandler.bind(this), onKeyDown: this.onKeyDownHandler.bind(this), ref: el => (this.inputRef = el), placeholder: this.placeholder, spellcheck: template.toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: template.toBoolAttrIfDefined(this.readonly), autocomplete: template.toOnOffAttrIfDefined(this.autocomplete), autocorrect: template.toOnOffAttrIfDefined(this.autocorrect), minlength: this.minlength, maxlength: this.maxlength, min: this.min, max: this.max, required: this.required, rows: this.rows, cols: this.cols, role: this.role, value: this.value }, this.inheritedAttributes, { "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid), "aria-disabled": template.toBoolAttrIfDefined(this.disabled) })), ((this.success || this.invalid || this.h.hasSlot("icon-end") || this.inputType === 'password') && !this.multiline) &&
+            index.h("div", { key: 'ab940283ca797a54590c73881aabe6e4032d4a77', class: form.FormInputClass.icons, onClick: () => this.inputRef.focus() }, this.success && !this.multiline &&
+                index.h("gov-icon", { key: 'af0b7c6e3c815eb74318052f490db2241f246707', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && !this.multiline &&
+                index.h("gov-icon", { key: '4feef0479c061b9b073dea6c04e2bc428464a9de', class: "validation-icon", name: "exclamation-lg", type: "components" }), this.h.hasSlot("icon-end") && this.inputType !== 'password' && index.h("slot", { key: 'fa3f4ac957a08d066706c273b008edef401f0a2b', name: "icon-end" }), this.inputType === 'password' ? (index.h("gov-button", { color: 'primary', type: 'base', size: this.size, "aria-label": this.showPassword ? this.accessibleHidePasswordLabel : this.accessibleShowPasswordLabel, "on-gov-click": () => this.showPassword = !this.showPassword }, index.h("gov-icon", { slot: "icon-start", name: "eye", type: "components" }))) : null)), this.h.hasSlot("sufix") && index.h("slot", { key: 'ce4b50ff45632098c4457339538bac4a5a685df8', name: "sufix" })));
     }
     onFocusHandler(e) {
         e.stopPropagation();
@@ -265,7 +265,7 @@ const GovSkeleton = class {
         return Object.assign({}, dimenssionsStyles);
     }
     render() {
-        return (index.h(index.Host, Object.assign({ key: '5f948f681fcb9e8edeba710b0bc9b44d4bd44c68', size: this.size, color: this.color, class: {
+        return (index.h(index.Host, Object.assign({ key: 'fa43a5bc92210a51bb681449542c6f5c2863e3ad', size: this.size, color: this.color, class: {
                 [SkeletonClass.root]: true,
                 circle: this.shape === "circle",
                 line: this.shape === "line",

package/dist/cjs/gov-form-label.cjs.entry.js

@@ -18,7 +18,7 @@ const GovFormLabel = class {
     }
     render() {
         const Tag = this.legend ? 'legend' : 'label';
-        return (index.h(index.Host, { key: 'e06447dd79c3204d5641bc58ba823d0744373dd5', class: constants.FormLabelClass.root, size: this.size }, index.h(Tag, { key: '69dfe126eb3f26aae0360e8c5f831e61345d3dc2', class: constants.FormLabelClass.label, htmlFor: this.identifier, onClick: () => this.govClick.emit() }, index.h("slot", { key: '3005e820b094c191fc0422a8586264053a4c403f' }), this.required ? index.h("span", { class: "gov-color--error-500" }, "\u00A0*") : null)));
+        return (index.h(index.Host, { key: '5227d00ebe3e8923687d4e8d0f3a74bad0da82b3', class: constants.FormLabelClass.root, size: this.size }, index.h(Tag, { key: '981d363fdf7435a0b242b9610a7dd68e11d4f05e', class: constants.FormLabelClass.label, htmlFor: this.identifier, onClick: () => this.govClick.emit() }, index.h("slot", { key: 'bdf282178e200fa69d9f871354786ecbd024fa90' }), this.required ? index.h("span", { class: "gov-color--error-500" }, "\u00A0*") : null)));
     }
 };
 

package/dist/cjs/gov-form-multi-select.cjs.entry.js

@@ -7,7 +7,7 @@ const form = require('./form-4e66039a.js');
 const template = require('./template-39939fd6.js');
 const props = require('./props-d189860c.js');
 const string_utils = require('./string.utils-b84c81cf.js');
-const array_utils = require('./array.utils-96eadde3.js');
+const array_utils = require('./array.utils-211fffc0.js');
 const stencil_utils = require('./stencil.utils-182382ee.js');
 const attribute = require('./attribute-06dc5228.js');
 require('./sizes-89f8d3b2.js');
@@ -17,7 +17,7 @@ require('./colors-f7c8eadd.js');
 require('./constants-47ba678b.js');
 require('./constants-87bab1ed.js');
 require('./gov.log-bfea3151.js');
-require('./helpers.types-ff60c9bd.js');
+require('./helpers.types-9066e4a4.js');
 
 const GovFormMultiSelect = class {
     constructor(hostRef) {
@@ -183,11 +183,11 @@ const GovFormMultiSelect = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '702237c94a2454e2ee966fee0a4fb92e690b7ca3', class: form.FormMultiSelectClass.root, size: this.size }, index.h("div", { key: '06644d9c3deb723effa4dd18207734ff4c9885cf', class: form.FormMultiSelectClass.wrap }, this.h.hasSlot('prefix') && index.h("slot", { key: '7a000864224ecfe4fc333b2609f1d624b8cbad2c', name: "prefix" }), index.h("gov-form-autocomplete", { key: '7ce180ba5e799af98869ab3a0eab7dc0b1cd28f8', value: this.valueState, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, invalid: this.invalid, success: this.success, size: this.size, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, "aria-owns": this.listId }, this.success && index.h("gov-icon", { key: '8433d6631829ad487ea0d14f3a23ef955179ab72', slot: "validation-icon", class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && index.h("gov-icon", { key: '55076350c10d021f5e1c6882ca9c36ddcb3b8d96', slot: "validation-icon", class: "validation-icon", name: "exclamation-lg", type: "components" }), index.h("gov-icon", { key: '3671d42362ea1a7334b687d12d9fbe50d12a2e6b', slot: "icon-end", class: "arrow-icon", name: "chevron-down", type: "components" })), index.h("select", Object.assign({ key: '9d9af70e3a94506e654bc4739dff88512f9a7027', hidden: true, class: 'hidden-select-list', "aria-hidden": template.toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el) }, this.inheritedAttributes, { "aria-disabled": template.toBoolAttrIfDefined(this.disabled), "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid) }), index.h("slot", { key: '121da88c22cb7aa89bddd017daaa3adf2d3cdba1' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+        return (index.h(index.Host, { key: 'efc41cd22f35a7c326f8321f11c875a6ee6d44fe', class: form.FormMultiSelectClass.root, size: this.size }, index.h("div", { key: '229b01f0a9b0cb35e59cda5ce5a78c14309ab1ee', class: form.FormMultiSelectClass.wrap }, this.h.hasSlot('prefix') && index.h("slot", { key: '48cefdbe753f57acca0aa5fc74bc7cc6f902e4b7', name: "prefix" }), index.h("gov-form-autocomplete", { key: 'a4a3e0f0fb0f9e3d9ec0ce8d24b390a169f0749a', value: this.valueState, disabled: this.disabled, identifier: this.identifier || this.selectId, required: false, invalid: this.invalid, success: this.success, size: this.size, placeholder: this.placeholder, "message-empty": this.messageEmpty, "message-loading": this.messageLoading, ref: el => (this.autocompleteRef = el), minlength: 0, "aria-owns": this.listId }, this.success && index.h("gov-icon", { key: '8a43c6c12f16773956b669b7cd08608d6aeb3bb9', slot: "validation-icon", class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && index.h("gov-icon", { key: '6eaee1ebf4ac9c337e22b071edf77fbeec012a3c', slot: "validation-icon", class: "validation-icon", name: "exclamation-lg", type: "components" }), index.h("gov-icon", { key: 'c9f7f2f83f37abdab373bfb2aa43c36ec08dfede', slot: "icon-end", class: "arrow-icon", name: "chevron-down", type: "components" })), index.h("select", Object.assign({ key: 'd4623e47694c6b28b5e201f083e6d73fa6a331aa', hidden: true, class: 'hidden-select-list', "aria-hidden": template.toBoolAttr(true), multiple: true, required: this.required, name: this.name, disabled: this.disabled, ref: el => (this.selectRef = el) }, this.inheritedAttributes, { "aria-disabled": template.toBoolAttrIfDefined(this.disabled), "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid) }), index.h("slot", { key: 'f5e03e3e33a1bb97b00c544765332b67812c5fd5' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
             var _a;
             const selectedOption = this.selectedValueIndex(option.value);
             return (index.h("option", { value: option.value, selected: selectedOption > -1, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value));
-        })), this.h.hasSlot('sufix') && index.h("slot", { key: '7a1392bc37a8ff68a2269b8aced6af13dc2d0155', name: "sufix" })), this.hideSelectedList === false ? (index.h("ul", { role: "listbox", id: this.listId, class: form.FormMultiSelectClass.list }, Array.isArray(this.selectedOptionsState) && this.selectedOptionsState.map(selected => {
+        })), this.h.hasSlot('sufix') && index.h("slot", { key: 'aa9c37047083aa68a9ccaf8066a62a2eb9a3797f', name: "sufix" })), this.hideSelectedList === false ? (index.h("ul", { role: "listbox", id: this.listId, class: form.FormMultiSelectClass.list }, Array.isArray(this.selectedOptionsState) && this.selectedOptionsState.map(selected => {
             var _a, _b;
             const option = this.getOption(selected);
             if (!option)

package/dist/cjs/gov-form-password-power.cjs.entry.js

@@ -16,7 +16,7 @@ const GovFormPasswordPower = class {
         this.power = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '5345be77d281075d14e4d846cc28b4ee80238d44', class: FormPasswordPowerClass.root }, index.h("span", { key: '4d54a301ac65d9432e524906eb8d0626fcc6be63', class: FormPasswordPowerClass.bar }, index.h("span", { key: '0590bdcda2ca777daa02b4ed078490120c0d76b9' }), index.h("span", { key: 'd76531fc51948809e1c7577c06661fd320ccb68c' }), index.h("span", { key: '48a13aa684e06289961bf7aaeb778c9340242e55' })), index.h("span", { key: '683dab64032d38a9d94121c154085a5e4cb0f6f1', class: FormPasswordPowerClass.text }, index.h("slot", { key: 'd55a6fdbd4bfb5504457d10c7e6ce194d0ff36c5' }))));
+        return (index.h(index.Host, { key: 'db698558cba39d591c1119a07d6aafd66880a478', class: FormPasswordPowerClass.root }, index.h("span", { key: '24b61cba713d7ba1d56ea385889f89d40c181b9b', class: FormPasswordPowerClass.bar }, index.h("span", { key: '01b941d9082565c4673cc5a5f24c083500d216fc' }), index.h("span", { key: '8c87f443b4571a9a98cbf88c7adaa39b663cda5d' }), index.h("span", { key: 'ab9d769c365e6c9ed09bca718b5ef226a0e5c456' })), index.h("span", { key: '5cd85486880615d0732c65bb40b89ccf3b1c381e', class: FormPasswordPowerClass.text }, index.h("slot", { key: '11fd5c8d7584ac5a129b4f4a64304ceb05aa498f' }))));
     }
 };
 

package/dist/cjs/gov-form-radio-group.cjs.entry.js

@@ -58,7 +58,7 @@ const GovFormRadioGroup = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: 'f5d9641f18787c21c13898a8d80159326161e676', gap: this.gap, class: this.h.classes(constants.FormGroupClass.root), value: this.value }, index.h("slot", { key: '81b46ef337551d1f31b9b7f7d5bb32a620f0fb69' })));
+        return (index.h(index.Host, { key: '332ec3c5c0582167e5543304daa8508cc354ecc5', gap: this.gap, class: this.h.classes(constants.FormGroupClass.root), value: this.value }, index.h("slot", { key: '7bfbcec04a7f39226709c9546dbd0f121678d075' })));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gov-form-range.cjs.entry.js

@@ -0,0 +1,207 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-0e4f24f9.js');
+const utils = require('./utils-d263c5c6.js');
+const sizes = require('./sizes-89f8d3b2.js');
+const template = require('./template-39939fd6.js');
+const props = require('./props-d189860c.js');
+const attribute = require('./attribute-06dc5228.js');
+const form = require('./form-4e66039a.js');
+const stencil_utils = require('./stencil.utils-182382ee.js');
+const helpers_types = require('./helpers.types-9066e4a4.js');
+const string_utils = require('./string.utils-b84c81cf.js');
+const accessibility = require('./accessibility-c475826b.js');
+require('./gov.log-bfea3151.js');
+require('./constants-b9fece07.js');
+require('./colors-f7c8eadd.js');
+require('./constants-47ba678b.js');
+require('./constants-87bab1ed.js');
+
+const FormRangeSizes = utils.pick(sizes.Sizes, ['_S', '_M', '_L']);
+const FormRangeClass = {
+    root: 'gov-form-range',
+    fill: 'gov-form-range--fill',
+    input: 'gov-form-range--input',
+};
+
+const GovFormRange = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.govFocus = index.createEvent(this, "gov-focus", 7);
+        this.govBlur = index.createEvent(this, "gov-blur", 7);
+        this.govInput = index.createEvent(this, "gov-input", 7);
+        this.size = "m";
+        this.value = undefined;
+        this.identifier = undefined;
+        this.name = undefined;
+        this.min = undefined;
+        this.max = undefined;
+        this.step = undefined;
+        this.tooltip = false;
+        this.input = false;
+        this.listIdentifier = undefined;
+        this.required = false;
+        this.success = undefined;
+        this.invalid = undefined;
+        this.disabled = false;
+        this.inheritedAttributes = {};
+        this.h = template.govHost(this.host);
+        this.f = form.govForm(this.h);
+        this.inputId = string_utils.createID("GovInput");
+    }
+    validateSize(newValue) {
+        props.validateProp(FormRangeSizes, newValue, FormRangeClass.root);
+    }
+    watchValue() {
+        this.controlOutputPosition();
+    }
+    watchControlAttrs() {
+        this.passControlAttrs();
+    }
+    passControlAttrs() {
+        this.f.passAttrToControl("size", this.size);
+        this.f.passAttrToControl("success", template.toBoolAttr(this.success));
+        this.f.passAttrToControl("disabled", template.toBoolAttr(this.disabled));
+        this.f.passAttrToControl("invalid", template.toBoolAttr(this.invalid));
+    }
+    get getThumbWidth() {
+        const styles = window.getComputedStyle(this.inputRef);
+        return parseFloat(styles.getPropertyValue('--thumb-size')) || 1;
+    }
+    controlOutputPosition() {
+        const valueInt = +this.value;
+        const min = +this.inputRef.min;
+        const max = +this.inputRef.max;
+        const thumbWidth = (this.getThumbWidth * 16);
+        const rangeWidth = this.inputRef.offsetWidth;
+        const percentage = ((valueInt - min) / (max - min)) * 100;
+        let tooltipOffset = ((percentage / 100) * (rangeWidth - thumbWidth)) + (thumbWidth / 2);
+        if (this.outputRef) {
+            this.outputRef.textContent = this.value;
+            const outputWidth = this.outputRef.offsetWidth / 2;
+            this.outputRef.style.left = `${tooltipOffset - outputWidth}px`;
+        }
+        if (this.fillRef) {
+            this.fillRef.style.width = `${tooltipOffset}px`;
+        }
+    }
+    componentDidLoad() {
+        this.attributeObserver = new attribute.AttributeObserver(this.host, (attributeName, newValue) => {
+            this.onAriaAttributeChange(attributeName, newValue);
+        });
+        this.attributeObserver.startObserving(attribute.ariaAttributes);
+    }
+    componentWillLoad() {
+        this.validateSize(this.size);
+        this.inheritedAttributes = accessibility.inheritAriaAttributes(this.host);
+    }
+    componentDidRender() {
+        this.passControlAttrs();
+        this.f.passAttrToLabel("required", String(this.required));
+        stencil_utils.tick(this.controlOutputPosition.bind(this));
+    }
+    onAriaAttributeChange(attributeName, newValue) {
+        this.host.removeAttribute(attributeName);
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.attributeObserver) === null || _a === void 0 ? void 0 : _a.stopObserving();
+    }
+    render() {
+        return (index.h(index.Host, { key: '87236e8cdb0534dbefc72286517c353d41860260', class: FormRangeClass.root, size: this.size }, this.h.hasSlot("prefix") && index.h("slot", { key: '83f2b5ff50d7638d1e13de9e0f4774d747a8e374', name: "prefix" }), index.h("span", { key: '7cef4eac6144ee71dd6b3ffcdc2e992f33f97740', class: "element" }, index.h("input", Object.assign({ key: '1c2fda25454dc11bdfab17065f07bb38959a2941', type: "range", ref: el => (this.inputRef = el), onInput: this.onInputHandler.bind(this), onFocus: this.onFocusHandler.bind(this), onBlur: this.onBlurHandler.bind(this), id: this.identifier || this.inputId, name: this.name, min: this.min, max: this.max, step: this.step, list: this.listIdentifier, value: this.value, required: this.required, disabled: this.disabled }, this.inheritedAttributes, { "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid), "aria-disabled": template.toBoolAttrIfDefined(this.disabled) })), index.h("div", { key: 'bdece1cc0cad1614eb090e9183d9dd96389b7568', class: FormRangeClass.fill, ref: el => (this.fillRef = el) }), this.tooltip ?
+            index.h("output", { htmlFor: this.name, ref: el => (this.outputRef = el) }, this.value)
+            : null, index.h("slot", { key: '4e346163e119d7508942a31bc35b28acd807bdb3', name: "datalist" })), this.h.hasSlot("sufix") && index.h("slot", { key: '3faaf9ba94069c9a7f3a147e9a6ecfec7a38edc7', name: "sufix" }), this.input ?
+            index.h("gov-form-input", Object.assign({ "on-gov-input": this.onCustomInputHandler.bind(this), class: FormRangeClass.input, size: this.size, value: this.value, disabled: this.disabled }, this.inheritedAttributes))
+            : null));
+    }
+    onCustomInputHandler(e) {
+        const value = e.target.value;
+        if (this.step && helpers_types.isNumber(+this.step)) {
+            const numValue = +value;
+            const numMin = +this.min;
+            const numMax = +this.max;
+            const numStep = +this.step;
+            if (isNaN(numValue)) {
+                return false;
+            }
+            if (numValue < numMin || numValue > numMax) {
+                return false;
+            }
+            const diff = numValue - numMin;
+            if (diff % numStep !== 0) {
+                return false;
+            }
+            this.value = value;
+            this.govInput.emit({
+                component: FormRangeClass.root,
+                value: this.value,
+                originalEvent: e,
+            });
+        }
+    }
+    onInputHandler(e) {
+        this.value = e.target.value;
+        e.stopPropagation();
+        this.govInput.emit({
+            component: FormRangeClass.root,
+            value: this.value,
+            originalEvent: e,
+        });
+    }
+    onFocusHandler(e) {
+        e.stopPropagation();
+        this.govFocus.emit({
+            component: FormRangeClass.root,
+            value: this.value,
+            originalEvent: e,
+        });
+    }
+    onBlurHandler(e) {
+        e.stopPropagation();
+        this.govBlur.emit({
+            component: FormRangeClass.root,
+            value: this.value,
+            originalEvent: e,
+        });
+    }
+    /**
+     * Returns the current state of the component
+     */
+    async setFocus(options) {
+        return this.inputRef.focus(options);
+    }
+    /**
+     * Sets the ordered value of the element
+     */
+    async setValue(value) {
+        this.value = value;
+    }
+    /**
+     * Clears input value
+     */
+    async clearValue() {
+        this.value = "";
+        this.inputRef.value = "";
+    }
+    /**
+     * Returns an instance of the native html input element
+     */
+    async getRef() {
+        return this.inputRef;
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "size": ["validateSize", "watchControlAttrs"],
+        "value": ["watchValue"],
+        "disabled": ["watchControlAttrs"],
+        "invalid": ["watchControlAttrs"],
+        "success": ["watchControlAttrs"]
+    }; }
+};
+
+exports.gov_form_range = GovFormRange;
+
+//# sourceMappingURL=gov-form-range.cjs.entry.js.map

package/dist/cjs/gov-form-range.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"gov-form-range.entry.cjs.js","mappings":"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","names":["pick","Sizes","govHost","govForm","createID","validateProp","toBoolAttr","AttributeObserver","ariaAttributes","inheritAriaAttributes","tick","h","Host","toBoolAttrIfDefined","isNumber"],"sources":["../../../packages/core/src/components/gov-form/range/constants.ts","../../../packages/core/src/components/gov-form/range/gov-form-range.tsx"],"sourcesContent":["import {pick} from \"../../../utils/utils\";\nimport {Sizes} from \"../../../core/constants/sizes\";\nimport {ValueOf} from \"../../../types/interfaces\";\n\nexport const FormRangeSizes = pick(Sizes, ['_S', '_M', '_L'])\nexport type FormRangeSizesType = `${ValueOf<typeof FormRangeSizes>}`\n\nexport const FormRangeClass = {\n\troot: 'gov-form-range',\n\tfill: 'gov-form-range--fill',\n\tinput: 'gov-form-range--input',\n}\n","import {Component, Element, Event, EventEmitter, h, Host, Method, Prop, State, Watch} from '@stencil/core'\nimport {FormRangeClass, FormRangeSizes, FormRangeSizesType} from './constants'\nimport {GovHost} from \"../../../helpers/Dom/template.types\";\nimport {govHost, toBoolAttr, toBoolAttrIfDefined} from \"../../../helpers/Dom/template\";\nimport {validateProp} from \"../../../helpers/Validate/props\";\nimport {AttributeObserver, Attributes} from \"../../../helpers/Dom/attribute\";\nimport {GovForm} from \"../../../helpers/Dom/form.types\";\nimport {govForm} from \"../../../helpers/Dom/form\";\nimport {tick} from \"../../../utils/stencil.utils\";\nimport {isNumber} from \"../../../utils/helpers.types\";\nimport {createID} from \"../../../utils/string.utils\";\nimport {FormInputEvent} from \"../input/gov-form-input.types\";\nimport {ariaAttributes} from \"../../../helpers/Accessibility/attributes\";\nimport {inheritAriaAttributes} from \"../../../helpers/Accessibility/accessibility\";\n\n\n@Component({\n\ttag: 'gov-form-range',\n})\nexport class GovFormRange {\n\tprivate inputRef?: HTMLInputElement\n\tprivate outputRef?: HTMLOutputElement\n\tprivate fillRef?: HTMLDivElement\n\tprivate f: GovForm\n\tprivate readonly h: GovHost\n\tprivate readonly inputId: string\n\tprivate attributeObserver: AttributeObserver\n\n\tconstructor() {\n\t\tthis.h = govHost(this.host)\n\t\tthis.f = govForm(this.h)\n\t\tthis.inputId = createID(\"GovInput\")\n\t}\n\n\t@Element() host: HTMLGovFormRangeElement\n\t/**\n\t * Range’s size\n\t */\n\t@Prop() readonly size?: FormRangeSizesType = \"m\"\n\t/**\n\t * Value of range\n\t */\n\t@Prop({reflect: true, mutable: true}) value: string\n\t/**\n\t * Custom range identifier\n\t */\n\t@Prop({attribute: \"identifier\"}) readonly identifier: string\n\t/**\n\t * Name of the range\n\t */\n\t@Prop() readonly name: string\n\t/**\n\t * Minimum value that is acceptable\n\t */\n\t@Prop() readonly min?: string | number\n\t/**\n\t * Maximum value that is acceptable\n\t */\n\t@Prop() readonly max?: string | number\n\t/**\n\t * Defines size of each step\n\t */\n\t@Prop() readonly step?: string | number\n\t/**\n\t * Show tooltip with current value\n\t */\n\t@Prop() readonly tooltip?: boolean = false\n\t/**\n\t * Show input with current value\n\t */\n\t@Prop() readonly input?: boolean = false\n\t/**\n\t * Links a <datalist/> element to a <input type=\"range\">, providing value markers as guidance for the user\n\t */\n\t@Prop() readonly listIdentifier?: string\n\t/**\n\t * Set whether the range is required or not\n\t */\n\t@Prop({reflect: true}) readonly required: boolean = false\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({reflect: true}) readonly success: boolean\n\t/**\n\t * Indicates the entered value does not conform to the format expected by the application\n\t */\n\t@Prop({reflect: true}) readonly invalid: boolean\n\t/**\n\t * Makes the range component disabled\n\t */\n\t@Prop({reflect: true}) readonly disabled: boolean = false\n\t/**\n\t * Emitted when the input has focus.\n\t */\n\t@Event({eventName: \"gov-focus\"}) govFocus: EventEmitter<FormInputEvent>\n\t/**\n\t * Emitted when the input loses focus.\n\t */\n\t@Event({eventName: \"gov-blur\"}) govBlur: EventEmitter<FormInputEvent>\n\t/**\n\t * Emitted when the input change value.\n\t */\n\t@Event({eventName: \"gov-input\"}) govInput: EventEmitter<FormInputEvent>\n\n\n\t@Watch(\"size\")\n\tvalidateSize(newValue: string): void {\n\t\tvalidateProp(FormRangeSizes, newValue, FormRangeClass.root)\n\t}\n\n\t@Watch(\"value\")\n\twatchValue(): void {\n\t\tthis.controlOutputPosition();\n\t}\n\n\t@Watch(\"disabled\")\n\t@Watch(\"invalid\")\n\t@Watch(\"success\")\n\t@Watch(\"size\")\n\twatchControlAttrs(): void {\n\t\tthis.passControlAttrs()\n\t}\n\n\t@State() inheritedAttributes: Attributes = {}\n\n\tprivate passControlAttrs() {\n\t\tthis.f.passAttrToControl(\"size\", this.size)\n\t\tthis.f.passAttrToControl(\"success\", toBoolAttr(this.success))\n\t\tthis.f.passAttrToControl(\"disabled\", toBoolAttr(this.disabled))\n\t\tthis.f.passAttrToControl(\"invalid\", toBoolAttr(this.invalid))\n\t}\n\n\tprivate get getThumbWidth() {\n\t\tconst styles = window.getComputedStyle(this.inputRef);\n\t\treturn parseFloat(styles.getPropertyValue('--thumb-size')) || 1;\n\t}\n\n\tprivate controlOutputPosition() {\n\t\tconst valueInt = +this.value;\n\t\tconst min = +this.inputRef.min;\n\t\tconst max = +this.inputRef.max;\n\n\t\tconst thumbWidth = (this.getThumbWidth * 16);\n\t\tconst rangeWidth = this.inputRef.offsetWidth;\n\t\tconst percentage = ((valueInt - min) / (max - min)) * 100;\n\n\t\tlet tooltipOffset = ((percentage / 100) * (rangeWidth - thumbWidth)) + (thumbWidth / 2);\n\n\t\tif (this.outputRef) {\n\t\t\tthis.outputRef.textContent = this.value;\n\t\t\tconst outputWidth = this.outputRef.offsetWidth / 2;\n\t\t\tthis.outputRef.style.left = `${tooltipOffset - outputWidth}px`;\n\t\t}\n\t\tif (this.fillRef) {\n\t\t\tthis.fillRef.style.width = `${tooltipOffset}px`\n\t\t}\n\t}\n\n\tcomponentDidLoad() {\n\t\tthis.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {\n\t\t\tthis.onAriaAttributeChange(attributeName, newValue);\n\t\t});\n\n\t\tthis.attributeObserver.startObserving(ariaAttributes);\n\t}\n\n\tcomponentWillLoad() {\n\t\tthis.validateSize(this.size)\n\n\t\tthis.inheritedAttributes = inheritAriaAttributes(this.host);\n\t}\n\n\tcomponentDidRender() {\n\t\tthis.passControlAttrs()\n\t\tthis.f.passAttrToLabel(\"required\", String(this.required))\n\t\ttick(this.controlOutputPosition.bind(this))\n\t}\n\n\tonAriaAttributeChange(attributeName: string, newValue: string) {\n\t\tthis.host.removeAttribute(attributeName)\n\t\tthis.inheritedAttributes = {...this.inheritedAttributes, [attributeName]: newValue};\n\t}\n\n\tdisconnectedCallback() {\n\t\tthis.attributeObserver?.stopObserving();\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<Host class={FormRangeClass.root} size={this.size}>\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<input type=\"range\"\n\t\t\t\t\t\t   ref={el => (this.inputRef = el)}\n\t\t\t\t\t\t   onInput={this.onInputHandler.bind(this)}\n\t\t\t\t\t\t   onFocus={this.onFocusHandler.bind(this)}\n\t\t\t\t\t\t   onBlur={this.onBlurHandler.bind(this)}\n\t\t\t\t\t\t   id={this.identifier || this.inputId}\n\t\t\t\t\t\t   name={this.name}\n\t\t\t\t\t\t   min={this.min}\n\t\t\t\t\t\t   max={this.max}\n\t\t\t\t\t\t   step={this.step}\n\t\t\t\t\t\t   list={this.listIdentifier}\n\t\t\t\t\t\t   value={this.value}\n\t\t\t\t\t\t   required={this.required}\n\t\t\t\t\t\t   disabled={this.disabled}\n\t\t\t\t\t\t   {...this.inheritedAttributes}\n\t\t\t\t\t\t   aria-required={toBoolAttrIfDefined(this.required)}\n\t\t\t\t\t\t   aria-invalid={toBoolAttrIfDefined(this.invalid)}\n\t\t\t\t\t\t   aria-disabled={toBoolAttrIfDefined(this.disabled)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div class={FormRangeClass.fill} ref={el => (this.fillRef = el)}></div>\n\t\t\t\t\t{this.tooltip ?\n\t\t\t\t\t\t<output htmlFor={this.name} ref={el => (this.outputRef = el)}>\n\t\t\t\t\t\t\t{this.value}\n\t\t\t\t\t\t</output>\n\t\t\t\t\t\t: null}\n\t\t\t\t\t<slot name=\"datalist\"></slot>\n\t\t\t\t</span>\n\t\t\t\t{this.h.hasSlot(\"sufix\") && <slot name=\"sufix\"></slot>}\n\t\t\t\t{this.input ?\n\t\t\t\t\t<gov-form-input\n\t\t\t\t\t\ton-gov-input={this.onCustomInputHandler.bind(this)}\n\t\t\t\t\t\tclass={FormRangeClass.input}\n\t\t\t\t\t\tsize={this.size}\n\t\t\t\t\t\tvalue={this.value}\n\t\t\t\t\t\tdisabled={this.disabled}\n\t\t\t\t\t\t{...this.inheritedAttributes}>\n\t\t\t\t\t</gov-form-input>\n\t\t\t\t\t: null}\n\t\t\t</Host>\n\t\t)\n\t}\n\n\tonCustomInputHandler(e: InputEvent) {\n\t\tconst value = (e.target as HTMLInputElement).value;\n\t\tif (this.step && isNumber(+this.step)) {\n\t\t\tconst numValue = +value;\n\t\t\tconst numMin = +this.min;\n\t\t\tconst numMax = +this.max;\n\t\t\tconst numStep = +this.step;\n\n\t\t\tif (isNaN(numValue)) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tif (numValue < numMin || numValue > numMax) {\n\t\t\t\treturn false;\n\t\t\t}\n\t\t\tconst diff = numValue - numMin;\n\t\t\tif (diff % numStep !== 0) {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tthis.value = value;\n\t\t\tthis.govInput.emit({\n\t\t\t\tcomponent: FormRangeClass.root,\n\t\t\t\tvalue: this.value,\n\t\t\t\toriginalEvent: e,\n\t\t\t})\n\t\t}\n\t}\n\n\tprivate onInputHandler(e: InputEvent) {\n\t\tthis.value = (e.target as HTMLInputElement).value;\n\t\te.stopPropagation()\n\t\tthis.govInput.emit({\n\t\t\tcomponent: FormRangeClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onFocusHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govFocus.emit({\n\t\t\tcomponent: FormRangeClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\n\t\t})\n\t}\n\n\tprivate onBlurHandler(e: FocusEvent) {\n\t\te.stopPropagation()\n\t\tthis.govBlur.emit({\n\t\t\tcomponent: FormRangeClass.root,\n\t\t\tvalue: this.value,\n\t\t\toriginalEvent: e,\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.inputRef.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 * Clears input value\n\t */\n\t@Method()\n\tasync clearValue(): Promise<void> {\n\t\tthis.value = \"\"\n\t\tthis.inputRef.value = \"\"\n\t}\n\n\t/**\n\t * Returns an instance of the native html input element\n\t */\n\t@Method()\n\tasync getRef(): Promise<HTMLInputElement> {\n\t\treturn this.inputRef\n\t}\n}\n"],"version":3}

package/dist/cjs/gov-form-search.cjs.entry.js

@@ -20,7 +20,7 @@ const GovFormSearch = class {
         this.color = 'neutral';
     }
     render() {
-        return (index.h(index.Host, { key: '2a4e3dd63dd15981e25c952e3a6f1f5eabdae12a', class: FormSearchClass.root, color: this.color, size: this.size }, index.h("slot", { key: '393fefd7c775341c8be8067900a29c36776d767c', name: "input" }), index.h("slot", { key: 'bcb202961db1564bcd4a30ae58a6a686895ea6d4', name: "button-erase" }), index.h("slot", { key: 'd82551286246b38fa1276bd181c18807e6fb4da8', name: "button" })));
+        return (index.h(index.Host, { key: 'aac69369eafa76eee7e1117601008ac8d34b5417', class: FormSearchClass.root, color: this.color, size: this.size }, index.h("slot", { key: '7f20815a61d662cbfde7f85f40e45277c5494315', name: "input" }), index.h("slot", { key: 'd2db24dda8aad0577f8d84ea39377df3dd1b9b19', name: "button-erase" }), index.h("slot", { key: 'd7f38530eb623e1f230e0ec42db0a68f775eec8e', name: "button" })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/gov-form-select.cjs.entry.js

@@ -7,7 +7,7 @@ const form = require('./form-4e66039a.js');
 const template = require('./template-39939fd6.js');
 const props = require('./props-d189860c.js');
 const string_utils = require('./string.utils-b84c81cf.js');
-const array_utils = require('./array.utils-96eadde3.js');
+const array_utils = require('./array.utils-211fffc0.js');
 const stencil_utils = require('./stencil.utils-182382ee.js');
 const attribute = require('./attribute-06dc5228.js');
 const accessibility = require('./accessibility-c475826b.js');
@@ -18,7 +18,7 @@ require('./colors-f7c8eadd.js');
 require('./constants-47ba678b.js');
 require('./constants-87bab1ed.js');
 require('./gov.log-bfea3151.js');
-require('./helpers.types-ff60c9bd.js');
+require('./helpers.types-9066e4a4.js');
 
 const GovFormSelect = class {
     constructor(hostRef) {
@@ -97,10 +97,10 @@ const GovFormSelect = class {
         });
     }
     render() {
-        return (index.h(index.Host, { key: '4273e7ee3d753e85da24fb9902f8943bc6ce958a', class: form.FormSelectClass.root, size: this.size }, this.h.hasSlot('prefix') && index.h("slot", { key: '1d3da6186b0c3860ea253282386a327f10717d67', name: "prefix" }), index.h("span", { key: '3a202fd20029deaa2757886cc8657355948c01a5', class: "element" }, index.h("select", Object.assign({ key: '96804aaaa39be0d91160547ceeb9dde8246cdde6', 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) }, this.inheritedAttributes, { "aria-disabled": template.toBoolAttrIfDefined(this.disabled), "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid) }), index.h("slot", { key: 'e16cf3fc5c639387be6a1b855a9481d91fdcae20' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+        return (index.h(index.Host, { key: 'ece22604354a3bc7b27aebb52b767e720c470fb2', class: form.FormSelectClass.root, size: this.size }, this.h.hasSlot('prefix') && index.h("slot", { key: 'fdff42c0ad6111e691b8246a8cbe3d77cbb9ab94', name: "prefix" }), index.h("span", { key: '726341bdd8a76bb6dde8af330505d97273007bb3', class: "element" }, index.h("select", Object.assign({ key: 'cb51afcb898b91f87236cdfd416cd26013e01fc7', 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) }, this.inheritedAttributes, { "aria-disabled": template.toBoolAttrIfDefined(this.disabled), "aria-required": template.toBoolAttrIfDefined(this.required), "aria-invalid": template.toBoolAttrIfDefined(this.invalid) }), index.h("slot", { key: '8a81f952601ac949f68047eca18cd7aab61f5ffa' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
             var _a;
             return (index.h("option", { value: option.value, selected: option.value === this.value, disabled: option === null || option === void 0 ? void 0 : option.disabled }, (_a = option.label) !== null && _a !== void 0 ? _a : option.value));
-        })), this.success && index.h("gov-icon", { key: '9f8ef18d02c3ecdf5b6db8c337aadd976de35694', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && index.h("gov-icon", { key: '6c08e6df7892ab26493d90be19ad7d7bf3370d8d', class: "validation-icon", name: "exclamation-lg", type: "components" }), index.h("gov-icon", { key: '54eae87e6c99c56a2c553db77567fdadc7eb25e5', class: "arrow-icon", name: "chevron-down", type: "components" })), this.h.hasSlot('sufix') && index.h("slot", { key: '7657a8a108e9239ed697e7323d895fafd29cf19c', name: "sufix" })));
+        })), this.success && index.h("gov-icon", { key: '4567f0e75b9f9b9eba7a2a624107699ee531c580', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && index.h("gov-icon", { key: '818e5fe59f78b86280abdf117cb9b786e9ac103a', class: "validation-icon", name: "exclamation-lg", type: "components" }), index.h("gov-icon", { key: '9705a3e034da03543a074eb206224f3e63236b7c', class: "arrow-icon", name: "chevron-down", type: "components" })), this.h.hasSlot('sufix') && index.h("slot", { key: 'dd8fcce83d933ce39a8195d288472d013f708870', name: "sufix" })));
     }
     onFocusHandler(e) {
         this.focused = true;

package/dist/cjs/gov-grid-item.cjs.entry.js

@@ -23,7 +23,7 @@ const GovGridItem = class {
         this.h = template.govHost(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '58d1762c23639140ca76c43b99b6f00451531da9', class: this.h.classes(constants.GridItemClass.root), role: "listitem" }, index.h("slot", { key: '87b4642506246324607c1ff3c7ca71e98fe5dd0a' })));
+        return (index.h(index.Host, { key: '30f35aa2a7d4c2456164b6f0001a915796a07b9c', class: this.h.classes(constants.GridItemClass.root), role: "listitem" }, index.h("slot", { key: '25e3d4f401f56697a3f90abd01b9add8fa1d238b' })));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/gov-grid.cjs.entry.js

@@ -17,7 +17,7 @@ const GovGrid = class {
         this.h = template.govHost(this.host);
     }
     render() {
-        return (index.h(index.Host, { key: '7092dda416db17f4137ecd04bea2659dfe76b0e0', class: this.h.classes(constants.GridClass.root), role: "list" }, index.h("slot", { key: 'b05231f0b950cd8c6830ee96e3d16e798ed97835' })));
+        return (index.h(index.Host, { key: 'e5ca7f6e3554f0e3bd52731a81c3ae4cc809a8dd', class: this.h.classes(constants.GridClass.root), role: "list" }, index.h("slot", { key: 'e99880d69919891b5b22c0eab933069fbcb4852c' })));
     }
     get host() { return index.getElement(this); }
 };