genesys-spark-components 4.101.0 → 4.102.0

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.js

@@ -14,7 +14,7 @@ export class GuxSwitchItem {
         }
     }
     render() {
-        return (h(Host, { key: '7e82f731781d671c963bab0d647644c48bd21489', class: { 'gux-selected': this.selected } }, h("button", { key: 'd77441bb5e773d2e761c436f8aa0e00589436376', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '592db68e2e893455ad74bfd9c270351d38596695' }))));
+        return (h(Host, { key: 'dfec7f615a7355fdad50c1e5cd6e8c78a05cf3fd', class: { 'gux-selected': this.selected } }, h("button", { key: '70ca8f456fcfd5655cf46f34d64f014e000542a8', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '7b837c5be672d9323e5a08f4f80ef6f56d5bd654' }))));
     }
     static get is() { return "gux-switch-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch.js

@@ -31,7 +31,7 @@ export class GuxSwitch {
         });
     }
     render() {
-        return (h(Host, { key: '01b1ed0a1e77c1244f4a2b24358c49a11b3ce299', role: "group", class: `gux-${this.layout}` }, h("slot", { key: '0349e5719f7e8fe19c7d25980da0720950b804de', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'd31601a61d149eb26c14c6bc184fd33de5da5f6a', role: "group", class: `gux-${this.layout}` }, h("slot", { key: 'f743ee37bec5f414c7b06f9145dc42cc8fee4fee', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-switch-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js

@@ -44,20 +44,20 @@ export class GuxAccordionSection {
         this.hasIconSlot = !!this.root.querySelector('[slot="icon"]');
     }
     render() {
-        return (h("section", { key: '7cd9c9c4f3d04e724708e251ce538278c1036498', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'a9689ab37be501c30e7cbb31a0bd1f7d60a92487', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '3d5de577b7f6c6dda314ca49d19a6ca73093e802', class: {
+        return (h("section", { key: '3924b85f31a66bca17c7f378567014f8078ff648', class: { 'gux-disabled': this.disabled } }, h("div", { key: '5c267b42b7d2ac73ddf1f6bb1e9638a7b5f52c53', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'b633f331ba6a3929cc25ecb16a36aee8640d5561', class: {
                 'gux-header': true,
                 'gux-reverse-headings': this.reverseHeadings
-            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: 'fae71ec230fd48bf6a897050b390190bbbc166ee', name: "icon" }), h("div", { key: 'e20f9f0f3720527c9eb1b1c1e83b4eed762451ac', class: {
+            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: '3aaa4cdf784767603482c5925fe5f4d2adceea58', name: "icon" }), h("div", { key: 'd3c4cb470b61c031b68076e5369e075a2170f6c8', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: '4a94805c7cdde6940cec177463ad2ca76ff2f2ea', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '9935d25bb4f814dffb504dd53e5f82de0955b7cd', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '037e88e6fe6bccb9c9ac16aee2a50728bdaf46df', class: {
+            } }, h("slot", { key: 'd363747b9debcc3a64ed635c1f6b7f9ca21a3e14', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: 'f6de0e09e2b4121a96d543387628c1d0755a5b8f', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: 'c436794e348b57af52b374f0522fdd30ba400b04', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: '34bf86145df6ce937a9d62efb856c32940a72e19', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'c5655f0f897a7dafcb8718e40727deff41d1d453', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: '2d21f68607c3768177e87d05be85a8e6460fb2f8', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '0a5bb8327a7ac65132c8c920509410630908499b', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
                 'gux-content': true,
                 'gux-expanded': this.open,
                 'gux-text-content-layout': this.contentLayout === 'text'
-            } }, h("slot", { key: '8738841c1fe89cb5fbe6ff12fe34382d94f755eb', name: "content" }))));
+            } }, h("slot", { key: 'c8b8af566de38e258e6a17b49ffaa35926a4f890', name: "content" }))));
     }
     static get is() { return "gux-accordion-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-accordion/gux-accordion.js

@@ -36,7 +36,7 @@ export class GuxAccordion {
         }
     }
     render() {
-        return (h("slot", { key: 'a1a871552d6af352c92a9171a7825856ccbe7c57' }));
+        return (h("slot", { key: '4185a5f15b4c1aa8a98bc76e2f12230b09b714b1' }));
     }
     static get is() { return "gux-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-action-button/gux-action-button.js

@@ -116,7 +116,7 @@ export class GuxActionButton {
         this.i18n = await buildI18nForComponent(this.root, defaultResources);
     }
     render() {
-        return (h("div", { key: 'be411256366466d820261dbd39fc0023d0601819', class: "gux-action-button-container" }, h("gux-popup", { key: 'b5afd57bf1d4370250f421b28319897852ec7071', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '9112d3c8b1f32306f072548a859dc2b5e30c3c19', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'd2d8cc0b00af8cbda04635afe32bd38e782413c1', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '0b5a42cd86494ed9c9747de269fb12844b101b56', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '8b458ae032ffaf64a4cc73d6bbdcabe9867a8841', name: "title" }))), h("gux-button-slot", { key: 'f33e911359cda9970ad76cc85e22b91a1ffc0ec5', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '54112ef2045a2f139f166ed0c5b8118cb445b69b', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions') }, h("gux-icon", { key: '52636a719b2926a1269b10e19df71d03ce3c6e5a', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '1377dddb3a5476adfbfcb2f06191b8b3289d8626', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '50dc3256bf0be1acbed04115b1bf5e22f9ae6f2c', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '1212f94542c3fb04aa8acd9c2333e6cdd7a7a52d' }))))));
+        return (h("div", { key: '3b3d36a4a20de345981d69fa2dd381ff526738d0', class: "gux-action-button-container" }, h("gux-popup", { key: 'ca936f4bdc087463d0084c38aa68798da52f3b30', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '4e77b6dfd56c9ab772504881dccd7ec7fb361a29', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: '3b49bd8e86e1b1ddae53c0cebade1632da5fa04e', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '428d4485d4c400789a63d03d562241f8bac603a4', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '1a332eb224ef03d07f7375ae862a2f197e079cac', name: "title" }))), h("gux-button-slot", { key: 'ab0e02ec002cf95b805de1664328d1065b167cad', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '0d1f1f1f12ab724deaa2cc4db09d24d8ddbd2f88', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions') }, h("gux-icon", { key: 'b0f3a4ad766c34e516a0b2798c659b8c2834db86', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '2d663a85df56d364a998d8ea0ccb7e91603f32e3', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '730a2870a8f91f7ecd9a1bef7a9152f8b5e7afc5', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '81a1f17b77d7de92ce0f63c35363841ac2cda67a' }))))));
     }
     static get is() { return "gux-action-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-badge/gux-badge.js

@@ -33,7 +33,7 @@ export class GuxBadge {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: '427e31d40cd404ff2e6cd09c3e07157ab7401206', class: {
+        return (h("div", { key: '17d30c6044045a4e59c920b125f8c8d12dc35e68', class: {
                 'gux-badge': true,
                 [`gux-${this.accent}`]: true,
                 'gux-bold': this.bold

package/dist/collection/components/stable/gux-blank-state/gux-blank-state.js

@@ -35,7 +35,7 @@ export class GuxBlankState {
         this.hasCallToAction = hasSlot(this.root, 'call-to-action');
     }
     render() {
-        return (h("div", { key: 'da4daf57378c6ea876ff7a06382b2f0ca600c2ae', class: "gux-container" }, h("div", { key: 'f9ab7e0078164d39f9c73e4b9ce4ec05eeaba349', class: "gux-image" }, h("slot", { key: '9647c4def38370b3f88ddfd2288c2b1d944308f3', name: "image" })), h("div", { key: '78d9fb4089a00b1f09ac7e150bf2a6a6a3dd948b', class: "gux-message" }, h("slot", { key: '3c577518c38f5b513d00281d036fc2e155fb43a8', name: "primary-message" })), h("div", { key: 'ed604d49f469184d4e252d0d7621107c191583ea', class: "gux-guidance" }, h("slot", { key: '9acfe74e449579d0d8e5b7c21373e64ba18f646f', name: "additional-guidance" })), this.renderCallToActionSlot()));
+        return (h("div", { key: '720bf86660322e37ae260210e059e2f8d28c61d8', class: "gux-container" }, h("div", { key: '7fbcfe6ae42e0c2a57ceca368411ac24492a68e3', class: "gux-image" }, h("slot", { key: 'f4208f0968048fbdf39c5d75225d65814aaeb38f', name: "image" })), h("div", { key: 'adf383084fb748b77f9a27d06b9b5acd54f4bdb3', class: "gux-message" }, h("slot", { key: 'e552bd00acf6e4cf3bce6056632abf28ce411b49', name: "primary-message" })), h("div", { key: '143f1c247e9d0d83ea91025ef2ac9e34a4552072', class: "gux-guidance" }, h("slot", { key: 'a3e8ddc3599db6707a1192b7b6eba783387654b4', name: "additional-guidance" })), this.renderCallToActionSlot()));
     }
     static get is() { return "gux-blank-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-breadcrumbs/breadcrumb-item/gux-breadcrumb-item.js

@@ -38,7 +38,7 @@ export class GuxBreadcrumbItem {
     }
     render() {
         const accent = this.getAccent();
-        return (h(Host, { key: 'c80d058bdb89277fc18eda59bb80791d2cffaff8', role: "listitem" }, h("span", { key: 'adfc997b6e21d64507a8d4ed1e5a6709356d6b7d', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
+        return (h(Host, { key: '2cb194409dd8dd1fd0468a7596d0996e50de5a99', role: "listitem" }, h("span", { key: 'e991eeab845c8ad11a02eab64d895145a129dba2', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
     }
     static get is() { return "gux-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-breadcrumbs/gux-breadcrumbs.js

@@ -19,7 +19,7 @@ export class GuxBreadcrumbs {
         Array.from(this.root.children).forEach(child => forceUpdate(child));
     }
     render() {
-        return (h("nav", { key: 'cc549ab3eb08cbe1d387705b1872f7702727025c', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '493368ccaa36d35378c0e5f3cffc2457ec5b67ff' }, h("slot", { key: 'bd026725e60e6cbb8cae9c4938f00358991f8d73', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: '64ddce7ab9c013ab39b78a9627c8138205cc401f', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: 'd0a265a874c6cdce39b005151234e709f781a24f' }, h("slot", { key: '829365142e4830d91c2aaab34336751ce70b57ad', onSlotchange: this.onSlotChange.bind(this) }))));
     }
     static get is() { return "gux-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-button/gux-button.js

@@ -21,10 +21,10 @@ export class GuxButton {
     }
     render() {
         return [
-            h("button", { key: '89fb5403854c3f59ab6825a764e097a13c8c9443', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+            h("button", { key: '4c7f98866c71bd8dd65500cd9b33402efae9b58f', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
                     [`gux-${this.accent}`]: true,
                     'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle }, h("slot", { key: '70d13d0da92334aab6f45e38eb7099632472aa12', onSlotchange: this.slotChanged.bind(this) })),
+                }, "aria-label": this.guxTitle }, h("slot", { key: '7c2d98b8269a4ddfed2ea39270bfb8569cd60630', onSlotchange: this.slotChanged.bind(this) })),
             this.renderTooltip()
         ];
     }

package/dist/collection/components/stable/gux-button-multi/gux-button-multi.js

@@ -103,7 +103,7 @@ export class GuxButtonMulti {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("gux-popup", { key: 'bb23476c36a40425b655aee3e05c19146e7916ed', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'e2dc210ee3587b88c102e8b027c51a64369019a5', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '6d8e7222ed640e3ac35cd448ed14b78e0887fab5', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '12ad1b6b0b657c71d401b0a10bf3a20d083024a2', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: 'efdb482bcf2544643ddf48e79443f21b2faae1da', name: "title" }), h("gux-icon", { key: '75405f5715f71d1792b3e66f33347ea1badf2476', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '9773239205ae10976799558f3abe80d285b3ecaa', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'f4ea49b5154268ea2bbe2b78cf388a538643cefc', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '4171bcd26e3ad64ebb7976288b8b5bed045e6c12' })))));
+        return (h("gux-popup", { key: '2ec1b4831ef531a264595ae4ca2071edbc8894b7', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'cc0781657e5677ec6e076c0f48d13d417e6f04d1', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: 'ebae1099fb578a7e6ca485335fd7783ce08a1108', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '73be31a2cc3ca18af9509b51323cf08be54d7f0d', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '4517fc55e78f0649b62a3cada3cda6b0d092492c', name: "title" }), h("gux-icon", { key: 'a19f119bef84c8c1645e6cf3bc3444c4440b49d2', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'e80f24a7bafa6cddcd5602bee42687f4bfeadfba', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '4ca094da37169ddaeb3ba9b8bfca908b98a95fee', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '8606f117436575f4b182f417ede3569276e0e047' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-button-slot/gux-button-slot.js

@@ -32,7 +32,7 @@ export class GuxButtonSlot {
         this.validateSlotContent();
     }
     render() {
-        return (h(Host, { key: '4f6df33c30d8ab507ec79e3de85935f394f81694', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '1693df0a6d24652e1b15aa2e824921cfb0743e0e' })));
+        return (h(Host, { key: '20302ae93bb33075aea394d763b0ed37d7426701', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '95ce95697b8a78bfe4dffd107ef6576863a305e1' })));
     }
     static get is() { return "gux-button-slot"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-calendar/gux-calendar.js

@@ -322,7 +322,7 @@ export class GuxCalendar {
         return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: '175a3122ae0ed90efdbb481b41658a5c0117423f', class: "gux-calendar" }, h("div", { key: '08cf40ff2f7188dd308963ede8f701099abf186d', class: "gux-header" }, h("button", { key: 'cac7ce105159c7d642b183506262db01c9a3cee7', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'f774b0e45a2e4bbccae6b7298339ff1b64d5356f', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'bba031759d2af4de337acd267c22f5ec509dbdc3', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'dce30885a18da46919908902b46be51dde00e3fb', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '566c905ec6431675978ce220e38bfc523461b4e6', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: 'a7920619780239b450f56c9c2c04774eec648807', class: "gux-calendar" }, h("div", { key: 'af8ecec27ab49ad3526b88c822cb61cac24d2d98', class: "gux-header" }, h("button", { key: '1ee8c3b7d351c7fbee2935cad620077d69e958ef', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'b5b857a1e4979011c0280223d50e311cc75b6b7d', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '204a2f23232ae0ae600a7b2884da87891a59ff13', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'cf27f0b363a895b77cbcbb84cecac31d6c1b7562', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '6f3106adfbf43b8d7d79b0f1e9033ce3e7f5ca0d', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     static get is() { return "gux-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-card/gux-card.js

@@ -11,10 +11,10 @@ export class GuxCard {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: '90b29aab22e6f84524c9773daa4ace7bd2023ec7', class: {
+        return (h("div", { key: '64303827daaae1f83871641536569c405edc41e6', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: '00e3e3fca9f4fb33462ba7616dff958ef0f42263' })));
+            } }, h("slot", { key: 'd85770e5a8738c8a6b382c072439d3fdc6731c12' })));
     }
     static get is() { return "gux-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.js

@@ -128,14 +128,14 @@ export class GuxColumnManagerItem {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'd9ae9d0819dea054283a5c2272f9e8f9475a7ff4', draggable: "true" }, h("div", { key: '15cd47cf8f284f333b0a129eb068e1d46e73f9c3', class: {
+        return (h(Host, { key: 'c19d1592c2c8ca8d150562afaf097135e7c2f38b', draggable: "true" }, h("div", { key: '88cc88a462da0d16e43b39fd90b14ae384e516e4', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
                 'gux-dragging': this.isDragging
-            } }, h("button", { key: 'd256ad9a45514599d236407257a2c02039833466', class: {
+            } }, h("button", { key: '4181ddeb7ce21528a62324c5752a5f1ab74f92ad', class: {
                 'gux-reorder': true,
                 'gux-reordering': this.isReordering
-            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: '376e365c7846456cdb97a76e9da0a953803cea69', "icon-name": "fa/grip-vertical-solid", decorative: true }), h("span", { key: '8361a9c791d815780d9fecf4bcefc552e87da1dd', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: '8e4f21cbd2e7605ef67db952ae3e7a16730885fe', class: "gux-select" }, h("slot", { key: 'ef238bec81037f9ed558dff3627a14d23d354644', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: 'baeae7e843ce8bd194dafa0dddced63ee2f25a3c', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
+            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: '72fb29f6727fc950318efc813a8b04f5f903f6f1', "icon-name": "fa/grip-vertical-solid", decorative: true }), h("span", { key: '365cf6763ca55551a2c618d0e3a9024d89d6f06e', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: '1df8b80774f7fcdf13a65286903ab30c9ff8b5c1', class: "gux-select" }, h("slot", { key: 'c262e35e4f2a5a8e090f7108c3fb68d1767f4249', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '7c966668dca1ff3da30303fc5efc307fbad18534', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
     }
     static get is() { return "gux-column-manager-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.js

@@ -89,7 +89,7 @@ export class GuxColumnManager {
         return (h("div", null, h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), h("span", { class: "gux-sr-only" }, count === total ? (h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
     }
     render() {
-        return (h("div", { key: '5d30225bbc4be4b3e08179da5f9445486f9e40b3', class: "gux-container" }, h("div", { key: '2b8edc7871dd76804845dcaf47404f6e5c374b45', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '91eb2a24628d06048925060a8bfde8f13e7ce3c6', class: "gux-search" }, h("gux-content-search", { key: '968490f771ab703a0e9c42b89af38d14e6bdcba5', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'c6b5eeb0279d30f9a8e93d1f2c67b52bd264ecdd', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '512258a39fd046332f10a67e36b9338345140c1f', class: "gux-select" }, h("gux-form-field-checkbox", { key: '34c59a23807267d358b2285b6f44c0bc9745e6c1' }, h("input", { key: 'ed4eaee9f025cf688146180f7d1b831870591c26', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '195913863439df56ac9e2e6712155012c47ff2a3', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '7287092206fe2a32f718b8bbc955983e3e67cb93', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: 'bc8c72014afc76522583b338bcd134afa5a4966b', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: 'c6873f2b23c35972f1416f2c5786a255638fab10', ref: el => (this.announceElement = el) })));
+        return (h("div", { key: '698df157fd006f40fee9bb5c2770c2e54474881d', class: "gux-container" }, h("div", { key: '8bfd775a613960a153829d86fc83eb42e711a494', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '465fa034b308d7df5590e22411a4c70436367af3', class: "gux-search" }, h("gux-content-search", { key: '2ac0d737a4ce2d4f33d8e5552166c05840bab681', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'ba5f910324d18148c9da03bcb4feb8d430955fad', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '9cbe6311a85ebea73fb095c33966e154f164326b', class: "gux-select" }, h("gux-form-field-checkbox", { key: 'c15ef271d2d03f64bf6da8b4f5af4a63b798c2c6' }, h("input", { key: 'a49bc04f50fdb36bcc877b04f7f2ce0a92cce803', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: 'a8adbc1a752f5a22c1f3a2c8f511d0378050fc1f', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '6c1d751144aa413b8f8f5d8baa6f17af2df74634', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '98e7a2e5b4dae8e49619f6f95bce9c457cff4de6', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '46e2041bb701cbdbd845a4e2dc751bb43af8989e', ref: el => (this.announceElement = el) })));
     }
     static get is() { return "gux-column-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-content-search/gux-content-search.js

@@ -46,10 +46,10 @@ export class GuxContentSearch {
         }
     }
     render() {
-        return (h("div", { key: '05ab7428ec6ed2cd9ebe18be60846f9c3e593fdd', class: {
+        return (h("div", { key: '151163e5fa2f4c807b7e9c91cdabc2bb417af3f4', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: 'daa1a1c80ed175957353ed4136cb1dac664f4fe9', class: "gux-search-icon" }, h("gux-icon", { key: 'a6c9f06dc89b5b8e690909ed69537c4397931c6a', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '88f9e837012eb172864f39cff80b9efd68b383fd' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '8fb62e249a8bcc22fa5a865ed1f8416f2a497c45', class: "gux-search-icon" }, h("gux-icon", { key: '24bf8049f8ddcc491f87d4a784342e1a5b0fb3cb', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '3d23a628a514d700c6f93c9c679f50460ca639ba' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.js

@@ -107,8 +107,8 @@ export class GuxContextMenu {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: '95a0b9a1b4dd3293612747d84884ab1024555005' }, h("gux-popup", { key: '44f36c2688903b62b934196b5b79761b5d4233e2', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '68cbc7c250297161f6eca477e5777184a5720adc', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '73dd34369a0821bbcf008129fe818b3008b1a4ab', accent: "ghost" }, h("button", { key: 'f824c95c6770291287dbd34a000def633f73aec8', type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { key: '659d87a1a62fda256b5793486444512e6c161ad4', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.screenreaderText ||
-                this.i18n('contextMenuScreenreaderText') })))), h("div", { key: '753bb69233da5bc81c6fbac0b06c563757f94f1e', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: '01833dbf242c9c9a1c5df6d64c7dbf7a7edee82f', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '3903e9e99a4e25f4a52e6dd2019416bc8ce06c02' }))))));
+        return (h(Host, { key: '3e609c9ab34af745384ec9a39bf8a2044ca33dea' }, h("gux-popup", { key: '6957db56d9e5925278eec225885b5011d11c3158', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: 'e5bd111a1a1cec9b0eeecc9f439c8b91faefa323', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: 'c3a49d518cfb535219bd9e2d1094c911357186b0', accent: "ghost" }, h("button", { key: 'c9603e026cab5c6b7637b396711b3bf108dca898', type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { key: '4f728ee43be3f78a62432edd8d3c33d4a52c64ef', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.screenreaderText ||
+                this.i18n('contextMenuScreenreaderText') })))), h("div", { key: '385a691fd2b114f8cf57893e73826cbf01bec147', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'b9272daf9b61dc860ebb11fcabf80f2951b9d29c', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '85a9f0647367477016f74f09fd263fc40c0d19d7' }))))));
     }
     static get is() { return "gux-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.js

@@ -57,7 +57,7 @@ export class GuxCopyToClipboard {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '5f51b7c0b0a6e248292cd3a60ac6c6cb983b68ff', class: "gux-copy-to-clipboard-wrapper", ref: el => (this.copyButton = el), onClick: this.onCopyToClipboard.bind(this) }, h("div", { key: '8a70318d238c51f984d0f55db83a7e41f27d4576', class: "gux-copy-content" }, h("slot", { key: 'fe9d2dcc8727108718b58af6f9670d8f83294b30', name: "content" }), h("gux-icon", { key: '708916de60bbc67c68eafd477e0b1ea64602e158', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
+        return (h("button", { key: '8857dc7be33e1b0e1e1ead9aad01f8c26bd74863', class: "gux-copy-to-clipboard-wrapper", ref: el => (this.copyButton = el), onClick: this.onCopyToClipboard.bind(this) }, h("div", { key: 'f09bb7a4b6849f474d3d259139e50cf44990172c', class: "gux-copy-content" }, h("slot", { key: 'a796b5bcf17b0affdfb1e83f723cafd91d3a8315', name: "content" }), h("gux-icon", { key: '07f2010207eaed38718c4b1e1b02b966d80b0b33', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
     }
     static get is() { return "gux-copy-to-clipboard"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.js

@@ -510,7 +510,7 @@ export class GuxDatepicker {
             } }, h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (h("div", { key: 'b55b7c398e32e216ea4cb77d56aa3ba5deef6f56', class: {
+        return (h("div", { key: '6b32330a26541288a70a14080091566d8fdf0ab0', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.js

@@ -12,10 +12,10 @@ export class GuxDismissButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("gux-button-slot", { key: '1ab8d7df683a55241b5573a100887a33034ece27', accent: "ghost", class: {
+        return (h("gux-button-slot", { key: '57ce580a71a847685262fa75de02cf6bfdc8e1d2', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, h("button", { key: 'df1bda5ad532ab1404b5dddf1b27ee4e0a5474f7', type: "button", title: this.i18n('dismiss') }, h("div", { key: '9b9f1467e03118843668b8a681379463bc153481', class: "gux-icon-container" }, h("gux-icon", { key: 'a629950cccb648ca7ba386d977d25dc23faa6e76', "icon-name": "fa/xmark-large-regular", decorative: true })))));
+            } }, h("button", { key: '2cf06bcbdc331384c332220a8a0558d8ab16f0ee', type: "button", title: this.i18n('dismiss') }, h("div", { key: '8160a49a288b917831da77be341dfa5bea236c1a', class: "gux-icon-container" }, h("gux-icon", { key: '9fa80faaf90d89c1faf6eb8aa178329158f43e1f', "icon-name": "fa/xmark-large-regular", decorative: true })))));
     }
     static get is() { return "gux-dismiss-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-dropdown/gux-dropdown.js

@@ -346,7 +346,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: '556c41ea361cc69f433f7a28437c4fbd70bb1687', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '0aa3974a5aee506f5df8b3092fb68d293a8feb7d', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.js

@@ -30,7 +30,7 @@ export class GuxDropdownMultiTag {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: '0e479cd0dac0a60fd4fea8314060bc9183bdef93', class: {
+        return (h("div", { key: 'd58058bd98a28c2e0892e6324ff257ce0a1cd4df', class: {
                 'gux-tag': true,
                 'gux-disabled': this.disabled
             }, "aria-disabled": this.disabled.toString() }, this.numberSelected.toString(), this.renderRemoveButton()));

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -374,7 +374,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: 'd53e2adb1eae3250f2febd31a60eca219a57789f', class: "gux-dropdown-container" }, h("gux-popup", { key: '0040e946640d1f009e4b4027f1b4a8bb6b81d7e3', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: '3565d39bbc9a0066fcf5ffedf823995a155fdcbe', class: "gux-dropdown-container" }, h("gux-popup", { key: 'e0d5283b397f1349486b5aa37b1ee702d1d31505', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.js

@@ -171,10 +171,10 @@ export class GuxFlyoutMenu {
         }
     }
     render() {
-        return (h(Host, { key: '7dea05db3e9f579dc4c6af22e30dfd4055a25e50', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '57c1c328e4ebc32e3136324b2bdd6f939291ddf6', ref: el => (this.targetElement = el) }, h("slot", { key: 'f43beb0a6d7d86caf01c833fd7ad40bf2053e1d1', name: "target" })), h("div", { key: 'cbfd2b537f45ac2407aeb03a98ead29693c6d57f', class: {
+        return (h(Host, { key: '88ed53b522a66b55f020e3c6e20d507526928b7a', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '683b9f2a45dd2ca74c50c3b5d288323bfb8b9978', ref: el => (this.targetElement = el) }, h("slot", { key: '7c53405c911dc369e372ef683b2d435add478ad9', name: "target" })), h("div", { key: 'ef0844f1c0650f0824ba0aa8b5e96ad75c342502', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'e03654eac0b85dbd74e6e02049ab40dedf32ccfd', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'e6a1dbf12c096d7b53cc4d7fc6b94cca63c96797', class: "gux-arrow-caret" })), h("slot", { key: '5b5368516e58fe8832ebbd4bc48523646e8f2251', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '19ae22ea5360bb795a781df450b1591452dc00ec', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '88280de18d9134958d0e8e02cccf7f223b2384e7', class: "gux-arrow-caret" })), h("slot", { key: '0e8f47e3938416388e171e521708da4b0ccecc39', name: "menu" }))));
     }
     static get is() { return "gux-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.js

@@ -28,7 +28,7 @@ export class GuxMenuOption {
         }
     }
     render() {
-        return (h("button", { key: '6551af0f5854f91a8b3a783334bbdbc6cab3834d', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: 'f8805f854e7ed22b805e5b555d65c35c84731154', class: "gux-menu-option-button-text" }, h("slot", { key: 'e1051c028748193f22836c20ee063772fb79b865' }))));
+        return (h("button", { key: 'df908d4f161e3d96700f7a3ad03444080c0a21f5', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '1907469b9746b6071ff57bcb71bdca674ba21e51', class: "gux-menu-option-button-text" }, h("slot", { key: 'fd34cd0135dffdf900a87567a3a451af8f6b7b89' }))));
     }
     static get is() { return "gux-menu-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class GuxMenu {
     render() {
-        return (h(Host, { key: '072b54393b153a6d9725fca4b029fa930c4b5797', role: "menu" }, h("slot", { key: 'b752db7c2715b15704921878c54fabae68a6fb56' })));
+        return (h(Host, { key: '6a3f9c9bd91af32ca7e5499fbc87fc6a5b37e431', role: "menu" }, h("slot", { key: 'a27049f78e258c114eba09b0cc408d771dfa25e2' })));
     }
     static get is() { return "gux-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -140,13 +140,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: '901b8f8bd57bf6b576cd3ba3d4b09080b4393f21' }, h("button", { key: 'a2bf651ce8bad7ca0d4918d7c0ff67f647f949a1', type: "button", class: {
+        return (h(Host, { key: '3bf5bd2a023b20151c61bc3760e2acb74763378a' }, h("button", { key: '6243e772096b2add4600fa8021707106386c5de2', type: "button", class: {
                 'gux-submenu-button': true,
                 'gux-submenu-button-active': this.isShown
-            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '5799969b7ccdd73dcae197147ad82376b8921da6', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '874ce9dd7d6f4f8ee473264ebd38e0bb6bdb5f8a', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: 'ccd8036e0178191d5d2d31be16f31880d493f2e9', ref: el => (this.submenuElement = el), class: {
+            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: 'c108d3332766be36b480ae807ca2efe92e8e5b79', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '0eb542761f30daef77e56e2b6de3a24196414fa0', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '9f7e7d13a7f526abbbed057b292c41928bbf0e76', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '10b0534d755bc56f438fc1597593759068ad84b9', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'a16e2a52a7cb9f0299ad04b27c9c0b31a71dc152' })))));
+            } }, h("div", { key: 'e693eb0aad3f58230f3783063b788612ea623171', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'ba7183759f74accc328c7f028ebab4525a9124f6' })))));
     }
     static get is() { return "gux-submenu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox/gux-form-field-checkbox.js

@@ -48,10 +48,10 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'e80fe6b5419f22a729e00a58a77d22b2163a0c39', class: {
+        return (h(Host, { key: '5d767953bbea3206abd4e9f781ee5b64a0d3979b', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'd49f172b18363847ae706a6b32a384468ad982f2', class: "gux-form-field-container" }, h("div", { key: '779c8beb65042ef3e650862c7bd885489c3e4bac', class: "gux-input-label" }, h("div", { key: 'bd0be57f77f6d63dbbf56f5651f5ab44b4c75a20', class: "gux-input" }, h("slot", { key: '9e9d0347e10a0f5d7a4527849a6af26da7400b0a', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '36b978ca5bb28d03b0b5147d3af1bed250003eb3', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '6b576243eb85d715458e4a74492a2e7f037c577c', name: "label" }))), h("div", { key: 'a289c739a3f6764fc15b090c7f048033899a32e8', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '2d20cf20640ac5e4b4fe30e165d2ed698bdecd38', show: this.hasError }, h("slot", { key: '092c2d49600d979b103aea61e01086eda5a1726c', name: "error" })), h(GuxFormFieldHelp, { key: 'ea898d09eee708a0c348d9bb092f9be36932c704', show: !this.hasError && this.hasHelp }, h("slot", { key: '19ec44f50e88646249510a4595304bc56a620dbc', name: "help" }))))));
+            } }, h("div", { key: 'a25f8e6b1c2682c7ad12f5814cf7f2b43ebc6209', class: "gux-form-field-container" }, h("div", { key: '988f8be912e5c9588a39ef4ae011b14051e8fec3', class: "gux-input-label" }, h("div", { key: 'e62fd47fd4f8867e9ac86e0dd099fb4bd8854604', class: "gux-input" }, h("slot", { key: '13f18635f260fdedbb9119f28959b7351fc2afb6', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '83f7f54c1b38fe2a9757276b53a92df5b291a95a', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '83a136b533be53ad7c057c0d61daa6e7df331927', name: "label" }))), h("div", { key: '872a455218617a53fa79f608774f9458da8cde8f', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '1ce7ec5e90dd590fdc397002915cca18e9cc8670', show: this.hasError }, h("slot", { key: 'f8742184329e27006a2b0bf8fcb0b277e2ba7236', name: "error" })), h(GuxFormFieldHelp, { key: 'e12b2c8dd23429e5509167634ea9c3c5a7fc7230', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f29f12ab0b460a13e25448fd8881e7d10e08cfdf', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/gux-form-field-checkbox-group.js

@@ -133,8 +133,8 @@ export class GuxFormFieldCheckboxGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'e8b22aba85f03b3bddbb41d55bf590d30ec3db24', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'a347a418cf1da6a94f625fd492d965d59648ca29' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '134bdfddc24a4a71a4e9ec61429f3925724c96f9', position: "above", required: this.required }, h("slot", { key: '74fb108eab84d08d787c8a823d7ebd544434e6d4', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '8ec1e6618dfbf72a7bbdb95e49b14e4444070c7c', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1f3546ef01c82618c421b5f8718023e43cf0fd00', name: "group-label-info" })), h("slot", { key: '84c412109b2d06b85d5736322c5f349133413b4e', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'f417cf13cdf9be8cb7e078ca6985cf22c1d1570c', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'f448118f5d7dfee53be999bc3770914fa885e95f', show: this.hasGroupError }, h("slot", { key: '4e0a67835226bb632a71d6a403dc2747ebf1342b', name: "group-error" })), h(GuxFormFieldHelp, { key: '187137e33e71c106b984de644de3e93e2cb41967', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '5ce985140ed074319270f7f1b72f6ce2d7487ae9', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '9b8bc7a99b6b4822796ebd91a62279e54a3bc174', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '7a6cf434494473dea5522c7e9d4da18ff97353ab' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'bbc61c65ca1d55bd46697c61440960e8228ee465', position: "above", required: this.required }, h("slot", { key: '309a663c1461ff1787f45db5b6f2ff0048da4293', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '4a76e19fa94d4f5893f87ddf8e6ea3e393cbd7c2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '43d5fdd86f44ed2a1146371cad4f1ff9343f806f', name: "group-label-info" })), h("slot", { key: '51d6be4a336b89ed00cc9694f949cf329d67af96', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'cb1275193515f7e9da80758ef077ca86b2675dc9', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: '35d9b5301c2610aacabb00e5254e7decb53c9ca1', show: this.hasGroupError }, h("slot", { key: '268af956cbfd18cea2c8430bd2af1ff27221a729', name: "group-error" })), h(GuxFormFieldHelp, { key: '4b2910bc223218ce567ecc1b66738acbe20382c4', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'cf0a77d9df22e3785dd0d44d890429f949d081a4', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/gux-form-field-color.js

@@ -84,13 +84,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '86b97e7877929d8bbed7546fc1dd59a198db048d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a546e208437faab331a2247f530a2f5ddade4969', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'e17d99ae810ba2cd5d7dc43e0e927ce974ef94d8', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'd2d10a99b347dc985815820334fd43c9d34b2cff', variant: this.indicatorMark, required: this.required }), h("slot", { key: '6354ea45e3685dd913738477713acc67ea80870d', name: "label-info" })), h("div", { key: 'ed676d17810bc105f459107d8f5eaa73430e5a45', class: "gux-input-and-error-container" }, h("div", { key: '452a6f0b1f12dea2e051cbf51fa0c8107d35e12d', class: {
+        return (h(GuxFormFieldContainer, { key: 'd5e26e4a4745cf37ef3c9a64c314c8afa3955611', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '67e3e73ac9c34591ca05137a7e1a7e787b9d9dcb', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '1bdb99d26aee0272b5f73a6ec6d0620167edfd0a', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '22a6d1301b6c5e1daa17a9f81f7bb04d88f950fb', variant: this.indicatorMark, required: this.required }), h("slot", { key: '9ed89620ddd703c7990af9031df2be93053bd7d3', name: "label-info" })), h("div", { key: '711a6cca3de99a609c94075383c50c8929c9b1d7', class: "gux-input-and-error-container" }, h("div", { key: '726d0d6e8dccf3c0b70f4c69bdb43e5cdd4fa569', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '177fdf419cceb48c995cbc3a3236cc90b0ad7753', class: {
+            } }, h("div", { key: '192eb1c1199868a6fd28bde0254680242e53e17f', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '14d132e2df147a15c6fd01ee1a10381a9cf1984a', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '72bb95794fe3a864c0bf3c2e2332e5d3c0358ba4', show: this.hasError }, h("slot", { key: 'f46c4643abe59e308eba8f1369e14012c03be8fe', name: "error" })), h(GuxFormFieldHelp, { key: 'f26fef0ad96ea8308e9a374c49dd71447c5ab4ca', show: !this.hasError && this.hasHelp }, h("slot", { key: '231daa860188ae1931cc30b915a65c64472c4294', name: "help" })))));
+            } }, h("slot", { key: 'ec91c8193cd7edd8a7cb55216df2ac736e7f89a4', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '88f7af880c97797a18a46c8338128e7fbaa40576', show: this.hasError }, h("slot", { key: '6f84acacf443616d713d979e3cae0a6f1cd36215', name: "error" })), h(GuxFormFieldHelp, { key: '402383fbb5e625b074f5b85bbc3d73dfbaaff9e1', show: !this.hasError && this.hasHelp }, h("slot", { key: 'ba6ba99fd6daf6e4d032ed8d2e372172fd11c852', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-dropdown/gux-form-field-dropdown.js

@@ -96,11 +96,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '0dfe54fda7c3e69dd67e7d9e9358e01ec3a91a55', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '11f81cfffe38feac3cdcdb39628127440e557001' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'fa56f48c519dfe26f7a6c961cecde535f3b53a34', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '016521a55ce10a78034b86c89f837b250aa01994', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3a9385d16719e4aff446799168229fab58769012', variant: this.indicatorMark, required: this.required }), h("slot", { key: '0dc2e0f4f3163d686e83951e58250ee901d71651', name: "label-info" })), h("div", { key: '251cedd28aa073e8181db453c1c3297936f5a256', class: "gux-input-and-error-container" }, h("div", { key: '3f706edac6aa073bf613cdd0edd2cbe0f62a6bf7', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '113246095f4dc28340db42b5032299c1426d55fc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'd10c94782bf256f3e15fedd6bd9215259ecebfd6' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '101746ab3dda9dc30ad23a457afd806cc88ecd0b', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'd203457aed8fc4abfd2eb6d7d11188a6c3b1409c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1c3cd3f833984cda0984ab48189c7e1a0a297d30', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'e2d99d73109f4c9b58cb7e59a903d0838503df66', name: "label-info" })), h("div", { key: '5cc9a661055aac3b1576ec2c4677c68f0f2e916d', class: "gux-input-and-error-container" }, h("div", { key: 'c937399787b435baf1a7dd21849f7dd373b1e940', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '73f43b33f28141823b5be137dd2730a39d61b49a' })), h(GuxFormFieldError, { key: '8dc5856793f283e4509a3541d1cc4a328cd1b84a', show: this.hasError }, h("slot", { key: '51ffde57ba6dd602c5c6f8ce0b2462edae89653d', name: "error" })), h(GuxFormFieldHelp, { key: 'efabeacc3e957fe754f21a3f1c5e41940ccd05ef', show: !this.hasError && this.hasHelp }, h("slot", { key: '2dadbc75d6d304594cfee2d3bab1b9b54e8a9dc4', name: "help" })))));
+            } }, h("slot", { key: 'c332fcff933af2dd9eae2a8cada13060da444bf0' })), h(GuxFormFieldError, { key: '0d522953044def2c9bd098f7f279a50ac64bb98f', show: this.hasError }, h("slot", { key: '371acba14d417d47ca9fa71a1860a745c03e4980', name: "error" })), h(GuxFormFieldHelp, { key: '893141adf545f159df5e57f9240e49c0c9f84f87', show: !this.hasError && this.hasHelp }, h("slot", { key: '8f67a962550c84c71678d4021965d8924c958133', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/gux-form-field-file.js

@@ -98,7 +98,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '5e390e4630bd8558127235e0bde0bc978c664887', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '3ecc8ef985b2e3d8c32cb2a2f3c87ff56c891640', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '76826ea9ddba26ba7b100375534db1da99b55800', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '231dcd82c9459f6013c34191fa377fd766ddfdf5', variant: this.indicatorMark, required: this.required }), h("slot", { key: '5417b9f476225e03bd070c1d6deb4782c207f424', name: "label-info" })), h("div", { key: 'e1c30bfa412edfd92ab9efa8db86bf77220bdd7f', class: "gux-input-and-error-container" }, h("slot", { key: 'aa52c2c0e1d545c0b4c8006becfa7d4078b6f06a', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '0c1c8c316aa64da8be5fdd5c3ec83b5501953c8e', show: this.hasError }, h("slot", { key: '9e2ccb780d81e3d20f09d157563fea47becd2a8c', name: "error" })), h(GuxFormFieldHelp, { key: '405e69e76ede2d7b59730a00c5b35af7f233e020', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fe8999deeff4c58da33d1e8990e045b808a48f84', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: '9451d8ecb59956496d9cc72e9136b008683dde4a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f363bfd6317a166db42d0988f06dcfc07be20c1b', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '10df30d1f5317f45608f197d32bc63579be4113a', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '77c7abe52e133f91d6c44b411ad78e2ad14aeb02', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f6b72a8257742ee205ca99a267c0037f25d892ec', name: "label-info" })), h("div", { key: '798e0268101b6bcadfa48530e6bfbdc8bc657808', class: "gux-input-and-error-container" }, h("slot", { key: '69615aadbfdd300bca2908133b4aeb8380b07a6d', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '0ec4af99dbb3f882790ae135dcfb6be0f8102036', show: this.hasError }, h("slot", { key: 'ad8e7176b0f36a4a946b3010bbc3f390e4bfa73d', name: "error" })), h(GuxFormFieldHelp, { key: 'e9d8fce3e8e2b08794dede59ca0fa9db568a406b', show: !this.hasError && this.hasHelp }, h("slot", { key: '66170d1a9dcacd07680df3227711bb749d844b03', name: "help" })))));
     }
     static get is() { return "gux-form-field-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js

@@ -101,14 +101,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: 'bbeb26fc0f47322c0c223943739cd5e442fdd3ad', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a22681aaaa5c548beb644b8448ff047005ebdfb1', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '210e406fc65360fa9d5cdb871462cf3cae5fa9c7', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e9b66709fb17f2a5f59a970aa594c78fe97a2f9f', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7171533a2cdea6cb8cf9bf4c99c70d1e0b8cd65f', name: "label-info" })), h("div", { key: '6029091f68446c39e946b5242f4872ca39973692', class: "gux-input-and-error-container" }, h("div", { key: '71bc029e88a250c8781a248bcfb5020271547672', class: {
+        return (h(GuxFormFieldContainer, { key: '4dc1e3ba9094290cabb43a2a48d2cc2d3ff7bc05', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8164ea0e950c684004dfd0e3b21e1939632c3734', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '880ff53d3ccb61f4eb31ff4e4a27629e352ca38e', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '7874ddefe954b2b440e8a3c58ce9d0020f353edf', variant: this.indicatorMark, required: this.required }), h("slot", { key: '36079c1ff80dbd53a3bdb42f8f71f63fb85ee424', name: "label-info" })), h("div", { key: '07322b144c9b64d357666a923725ecec9c799b37', class: "gux-input-and-error-container" }, h("div", { key: 'fcf36ad925dd6dcb6edcb8fc9f7626d3c5e0d945', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '8ada535103e9131c4c076d1b48c481bd3f84885c', class: {
+            }, part: "input-section" }, h("div", { key: '0a51011cfceb704785e05e2863b932eafe6a6346', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '87f2fff194f28c22e71a9d20b46f7304aceea569', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: '55491eb32e6f4c3c07ac03a3fb0ed7f66315291e', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'a1569ce252e9b95608836e504dcec9dc610b6146', show: this.hasError }, h("slot", { key: '93478b2fd259cfa44447a8e4609736d3d5c2c47e', name: "error" })), h(GuxFormFieldHelp, { key: 'ef3c99ced7f64d644c8f6955cd6fc49f0b97840e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd4682b3814be6f9619ab9060e2ca842bf552e2c8', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '4e4fa1261ae2e22b59dc6aefc317caa4ecfd56f2', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: 'bf6ecf242841fb008f11a5daf3771e287474ca9a', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '8d22fae051f8b0eb4765319822cd34300f7e4a15', show: this.hasError }, h("slot", { key: '85183deabf7afcb81b85dced7854ae81f0daf252', name: "error" })), h(GuxFormFieldHelp, { key: '30e115c3fdeb72d50f670d57f6bc87573d1b0edf', show: !this.hasError && this.hasHelp }, h("slot", { key: '4631ffea76d8068e578c43b7540f1a9205de9c18', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.js

@@ -92,14 +92,14 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'b9cfae1b0f530f6307434aa2ef5f77826e9b4a06', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'aac3f09bdb9efaed286e1b416826d4a1a5da431d' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '97a4771ea9172144d47105656d9bffc6c133b948', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '76f7432cce0d7075d2868d7935518770045669af', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9bc3d2d7de98391b689190b2fba35b925d9b1c56', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'a87a0ba538a5e6fa5b3d3db3e692df48a161d6d4', name: "label-info" })), h("div", { key: '70969783b3b73f199ecb4b8f6782385bf0c488fb', class: "gux-input-and-error-container" }, h("div", { key: 'be58058a07066b79a7585de47d872aea25066173', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '568ee3aa1862c56e0c33017a9ae167cc48877bf7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'cdd14d13b5a358320fec2c3774a36a60c40cdfa4' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '2de3cb7b2bbe608a509664c9bfee4a7e17177a86', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '469245a701a1a88208f322a8188fafcd1fd9f231', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'ea21e71660d77fc22e0961b66e8ed9415e0887ad', variant: this.indicatorMark, required: this.required }), h("slot", { key: '251428310e381b82ff2239c48bedefa92f9f9b8b', name: "label-info" })), h("div", { key: 'cf3e7de8738c6d8ca888e914af1f2d735ff726be', class: "gux-input-and-error-container" }, h("div", { key: 'a21d06d59675a8957f9ef363cecc3d7447b3588a', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '4c16617086d2ebed26b4435bf8f1c81f8cd46120', class: {
+            } }, h("div", { key: '8f4ec255bf6de5fe11c2703d87256e9b58b93010', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '3822a28f80b3980297307d3ba0d9d3b251193dde' }))), h(GuxFormFieldError, { key: '53505be7f1c4ff32be19d971d0cd0c89fa24d038', show: this.hasError }, h("slot", { key: '67dac2fc7c120428623e5404544c308948c670d0', name: "error" })), h(GuxFormFieldHelp, { key: 'f301a1f4ef7d06a9d3b8a59999caefa2d78a5c6c', show: !this.hasError && this.hasHelp }, h("slot", { key: '927c4471e1a679cc112f606636cc5b28ba14cd09', name: "help" })))));
+            } }, h("slot", { key: 'e2bf69cf5b855739f96ae2d7be8f54b97422b74f' }))), h(GuxFormFieldError, { key: '0c760c4501dd287d261975cc9bef76226c868622', show: this.hasError }, h("slot", { key: 'dd956d62a9aacb7a746fbbbb86122d7e3651233e', name: "error" })), h(GuxFormFieldHelp, { key: 'a92b1b3d0c9d362ba4ef6e8ff7a4ea238291dbd3', show: !this.hasError && this.hasHelp }, h("slot", { key: '70d0d3f8da103d4635b1e80b5f9ce3bb776d8e9c', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {