genesys-spark-components 4.46.0 → 4.48.0

package/dist/collection/components/beta/gux-selector-cards/tests/gux-selector-cards.e2e.js

@@ -0,0 +1,110 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+const axeExclusions = [];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-selector-cards', () => {
+    describe('#render', () => {
+        [
+            `<gux-selector-cards-beta></gux-selector-cards-beta>`,
+            `
+      <gux-selector-cards-beta>
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example1" disabled />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>
+      `
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-selector-cards-beta');
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+            it(`should be accessible (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+    it('switches between states when clicked', async () => {
+        const page = await newSparkE2EPage({
+            html: `<gux-selector-cards-beta>
+          <gux-selector-card-beta variant="simple" id="one">
+            <label slot="label" for="first">First</label>
+            <input slot="input" id="first" type="radio" name="example1" />
+            <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+          </gux-selector-card-beta>
+
+          <gux-selector-card-beta variant="simple" id="two">
+            <label slot="label" for="second">Second</label>
+            <input slot="input" id="second" type="radio" name="example1" />
+            <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+          </gux-selector-card-beta>
+
+          <gux-selector-card-beta variant="simple" id="three">
+            <label slot="label" for="third">Third</label>
+            <input slot="input" id="third" type="radio" name="example1" disabled />
+            <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+          </gux-selector-card-beta>
+        </gux-selector-cards-beta>
+      `
+        });
+        const firstElement = await page.find('#one');
+        const firstInput = await firstElement.find('input');
+        const secondElement = await page.find('#two');
+        const secondInput = await secondElement.find('input');
+        const thirdElement = await page.find('#three');
+        const thirdInput = await thirdElement.find('input');
+        await a11yCheck(page, axeExclusions, 'Before checking radio');
+        await firstElement.click();
+        await page.waitForChanges();
+        expect(await firstInput.getProperty('checked')).toBe(true);
+        expect(await secondInput.getProperty('checked')).toBe(false);
+        await a11yCheck(page, axeExclusions, 'After checking radio');
+        await secondElement.click();
+        await page.waitForChanges();
+        expect(await firstInput.getProperty('checked')).toBe(false);
+        expect(await secondInput.getProperty('checked')).toBe(true);
+        await firstElement.click();
+        await page.waitForChanges();
+        expect(await firstInput.getProperty('checked')).toBe(true);
+        expect(await secondInput.getProperty('checked')).toBe(false);
+        await thirdElement.click();
+        await page.waitForChanges();
+        expect(await firstInput.getProperty('checked')).toBe(true);
+        expect(await thirdInput.getProperty('checked')).toBe(false);
+    });
+});

package/dist/collection/components/beta/gux-selector-cards/tests/gux-selector-cards.spec.js

@@ -0,0 +1,85 @@
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxSelectorCards } from "../gux-selector-cards";
+const components = [GuxSelectorCards];
+const language = 'en';
+describe('gux-selector-cards', () => {
+    it('should build', async () => {
+        const html = `<gux-selector-cards-beta>
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example1" disabled />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>
+      `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxSelectorCards);
+    });
+    describe('#render', () => {
+        [
+            `<gux-selector-cards-beta></gux-selector-cards-beta>`,
+            `
+      <gux-selector-cards-beta>
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="first">First</label>
+          <input slot="input" id="first" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="second">Second</label>
+          <input slot="input" id="second" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="third">Third</label>
+          <input slot="input" id="third" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fourth">Fourth</label>
+          <input slot="input" id="fourth" type="radio" name="example1" disabled />
+          <gux-icon slot="icon" icon-name="fa/bell-regular" decorative />
+        </gux-selector-card-beta>
+
+        <gux-selector-card-beta variant="simple">
+          <label slot="label" for="fifth">Fifth</label>
+          <input slot="input" id="fifth" type="radio" name="example1" />
+          <gux-icon slot="icon" icon-name="fa/play-regular" decorative />
+        </gux-selector-card-beta>
+      </gux-selector-cards-beta>
+      `
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

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

@@ -38,7 +38,7 @@ export class GuxTime {
         }
     }
     render() {
-        return (h(Host, { key: 'e02228b0778cc8c9ae564c4407690740e6581b64' }, this.renderTime()));
+        return (h(Host, { key: '3f0319de47530af60f8d9cd86efae0ebb1d432d5' }, 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: '3a97926741542d5c45f734018c2eaeff440dac1d', class: {
+        return (h("gux-dropdown", { key: 'ce2c11489b3e4acc77a8dc4b1409cec5895a84a0', 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: '8db52a566c85f727a841d8a4ec819683d4750ac5', "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: '13010a16bba1b2ebe1b34608862e240b66f4189e', "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: 'e3f73556d0fbfbaf42abbeddd09bd790facd4cae', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: 'f5bae74b118e22295c6a66d796b0831af8ca1d8f', class: {
+        return (h(Host, { key: 'f6298be4ffd385ec391e3ebea8a605b1b77ce6da', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '8626112e9b077cdb6f5baf8a1ff6db2260eb2c85', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'c2858afae7a970bf8c90d849aaab535352db4d1d', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'c81057992d4bb9bc5a767b6bbe2222b6f4855a27', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -52,7 +52,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'e37706f7494844454e547383c69ecc58fe81c997', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: '1d99569901a3b7fe6c8b612d49a632fc38695667', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: 'bc5a2a944197aeec1ee29013ea1664fd8a8f1b30', slot: "content" }, h("slot", { key: '643832103a54cf3d23cc624bb702239bd081816f', name: "content" }, h("slot", { key: 'e5ca8fd9e3396a0d15a7008f11b8f3760fcb68c0' }))))));
+        return (h(Host, { key: '023c5a774415ada51376c5f15302883b731bf123', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: '7a3740c4718ec7fc068e7d0adde526b77e65cdfe', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: '2ef024784bc0440e0999e2c40a70ddf22b9a4b62', slot: "content" }, h("slot", { key: '49daea811a2a68ae2d2e75301aa6bbe0f9575b38', name: "content" }, h("slot", { key: '1d223215d0437e4568c3388b8b69bfafeae84cab' }))))));
     }
     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: '5c1743191660eec47a1a45cdd20b655f6792e48c' }, h("div", { key: '2f9d498cd29afa939934151c81ca482da3f53534', class: "gux-header" }, h("div", { key: '4621e9944d074f0666fd57a21cc5670105f76686', class: "gux-icon" }, h("slot", { key: 'dec82c12996c85e560ce9d16b122ab91bf16efb6', name: "icon" })), h("div", { key: '2ebefa2f55d343f26664f4ea5a4494ca0d00191a', class: "gux-title" }, h("slot", { key: 'fa6e57cb27ef8420482407fbfe8ec8154e116a80', name: "title" }))), h("div", { key: '73a6c0b9959d6f17edf47fe92779f35cbcda7c6d', class: "gux-message" }, h("slot", { key: '69c8c53a33b6a3da1506833ce4e9d3f477a21fd5', name: "message" })), h("div", { key: '31e4e8c2cc90385b1a66d82dfb2b5b5e1d136550', class: "gux-action-buttons" }, h("div", { key: '42402812ed2c89c137545838606ccc0e923cc538', class: "gux-positive-button" }, h("slot", { key: 'a92767b9ea78c86ee059f43b5bf71821f135a367', name: "positive-button" })), h("div", { key: '4745bdc92d33d5ac7281b1cd07f2c04ad88575ca', class: "gux-negative-button" }, h("slot", { key: '0f45004072aa53bc125307e3c2df8d11c7e1bc60', name: "negative-button" })))));
+        return (h(Host, { key: '010dd01d365a1ba177cacd74a8c61a9f489df777' }, h("div", { key: '582e2b6b6dc97ac7c556afaeb408482c8e89eb93', class: "gux-header" }, h("div", { key: 'c7afddacb4a8bbd5246bfdefbca8164687a45a95', class: "gux-icon" }, h("slot", { key: 'db6b305fe9b53933063e47d6e5207609e8e23525', name: "icon" })), h("div", { key: 'e24ba835cad0fc60ad654202d5770a1e2169a692', class: "gux-title" }, h("slot", { key: 'a9cce4c0c2fcde5430c989edb5aa67f968c57eaf', name: "title" }))), h("div", { key: 'cb6ae2190eb7c73a4dece91bc6b0e4e40f797df6', class: "gux-message" }, h("slot", { key: '8c5feb27d71065d572ee20b9d2eaa03cc6b4eeb7', name: "message" })), h("div", { key: '5200444b6bddcc717619ee332a56f7c93dbc8dd8', class: "gux-action-buttons" }, h("div", { key: '78d4def0b4d74a9eaba696d6976e49f5972f540a', class: "gux-positive-button" }, h("slot", { key: '8d7754c3c6a12359ccffef190fff1a7ff69a2236', name: "positive-button" })), h("div", { key: '807e94ed45811f3c4116acebadd08a61ef733431', class: "gux-negative-button" }, h("slot", { key: '4fa3e73efe2969293711cee259dcceeae2459b1c', 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: 'e8706421766004cf60788ea1a2f0b17d592cdbfb', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '2a75a6c25ba64caa912e2208ab81c18387086529', 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: '46a50e83439ca61be08e8ea965ac563ceaa4e313', expanded: this.opened, disabled: this.disabled }, h("div", { key: '4a93dc8aaeb4111379b6aca5931185ca8dbca6e9', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'f58804e6b6c43729cb0b6468c6617ebd0dc859f2', 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: 'c62b27db34e19dde1e7997a7045d1a2a409348d5', class: "gux-icon-wrapper" }, h("gux-icon", { key: '07b9717af84d6eb054987be7753ece05dff1ee6e', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '7261e54b5d39945977cc43205df01f9621ae358a', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'c3a72721d54487282423927248a175d89c2cfd3d', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '50da3e5222839e95978c3a0202a0b31d4b9a1973', "label-position": "screenreader" }, h("label", { key: 'e103f7e197b909c49844c90b4c58e58db386c0fd', slot: "label" }, this.i18n('searchAria')), h("input", { key: '11135f6722b3cac630b04ec7c218dd2681850f32', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: 'd284dd6ee1f92914c723d7cd71bac814e4b32177', expanded: this.opened, disabled: this.disabled }, h("div", { key: '80af7e31606a8b2e05eb20b1e4ad9eb2199e258d', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'b74b12d405c0f1d81edfb8fc3f4751f4da41aaee', 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: 'a57569e9fa8b31b97b0ffec3689540c985133fb7', class: "gux-icon-wrapper" }, h("gux-icon", { key: '0e8162266864d0a00bda81b597a04d55d3cbb51c', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '30e63ad53ed94ee0c69c5d0cabd8ebbe3d38d975', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'cca2c11c02be6b9eb924133b45d117592e0167e3', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'b873a7722181f5be555007cc4ee15fbb5f5156e7', "label-position": "screenreader" }, h("label", { key: '55eab47f22eafec9bd5dd30c48cc1fdae9220588', slot: "label" }, this.i18n('searchAria')), h("input", { key: '3db356240af22dd328cd8a86136c22dd8a6ec7c3', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: 'ed0604883c785068c6b8559dd118b9406c2d0e14', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'a93e89fdf62114fba1442060bcd8b5413ec87322' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: '9173dbd464c259ee2698f2f4fa9037dc028664ef', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '4ac67e545a2fcfeec7aa3306f8b5f8c9f0acf161' }))))));
     }
     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: '9b9903ca0dfd1e3fbeabc1b9b9607a9c094009bc', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '5a6829c262527a1b5ae536a889cab088dc9a344d', 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: '9d75de34b455fadaf60c34f18a86aa089bd719ff', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'f5232a707d127b6a530798e38d6d0585b1a07d3d', id: this.panelId, class: {
+        return (h("div", { key: '54ab6c91d837b2c2f2df842a273bb9d40a46fe98', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '3e1404ce2354beaf184cf6c73982160e731dbdd5', 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: 'cb2206edc79bb2bbab81c7ddfa6b1e66b5a8683b', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'b65b1bd3edebdf429ce557118c2fb1153ad35fc6', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '66368dc382c4792f9b424013a06a95b6a6b148ca', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: 'f49c0101d8e9099e776784cf8f2a8fa9899a57d1', 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: 'c980adab186293713c0fdb71eb6f3782d4f167c5', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '861621bcc869e69aa125d9e8b8019541334ec286', 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: '4a90406ef2acc256d5c2717be2aa681eba450411', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '8c8ac66b8d1547a9bed135a075bcec9bba770b8b', class: {
+        return (h("div", { key: 'd91d95351455ee8293ed7318c3ab1d242bb8f29a', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '6e527ccf06bffea22893f3809ecca0169e5b2aab', 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: '7f3c1ef928d1c568a42a11d0a6f273afae08027d', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '8d82c7322519e836dd359be99ebb1095a2294631', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'dd5f3cbd3e79dca9e230c6abcf7b0e47b86247d0' }, h("slot", { key: 'fe9f430bf61e41a3dec025b5dc5916c15411d652', 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: '007dde1f8b470a4075596daab19b53d28d5e0f26' }, h("slot", { key: 'f03229b360af8b25b8a28132650d03c7ee535034', 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: '212fe6638a0f93771cc1a1da65ad92c71e61a387' }, h("div", { key: '8dd88b2a9d265237a8b7573b3e4f2c983e96de7a', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'd6335d9ed2f06e560dac0c4e1ab0a17337de60bf', name: "icon" })), h("div", { key: 'a1706bdb1a113edb76af850b033269b7235c0409', class: "gux-content" }, h("gux-truncate", { key: '9224fd0177d4c95ed25e0ce51f4d8ec17550fb70', class: "gux-title", "max-lines": 1 }, h("slot", { key: '4a5ebe9877a52f0c4ced14b854a78116740a2103', name: "title" })), h("gux-truncate", { key: '7e14e98d5b0f78293caa91f5b47cc4ba1d08afa2', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'd966e9bef8f463d3d1efebc7cae7c62365cb34db', name: "message" }))), h("gux-dismiss-button", { key: '81f5654ecadf038f7c27c8371bb2a3ffc35b2f7f', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: 'bd8a270f2322145efd47a4a0429ec39441cce3b3' }, h("div", { key: 'f2cee9d8c49bf5de901656079c15d5f8a6883a8e', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '18bd1fb7735bac84d561a47beb6b8a8c521332cc', name: "icon" })), h("div", { key: '025bd08a417a8c08d965229cd67de0f5afc7be30', class: "gux-content" }, h("gux-truncate", { key: '5fced15d7039c95e97c8481baacb9128120af666', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'a34822a4dd2d470f7194a586ea42e60369e638ee', name: "title" })), h("gux-truncate", { key: '48ea7569f8e0124e5a687ac62a08cb0d031880b3', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'aa7fe35de219a0466807364e9c529b83d138f4b3', name: "message" }))), h("gux-dismiss-button", { key: 'af6ee86d9c42f4a132e0c0de6ad61ed4b90e2508', 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: 'fc665cebb91e0af649339eb9f2b099af7db3ebea', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '763ab7099f3f3c6a0e1607c10aeced9ad2b7037d', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'b91d596f29160686eed3ef05dbbc8e6fb4e20b99', accent: "ghost" }, h("button", { key: 'c025a7ae92496838c1e0a2029bd05a3adeddb04e', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '70ba05313e4834c313f9e647e20be310916a76b7', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '115790ca7f9b2194366340bc11ff7496bdaa3a4d', accent: "ghost" }, h("button", { key: '6fe3bb39adb88c1bc5f8b7deb89dc84b444469ca', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '2d9f2e9bae8fecbab892cb720e02a15520631a41', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '792f1d358f524a44d48c046acd326270d936111d', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'c4e3162163bf3f45a713e855d3b359c2bbd2f230', accent: "ghost" }, h("button", { key: '4b1445138385d23b501021127bc20b7101864bbc', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '5cc1d09bc4c9b5683e1f4d1328f75ed21b3a1ed1', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '4dc01f3eb4dea63f8cc7dfee4c7f3979a197bbab', accent: "ghost" }, h("button", { key: '2965bc99d2ebb82c6c3bc4ae416fbbacd6b3b0b0', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '6c338cb19ea9269023cb16231bad1beb336e5f53', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '5099400e7b6401a0f1d2d34c68d29d01dd787009', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '92050aa3026373d37161af47a22774c432ad2d07', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '4d10e5c63772c25bef1ed14b831ce6adf01ddcb6', accent: "ghost" }, h("button", { key: 'f30eb55ec8e90098b6699249e0361373e9177d21', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '66a44d12cf2a5192748947d5b04b80e7ef8b082f', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '71d9d139814069ad6232223586820a4e42def88b', accent: "ghost" }, h("button", { key: '351c4efc0c858671139eb305f0a71d7269f4fafa', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'b3685bff9790c1840466945724369640753e5a46', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: 'b84f0661f6a4ebeeeb7c5c1e6d4901c04cadcdd3', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'b8d28e3ff658d53eaaae613a5df4b53af7aa393b', accent: "ghost" }, h("button", { key: 'b514c5734a270275c8185b359b3959c5c16c55db', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '751de87aecf534a0e4eaced6a481b47c80545d30', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '120a92813c188e4bedab5b2228f5e8b2d5497e37', accent: "ghost" }, h("button", { key: '1bed52c60238a86c333218af72da78e4030e156e', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '1888abc2703b729f982d0ef3706a0163f8cab3df', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
     }
     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: '2c711a994a3b0e96b0caf53a61fff92dfb4b6167', class: "gux-pagination-item-counts-container" }, h("span", { key: '0c67854ddb39a259a52db5a4de3ebf141f7e82e7', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'a66faf176870d6c40fd34d358ac75e0848832289', class: "gux-pagination-item-counts-container" }, h("span", { key: '73c4c7b3d579d557d41386e014b8260a621965f6', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: 'e94b8eed7e75aafe075278c7fb398959cb753e22' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: '5ea057c417a4742a1439f296029275c537122006' }, 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: '6a59e7c7523d8d0e753be1c8d1897826219de3f9', class: "gux-pagination-items-per-page-container" }, h("div", { key: '93d1afb2e9f75ff5652fba5dd3eeef896bdb578b', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '606ac244050351656c134a82dca75d71782e7e54', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '76e365ddf4be6dd9004a6e2ca60c422379770351', class: "gux-pagination-items-per-page-container" }, h("div", { key: '9ba325d9b7f776396c03da65220ec266b34394f9', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '44658ff6c7501152f1d83e297199e47a3efeca1b', 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: '6100b4e228f31f22e362db752978601cdfcbf241', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '04a5b0cff615287f21df23970a8f5d06bedbdf3b', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: 'dc3b2664d62811c14f038b252418e5689ee9ef53', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '1662e94d93c9dd5d4cf4812348e50e9174f440e6', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '4740b42635a41019e7304cec56c8d0c63bef4c5f', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '894d5b7acc7b1cba2634abd91671707c1e31d883', 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: 'd7e33188bee0b69b5fb5e615f2b907bff82ddaa9' }, h("div", { key: '8a54e0820701839decddcbf4dbff4370546d07dc', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '1e2d04751aee37d8a178fb048726c5aa46406e5a', name: "icon" })), h("gux-truncate", { key: '1d8d2a40f3c571080397140a5d5963fff5ad1ab2', class: "gux-message", "max-lines": 2 }, h("slot", { key: '6a63b959050b969b46fa3b33614c200883a0e111', name: "message" })), h("gux-dismiss-button", { key: 'ea0e4c604c2b8b74c9ab346951fb49b135f277b3', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '1941654de15397290e83c7f2bfc57e4e0d11d8e6' }, h("div", { key: '1ac500d4732199ee61203d5f5548532140554745', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'c1753c1fad5dc6769d57bbbb91257b898d261f59', name: "icon" })), h("gux-truncate", { key: 'e6dbd387a25bd1a35eeec7ca0d7579273092522c', class: "gux-message", "max-lines": 2 }, h("slot", { key: '903df673d21b3c792abf031cb68a893a175bbdec', name: "message" })), h("gux-dismiss-button", { key: '461eb8edaa181c44fcd6742d11f146b9c925ffcb', 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: 'e34c92b534f95e323a384113a854342a514c7137', class: { 'gux-selected': this.selected } }, h("button", { key: '5390c31dcc2d292ce913d1775ffe3188444e70d0', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '913133322cf840b54aec694b6d947bf07e715109' }))));
+        return (h(Host, { key: '6b1f87b0d4bc11d737d20bdf804b35371d0e7bc8', class: { 'gux-selected': this.selected } }, h("button", { key: 'ff9d193ededa10fbfe82106eb5c4e06a44442316', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '7b9fb29f2c354ea1153d91fc0a5d647e730676a1' }))));
     }
     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: '01f8e75c851439f9346538cf41f94c53f6ab37fd', role: "group", class: `gux-${this.layout}` }, h("slot", { key: '6055bbb70ed69d4d66e67f66c02e2b773940fd39', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: '2ad55995a30ac69437b04748a1981c9d5f501da7', role: "group", class: `gux-${this.layout}` }, h("slot", { key: 'd20cfb66506b59f97782aa2059fb783ea03f12a0', 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: '8c6f9685bd7698915a836282defda2e37833ba93', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'ccdca5e0f97044fdf969a4e3b13720225f793a5b', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '38d1bc67c26b60077febbe75a78eab0a5ae48d96', class: {
+        return (h("section", { key: '0efcbc307a5f1cc70d25cda2e85d79e3c8be2281', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'cb2253c84e4395d99947442d78142e5f4b1bd66c', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'a7d83b9bd6578c4ebf590c5e41fa9de4b1cd3ad0', 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: 'd94e6eecbf525c7695dad15d33d6677976abc134', 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: 'e8268c6c030d42999150bfefbefa6a9f761309c5', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: '151f98a1eff4f1cc636eb8c6e89b0252e4ab4aec', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '648ac2febd7514997a78ccfce59b346010877008', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '03b4ef739819e4c34783c4b0fa5755e54c39721b', class: {
+            } }, h("slot", { key: 'a6cb3a0e6235df3bb7df697aa9b9649908f1b086', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '80c11fdb91a243d65e5fac0156569b186ecd3d09', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: 'ae4326fc493cb7247b9b76dcde7ba10d181ce2d1', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: '93eb141eb98acd47ac44b23a18e47be4fd418dcc', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '4e582597142f1212bb51fa2f90e57df7c75a364d', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: '8dc40d24d7819d95bf65aef4f493525ac363c665', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '389e93ad7d3e53aaedabc75acf1f8c1db5a8b3f1', 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: 'f04eaff9baaee06239767ec69bc18a53167b3235', name: "content" }))));
+            } }, h("slot", { key: '6aa0500da1620663e307dabcd815ef0055f885e4', 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: '48b045601eba2f979c93c9705b3e80633836e557' }));
+        return (h("slot", { key: '6e4ff96d79f6c28011aaa426b7036642b54940dd' }));
     }
     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: '0f6d77da23dcb7ff52251e06bd89320489b63643', class: "gux-action-button-container" }, h("gux-popup", { key: '4c19d6d5400c83421b347054cf762efca1c9b4a8', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '81e2dc9c30096c7395d99ae197d5ca020da03f05', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'd3789c03cf85f943a03bdfa3fc000782da84783c', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'f757c7aafa58393b932bf5d929f15581cb96402d', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '6615c643aff9f26cf4c9f2e3799cf8eff47e14ce', name: "title" }))), h("gux-button-slot", { key: 'fa2935946984e7fc2b6391fbd8390cf33f1406c2', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '22abf75607fce7b494c813a1ff0e08b75feb1835', 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: 'e68d9eb3c3ef6a997ac281a80461150db4456c99', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'c307f5ac921cc24b5c9e453de393b293d59ca002', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '40425dc1aa0496775569b00744fa1bb56c4a4618', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'bd032ec3fd51896c4e2aca88c151745ce8cf6f9f' }))))));
+        return (h("div", { key: '08972d689a1817cc91172f6533b1fb74530523c9', class: "gux-action-button-container" }, h("gux-popup", { key: '74f6600a74f8e7eea46ce7b775a1e654d8f48d56', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '3da6551dd638aca194f6a2e9ff55d822df943af6', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'ab396c2624339082cb252da8c0e29422ed4762d6', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '8c4592673f8ef879c0e54f96933ec1509e690f60', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '5caedc4257a731942247fd0dae9c1f8d71a58ce8', name: "title" }))), h("gux-button-slot", { key: '4a276d31123ab36d7f19f0422f6879e9f25866eb', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'b1795e7331fe2f9df58182c65054b3cf30fafd89', 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: '7c452639deee781f6a1193644ffbe7d4c18d7bb5', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '1a1aec229e30fa3f4522eaf05afae830709a7379', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'fbac7650566eefe998bbf256bac38a030d871e68', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'c4e6451967674348177232a92c61382f904d3fa5' }))))));
     }
     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: '9f0e1c55d3fa8b0c6c3d657c92709ea1c2961c6b', class: {
+        return (h("div", { key: '16c83387840636e586c8fbbd2c7ad389fb071c6d', 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: '637aded014b0394c568814b90a0297b82a68ac4b', class: "gux-container" }, h("div", { key: '97f4e0aa95b6b89c4e055a4966354027d24b0511', class: "gux-image" }, h("slot", { key: 'e66ff369bbf0129725c4bddce635675e75065dc0', name: "image" })), h("div", { key: 'cfc318e560d6601cebcefd580a57a1f878b30137', class: "gux-message" }, h("slot", { key: 'c4d5a1c7b4a45d79e7cc1d8144e128f074d473dd', name: "primary-message" })), h("div", { key: '57ae8fb3c7d9a7155a48c30a37b2fab999314b86', class: "gux-guidance" }, h("slot", { key: 'f0bdec925e49b9bc5dc3b9f99b671b66c0e660ff', name: "additional-guidance" })), this.renderCallToActionSlot()));
+        return (h("div", { key: '6bfa460f60ad6a1c1026d661736eda71f10656b6', class: "gux-container" }, h("div", { key: '5bcc8b7408a06aa2b0aba633334de1ed37465d40', class: "gux-image" }, h("slot", { key: 'dcf46711bca4126eeaea21fe9c9757db1ddac73f', name: "image" })), h("div", { key: '672f691fe4c5b1894a013286ce274e292d1def49', class: "gux-message" }, h("slot", { key: '8a867df57d8ee1077d0ed3e30879f33e8733a483', name: "primary-message" })), h("div", { key: 'b673273103a133cdca81531b5386fa5145bd94ac', class: "gux-guidance" }, h("slot", { key: '15ce6a77e95a3580ad78f1acec8839aec71422c8', 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: '4b8fc56621824ec303926dc7b6e1e3d8f4f59808', role: "listitem" }, h("span", { key: 'b94f20c57e446df5ae1d12bf74c16ed77f2b55cb', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
+        return (h(Host, { key: '66ee8bce17089c37271db89b445da6c9f2da1a8c', role: "listitem" }, h("span", { key: '55c9ea1b26a57b59bbdc4c3880bba33371f421fe', 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: '50f791acb99fa96bafdc41d348b6b2990960b477', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '107a3afd4d343b399df770f294f0a3e152d79744' }, h("slot", { key: 'd082834e4c0c470041b4a701c769dce48dd217bc', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: '19f69fe1bb775c02fdd4dc4ec8819edad150be55', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '30a6d4e02bfbc74f52f5ddf2915c685403b61b1a' }, h("slot", { key: '3fd24dda38782a59abf35e479504f99c2a48cc3f', 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: 'a158ec6525941e165da26d57851cd424570be10a', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        return (h("button", { key: 'f2fb5ec34c0d0c2106560bcbf721bb65ac207bfc', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
                 [`gux-${this.accent}`]: true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '01227c88db1d73012aac7869c0694d7aa254848c', onSlotchange: this.slotChanged.bind(this) })));
+            } }, h("slot", { key: '1f818f57edc0c88d6474f2da3fb7f9b1acc8b6f2', 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: '794a7ebfd5a48935a0e9fbb438c79c2246fe8a65', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'd6fef8100602f95acebb4e9d32b69de8355fee19', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '9e73416bde64d9ba4d1d633d086b42d654fa31b6', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '7a2bf108afd21c3403d076b0dc14e3c01305ed7a', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '5190c4bba03b92b519e6ba59e4ea81bd156dd01c', name: "title" }), h("gux-icon", { key: '5c442ba520ad9e145479368fbce6a55ee478654a', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'f78f40bd3082b4a896fddfec2eb5ca68c96fc439', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '4f2704fbba837e3293851715abac9f7d1a420322', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '6bc4a2c3023ff6d175b912fb94d01fb08148c9f2' })))));
+        return (h("gux-popup", { key: '3b853dc7cb29ad89defe15cce07c1f76f4d0afbf', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: '085284c347c349953c9b0ffef778afd1da893e45', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '843ee350e5217212ba0e21660458b52a216bbe5d', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '30d5a534ac7ca3f18643978e29a27f898af6f6d5', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '8f39af0a3668b0b2b1a1254b4f6482ec7fdce633', name: "title" }), h("gux-icon", { key: 'b677230f7cbe7f192a5fb1e80bb05a37f7817f57', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'ff0a05768f1eb31d3feb6f9bec3e24b911c76fc4', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '32d8be5e01c1df65e4649c9418a1a09273b52eec', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'fcda52cd7bc4a01c38bda2c7d6d5eae54b855ed3' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class GuxButtonSlot {
         this.validateSlotContent();
     }
     render() {
-        return (h(Host, { key: '49f790f11ca95c490b2cfba8e93f52318606993d', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '77c933f07552edeef2a852904d27c085dc262098' })));
+        return (h(Host, { key: '134965d5b37ddf423d3910f44250ba9442efc00b', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '5c548197de637423a210b42b9a7cdbb8db4e8800' })));
     }
     static get is() { return "gux-button-slot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -322,7 +322,7 @@ export class GuxCalendar {
         return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: '78dcd6c1611b43c00866ab252ca7f3e12fbdd31d', class: "gux-calendar" }, h("div", { key: 'db52b803f9c409dee234f4e57752e190d56a1a3f', class: "gux-header" }, h("button", { key: '498732f8152ef0c17c967a94ba11254c10bf6311', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: '9a40471fc32e25fc7dac510deb78e2cc9d6305c9', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'ec4dd5ef298ade5d0da4bfe8cdbf82530fcbcb92', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: '09a6f80c4b1ec95322e34f243c744eb6a40b680d', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '755b85ebaf4009451415070971babccf641f2997', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: 'b82550835383b3ffd80d13da7510e8e781e7b8d1', class: "gux-calendar" }, h("div", { key: '7c191964ff7d917f0d7a5b67afb08bc92163538c', class: "gux-header" }, h("button", { key: '11860e63df40c1ddc686b90e6b045fb696bfae01', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: '28a93841800e06f17135882eb231c54ae2aebc7f', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '23e16a300ab5a1b8de3178bf88a2b4a6326bdf95', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: '925d29f22112259fe5082d2051546d58aee7c789', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: 'dbc45c6c17eee5770e7c77856c10bd4f35a0b59c', 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"; }