@gov-design-system-ce/components 4.0.8-rc12 → 4.0.8-rc14

package/dist/hydrate/index.js

@@ -4873,6 +4873,7 @@ class GovFormInput {
         this.autocomplete = undefined;
         this.autocorrect = undefined;
         this.spellcheck = undefined;
+        this.inputLang = undefined;
         this.type = undefined;
         this.inputType = "text";
         this.role = undefined;
@@ -4918,9 +4919,9 @@ class GovFormInput {
     }
     render() {
         const Tag = this.multiline ? Tags$1.TEXTAREA : Tags$1.INPUT;
-        return (hAsync(Host, { key: '882de587fbcd5dbe29f9be53017319e27e473b82', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && hAsync("slot", { key: 'a6d9aeb552da3b0eca325437b61141ec11b53e7d', name: "prefix" }), hAsync("span", { key: '6396e695da2afee201ca00bea17befc74122d92c', class: "element" }, this.h.hasSlot("left-icon") && hAsync("slot", { key: '9cafd86301233ce4263586b50e04a7aba345bec1', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && hAsync("slot", { key: 'ab345343e1909354be7867d6044a0091c7965578', name: "right-icon" }), this.success && !this.multiline &&
-            hAsync("gov-icon", { key: 'cd69e417608ffd0c9b4fc2d8fe386f1b358ad897', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
-            hAsync("gov-icon", { key: '48f5138303b2e06d16c1b03991818083b6fef8a6', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync(Tag, { key: '3d9f187d937186f0fd56a8caa31f9bcbd41dd0ce', type: 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, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: 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, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && hAsync("slot", { key: '14d40dac468acf1b158660fb7383ff4ae89024c1', name: "sufix" })));
+        return (hAsync(Host, { key: '1d217855ba964b9c637373529e2b677fb09f8034', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && hAsync("slot", { key: '75b989d2f4b70cf43e9a5315fdb6eb56af832118', name: "prefix" }), hAsync("span", { key: '39f063be627ad300abe364adfa4a32b79a879773', class: "element" }, this.h.hasSlot("left-icon") && hAsync("slot", { key: '84da6d8d05274f5a9760b871ffb89dec870122f8', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && hAsync("slot", { key: 'b8ede08c703cc88e526593cb5aac4a868293543c', name: "right-icon" }), this.success && !this.multiline &&
+            hAsync("gov-icon", { key: '1dad15f0bbab72fef2f2d596fb2ce27b097eb3a4', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
+            hAsync("gov-icon", { key: '9d8ed110a2640133ecc462c6b06f1f5496fb61f7', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync(Tag, { key: '62ac8ee0c14c5289c377685fabf535947a43f4c5', type: 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, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: 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, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && hAsync("slot", { key: '9746bac959c672b37d1c5529cbbe0da13ecf4ce8', name: "sufix" })));
     }
     onFocusHandler(e) {
         e.stopPropagation();
@@ -5032,6 +5033,7 @@ class GovFormInput {
             "autocomplete": [4],
             "autocorrect": [4],
             "spellcheck": [4],
+            "inputLang": [1, "input-lang"],
             "type": [1],
             "inputType": [1, "input-type"],
             "role": [1],
@@ -6690,6 +6692,7 @@ class GovPagination {
         this.current = 1;
         this.total = 0;
         this.inverse = undefined;
+        this.selectIdentifier = undefined;
         this.size = "m";
         this.variant = "primary";
         this.pageSize = 10;
@@ -6706,6 +6709,7 @@ class GovPagination {
         this.pagination = undefined;
         this.h = govHost(this.host);
         this.pageSelectId = createID("GovPageSelect");
+        this.selectId = createID("GovSelect");
     }
     validateType(newValue) {
         validateProp(PaginationTypes, newValue, PaginationClass.root);
@@ -6761,7 +6765,7 @@ class GovPagination {
             const ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined);
             return (hAsync("gov-button", { href: this.prepareLinkUrl(page), variant: this.variant, size: this.size, type: "base", disabled: isDisabled, "on-gov-click": (e) => this.onClickHandler(e, page), "wcag-label": description ? description : page > -1 ? this.wcagPageLabel + " " + page : undefined, "wcag-current": ariaCurrent, class: PaginationClass.inner }, content));
         };
-        return (hAsync(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, hAsync("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, hAsync("ul", { class: PaginationClass.list }, hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }), this.labelStart)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }), this.labelPrev)), this.type == "select" ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (hAsync(Fragment, null, this.pagination.pages.map(page => (hAsync("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page, '')))), this.pagination.totalPages ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, hAsync("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: false }, page))))))) : null)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }), this.labelNext)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" }), this.labelEnd))))));
+        return (hAsync(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, hAsync("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, hAsync("ul", { class: PaginationClass.list }, hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }), this.labelStart)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }), this.labelPrev)), this.type == "select" ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, identifier: this.selectIdentifier || this.selectId, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (hAsync(Fragment, null, this.pagination.pages.map(page => (hAsync("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page, '')))), this.pagination.totalPages ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, identifier: this.selectIdentifier || this.selectId, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, hAsync("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: false }, page))))))) : null)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }), this.labelNext)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" }), this.labelEnd))))));
     }
     onClickHandler(e, page) {
         e.stopPropagation();
@@ -6815,6 +6819,7 @@ class GovPagination {
             "current": [2],
             "total": [2],
             "inverse": [4],
+            "selectIdentifier": [1, "select-identifier"],
             "size": [1],
             "variant": [1],
             "pageSize": [2, "page-size"],
@@ -7560,7 +7565,7 @@ class GovTabs {
         registerInstance(this, hostRef);
         this.govChange = createEvent(this, "gov-change", 7);
         this.triggerRefs = {};
-        this.controller = [];
+        this.controllers = [];
         this.focusIndex = 0;
         this.compactControls = false;
         this.type = "text";
@@ -7579,17 +7584,16 @@ class GovTabs {
         validateProp(TabVariants, newValue, TabsClass.root);
     }
     componentWillLoad() {
-        this.prepareDataSource();
+        this.prepareControllers();
     }
     async componentDidRender() {
         if (canValidateWcagOnRender()) {
             await delay(500);
             await this.validateWcag();
         }
-        this.resizeObserver();
     }
-    prepareDataSource() {
-        this.controller = [];
+    prepareControllers() {
+        this.controllers = [];
         const promises = [];
         this.host.querySelectorAll(TabsItemClass.root).forEach((tab) => {
             const controlItem = Promise.all([
@@ -7611,49 +7615,36 @@ class GovTabs {
             promises.push(controlItem);
         });
         Promise.all(promises).then(controllers => {
-            let defaultTab = controllers.findIndex(controller => controller.default);
-            if (defaultTab === -1)
-                defaultTab = 0;
-            this.focusIndex = defaultTab;
-            controllers[defaultTab].active = true;
-            this.controller = [...controllers];
+            let defaultTabIndex = controllers.findIndex(controller => controller.default);
+            if (defaultTabIndex === -1)
+                defaultTabIndex = 0;
+            this.focusIndex = defaultTabIndex;
+            controllers[defaultTabIndex].active = true;
+            this.controllers = [...controllers];
             this.reRender();
         });
     }
     setActiveByIdentifier(identifier) {
         const temp = [];
-        this.controller.map(item => {
+        this.controllers.map(item => {
             item.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier;
             temp.push(item);
         });
-        this.controller = [...temp];
+        this.controllers = [...temp];
     }
     reRender() {
-        this.controller.map(control => {
-            control.element.setActiveStatus(control.active);
+        this.controllers.map(control => {
+            control.element.setActiveStatus(control.active).catch();
         });
     }
-    /*
-    private evaluateControls() {
-        this.compactControls = false
-        let sumOfWidth = this.tabsRef.querySelector("ul").offsetWidth
-        this.compactControls = this.tabsRef.offsetWidth < sumOfWidth
-    }
-    */
-    resizeObserver() {
-        const resizeObserver = new ResizeObserver(throttle(() => {
-            // this.evaluateControls()
-        }, 200));
-        resizeObserver.observe(this.tabsRef);
-    }
     render() {
-        return (hAsync(Host, { key: '561251fc7844ec9d11f72ff6e03ac6656b298ac9', class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, hAsync("div", { key: 'c5ecb113f0c39857a3d4eea506b08321b577f2b1', class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, hAsync("ul", { key: 'd1d1d166a43ddc69d35ec6c359dbab589e3c92fd', class: TabsClass.list }, this.controller.map(control => (hAsync("li", { class: TabsClass.item }, this.type == "text" ? (hAsync("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control), disabled: control.disabled, "aria-disabled": toBoolAttr(control.disabled), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active && !control.disabled ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (hAsync("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "wcag-selected": control.active, "wcag-controls": control.contentIdentifier, focusable: control.active, disabled: control.disabled, variant: this.variant, inverse: !control.active, ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control) }, control.label))))))), hAsync("span", { key: '713c0bcfb6ff3377c77bff908b7e30ecd084d64f', id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (hAsync("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (hAsync("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, hAsync("slot", { key: '176d4c69a319e1d0630db64ad853bd3358db865c' })));
+        return (hAsync(Host, { key: 'fa6bb0777c56edcb61f5acfa4cac75fae2f8bb78', class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, hAsync("div", { key: '3e764b20b9a1e3221232d7567e45acae8701a963', class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, hAsync("ul", { key: 'adedeb20cd2d5608502410f1b843ba6293000e7c', class: TabsClass.list }, this.controllers.map(control => (hAsync("li", { class: TabsClass.item }, this.type == "text" ? (hAsync("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control), disabled: control.disabled, "aria-disabled": toBoolAttr(control.disabled), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active && !control.disabled ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (hAsync("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "wcag-selected": control.active, "wcag-controls": control.contentIdentifier, focusable: control.active, disabled: control.disabled, variant: this.variant, inverse: !control.active, ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control) }, control.label))))))), hAsync("span", { key: '6d855cd5195673b6a13aaf4b357b74bdcfd0ef4d', id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (hAsync("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controllers.map(control => (hAsync("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, hAsync("slot", { key: 'd7ea30baebad93b05c1f978fcca0c19989be7227' })));
     }
     getCurrentTab() {
-        return this.controller.find(control => control.active) || null;
+        return this.controllers.find(control => control.active) || null;
     }
     onSelectHandler(control) {
-        const index = this.controller.findIndex(t => t.triggerIdentifier === control.triggerIdentifier);
+        const index = this.controllers.findIndex(t => t.triggerIdentifier === control.triggerIdentifier);
         this.focusIndex = index;
         this.setActiveByIdentifier(control.triggerIdentifier);
         this.reRender();
@@ -7673,30 +7664,30 @@ class GovTabs {
     }
     goToPrevNext(keyCode) {
         if ([37, 38, 39, 40].includes(keyCode)) {
-            if (false === (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1)) {
+            if (false === (this.focusIndex >= 0 && this.focusIndex <= this.controllers.length - 1)) {
                 return;
             }
-            this.controller[this.focusIndex].active = false;
+            this.controllers[this.focusIndex].active = false;
             if (keyCode === 39 || keyCode === 40) {
                 this.focusIndex++;
-                if (this.focusIndex >= this.controller.length) {
+                if (this.focusIndex >= this.controllers.length) {
                     this.focusIndex = 0;
                 }
-                if (this.controller[this.focusIndex].disabled) {
+                if (this.controllers[this.focusIndex].disabled) {
                     this.goToPrevNext(40);
                 }
             }
             else if (keyCode === 37 || keyCode === 38) {
                 this.focusIndex--;
                 if (this.focusIndex < 0) {
-                    this.focusIndex = this.controller.length - 1;
+                    this.focusIndex = this.controllers.length - 1;
                 }
-                if (this.controller[this.focusIndex].disabled) {
+                if (this.controllers[this.focusIndex].disabled) {
                     this.goToPrevNext(38);
                 }
             }
-            if (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1) {
-                const current = this.controller[this.focusIndex];
+            if (this.focusIndex >= 0 && this.focusIndex <= this.controllers.length - 1) {
+                const current = this.controllers[this.focusIndex];
                 current.active = true;
                 const trigger = this.triggerRefs[current.triggerIdentifier];
                 if (trigger.nodeName.toLowerCase() === 'gov-chip') {
@@ -7705,7 +7696,7 @@ class GovTabs {
                 else {
                     this.triggerRefs[current.triggerIdentifier].focus();
                 }
-                this.controller = [...this.controller];
+                this.controllers = [...this.controllers];
                 this.reRender();
                 this.govChange.emit(this.getCurrentTab().element);
             }
@@ -7715,7 +7706,7 @@ class GovTabs {
      * Regenerate tabs controllers
      */
     async refresh() {
-        this.prepareDataSource();
+        this.prepareControllers();
     }
     /**
      * Returns the currently selected tabs-item
@@ -7730,6 +7721,12 @@ class GovTabs {
         this.setActiveByIdentifier(identifier);
         this.reRender();
     }
+    /**
+     * Regenerate tabs controllers
+     */
+    async rerender() {
+        this.prepareControllers();
+    }
     /**
      * Validate the WCAG attributes of the component
      */
@@ -7753,12 +7750,13 @@ class GovTabs {
             "wcagLabel": [1, "wcag-label"],
             "wcagSelectLabel": [1, "wcag-select-label"],
             "wcagLabelledBy": [1, "wcag-labelled-by"],
-            "controller": [32],
+            "controllers": [32],
             "focusIndex": [32],
             "compactControls": [32],
             "refresh": [64],
             "currentTab": [64],
             "setActiveTab": [64],
+            "rerender": [64],
             "validateWcag": [64]
         },
         "$listeners$": undefined,
@@ -7783,8 +7781,14 @@ class GovTabsItem {
         this.contentId = createID('GovTabContent');
         this.triggerId = createID('GovTabTrigger');
     }
+    rerenderParent() {
+        const element = this.h.getParent(TabsClass.root);
+        if (element) {
+            element.rerender().catch();
+        }
+    }
     render() {
-        return (hAsync(Host, { key: '76d5b1152d766c4ec9f810e011cbb54fbb614b83', class: this.h.classes(TabsItemClass.root), default: this.default }, hAsync("div", { key: 'beffe50be2fe641def7fe2d1464dad4c00739072', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, hAsync("slot", { key: 'd788632dcc88e04112068e3dcf17c52737770255' }))));
+        return (hAsync(Host, { key: 'b316d961cabc1aed647deaa504ddca1184860f70', class: this.h.classes(TabsItemClass.root), default: this.default }, hAsync("div", { key: 'd73aa35cc5131b81eaceff6afab13250b2587aec', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, hAsync("slot", { key: '4bdf7cd566204ab3ac1883a5194abce6526fc0f0' }))));
     }
     /**
      * Returns a unique tab content identifier
@@ -7811,6 +7815,11 @@ class GovTabsItem {
         this.isActive = status;
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "label": ["rerenderParent"],
+        "disabled": ["rerenderParent"],
+        "default": ["rerenderParent"]
+    }; }
     static get style() { return GovTabsItemStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -8117,12 +8126,14 @@ class GovTooltip {
     rerenderMessage() {
         this.createContentWrapper();
     }
+    connectedCallback() {
+        this.createContentWrapper();
+        this.registerListeners();
+    }
     componentWillLoad() {
         this.validateVariant(this.variant);
         this.validateSize(this.size);
         this.validatePosition(this.position);
-        this.createContentWrapper();
-        this.registerListeners();
     }
     componentDidUpdate() {
         this.createContentWrapper();
@@ -8279,11 +8290,11 @@ class GovTooltip {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'd16d7493cc470032d16e762e75c426c919b683d5', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: 'd80316da39311fde00a00bb7867fd4c73864bd7e', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
+        return (hAsync(Host, { key: '79f1e7f55aa44da4cc08be8f388921c2c940d834', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: '361c2997c12aa96a171ebb1558986b83990b5778', 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: '1ccc180def543def370a189a5c10351fc166dcdd' }))));
+            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: 'bffc64135254b57fb4514a8afdc44bfe4b8f3015' }))));
     }
     /**
      * Showing the modal

package/dist/hydrate/index.mjs

@@ -4869,6 +4869,7 @@ class GovFormInput {
         this.autocomplete = undefined;
         this.autocorrect = undefined;
         this.spellcheck = undefined;
+        this.inputLang = undefined;
         this.type = undefined;
         this.inputType = "text";
         this.role = undefined;
@@ -4914,9 +4915,9 @@ class GovFormInput {
     }
     render() {
         const Tag = this.multiline ? Tags$1.TEXTAREA : Tags$1.INPUT;
-        return (hAsync(Host, { key: '882de587fbcd5dbe29f9be53017319e27e473b82', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && hAsync("slot", { key: 'a6d9aeb552da3b0eca325437b61141ec11b53e7d', name: "prefix" }), hAsync("span", { key: '6396e695da2afee201ca00bea17befc74122d92c', class: "element" }, this.h.hasSlot("left-icon") && hAsync("slot", { key: '9cafd86301233ce4263586b50e04a7aba345bec1', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && hAsync("slot", { key: 'ab345343e1909354be7867d6044a0091c7965578', name: "right-icon" }), this.success && !this.multiline &&
-            hAsync("gov-icon", { key: 'cd69e417608ffd0c9b4fc2d8fe386f1b358ad897', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
-            hAsync("gov-icon", { key: '48f5138303b2e06d16c1b03991818083b6fef8a6', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync(Tag, { key: '3d9f187d937186f0fd56a8caa31f9bcbd41dd0ce', type: 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, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: 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, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && hAsync("slot", { key: '14d40dac468acf1b158660fb7383ff4ae89024c1', name: "sufix" })));
+        return (hAsync(Host, { key: '1d217855ba964b9c637373529e2b677fb09f8034', class: FormInputClass.root, size: this.size, variant: this.variant, type: this.type }, this.h.hasSlot("prefix") && hAsync("slot", { key: '75b989d2f4b70cf43e9a5315fdb6eb56af832118', name: "prefix" }), hAsync("span", { key: '39f063be627ad300abe364adfa4a32b79a879773', class: "element" }, this.h.hasSlot("left-icon") && hAsync("slot", { key: '84da6d8d05274f5a9760b871ffb89dec870122f8', name: "left-icon" }), this.h.hasSlot("right-icon") && !(this.success || this.invalid) && hAsync("slot", { key: 'b8ede08c703cc88e526593cb5aac4a868293543c', name: "right-icon" }), this.success && !this.multiline &&
+            hAsync("gov-icon", { key: '1dad15f0bbab72fef2f2d596fb2ce27b097eb3a4', slot: "right-icon", class: "icon-validation", name: "check-lg" }), this.invalid && !this.multiline &&
+            hAsync("gov-icon", { key: '9d8ed110a2640133ecc462c6b06f1f5496fb61f7', slot: "right-icon", class: "icon-validation", name: "exclamation-lg" }), hAsync(Tag, { key: '62ac8ee0c14c5289c377685fabf535947a43f4c5', type: 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, value: this.value, spellcheck: toBoolAttrIfDefined(this.spellcheck), lang: this.inputLang, readonly: toBoolAttrIfDefined(this.readonly), autocomplete: toOnOffAttrIfDefined(this.autocomplete), autocorrect: 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, "aria-required": toBoolAttrIfDefined(this.required), "aria-invalid": toBoolAttrIfDefined(this.invalid), "aria-disabled": toBoolAttrIfDefined(this.disabled), "aria-describedby": this.wcagDescribedBy, "aria-labelledby": this.wcagLabelledBy, "aria-owns": this.wcagOwns, "aria-expanded": toBoolAttrIfDefined(this.wcagExpanded), "aria-autocomplete": this.wcagAutocomplete })), this.h.hasSlot("sufix") && hAsync("slot", { key: '9746bac959c672b37d1c5529cbbe0da13ecf4ce8', name: "sufix" })));
     }
     onFocusHandler(e) {
         e.stopPropagation();
@@ -5028,6 +5029,7 @@ class GovFormInput {
             "autocomplete": [4],
             "autocorrect": [4],
             "spellcheck": [4],
+            "inputLang": [1, "input-lang"],
             "type": [1],
             "inputType": [1, "input-type"],
             "role": [1],
@@ -6686,6 +6688,7 @@ class GovPagination {
         this.current = 1;
         this.total = 0;
         this.inverse = undefined;
+        this.selectIdentifier = undefined;
         this.size = "m";
         this.variant = "primary";
         this.pageSize = 10;
@@ -6702,6 +6705,7 @@ class GovPagination {
         this.pagination = undefined;
         this.h = govHost(this.host);
         this.pageSelectId = createID("GovPageSelect");
+        this.selectId = createID("GovSelect");
     }
     validateType(newValue) {
         validateProp(PaginationTypes, newValue, PaginationClass.root);
@@ -6757,7 +6761,7 @@ class GovPagination {
             const ariaCurrent = toBoolAttrIfDefined(this.pagination.currentPage === page ? true : undefined);
             return (hAsync("gov-button", { href: this.prepareLinkUrl(page), variant: this.variant, size: this.size, type: "base", disabled: isDisabled, "on-gov-click": (e) => this.onClickHandler(e, page), "wcag-label": description ? description : page > -1 ? this.wcagPageLabel + " " + page : undefined, "wcag-current": ariaCurrent, class: PaginationClass.inner }, content));
         };
-        return (hAsync(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, hAsync("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, hAsync("ul", { class: PaginationClass.list }, hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }), this.labelStart)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }), this.labelPrev)), this.type == "select" ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (hAsync(Fragment, null, this.pagination.pages.map(page => (hAsync("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page, '')))), this.pagination.totalPages ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, hAsync("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: false }, page))))))) : null)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }), this.labelNext)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" }), this.labelEnd))))));
+        return (hAsync(Host, { class: this.h.classes(PaginationClass.root), type: this.type, variant: this.variant, size: this.size }, hAsync("nav", { "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy }, hAsync("ul", { class: PaginationClass.list }, hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.currentPage > 1 ? 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-left" }), this.labelStart)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.startPage < this.pagination.currentPage ? this.pagination.currentPage - 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-left" }), this.labelPrev)), this.type == "select" ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemSelect]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, identifier: this.selectIdentifier || this.selectId, "wcag-labelled-by": this.pageSelectId, "on-gov-change": this.onSelectHandler.bind(this) }, createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: this.pagination.currentPage === page }, page))))))) : (hAsync(Fragment, null, this.pagination.pages.map(page => (hAsync("li", { class: this.isActivePageClass(PaginationClass.item, page) }, pageResolver(page, page, '')))), this.pagination.totalPages ? (hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemMore]) }, hAsync("span", { class: PaginationClass.inner }, hAsync("span", { id: this.pageSelectId, hidden: true }, this.wcagSelectLabel), hAsync("gov-form-select", { size: this.size, variant: this.variant, identifier: this.selectIdentifier || this.selectId, "wcag-labelled-by": this.pageSelectId, ref: el => (this.spreadSelectRef = el), "on-gov-change": this.onSelectHandler.bind(this) }, hAsync("option", { selected: true, hidden: true }, "..."), createArrayRange(1, this.pagination.totalPages).map(page => (hAsync("option", { value: page, selected: false }, page))))))) : null)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.currentPage + 1 : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-right" }), this.labelNext)), hAsync("li", { class: prepareClasses([PaginationClass.item, PaginationClass.itemArrow]) }, pageResolver(this.pagination.totalPages > this.pagination.currentPage ? this.pagination.totalPages : -1, hAsync("gov-icon", { class: PaginationClass.arrow, name: "chevron-double-right" }), this.labelEnd))))));
     }
     onClickHandler(e, page) {
         e.stopPropagation();
@@ -6811,6 +6815,7 @@ class GovPagination {
             "current": [2],
             "total": [2],
             "inverse": [4],
+            "selectIdentifier": [1, "select-identifier"],
             "size": [1],
             "variant": [1],
             "pageSize": [2, "page-size"],
@@ -7556,7 +7561,7 @@ class GovTabs {
         registerInstance(this, hostRef);
         this.govChange = createEvent(this, "gov-change", 7);
         this.triggerRefs = {};
-        this.controller = [];
+        this.controllers = [];
         this.focusIndex = 0;
         this.compactControls = false;
         this.type = "text";
@@ -7575,17 +7580,16 @@ class GovTabs {
         validateProp(TabVariants, newValue, TabsClass.root);
     }
     componentWillLoad() {
-        this.prepareDataSource();
+        this.prepareControllers();
     }
     async componentDidRender() {
         if (canValidateWcagOnRender()) {
             await delay(500);
             await this.validateWcag();
         }
-        this.resizeObserver();
     }
-    prepareDataSource() {
-        this.controller = [];
+    prepareControllers() {
+        this.controllers = [];
         const promises = [];
         this.host.querySelectorAll(TabsItemClass.root).forEach((tab) => {
             const controlItem = Promise.all([
@@ -7607,49 +7611,36 @@ class GovTabs {
             promises.push(controlItem);
         });
         Promise.all(promises).then(controllers => {
-            let defaultTab = controllers.findIndex(controller => controller.default);
-            if (defaultTab === -1)
-                defaultTab = 0;
-            this.focusIndex = defaultTab;
-            controllers[defaultTab].active = true;
-            this.controller = [...controllers];
+            let defaultTabIndex = controllers.findIndex(controller => controller.default);
+            if (defaultTabIndex === -1)
+                defaultTabIndex = 0;
+            this.focusIndex = defaultTabIndex;
+            controllers[defaultTabIndex].active = true;
+            this.controllers = [...controllers];
             this.reRender();
         });
     }
     setActiveByIdentifier(identifier) {
         const temp = [];
-        this.controller.map(item => {
+        this.controllers.map(item => {
             item.active = identifier === item.triggerIdentifier || identifier === item.contentIdentifier;
             temp.push(item);
         });
-        this.controller = [...temp];
+        this.controllers = [...temp];
     }
     reRender() {
-        this.controller.map(control => {
-            control.element.setActiveStatus(control.active);
+        this.controllers.map(control => {
+            control.element.setActiveStatus(control.active).catch();
         });
     }
-    /*
-    private evaluateControls() {
-        this.compactControls = false
-        let sumOfWidth = this.tabsRef.querySelector("ul").offsetWidth
-        this.compactControls = this.tabsRef.offsetWidth < sumOfWidth
-    }
-    */
-    resizeObserver() {
-        const resizeObserver = new ResizeObserver(throttle(() => {
-            // this.evaluateControls()
-        }, 200));
-        resizeObserver.observe(this.tabsRef);
-    }
     render() {
-        return (hAsync(Host, { key: '561251fc7844ec9d11f72ff6e03ac6656b298ac9', class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", ref: el => (this.tabsRef = el), "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, hAsync("div", { key: 'c5ecb113f0c39857a3d4eea506b08321b577f2b1', class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, hAsync("ul", { key: 'd1d1d166a43ddc69d35ec6c359dbab589e3c92fd', class: TabsClass.list }, this.controller.map(control => (hAsync("li", { class: TabsClass.item }, this.type == "text" ? (hAsync("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control), disabled: control.disabled, "aria-disabled": toBoolAttr(control.disabled), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active && !control.disabled ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (hAsync("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "wcag-selected": control.active, "wcag-controls": control.contentIdentifier, focusable: control.active, disabled: control.disabled, variant: this.variant, inverse: !control.active, ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control) }, control.label))))))), hAsync("span", { key: '713c0bcfb6ff3377c77bff908b7e30ecd084d64f', id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (hAsync("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controller.map(control => (hAsync("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, hAsync("slot", { key: '176d4c69a319e1d0630db64ad853bd3358db865c' })));
+        return (hAsync(Host, { key: 'fa6bb0777c56edcb61f5acfa4cac75fae2f8bb78', class: this.h.classes(TabsClass.root), variant: this.variant, type: this.type, role: "tablist", "aria-label": this.wcagLabel, "aria-labelledby": this.wcagLabelledBy, onKeyDown: this.onKeydownHandler.bind(this) }, hAsync("div", { key: '3e764b20b9a1e3221232d7567e45acae8701a963', class: TabsClass.tabs, "aria-hidden": toBoolAttr(this.compactControls) }, hAsync("ul", { key: 'adedeb20cd2d5608502410f1b843ba6293000e7c', class: TabsClass.list }, this.controllers.map(control => (hAsync("li", { class: TabsClass.item }, this.type == "text" ? (hAsync("button", { class: TabsClass.btn, id: control.triggerIdentifier, role: "tab", onClick: () => this.onSelectHandler(control), disabled: control.disabled, "aria-disabled": toBoolAttr(control.disabled), "aria-selected": toBoolAttr(control.active), "aria-controls": control.contentIdentifier, tabindex: control.active && !control.disabled ? 0 : -1, ref: el => (this.triggerRefs[control.triggerIdentifier] = el) }, control.label)) : (hAsync("gov-chip", { role: "tab", tag: 'button', identifier: control.triggerIdentifier, "wcag-selected": control.active, "wcag-controls": control.contentIdentifier, focusable: control.active, disabled: control.disabled, variant: this.variant, inverse: !control.active, ref: el => (this.triggerRefs[control.triggerIdentifier] = el), "on-gov-click": () => this.onSelectHandler(control) }, control.label))))))), hAsync("span", { key: '6d855cd5195673b6a13aaf4b357b74bdcfd0ef4d', id: this.formSelectId, hidden: true }, this.wcagSelectLabel), this.compactControls ? (hAsync("gov-form-select", { "wcag-labelled-by": this.formSelectId, "onGov-change": this.onChangeHandler.bind(this) }, this.controllers.map(control => (hAsync("option", { value: control.triggerIdentifier, selected: control.active }, control.label))))) : null, hAsync("slot", { key: 'd7ea30baebad93b05c1f978fcca0c19989be7227' })));
     }
     getCurrentTab() {
-        return this.controller.find(control => control.active) || null;
+        return this.controllers.find(control => control.active) || null;
     }
     onSelectHandler(control) {
-        const index = this.controller.findIndex(t => t.triggerIdentifier === control.triggerIdentifier);
+        const index = this.controllers.findIndex(t => t.triggerIdentifier === control.triggerIdentifier);
         this.focusIndex = index;
         this.setActiveByIdentifier(control.triggerIdentifier);
         this.reRender();
@@ -7669,30 +7660,30 @@ class GovTabs {
     }
     goToPrevNext(keyCode) {
         if ([37, 38, 39, 40].includes(keyCode)) {
-            if (false === (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1)) {
+            if (false === (this.focusIndex >= 0 && this.focusIndex <= this.controllers.length - 1)) {
                 return;
             }
-            this.controller[this.focusIndex].active = false;
+            this.controllers[this.focusIndex].active = false;
             if (keyCode === 39 || keyCode === 40) {
                 this.focusIndex++;
-                if (this.focusIndex >= this.controller.length) {
+                if (this.focusIndex >= this.controllers.length) {
                     this.focusIndex = 0;
                 }
-                if (this.controller[this.focusIndex].disabled) {
+                if (this.controllers[this.focusIndex].disabled) {
                     this.goToPrevNext(40);
                 }
             }
             else if (keyCode === 37 || keyCode === 38) {
                 this.focusIndex--;
                 if (this.focusIndex < 0) {
-                    this.focusIndex = this.controller.length - 1;
+                    this.focusIndex = this.controllers.length - 1;
                 }
-                if (this.controller[this.focusIndex].disabled) {
+                if (this.controllers[this.focusIndex].disabled) {
                     this.goToPrevNext(38);
                 }
             }
-            if (this.focusIndex >= 0 && this.focusIndex <= this.controller.length - 1) {
-                const current = this.controller[this.focusIndex];
+            if (this.focusIndex >= 0 && this.focusIndex <= this.controllers.length - 1) {
+                const current = this.controllers[this.focusIndex];
                 current.active = true;
                 const trigger = this.triggerRefs[current.triggerIdentifier];
                 if (trigger.nodeName.toLowerCase() === 'gov-chip') {
@@ -7701,7 +7692,7 @@ class GovTabs {
                 else {
                     this.triggerRefs[current.triggerIdentifier].focus();
                 }
-                this.controller = [...this.controller];
+                this.controllers = [...this.controllers];
                 this.reRender();
                 this.govChange.emit(this.getCurrentTab().element);
             }
@@ -7711,7 +7702,7 @@ class GovTabs {
      * Regenerate tabs controllers
      */
     async refresh() {
-        this.prepareDataSource();
+        this.prepareControllers();
     }
     /**
      * Returns the currently selected tabs-item
@@ -7726,6 +7717,12 @@ class GovTabs {
         this.setActiveByIdentifier(identifier);
         this.reRender();
     }
+    /**
+     * Regenerate tabs controllers
+     */
+    async rerender() {
+        this.prepareControllers();
+    }
     /**
      * Validate the WCAG attributes of the component
      */
@@ -7749,12 +7746,13 @@ class GovTabs {
             "wcagLabel": [1, "wcag-label"],
             "wcagSelectLabel": [1, "wcag-select-label"],
             "wcagLabelledBy": [1, "wcag-labelled-by"],
-            "controller": [32],
+            "controllers": [32],
             "focusIndex": [32],
             "compactControls": [32],
             "refresh": [64],
             "currentTab": [64],
             "setActiveTab": [64],
+            "rerender": [64],
             "validateWcag": [64]
         },
         "$listeners$": undefined,
@@ -7779,8 +7777,14 @@ class GovTabsItem {
         this.contentId = createID('GovTabContent');
         this.triggerId = createID('GovTabTrigger');
     }
+    rerenderParent() {
+        const element = this.h.getParent(TabsClass.root);
+        if (element) {
+            element.rerender().catch();
+        }
+    }
     render() {
-        return (hAsync(Host, { key: '76d5b1152d766c4ec9f810e011cbb54fbb614b83', class: this.h.classes(TabsItemClass.root), default: this.default }, hAsync("div", { key: 'beffe50be2fe641def7fe2d1464dad4c00739072', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, hAsync("slot", { key: 'd788632dcc88e04112068e3dcf17c52737770255' }))));
+        return (hAsync(Host, { key: 'b316d961cabc1aed647deaa504ddca1184860f70', class: this.h.classes(TabsItemClass.root), default: this.default }, hAsync("div", { key: 'd73aa35cc5131b81eaceff6afab13250b2587aec', class: TabsItemClass.inner, role: "tabpanel", id: this.identifier || this.contentId, hidden: !this.isActive, "aria-labelledby": this.triggerIdentifier || this.triggerId, "aria-hidden": toBoolAttrIfDefined(!this.isActive) }, hAsync("slot", { key: '4bdf7cd566204ab3ac1883a5194abce6526fc0f0' }))));
     }
     /**
      * Returns a unique tab content identifier
@@ -7807,6 +7811,11 @@ class GovTabsItem {
         this.isActive = status;
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "label": ["rerenderParent"],
+        "disabled": ["rerenderParent"],
+        "default": ["rerenderParent"]
+    }; }
     static get style() { return GovTabsItemStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -8113,12 +8122,14 @@ class GovTooltip {
     rerenderMessage() {
         this.createContentWrapper();
     }
+    connectedCallback() {
+        this.createContentWrapper();
+        this.registerListeners();
+    }
     componentWillLoad() {
         this.validateVariant(this.variant);
         this.validateSize(this.size);
         this.validatePosition(this.position);
-        this.createContentWrapper();
-        this.registerListeners();
     }
     componentDidUpdate() {
         this.createContentWrapper();
@@ -8275,11 +8286,11 @@ class GovTooltip {
     }
     render() {
         var _a;
-        return (hAsync(Host, { key: 'd16d7493cc470032d16e762e75c426c919b683d5', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: 'd80316da39311fde00a00bb7867fd4c73864bd7e', role: 'button', tabindex: 0, onKeyPress: () => this.showTooltip(), onBlur: () => {
+        return (hAsync(Host, { key: '79f1e7f55aa44da4cc08be8f388921c2c940d834', id: this.tooltipId, class: this.h.classes(TooltipClass.root), position: this.position }, hAsync("span", { key: '361c2997c12aa96a171ebb1558986b83990b5778', 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: '1ccc180def543def370a189a5c10351fc166dcdd' }))));
+            }, "aria-describedby": (_a = this.identifier) !== null && _a !== void 0 ? _a : this.tooltipContentId }, hAsync("slot", { key: 'bffc64135254b57fb4514a8afdc44bfe4b8f3015' }))));
     }
     /**
      * Showing the modal