genesys-spark-components 4.29.1-beta.0 → 4.30.0

package/dist/collection/components/beta/gux-avatar-focusable/tests/gux-avatar-focusable.spec.js

@@ -0,0 +1,56 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+    __esModule: true,
+    logWarn: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAvatarFocusable } from "../gux-avatar-focusable";
+import { logWarn } from "../../../../utils/error/log-error";
+describe('gux-avatar-focusable', () => {
+    describe('#render', () => {
+        [
+            `<gux-avatar-focusable-beta>
+        <button>
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </button>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <a href="#">
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </a>
+      </gux-avatar-focusable-beta>`
+        ].forEach((html, index) => {
+            it(`component type (${index + 1}) with valid markup`, async () => {
+                const page = await newSpecPage({
+                    components: [GuxAvatarFocusable],
+                    html
+                });
+                expect(page.root).toMatchSnapshot();
+                expect(logWarn).not.toHaveBeenCalled();
+            });
+        });
+    });
+    describe('warnings', () => {
+        it(`should log warning for gux-avatar-focusable without gux-avatar-beta`, async () => {
+            const html = `<gux-avatar-focusable-beta>
+        <a href="#">Johnnny Dooley</a>
+      </gux-avatar-focusable-beta>`;
+            await newSpecPage({ components: [GuxAvatarFocusable], html });
+            expect(logWarn).toHaveBeenCalled();
+        });
+        [
+            `<gux-avatar-focusable-beta>
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <div>
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </div>
+      </gux-avatar-focusable-beta>`
+        ].forEach((html, index) => {
+            it(`should log warning for gux-avatar-focusable without anchor or button tags type (${index + 1})`, async () => {
+                await newSpecPage({ components: [GuxAvatarFocusable], html });
+                expect(logWarn).toHaveBeenCalled();
+            });
+        });
+    });
+});

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.js

