genesys-spark-components 4.38.0 → 4.40.0

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

@@ -20,11 +20,15 @@ describe('gux-avatar', () => {
                 expect(logWarn).not.toHaveBeenCalled();
             });
         });
-        it(`component with image`, async () => {
-            const html = `<gux-avatar-beta name="John Doe"><img slot="image" alt="John Doe Image" src="https://i.pravatar.cc/300" /></gux-avatar-beta>`;
-            const page = await newSpecPage({ components: [GuxAvatar], html });
-            expect(page.root).toMatchSnapshot();
-            expect(logWarn).not.toHaveBeenCalled();
+        [
+            `<gux-avatar-beta name="John Doe"><img slot="image" alt="John Doe Image" src="https://i.pravatar.cc/300" /></gux-avatar-beta>`,
+            `<gux-avatar-beta name="John Doe" change-photo><img slot="image" alt="John Doe Image" src="https://i.pravatar.cc/300" /></gux-avatar-beta>`
+        ].forEach((html, index) => {
+            it(`component with image type (${index + 1}) for valid markup`, async () => {
+                const page = await newSpecPage({ components: [GuxAvatar], html });
+                expect(page.root).toMatchSnapshot();
+                expect(logWarn).not.toHaveBeenCalled();
+            });
         });
     });
     describe('warnings', () => {
@@ -133,5 +137,6 @@ describe('gux-avatar', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        //TODO: Add tests for change photo once format agreed
     });
 });

package/dist/collection/components/beta/gux-avatar-change-photo/gux-avatar-change-photo.css

@@ -0,0 +1,42 @@
+.gux-change-photo {
+  position: relative;
+  padding: 0;
+  margin: 0;
+  line-height: 0px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 50%;
+}
+.gux-change-photo .gux-change-photo-icon {
+  display: none;
+}
+.gux-change-photo:hover, .gux-change-photo:focus-visible {
+  cursor: pointer;
+}
+.gux-change-photo:hover .gux-change-photo-icon, .gux-change-photo:focus-visible .gux-change-photo-icon {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: var(--gse-semantic-zIndex-showFocus);
+  display: inline-block;
+  color: var(--gse-ui-avatar-hoverModal-foregroundColor);
+  transform: translate(-50%, -50%);
+}
+.gux-change-photo:hover::after, .gux-change-photo:focus-visible::after {
+  position: absolute;
+  top: var(--gse-ui-avatar-large-presenceRing-width);
+  left: var(--gse-ui-avatar-large-presenceRing-width);
+  width: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
+  height: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
+  content: "";
+  background-color: var(--gse-ui-avatar-hoverModal-shroudColor);
+  border: var(--gse-ui-avatar-content-large-border-width) var(--gse-ui-avatar-content-default-border-style) var(--gse-ui-avatar-content-default-border-color);
+  border-radius: 50%;
+  opacity: var(--gse-ui-avatar-hoverModal-opacity);
+  transition: background-color 0.5s ease;
+}
+.gux-change-photo:focus-visible {
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+}

package/dist/collection/components/beta/gux-avatar-change-photo/gux-avatar-change-photo.js

@@ -0,0 +1,55 @@
+import { h } from "@stencil/core";
+import { logWarn } from "../../../utils/error/log-error";
+import { buildI18nForComponent } from "../../../i18n";
+import defaultResources from "./i18n/en.json";
+import { trackComponent } from "../../../utils/tracking/usage";
+/**
+ * @slot avatar - gux-avatar-beta tag
+ */
+export class GuxAvatarChangePhoto {
+    async componentWillLoad() {
+        this.validateSlot();
+        trackComponent(this.root);
+        this.i18n = await buildI18nForComponent(this.root, defaultResources);
+    }
+    validateSlot() {
+        const slottedElement = this.root.querySelector('gux-avatar-beta');
+        if (!slottedElement) {
+            logWarn(this.root, 'Slotted element must be gux-avatar-beta');
+        }
+    }
+    render() {
+        return (h("button", { key: 'c65d1b4a17529e34905b3d92cd09360f051355b6', class: "gux-change-photo", onClick: () => this.guxchangephoto.emit(), "aria-describedby": "gux-change-photo-icon" }, h("gux-icon", { key: 'a238548e311792690e9e80353d6158c1e03d4d01', id: "gux-change-photo-icon", class: "gux-change-photo-icon", "icon-name": "fa/camera-solid", size: "small", screenreaderText: this.i18n('changePhoto') }), h("slot", { key: '6050422d4d3f42fc62d5480912040480d85165e7', name: "avatar" })));
+    }
+    static get is() { return "gux-avatar-change-photo-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-change-photo.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-change-photo.css"]
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxchangephoto",
+                "name": "guxchangephoto",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/beta/gux-avatar-change-photo/tests/gux-avatar-change-photo.e2e.js

@@ -0,0 +1,14 @@
+import { newSparkE2EPage, a11yCheck } from "../../../../test/e2eTestUtils";
+describe('gux-avatar', () => {
+    describe('#render', () => {
+        it(`should log warning for gux-avatar-change-photo without avatar`, async () => {
+            const html = `<gux-avatar-change-photo-beta>
+        <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+      </gux-avatar-change-photo-beta>`;
+            const page = await newSparkE2EPage({ html });
+            const element = await page.find('gux-avatar-change-photo-beta');
+            await a11yCheck(page);
+            expect(element.outerHTML).toMatchSnapshot();
+        });
+    });
+});

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

@@ -0,0 +1,29 @@
+jest.mock('../../../../utils/error/log-error', () => ({
+    __esModule: true,
+    logWarn: jest.fn()
+}));
+import { newSpecPage } from "../../../../test/specTestUtils";
+import { GuxAvatarChangePhoto } from "../gux-avatar-change-photo";
+import { logWarn } from "../../../../utils/error/log-error";
+describe('gux-avatar', () => {
+    describe('#render', () => {
+        it(`component with valid markup`, async () => {
+            const html = `<gux-avatar-change-photo-beta>
+        <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+      </gux-avatar-change-photo-beta>`;
+            const page = await newSpecPage({
+                components: [GuxAvatarChangePhoto],
+                html
+            });
+            expect(page.root).toMatchSnapshot();
+            expect(logWarn).not.toHaveBeenCalled();
+        });
+    });
+    describe('warnings', () => {
+        it(`should log warning for gux-avatar-change-photo without avatar`, async () => {
+            const html = `<gux-avatar-change-photo-beta></gux-avatar-change-photo-beta>`;
+            await newSpecPage({ components: [GuxAvatarChangePhoto], html });
+            expect(logWarn).toHaveBeenCalled();
+        });
+    });
+});

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

@@ -0,0 +1,29 @@
+import { newSparkE2EPage, a11yCheck } from "../../../test/e2eTestUtils";
+describe('gux-avatar', () => {
+    describe('#render', () => {
+        [
+            `<gux-avatar-focusable-beta>
+        <button>
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </button>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <a href="#">
+          <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
+        </a>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <gux-avatar-change-photo-beta>
+          <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+        </gux-avatar-change-photo-beta>
+      </gux-avatar-focusable-beta>`
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                const element = await page.find('gux-avatar-focusable-beta');
+                await a11yCheck(page);
+                expect(element.outerHTML).toMatchSnapshot();
+            });
+        });
+    });
+});

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

