genesys-spark-components 4.160.0 → 4.161.0

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: '97573bc551ca35d0f29c2f77f3cae221a7dbb532', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: 'b35d243aeb4bce30d1d5145a1efb62bfcc7e3806' }, h("slot", { key: '9f03f2e162e635d107284f73483f2bcd0405337f', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: '168049642e68fbc56c6f3580a50b8139c5defa65', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '1a03009c00c013594c290bfa597d85f69d7c8688' }, h("slot", { key: 'ea256a1e6b868904a1568f57dd83f1d8f2865249', 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

@@ -26,10 +26,10 @@ export class GuxButton {
     }
     render() {
         return [
-            h("button", { key: '24dbbdfe3e039dea0cbdc2d452cb0cf5da7f9d9b', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+            h("button", { key: '134f5c031ca4eb4e87fb218a06214c8892fa1742', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
                     [`gux-${this.accent}`]: true,
                     'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: '3cdf6222d210ad14536037885d5d6b54f684a209', onSlotchange: this.slotChanged.bind(this) })),
+                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: 'a575a090724849aaa0b2ed74e71388243d3e5765', onSlotchange: this.slotChanged.bind(this) })),
             this.renderTooltip()
         ];
     }

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

@@ -126,7 +126,7 @@ export class GuxButtonMulti {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("gux-popup", { key: '1de80e87fb808e2c1c67f11069ff854b3c8bb594', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'ec449bb3cb5a07b22aa19a1cfbe7bad390348c58', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '59a02ac2a0617c39bdee504aec91325e5fa6b011', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '8e774e6ff321588c41ffe731c1967752dc5ca622', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.guxAriaLabel }, h("slot", { key: '18b5e98f45e5b7f4b4644e55417575f88d240d21', name: "title" }), h("gux-icon", { key: '625f150aebd9cb9c87214c200309e1c76c7ed372', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '3f328498971bffd3d0c79d2dc01e6cca83079af4', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '8263e75953b2091c4af783245e89b5abfabedfe5', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '2eebad343f088ea4f234ba23c9758d24d082daed' })))));
+        return (h("gux-popup", { key: '68f575cd942b0e72e40e5c452f0ec78603b616f5', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'da8ac00e3f2d3dcd6e99c27d1942e1817d473c5d', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: 'f965ba4d8708b0846f42a26f4fcecea10e4e78d4', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '5400cb11fcaa878e4c9dc5e2a3839ed39169f9f4', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.guxAriaLabel }, h("slot", { key: '28f463760494866349e25eb539a8479470bebaa2', name: "title" }), h("gux-icon", { key: '173414e8dc9382703d8aca6cec7a1014ed859b32', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '4e5874006f6652d87939ec20550066636fbedacb', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'c6a2a7f0d6285d1ea89316d636101642730e9ee0', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '23f70874aeebe4baf213565ddb2544fdfb9f5dba' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,25 @@
+const accents = ['primary', 'secondary', 'tertiary', 'invalid'];
+export const renderConfigs = [
+    ...accents.map((accent) => ({
+        description: `Should render as expected for "${accent}" accent`,
+        html: `<gux-button-multi lang="en" accent="${accent}">
+    <span slot="title">Primary</span>
+    <gux-list-item>Test 1</gux-list-item>
+    <gux-list-item>Test 2</gux-list-item>
+    <gux-list-item>Test 3</gux-list-item>
+    <gux-list-divider></gux-list-divider>
+    <gux-list-item>Test 4</gux-list-item>
+  </gux-button-multi>`
+    })),
+    ...accents.map((accent) => ({
+        description: `Should render as expected for "${accent}" accent disabled`,
+        html: `<gux-button-multi lang="en" accent="${accent}" disabled>
+    <span slot="title">Primary</span>
+    <gux-list-item>Test 1</gux-list-item>
+    <gux-list-item>Test 2</gux-list-item>
+    <gux-list-item>Test 3</gux-list-item>
+    <gux-list-divider></gux-list-divider>
+    <gux-list-item>Test 4</gux-list-item>
+  </gux-button-multi>`
+    }))
+];

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

@@ -31,7 +31,7 @@ export class GuxButtonSlot {
         this.validateSlotContent();
     }
     render() {
-        return (h(Host, { key: '2f0d21a41e3f692f1f5f64a096e69c2c39feac8f', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '1f7173b22404bc2e7e56cd25873dac40d1c803a6' })));
+        return (h(Host, { key: '8819f437fd5f475a7b55e77095db784813a96423', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '5a5db86c9369c6d0e97f13fa810a4e3c5bf2af92' })));
     }
     static get is() { return "gux-button-slot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -344,7 +344,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: '0c55a401066c6b0187e748aa283250a0b1241319', class: "gux-calendar" }, h("div", { key: '5a74b7258882a980360239957794b1c2ae89f26f', class: "gux-header" }, h("button", { key: '74a80f686c61660c3dacb46c3ea39254b175767f', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: 'e6591ea5f66819d5d28628fd1eec2fbcaf29bd7a', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '4cd50eea789472a67ea8dab48160f9d372f22633', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: 'c70331f456b7af4a5df486c555d7a38ed06ff5a4', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '5ec1b7c7032ab13ed4c2e1fc55a861695d3ec7de', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: 'a4e06e2ba0c7af5321f69647da18f93be474b4db', class: "gux-calendar" }, h("div", { key: '782e30f3f1fe6eff43168a5dd775f1104915c0a4', class: "gux-header" }, h("button", { key: '88a45290016c9ecd7d37853f62c9fa755b009673', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '7314f5231b877889b5afe690a7dc7f0e0908458a', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'b0e09dfeac5392b9df2bc61eb0c935a85cd3867e', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '70d37b77b5be479ce47573d54f9fb13ae24d4b89', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '37a51061a40b1c26067d714dbe65c8acc2ce96bf', 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

@@ -14,10 +14,10 @@ export class GuxCard {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: '363ba6f0a883e4e2f4a056f6d4d441efb0b3ea2c', class: {
+        return (h("div", { key: '8531803bf5aed7589ee6d93d1fc3fdf05530e2e0', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: 'e36c2a015923aa961bd1c0a308f2066b702e6272' })));
+            } }, h("slot", { key: '5886c4c10b3153226b13a59f7d7b85dd0d16e136' })));
     }
     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

@@ -124,14 +124,14 @@ export class GuxColumnManagerItem {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'e6013e498a0c7f257528ace4073d8172583d08f8', draggable: "true" }, h("div", { key: '49ab2eb77431ae3133b5aa34697fc85139a146b6', class: {
+        return (h(Host, { key: '367c36061a556b2e8a01b97588534933287690d8', draggable: "true" }, h("div", { key: '1d208d949bda74e4d875dab973c17e511dc2f847', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
                 'gux-dragging': this.isDragging
-            } }, h("button", { key: '50c716123ee00cba66bd2f6fc8b15779113b4f47', class: {
+            } }, h("button", { key: '8b07b8235afe8cd1f29e99107748cff8ab08308b', 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: '97863cb76d1bf28dfa079c77a1c99eed6664972b', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: '6bd0d410c9d3d0c7772abfa40fae34987e3d41b4', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'edf779e93542edcd8704fee84f330939460776de', class: "gux-select" }, h("slot", { key: '84f0bc882c16a3e478ea6a0e76f85bbe63b23686', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '6e4e27282db27295a16cba27d063fe0f682f4901', 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: 'cbcae4d3eeb2caa02ce2f255d3613fe0af576a88', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: 'a257610ac76e61b8003e71244b7e5287b316660e', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'a4e4ee44deb6a4c3898e32c926aabc3c14fefc16', class: "gux-select" }, h("slot", { key: 'bc505575ec260c8867f634ac87aab7f08d1c874a', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '98d4bce92703929555b0e2bb2912b3fea9ac9559', 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: '62daef53138e926a9cbfae1719232de3f3e7f9b2', class: "gux-container" }, h("div", { key: 'e3a79e55e8cbe501bdb26935385ba313cd4927ee', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '76a55f638c25df7ceb4d38b53be63102889b9aa8', class: "gux-search" }, h("gux-content-search", { key: 'be60a7fdfe003135a386d313bd3fecbbd52c853f', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: '19af360a04d7d4df522dc76676897363fe35c1a4', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '261035c713eb6c548bf5cf3f0c2cfd8337446c4f', class: "gux-select" }, h("gux-form-field-checkbox", { key: '7067d7cece7c16d05a45e6b01fa46c245a450eea' }, h("input", { key: 'bef6b7f2804bc0f8006901195a694f725dd6c14f', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '2135cd8bbc8421a4cae0fb46f93728245d5d670f', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '58b6db75ebf6d37d15beabf2a6e572d863f01fd4', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '3e2cdf0655d9dfbd380495eccd7cdaf23470b7d3', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: 'da70374436f1c5fd2746e327a7eb7709efb770ef', ref: el => (this.announceElement = el) })));
+        return (h("div", { key: 'b7ce08137190957a0ae80c7e66c4288131dd4f2c', class: "gux-container" }, h("div", { key: '5df3a55b48913d08428a7a10fd530ffb9cf25937', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '072149f544d9d87ab86a6b4243a1c5ab4aa4a1a7', class: "gux-search" }, h("gux-content-search", { key: 'be840fda9b3fc8381357f781c6e8b1e506942a90', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: '07d2b1f590afa5ffec5400ac227209345fd2843d', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: 'd664b78531dbdaf72f7184958a6d728d671e34b6', class: "gux-select" }, h("gux-form-field-checkbox", { key: '05a893101d162f76f3df3e636bf4f9268262eebf' }, h("input", { key: '52b42d034cad321280c74eeb237bc3434a231c7e', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: 'e8e992aa237a198eb05305de304aeb55db704ecf', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '6ef21dc5844b0d40cc12c1e52f482b27f223f6c8', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: 'a00730a6820a3abba1504d61c50e36b3cb6298ec', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '1fc59cd7e1abf4f0d12c85c63f8a8362657dfbcc', 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

@@ -50,10 +50,10 @@ export class GuxContentSearch {
         }
     }
     render() {
-        return (h("div", { key: '005b8a6387ab8fe85d2568dadd131d23cad52d66', class: {
+        return (h("div", { key: '847f1e89ae0d2ef04b4347485db960375bfac09f', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '101221eef9d32157c62232694a25117102c3fa39', class: "gux-search-icon" }, h("gux-icon", { key: 'ef6aba3306001c5992c549e7bcb8e7383405e9a4', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '66f162a8e996e5f99df6e38bd2b53f8e33c0569a' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '48798bdc9bb5d2fa98b0a46a427be3f90903420d', class: "gux-search-icon" }, h("gux-icon", { key: '34f8958715d07f3abaf9e588dca5f33e665b53e8', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '697b8d07ba2414ce430dab8f6fa7faf454848dca' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

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

@@ -125,8 +125,8 @@ export class GuxContextMenu {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: '5c6fcdb16aca67d10d68a84a74ed9e882366594f' }, h("gux-popup", { key: 'a058fa9045b1ea9bf7baf6e7bd7acb20316021a1', placement: this.placement, expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: 'b39b560341aff900fbfa5b0bf0927b1c4b9dbc33', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '70e97e654db145292fc372398101cfb7c26dce08', accent: "ghost" }, h("button", { key: '8cb5ca88159f66d55870701b463f7db5144989c9', 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-screen-reader-beta", { key: '3a6f2b1215ae7fc383bacb7264f74cbd03b342a0' }, this.screenreaderText ||
-            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: '882669bc46a37800d7b9ced560de2e9d41105c4b', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: 'b29801fdedc5ed27bbc0e3159749ec514d441a22', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: '5fc919f53286974f3d9a38a069592227ce185103', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '184fa8c0df6a3f7fd91bbf2ad78f734c7b2654cf' }))))));
+        return (h(Host, { key: '2cd16ddacbd191b173f7b6ac85bff7082b1ff12a' }, h("gux-popup", { key: '2ed454552b5a5abeecfbcb838732bf96380293c3', placement: this.placement, expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '5e418025847444e31ab811d887cb530b1e87b06e', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '1445177695751d83364174ac0bac202f0044eaea', accent: "ghost" }, h("button", { key: 'ee9fca2db917b058df0c3f2a79201a33bfbbc62b', 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-screen-reader-beta", { key: '4968e9b16bbd99bd6778ba6e294c6ec51783e793' }, this.screenreaderText ||
+            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: 'ad7e3f2674909c15148efae876346a2000374475', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: 'd71c8d89dd9a2269140a6ad86c59da0b7bec99d8', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: '89b70b521d2166e2672431a31cd6b1bc0b8269c7', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '97795e018bb37a1ccaa488d8be41cfc2e7907f37' }))))));
     }
     static get is() { return "gux-context-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,10 @@
+export const renderConfig = {
+    description: 'should render component as expected',
+    html: `
+  <gux-context-menu>
+    <gux-list-item id="list-item-1" onclick="notify(event)">Test 1</gux-list-item>
+    <gux-list-item id="list-item-2" onclick="notify(event)">Test 2</gux-list-item>
+    <gux-list-item id="list-item-3" onclick="notify(event)">Test 3</gux-list-item>
+  </gux-context-menu>
+  `
+};

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

@@ -52,7 +52,7 @@ export class GuxCopyToClipboard {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '743c477dce108f8bc377e764794fa06f6331b60a', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: '0d64efa090fa1204f90ae3fd91370889e02a7e48', class: "gux-copy-content" }, h("slot", { key: 'a67e11585ad450ff94b8fc037a342996211564e3', name: "content" }), h("gux-icon", { key: '8c0f272c28636ca675bc901dbaa5407302f0501d', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
+        return (h("button", { key: 'ff79d0dc9a4a559bb66dcaf0e5ef40f2ef6c62b4', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: '22eca5f105d5a53fb8459919ca2fc733ef5edc1a', class: "gux-copy-content" }, h("slot", { key: '746a05864bba540aa70f40acfc2f205c674ea97c', name: "content" }), h("gux-icon", { key: 'aab2498fcdc725d37c2e44effbfd091350fb49de', "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

@@ -538,7 +538,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: '8bf19a961f4cd2d4b66e75d6088b93ea72a13879', class: {
+        return (h("div", { key: '31bcd6b65eac76aad4d68723e2308cbf6f55d8bc', 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: '699c5876801bf26edbae2803ca5f7ba7d047b27e', accent: "ghost", class: {
+        return (h("gux-button-slot", { key: 'a42976c1081623a502264f40087c0832e86cd37c', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, h("button", { key: 'de66227205545b4dbf92210167fa4d5ca1ca4a48', type: "button", title: this.i18n('dismiss') }, h("div", { key: 'f9284ac02c27e32ea3646718efcad36954099ce6', class: "gux-icon-container" }, h("gux-icon", { key: 'fc37236b5f832358416119d97e8aa6cc3612a825', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
+            } }, h("button", { key: 'de941be5548f25d721caaf43613cd0503932ac4d', type: "button", title: this.i18n('dismiss') }, h("div", { key: '7f55c0a2220d228e01246b1eeca8c56b30561ac8', class: "gux-icon-container" }, h("gux-icon", { key: '65da72a2702d705a233e9a0e47b6ed1ac01430e2', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
     }
     static get is() { return "gux-dismiss-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@
 }
 
 .gux-field,
-.gux-target-container-expanded {
+.gux-target-container-filterable {
   all: unset;
   box-sizing: border-box;
   display: flex;
@@ -22,22 +22,22 @@
   background-color: var(--gse-ui-formControl-input-backgroundColor);
 }
 
-.gux-target-container-expanded,
-.gux-target-container-collapsed .gux-field {
+.gux-target-container-filterable,
+.gux-target-container-not-filterable .gux-field {
   padding: var(--gse-ui-formControl-input-padding);
 }
 
-.gux-error.gux-target-container-collapsed .gux-field-button, .gux-error.gux-target-container-expanded {
+.gux-error.gux-target-container-not-filterable .gux-field-button, .gux-error.gux-target-container-filterable {
   border: var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color);
 }
 
-.gux-disabled.gux-target-container-collapsed .gux-field-button, .gux-disabled.gux-target-container-expanded {
+.gux-disabled.gux-target-container-not-filterable .gux-field-button, .gux-disabled.gux-target-container-filterable {
   user-select: none;
   border: var(--gse-ui-formControl-input-disabled-border-width) var(--gse-ui-formControl-input-disabled-border-style) var(--gse-ui-formControl-input-disabled-border-color);
 }
 
-.gux-target-container-collapsed .gux-field-button:hover,
-.gux-target-container-expanded:hover {
+.gux-target-container-not-filterable .gux-field-button:hover,
+.gux-target-container-filterable:hover {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
 }
 
@@ -100,27 +100,35 @@
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
 }
 
-.gux-target-container-expanded {
+.gux-target-container-filterable {
+  border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
+  border-radius: var(--gse-ui-formControl-input-borderRadius);
+}
+.gux-target-container-filterable.gux-target-container-filterable-active {
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-.gux-target-container-expanded:focus-visible {
+.gux-target-container-filterable:focus-visible {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
 }
-.gux-target-container-expanded:focus-within:has(:focus-visible) {
+.gux-target-container-filterable:focus-within:has(:focus-visible) {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
 }
-.gux-target-container-expanded .gux-filter-input {
+.gux-target-container-filterable .gux-filter-input {
   background-color: inherit;
   border: none;
 }
-.gux-target-container-expanded .gux-filter-input:focus {
+.gux-target-container-filterable .gux-filter-input:focus {
   outline: none;
   border: none;
 }
-.gux-target-container-expanded .gux-field-button {
+.gux-target-container-filterable .gux-filter-input::selection {
+  color: inherit; /* Keep text color the same */
+  background: transparent; /* Make selection background invisible */
+}
+.gux-target-container-filterable .gux-field-button {
   inline-size: auto;
   block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
@@ -129,19 +137,19 @@
   border: none;
   box-shadow: none;
 }
-.gux-target-container-expanded .gux-field-button:focus {
+.gux-target-container-filterable .gux-field-button:focus {
   outline: none;
 }
 
-.gux-target-container-collapsed .gux-field-button {
+.gux-target-container-not-filterable .gux-field-button {
   border: var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
-.gux-target-container-collapsed .gux-field-button:focus-visible {
+.gux-target-container-not-filterable .gux-field-button:focus-visible {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
 }
-.gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible) {
+.gux-target-container-not-filterable .gux-field-button:focus-within:has(:focus-visible) {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
 }

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

@@ -47,6 +47,7 @@ export class GuxDropdown {
     watchExpanded(expanded) {
         if (!expanded) {
             this.filter = '';
+            this.filterElement.value = '';
         }
     }
     watchValue(newValue) {
@@ -113,6 +114,10 @@ export class GuxDropdown {
     }
     onFocusin(event) {
         this.stopPropagationOfInternalFocusEvents(event);
+        if (this.isFilterable() &&
+            !this.root.contains(event === null || event === void 0 ? void 0 : event.relatedTarget)) {
+            this.filterElement.focus();
+        }
     }
     onClickOutside() {
         this.collapseListbox('noFocusChange');
@@ -335,8 +340,8 @@ export class GuxDropdown {
             } }, h("gux-icon", { "icon-name": iconOption.iconName, style: iconStyle, decorative: true, size: "small" }), h("gux-truncate", { ref: el => (this.truncateElement = el) }, optionText)));
     }
     renderFilterInputField() {
-        if (this.expanded && this.isFilterable()) {
-            return (h("div", { class: "gux-field gux-input-field", dir: "auto" }, h("div", { class: "gux-field-content" }, h("div", { class: "gux-filter" }, h("div", { class: "gux-filter-display" }, h("span", { class: "gux-filter-text" }, this.filter), h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.filter))), h("div", { class: "input-and-dropdown-button" }, h("input", { onClick: this.fieldButtonClick.bind(this), class: "gux-filter-input", type: "text", "aria-label": this.i18n('filterResults'), ref: el => (this.filterElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), disabled: this.disabled }))))));
+        if (this.isFilterable()) {
+            return (h("div", { class: "gux-field gux-input-field", dir: "auto" }, h("div", { class: "gux-field-content" }, h("div", { class: "gux-filter" }, h("div", { class: "gux-filter-display" }, h("span", { class: "gux-filter-text" }, this.filter), h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.filter))), h("div", { class: "input-and-dropdown-button" }, h("input", { class: "gux-filter-input", type: "text", "aria-label": this.i18n('filterResults'), ref: el => (this.filterElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), onFocus: () => (this.expanded = true), disabled: this.disabled }), this.renderTargetContent())))));
         }
     }
     renderPopup() {
@@ -344,11 +349,12 @@ export class GuxDropdown {
     }
     renderTarget() {
         return (h("div", { class: {
-                'gux-target-container-expanded': this.expanded && this.isFilterable(),
-                'gux-target-container-collapsed': !(this.expanded && this.isFilterable()),
+                'gux-target-container-filterable': this.isFilterable(),
+                'gux-target-container-filterable-active': this.expanded && this.isFilterable(),
+                'gux-target-container-not-filterable': !this.isFilterable(),
                 'gux-error': this.hasError,
                 'gux-disabled': this.disabled
-            }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: calculateInputDisabledState(this.root), onClick: this.fieldButtonClick.bind(this), onFocusin: this.showTooltip.bind(this), onFocusout: this.hideTooltip.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderRadialLoading(), h("gux-icon", { class: {
+            }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: calculateInputDisabledState(this.root), onClick: this.fieldButtonClick.bind(this), onFocusin: this.showTooltip.bind(this), onFocusout: this.hideTooltip.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, !this.isFilterable() && this.renderTargetContent(), this.renderRadialLoading(), h("gux-icon", { class: {
                 'gux-expand-icon': true
             }, "screenreader-text": this.i18n('dropdown'), size: "small", iconName: this.expanded
                 ? 'custom/chevron-up-small-regular'
@@ -365,7 +371,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: '1489eb86035a07be578c9add3edf616e95061f16', 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: '49c7e8f06f4de5511cf7d70953d281fb2b7326de', 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

@@ -33,7 +33,7 @@ export class GuxDropdownMultiTag {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: '736f46e03112b67563ab34cff27d60a81b74d06f', class: {
+        return (h("div", { key: '974b5a86160b5aacae364e031e274067a8c49aaf', 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

@@ -407,7 +407,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '21470eb5abc8ce97d749c5b4199c97c3209b63d4', class: "gux-dropdown-container" }, h("gux-popup", { key: 'a46922d1410cd946f8a8c4d873dfb26fe61de9c3', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: 'c20af3c7255018600ecae391f368f5393524abbd', class: "gux-dropdown-container" }, h("gux-popup", { key: 'a8fe4f4356451bcdfe2256336ee2753c5365a34a', 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

@@ -183,10 +183,10 @@ export class GuxFlyoutMenu {
         }
     }
     render() {
-        return (h(Host, { key: '7ad3efd714c201938298cf87b5acc6e86a4618c0', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: 'f2c96a97da0e807e8a0506b12b01e7d9dc4e03f1', ref: el => (this.announceElement = el) }), h("span", { key: '92702bfb121a185695edac754f6bc29371b7f635', ref: el => (this.targetElement = el) }, h("slot", { key: '6b6e3221ea75d5f498466c178e1229f1eb27e675', name: "target" })), h("div", { key: '701eb459b5a0f71395b55c5785f549bef720d23d', class: {
+        return (h(Host, { key: '6cf59014f90870cbe8d838110c2aa096543a114b', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: '1695c676fccd04b1f329a03ebf07887236ef08f3', ref: el => (this.announceElement = el) }), h("span", { key: '0e5f007704cf3ceee5e6de231a417eed53c72d57', ref: el => (this.targetElement = el) }, h("slot", { key: '0dbf1fe885215ab2e70266ae2c09be958ae48657', name: "target" })), h("div", { key: '6e475181c87066e81feda5ce432c75bf700f17a6', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'acf809c3553c47e9c7807695dd4598251268ed7a', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'efea8e265eee0be91e5a95867b869fe0d7c92f6d', class: "gux-arrow-caret" })), h("slot", { key: '7ab7ae4ec3ade19ff50e2eec0d0fc1b20d3d7c93', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '4026a9def2ebdfde26aa0e5300673e5a8c1b9c1c', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '2cbd5a5d8ebc4726dacebf764a4a33465fa34b1e', class: "gux-arrow-caret" })), h("slot", { key: '46ac2c59463c9ee24f3c931ba4aeed791291bd98', 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

@@ -31,7 +31,7 @@ export class GuxMenuOption {
         }
     }
     render() {
-        return (h("button", { key: 'a6e20affe6260ec5c17148cefdbfebe4a53ad9c6', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '446395c2040c00b76ea1ce85e5f5599cae769aa7', class: "gux-menu-option-button-text" }, h("slot", { key: '4cd4228be9a88d2c02e9ec1431eb3128b72c02e5' }))));
+        return (h("button", { key: 'e2015bcc33546750074b4a3534103c69b62e9b50', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '91a724efb57a0f0ba34a9963aec8e28c47aa2952', class: "gux-menu-option-button-text" }, h("slot", { key: 'a13f5c4d6c79f95f47724a764b9aaaf85d27ced7' }))));
     }
     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: '0e69a50f9eaaed2e1ed5b8d9f612101dad7d7282', role: "menu" }, h("slot", { key: '37cb104c320d31ddf8770b323a9c72ff3e7bdf53' })));
+        return (h(Host, { key: '3dd5718ab15b76897fdce21ff09f870b87bff8f9', role: "menu" }, h("slot", { key: 'eaa9274b7fa89faaed30f93ac1a82aa346097be1' })));
     }
     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

@@ -142,13 +142,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: '6b7e91ec42d7960b344d59407c9a89ea8666e32a' }, h("button", { key: 'e5b59a39c084eff76454799bdc799b05aca52959', type: "button", class: {
+        return (h(Host, { key: '27965e4e4f85b48f970fb6483304c642b94e5f4e' }, h("button", { key: 'd43d582fb7705d47e890d9035f34694463fe7a04', 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: '63c7252401b34b26ecd67994c590edcbbb18776b', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '7b3ac1e4a44b6e2e0d827d458ab5a9f6ba9daa3e', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '0678dc9499e9b927f4a0212832407bbe06785bba', 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: 'f38245fbb3da327a731cb0dd5bb5b06611750d0f', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: 'f395df960996fc4318bf59e5acf4491890c2e4d5', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: 'da54d4d56dd582f64b3bbf82e67962325d35ec13', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '0e361310e24daaecfa946fce6b06696a06a43d7c', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: '19f8cd9928b11e23a103f8f6cb91a496fe4e77b5' })))));
+            } }, h("div", { key: '59704a49050ba1d941fd5b52e43bdb6eef95f331', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'ae62f3e1a397322d09ff811104a3ce78bb32ff4c' })))));
     }
     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

@@ -47,10 +47,10 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: '9b37ae14b5aa5d2904c22ffcf8393a2d845dc4d4', class: {
+        return (h(Host, { key: '8581778dc168bd68805734f4f1a1d96935327f4b', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '88dcd1250fae77eb5dce53948b529bdbf7d2a305', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'f1286e98b0c3e00b42c97f171f9e0050d5b13ee4', class: "gux-input-label" }, h("div", { key: '1884ee7889b14035720aee337ddf9de0d9d1d1b4', class: "gux-input" }, h("slot", { key: 'cc7e9eb9a01cb65e48b93d1acd53f0aeba2b3d4d', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '8427792713aa87fd81f71ec3d206cb1723083f77', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '378f25400af0eb3243918c677435746e41035576', name: "label" }))), h("div", { key: '5af392b1b7a9f2340deda557b9b4c8cb44c80623', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '2f04e17d935c9368401fc6bb6521a070b646910b', show: this.hasError }, h("slot", { key: 'cc324117414007141e0205fad334897811c5f80b', name: "error" })), h(GuxFormFieldHelp, { key: '4f918830189307a41cbfa00893015102ca5136f4', show: !this.hasError && this.hasHelp }, h("slot", { key: '1b464e2b2ea883e46cf2ff7b4d12baef04f2d444', name: "help" }))))));
+            } }, h("div", { key: '4c63f70ff1db923a238e21f456bab8f29a72781b', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '38e009c001bf831543477875ba840e8862c44f48', class: "gux-input-label" }, h("div", { key: 'f7f71142b086d18d54cac7bb6e4362b6d9ca2401', class: "gux-input" }, h("slot", { key: '2e318e7cc9c99514508dae735501a5c3c541f5d9', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '6c65b22cb643656764009eb9dc70e9aefca1e208', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'c5cd085547086688333042b5876f1a9401c012b9', name: "label" }))), h("div", { key: 'ad15e5dce7b496eff018ed618c317aad85b1b6c0', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '7906a5bd3d48c8b48beedc24a1116564357cc847', show: this.hasError }, h("slot", { key: 'd7b98fe8e361f77bdaee472f8de50a252103bf41', name: "error" })), h(GuxFormFieldHelp, { key: '810453eeb0afef16b13d7af52232560678980523', show: !this.hasError && this.hasHelp }, h("slot", { key: '71d2c1db3e2b9c964b125bdb93992a485d86960c', 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

@@ -150,8 +150,8 @@ export class GuxFormFieldCheckboxGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'e510f0c0fcf9fd76c3c391bd66ec2fef75b7be9a', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'bc4bb057d2d535f204cefe85ad27d9b6217dec46' }, (_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: '5e5164adc2563d6d3bab22188a5d75440c572e27', position: "above", required: this.required }, h("slot", { key: '0906ef1243947d52d9c3d2618c0c88a62b94b945', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '19e888030a5c2078c38dab9b5685e6c8e4dcb4f9', variant: this.indicatorMark, required: this.required }), h("slot", { key: '5dd452934445d8269cd667ae910f1533aee27f75', name: "group-label-info" })), h("slot", { key: '4155cf7d2f092ffe73188f573c04b62a50aacdc2', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '34ef875c9dc46ff37eb3574ef94b065e44199c21', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'e367804623750343279f24afbb6030c7405f0360', show: this.hasGroupError }, h("slot", { key: 'e140d2c5cf27f58464cabc70f7f49023061696ec', name: "group-error" })), h(GuxFormFieldHelp, { key: '6828d92569eee8d5fdadbe1fbcd93910091ae9b0', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '2b5e8829043e90f7f55c13ec14842436ce6dfa29', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '1bd55cd30c1d66f866ff614711307af7b2753049', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '53c77e1bab69f3b770f6a7b0a8b12aa0dcf29a74' }, (_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: '3232b20676b1951a6f8b47d6bb557d3debae43e5', position: "above", required: this.required }, h("slot", { key: '6a87a0c77c616b89be18115ec37ca270fa26cc12', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'fdf1091895b1a02a6575e563e0778798d6a15fb2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '40e09a0c533ff7b39d5d31e7c0f6b515783589d8', name: "group-label-info" })), h("slot", { key: '4e9debc65762b8e86889c08c8a897caa49160198', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'f0efc758f04c597f1d45902794423bfc35326595', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: '942ca8456bed376cb8ea987d422acdda34fa5167', show: this.hasGroupError }, h("slot", { key: '126c1015d36a535c8e88eb729840831c3738f5e9', name: "group-error" })), h(GuxFormFieldHelp, { key: '4764c245a4f74de1e23b811605a16f8a56c344d3', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'f48dd8183237c169b655fca54749a89424d30dca', 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

@@ -85,13 +85,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '9bb0ee43e91d6bc55f14c79bf205615caef36b6f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '94e0d29db2d749880f35701ce99aa22015d23325', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '97a0e24aea02d952179317e1453cea220738733e', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9efa9064b0e6270f48f756de90d71e5081b6eb3a', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'ea8cce3efc4e54fbb18ca9b498f684457f16166d', name: "label-info" })), h("div", { key: '85730bcafa56972ec24edfff30b7cba3e22e4f7d', class: "gux-input-and-error-container" }, h("div", { key: 'b64c5aaea6f3f16dc9dd05aaca7e4ba4e558a55e', class: {
+        return (h(GuxFormFieldContainer, { key: '545246d9da1c49969b9a9d27cde862b01bdb188f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '928e5e60935b41818ff2b60542c838120c4516b4', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'b2bbf26060dca87fd94e57e86e81aae1c4a3fac9', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '17bc94c09d012c9f2a8bb9463b8b83a29b4b3a1e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1fdf0abf89df7cb6cac5ad6b0b4984e3d03413c6', name: "label-info" })), h("div", { key: 'daa1acf1cfae60f89fcd62449b9c940c36dca4cf', class: "gux-input-and-error-container" }, h("div", { key: '2646e6dbf2548d6a34c7ce33edf8585de8315db8', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '41c6dcd864d396fd51ef29c381ffe6d157a950c8', class: {
+            } }, h("div", { key: 'fee91e931225b2a0376b0bd1c368bd18979449e8', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '0b967d0efd9eca208a40369679725389f4feccb9', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '03c36ee06dc975ee41dbe176e4c225cf520d3145', show: this.hasError }, h("slot", { key: '5f39c0b374eab15bdc51bcc8d4b66d8099a1bae2', name: "error" })), h(GuxFormFieldHelp, { key: '308153f1fa7f016ea9e724626e335a48171b8722', show: !this.hasError && this.hasHelp }, h("slot", { key: '13d012116faf9688ba1d98b080c545c286d3cb6c', name: "help" })))));
+            } }, h("slot", { key: 'e4bc50afcc9a4d5dc84fe73d36adfe32f318628d', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'ba46aae96078cbd4cb8e2c4a7e8f0ecf88ffe96b', show: this.hasError }, h("slot", { key: '0b86d27ae8c5748a5f3c47911047baae5fdd379a', name: "error" })), h(GuxFormFieldHelp, { key: '4bec11ed658bb83deb9e396338cff69af2c2fdc1', show: !this.hasError && this.hasHelp }, h("slot", { key: 'abdd45619889cdddade102f5589ad0f0168db166', 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

@@ -99,11 +99,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '9020a7db668f3cb5c6ef3db9a230e008ace4bed1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '52a423218fba63fa959e8563b323e23316da0ea2' }, (_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: '61d0d48c3ed153d93c4973615b1285dabc474847', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'cf6a6a962503f69bc33bb8fe4dbe633561e29985', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9d529f92d0fc5977033217a41faf43dcb57bdaf4', variant: this.indicatorMark, required: this.required }), h("slot", { key: '5a93d1502c8337f4037c65fa06870c1244f574ec', name: "label-info" })), h("div", { key: '19ee8d6085059cc637cb46ffee99279c2481ddb8', class: "gux-input-and-error-container" }, h("div", { key: '179346ac87f748081e7a591612f5a69de233e9f1', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '596bb0a9daaafca0972f9a6b85b20f8b934dfe09', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '31ff833828ec9d6ada68a1ed2212762cab337c9f' }, (_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: '1876dbd7c222526cbd793382c33a4a5cf6313f22', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '57176f9da8cc8e51c9eb8e0e73c8d6b25bd36513', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2eda5ae93db8bac0f6760fab263b3d3204bc918b', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f151bbc8a07a7cb3ae1e034c440279f927a5538c', name: "label-info" })), h("div", { key: '341a3ee72c67e6fb6039152bbe4641175c51d0d5', class: "gux-input-and-error-container" }, h("div", { key: 'd49d5d689935c59450b9c45108d476087f1ec769', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '7a91ec18082348fc7334733f22a36738d74b6d0b' })), h(GuxFormFieldError, { key: 'bb4687aed62b3ba2246967125884897861afdc03', show: this.hasError }, h("slot", { key: '1a7d9292bb9afdfef87cadfd73c042f4ca223ecf', name: "error" })), h(GuxFormFieldHelp, { key: '600311438afad613d07e99aced9b948809b430ae', show: !this.hasError && this.hasHelp }, h("slot", { key: '7590cb2f825a03586d6b4375479cd7c25abbf620', name: "help" })))));
+            } }, h("slot", { key: '7e17c222eeb244ae7c250f47dc58a5bc4ae4ffbb' })), h(GuxFormFieldError, { key: 'dc95fd03d59f87d4664c2eb6f13c5936dd60b945', show: this.hasError }, h("slot", { key: '2dbc4edeb102145a556b910a05413d9b274e6f35', name: "error" })), h(GuxFormFieldHelp, { key: '0e508b39d190fce5609540bb6eaefdaacc887f16', show: !this.hasError && this.hasHelp }, h("slot", { key: '23c6cbd1bef40176dcf070eaea4ba55140094ae1', 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

@@ -102,7 +102,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'c81fbfa48e90ff635a168d726efb0317912e8eec', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'df4978a1e3d8b36f15f6a38194513a4dc3608a38', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'bcb8e39bf89e2a56ae2863d9fdececb28450aa29', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '27fe84a8081016d09788b5f054fa37cda4f5673b', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'faffd8212a5705085e9c279cd8b5dc209bc95b67', name: "label-info" })), h("div", { key: '92e9275b73d2952e66e0409ebc9dbe933b591c1c', class: "gux-input-and-error-container" }, h("slot", { key: '976de47774150f01eab0302f77818917fcc8c5a6', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '73113ae0f0e5447df7466f0cfb77ced4d9177078', show: this.hasError }, h("slot", { key: 'c55abb34569f8e1ac336698613f8846df65a35f7', name: "error" })), h(GuxFormFieldHelp, { key: '89df5ee890bffc28be97e4181e5450bfdb97bd91', show: !this.hasError && this.hasHelp }, h("slot", { key: '0f5a5a4124ae5bfbf8988ecd3710dd66428416cf', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: 'afbe0d255c886bdb7ef76136ba1a0266ce02928f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '4150a02f330208c2f79b0e7df5112614ba24b7d3', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '963c1669469579e49ce6702649d1c5469cef7322', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b5d67f2ba79201a15c885d66ecdf6570b63be400', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b3531081795eaf2f954dc0e42340986b4b00696a', name: "label-info" })), h("div", { key: '09ac2a78594f80c404297404e535bc10159290b4', class: "gux-input-and-error-container" }, h("slot", { key: 'feccb4c1f2526d8400f2253114573bd159dd3c14', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '5f1191145e144f3ab6da99c66adf1eb578136214', show: this.hasError }, h("slot", { key: '28980350a36385b61fa21f79f71facc4fe953b71', name: "error" })), h(GuxFormFieldHelp, { key: '50eac306bde1f09eed4197bcd8f0767f3aad1ef2', show: !this.hasError && this.hasHelp }, h("slot", { key: '89683766e4e0486175a6e1416d8dc239107720da', name: "help" })))));
     }
     static get is() { return "gux-form-field-file"; }
     static get encapsulation() { return "shadow"; }