genesys-spark-components 4.98.1 → 4.100.0

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: 'a547b8cb470a7954273b8bb225c1fbbc0d6068fe', role: "list" }, h("slot", { key: '184656f93c75eb43590a0db3086960e2a020d9b5' })));
+        return (h(Host, { key: 'e166432f0a713540f4c1d23e48e0d843adb7161d', role: "list" }, h("slot", { key: 'a378cb4ca462756dccb95f15c991c215d8d436d0' })));
     }
     static get is() { return "gux-month-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -200,7 +200,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: 'dbb99af69d5607c7b3110919c0da6ca433dd6abf', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '6d0e344fb180a8d62bc065e373629c47dc097ae5', 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

@@ -364,7 +364,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: '5a177a66e42577611204b82e567eaa57c71fbb9a', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '54e66bedfdede08e3aafa707cd56d996d164b138', 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-popover-beta/gux-popover.js

@@ -197,10 +197,10 @@ export class GuxPopover {
         }
     }
     render() {
-        return (h("div", { key: 'aa737a1566ca572ee66663bf93f81d0dcb2ab54a', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: 'bb924b7ec748a448f35fc84fbfaa9be6814a5e0e', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '141277d4fc16931fbd2ce4215db969c8e4cbbd78', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '1f4076917f0f571a418c2c81473169915d9291ec', class: "gux-arrow-caret" })), h("div", { key: '0c85ed77802e827622dac9d51d9655018109248b', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '20498249bda585885a11d9dabcbb84068620bb4f', name: "title" }), this.renderDismissButton()), h("div", { key: 'dbef79c1b5844410788a8099a7eb8b1873af48bd', class: "gux-popover-content" }, h("slot", { key: 'dfe962454dadc3b1b7a1456cffae656ddebe7ff4' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '4bb8c5278696777fdaf21fe3e749d005e5c4bb66', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '93d4446390addd4fc5ad9aa25f1933a054406e59', class: "gux-arrow-caret" })), h("div", { key: 'f62bd0ca8e5c08ca98a774a1a2c96885010a3212', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'cfd17eef87bfe09fb4ceaf43f66f24ccad134a81', name: "title" }), this.renderDismissButton()), h("div", { key: '98f22281a61d8e167e77fe4cab2b38bf1ccc8f49', class: "gux-popover-content" }, h("slot", { key: '5f6d2de55a5ddfc4e49ba73c4d537d75ab794431' }))));
     }
     static get is() { return "gux-popover-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-rich-text-editor/gux-rich-text-editor-action-group/gux-rich-text-editor-action-group.css

@@ -3,10 +3,6 @@
   flex-direction: row;
 }
 
-:host([slot=global-actions]) ::slotted(gux-rich-text-editor-action:last-child) {
-  margin-inline-start: 83px;
-}
-
 .gux-action-group-container {
   display: flex;
   flex-direction: row;

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

@@ -6,19 +6,13 @@ export class GuxRichTextEditorActionGroup {
     constructor() {
         this.hideActionDivider = false;
     }
-    shouldHideDivider() {
-        return this.hideActionDivider || this.isGlobalActionsSlot();
-    }
-    isGlobalActionsSlot() {
-        return this.root.getAttribute('slot') === 'global-actions';
-    }
     renderActionGroupDivider() {
-        if (!this.shouldHideDivider()) {
+        if (!this.hideActionDivider) {
             return (h("div", { class: "gux-divider" }));
         }
     }
     render() {
-        return (h(Host, { key: 'a5e18d4a8720c312e815ddf55114cef0b4e2e306' }, h("div", { key: '0554a4949eacc8b108b581db576ce4f65ea98f6e', class: "gux-action-group-container" }, h("slot", { key: '89e6d6befcb318cf7ad6ea1c5793da91022f278e' })), this.renderActionGroupDivider()));
+        return (h(Host, { key: '9e62d3e38876b2a5a98463118d7f508ea6381a81' }, h("div", { key: 'bc05990ef57f31faaa9f819a7a6e2b78853d12bb', class: "gux-action-group-container" }, h("slot", { key: '41db796c677c17fe907129139d9a62c4534032dc' })), this.renderActionGroupDivider()));
     }
     static get is() { return "gux-rich-text-editor-action-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,12 +1,12 @@
 import { h } from "@stencil/core";
 import { hasSlot } from "../../../utils/dom/has-slot";
 /**
- * @slot typographical-emphasis - Slot for typographical actions
- * @slot text-styling - Slot for text-styling actions
- * @slot lists-indentation - Slot for lists and indentation actions
- * @slot inserting - Slot for inserting actions
- * @slot global-actions - Slot for global actions
- * @slot editor - Slot for the editor
+ * @slot typographical-emphasis - Slot for typographical actions.
+ * @slot text-styling - Slot for text-styling actions.
+ * @slot lists-indentation - Slot for lists and indentation actions.
+ * @slot inserting - Slot for inserting actions.
+ * @slot global-action - Slot for global action.
+ * @slot editor - Slot for the editor.
  */
 export class GuxRichTextEditor {
     constructor() {
@@ -30,14 +30,14 @@ export class GuxRichTextEditor {
     renderInserting() {
         return this.renderSlot('inserting', 'gux-inserting-container');
     }
-    renderGlobalActions() {
-        return this.renderSlot('global-actions', 'gux-global-actions-container');
+    renderGlobalAction() {
+        return this.renderSlot('global-action', 'gux-global-action-container');
     }
     render() {
-        return (h("div", { key: 'c8b7d0e895d041a9365af8e9fc7bb50bb5917213', class: {
+        return (h("div", { key: 'ca783004e7baf5176ec9bc95229ff642f4c77d9e', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'c12eb84731abc0392bc7f8beed93f6e8d682d555', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalActions()), h("slot", { key: '4be2b4e5e259e2f5510c4bdb64da8505e5a009f1', name: "editor" })));
+            } }, h("div", { key: '045681c4e1d07994986a80d4cba4fb1347dbeb8b', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalAction()), h("slot", { key: 'f9f932c875385e22be1f9e6b7779fc2153132f52', name: "editor" })));
     }
     static get is() { return "gux-rich-text-editor-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--gse-ui-rte-innerContainer-gap);
-  inline-size: fit-content;
+  inline-size: 100%;
   max-inline-size: 100%;
   padding: var(--gse-ui-rte-padding);
   overflow: auto;
@@ -20,6 +20,9 @@
   flex-direction: row;
   justify-content: flex-start;
 }
+.gux-rich-text-editor-container .gux-rich-text-editor-toolbar-container .gux-global-action-container {
+  margin-inline-start: auto;
+}
 .gux-rich-text-editor-container.gux-disabled {
   pointer-events: none;
   cursor: default;
@@ -27,7 +30,7 @@
   border: var(--gse-ui-rte-mainContainer-disabled-border-width) var(--gse-ui-rte-mainContainer-disabled-border-color) var(--gse-ui-rte-mainContainer-disabled-border-style);
   opacity: 0.5;
 }
-.gux-rich-text-editor-container:active {
+.gux-rich-text-editor-container:active:enabled {
   border: var(--gse-ui-rte-mainContainer-active-border-width) var(--gse-ui-rte-mainContainer-active-border-color) var(--gse-ui-rte-mainContainer-active-border-style);
 }
 .gux-rich-text-editor-container:focus-within:not(.gux-disabled), .gux-rich-text-editor-container:hover:not(.gux-disabled) {

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: '8fb432d7388caa1a6cd218f8912e0ebf2a5740a2', class: "gux-sr-only" }, h("slot", { key: 'e45f4cbc43482f66d29d413625e2c85e64d34240' })));
+        return (h("span", { key: '0ecfbe4c440710ff030e763cd2c6ce5a03bc69ed', class: "gux-sr-only" }, h("slot", { key: '735e4cd2fa5b1ecc161fca404a6079daf68b6e94' })));
     }
     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.css

@@ -4,7 +4,6 @@ button {
 
 .gux-container {
   block-size: var(--gse-ui-segmentedControl-height);
-  cursor: pointer;
   border-color: var(--gse-ui-segmentedControl-divider-color);
   border-style: var(--gse-ui-segmentedControl-divider-style);
   border-width: var(--gse-ui-segmentedControl-divider-width);
@@ -24,6 +23,11 @@ button {
 .gux-container.gux-start.gux-end {
   border-radius: var(--gse-ui-segmentedControl-borderRadius);
 }
+.gux-container.gux-parent-disabled {
+  pointer-events: none;
+  user-select: none;
+  border-color: color-mix(in srgb, var(--gse-ui-segmentedControl-divider-color) 50%, rgba(0, 0, 0, 0));
+}
 .gux-container .gux-segmented-control-item {
   display: flex;
   flex-direction: row;
@@ -35,6 +39,7 @@ button {
   padding: var(--gse-ui-segmentedControl-button-padding);
   line-height: 0;
   color: var(--gse-ui-segmentedControl-button-default-foregroundColor);
+  cursor: pointer;
   background-color: var(--gse-ui-segmentedControl-button-default-backgroundColor);
 }
 .gux-container .gux-segmented-control-item.gux-icon-only {
@@ -56,6 +61,7 @@ button {
 .gux-container .gux-segmented-control-item[disabled] {
   color: var(--gse-ui-segmentedControl-button-disabled-foregroundColor);
   pointer-events: none;
+  cursor: default;
   background-color: var(--gse-ui-segmentedControl-button-disabled-backgroundColor);
   opacity: var(--gse-ui-segmentedControl-button-disabled-opacity);
 }

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

@@ -12,25 +12,28 @@ export class GuxSegmentedControlItem {
         this.selected = false;
         this.disabled = false;
         this.iconOnly = false;
-        this.position = undefined;
     }
     onClick(e) {
-        if (this.disabled) {
+        if (this.disabled || this.hasDisabledParent()) {
             e.stopPropagation();
         }
     }
-    isInStartPosition(switchItem) {
-        const parentSegmentControl = getClosestElement('gux-segmented-control-beta', switchItem);
+    isInStartPosition() {
+        const parentSegmentControl = getClosestElement('gux-segmented-control-beta', this.root);
         const children = Array.from(parentSegmentControl.children);
-        const index = children.findIndex(i => i === switchItem);
+        const index = children.findIndex(i => i === this.root);
         return index === 0;
     }
-    isInEndPosition(switchItem) {
-        const parentSegmentControl = getClosestElement('gux-segmented-control-beta', switchItem);
+    isInEndPosition() {
+        const parentSegmentControl = getClosestElement('gux-segmented-control-beta', this.root);
         const children = Array.from(parentSegmentControl.children);
-        const index = children.findIndex(i => i === switchItem);
+        const index = children.findIndex(i => i === this.root);
         return index === children.length - 1;
     }
+    hasDisabledParent() {
+        const parentSegmentControl = getClosestElement('gux-segmented-control-beta', this.root);
+        return parentSegmentControl.disabled;
+    }
     renderTooltip() {
         if (this.iconOnly) {
             return (h("gux-tooltip", null, h("div", { slot: "content" }, getSlotTextContent(this.root, 'text'))));
@@ -45,18 +48,19 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: 'dc46906606d50c91ab22416895539fee3c4b2aad', class: {
+        return (h("div", { key: 'a3163fc7d46abd6ae1b2cb350dc77c019946328e', class: {
                 'gux-container': true,
-                'gux-start': this.isInStartPosition(this.root),
-                'gux-end': this.isInEndPosition(this.root)
-            } }, h("button", { key: 'd523cd1a0bffee8bd4089a4818f89c59f8730e65', class: {
+                'gux-parent-disabled': this.hasDisabledParent(),
+                'gux-start': this.isInStartPosition(),
+                'gux-end': this.isInEndPosition()
+            } }, h("button", { key: '188679eafba5acf1d56727a998060ff354b83ff9', 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: '14fa53716ca35297ada5a9123df90b450ced14c9', class: {
+            }, type: "button", disabled: this.disabled || this.hasDisabledParent() }, this.renderIconSlot(), h("div", { key: '99e6999be7ad20fde5f981b3b26278ba281a02ed', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'cabd8871458da9377daa62dea1d31662721f82f7', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: '6a8363cd44d01ad0db3674ce5c15682567c70751', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }
@@ -146,11 +150,6 @@ export class GuxSegmentedControlItem {
             }
         };
     }
-    static get states() {
-        return {
-            "position": {}
-        };
-    }
     static get elementRef() { return "root"; }
     static get listeners() {
         return [{

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

@@ -7,6 +7,7 @@ import { trackComponent } from "../../../utils/tracking/usage";
 export class GuxSegmentedControl {
     constructor() {
         this.value = undefined;
+        this.disabled = false;
         this.items = [];
     }
     onClick(e) {
@@ -30,7 +31,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: 'd92279de25eca923eb4a937b43285e72fe01e6db', role: "group" }, h("slot", { key: 'b31f4db1c171864b25aa09fa3b771f170ebd1862', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: '71c29eea98d3129dfed35ced4be237d97dc03f40', role: "group" }, h("slot", { key: '7ed26fd5a871bfe2366f66d4c6e278156743e05f', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-segmented-control-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -62,6 +63,24 @@ export class GuxSegmentedControl {
                 },
                 "attribute": "value",
                 "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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: '36e9854a9b1596985a14344e5d382a70b26a3865', class: {
+        return (h("div", { key: '8d1fbba6192ca0a41d87d798d8a2ccc1ba1611ca', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'd5c1f7a75deb3cd6e53d29cb8522f69553250fd0', class: "gux-content" }, h("div", { key: '97cc1be3d41db54b76c27f3e243b842efb6915d1', class: "gux-icon" }, h("slot", { key: '260bef000e3a08d67a89aa1cd684df2a06ffec0f', name: "icon" })), h("div", { key: 'adbdd6b5f7149cda9cf5c42dd77e1f6b41a7c68a', class: "gux-label-container" }, h("slot", { key: '1ee7d7e8b6957ba13eaf1c6a573601cdabfe5654', name: "label" })), h("slot", { key: 'd0e27ba586008b9e3bd1fbb970ccf9fabb24b838', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, h("div", { key: '969fbb14f401d400c95c87ff4a26dfb660ffb162', class: "gux-content" }, h("div", { key: '4288c5c8d252e632d3ed6d4356973839beb93897', class: "gux-icon" }, h("slot", { key: '2f0a59c6652a3113a675651c56eba4101f61789c', name: "icon" })), h("div", { key: '046bcd334dcbede5c2aa1d8903c2f033e2e11785', class: "gux-label-container" }, h("slot", { key: '6988c4825800b7f7e289058477a243f22651bd66', name: "label" })), h("slot", { key: '051809cb3ce91a438ce99c1a0ec6e7783d7764fe', 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: 'a344a19a4d45e0a02e4fc305ada701ee8a218ea4', class: "gux-selector-cards" }, h("slot", { key: '42711c8d6c3b618baa9f15de853064348ea01d7d' })));
+        return (h("div", { key: 'b02f3566386dec3f2dfc060a91386f32db39ac4c', class: "gux-selector-cards" }, h("slot", { key: '6334e361281bdc64fd3cd15f387bb7303927819b' })));
     }
     static get is() { return "gux-selector-cards-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: 'fa04f8b1e997d50afac9d3386c28f0d18bec0e31' }, this.renderTime()));
+        return (h(Host, { key: '82b5cf6c605bde7b302d0a73deb452a34e15118a' }, 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: '94ba4fe8ba6e941f0c13cd988370f044f34c6ad9' }, this.renderZoneDisplay()));
+        return (h(Host, { key: '18323c24483d93e5697275ff91ea8f8b25e21b5f' }, 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: 'd738513f1ad0226ebcc972558a5c9d803e936cb2', class: {
+        return (h("gux-dropdown", { key: '193500b9a5fafaa68f2c553f48968d0ea81bfdb2', 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: '83b90fee82119ad099e616fe2c3d1553b529fa43', "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: '2855646613b22f351792e137314c3e1d0dc277ce', "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

@@ -3,6 +3,7 @@ import { autoUpdate, computePosition, flip, hide, offset, shift } from "@floatin
 import { randomHTMLId } from "../../../utils/dom/random-html-";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { afterNextRender } from "../../../utils/dom/after-next-render";
+import { overflowDetection } from "../../../utils/dom/overflow-detection";
 /**
  * @slot content - Slot for content
  */
@@ -56,7 +57,13 @@ export class GuxTooltipBase {
         });
     }
     updatePosition() {
-        const middleware = [offset(16), flip(), shift(), hide()];
+        const middleware = [
+            offset(16),
+            flip(),
+            shift(),
+            hide(),
+            overflowDetection()
+        ];
         void computePosition(this.forElement, this.root, {
             placement: this.placement,
             strategy: 'fixed',
@@ -116,10 +123,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: 'c770bc81de96d2cbdab860f862859c9bbbf39855', 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: '489760abcd1e6ee74455aec3942919a731af9de9', class: {
+        return (h(Host, { key: '1ee9387e1c24fb277126461fa2babeebaa53a420', 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: 'b788e2bc87e9721ccd408a56f4086095e6647370', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'bd526d929810207c84c5c9048826c95e98363f6e', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'e8cf1aa777998c6f206e06ce59ab33b09a6189da', 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: '793cbef2ca35e24ad9aa850e74ec7f5c051cabd5', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '3d16db4bd342a99e8d291cd80216f3cfebb80eb3', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: 'b07a1fabe177ec340948d1c7b4067616defadde5', slot: "content" }, h("slot", { key: '6ba36f7f88f71e50bcde0a009bbefc13774276b2', name: "content" }, h("slot", { key: 'c4ffe632f13d1b2840686586994b0e64686d26d6' }))))));
+        return (h(Host, { key: 'f2ebdfbd5fb382d6df0dd6fabd2f3c2eaa6f9151', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'e5bf22d96ef93ea9a92e3513bbf2b4402cc3b316', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: 'f142e0d4ed78a9baba60ad5e62cbfde574a7a1c9', slot: "content" }, h("slot", { key: 'cc4c38ecb502b49c12e9d7e27f349b0c8be36170', name: "content" }, h("slot", { key: 'fa21cef8bd4692de0c637f62e3b3487002d8efeb' }))))));
     }
     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: '344404b2729a70cdc427299bb88ab8eff6a1f518' }, h("div", { key: '2f2b8d4568fc903fe7014b999c5884991f53924c', class: "gux-header" }, h("div", { key: '9d96fb4bdd406ca5f146f5cfeaead14b44a1e5ac', class: "gux-icon" }, h("slot", { key: '617ec746f3aebe23ecfa602c8d60789b7ea59eed', name: "icon" })), h("div", { key: 'aa7778221616f7b69fa9747b7516909578f5b827', class: "gux-title" }, h("slot", { key: '3a739d4b488a5f74426e6cb44a31e7c91c8e9c44', name: "title" }))), h("div", { key: '6473157009504827971435c1dd480b48fc7aa79e', class: "gux-message" }, h("slot", { key: '4b2e51a6eb3a9aef809445eecadbd47f751a8344', name: "message" })), h("div", { key: 'c2df2ac9b53bff9acb83d1f18f4f2cecaea22540', class: "gux-action-buttons" }, h("div", { key: '3f9e530e1dff45b824fb2b319a7053a60d26a459', class: "gux-positive-button" }, h("slot", { key: 'eb474e9c4e011dc4e8ec015e0496bb3147fd4b7d', name: "positive-button" })), h("div", { key: '440031af2a91a9ec093e00f06e45b9afb91cb49c', class: "gux-negative-button" }, h("slot", { key: '8299f13a016f95f4354df5f29fe37aa1c66b7d5e', name: "negative-button" })))));
+        return (h(Host, { key: '39eea09a880ff581d57632782b631454d9344270' }, h("div", { key: '90137f100aff969a621e74be16a3ad1122ecc9f8', class: "gux-header" }, h("div", { key: '2b7aef705c8fd9cea541edf5fdd2de23f29bf12f', class: "gux-icon" }, h("slot", { key: '51062898df1646258a76fcd286f64ccc6102bdcb', name: "icon" })), h("div", { key: 'bbc9322af84778571014f59e0b03f8afaf958039', class: "gux-title" }, h("slot", { key: 'e2b3ca1557bbb46fe3ae3cd598c1c09afbf3e985', name: "title" }))), h("div", { key: 'ee968a9d48cfff9d48a82b67e2f553990139d532', class: "gux-message" }, h("slot", { key: '9087bf84e77ac1b314610772471f9cc2a0291e38', name: "message" })), h("div", { key: '229143a88629fb346cfeb9fd6ab33593486cae75', class: "gux-action-buttons" }, h("div", { key: '82c89befd5e68037733173cf0121de8ff8f63b23', class: "gux-positive-button" }, h("slot", { key: 'fb4a59a75a6f3edf4e53b7cb636e5accc524a1af', name: "positive-button" })), h("div", { key: 'af0c49681fb382304fe47d63277d88cb1aedccbf', class: "gux-negative-button" }, h("slot", { key: '9707d14de8db9eb424d19e1ccf7d72436c2a991c', 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: '42be6592e1ccbbdcc93902a9b9f203199fa1ca5d', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: 'f5992bc9725a305c4ce379aafb8f899a9ff8467c', 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: '0400f9106176013ffb6dae6299967255920451d1', expanded: this.opened, disabled: this.disabled }, h("div", { key: '07f4a75522492aa2b23bd118e15bd4dfa385b168', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '3731d1005dc21645b4e5d3db0128bf7c19fbd387', 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: '6a5414be05a0fa4bda566af05057eb3d2bcd032e', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '353ea5852bb21264ee0f6bf4dc6c5ae0fd68363d', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'dd4ace94cb295b3b4013977dbde9e7a736c847a3', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'e3e780a3461441083846154da147b6bfef7dcf52', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: 'b39b3c644c88fcf9d3e453ca9275ffd4810cdbf4', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '9b99daaf18bfc776dee1388764991cd819caba22', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '2250fdb7ea25e0786d6e8da278cf16222563c22d', "label-position": "screenreader" }, h("label", { key: 'bade61ee0c3e12ddbf272fa4d556772f6e4cb19f', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'df0970634a7bf0a85079a09a74af2a145756970f', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: '137082491e948a61be16aab243a27e588b518548', expanded: this.opened, disabled: this.disabled }, h("div", { key: '0593f7f38a551a234f53adcd6a66ef3ddd8685eb', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '79126386705c8096e4c994df0f477548db6f7a77', 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: '9c416bf93781cb18cc4599b3418d5f014abb1859', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '8504fe8469b5b1dc011e47d46b4024a085d2de63', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'fdf502465849a0e4f7468a2d200a08a1f91e3289', class: "gux-icon-wrapper" }, h("gux-icon", { key: '53f93df36c182692971bd9f96cd500ee9feec712', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '5d95bd99bf9d1145599f1d345892d2a06473a663', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '7eb520651c465d6c93e71a7a0b0516ce660f8f5f', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'b55c179c839ae9211b86f52b90fa8beae41e8745', "label-position": "screenreader" }, h("label", { key: '67a6c6cdd4520e43a0c1390223e0c8e3f45fddae', slot: "label" }, this.i18n('searchAria')), h("input", { key: 'f3b4f1b4e33b3512b8bda8638e29bd410af87d63', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '73e76d48e40c273907e9d4c8bde818088dc1575a', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'f2744f267df2554133957442754feaf05140b48f' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: 'df6df0b8d2bba10bf469c4e78b4bd698dffc05e8', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '85696e7589d49552962371ab41243cade0bebae1' }))))));
     }
     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: '2f29e67c4be5267431fe742b72013ee7ed38a07a', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'eed43d112f9d627b03fed6d99f58798dfc47086d', 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: 'd1274e70f923b3627dc42bbdff4af6ae7afeefe4', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '635dcd6a8dcdb4a2b79aa0ab2114ec3bd398bbbb', id: this.panelId, class: {
+        return (h("div", { key: '3e012aa285ba44d1bafa866f76fe75f106c46bec', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'a2f08d3d7c45fa5c46029bac455528a65d712aee', 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: '5f92ab8708b876b5dc830ddee317bccd1d91f01d', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '6507cf0d514cfce18c5bceffed5e13b2b36c3316', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '15a78fbfc0740a4312a6790f546e9dd85bf8867c', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '0152f2061ee1cf6ad211d2c949bf99a1426a7921', 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: '4c560129d4704e0cf2b39a77ea8494c4f943b0e4', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '4f26f1702ced1b770035eb3f993b47653d6077ec', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '84835e5f39c707d9fb03cb125d099cdec501c781', class: "gux-modal-header", id: titleID }, h("slot", { key: 'bd2f8bc2f6e25c833477df36a27db71f9e2f9488', name: "title" }))), h("gux-dismiss-button", { key: '26b54923c42ce83c65dc3b9d818baa53fb41b776', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'e8d57caaea18ba43763d1a49ff718a6f76909de3', class: {
+        return (h("div", { key: '0b7bf1803a27712de1d2ce1e2864dc9c49e9004f', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'ab479c087a1af922272b5c7a6ed333c4b880e904', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '187bccef5bd926618c5674c18c2b33de87612de3', class: "gux-modal-header", id: titleID }, h("slot", { key: '8a35d0336b0df7cbfa1f3965594ff9c00e7332b3', name: "title" }))), h("gux-dismiss-button", { key: 'ccfcb15e7380b3838f602e30aabca386c5203b8b', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'f2d4711d6492ece45af28c3d25a4d470dba54152', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: '5cf41c10982266dd5e137a9554b95b23da8e5d0f' }, h("slot", { key: 'fc063519fb7e6998c5848ac3deca4f44b295a66e', name: "content" }))), hasFooterButtons && (h("div", { key: '5dfe62a195dc5331bbf35f312c8159336f19badc', class: "gux-button-footer" }, h("div", { key: '440facd07400b3c353ce21d11c527d9df2e3810c', class: "gux-left-align-buttons" }, h("slot", { key: 'b110a10e475e0a96ad2042361e05010ba894c017', name: "left-align-buttons" })), h("div", { key: '387237bac3ede031f328a4336fc0d8d777a38277', class: "gux-right-align-buttons" }, h("slot", { key: '6dc5dda704f6000272135c2a405fe1db11b6b1e6', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: 'a53a92c0acaa5b9c561961937d40ed36da098c12' }, h("slot", { key: 'bd56c58ad6bf1ced890577ea660de3375f0f50ec', name: "content" }))), hasFooterButtons && (h("div", { key: '6b4ba6636c4ec443e02bcf1af00783ea20523ea5', class: "gux-button-footer" }, h("div", { key: '42ff0cdd27d1c25a6fdba0d90f440a474ad26c0c', class: "gux-left-align-buttons" }, h("slot", { key: '21c3373d83ecd0325643f482337c3d4e95c5aea4', name: "left-align-buttons" })), h("div", { key: 'da00f46b200b01eaf88cbc6674a5b24e12e82e2c', class: "gux-right-align-buttons" }, h("slot", { key: 'd58bf5c5f8ee524acaa366c2b8fec817257124bc', 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: 'dafa40dd0c1a58eefa2dec3b6f18ba91269973b4' }, h("div", { key: '79cdf572f7b5f7dbab218f604890c72ea33c5d4e', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '7a354b86a39b9099f924e2bbff4a9d75978544ed', name: "icon" })), h("div", { key: '586c1df3f9d74e6888d388ac66fe8432715a78b4', class: "gux-content" }, h("gux-truncate", { key: '306b9ec4f9199b632386550eacd61b91a38278ec', class: "gux-title", "max-lines": 1 }, h("slot", { key: '0ef6f4e5c0330134888cffac11383a470435037d', name: "title" })), h("gux-truncate", { key: '3702f19ebe1e30724cf58db7c447ec4191bfd53d', class: "gux-message", "max-lines": 2 }, h("slot", { key: '5156b07eec3d3dab083f927dd7e4cd48215425dc', name: "message" }))), h("gux-dismiss-button", { key: '7f1ba59b46646d79a9f619fd166edc6221099f53', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '81e1f0e6f5c908fc2f34d79870e3d0a968de4bf6' }, h("div", { key: '3bb0a7e11448c7d33a918cc90ef2e090a1b69687', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '26a5be9802c834fc3a51dcbfda55c0edaac82a94', name: "icon" })), h("div", { key: 'fc94a9cc95a742eed4954281081ee4874c4639e0', class: "gux-content" }, h("gux-truncate", { key: '716c86b33f2370dc82ad5be6e80950fdf5d216ac', class: "gux-title", "max-lines": 1 }, h("slot", { key: 'eaaaace3c7e6817286c09ec79f3610f72204c991', name: "title" })), h("gux-truncate", { key: '3049cf588bd4a5885f2dbe15a60dcb2eddcf89c1', class: "gux-message", "max-lines": 2 }, h("slot", { key: '1ba40d062fa1dc59fd67d067dba56cf3c7d6bc77', name: "message" }))), h("gux-dismiss-button", { key: '57ab0ad1ee764784351e6cad120c6b0482b8c194', 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: '0b69d5b10bf1a96f25df81efc2e983bf043faed1', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '4435e8b36ecee3491a3a1fafaf8f203c3aa8bf7f', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '353ab5c3ad056dfabb306b4f9afed4607e0472fd', accent: "ghost" }, h("button", { key: '57b76a54ff7678d1968d8020e28653d703712a2c', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: 'd291ac0c3e69ef71394d28385083d823b6267d46', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '98d9439a820726f71d5c3cdda00d67a372383405', accent: "ghost" }, h("button", { key: '32af0791cc1318dfa22ef1e6fc6ce7a652f76012', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: 'a8c2e57f9220fc2702006a2b0676b711a5d8f998', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '404dc356e99b6e0315911fc507ef7f41ac06b76e', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '2a263413bd65e2f2ca15f7b18b217b9e91d7a29b', accent: "ghost" }, h("button", { key: 'c0e696b318212333f78f850340169fcf1edb5ba3', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'd9d6dba17a7adc83bf639d700da05dbdb2b79aa2', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '3ce6bdea50340103d865b495a8d3b459418969ae', accent: "ghost" }, h("button", { key: 'e47a2063cba8b8d91e05d6b99640b2be77b747ae', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '86adbe15ac45d7adde0fea025a43077a63c41061', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '1002a9f57b994f82d4c55fe8bd44ac81aec86e05', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '0db29d47bbe35069be34418b6219bf65597c0c87', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'd09492d423a68a907c62cf8997ea6e4b82cb3d99', accent: "ghost" }, h("button", { key: '73e893c511d07567c5d0e2eca9b32e9e79e03dcf', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '0a2f5b667a98526bc9fd1468223db8a1188eb046', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'c89f1a7ae0c076858cd333f5c9dce5d81d829cb2', accent: "ghost" }, h("button", { key: '84659747522156ef703047d71c1248495b7083a8', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '23ae006cdb96db54b7bf175c4f19004ea52e3fa6', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '817ea0b515203e1b4cb06bc8d72386d1e8ebf8b1', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: 'd6fb04ae44b07f1cfd056f4f4e847b057e760b64', accent: "ghost" }, h("button", { key: 'dad95f95adc33bf6cc9e8a8d6725af4ac5f095a8', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '93d95803fb291740747dc31280e106c9e7651930', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: 'b6cbebbde660a985128f227ee2ef0d313358d040', accent: "ghost" }, h("button", { key: 'a1c5fdf80c4706ca5b12d0de91d555ea9924b03a', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '706f0d4e1ac7ef44297f8bbdb5c92f5f676a3e5e', 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: '18c769f1060224ffd67629c4e51d1226ec25155c', class: "gux-pagination-item-counts-container" }, h("span", { key: '796072285432136d960c17f4db74119fe6c27891', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: '843dfc2f4a9499f00a2e4d38bdf62886a78c673b', class: "gux-pagination-item-counts-container" }, h("span", { key: 'f7774f33eb83edd54a7563b4c069156c75271656', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: 'a5a600f60894153fd1f30118d505b56097a97b2c' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: 'ae705898bcc17e844c47b79dd22bb1ca926e5443' }, 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: '7df667f146c16ddf76de3c0407ad5e6a0aa10252', class: "gux-pagination-items-per-page-container" }, h("div", { key: '82e83d9aa8b27c0044e5fc5e642c1e4bc9f6a44e', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '69bb3f0d14fae439cdba3c7c5c27103607375cca', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '58cb24562a200013ad3845004fda14082166405e', class: "gux-pagination-items-per-page-container" }, h("div", { key: '2744abf9a220717e71f6d0579a7fecc6476044fc', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: '145a514daf02bd9692b637f6ed4f432392e8b5b6', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {

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

@@ -58,7 +58,7 @@ export class GuxPaginationLegacy {
         this.currentPage = this.calculateCurrentPage();
     }
     render() {
-        return (h("div", { key: '79450755765b35044a39f45e8214f4b9f1a04b4e', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '1bf63c813df44b2eb622b2cac0ddcd15f6335d7d', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: 'acdba6e6ebacf3f31f75fb50441fe2ad56c620d9', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '5b21f2debbbadf6bebe3dfe94103e4e4bf55c462', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '4018afbdd1fd11843e8c72ae889531bfae857f12', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: 'be9c5c3501163de425e8ab14be9b25818f2d7d03', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
     }
     static get is() { return "gux-pagination-legacy"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class GuxSimpleToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: '25121cb61bea23511d7d6be1b8edc3604a83f993' }, h("div", { key: '927aae1436f6bcae529195d8e2b93c8ef0fda0f8', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '1a1da0bcf07f441c36acd1c98f43d1829c11ae84', name: "icon" })), h("gux-truncate", { key: '075f28ca8032ba31a38da7e852ac40c140bb3d22', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'ddb1ca729b67b482abf6c9efb8291ff2587a3b28', name: "message" })), h("gux-dismiss-button", { key: '1a5702f57280dfdfa46f886500d5086f6d3fddda', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: 'f504de9049874db1ef706c042175bed36d423b29' }, h("div", { key: '803640396d7fec743592784adf5493fe22e68e0b', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '0b68c6cf8e77354ae526bdcdcea5fdd812889a12', name: "icon" })), h("gux-truncate", { key: 'e8d7271eae9498077c3b5d59c0032e281db51f84', class: "gux-message", "max-lines": 2 }, h("slot", { key: '365a98768b8399f4cdafc97a306c915d0c8fce36', name: "message" })), h("gux-dismiss-button", { key: '73fee5a9c5c07c3ee40829bf277000ef71776f47', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.js

@@ -14,7 +14,7 @@ export class GuxSwitchItem {
         }
     }
     render() {
-        return (h(Host, { key: '0426d13853008338b3403eeec5b1c838191ac2c2', class: { 'gux-selected': this.selected } }, h("button", { key: 'efb35769b9e9a6f46bdb8a20ad62296ae877030a', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '025987f009297692f742939f620d45ee33596c4e' }))));
+        return (h(Host, { key: 'ae34392f0292d4d2cc8728911337e787d993b89d', class: { 'gux-selected': this.selected } }, h("button", { key: '5a04666a3758787567515f886ec21fdbaa6fec16', type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: '8b193776a94310ca90d3a1628f88fde7067a414c' }))));
     }
     static get is() { return "gux-switch-item"; }
     static get originalStyleUrls() {