@@ -190,7 +190,7 @@ export class GuxCalendar {
             } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
     }
     render() {
-        return (h("div", { key: 'de2977064f8c296d981085ff71ab4b534a490a90', class: "gux-calendar-beta" }, h("slot", { key: '236304c36e0d8995a167e6d437f0326b9d860a4c' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: '21bec94aa840d48119fa33756a944e85b97d73f3', class: "gux-calendar-beta" }, h("slot", { key: '570f0c89199732101f40dfe270460d65b231114b' }), this.renderHeader(), this.renderContent()));
     }
     static get is() { return "gux-calendar-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-cta-group/gux-cta-group.js

@@ -62,7 +62,7 @@ export class GuxCTAGroup {
         this.validateDismissSlot(this.root.querySelector('[slot=dismiss]'));
     }
     render() {
-        return (h("div", { key: '6f38ce57bc2624989e08f8f03b4b7a2a4273cbae', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '65299a5ff5d99f42afc8940d02114ff87dcfe59e', name: "primary" }), h("slot", { key: '778a140e6aeac6fc47ceb9694ed714d3e2326cc8', name: "secondary" }), h("slot", { key: '176142e469341facd9e85dd4934587b0b4380b7c', name: "dismiss" })));
+        return (h("div", { key: 'b016ee7bdd8aa8f9137b5f005d826908a192c570', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'a90406043d4c7d232de8054a3bd45a3c43b1cdf6', name: "primary" }), h("slot", { key: '6b710696e87676444c61d6337f02077b674cd6f6', name: "secondary" }), h("slot", { key: '5b66c14ef3fa4844c0a361418bd08289b387480c', name: "dismiss" })));
     }
     static get is() { return "gux-cta-group"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-date/gux-date.js

@@ -38,7 +38,7 @@ export class GuxDate {
         }
     }
     render() {
-        return (h(Host, { key: 'b0360c06209de4af12013c4ea7c6df46fb7d4521' }, this.renderDate()));
+        return (h(Host, { key: '7c5dba8ed657b7602e7b2664221cf618beee57af' }, this.renderDate()));
     }
     static get is() { return "gux-date-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-date-time/gux-date-time.js

@@ -39,7 +39,7 @@ export class GuxDateTime {
         }
     }
     render() {
-        return (h(Host, { key: '6f45c10105254b26470400e9b165fa572d3d52ee' }, this.renderDateTime()));
+        return (h(Host, { key: '34356448ca74d00976bf00d92651712b3e228c7b' }, this.renderDateTime()));
     }
     static get is() { return "gux-date-time-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-flag-icon/gux-flag-icon.js

@@ -11,7 +11,7 @@ export class GuxFlagIconBeta {
     }
     render() {
         var _a;
-        return (h("span", { key: '031662b25b8d7481baef3082be5b610d33cbcd4c', role: this.screenreaderText ? 'img' : '', class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.screenreaderText }));
+        return (h("span", { key: '93fa048d24c1fabe06941516e434a8cbef36ebc3', role: this.screenreaderText ? 'img' : '', class: 'gux-flag-' + ((_a = this.flag) === null || _a === void 0 ? void 0 : _a.toLowerCase()), style: { backgroundImage: `url(${spritesheetDataUrl})` }, "aria-label": this.screenreaderText }));
     }
     static get is() { return "gux-flag-icon-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.js

@@ -128,7 +128,7 @@ export class GuxMonthCalendar {
         return (h("span", { onFocus: () => this.doFocusTrap(), tabindex: "0" }));
     }
     render() {
-        return (h("div", { key: '4414615232e5f4e6e82a2d34d6713f586d3dcf9f', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
+        return (h("div", { key: 'd420a8f43d52a11f21514ae9b09700fa01dead5f', class: "gux-month-calendar" }, this.renderHeader(), this.renderMonths(), this.renderTrapFocusEl()));
     }
     static get is() { return "gux-month-calendar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.js

@@ -20,7 +20,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '0d37de3437568a8769522065242c4cff0baa07e5', role: "listitem", value: this.value }, h("div", { key: '557d40726bded727d5601dd3a8aebd82c627ccfa', class: "gux-container" }, h("button", { key: '967ec16e7c494a081059f4af5d654dbb842f3692', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '2ead0e3ebe3413b6ab588b8f5dddefdb14ee6bed' })))));
+        return (h(Host, { key: '1b11ecf35e494fa8302d3810b04d4b100a9bce37', role: "listitem", value: this.value }, h("div", { key: '5fc08521ca860aeeaf42010ce21dcc8ae50da5fd', class: "gux-container" }, h("button", { key: 'e6d138f95ab92cb8e1d55414da9323d7d8aa8f55', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '6cbc61ab3709e030469581f693ac0e57bc800710' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.js

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: '912d2aec79af0ad26ee10fe4a6355b65267f61ac', role: "list" }, h("slot", { key: '63031334d4538ee8de05a8508008a5f1f8d9122e' })));
+        return (h(Host, { key: '147bb32f8c74fbe3541c516b546d3445537a4130', role: "list" }, h("slot", { key: '98919214c3f0cd9649d2f936b6b87d801f0b71be' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.js

@@ -194,7 +194,7 @@ export class GuxMonthPicker {
         return (h("gux-month-calendar", { slot: "popup", ref: (el) => (this.monthCalendarElement = el), onInput: () => this.onMonthCalendarInput(), value: this.value, min: this.min, max: this.max }));
     }
     render() {
-        return (h("gux-popup", { key: '3f81f5224264d20329762cafe03e04d03a396e6b', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '858eebab7d651baffabf72918a0f95cc0c6544ae', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-month-picker-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.js

@@ -342,7 +342,7 @@ export class GuxPhoneInput {
         return (h("div", { slot: "popup", class: "gux-listbox-container" }, h("gux-listbox", { "aria-label": this.i18n('regionDropdown'), value: this.region ? this.region.alpha2Code : '' }, this.regionOptions)));
     }
     render() {
-        return (h("gux-popup", { key: '125397fe2bf46c465bd2482a2230b29ddf2c75e9', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '7e2dc1b8626e2f1a2afabc128d44fa7e6858679c', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-phone-input-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-screen-reader/gux-screen-reader.js

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: 'fc84dd113fa4434ac8d0aebded7c13531209d434', class: "gux-sr-only" }, h("slot", { key: '9f2f069f753cc6fef7d6c175faad408d262d7f90' })));
+        return (h("span", { key: 'ccea34e243df9c03383d4d1a48e66829e6ac7869', class: "gux-sr-only" }, h("slot", { key: 'ddcbe8ed254a028c3c883ba51e7c373879d35e01' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.js

@@ -45,18 +45,18 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '77708c4c0ab968593cd388525a7d8379805712f2', class: {
+        return (h("div", { key: 'ea6d18d2b2f34e809bde11950d95b3cf41b0111c', class: {
                 'gux-container': true,
                 'gux-start': this.isInStartPosition(this.root),
                 'gux-end': this.isInEndPosition(this.root)
-            } }, h("button", { key: 'd86743ecc03058a961f9bd4e9f378145130c915c', class: {
+            } }, h("button", { key: '6b7a963f730c37cb8ad0ed5174937facfadd944e', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '395726ada7e81251b44176e726e8966ab115b274', class: {
+            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '1dabd619aaa056e2a21b0b003f832669450c6c19', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '7f32eabe5c32346487153ca4c17ecc683e027c54', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'badc4c528a7d9bc2a0069d18a4230110bb8c0b60', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control.js

@@ -30,7 +30,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: '0affcc86e73a4d3a6e1fa9921351fa511529a030', role: "group" }, h("slot", { key: 'a6a8b0398f8dd60a6a941bdfd679a3fef5e120ad', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: '6a0a93cfaaa538b5cd410c0287a88aef10eaca10', role: "group" }, h("slot", { key: '5b110b0b36f8c05798508f3ab237cf0142bf5e6a', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-time/gux-time.js

@@ -38,7 +38,7 @@ export class GuxTime {
         }
     }
     render() {
-        return (h(Host, { key: '7d87b12cba90f865ef02e1c66fd600703c00456e' }, this.renderTime()));
+        return (h(Host, { key: '62fa9fab592fd5184965dff3fefe25cecaa3aeaa' }, this.renderTime()));
     }
     static get is() { return "gux-time-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-time-zone-picker/gux-time-zone-picker.js

@@ -146,9 +146,9 @@ export class GuxTimeZonePickerBeta {
         }
     }
     render() {
-        return (h("gux-dropdown", { key: 'bf907629437b034cfd728a477d0e34b24d4c2a95', class: {
+        return (h("gux-dropdown", { key: '05436d728a0367a9c93e6dd46079aabd9059ce12', class: {
                 'has-defaults': !!this.workspaceDefault || !!this.localDefault
-            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: 'c57d91d7b111d7bf8fbdc246349c48603cd881f1', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.timeZoneOptionElements)));
+            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: '4c3d75531e4d3b5d1d1f4cc406b95e37d7ae0b71', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.timeZoneOptionElements)));
     }
     static get is() { return "gux-time-zone-picker-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -113,10 +113,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '8f97be8dd99fa37f471bb36c2791fdc881d1bb43', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '89da07f79de78c4c9b2d2c26b046632d1989f827', class: {
+        return (h(Host, { key: '83a3b30d2144f854b71bd4b509dc58d504554360', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '8f1e9045521965fe9a9a979b00224c8182fe0fc0', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'f44b0d54a2631d2287aa88b108dd2ce26c89ebe6' }))));
+            }, "data-placement": this.placement }, h("slot", { key: '076ffa4ba3338d0a874b5ae85a364deb431e7e3b' }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-tooltip-beta/gux-tooltip.js

@@ -54,7 +54,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '531ab578e02b4862c94e17c4c9fc22ca8bd33758', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: 'cec38875a0f7a9935dc926de90717ba7f37d68f6', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("slot", { key: '758d0182dff8cc6515b46e6a61b33b527d166b13' }))));
+        return (h(Host, { key: '68219dab51bcd01d964fbc31b08e97e810ae06fd', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: '5fbceb9b87c5fef1c8d2790f02ed632036c62972', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("slot", { key: '74964f4914cfe76784bdc429a796a5b87b298347' }))));
     }
     static get is() { return "gux-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.js

@@ -12,7 +12,7 @@ export class GuxActionToast {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '98f936ebc6d66bda31d23e258d30cb78c19f802c' }, h("div", { key: '4d1a806671fc8b1588b38275437fb4f2a07e261d', class: "gux-header" }, h("div", { key: 'dbfed45e561a438680cde8e11e9ee067da7c839f', class: "gux-icon" }, h("slot", { key: 'b62b320d7b1c0e8133fbf21092c759408955a281', name: "icon" })), h("div", { key: 'de0bcdc2edb8b4dc23005fb9bfb63d79f9e61acd', class: "gux-title" }, h("slot", { key: '8a05d6b9b140aaa562bf4e6503ac99e9676f47d2', name: "title" }))), h("div", { key: '1c1f7052a7f6cf8bde07ba23407b9fb337b43c08', class: "gux-message" }, h("slot", { key: '0655ecb494f33900fdf9d6f7bc120a79c471704f', name: "message" })), h("div", { key: '80a2fcf5d0e42416dde18725610b127f219eeb79', class: "gux-action-buttons" }, h("div", { key: '4db790982f2efe5ba03a680fb7d604b7f2b57af6', class: "gux-positive-button" }, h("slot", { key: 'a2789364141d79fc7c8a636424d65227e21d7070', name: "positive-button" })), h("div", { key: '37278aaeb6eae16773c06ce503f8187ca9e9ef13', class: "gux-negative-button" }, h("slot", { key: 'b4633c703c288803c1860f2a59eb7195a68ff043', name: "negative-button" })))));
+        return (h(Host, { key: '47b2597ede062b8d619e14accf7639ef8f829564' }, h("div", { key: '6f93ee09cae0fbd3a2514ff53bba17461122c7c4', class: "gux-header" }, h("div", { key: 'dc4a76acfceabd11f07fa4a034cbe353550e21e1', class: "gux-icon" }, h("slot", { key: '074f501439a2b7565c830459bfb9d4c488198139', name: "icon" })), h("div", { key: 'ebe347ab51c18661e1cce4914dede92f17298fb3', class: "gux-title" }, h("slot", { key: '6c2e7f297b654435cc8714485217d11f0826dd26', name: "title" }))), h("div", { key: 'df3e4b0cdedbf220d8a0be2633f21afda14fe11c', class: "gux-message" }, h("slot", { key: '88043629c2f7171fa2c33edfdc934403d05af081', name: "message" })), h("div", { key: '4890ceaf36b5c30e47fc799aa98e8594e4c5fa43', class: "gux-action-buttons" }, h("div", { key: 'ad7e3f04565b4ed5ab2a6d6f604fb7681458f992', class: "gux-positive-button" }, h("slot", { key: 'b2e5951c656f4fdb104d5132e11a3a1d24eb9cad', name: "positive-button" })), h("div", { key: '211ba0d6999fcdbdf985d11b37e224261030ee5b', class: "gux-negative-button" }, h("slot", { key: '840839dbe5452950097628d9e5abcfd61600c314', name: "negative-button" })))));
     }
     static get is() { return "gux-action-toast-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js

@@ -58,7 +58,7 @@ export class GuxDropdownOption {
         };
     }
     render() {
-        return (h("div", { key: 'c4bd82294e9c39d9f167bedcc04f1fc4680cb35c', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '79855cf947e5e904c072daff3ab24b5abcd9e3b3', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.js

@@ -70,9 +70,9 @@ export class GuxAdvancedDropdownLegacy {
         }
     }
     render() {
-        return (h("gux-popup", { key: 'bc0eb0a6638af200613198c41caca361a768e0e1', expanded: this.opened, disabled: this.disabled }, h("div", { key: '26e56f5022441ad2475a64ee9cf90007dd578742', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '0eee62a35985bcb96472f52fcc9552336958b618', ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'bda908047b85c020ea324d864b767b7d3bfeedbf', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'b91d222b4557f64d0d7d07558ee1f65ec157d41c', decorative: true, "icon-name": "chevron-small-down" }))), h("div", { key: '7909672257393378482414ff044fc520c1a789f7', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'eda9f8349b512b1190d3a9625e74727bad536997', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '3f3e730d516b526b85bfb0d1faea5fe787e415d1', "label-position": "screenreader" }, h("label", { key: '8b1e4b1de95a462a345285fcece71cb8053fb871', slot: "label" }, this.i18n('searchAria')), h("input", { key: '9b1b3769a0bfbfcefbf9fe151730709c9c22e2f9', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: '5ef657e931686ec569584376e7ca2aae95205049', expanded: this.opened, disabled: this.disabled }, h("div", { key: '0ca27adeee1a90d159b5f23dc1e27fb8558a16df', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '210c4975206e8672d7eb8af085c5174da0a290fe', ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '80ee73ef27f02c8c7fbb379cf911923249e91447', class: "gux-icon-wrapper" }, h("gux-icon", { key: '789071330182c6d55c77fe61e4d39bdf4fd3431d', decorative: true, "icon-name": "chevron-small-down" }))), h("div", { key: 'ee6310dcec867336ada37e630a17e0f837463f37', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '14d31b611446466c50f2efebf1dca0ca5ab77ec1', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '3465eb69ff167aa9034066b44df8b7b769b34f61', "label-position": "screenreader" }, h("label", { key: 'ce1a9bfaadef3747e7e10647749d541bf500192e', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'd5f964e4fba7854318c60c2981a4e7ecdfbcaecb', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '3a947579d4d26b6468100aaff812e0fd35260ec3', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '0fa7322bca985ade12e6d6c572b4d1d7ee16c77a' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: '5e9bd252e07ca4d1bcce6997e315b70074d42b16', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '144ea7dbb8bb411e67e9d5f87ba5e69755b9fe62' }))))));
     }
     updateSelectionState() {
         this.selectionOptions = this.getSelectionOptions();

package/dist/collection/components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.js

@@ -38,10 +38,10 @@ export class GuxDisclosureButtonLegacy {
         this.updateIcon();
     }
     render() {
-        return (h("div", { key: '15b10ad5c1f7946bfccdb7e749d83478d36f3f5f', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '052548f09eebe4441b065dcb2a89badaa02061e9', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel') }, h("gux-icon", { key: 'edf41195a343a13d5d5111e4cc5e13f28e4b1c2c', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '3cde9229f9888e7c8a568ae3bb86520c3be00559', id: this.panelId, class: {
+        return (h("div", { key: '652baa3062ea3dfeefafcfece24140605359eea4', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'd55fe76c03c68c855c1226cd416f10a06a2812ab', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel') }, h("gux-icon", { key: '9aa2ba2d010dfaa397ca0252d596d4af302efe11', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'ff5bb0284dce2b88350709ecdd55f491b8d8c16d', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: 'dd4faafd96de6a8af8605631935b146b5113bd57', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '5ffc186bf0a4e3745421ed5477ccdd27147f1fc4', name: "panel-content" }))));
     }
     static get is() { return "gux-disclosure-button-legacy"; }
     static get encapsulation() { return "shadow"; }

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

@@ -42,10 +42,10 @@ export class GuxModalLegacy {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHTMLId();
-        return (h("div", { key: 'aa0adec444a0aed1a560169125a62a524cce6895', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'ed47eeefefc133fa0e85968733c6567acd906177', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" }))), h("gux-dismiss-button", { key: 'e190fb1a40d174544f2d97fff8d6e01f4e066ace', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '2ffc0af21612aa789dae56d60b6e408c3dd548f4', class: {
+        return (h("div", { key: '4f6aa228da982ec9c989d897d0fe7c1700313bad', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '7f3cd94ba2aef4b4047a693cb3b9475261a5a9ef', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { class: "gux-modal-header", id: titleID }, h("slot", { name: "title" }))), h("gux-dismiss-button", { key: '6b736a5ead8c2fdc8d617e4ffd3a73e8750a629e', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'fd018c98424131ba411a0e1c35cfbaf271c71fce', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'd6bfebc6a1670419d1ca1827b43699d78fa35f71' }, h("slot", { key: '2fa60d1feca4dfc9d3dd5aa5096449387188e2e5', name: "content" }))), hasFooterButtons && (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-left-align-buttons" }, h("slot", { name: "left-align-buttons" })), h("div", { class: "gux-right-align-buttons" }, h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: '6a6934dbee9ed80f99526693beae3b84d11e1974' }, h("slot", { key: 'c802f05c579addf526fb0ae44e003caa954532f7', name: "content" }))), hasFooterButtons && (h("div", { class: "gux-button-footer" }, h("div", { class: "gux-left-align-buttons" }, h("slot", { name: "left-align-buttons" })), h("div", { class: "gux-right-align-buttons" }, h("slot", { name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
     }
     // When trap-focus is enabled, focusing this element
     // will immediately redirect focus back to the dismiss button at the top of the modal.

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.js

@@ -13,7 +13,7 @@ export class GuxNotificationToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: 'd9e217c311a07e034536c06802ea3061667ae772' }, h("div", { key: 'd8b9a982ac129962e9690b746b9d2fb8b8395ad4', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '94624614c49a8968bef56c5e97232455d2485d7c', name: "icon" })), h("div", { key: 'e0227f64ad74182e1f735231d422b1e9023baa29', class: "gux-content" }, h("gux-truncate", { key: '4f467b53e04eba5240d98673bed2455cf25f2ac3', class: "gux-title", "max-lines": 1 }, h("slot", { key: '004890816b7c5abe96dc3dc5376597280d1d0deb', name: "title" })), h("gux-truncate", { key: 'dec4d9504b3ceebe6abb81f8ff1801a4d97b677a', class: "gux-message", "max-lines": 2 }, h("slot", { key: '9cc1f192b3090f934e5840fe89bd489a077d35f4', name: "message" }))), h("gux-dismiss-button", { key: '1a8710ad630cca452a243ad437562893cffe0e71', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '20faa0a33a3f8081c936499c4e6b1e119c7bd987' }, h("div", { key: '959416493e3ce2457b092b425e1cc2885137cd92', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '7b00486c44a46a2803988b33ed56a7023b217a6a', name: "icon" })), h("div", { key: '0dab31caaeb88ec32109e4b4f9ce25607436eee1', class: "gux-content" }, h("gux-truncate", { key: '37a6a5ada174d481df0b6f07fb5165282032ec7a', class: "gux-title", "max-lines": 1 }, h("slot", { key: '88e6e507bec7b2af0208adcbd39a4cb565cca59a', name: "title" })), h("gux-truncate", { key: '26a5a66629cd361b1b5d4845515465bb30fcea39', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'b03dde7b210131c4659c40f74cdb95571520d488', name: "message" }))), h("gux-dismiss-button", { key: 'cd061a1aae2a319e757cc273a2096e5a834b3764', onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons.js

@@ -71,7 +71,7 @@ export class GuxPaginationButtonsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: 'a37445390b137cae3d7ee03bf555a40275f80c3a', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'b6955f6c00efdacc30b111c1ecab4d85a20ea1ae', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'dddf7d4f94e3a83b732c1cf5b6c277c28f72d64a', accent: "ghost" }, h("button", { key: 'bd437d7d110683cc3e52c20733f42eef01269a79', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '72ff2fd5b4a3968cf79293b4e5eb6ca89420e826', decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot", { key: '410170a427c3e25f899dc4c4e113749e676439d6', accent: "ghost" }, h("button", { key: '1ccbeda577ff77a914a7ccab9f41546622d43927', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '14dbd255747a292e8bd4998570b8cc9de27ee886', decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), h("div", { key: '7a75c80173679042b630b7c587491e12a6945740', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '6f1c5a4c50d8028abd41c7c8637ca28434b15a8e', accent: "ghost" }, h("button", { key: '1e0a48e270cab03df0334a8e6633e8ae5386f8de', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '0709556e7fe0840d5c0c67213a38362274d34d59', decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot", { key: 'c8f063aee5097b1f37e0ab31e671f70e23a8697f', accent: "ghost" }, h("button", { key: 'f62e0fe9b8d6a3bb9f653b5b81dfd9cde5ab100e', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'c085148f543bc47b129e3408908b8aeb378b9489', decorative: true, "icon-name": "chevron-double-right" }))))));
+        return (h("div", { key: 'd5ebe9d21e497bffef96ad60a9b294ad3f1f5959', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '7b1c8456a7c02a636f95e3d0c0e9e57f567a93ee', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '33e8479869959b163a457fadb1d01b4240efaa4f', accent: "ghost" }, h("button", { key: 'f690873d17d85566525f0ae454e7def3b3cbe1da', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '6c1adfd5d38099e4dc8c6a43534fe32b4fb17785', decorative: true, "icon-name": "chevron-double-left" }))), h("gux-button-slot", { key: '2e260c6af4d80e650ed586377f17f158831a67ae', accent: "ghost" }, h("button", { key: '357586dd2c48fa8fa5a187b6096139048c20b697', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '215cb8dd44adf155321e20100da68568d37ef1f5', decorative: true, "icon-name": "chevron-small-left" })))), this.getPagePicker(this.layout), h("div", { key: '992b1e5177f9218a50fa8b02ba009c37c5b39a03', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '0d7c2456fbc4a0fb6105cb5feebf390f4aa1706e', accent: "ghost" }, h("button", { key: '2e8857af4cf2d0918c218e2b41b832309267bbc2', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '17bfe316027e004ae9e10f746ab75e5b1e771c77', decorative: true, "icon-name": "chevron-small-right" }))), h("gux-button-slot", { key: '6286278638dd991e04f046f20ce6737711250c42', accent: "ghost" }, h("button", { key: 'c9c26b916fa353b353c1a06e75f65062c6a1113c', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '44d9409edecf3b08e71aee30a202a993a5aa8ee5', decorative: true, "icon-name": "chevron-double-right" }))))));
     }
     static get is() { return "gux-pagination-buttons-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts.js

@@ -23,10 +23,10 @@ export class GuxPaginationItemCountsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: 'eecdfce8f39f06119cdd7ea01be5ba80416b9c88', class: "gux-pagination-item-counts-container" }, h("span", { key: 'afebbdc254921a8b6b6fb791281e528c39688d44', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'b86c180e1dc5890dfb177e8a6f9fc7f691efc3a0', class: "gux-pagination-item-counts-container" }, h("span", { key: '9e7310b7dba66fe80357501eeb916807db8caea0', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '3baa30824242e4817222e39442a765fec5d7faf2' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: 'c64d6bb945a6f0c94ad3204aaf880a684b2b2741' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
     }
     static get is() { return "gux-pagination-item-counts-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page.js

@@ -19,7 +19,7 @@ export class GuxPaginationItemsPerPageLegacy {
             }) }, h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, h("gux-option", { value: "25" }, "25"), h("gux-option", { value: "50" }, "50"), h("gux-option", { value: "75" }, "75"), h("gux-option", { value: "100" }, "100"))));
     }
     render() {
-        return (h("div", { key: '67d17cc759d78b15d823a4abdcc67429f30ea0c5', class: "gux-pagination-items-per-page-container" }, h("div", { key: '231ef3e50bb20fb6bba0d34643c2f855cb393d18', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'a89755356ac02893943d0a300ba9489ea72dec90', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '300c16072737b60fe130464cb6b6d8e3f7d79637', class: "gux-pagination-items-per-page-container" }, h("div", { key: '7089fe269dad1dbdb012f6a11dcf0c039a79e4d7', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'c87aea336d97b81e47946202e737cfb7ede4059d', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {

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

@@ -58,7 +58,7 @@ export class GuxPaginationLegacy {
         this.currentPage = this.calculateCurrentPage();
     }
     render() {
-        return (h("div", { key: '2a2e8ddb9120903a48bf45ac562f89d1dc4a3a22', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '327ab4a9570515f15a133c3544b1e84ebc1e88ef', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '5729b190bdcf636b2bc21014fd4b9ba925c12343', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '130e0f61147a5c8775bf968324e43a1fd02e8078', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: 'ac6df04b3fd86a0dc402e4cb0ec5018a4b8c0d2d', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '82b81ac3bd8f0702b872d0e0c6da034dd53816e2', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
     }
     static get is() { return "gux-pagination-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-simple-toast-legacy/gux-simple-toast.js

@@ -12,7 +12,7 @@ export class GuxSimpleToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: '5f4abff5db2d97a326f0da5f8360c774c1f2a5a7' }, h("div", { key: 'd355b24f097846bc3cdedf86db6cd914366ad793', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '5e17ff057970493e4fa3ab4b9e670e628b13d413', name: "icon" })), h("gux-truncate", { key: '3387b6a1c317697ec271c1895d034b2245bb417e', class: "gux-message", "max-lines": 2 }, h("slot", { key: '5fe9515b654ed86d9f2183a11bf56d68b98271b4', name: "message" })), h("gux-dismiss-button", { key: '8336a43a6b9f42381f69ba1f69518514be42eab2', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '6aca3dca0f8c7e0be7a8b6defa69a81d16939fa4' }, h("div", { key: 'f43cb3dbac6cb1da498af192bb133179d34d94d4', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '510a7ab6577955ae4633c73468e5e78c1450d608', name: "icon" })), h("gux-truncate", { key: '4fb31d95b4881ad16a9718f3edd582288763a8b4', class: "gux-message", "max-lines": 2 }, h("slot", { key: '2fb4ba71d983148ef60cb4154d98ba961b48aa90', name: "message" })), h("gux-dismiss-button", { key: 'ec016e1c9b84d19bde8e03fa6ae4a3a6f5cca128', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

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: '9477760111cde092778f6a0ed990d61b271896d8', class: { 'gux-selected': this.selected } }, h("button", { key: 'ac3675451703016d360a5a797cb0e9949c598786', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '8501fa4a7f55e711ff18f43f0791d2e9d6fbb2f6' }))));
+        return (h(Host, { key: '0c6796d7900526ef7fb54a4667806a73981c748c', class: { 'gux-selected': this.selected } }, h("button", { key: '708dd57a13c5049f37a56bb2c37a4f6d45f7989e', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '75836a1a690f993732a8c68c0e50c6bd9cc9fc99' }))));
     }
     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: '432610cf0c9c117bf41bbdebeaf7577a7ff8c9d7', role: "group", class: `gux-${this.layout}` }, h("slot", { key: '97fbe60c6782cebf617c0609ba002c1a3de23f8d', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'c10ef991e1f4ded371bfa0be043911115b8cf2d8', role: "group", class: `gux-${this.layout}` }, h("slot", { key: 'e0ab07ec896af9f114887420d74ca216aec741a1', 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: '92264be5e193b74b3de87f892b976d2f351d449c', class: { 'gux-disabled': this.disabled } }, h("div", { key: '6d14a32c3c83b514a7a3599d64491ae6fe9dd21e', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'f9b97cc810abe5f5b5a5d43661171934798acf7a', class: {
+        return (h("section", { key: '003d34ef4da6a07380219fb19a00607c561c4000', class: { 'gux-disabled': this.disabled } }, h("div", { key: '6c548967f4c455fad8d815b59fa44498248a68fd', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '2c23feec7bd009eb1a2331ef48e0c73248dbc0d8', 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", { name: "icon" }), h("div", { key: '0d4d33ec66ec642f40dbb7c0a6e331b9d923ee5b', class: {
+            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { name: "icon" }), h("div", { key: 'ca04f1e14f41a7e54474be05bd73f2f88ac4c0aa', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: '47883aeae83fff06ec1c890e7d3d4348b89fe0a3', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: 'ade57783ff2afc9a188deaba32abe0e6ecb31ae4', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: 'fe4409168facdbdcfc61726102ae1f43ce13db02', class: {
+            } }, h("slot", { key: '8336ef2c6d280c44f333f7d83f4035445f4d0ac5', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: 'ab492a1fc9665d6a6dbf48804165855a76edb368', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '9ee51f7b7fa7061526cad863fd435fbfaec3cf37', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: '09091f0c315706404cfd8a959371662e17eabbd9', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: 'f655c10c51003150ea11ea84755ae05107dff7a6', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: '9bc04db8ed98fc6002ad41864fd4369dc08c7d8d', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: 'fec04f2961b7b0fd479621b01dc088eb353dbc4f', 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: 'dc87058e4e3c82046b991e2e2fc60b1a702a2479', name: "content" }))));
+            } }, h("slot", { key: 'ad8eef37b3a116ed86207c7a057754e1468daf9a', 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: '96018fb91ec77ec0b79418a048a9614b0145116b' }));
+        return (h("slot", { key: '04be6bd82e3683eaeee034922e20fdfd6ba7ae34' }));
     }
     static get is() { return "gux-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -115,7 +115,7 @@ export class GuxActionButton {
         this.i18n = await buildI18nForComponent(this.root, defaultResources);
     }
     render() {
-        return (h("div", { key: '9748abc6995a7551aa26e38548ae5a9ef83bffcf', class: "gux-action-button-container" }, h("gux-popup", { key: '659b180ab2c899a4e4b5b82aa65542bc782471d0', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: 'ec575c840159cf5a532baf8c9f7b3489257b3821', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: '5871d8540ab982b11c698bc14d4ccec71056cdfe', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'e14e3baa6efef5535daa585bea24ef8323a44b55', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '0f3ce58b34e7ed0eafb2e4ba787beb0b57b49013', name: "title" }))), h("gux-button-slot", { key: '83c7cfa4ed1d87bbae2e5ff18169457fc81d3eb4', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '8e5d356f2decf0bf8a6e945bc96f113555be42f3', 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: 'af2b20703e1fe7149d581266df8320025d0a79e3', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: '1934b4d97d37a67990d00c08937834281080a842', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '0b1116a65ad28dae66fb5c763e860d4527ec43d8', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '42dea4f6aca99e897ceb16eb358b42f3f5a3e4ef' }))))));
+        return (h("div", { key: '6144ff3ed47535253a8fb70990d27868a1b662b1', class: "gux-action-button-container" }, h("gux-popup", { key: '4789447bc0a07bd26c65a7ee0e2cc0c7e79c213e', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '2374bf5174fca9582fe5f7db561e9eca9b1e7cf7', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'ecedf7c6b17bf70f95c38ccb37acf2e371560c36', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'aad85acd33ffa2bf7029b599b48a798fec1bb2cc', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '89780a1bcf700cd32aadfdaed2b712e4bf679781', name: "title" }))), h("gux-button-slot", { key: '4487c28aac94fce990c30696cd8ca476515eacaa', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '5d19437c1b96f2a98d6c004ceaac11ccd39dec5e', 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: '8ef0c8d9fb06ee107a7d048fc3390215ef62819c', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: 'b2c0e6e5f46bbffc2c43bdb632e2e914857a3de2', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '5621ed7a4b4fc95bb297d15da46acf9ec4029d73', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'd75bc14dc3bb4c36adbd345357e0c9a7fde90064' }))))));
     }
     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: 'ab36737bb5a016a719a488bee50ddfd5c407be8f', class: {
+        return (h("div", { key: 'a00b343e42ff033eb50c95079aad00ab91ff4be7', 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: 'a12bf60e10de562aa80a0a75c121e6c567a93366', class: "gux-container" }, h("div", { key: 'a492aef601fd0910e2ce72ab69e401af8950dded', class: "gux-image" }, h("slot", { key: 'd6f0b80a509e76db5a17c464e23f897ec7e04f93', name: "image" })), h("div", { key: '94130eefa2f9e58fe29d237024767e0c56d092b4', class: "gux-message" }, h("slot", { key: 'e03800bfed27c79533caba165a2c8ef04e9fce0b', name: "primary-message" })), h("div", { key: 'e2a7df4a04e4d5cb73bb77a07fa411758f3ef752', class: "gux-guidance" }, h("slot", { key: '3c120ef5a1954325b0aae510be07c216cd633b49', name: "additional-guidance" })), this.renderCallToActionSlot()));
+        return (h("div", { key: '6fe6f46651a0eae76c68428ed95f04f1fc9a8af6', class: "gux-container" }, h("div", { key: '30ef153aa9116b0d8625d007b221386ae30d6f81', class: "gux-image" }, h("slot", { key: '37f48d8e0f2b53de07cd196f0d336f017c7b5b24', name: "image" })), h("div", { key: '249cfb016c814d58e1145bf1e8f1a04b88989d67', class: "gux-message" }, h("slot", { key: 'b8d238adf8e1e32ca533f8701333b2f42247a112', name: "primary-message" })), h("div", { key: 'd48f4baf8b1a61356961bfdd8fc4ebddb1c2478c', class: "gux-guidance" }, h("slot", { key: '17b52d610a1a455c2ce02f305d984bcbcba55e2c', 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: '9c695c15e89d4ed3bac5f647fc3c16d791b3c5e2', role: "listitem" }, h("span", { key: 'b2e18c52bf3a29a67f36f28b1f9846c6c1bfef49', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
+        return (h(Host, { key: '21d36436f68da4859fffb671ee028cb00ac411a6', role: "listitem" }, h("span", { key: 'd6708a0b251216e8af6190bdf1cf9a96923a65d5', 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: 'c12c6de3c599c19cafd536375d110a43a99d935d', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '393b605f99ce15dc541674e39be7b24861acd8ac' }, h("slot", { key: 'a1bc6fc7ed337f330d19722a11d5b215db225a4c', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: '91213d574e341b2ca20914e96a91d83665c760a1', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '27f4d7d551b38114101c4cd2746e15d488e4b177' }, h("slot", { key: 'c47d21f9942bb76d00189a99b25ee8b628668670', 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

@@ -18,10 +18,10 @@ export class GuxButton {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("button", { key: '6424eea7e50bcf201d9c56e3f33c9ce164112ffd', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        return (h("button", { key: 'a9f07f606b63a24caf990b7169022aa0262c91cd', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
                 [`gux-${this.accent}`]: true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '4c8bac132c19e6e568d542c663c0c60277c2cd19', onSlotchange: this.slotChanged.bind(this) })));
+            } }, h("slot", { key: '37cd0668963b540bd40e2eab624f16ca1a8e3e4d', onSlotchange: this.slotChanged.bind(this) })));
     }
     stopEventIfDisabled(event) {
         if (this.disabled) {

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: '995bac97d622b8ce190f5eec842bf1b786a8d9e8', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'fe5b17cd7c6e131560f40a42ac56e7d2332b322b', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: 'fbb219ede378578c007451c2cabc0dc983188d59', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: 'a9f9f8f96e226136532de594e0c4ab5041054bb6', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '972ef3236c9e8ff66d360ac7cdf0962c505c1988', name: "title" }), h("gux-icon", { key: '30b1e1707cd83f2c42c6078a00d1cb991f9112ad', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: 'efb5e6e9d53c2ecbab22192ed76c070e1e5d0e7a', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'f8b6e8ad57e97e1c52d54ffc5df558e3a5d76aa9', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '5a9150610ae95be10eaf9c2eb4fe55230f200c9c' })))));
+        return (h("gux-popup", { key: '0f65cfd6eab2d55d46059404ebc6cbf5663ecb31', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: '91e85f4c804e4dfae0239c1cc80046734986f8e2', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '3b5ec36f3d726fd15f1330308d3abcc0c84071b6', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: 'eb772ea23fb679e6c4165fb0c393bf6a78a1d233', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: 'bc545e18784a69800b84f6544ccea312e49451c5', name: "title" }), h("gux-icon", { key: 'c20219167d7bc6167a22631d18ad7e11a7c6e363', decorative: true, "icon-name": "chevron-small-down" })))), h("div", { key: 'bc4e356f581dcb3bd1cceb6614c8731a92e3f61e', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '5c0c6f75829209cf5ccdb6693845608667ea41a6', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '96a7290765b413ee63ed9c59bb65f5ab2602b51a' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }