@gov-design-system-ce/components 4.6.3 → 4.6.4

package/dist/hydrate/index.js

@@ -3435,7 +3435,7 @@ class GovBanner {
         /**
          * Banner’s foreground
          */
-        this.foreground = BannerForeground.LOGO;
+        this.foreground = BannerForeground.IMAGE;
         /**
          * XL Banner’s text color
          */
@@ -3461,10 +3461,10 @@ class GovBanner {
         this.validateTextColor(this.textColor);
     }
     render() {
-        return (hAsync(Host, Object.assign({ key: '3e20f606dab5e32411afc2dbf2bc94add284bed4', class: this.h.classes(BannerClass.root), role: "region", size: this.size }, (this.size !== "xl" ? {
+        return (hAsync(Host, Object.assign({ key: '142c906194083f6c186d1f1d9033c4f2c9be9bff', class: this.h.classes(BannerClass.root), role: "region", size: this.size }, (this.size !== "xl" ? {
             background: this.background,
             foreground: this.foreground
-        } : { 'text-color': this.textColor })), hAsync("div", { key: '334c429dac2fcde8b9bbaa223ec5111ba2ea062f' }, hAsync("div", { key: '900e59f605db3ddb9a0999ee6d802aa73d0f4cb3', class: BannerClass.content }, hAsync("slot", { key: 'b5bbcc66a5d7154e22c73c78001c1e2609c034cc', name: "headline" }), hAsync("slot", { key: '3bc1675de3e41360eebd57fcc0880ede40053c3f' })), this.h.hasSlot('button') && (hAsync("slot", { key: '9b85a1240ae9a28c8297085f88674006a729cc72', name: "button" }))), hAsync("slot", { key: 'e2b1423f67a81d8188d68b1fbfdad1a88b3893cd', name: "image" })));
+        } : { 'text-color': this.textColor })), hAsync("div", { key: '0b52a8859b6cdcd92d0f5e97b460a3e0a899bd44' }, hAsync("div", { key: 'a36ed5ad57c878d70770ccfeccd172749a555b22', class: BannerClass.content }, hAsync("slot", { key: '57f52bfb0189450e77c00f4d9904712e555a3125', name: "headline" }), hAsync("slot", { key: '91629f1bf0605ae28d694d044d19bbef9ebb69da' })), this.h.hasSlot('button') && (hAsync("slot", { key: '458a59c73e9bdf02d6cdb1e8c5caea0dcfec526a', name: "button" }))), hAsync("slot", { key: 'f1d60077313455ed78c78b56c7741b4b593cf7cc', name: "image" })));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -4759,6 +4759,19 @@ const propsValueToArray = (value) => {
     return [];
 };
 
+const normalize = (value) => typeof value === 'string' ? removeDiacritics(value).toLowerCase() : '';
+const filterAutocompleteOptions = (options, query, nameKey, maxOptions) => {
+    const source = Array.isArray(options) ? options : [];
+    const normalizedQuery = normalize(query);
+    const matches = normalizedQuery.length === 0
+        ? source
+        : source.filter(item => {
+            const text = item === null || item === void 0 ? void 0 : item[nameKey];
+            return typeof text === 'string' && normalize(text).includes(normalizedQuery);
+        });
+    return Number.isInteger(maxOptions) && maxOptions > 0 ? matches.slice(0, maxOptions) : matches;
+};
+
 class GovFormAutocomplete {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -4766,6 +4779,7 @@ class GovFormAutocomplete {
         this.govBlur = createEvent(this, "gov-blur");
         this.govInput = createEvent(this, "gov-input");
         this.govSelect = createEvent(this, "gov-select");
+        this.fullOptions = [];
         this.templateResolver = item => item[this.nameKey];
         /**
          * Value of input
@@ -4793,6 +4807,11 @@ class GovFormAutocomplete {
          * Minimum length (number of characters) of value
          */
         this.minlength = 3;
+        /**
+         * Maximum number of items shown from a static `options` list (0 = unlimited).
+         * Applies only when no async search callback is set.
+         */
+        this.maxOptions = 10;
         /**
          * Input throttle in milliseconds
          */
@@ -4805,13 +4824,33 @@ class GovFormAutocomplete {
         this.arrowCounter = -1;
         this.list = [];
         this.inheritedAttributes = {};
+        this.emitAndSearch = (e) => {
+            this.govInput.emit({
+                originalEvent: e,
+                component: FormAutocompleteClass.root,
+                value: this.value,
+                selected: null,
+            });
+            this.doSearch();
+        };
+        this.onInputHandler = (e) => {
+            e.stopPropagation();
+            this.value = e.detail.value;
+            this.debouncedSearch(e);
+        };
         this.listBoxId = createID('GovListBox');
     }
     validateSize(newValue) {
         validateProp(FormAutocompleteSizes, newValue, FormAutocompleteClass.root);
     }
     watchOptions(newValue) {
-        this.setOptions(propsValueToArray(newValue)).catch();
+        this.fullOptions = propsValueToArray(newValue);
+        if (this.searchCallback) {
+            this.setOptions(this.fullOptions).catch();
+        }
+        else {
+            this.list = filterAutocompleteOptions(this.fullOptions, this.value, this.nameKey, this.maxOptions);
+        }
     }
     onArrowUp() {
         if (this.arrowCounter > 0) {
@@ -4835,13 +4874,13 @@ class GovFormAutocomplete {
         }
     }
     doSearch() {
-        if (Number.isInteger(this.minlength) && this.isValueAccepted === false && this.minlength) {
-            this.list = [];
-            this.arrowCounter = -1;
-            this.processing = false;
-            return;
-        }
         if (this.searchCallback) {
+            if (Number.isInteger(this.minlength) && this.isValueAccepted === false && this.minlength) {
+                this.list = [];
+                this.arrowCounter = -1;
+                this.processing = false;
+                return;
+            }
             this.processing = true;
             this.searchCallback(this.value)
                 .then(response => (this.list = response))
@@ -4850,11 +4889,13 @@ class GovFormAutocomplete {
                 this.arrowCounter = -1;
                 this.processing = false;
             });
+            return;
         }
+        this.list = filterAutocompleteOptions(this.fullOptions, this.value, this.nameKey, this.maxOptions);
+        this.arrowCounter = -1;
     }
     clearList() {
-        const areOptions = propsValueToArray(this.options);
-        if (areOptions.length === 0) {
+        if (this.fullOptions.length === 0) {
             this.list = [];
         }
     }
@@ -4875,6 +4916,14 @@ class GovFormAutocomplete {
     componentWillLoad() {
         this.validateSize(this.size);
         this.inheritedAttributes = inheritAriaAttributes(this.host);
+        this.debouncedSearch = throttle(this.emitAndSearch, this.throttleTime);
+        this.fullOptions = propsValueToArray(this.options);
+        if (!this.searchCallback) {
+            this.list = filterAutocompleteOptions(this.fullOptions, this.value, this.nameKey, this.maxOptions);
+        }
+    }
+    watchThrottleTime() {
+        this.debouncedSearch = throttle(this.emitAndSearch, this.throttleTime);
     }
     disconnectedCallback() {
         var _a;
@@ -4885,7 +4934,7 @@ class GovFormAutocomplete {
         this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     render() {
-        return (hAsync(Host, { key: '531610863e3752a4e07f0b6c3b946c475a6420c6', class: FormAutocompleteClass.root, size: this.size }, hAsync("gov-form-input", Object.assign({ key: '82f74fc8139c85cddb4e206c5d82286107135fff', 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": 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": booleanString(this.list.length && this.focused ? true : false), ref: el => (this.inputRef = el) }), hAsync("slot", { key: 'd27f897ff5c405adc14640a7e8508319df7b5ff9', name: "validation-icon" }), hAsync("slot", { key: 'da5ec2879f9c6ba7c57a68cc2515539016a6ec43', name: "icon-end" })), hAsync("ul", { key: 'cbb3514f12fe3c506d7bcf2c3aa86b78303ac398', class: FormAutocompleteClass.list, role: 'listbox', "aria-hidden": 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 ? (hAsync("li", { class: FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (hAsync("li", { class: FormAutocompleteClass.loading }, hAsync("gov-skeleton", { size: "m" }))) : null, this.focused ? this.list.map((item, index) => {
+        return (hAsync(Host, { key: '0cdbf770359115b24432e9d533b4e17ab2c65e18', class: FormAutocompleteClass.root, size: this.size }, hAsync("gov-form-input", Object.assign({ key: '5724ed153e3f2384725badbafdb0c19e67b69538', 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": this.onInputHandler, "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": booleanString(this.list.length && this.focused ? true : false), ref: el => (this.inputRef = el) }), hAsync("slot", { key: 'ab6f37982f3d13adc2473a744b5697ac8bc651f5', name: "validation-icon" }), hAsync("slot", { key: '1961a029eceee169b5be12fa4ba8c2e9072bb9de', name: "icon-end" })), hAsync("ul", { key: '61b9b6929be4816e93e1b5fb778c3861b4f8631b', class: FormAutocompleteClass.list, role: 'listbox', "aria-hidden": 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.searchCallback && this.fullOptions.length > 0)) && this.messageEmpty ? (hAsync("li", { class: FormAutocompleteClass.empty }, this.messageEmpty)) : null, this.focused && this.processing === true && this.isValueAccepted ? (hAsync("li", { class: FormAutocompleteClass.loading }, hAsync("gov-skeleton", { size: "m" }))) : null, this.focused ? this.list.map((item, index) => {
             const isSelected = this.arrowCounter === index;
             return (hAsync("li", { class: FormAutocompleteClass.item, innerHTML: this.templateResolver(item, isSelected), role: 'option', "aria-posinset": index, tabindex: isSelected ? 0 : -1, "aria-setsize": this.list.length, onTouchStart: (e) => this.onSelectHandler(e, index), onMouseDown: (e) => this.onSelectHandler(e, index), "aria-selected": toBoolAttr(isSelected) }, hAsync("slot", { name: "list-item-left" }), hAsync("slot", { name: "list-item-right" })));
         }) : null)));
@@ -4893,7 +4942,12 @@ class GovFormAutocomplete {
     onFocusHandler(e) {
         this.focused = true;
         this.arrowCounter = -1;
-        if (this.isValueAccepted && this.searchCallback) {
+        if (this.searchCallback) {
+            if (this.isValueAccepted) {
+                this.doSearch();
+            }
+        }
+        else {
             this.doSearch();
         }
         e.stopPropagation();
@@ -4916,17 +4970,6 @@ class GovFormAutocomplete {
             selected: null,
         });
     }
-    onInputHandler(e) {
-        this.value = e.target.value;
-        e.stopPropagation();
-        this.govInput.emit({
-            originalEvent: e,
-            component: FormAutocompleteClass.root,
-            value: this.value,
-            selected: null,
-        });
-        this.doSearch();
-    }
     onSelectHandler(e, index = -1) {
         let selected = null;
         if (index > -1) {
@@ -5020,7 +5063,8 @@ class GovFormAutocomplete {
     get host() { return getElement(this); }
     static get watchers() { return {
         "size": ["validateSize"],
-        "options": ["watchOptions"]
+        "options": ["watchOptions"],
+        "throttleTime": ["watchThrottleTime"]
     }; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -5040,6 +5084,7 @@ class GovFormAutocomplete {
             "invalid": [4],
             "minlength": [2],
             "maxlength": [2],
+            "maxOptions": [2, "max-options"],
             "throttleTime": [2, "throttle-time"],
             "messageEmpty": [1, "message-empty"],
             "focused": [32],
@@ -5690,7 +5735,10 @@ class GovFormFile {
     }
     validateFiles(files) {
         let filesBuffer = [];
-        Array.from(files).map(file => {
+        if (!this.multiple && this.displayAttachments) {
+            this.files = [];
+        }
+        Array.from(files).forEach(file => {
             const isFile = this.files.find(item => item.file.name === file.name && item.file.size === file.size) || null;
             if (isFile === null || this.ignoreFileDuplicationCheck) {
                 const isSizeValid = typeof this.maxFileSize === "number" && this.maxFileSize > 0 ? fileSizeValidation(file, this.maxFileSize) : true;
@@ -5713,6 +5761,9 @@ class GovFormFile {
                 });
             }
         });
+        if (this.displayAttachments) {
+            this.syncNativeInputFiles();
+        }
         this.govFiles.emit({
             component: FormFileClass.root,
             files: filesBuffer.length ? filesBuffer : this.files,
@@ -5721,6 +5772,25 @@ class GovFormFile {
             this.reset().finally();
         }
     }
+    // Keep native <input type="file"> in sync with the visible attachments list so
+    // that a native form submit / FormData carries exactly the files shown in the UI.
+    // Invalid items (wrong type or oversize) are intentionally excluded.
+    syncNativeInputFiles() {
+        if (!this.inputRef || typeof DataTransfer === "undefined") {
+            return;
+        }
+        try {
+            const dt = new DataTransfer();
+            this.files
+                .filter(item => item.acceptValid === true && item.sizeValid === true)
+                .forEach(item => dt.items.add(item.file));
+            this.inputRef.files = dt.files;
+        }
+        catch (e) {
+            // Safari < 14.1 / older browsers may reject assigning to .files; nothing safe to fall back to.
+            if (typeof process !== "undefined" && process.env && "production" !== "production") ;
+        }
+    }
     componentDidLoad() {
         this.attributeObserver = new AttributeObserver(this.host, (attributeName, newValue) => {
             this.onAriaAttributeChange(attributeName, newValue);
@@ -5744,7 +5814,7 @@ class GovFormFile {
         this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
     render() {
-        return (hAsync(Host, { key: '0f005cd699699df5d67c1ae5a1ce69bcbe14df08', class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, hAsync("div", { key: '85de8e3bbbed08f63a93b874799b2e76311320dd', class: FormFileClass.area, ref: el => (this.areaRef = el) }, hAsync("slot", { key: 'd67d074f20d899d81c37118eeb872eace16be983' }), hAsync("input", Object.assign({ key: 'b0be06c28155cd0bfd13aa6926f05718fe58ca2d', 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": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled) })), hAsync("div", { key: 'bf27e1a3806a4334ec9476171c64a5dfe96a1040', class: FormFileClass.inputFocus })), this.h.hasSlot("attachments") ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("gov-attachments", { label: this.accessibleAttachmentsLabel, "accessible-label": this.accessibleAttachmentsLabel }, this.files.map(item => (hAsync("gov-attachments-item", { "accessible-remove-labelledby": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, item.file.name, hAsync("span", { slot: "name" }, item.file.name), item.acceptValid === false ? (hAsync("gov-form-message", { slot: "message", color: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (hAsync("gov-form-message", { slot: "message", color: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, hAsync("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
+        return (hAsync(Host, { key: '6709aba5a796ccb9cf712dd5f962d5f903050d26', class: this.h.classes([FormFileClass.root]), invalid: toBoolAttrIfDefined(this.invalid), expanded: toBoolAttrIfDefined(this.expanded) }, hAsync("div", { key: '668f6959ca55220ed2543dbbeddeb98f1b6c19ba', class: FormFileClass.area, ref: el => (this.areaRef = el) }, hAsync("slot", { key: '5f12f12d074163b525e2200e23f61e6d0fb34c74' }), hAsync("input", Object.assign({ key: '7cf43884dad3c28be956b9897862ff5a1fa22e75', 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": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled) })), hAsync("div", { key: 'ec717f584bcd4d74416821736fb4bdcea517bc83', class: FormFileClass.inputFocus })), this.h.hasSlot("attachments") ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("slot", { name: "attachments" }))) : null, this.files.length && this.displayAttachments ? (hAsync("div", { class: FormFileClass.attachments }, hAsync("gov-attachments", { label: this.accessibleAttachmentsLabel, "accessible-label": this.accessibleAttachmentsLabel }, this.files.map(item => (hAsync("gov-attachments-item", { "accessible-remove-labelledby": item.id, "on-gov-remove": () => this.onRemoveFileHandler(item) }, item.file.name, hAsync("span", { slot: "name" }, item.file.name), item.acceptValid === false ? (hAsync("gov-form-message", { slot: "message", color: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), item.acceptValid === false ? this.errorAccept : null)) : null, item.sizeValid === false ? (hAsync("gov-form-message", { slot: "message", color: "error" }, hAsync("gov-icon", { slot: "icon", name: "exclamation-triangle-fill", type: "components" }), this.errorSize.replace("{FILE_SIZE}", formatBytes(this.maxFileSize)))) : null, hAsync("span", { slot: "info" }, "(", formatBytes(item.file.size), ")"))))))) : null));
     }
     onRemoveFileHandler(file) {
         const index = this.files.findIndex(item => item.id === file.id);
@@ -5753,6 +5823,7 @@ class GovFormFile {
             const removeFile = this.files[index];
             files.splice(index, 1);
             this.files = [...files];
+            this.syncNativeInputFiles();
             this.govRemoveFile.emit({
                 component: FormFileClass.root,
                 file: removeFile,
@@ -5797,7 +5868,10 @@ class GovFormFile {
      */
     async reset() {
         this.files = [];
-        this.inputRef.value = '';
+        if (this.inputRef) {
+            this.inputRef.value = '';
+            this.syncNativeInputFiles();
+        }
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -6936,19 +7010,19 @@ class GovFormSearch {
         this.color = 'neutral';
     }
     render() {
-        return (hAsync(Host, { key: '8694237120321b5cea6dbe4c4152edfde30228a1', class: FormSearchClass.root, color: this.color, size: this.size }, hAsync("slot", { key: '4c382e33221ff8b874a7f8544d94261298c3cf28', name: "input" }), hAsync("slot", { key: '3b56d19118f2b75964a9ed62ae2210e7705ba4a5', name: "button-erase" }), hAsync("slot", { key: 'c829a3df01bc53fab6b3022aac353ebe06b088db', name: "button" })));
+        return (hAsync(Host, { key: 'c901368f70213c3be37b44b472002ce0872209d0', class: FormSearchClass.root, color: this.color, size: this.size }, hAsync("slot", { key: '4ca581f75ccd75f785f94c1f93500c914b129cc8', name: "input" }), hAsync("slot", { key: '10a34b30a9496b0d9a82b0baaf10b66ac5a2679f', name: "button-erase" }), hAsync("slot", { key: '2888491da6babe4e7586abdda1863850ed67f8a9', name: "button" })));
     }
     get host() { return getElement(this); }
     static get cmpMeta() { return {
         "$flags$": 4,
         "$tagName$": "gov-form-search",
         "$members$": {
-            "size": [1],
+            "size": [513],
             "color": [513]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["color", "color"]]
+        "$attrsToReflect$": [["size", "size"], ["color", "color"]]
     }; }
 }
 
@@ -6988,7 +7062,7 @@ class GovFormSelect {
         this.passControlAttrs();
     }
     watchValue() {
-        this.markSelectedValue();
+        this.syncSelectValue();
     }
     passControlAttrs() {
         this.f.passAttrToControl('size', this.size);
@@ -7002,6 +7076,7 @@ class GovFormSelect {
             this.onAriaAttributeChange(attributeName, newValue);
         });
         this.attributeObserver.startObserving(ariaAttributes);
+        this.syncSelectValue();
     }
     disconnectedCallback() {
         var _a;
@@ -7009,34 +7084,27 @@ class GovFormSelect {
     }
     componentWillLoad() {
         this.validateSize(this.size);
-        this.markSelectedValue();
         this.optionsState = propsValueToArray(this.options);
         this.inheritedAttributes = inheritAriaAttributes(this.host);
     }
     async componentDidRender() {
         this.passControlAttrs();
         this.f.passAttrToLabel('required', String(this.required));
-        tick(() => this.markSelectedValue());
     }
     onAriaAttributeChange(attributeName, newValue) {
         this.host.removeAttribute(attributeName);
         this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { [attributeName]: newValue });
     }
-    markSelectedValue() {
-        this.host.querySelectorAll('option').forEach((option) => {
-            if (option.value === this.value) {
-                option.setAttribute('selected', 'selected');
-            }
-            else {
-                option.removeAttribute('selected');
-            }
-        });
+    syncSelectValue() {
+        if (this.selectRef && this.value !== undefined && this.selectRef.value !== this.value) {
+            this.selectRef.value = this.value;
+        }
     }
     render() {
-        return (hAsync(Host, { key: '92b4679d9a9fb77628934ed90e00b1eafc593a3e', class: FormSelectClass.root, size: this.size }, this.h.hasSlot('prefix') && hAsync("slot", { key: 'b51835a8b6254898a064a41c75f95cc746d46d57', name: "prefix" }), hAsync("span", { key: '2324839a4c3821a46fcdace4755961a96216dadc', class: "element" }, hAsync("select", Object.assign({ key: 'df1fe5989b6d427c0f48d673f951a4b1f5f8b728', 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": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid) }), hAsync("slot", { key: 'bc12463c981b174aa49a791f360d6001230c3fc4' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
+        return (hAsync(Host, { key: 'd29638f5868731a2324971d197dcd636364a4f6c', class: FormSelectClass.root, size: this.size }, this.h.hasSlot('prefix') && hAsync("slot", { key: '41cc14ee33022a4cf6d10c3d86c8915551221e94', name: "prefix" }), hAsync("span", { key: 'f9c167589fa81f0a060a13d9a31d16ab642d5ad2', class: "element" }, hAsync("select", Object.assign({ key: '2dd5c948ccc7b65674e7d7f730cb2c9567287668', 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": toBoolAttrIfDefined(this.disabled), "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid) }), hAsync("slot", { key: 'f6f0b21c9e43e1216446bce09c57a757a40d7b7b' }), Array.isArray(this.optionsState) && this.optionsState.map((option) => {
             var _a;
             return (hAsync("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 && hAsync("gov-icon", { key: 'def96c72b9bd804797472954d591e16d25860036', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && hAsync("gov-icon", { key: 'e20c8d4bac094529ff51d8412ae2105401edcf98', class: "validation-icon", name: "exclamation-lg", type: "components" }), hAsync("gov-icon", { key: 'e004aae985d9de1202fb50c06f5baa4d12c19fd2', class: "arrow-icon", name: "chevron-down", type: "components" })), this.h.hasSlot('sufix') && hAsync("slot", { key: '72b7791037616836108a7420d13b21bf44fdeb85', name: "sufix" })));
+        })), this.success && hAsync("gov-icon", { key: 'd94a0191bc7d02d55450dfad627457101226ad22', class: "validation-icon", name: "check-lg", type: "components" }), this.invalid && hAsync("gov-icon", { key: '84ecf7197313c8a145efa54730d22068679df3f5', class: "validation-icon", name: "exclamation-lg", type: "components" }), hAsync("gov-icon", { key: '1a219d4d230466ac15e316eee16d4a55db1889fe', class: "arrow-icon", name: "chevron-down", type: "components" })), this.h.hasSlot('sufix') && hAsync("slot", { key: 'c7f4816548e3494de94f7ff0dd33f6c904acc14b', name: "sufix" })));
     }
     onFocusHandler(e) {
         this.focused = true;
@@ -7345,7 +7413,7 @@ var Types;
 const IconClass = {
     root: 'gov-icon'};
 
-const version = "4.6.3";
+const version = "4.6.4";
 
 const dsVersion = () => {
     return version;
@@ -9177,6 +9245,12 @@ class GovTooltip {
          */
         this.icon = undefined;
         this.persist = false;
+        this.repositionListenersAttached = false;
+        this.reposition = () => {
+            if (this.tooltipContent) {
+                this.verifyPositionSpace();
+            }
+        };
         this.h = govHost(this.host);
         this.tooltipId = createID("GovTooltip");
         this.tooltipContentId = createID("GovContentTooltip");
@@ -9206,16 +9280,18 @@ class GovTooltip {
         this.createContentWrapper();
     }
     disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        window.removeEventListener("resize", this.reposition);
+        this.repositionListenersAttached = false;
         this.removeContent();
     }
     createContentWrapper() {
         var _a;
         if (this.tooltipContent) {
-            if (this.message) {
-                this.tooltipContent.innerHTML = this.message;
-            }
-            else if (this.insideContent) {
-                this.tooltipContent.innerHTML = this.insideContent.innerHTML;
+            if (this.message != null) {
+                this.tooltipContent.setAttribute("message", this.message);
             }
             return;
         }
@@ -9225,7 +9301,9 @@ class GovTooltip {
         }
         else {
             content = documentNode().createElement(TooltipContentClass.root);
-            content.innerHTML = this.message;
+            if (this.message != null) {
+                content.setAttribute("message", this.message);
+            }
         }
         content.setAttribute("id", (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId);
         content.setAttribute("parent-id", this.tooltipId);
@@ -9340,14 +9418,27 @@ class GovTooltip {
             tick(() => {
                 this.verifyPositionSpace();
             });
+            if (!this.repositionListenersAttached) {
+                this.repositionListenersAttached = true;
+                if (typeof ResizeObserver !== "undefined") {
+                    this.resizeObserver = new ResizeObserver(this.reposition);
+                    this.resizeObserver.observe(this.tooltipContent);
+                }
+                window.addEventListener("resize", this.reposition);
+            }
         }
     }
     hideTooltip() {
+        var _a;
         if (this.tooltipContent) {
             this.tooltipContent.setAttribute("is-visible", "false");
             this.tooltipContent.setAttribute("persist", "false");
             this.tooltipContent.removeAttribute('style');
         }
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.resizeObserver = undefined;
+        window.removeEventListener("resize", this.reposition);
+        this.repositionListenersAttached = false;
     }
     removeContent() {
         const contentEl = document.getElementById(this.tooltipContentId);
@@ -9357,11 +9448,11 @@ class GovTooltip {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'dd78d93d3b5ba4bc3a128435f58467c9bd6def43', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: '2ede8642a4cf998367da3756c795847195c0f694', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
+        return (hAsync(Host, { key: '20ebe5eea59967e8681fd0e35fc7aff53b5915dd', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: '847b78886907d683425013227eb78bbf9261b709', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
                 if (this.persist === false) {
                     this.hideTooltip();
                 }
-            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: '9607b4c9b24766f70b53c6372e6e7219e7a3a6fd' }))));
+            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: '84c4c02ee11e05166fca208b82ef54298dcaa6ee' }))));
     }
     /**
      * Showing the modal
@@ -9447,7 +9538,9 @@ class GovTooltipContent {
         }
     }
     render() {
-        return (hAsync(Host, { key: '71d259cc8d7247030767f8ac36a6875f9c16ffea', class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, hAsync("slot", { key: '06d883340271717da9d0b8de6c35339cd5c9dfb9' }), this.persist ? (hAsync("gov-button", { "on-gov-click": this.hideContent.bind(this), color: this.color, size: this.size, type: "base" }, hAsync("gov-icon", { slot: "icon-start", name: "x-lg", type: "components" }))) : null));
+        return (hAsync(Host, { key: '121b5cd3878956618a7a917511e6d8d76edf6672', class: TooltipContentClass.root, role: "tooltip", hidden: !this.isVisible, "aria-hidden": !toBoolAttr(this.isVisible), "is-visible": this.isVisible }, this.message
+            ? hAsync("span", { class: "gov-tooltip-content__message", innerHTML: this.message })
+            : hAsync("slot", null), this.persist ? (hAsync("gov-button", { "on-gov-click": this.hideContent.bind(this), color: this.color, size: this.size, type: "base" }, hAsync("gov-icon", { slot: "icon-start", name: "x-lg", type: "components" }))) : null));
     }
     get host() { return getElement(this); }
     static get watchers() { return {
@@ -9461,7 +9554,8 @@ class GovTooltipContent {
             "size": [1],
             "persist": [4],
             "isVisible": [1028, "is-visible"],
-            "parentId": [1, "parent-id"]
+            "parentId": [1, "parent-id"],
+            "message": [1025]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -9522,7 +9616,7 @@ class GovWizard {
         this.hydrated = true;
     }
     render() {
-        return (hAsync(Host, { key: '5d1d08b27c5a8b266d209841d4cfda654081124c', class: this.h.classes(WizardClass.root), role: "list", size: this.size, hydrated: this.hydrated }, hAsync("slot", { key: 'c17071c8a7bed0dee95deec69c0ce1c668160209' })));
+        return (hAsync(Host, { key: 'd1957fc0c0058c107769e3cc5390ef986fc9b921', class: this.h.classes(WizardClass.root), role: "list", size: this.size, hydrated: this.hydrated }, hAsync("slot", { key: 'a34323c408d790c5945ca0d80db62de2433db438' })));
     }
     /**
      * Validate the WCAG attributes of the component
@@ -9598,8 +9692,8 @@ class GovWizardItem {
     render() {
         const triggerId = this.identifier || this.triggerId;
         const Tag = this.collapsible ? Tags.BUTTON : Tags.DIV;
-        const prefixSlot = this.h.hasSlot("prefix") && (hAsync("span", { key: '10144e93de98bf60873fa6c244c4129b040b8bae', class: WizardItemClass.prefix }, hAsync("slot", { key: 'a946028d94e0c159cf4c91fa1773467c8203a5f2', name: "prefix" })));
-        return (hAsync(Host, { key: 'f33ced4d5d8f57bec50cc8ebce6f12cf2145833d', class: this.h.classes(WizardItemClass.root), "is-expanded": this.isExpanded, color: this.color, size: this.size, role: "listitem", collapsible: this.collapsible, hydrated: this.hydrated }, hAsync("div", { key: '872e3e164b4cca4955c2ba4cf0a2d88563f50fc5', class: WizardItemClass.header }, prefixSlot, this.collapsible ? (hAsync(Tag, { id: triggerId, class: this.h.classes(WizardItemClass.label), "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
+        const prefixSlot = this.h.hasSlot("prefix") && (hAsync("span", { key: '3f00516020337fc142713c6edb468d0007eba3c5', class: WizardItemClass.prefix }, hAsync("slot", { key: '05aa42bc8241f53bb3664dc3d06798cb0344f92f', name: "prefix" })));
+        return (hAsync(Host, { key: '863700f5087e86d1f8d4e22b40108dfbc0cb96f5', class: this.h.classes(WizardItemClass.root), "is-expanded": this.isExpanded, color: this.color, size: this.size, role: "listitem", collapsible: this.collapsible, hydrated: this.hydrated }, hAsync("div", { key: '6d93a5bb12dbe2fc2e308059ffd5d63ed915f16d', class: WizardItemClass.header }, prefixSlot, this.collapsible ? (hAsync(Tag, { id: triggerId, class: this.h.classes(WizardItemClass.label), "aria-expanded": booleanString(this.isExpanded), "aria-controls": this.contentId, disabled: this.disabled, "aria-disabled": toBoolAttrIfDefined(this.disabled), onClick: (e) => {
                 e.preventDefault();
                 e.stopPropagation();
                 this.toggle();