@@ -8,7 +8,7 @@ export class GuxAvatarFocusable {
         this.validateSlot();
     }
     validateSlot() {
-        const slottedElement = this.root.querySelector('a, button');
+        const slottedElement = this.root.querySelector('a, button, gux-avatar-change-photo-beta');
         if (slottedElement) {
             this.avatarElement = slottedElement.querySelector('gux-avatar-beta');
             if (!this.avatarElement) {
@@ -16,12 +16,12 @@ export class GuxAvatarFocusable {
             }
         }
         else {
-            logWarn(this.root, 'An anchor tag or button tag must be slotted into gux-avatar-focusable');
+            logWarn(this.root, 'An anchor tag, gux-avatar-change-photo-beta tag or button tag must be slotted into gux-avatar-focusable');
         }
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '243eebb506593c0d40bd92e7933ba5eb7dcc7d1c', "gs-avatar-size": (_b = (_a = this.avatarElement) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 'large' }, h("slot", { key: '6d700bff94c920471a6a9eabfd3349dedbf286ef' })));
+        return (h(Host, { key: '294d7069610101ba31483a12230293a10f9ddb04', "gs-avatar-size": (_b = (_a = this.avatarElement) === null || _a === void 0 ? void 0 : _a.size) !== null && _b !== void 0 ? _b : 'large' }, h("slot", { key: 'd72dac1ad291288f87358f4348430e7a37d9e7c8' })));
     }
     static get is() { return "gux-avatar-focusable-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,6 +17,11 @@ describe('gux-avatar-focusable', () => {
         <a href="#">
           <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
         </a>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <gux-avatar-change-photo-beta>
+          <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+        </gux-avatar-change-photo-beta>
       </gux-avatar-focusable-beta>`
         ].forEach((html, index) => {
             it(`component type (${index + 1}) with valid markup`, async () => {
@@ -45,9 +50,14 @@ describe('gux-avatar-focusable', () => {
         <div>
           <gux-avatar-beta name="Conor Darcy"></gux-avatar-beta>
         </div>
+      </gux-avatar-focusable-beta>`,
+            `<gux-avatar-focusable-beta>
+        <gux-avatar-change-photo-beta>
+          <gux-avatar-beta slot="avatar" name="Conor Darcy"></gux-avatar-beta>
+        </gux-avatar-change-photo-beta>
       </gux-avatar-focusable-beta>`
         ].forEach((html, index) => {
-            it(`should log warning for gux-avatar-focusable without anchor or button tags type (${index + 1})`, async () => {
+            it(`should log warning for gux-avatar-focusable without anchor, gux-change-photo-beta or button tags type (${index + 1})`, async () => {
                 await newSpecPage({ components: [GuxAvatarFocusable], html });
                 expect(logWarn).toHaveBeenCalled();
             });

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

@@ -190,7 +190,7 @@ export class GuxCalendar {
             } }, h("span", { class: "gux-non-sr", "aria-hidden": "true" }, day.date.getDate()), h("span", { class: "gux-sr-only" }, h("gux-date-beta", { datetime: day.date.toISOString(), format: "long" })))))))))));
     }
     render() {
-        return (h("div", { key: '496a34685205e1f6963cd73cdd992e710a9c716f', class: "gux-calendar-beta" }, h("slot", { key: '31c7dbe3170a4a28680dcf57b80b07485baf0bc5' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: 'e2f9a107ee91621f919e080a6c10341ded7389be', class: "gux-calendar-beta" }, h("slot", { key: 'f773c2600908c44ff26b2e89e61e1d9afedf4337' }), this.renderHeader(), this.renderContent()));
     }
     static get is() { return "gux-calendar-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -62,7 +62,7 @@ export class GuxCTAGroup {
         this.validateDismissSlot(this.root.querySelector('[slot=dismiss]'));
     }
     render() {
-        return (h("div", { key: 'b016ee7bdd8aa8f9137b5f005d826908a192c570', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'a90406043d4c7d232de8054a3bd45a3c43b1cdf6', name: "primary" }), h("slot", { key: '6b710696e87676444c61d6337f02077b674cd6f6', name: "secondary" }), h("slot", { key: '5b66c14ef3fa4844c0a361418bd08289b387480c', name: "dismiss" })));
+        return (h("div", { key: '8173069370a108be86e6ece1bb2d9883ff5aa881', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '864f1941fa2a66ff658cdd56d5e0c5082709333b', name: "primary" }), h("slot", { key: '74d7d31bb9f327577ce1f639231a79ce84b759ce', name: "secondary" }), h("slot", { key: '3d97c644a3911d97cdb23469347ac898ac141a08', name: "dismiss" })));
     }
     static get is() { return "gux-cta-group"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

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

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

@@ -20,7 +20,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '1b11ecf35e494fa8302d3810b04d4b100a9bce37', role: "listitem", value: this.value }, h("div", { key: '5fc08521ca860aeeaf42010ce21dcc8ae50da5fd', class: "gux-container" }, h("button", { key: 'e6d138f95ab92cb8e1d55414da9323d7d8aa8f55', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '6cbc61ab3709e030469581f693ac0e57bc800710' })))));
+        return (h(Host, { key: '1318dfd3ecd31ec2d792b7f0aaa04af6e2d2588a', role: "listitem", value: this.value }, h("div", { key: 'ac39e1e4a73a946a4b06392c6d11ec88a3545228', class: "gux-container" }, h("button", { key: '9b1c74b547c78b50ec88e42398f617c3f3b6aeaf', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '35a3642488917660657784d2a38406a88ae6997f' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -38,7 +38,7 @@ export class GuxTime {
         }
     }
     render() {
-        return (h(Host, { key: '594fa8c0284945f1d4050147ad6ea01a007bd711' }, this.renderTime()));
+        return (h(Host, { key: '620931158299507f78d5b793329c943fc332be06' }, 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: '05436d728a0367a9c93e6dd46079aabd9059ce12', class: {
+        return (h("gux-dropdown", { key: '9b8713710cc5013c5ad05dd1696cace4ccdd15af', 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: '4c3d75531e4d3b5d1d1f4cc406b95e37d7ae0b71', "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: 'fe2481ddeca9ad49e8a454b5849d4683578c727b', "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: 'abbcb96d4a8a301908c1ad20df7770a89cbd4077', id: this.tooltipId ? undefined : this.id, role: this.tooltipId ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '17d69f7175afef1eea4af211140af6ff2cd9a4ae', class: {
+        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: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '3eef93b4b81a750e2edb0981871eb2ece4d3df0b', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'dff2b7c036a4ee9b15e8d1f79145730bd1728913', 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: 'c81ca418dde78ddb79559a4ee5e393575a2b7818', id: this.id, role: "tooltip" }, h("gux-tooltip-base-beta", { key: 'cad04556d134af962ed372806aab159689dfcdc2', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: 'b3e16443ffe8e434b2d73600fad227495fbcb01e', slot: "content" }, h("slot", { key: 'e73ac2ffde960015e4e3dd2235a7ab3be935c2ac', name: "content" }, h("slot", { key: '3153ce33ca8c8a48999e29437d1df0d402992abb' }))))));
+        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' }))))));
     }
     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: 'a883201df82ed095d8f4574357860659c77de0a4' }, h("div", { key: 'f8969f402900c487450fd08839f1840c962c210d', class: "gux-header" }, h("div", { key: '25f23f87e75fddd152605c147a07ab3a72921a99', class: "gux-icon" }, h("slot", { key: '568b7b930316116f2d1f3c714936dfe64a71030c', name: "icon" })), h("div", { key: '117c561b75c723a67f9c1a7edec46eae8dd753b9', class: "gux-title" }, h("slot", { key: 'ecd58a9eaa0610a457ccf78789ac5ef9838e51bc', name: "title" }))), h("div", { key: '3fe48963895187a3e30650e8fbba8bc4fdef75aa', class: "gux-message" }, h("slot", { key: '19122ad4a9fb9d97339fc1535acb52927e5f305d', name: "message" })), h("div", { key: 'c9d5c108ea1e03e7ea7697442a0013111b4a8b45', class: "gux-action-buttons" }, h("div", { key: '550222cac63f7276091d615a28a0a07bdb625952', class: "gux-positive-button" }, h("slot", { key: 'd571476a0f87e1ded3183c889381b68827fe9af5', name: "positive-button" })), h("div", { key: 'c9cc6adb9aeada53685b7e70722be9d49d8506e7', class: "gux-negative-button" }, h("slot", { key: '49a77b6df4e82c317ed63d52a8c73f405fc13a6f', name: "negative-button" })))));
+        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" })))));
     }
     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: 'a1aa77e7480ad8fbe82cc98abae5e087b54238dd', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '849ebec1b1404f17630ea5fca72cc2e184583637', 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: '7d6550e43465dcecdaa8560fccaa48703fb3a246', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'f6d162c0806acbe6dbe6214d8267a5f8ceb16814', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '6fc7f49f786923c00586fb3ebe85cda68fa942bc', 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: 'df3caded426e1177383a17232fe733a04f8ac916', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'fb3ac1317ce9b6a2e3c56c07f43c388c5e1f44df', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'b15ee926b5347dfd9b4694bbd452276a022caa7c', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '3ac8f76dbbcead1854d4b829d0513e9cf6d3ce68', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'd9d3bb933ffa817962909056510a6ae86d3b96a0', "label-position": "screenreader" }, h("label", { key: '84e7ba364ec207f75fe9549581980918541af509', slot: "label" }, this.i18n('searchAria')), h("input", { key: '80efc2ee63c0ea5c22f3d311a66d8284861f1a52', slot: "input", type: "search", onInput: (event) => {
+        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) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: 'c654982a8e651c8accf167893241b022f442d7b6', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'b3e0f211fa1b4c5c3cba4cc9ea80d6ed6191289d' }))))));
+            }, 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' }))))));
     }
     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: '14fd6c64658b5c4d17eb1e716aba1420e4513640', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '6ba9bee17e1154c2d066bd7edae5dc1b30311761', 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: 'ab3be81f33ca28bc32cd57ced2dfb6d0f263709d', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'c9a952751e4f3fd6a59479880e64613c922e8df8', id: this.panelId, class: {
+        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: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '9859f5cfb159329913927f75e82f288500b94e8b', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '849c4e45698715568d3f08bc5bdaf8ed6d5732aa', 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: 'bf5aa99c17196583643a091cadc4ac61af4e95d5', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'd13021f74577d221681404037749b2fa11a49f7c', 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: 'cfa6569a483402546a6c02d82eb299532eeda09c', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'ffcb7df17b6096b63cf4c7f7a54a363ea9e3822a', class: {
+        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: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: '8abb233f4af9528d456bcaa50884f426f274c14b' }, h("slot", { key: 'a5a7e272a776c515e6719cd45d6473ebea19b970', 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: '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())));
     }
     // 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: '95f0699e6fa45841e5d1c9cbf93469776739706b' }, h("div", { key: '40f8dc61690012e3d0f9332c259b33229da0b978', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '046d5e3ca767cd3169ac5d467c881f6440c1cf24', name: "icon" })), h("div", { key: '7e92e95c11ee47b97867e79bf2071ff094eb7896', class: "gux-content" }, h("gux-truncate", { key: 'c2f72cd81ce25da5254689c83f80f3c8115de6bb', class: "gux-title", "max-lines": 1 }, h("slot", { key: '70d07f64b0bebb2e3b52e6710862897e702edfdb', name: "title" })), h("gux-truncate", { key: 'e6abb2d9a7ef823549b144590382c426097d9b1f', class: "gux-message", "max-lines": 2 }, h("slot", { key: '2d7941c85956f06d7d039f9b40a0caf8f6f0b6d5', name: "message" }))), h("gux-dismiss-button", { key: 'd994890293510eac8732ca3ee85cbc21c110d434', onClick: this.onDismissClickHandler.bind(this) })));
+        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) })));
     }
     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: '65f5df113fcff5352c78aae19e64e1cf3aa0529d', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '342290ddf38c6ff15c96ceee1bf85856c39d1b33', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'df7a7a8f79872afc4b07bb770b17cbca146ed8ca', accent: "ghost" }, h("button", { key: '405bda85171a8954521414f02705e7be01f8346c', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '3dfd73baa837be11f17f3d0d45a585a0ca452f1b', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'e67927426052f32d965da39820af45b9270d892a', accent: "ghost" }, h("button", { key: 'cfb8c907951c4b62405f4e28cc4f398f8dcc05a9', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '0cb1a31dd49fc9e76687a7e28cbb174b057125ed', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '6e4784214596edb63cda0ac0ed330858fb54f008', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '36b7059810aa24e267dcc812198085f200511c19', accent: "ghost" }, h("button", { key: '537e98861aee0c728e424d6742f45a40f1cca46f', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '889eb57eec2aa4cb844104ef4fe7ddb50c3971b1', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '540f8ea95543eb739d0892671058de5d2cda55bd', accent: "ghost" }, h("button", { key: '82c7157a81af6620feeae30c23a3ecc59c48bb80', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '76dc86d6c2f5f183d6a8fefbeff6e38b95da2fa3', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        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" }))))));
     }
     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: '476ed762cb8b6a4b17cf1c25d358e57ac7e0e086', class: "gux-pagination-item-counts-container" }, h("span", { key: 'dff28dbb1df977ca0064f5ac7ba7bf9f4814b040', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'dbc67ac8f594f5201ab428f8798aea60133ab83f', class: "gux-pagination-item-counts-container" }, h("span", { key: '719d869de8af001347d1911f938530aff159ec5c', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '52d1d6453d903c85ba44aa39dddc2b7a534cfb75' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: '67bcebca12f251a2b52aacec0e649339bc76ad9f' }, 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: '97ddfc030e9feb9a045e82b8273f1bb53eda4d3e', class: "gux-pagination-items-per-page-container" }, h("div", { key: '45852579787a3236094372cbe3f48b1ace391fcd', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '31d162be583a31d2b2c4859ee37f91ff2be8b69a', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        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'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {