genesys-spark-components 4.43.0 → 4.45.0

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

@@ -0,0 +1,112 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../../utils/tracking/usage";
+import { validateFormIds, getSlottedInput } from "../../../stable/gux-form-field/gux-form-field.service";
+import { calculateInputDisabledState } from "../../../../utils/dom/calculate-input-disabled-state";
+import { onInputDisabledStateChange } from "../../../../utils/dom/on-input-disabled-state-change";
+import { preventBrowserValidationStyling } from "../../../../utils/dom/prevent-browser-validation-styling";
+import { setSlotAriaDescribedby } from "../../../stable/gux-form-field/gux-form-field.service";
+/**
+ * @slot icon - Required slot for icon
+ * @slot input - Required slot for input tag
+ * @slot label - Required slot for label tag
+ * @slot content - Optional slot for additional text content
+ * @slot badge - Optional slot for badge
+ */
+export class GuxSelectorCard {
+    constructor() {
+        this.variant = 'simple';
+        this.disabled = undefined;
+        this.checked = undefined;
+    }
+    componentWillLoad() {
+        this.setInput();
+        trackComponent(this.root, { variant: this.variant });
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+    }
+    setInput() {
+        this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');
+        this.checked = this.input.checked;
+        preventBrowserValidationStyling(this.input);
+        setSlotAriaDescribedby(this.root, this.input, 'content');
+        this.disabled = calculateInputDisabledState(this.input);
+        this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
+            this.disabled = disabled;
+        });
+        validateFormIds(this.root, this.input);
+    }
+    setChecked() {
+        this.input.checked = true;
+        this.checked = true;
+    }
+    renderContent() {
+        if (this.variant === 'simple') {
+            return (h("span", { class: "gux-screenreader" }, h("slot", { name: "content" })));
+        }
+        else {
+            return (h("slot", { name: "content" })); //TODO: COMUI-2784 Descriptive variant
+        }
+    }
+    renderBadge() {
+        if (this.variant === 'descriptive') {
+            return (h("slot", { name: "badge" }));
+        }
+    }
+    render() {
+        return (h(Host, { key: '0cf8c9776678c50c4e4c7c1673c3af887e7ecb97', class: {
+                [`gux-${this.variant}`]: true,
+                'gux-checked': this.checked,
+                'gux-disabled': this.disabled
+            } }, h("div", { key: '216b065ff8df893d657c735bcb68aca1c52b9bda', class: "gux-content", onClick: () => this.setChecked() }, h("div", { key: 'f93c415a955e2bfedfbf7ace4dfc55c84ba94f1a', class: "gux-icon" }, h("slot", { key: 'f3971d7218b1bf8fe68bc75c95a00484a4dfbadb', name: "icon" })), h("gux-truncate", { key: '76a0c1d613a961110a33dac28632f946451f4ba0', "max-lines": 2 }, h("slot", { key: '4f6e47cdee343ec415e8742f1dd6456974a4bc12', name: "label" })), h("slot", { key: 'e0109e3850a4d95e3149be61427fa50a63d0d7de', name: "input" }), this.renderContent(), this.renderBadge())));
+    }
+    static get is() { return "gux-selector-card-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-selector-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-selector-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxSelectorCardVariant",
+                    "resolved": "\"descriptive\" | \"simple\"",
+                    "references": {
+                        "GuxSelectorCardVariant": {
+                            "location": "import",
+                            "path": "./gux-selector-card.types",
+                            "id": "src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.types.ts::GuxSelectorCardVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'simple'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {},
+            "checked": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,60 @@
+import { newSpecPage } from "../../../../../test/specTestUtils";
+import { GuxSelectorCard } from "../gux-selector-card";
+const components = [GuxSelectorCard];
+const language = 'en';
+describe('gux-form-field-radio', () => {
+    describe('#render', () => {
+        [
+            `
+      <gux-selector-card-beta variant="simple">
+        <label slot="label" for="second">Card Label</label>
+        <input
+          slot="input"
+          id="second"
+          type="radio"
+          name="example2"
+          disabled
+          value="card-label"
+        />
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+        <span slot="content" id="existing-id"
+          >A second label for a sample selector card. Used in Spark WCL.</span
+        >
+      </gux-selector-card-beta>
+      `,
+            `
+      <gux-selector-card-beta variant="simple">
+        <label slot="label" for="third">Card Label</label>
+        <input
+          slot="input"
+          id="third"
+          type="radio"
+          name="example3"
+          disabled
+          checked
+          value="card-label"
+        />
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-beta>
+      `,
+            `
+      <gux-selector-card-beta variant="simple">
+        <label slot="label" for="fourth">A longer card label example</label>
+        <input
+          slot="input"
+          id="fourth"
+          type="radio"
+          name="example4"
+          value="card-label"
+        />
+        <gux-icon slot="icon" icon-name="fa/diamond-regular" decorative />
+      </gux-selector-card-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: '620931158299507f78d5b793329c943fc332be06' }, this.renderTime()));
+        return (h(Host, { key: 'e02228b0778cc8c9ae564c4407690740e6581b64' }, 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: '9b8713710cc5013c5ad05dd1696cace4ccdd15af', class: {
+        return (h("gux-dropdown", { key: '3a97926741542d5c45f734018c2eaeff440dac1d', 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: 'fe2481ddeca9ad49e8a454b5849d4683578c727b', "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: '8db52a566c85f727a841d8a4ec819683d4750ac5', "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: 'a4267d7fb5a4e05bcddc3885a7a9ba6bf38b397b', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '6952bf492c1047965f5740b9b786ed4cee953f4a', class: {
+        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: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'dff2b7c036a4ee9b15e8d1f79145730bd1728913', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'c2858afae7a970bf8c90d849aaab535352db4d1d', 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: '68846626d16403910966c6f41a4cb3896b7e5352', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: 'eab8905c475b8055b61deb782b4a0a39261b54e1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: '5dcbf0ff4b163f5c91e3735d90116953d33f2e68', slot: "content" }, h("slot", { key: '86782535eb29ab328447b3e3c49a6d5dbf7bd965', name: "content" }, h("slot", { key: 'c0784076b2f4cbdc72aa4bff05d8a07a95deb546' }))))));
+        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' }))))));
     }
     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: 'a174566ba055ee1a9d9b78e763b6b06e9969a60a' }, h("div", { key: '5ada262f36fcab588d06a954fde2f8926b66a901', class: "gux-header" }, h("div", { key: '56ae7f1ed180599a5655d2bfd7e1e42a2843e7c0', class: "gux-icon" }, h("slot", { key: '2ad150eeada92c501898487ce4d320b717799560', name: "icon" })), h("div", { key: '1c3f335b0ec042a17115d5ceb379b73caf1bc9d8', class: "gux-title" }, h("slot", { key: 'adad891b1b70a7ac1f056ecb52cc5957ff735f53', name: "title" }))), h("div", { key: '479c3623cc2fc2d5a914d72e3d2a3d511f01149b', class: "gux-message" }, h("slot", { key: '6fcb16bcb4fb5dbd81473f038864274dde5d08ce', name: "message" })), h("div", { key: '1f58facaef96c00990cd631e5fa5b0393eec7548', class: "gux-action-buttons" }, h("div", { key: '8c4e4243c52aab3ad65fdef3c825c82b83934c07', class: "gux-positive-button" }, h("slot", { key: '1275ad8ad9e1aeccd04f824d7fe49c67adcfa749', name: "positive-button" })), h("div", { key: '0301dc845039a65671c414b6ce3083967f24c98c', class: "gux-negative-button" }, h("slot", { key: '1c7737948eb6645a473158cb2175e23fb1ea4d16', name: "negative-button" })))));
+        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" })))));
     }
     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: '849ebec1b1404f17630ea5fca72cc2e184583637', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: 'e8706421766004cf60788ea1a2f0b17d592cdbfb', 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: 'ebd4f80bdc5b4010fa38df65e77bcc83e771ec74', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'f23de82717f35dd1fe896b331d26fbdd4684715c', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'a5d8d4f0e3706aeacd54ee73a0b2628ab8d461cc', 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: '678be795ac5af43a664db24a58c29ac01a74f0a6', class: "gux-icon-wrapper" }, h("gux-icon", { key: '7a0f753ba2ab10fd8883868adf71faba8787ba7c', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '3b44526d1b40a27b94cf1ac7b3db5bca29e4e0cb', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '73865be8190b15cd6f639ae091a25091e8006f0c', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'bcd91e6e7ca8f6527f4e9a339a781afbaf2380e4', "label-position": "screenreader" }, h("label", { key: '00423477e81ac66edf6d24f0db48eb78a19d7bf6', slot: "label" }, this.i18n('searchAria')), h("input", { key: '56382221fcca40269eb017f2b9f6de60177ccec1', slot: "input", type: "search", onInput: (event) => {
+        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) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '967b16c6a02111a1437c572421a3da2f9762a564', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'e36239c8fed1853539fa8b1942dc8518bf8bc199' }))))));
+            }, 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' }))))));
     }
     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: '2a1d7b0588e7ff029f87e765808b3a701b170aa5', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '583e0a88f3a14882dd4399ac9c534fb2a8be3b28', 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: '4d699da2c5798be7633d946c251c4c75d583b405', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'f2d493e7dc165d26b0e86bf5694a99a4fbe5165b', id: this.panelId, class: {
+        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: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '849c4e45698715568d3f08bc5bdaf8ed6d5732aa', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '66368dc382c4792f9b424013a06a95b6a6b148ca', 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: 'b4d794e9ca48d02f971b9021444102fb050b09a3', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '36c9c138eea049529baa001a43027630b5b5822d', 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: '29a8c5718c8645337d912aade0006a0705f9eac4', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '540e1b08dd6f0bc473c397cbd372cdbfac6e3705', class: {
+        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: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: '67ad5e765c02b06a62bd3c0342a5bda314bc1ca6' }, h("slot", { key: 'df01a76583c1e815d47fa599254726a4f3b7ec9d', 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: '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())));
     }
     // 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: 'd7a803979fb4928426771dc56f5b391ed104be1b' }, h("div", { key: 'dfb95927b087dc9072a27ff61295167e930fb2ba', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '060bdf80b7ef76e0806a4b7edd78d9e88c8731e2', name: "icon" })), h("div", { key: '98343cfe55e081b3ac659fd4cad0a39018db7aa0', class: "gux-content" }, h("gux-truncate", { key: 'f8580c9c7d1267122d27d08c896397b7a2db6bd9', class: "gux-title", "max-lines": 1 }, h("slot", { key: '53d5b7655343c330d98d5a96b03571e3edf73b83', name: "title" })), h("gux-truncate", { key: '9eb6e29cce6cc5d950decac114acf50db88cbafb', class: "gux-message", "max-lines": 2 }, h("slot", { key: '5b9e99ba08073b781d616024f8d3294483c02da1', name: "message" }))), h("gux-dismiss-button", { key: 'eb2ee932ad1911a7349526d0d5374d2eb2b14c71', onClick: this.onDismissClickHandler.bind(this) })));
+        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) })));
     }
     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: 'ed134f1cf5751572cda7d79e5c572f9a6d42320a', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'ca98777587f3a5906add06ec1a113a4fe47d274c', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '3fc27c8b14cea8acddb2248e03854b41caf48662', accent: "ghost" }, h("button", { key: '7c4f5c44c1f5cf23f2ababaaa79e11254a4aae7e', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'fc31d515f6bbcf235a85e39dba8772bfa31460ba', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'c70f4195599cfcf12c8a303d61fb7f06233356bf', accent: "ghost" }, h("button", { key: '92bf5a49a613b5c1cb909bbf28a56fd3d90b609d', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '6f576c2311d1f28c7ef8a49c9836b522faf5d332', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '0c5b43597369be0a015cfea771a657dd0a19407c', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '5b5728790e6ce6735f28cb4d58b654e1e25e4133', accent: "ghost" }, h("button", { key: '5cb7488a05fcbb884c674b5c3cf4657a2314a1cc', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'c73218621db589541dd5421dd8ec4c9ad751a266', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'dd51d7362f58414f8d66bbfd3598fbb61b5f57da', accent: "ghost" }, h("button", { key: '9843586eb375cb6b3b8fd4a51c47c97f0d57b567', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '4badda0af60bc9e766c057b07b8743250f0d6847', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        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" }))))));
     }
     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: 'dbc67ac8f594f5201ab428f8798aea60133ab83f', class: "gux-pagination-item-counts-container" }, h("span", { key: '719d869de8af001347d1911f938530aff159ec5c', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: '2c711a994a3b0e96b0caf53a61fff92dfb4b6167', class: "gux-pagination-item-counts-container" }, h("span", { key: '0c67854ddb39a259a52db5a4de3ebf141f7e82e7', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '67bcebca12f251a2b52aacec0e649339bc76ad9f' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: 'e94b8eed7e75aafe075278c7fb398959cb753e22' }, 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: '8d3ff776e66f4acbc8da64b82d23918251713d05', class: "gux-pagination-items-per-page-container" }, h("div", { key: 'd19760f221717d18f36d10241a020f6bcb4d9f2e', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'f45143503cde31a00fda0b9c812c6fceb90de599', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        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'))));
     }
     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: '654d8b6445ec7f27e3339a10cd3f74d8224da2c4', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: 'ccbc94f4667addf83eb2b2b1a0e087e811a8dcdd', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '632c3fe1d662df021ad61361d68c7803aba41246', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        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) }))));
     }
     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: 'e3d5a50f9457ac5fe0051315cba067f0fcf55600' }, h("div", { key: 'a787292f250ca8481c72dc464952e3922526f95e', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'e5cb25f9d167e64a7cc1fcf830fa30c970b035d8', name: "icon" })), h("gux-truncate", { key: '0808642ce2e9bcfd5f4a8d1f9c33f00d9af77810', class: "gux-message", "max-lines": 2 }, h("slot", { key: '3afc276b94624fe8bfba201f49c02ac7d1117850', name: "message" })), h("gux-dismiss-button", { key: '5ba90a53f7b73015b0b3caede819bd4d328967c3', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        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) })));
     }
     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: '8ee74fa80afa8fad5f174c2f54fe9de9a164b612', class: { 'gux-selected': this.selected } }, h("button", { key: 'b0674cc0fd5c77da2554ed3aaecad71723a0d0c6', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '8c1ad177f06e1209e91a582f3d3feb793e0257f8' }))));
+        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' }))));
     }
     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: '77fc78ce09692a225ed38bffee0e0fc76aad8dd4', role: "group", class: `gux-${this.layout}` }, h("slot", { key: '90776482a08f73ff646f11b5794148c843913b5f', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: '01f8e75c851439f9346538cf41f94c53f6ab37fd', role: "group", class: `gux-${this.layout}` }, h("slot", { key: '6055bbb70ed69d4d66e67f66c02e2b773940fd39', 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: 'e43843ed0b1d4dc279897e720f408a3e35759e22', class: { 'gux-disabled': this.disabled } }, h("div", { key: '79278fd4c91ef78ad194526e6b36f66ef0b277ea', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '7689f7d1b90ae0d33b7ba96dc700e5b7395e30c5', class: {
+        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: {
                 '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: 'd3ab61eea55160d9f91929a69b89ddaf3536ae9c', 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: 'd94e6eecbf525c7695dad15d33d6677976abc134', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: '3ebdd62963080f97250f01f8bfa4d0efbaac71f2', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '502ea605f332eb2aa341ce5907d66e949ab8bbcc', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '180a027a206f5738e161f4b6e4980a8baa4271a9', class: {
+            } }, 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: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: 'e48bb166b5c7372cf9a2495f9aa370a1a366668f', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '3479f22b7fb24dfdeb41effc9d00acc970d0c226', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, 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: {
                 'gux-content': true,
                 'gux-expanded': this.open,
                 'gux-text-content-layout': this.contentLayout === 'text'
-            } }, h("slot", { key: '732d94ade390d3b5760696c7dfe403fa069bf154', name: "content" }))));
+            } }, h("slot", { key: 'f04eaff9baaee06239767ec69bc18a53167b3235', 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: '43e6a7d1a5825bf06252ac82887d63877806184f' }));
+        return (h("slot", { key: '48b045601eba2f979c93c9705b3e80633836e557' }));
     }
     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: 'a1837c065065e2d7037b19fde9efdd12effa3081', class: "gux-action-button-container" }, h("gux-popup", { key: '4a2497dbd0a73cb176063b312e40f7e39ae525da', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '869db3148b2dfc045af9cb511f9dd26795ec242c', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'd824c17a91f0d006dbf65631d08a39d5e021dfce', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'f6e9ed0cb230d1853ba33bd73843479272437c4d', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '81b1be1de27553e823fc54fa0c91bf85bc34a0a6', name: "title" }))), h("gux-button-slot", { key: 'ec9e576f5253b72b93bbac31b4f4874abe1741e7', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '059f720a1d29ccf902292c5ae47cf5d9e6ed7b1f', 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: '5cd20c37b078a415a38b01d8319dbace42fca903', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'bd6a7fd8e9d3a1ba47ac3e33562803e71ed32730', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '3721879da1e60308ad2adf0c3d008feb0ced62e1', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'df23d68e019dd0adbf5e4f3562bad6cf949e2968' }))))));
+        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' }))))));
     }
     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: 'cda45b02e1f7a3f7cb72d428107cf948da895119', class: {
+        return (h("div", { key: '9f0e1c55d3fa8b0c6c3d657c92709ea1c2961c6b', 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: '71bbbc1b66bbd1541ba74cd2579b4d9ffd94b792', class: "gux-container" }, h("div", { key: '1a2c94bd372ab59509290d513e7f69e54ecacb5a', class: "gux-image" }, h("slot", { key: 'd73c464adbfb5c852eb73790eea67f0b8558b9b0', name: "image" })), h("div", { key: '4a8ef385130d7afd84a8b4651bdd906413e48d44', class: "gux-message" }, h("slot", { key: 'ca854de16902fcb6b9d7236d89804379bab2f2f2', name: "primary-message" })), h("div", { key: '92f99271c721d378bd53dd8988366a9b4627a6ba', class: "gux-guidance" }, h("slot", { key: '7051cbd78bd69a06013e6ffc3cdb22657c3fd246', name: "additional-guidance" })), this.renderCallToActionSlot()));
+        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()));
     }
     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: 'fd2be524d4f7daa30f902ae764764dd255c8f40d', role: "listitem" }, h("span", { key: 'e0aa9e0efed5c62b8c15e176093165918eb4ce82', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
+        return (h(Host, { key: '4b8fc56621824ec303926dc7b6e1e3d8f4f59808', role: "listitem" }, h("span", { key: 'b94f20c57e446df5ae1d12bf74c16ed77f2b55cb', 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: '608e54715a572a810997b4b5f4a603c4ca4964b4', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '0aa2dadede15eae739c52e509ae433acd41da906' }, h("slot", { key: '4db94ec1eee99cf04f25ceb4e62823b116cc924f', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: '50f791acb99fa96bafdc41d348b6b2990960b477', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '107a3afd4d343b399df770f294f0a3e152d79744' }, h("slot", { key: 'd082834e4c0c470041b4a701c769dce48dd217bc', 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: '1b96afabe4c1a626fa72e0103f1aded1ed0f7e9f', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        return (h("button", { key: 'a158ec6525941e165da26d57851cd424570be10a', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
                 [`gux-${this.accent}`]: true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: '6ada1c9f3489543dd61b32ee0728a2b91cef2709', onSlotchange: this.slotChanged.bind(this) })));
+            } }, h("slot", { key: '01227c88db1d73012aac7869c0694d7aa254848c', 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: 'd3416cdcdef104d577b7a1d63ff54d704888dc02', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'b02602ac5e292a705b7d56c8488514131a9e40ad', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '613acbc4e472f489217fe6adbcaf6b9a51519b9f', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '4849033c3bac67dbd99d2161c68bb35ec1acb944', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '9f1e46dcad2241013b95efcb3ae3e51a04767c21', name: "title" }), h("gux-icon", { key: '33e535e641cfc9b131031f231d99f7e573672dbe', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'c3891f3a65036c93198033d93902c15f9342ac44', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '5c3000bcaebb4875054b24b6a0fcb5384e427267', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'c30faaa6927f754b3536c8cc85994a2327aa77db' })))));
+        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' })))));
     }
     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: '2b87c9edc5966c7ec671f4d5c9d40208eef18b5e', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '29bd66b4df4be01fdc718b642b773c7c36b8b5ae' })));
+        return (h(Host, { key: '49f790f11ca95c490b2cfba8e93f52318606993d', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '77c933f07552edeef2a852904d27c085dc262098' })));
     }
     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: 'fdb66f9c9001233c551cc713975fb03bbf7c329c', class: "gux-calendar" }, h("div", { key: '9f7b27d786bff99443cefc719918ef3f0852610a', class: "gux-header" }, h("button", { key: 'c26743ded590131da4dd42deb4db41aa88135c09', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'f3bc9dea97ef2c24fa25c9583404164203f53d80', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'b916098786e80af0ffc8021c5fa0a2f3efd1fecb', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'd71086601c65b90dd8eb7eae49dce3b8f518e5ec', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '266207d49fb850d57ae4b05f99f78431180decb4', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        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)))));
     }
     static get is() { return "gux-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,10 +11,10 @@ export class GuxCard {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: '0d27561ac8006f1cc0f2518522accb8b65e626a1', class: {
+        return (h("div", { key: '85c28fc7e23553e59ceed2d3c6df7a01484ece43', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: '8ff16124b72ec1226b3e472905abeb216aaf7250' })));
+            } }, h("slot", { key: 'c7c49050f468116a6837365543c0d31adc7e42df' })));
     }
     static get is() { return "gux-card"; }
     static get encapsulation() { return "shadow"; }