genesys-spark-components 4.112.0 → 4.113.0

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.css

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+
+.gux-highlight {
+  inline-size: var(--gse-ui-rte-colorSwatch-width);
+  block-size: var(--gse-ui-rte-colorSwatch-height);
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+.gux-highlight button {
+  all: unset;
+  inline-size: 100%;
+  block-size: 100%;
+  cursor: pointer;
+}
+.gux-highlight button:focus-visible {
+  outline: var(--gse-semantic-focusOutline-sm-borderWidth) solid var(--gse-semantic-border-focus);
+  border-radius: var(--gse-semantic-focusOutline-sm-borderRadius);
+}
+.gux-highlight.gux-orange {
+  background-color: var(--gse-ui-rte-colorSwatch-orange-default);
+}
+.gux-highlight.gux-coral {
+  background-color: var(--gse-ui-rte-colorSwatch-coral-default);
+}
+.gux-highlight.gux-pear {
+  background-color: var(--gse-ui-rte-colorSwatch-pear-default);
+}
+.gux-highlight.gux-raspberry {
+  background-color: var(--gse-ui-rte-colorSwatch-raspberry-default);
+}
+.gux-highlight.gux-mango {
+  background-color: var(--gse-ui-rte-colorSwatch-mango-default);
+}
+.gux-highlight.gux-blue {
+  background-color: var(--gse-ui-rte-colorSwatch-azure-default);
+}
+.gux-highlight.gux-mineral {
+  background-color: var(--gse-ui-rte-colorSwatch-mineral-default);
+}
+.gux-highlight.gux-island {
+  background-color: var(--gse-ui-rte-colorSwatch-island-default);
+}
+.gux-highlight.gux-inherit {
+  color: inherit;
+  background-color: inherit;
+}

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.js

@@ -0,0 +1,134 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../../i18n/index";
+import translationResources from "../../gux-rich-text-editor-action/i18n/en.json";
+import { getClosestElement } from "../../../../../utils/dom/get-closest-element";
+export class GuxRichHighlightListItem {
+    constructor() {
+        this.disabled = false;
+        this.highlight = 'orange';
+        this.value = undefined;
+    }
+    onMouseUp() {
+        this.focusParentList();
+    }
+    onMouseOver() {
+        this.focusParentList();
+    }
+    focusParentList() {
+        const parentList = getClosestElement('gux-rich-text-editor-list', this.root);
+        if (parentList && parentList.shadowRoot.activeElement === null) {
+            this.root.blur();
+            parentList.focus({
+                preventScroll: true
+            });
+        }
+    }
+    async componentWillLoad() {
+        trackComponent(this.root, { variant: this.highlight });
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
+    }
+    renderTooltip() {
+        if (!this.disabled && this.highlight !== 'inherit') {
+            return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n(`${this.highlight}`))));
+        }
+    }
+    render() {
+        return (h("div", { key: 'c30f320ff38c903e13eb69fc493ba73815153579', class: {
+                'gux-highlight': true,
+                [`gux-${this.highlight}`]: true
+            }, role: "listitem" }, h("button", { key: '58ba38a6ba5ca8a9f256e055e7217670e87e7d10', type: "button", "aria-label": this.i18n(`${this.highlight}`), tabIndex: -1, disabled: this.disabled }), this.renderTooltip()));
+    }
+    static get is() { return "gux-rich-highlight-list-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-rich-highlight-list-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-rich-highlight-list-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "highlight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxHighlightColor",
+                    "resolved": "\"blue\" | \"coral\" | \"inherit\" | \"island\" | \"mango\" | \"mineral\" | \"orange\" | \"pear\" | \"raspberry\"",
+                    "references": {
+                        "GuxHighlightColor": {
+                            "location": "import",
+                            "path": "./gux-rich-highlight-list-item.types",
+                            "id": "src/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.types.ts::GuxHighlightColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "highlight",
+                "reflect": false,
+                "defaultValue": "'orange'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "mouseup",
+                "method": "onMouseUp",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseover",
+                "method": "onMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-highlight-list-item/gux-rich-highlight-list-item.types.js

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

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-style-list-item/gux-rich-style-list-item.js

@@ -28,7 +28,7 @@ export class GuxRichStyleListItem {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: 'af744c66eb3866b1cf836f50b80ed6e007aa34ab', role: "listitem" }, h("button", { key: '41f5dadc863d655861ff6518502b78ce05761ff2', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '97b2e06d8f911c647c343ee79cfff9dc01697468' }))));
+        return (h(Host, { key: '4a15b295e8a77a8760dd96c780a34b67a8301d94', role: "listitem" }, h("button", { key: '3c7a10f99083a85d960da1b686ade1c67ddf78e9', type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '7b5cb370a7064593b28952969e50baf59e021bca' }))));
     }
     static get is() { return "gux-rich-style-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-list/gux-rich-text-editor-list.js

@@ -2,9 +2,12 @@ import { Host, h } from "@stencil/core";
 import { trackComponent } from "../../../../utils/tracking/usage";
 import { first, last, next, previous } from "../../../stable/gux-list/gux-list.service";
 /**
- * @slot - collection of gux-rich-style-list-item elements
+ * @slot - collection of gux-rich-style-list-item or gux-rich-highlight-list-item elements.
  */
-const validFocusableItems = ['gux-rich-style-list-item'];
+const validFocusableItems = [
+    'gux-rich-style-list-item',
+    'gux-rich-highlight-list-item'
+];
 export class GuxRichTextEditorList {
     constructor() {
         this.value = undefined;
@@ -21,6 +24,18 @@ export class GuxRichTextEditorList {
         }
         return [];
     }
+    //Set the first gux-rich-highlight-list-item tab-index to 0 so we can tab to the list of colors.
+    handleHighlighItemsNavigation() {
+        if (this.listItemsSlot) {
+            const firstHighlightItem = this.listItemsSlot
+                .assignedElements()
+                .find(el => el.tagName.toLowerCase() === 'gux-rich-highlight-list-item');
+            if (firstHighlightItem) {
+                const buttonElement = firstHighlightItem.shadowRoot.querySelector('button');
+                buttonElement.tabIndex = 0;
+            }
+        }
+    }
     setListItems() {
         this.listItems = this.listItemElements;
         this.internallistitemsupdated.emit();
@@ -28,25 +43,29 @@ export class GuxRichTextEditorList {
     async componentWillLoad() {
         trackComponent(this.root);
         this.setListItems();
+        this.handleHighlighItemsNavigation();
     }
     onKeyDown(event) {
-        switch (event.key) {
-            case 'ArrowUp':
-                event.preventDefault();
-                previous(this.root, validFocusableItems);
-                break;
-            case 'Home':
-                event.preventDefault();
-                first(this.root, validFocusableItems);
-                break;
-            case 'ArrowDown':
-                event.preventDefault();
-                next(this.root, validFocusableItems);
-                break;
-            case 'End':
-                event.preventDefault();
-                last(this.root, validFocusableItems);
-                break;
+        const target = event.target;
+        if (!target) {
+            return;
+        }
+        const keyHandlers = {
+            ArrowUp: () => previous(this.root, validFocusableItems),
+            ArrowDown: () => next(this.root, validFocusableItems),
+            Home: () => first(this.root, validFocusableItems),
+            End: () => last(this.root, validFocusableItems)
+        };
+        if (target.matches('gux-rich-highlight-list-item')) {
+            Object.assign(keyHandlers, {
+                ArrowLeft: () => previous(this.root, validFocusableItems),
+                ArrowRight: () => next(this.root, validFocusableItems)
+            });
+        }
+        const handler = keyHandlers[event.key];
+        if (handler) {
+            event.preventDefault();
+            handler();
         }
     }
     // eslint-disable-next-line @typescript-eslint/require-await
@@ -57,11 +76,8 @@ export class GuxRichTextEditorList {
     async guxFocusLastItem() {
         last(this.root, validFocusableItems);
     }
-    renderFocusTarget() {
-        return (h("span", { tabindex: "-1", "aria-hidden": "true" }));
-    }
     render() {
-        return (h(Host, { key: 'f60bbf326d56d09966e30e65c0214dc768d1eb92', role: "list" }, this.renderFocusTarget(), h("slot", { key: 'd051268767b1dd2699dd853ac73b66d473f03262', onSlotchange: () => this.setListItems() })));
+        return (h(Host, { key: 'a9e2c6054a4069423aab4b7ab97812efe2a3bbd0', role: "list" }, h("slot", { key: '8559c06a39a7094a91fcf4ddf8a61769c58df922', onSlotchange: () => this.setListItems() })));
     }
     static get is() { return "gux-rich-text-editor-list"; }
     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: 'd6e9ea3346748552b842eec3d7372e4858d57600', class: "gux-sr-only" }, h("slot", { key: 'b71530227353d207a91aeb97e04d4134b40dc678' })));
+        return (h("span", { key: 'c0c226cfc59cc8dabfcf12adeb882183b579dae9', class: "gux-sr-only" }, h("slot", { key: 'f3fb06e5682aa51f889fc5b9651dc6198a1b2360' })));
     }
     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

@@ -48,19 +48,19 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '261316a7f87955a042558814115ae6d1cadc4e7e', class: {
+        return (h("div", { key: '4d6b0dfc7a78260ea7a18864aec9cc24a6976aef', class: {
                 'gux-container': true,
                 'gux-parent-disabled': this.hasDisabledParent(),
                 'gux-start': this.isInStartPosition(),
                 'gux-end': this.isInEndPosition()
-            } }, h("button", { key: '494f73e902ddeb6a7b12667ee2694b60a259fb85', class: {
+            } }, h("button", { key: 'a002a787ba83ce7c157849394375f278cf75a688', class: {
                 'gux-segmented-control-item': true,
                 'gux-icon-only': this.iconOnly,
                 'gux-selected': this.selected
-            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '71ed098d70c082a741a3b329ddefe8fedfbe1563', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '29d7dafbb784a7acbb3aa430edd6df86c5b185f8', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'db9e2f956a947dc589b8f42e2a41dc9ba718265e', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'a0ec031b8d638331e30c9a3f6df5bf9525d2e36d', 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

@@ -36,7 +36,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: 'e3b863ec63f3ed141054510a12abc9698276cbf8', role: "group" }, h("slot", { key: 'c1455dc8f4e7d4277cb4dd224c3ab4821f6a9507', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'c57afa576033c08c059035fb3338e9a4049dc699', role: "group" }, h("slot", { key: 'ef8243fc3fef43c3e680f8772d2aeafd1f638896', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,11 +50,11 @@ export class GuxSelectorCard {
         }
     }
     render() {
-        return (h("div", { key: '7c112a83ce91acd72642236e8c5df9245093342d', class: {
+        return (h("div", { key: 'b28ce59bdb9d5150a30f8df1a211b46ee9848a2e', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '69319f5cfd116658933e3ee79588dcec424d9b80', class: "gux-content" }, h("div", { key: '06c02cbb0f7776b5a38c12908c8580b0247a367c', class: "gux-icon" }, h("slot", { key: '554753afc15103a7d0851212e857c98d02863e58', name: "icon" })), h("div", { key: '07ca6c7d3b3ed89bc46cb11e8d02ee4d2e910822', class: "gux-label-container" }, h("slot", { key: 'a1243a3ab078ad5f47de654b12c0ddbaae8fbe6c', name: "label" })), h("slot", { key: '9a0892f589441ea448cb638c1563660837704a0d', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: 'f14e0a4f22356a2a5b1cbfca9f7d249f5a8b5011', class: "gux-content" }, h("div", { key: '6fc4a7a04e1c53033d0902014e56a50b2a7cc1ad', class: "gux-icon" }, h("slot", { key: '1c1551e4058b56057a54816bb1a5377335540e7e', name: "icon" })), h("div", { key: '00277bd34a649eff6331404cd65c8715c3ad2407', class: "gux-label-container" }, h("slot", { key: '8fb89b7d2dfdb37574316cf31605aa2199b70b09', name: "label" })), h("slot", { key: 'd6bc13694aba6883ed8e3240c9c917d5a0a0be4d', name: "input" }), this.renderDescription(), this.renderBadge())));
     }
     static get is() { return "gux-selector-card-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class GuxSelectorCards {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: 'cb736ddeee5adc41842e4299cdd2191af9c6df70', class: "gux-selector-cards" }, h("slot", { key: '15a16a1506809169aba8e8ff22508923ed63e048' })));
+        return (h("div", { key: '69e50b437e17b14b8e0fd5dbd3d3c3167bdb9b70', class: "gux-selector-cards" }, h("slot", { key: 'c8719a29b42c4241f72f67f45ae4c30605976ae4' })));
     }
     static get is() { return "gux-selector-cards-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/components/gux-modal-side-panel/gux-modal-side-panel.js

@@ -46,7 +46,7 @@ export class GuxModalSidePanel {
     }
     render() {
         const titleID = randomHTMLId();
-        return (h("dialog", { key: '7bb27f52f79ed52a97baaf930a9a9467c9affb98', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '86d0ecc779852a37a0e69145b69f82177c40eefb', size: this.size }, h("div", { key: '5cd472996ae6e3069888ccd72a67743affd4e56f', slot: "heading", id: titleID }, h("slot", { key: 'a4e989caefa755daf0d0b217ecb274cf624a171b', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '4495ebc9f3a9a76990daeb405d06ba5da2d6fadd', slot: "description" }, h("slot", { key: 'a3fe0452f074dc9ad770feb37c7ef32148215b22', name: "description" }))), h("div", { key: 'ec0fff76d556258f4662687cea7c5cafdc09b10d', slot: "content" }, h("slot", { key: '57cd1fcdf11cfbdd9c5b819f64bb7b01ffefa022', name: "content" })), h("div", { key: '20e0af2e8adc17917c4db9d4278a51fa91f927ee', slot: "footer" }, h("slot", { key: 'b2d9eeaf2fc23b2d98dc00a2e596addebd87e51a', name: "footer" })))));
+        return (h("dialog", { key: '34c80eaee9baf7ce57e6b2be5fd89110fdcd9c94', ref: el => (this.dialogElement = el), "aria-labelledby": titleID }, h("gux-side-panel-beta", { key: '6600729b45885b675c9e0f616d6a0093682de095', size: this.size }, h("div", { key: '55b1ff1f68212734944d034b97d2a748b1aa601a', slot: "heading", id: titleID }, h("slot", { key: '3f26e81930bd086ae4ed6d4307dd16727f0eddb3', name: "heading" })), hasSlot(this.root, 'description') && (h("div", { key: '5baccca5a3e34e9572e202c2ff8a123b6c8033aa', slot: "description" }, h("slot", { key: '4f80ab3460adc54565a48c06c058ea955b371bcc', name: "description" }))), h("div", { key: '6d5bc823ac3eeaf7ba0973886c6b50d138a00c1f', slot: "content" }, h("slot", { key: '2fec75da7efb18f7e51df706dc34689448beb8db', name: "content" })), h("div", { key: 'ee9fd140e4796e54f06214d49ef823e6af85c0a8', slot: "footer" }, h("slot", { key: '27a2b723f3d2eaf03a3d9620954996caecfe1c2d', name: "footer" })))));
     }
     static get is() { return "gux-modal-side-panel-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/components/gux-side-panel-heading/gux-side-panel-heading.js

@@ -13,7 +13,7 @@ export class GuxSidePanelHeading {
         this.headingTag = `h${this.level}`;
     }
     render() {
-        return (h(this.headingTag, { key: '11afaac2e2d86375ca5fd349e07254c6f707a324' }, this.iconName && (h("gux-icon", { key: 'e78843ec51b91f7d76e55c442cf5241f31b68a0e', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: '8a1b1c2d5c2681670049b3063fb3ced12aafaf6a' }, h("slot", { key: 'cba8f4d6944945444a5a8ac4633fde70d2ebdc99' }))));
+        return (h(this.headingTag, { key: '47d23d1a3be238352e2ae4ff212f64dd60b6feb3' }, this.iconName && (h("gux-icon", { key: '4b642ba678b527d3b5484ff42bc637f013a69d85', decorative: true, size: "medium", "icon-name": this.iconName })), h("gux-truncate", { key: 'e33010961d0b994342eba916d1127b78d2b53d4f' }, h("slot", { key: '8ad7d7fee07aa2853719b0077962280c364c13d1' }))));
     }
     static get is() { return "gux-side-panel-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-side-panel/gux-side-panel.js

@@ -24,10 +24,10 @@ export class GuxSidePanel {
         return null;
     }
     render() {
-        return (h("div", { key: 'fe15fc9684a90b4c4f4b79b72ece6e8e2ab84fcc', class: {
+        return (h("div", { key: '57b407cfe2e84ea6b951e141aebbf530f612e9bf', class: {
                 'gux-side-panel': true,
                 [`gux-side-panel-${this.size}`]: true
-            } }, h("header", { key: 'f2553f09a7fca68c18f777b4d5082785a694b842' }, h("gux-dismiss-button", { key: '7fa2d7e44a1b3bc4542b70d2d9d3d1aa7043edbc', position: "inherit", onClick: this.onDismissHandler.bind(this) }), h("slot", { key: '74b3408d9172e89d5d2ba85a3f23ce3fe2f2326d', name: "heading" })), this.renderDescription(), h("div", { key: '4a0091296ceb436228d3a593724546a019081809', class: "gux-side-panel-content" }, h("slot", { key: '7b3cd27f12bf98de4577975aa694dc281d209aa8', name: "content" })), h("footer", { key: '3be53e263307674af5d377ac0e4527e7e7df3fd1' }, h("slot", { key: 'cf348aa5ca03675861f8067cb1bb007fe9f3888c', name: "footer" }))));
+            } }, h("header", { key: 'd3fcabb1691d927364ccb34d37fd1be467511893' }, h("gux-dismiss-button", { key: '353bb0e5806f0528ca0f67ab3e9d9b864039a61e', position: "inherit", onClick: this.onDismissHandler.bind(this) }), h("slot", { key: 'ab3775392ab44d8ca086d2bdfd2b0d966f6f3628', name: "heading" })), this.renderDescription(), h("div", { key: '50fcbb0c2ba3e786eb378567eb7d81d4f1abacc6', class: "gux-side-panel-content" }, h("slot", { key: 'e74c5df75f1a338a9b677152c4a043c0feaa6a95', name: "content" })), h("footer", { key: '0be81160f37eac32e60a311f1702a853ea1c97bd' }, h("slot", { key: '6e848313a8c01e537eda3726f47ec4c0d5ff5aa1', name: "footer" }))));
     }
     static get is() { return "gux-side-panel-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: '34ebc0241245d1c5cc888a6a2c20e4e85de6786d' }, this.renderTime()));
+        return (h(Host, { key: '9f15bcc087c164b5a1d74c0ed9ffd928757500aa' }, this.renderTime()));
     }
     static get is() { return "gux-time-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class GuxTimeZoneBeta {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'e71634257f5f4bc42538e07c241fba45b0777492' }, this.renderZoneDisplay()));
+        return (h(Host, { key: '17e41884ee83d41db7a2b6436693da9b863835f3' }, this.renderZoneDisplay()));
     }
     static get is() { return "gux-time-zone-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -151,11 +151,11 @@ export class GuxTimeZonePickerBeta {
         return (h("gux-option-group-beta", { label: this.i18n('all') }, this.timeZoneOptionElements));
     }
     render() {
-        return (h("gux-dropdown", { key: '0d973ae9adcd7a8d36efa4892eac9af8fb07ddcb', class: {
+        return (h("gux-dropdown", { key: 'f46178768053d9ff9d951d8a497b6681667ffb7c', class: {
                 'has-defaults': !!this.workspaceDefault ||
                     !!this.localDefault ||
                     !!this.customDefault
-            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: 'cae33a81232f15ee171adef64243944fab543be3', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.renderAllTimeZoneOptionsList())));
+            }, "filter-type": "custom", placeholder: this.i18n('selectZone'), value: this.value, hasError: this.hasError, disabled: this.disabled }, h("gux-listbox", { key: 'ae3a2e30d97f516bbffc032daa104643fb25950b', "aria-label": this.i18n('timeZones') }, this.renderDefaultsList(), this.renderAllTimeZoneOptionsList())));
     }
     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

@@ -123,10 +123,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '62c065bd60d62b704decec06eb9d823de259b07c', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: 'dc87764388446b6e77444f8be7df6f5cae486a75', class: {
+        return (h(Host, { key: '268001423213ce578dffcff3311505f6fb3de012', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '574b792c9ff1668b32fad2fdf9314eb64e1e57ba', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '0cc4f91c9306efe350c2fd3f81136b0fa2801911', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'c3d4cf2c5879e2ab1b845327b31fc274414219f6', 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

@@ -72,7 +72,7 @@ export class GuxTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '488a2c659e021488f77b11698f31266ee0e3f5f0', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '6231a0f5639b93a8b777b3b2aeefc2fe7b6ba9f9', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '2184b68a6f7661938c0d3e7ba46773c772e7f2cb', slot: "content" }, h("slot", { key: '48852df62ef157c666c77260a78a8591c4971429', name: "content" }, h("slot", { key: 'cf747e07aa146e863d09351d8d2cb75e54969ade' }))))));
+        return (h(Host, { key: '30b4306234011996e56e73179df457cab4580097', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '7cd729fe08ae89b339e709f166383591b715683e', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: '4a4f61468ea54050213898d8b29f2ac1f4be4f2f', slot: "content" }, h("slot", { key: 'c593d4f870a671e61de732d8c6467ac4f5036032', name: "content" }, h("slot", { key: 'a0415bb667e0a8e45844f8e9d6edbbed1ad6f78d' }))))));
     }
     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: '90bfe03057d565c01475f40f6830fa4e78fb8edd' }, h("div", { key: '8a61c90eb17eeb1aa7a80b81a85ee50cdfa4e369', class: "gux-header" }, h("div", { key: '28abb07c1593f8fa9740dff66a429e6db222bdba', class: "gux-icon" }, h("slot", { key: '762039ca4d79c9d540371241787e69f50f4bfe47', name: "icon" })), h("div", { key: '37a0bf8cb5b275ddd3a28a9a2f9bf6cb46f321b4', class: "gux-title" }, h("slot", { key: 'db4f2f3e0651a187a3a6c019f58ad629cc179bae', name: "title" }))), h("div", { key: '19cd5965b370e52989340d67addffbf7fa0f53e8', class: "gux-message" }, h("slot", { key: '405f0bc1c21f996e82ce3eff7a518a2a0fd38948', name: "message" })), h("div", { key: '6e89ff3f277d48b0ab5f4d4e1b1f76d92679d201', class: "gux-action-buttons" }, h("div", { key: '79124afea8c7519c31c13c6d0dfe05df00e69e3a', class: "gux-positive-button" }, h("slot", { key: '4c0c618dabb19c79b0f549d503343c33aafa85aa', name: "positive-button" })), h("div", { key: '0928e2474f06947a38528d59eb222bb714113682', class: "gux-negative-button" }, h("slot", { key: '06a83336ada03a9c6c157513dffa31dad12118b1', name: "negative-button" })))));
+        return (h(Host, { key: '54b7d179801377d6fa5dfbad68b1e8f1d2aeac53' }, h("div", { key: '347a1f691e6f57566ef8bdbf67ba3db3842cb804', class: "gux-header" }, h("div", { key: '536ac9803517161d55387934e08a89a07d228bf4', class: "gux-icon" }, h("slot", { key: 'cd7c4935e378075a49b73bb459986ef08a3a1039', name: "icon" })), h("div", { key: '9a8e91296edac6763bab666c4c5a80bcc7be0430', class: "gux-title" }, h("slot", { key: 'f664760f004faf01406b593dffc288e0c8bb7fb2', name: "title" }))), h("div", { key: 'bc048e87370f3151573dac1c45914bc6ed00245f', class: "gux-message" }, h("slot", { key: '7ebeb9eccef844ca86d55ea244c86138d57c4294', name: "message" })), h("div", { key: '95500ab9653068b833cee324ff2a3eac94b7b526', class: "gux-action-buttons" }, h("div", { key: '17da0bcd449d91a1692cadb272daafa161a50181', class: "gux-positive-button" }, h("slot", { key: 'ffe1be21ef77de25d093d7bd033c9f657e434253', name: "positive-button" })), h("div", { key: 'f5b8c51a922fe9ac56097626aa774045b4b5881b', class: "gux-negative-button" }, h("slot", { key: '65c3137c50ece9c9b81c2a05e41ba21f59b536f7', 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: 'd77a7b53da9924593ee1ddaa5c7801a47fac0c9e', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '00d0a6e34a1cc2eda62041edc64ae50644ead58b', 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: '533bcb0921bc6c8116854ef7f9eee347a3ec337e', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'e59abaf4d3efeb25ebba5280e5a0633e3ab7f7c6', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'a56f76e654766ea3071d2fd9aa697eff91ed6a7f', 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", { key: '320ed2ef26d4cbdc26627142ace0a97d18c578f8', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: 'd2f98df84a77fdd43b4be657e686c837c2cfec79', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'dccda7cea1a04bed311f4995f1951a614316f21e', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'cb035d6f22bfb1db408d7a5f02970e61e222edd2', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'adae2d540626b6174c3164c2d5f2562d082cd7e4', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'f8b3b6c68480c5a54ae282d4173fe3686bdc5466', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '3cb3867037ad6b67d0eccb51332bda385b2842ca', "label-position": "screenreader" }, h("label", { key: '17fb8cc28582f809bf8f1f6bac587a00757484b5', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'd9eb1b368db051ae24b20c3984f8bec7b23dc5a4', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: 'f4f70c22bbee2600c7e90abb8b0e91d8500ee0dc', expanded: this.opened, disabled: this.disabled }, h("div", { key: '0d95fba338cb6dcb02d4e81c6f9d87680eba5174', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '15d68741be283df4301b3b2fed5ee4e1c5065361', 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", { key: '21c3a514da4df5fb802e23d2eb3e490dada26ccf', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '6e250d6b0d6f7c80ca7f6535d29cbe4c12ef32e9', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'bc71a1cda21168a948d1edb7bede5e838d75902a', class: "gux-icon-wrapper" }, h("gux-icon", { key: '81f43b931e2556d21ede2c32dd8427f2aa109139', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'df59a76c7ea8b769424a04e794ce3486d47add23', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '3b553f35084b5931abd4bfd1e2b69186d0737ba3', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '4c009d5d6eefa19b0615692a5bca926077f4028a', "label-position": "screenreader" }, h("label", { key: '94d2d1d1bbcd3a8bf6ac08f0f93ece0b0cedadbd', slot: "label" }, this.i18n('searchAria')), h("input", { key: '8fc8203ef22b7516d05f69ca0e8ff125db4f680d', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: 'f7d419de6724d4ef3c4d3b2ff9663c3c87b05533', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'fc393155c2beaff097c9550c14ac1802ec2dee97' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: '16ca535be1a105ee1ae375ed64cf59bbfafd3d95', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '0ef1b9573e68f2de1d67e936c2c33a4729fd950d' }))))));
     }
     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: 'd2671c56388c29936f4ff40f2252f802763e9668', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'f528569e268505494d56e5e37cff812a77098b22', 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: 'a22bc9a434071a0d9eaa3651774b665364cb9442', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '8dbe3570285fc3c6694dc91e0f2d7075e5c15468', id: this.panelId, class: {
+        return (h("div", { key: '12d9ad893e1226b25102bbdd4430452f86459685', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '6c24ca871d720b53cd976e90191f30da78b520d1', 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: 'aa90e57056dbd73625defccb9d9043a8765be18b', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '5d1ee4d76e30bd3f1d501bef468976c28d904453', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '15ad8f9d6353ec1d20024623af53632bd7081850', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '1f1b49bba27c0cf9d7e69a21c6febbb5a869b90d', 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: 'd362cb5bd0426b296f8bd20f8f1b517cc4680818', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '7a6de2c25ed0c52903abd8908fa967f2b5aa5247', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: 'b19c4333aa2faf0b60d4c43c4001f91036d5c26d', class: "gux-modal-header", id: titleID }, h("slot", { key: '8c1272a755a52c170fd5e834da9dada47ef18a0a', name: "title" }))), h("gux-dismiss-button", { key: '5f0c7dfa03830797ea706981e7074f6ccd5369a6', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '30699cd0319b1223270d10b7e9b64773078ccced', class: {
+        return (h("div", { key: 'fac4bdd98541a650b3f450bf489bcb2426785125', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'a7ad8dd77f0dc7d57b3220c50fc2bbed931fe079', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: 'f09d729c1e39234ac7d01e1672681ea5a8af6da7', class: "gux-modal-header", id: titleID }, h("slot", { key: '1f8d6bd0cf8af490480dbd810fd8f0f1177b4437', name: "title" }))), h("gux-dismiss-button", { key: '70800804dc8de2e348aa07da04fd7302d944b56f', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'a317e49686564298ab0501db9fc426e863d27507', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: '1d5181bd7ddad3b3a72c11cf795cfaee6adaad87' }, h("slot", { key: '83da7d98c8b5ee8098f15b1eeba6efa14b0769a8', name: "content" }))), hasFooterButtons && (h("div", { key: 'e90c4ea4d78cfbc921fa772418e798ac1f94a30d', class: "gux-button-footer" }, h("div", { key: '8a237d0b4af98f73655c06b29de49a4e3c4a8d4e', class: "gux-left-align-buttons" }, h("slot", { key: '465e9d836e197503cd4293657b9c7f87f2bd468d', name: "left-align-buttons" })), h("div", { key: '4df489f3d83727d6bceb4a9cad280de3f9b545e0', class: "gux-right-align-buttons" }, h("slot", { key: '684cf8a9b535fb117b0633c11ab69c323a28b277', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: 'cdbbc90cae0d0493eefa751b4aefc58f21e76153' }, h("slot", { key: '893343f260d2661a37f77b16e0bb5aa9e94f1383', name: "content" }))), hasFooterButtons && (h("div", { key: '6ea142fbc0892cab7bda9dda3123485c5ef9e23c', class: "gux-button-footer" }, h("div", { key: '1d67accea5d546f9c9b272ba96f65835912bb8d0', class: "gux-left-align-buttons" }, h("slot", { key: '7c182f7a3e4c3a351fa0354a0c1635643f2fa122', name: "left-align-buttons" })), h("div", { key: '59fc56ba6471dbea69ccccda2c75cb0bbb29336b', class: "gux-right-align-buttons" }, h("slot", { key: '04f2343a7bbc49b73e07e59e2f5860c7e4591984', 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: 'aad68740e6fe176ea7e6ec68b27578930fdc242e' }, h("div", { key: '6ce8e54e5bb04d3b0b4f3a6b4bf3dc55066a9733', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'dabd01caf1ee073884efdb009ea84b823f780178', name: "icon" })), h("div", { key: '7de3b128f6f1cc476819c8e186ef5afb09f86fbd', class: "gux-content" }, h("gux-truncate", { key: '48d6c95111637da6c86777c5bc572f029eb6cbd9', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'dfc596520a2913cc445c6612b5023f7cff16e2b2', name: "title" })), h("gux-truncate", { key: '6a3b58a572da24b91f994fc92ae353300c73488b', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'ffff4c765480aff8c4539aa20f1b2e3056dc8a2c', name: "message" }))), h("gux-dismiss-button", { key: 'd90e65d656ef6f4a696e33646fa95b14c821ea53', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '4b60b5f552987f4d07c4e7bd0e08dcbfc96d669c' }, h("div", { key: 'd58d8f067ed5ee94057f19b4b3cc30fc39b74e76', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'e94bd9fcc694868754cb1ab9573c57f5e718734a', name: "icon" })), h("div", { key: '986586f6df4d407d256475e5ad38ec00120929d1', class: "gux-content" }, h("gux-truncate", { key: 'f816a640100a359626c31debd35a29f3efc07015', class: "gux-title", "max-lines": 1 }, h("slot", { key: '325aaa5c6a78c2d601627a33b04b1856ba420072', name: "title" })), h("gux-truncate", { key: 'd8c952b034064bc37ca561af0601a0c25b643af8', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'a291030dece0b7168eb878de34830b512ec1d300', name: "message" }))), h("gux-dismiss-button", { key: '9fbbcf2c019cc5d178ae3a5b7f1f0a55f5898a96', 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: 'd10ee2507f132111c566aa1d6512158a61476656', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '002178c1aaf470c3d9a118e98f1d49ab44f2c7fa', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'eb6123866755f06c37ae0838da295edf47a80218', accent: "ghost" }, h("button", { key: '518d64a884e9805023fbaf5df36c86edacf05985', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'c33cb5ce83b89fccaca1a9923d0420976052b1cf', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '2f6e8181f46a5389b4514307a4215a6a2cda3c45', accent: "ghost" }, h("button", { key: '0a7a34a01753d8d282cc61a15adae5dd774c3a25', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '3c0bb188fe3bef17086607d36ecad853f5208868', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: 'cd1e3bfce9c50548ee770b907de3adcca4b07958', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '9bab187fa47ee1360d9f32aba7126d87ce5ba98c', accent: "ghost" }, h("button", { key: 'd7c6b1f9c7f6f58ea4f5c631f94370a3ec9c516c', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'c7bab95ba855b60d551115489cf1ce41492e32d2', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'a8570f2f11e3ee4129fc8f309b951d59c8ed1a97', accent: "ghost" }, h("button", { key: '21748d1dd568ab99a4ae7a6e6c71add0d9b141fa', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '7773f658570e13f10e224068e5f25ae49fc8b0c9', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '557e3312c0152bd3654b28e6574fb741015e382c', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: 'fd835e1137e8736f609c8164d697b63ded852897', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '061444e9654c31aa2a012e03465500f03a3b1ca1', accent: "ghost" }, h("button", { key: '2da2393ea5079c930b7318d8c66ae9e4443ab15f', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '38e7d295fa218fe90b787fc46b644671d3993065', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '717e500afcb575faa741b65ee215a6817392326f', accent: "ghost" }, h("button", { key: '57de16c874a2ff91c9a0fc3f6b162c27665532da', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '99fe82ca76d03a9b67e1307b2915808ab48b1507', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: 'da2fc88c6ecfeecf6707a2f13836d07abaf80afc', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '88bbffdb9c5f1f513191949b7d26dfa1b9eccbb9', accent: "ghost" }, h("button", { key: 'ecdae67eb330e77188c2cc9db64698003e0ec801', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'b6d2c5f2732a16e036bb8924a64bc957cb3e4e3c', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'f47c7603b8d18724d2c7135ceed76d52d5db1913', accent: "ghost" }, h("button", { key: 'd096eedbb9620f27bee548deee00ddfb7a703957', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'b4c87b2bd8075540f3032acea4895f11dfb04bf2', 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: '080d2600265fd24a93db0c31fc53050c08f97af8', class: "gux-pagination-item-counts-container" }, h("span", { key: '04e201ed3950906a12dcf60df94d913605a1003f', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'b1aa6d30e61142f6272a3e03b7659b90e33ef0c8', class: "gux-pagination-item-counts-container" }, h("span", { key: '3dca5b0d3e857662c0ffaa0d6e8ec92f20289107', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: 'b2de21a75473203efe7c5f314110b1b5a21a6eb2' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: 'cd33418cd86dd09a03834b988dc74ac6807f0db5' }, 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: '4333b98272bde4dacdb4383330b1b1aaa15eaaa7', class: "gux-pagination-items-per-page-container" }, h("div", { key: 'e93aba3b701c60f2ed45a06683724239c04fc3ac', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '8154c84aadf01fa9649879350ae1cecc16da96ba', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '7c562c72c13371778551e6bfd16b9931dc614926', class: "gux-pagination-items-per-page-container" }, h("div", { key: '944d0f6d03ebc6f8dafd0702731510ebb0bdcca6', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '96c6dab81456fcfa6c04b32be732a47134aa7d52', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {