genesys-spark-components 4.95.0 → 4.96.0

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

@@ -0,0 +1,363 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { h } from "@stencil/core";
+import { autoUpdate, computePosition, arrow, flip, offset, shift, hide } from "@floating-ui/dom";
+import { OnClickOutside } from "../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { getSlot } from "../../../utils/dom/get-slot";
+import { findElementById } from "../../../utils/dom/find-element-by-";
+/**
+ * @slot - popover content
+ * @slot title - Slot for popover title
+ */
+export class GuxPopover {
+    constructor() {
+        this.for = undefined;
+        this.position = 'bottom';
+        this.displayDismissButton = undefined;
+        this.closeOnClickOutside = false;
+        this.isOpen = false;
+        this.forElement = undefined;
+    }
+    updateForElement() {
+        this.forElement = this.getForElement();
+    }
+    onKeyDown(event) {
+        switch (event.key) {
+            case 'Escape':
+                this.dismiss();
+                break;
+        }
+    }
+    onFocusout(event) {
+        if (!this.closeOnClickOutside && this.displayDismissButton) {
+            return;
+        }
+        const focusIsOutsidePopover = event.relatedTarget && !this.root.contains(event.relatedTarget);
+        if (focusIsOutsidePopover) {
+            this.dismiss();
+        }
+    }
+    checkForClickOutside(event) {
+        const clickPath = event.composedPath();
+        const forElement = findElementById(this.root, this.for);
+        const clickedForElement = clickPath.includes(forElement);
+        if ((this.closeOnClickOutside || !this.displayDismissButton) &&
+            this.isOpen &&
+            !clickedForElement) {
+            this.dismiss();
+        }
+        if (clickedForElement) {
+            this.popupElement.togglePopover();
+            this.isOpen = !this.isOpen;
+            this.runUpdatePosition();
+        }
+    }
+    get titleSlot() {
+        return getSlot(this.root, 'title');
+    }
+    getForElement() {
+        if (this.for) {
+            const forElement = findElementById(this.root, this.for);
+            if (!forElement) {
+                this.logForAttributeError();
+            }
+            return forElement;
+        }
+        else {
+            this.logForAttributeError();
+        }
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = autoUpdate(findElementById(this.root, this.for), this.popupElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        const forElement = findElementById(this.root, this.for);
+        if (this.popupElement && forElement) {
+            void computePosition(forElement, this.popupElement, {
+                placement: this.position,
+                middleware: [
+                    offset(7),
+                    flip(),
+                    shift(),
+                    hide(),
+                    arrow({
+                        element: this.arrowElement,
+                        padding: 16
+                    })
+                ]
+            }).then(({ x, y, middlewareData, placement }) => {
+                Object.assign(this.popupElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+                const side = placement.split('-')[0];
+                const staticSide = {
+                    top: 'bottom',
+                    right: 'left',
+                    bottom: 'top',
+                    left: 'right'
+                }[side];
+                const arrowRotation = {
+                    top: 0,
+                    right: 90,
+                    bottom: 180,
+                    left: -90
+                }[side];
+                // This is 13 because this makes the arrow look aligned when horizontal
+                // or 15 if vertical due to extra padding needed to show the shadow.
+                const arrowLen = side === 'left' || side === 'right' ? 15 : 13;
+                if (middlewareData.arrow) {
+                    let x = middlewareData.arrow.x;
+                    const y = middlewareData.arrow.y;
+                    if (side === 'left' || side === 'right') {
+                        x = x + 4;
+                    }
+                    this.popupElement.setAttribute('data-placement', placement);
+                    // TODO: COMUI-3210 - Arrow currently does not show
+                    Object.assign(this.arrowElement.style, {
+                        left: x != null ? `${x}px` : '',
+                        top: y != null ? `${y}px` : '',
+                        right: '',
+                        bottom: '',
+                        [staticSide]: `${-arrowLen}px`,
+                        transform: `rotate(${arrowRotation}deg)`
+                    });
+                }
+                if (middlewareData.hide) {
+                    Object.assign(this.popupElement.style, {
+                        visibility: middlewareData.hide.referenceHidden
+                            ? 'hidden'
+                            : 'visible'
+                    });
+                }
+            });
+        }
+    }
+    dismiss() {
+        const dismissEvent = this.guxdismiss.emit();
+        if (!dismissEvent.defaultPrevented) {
+            this.isOpen = false;
+            this.popupElement.togglePopover();
+        }
+    }
+    logForAttributeError() {
+        if (this.root.isConnected) {
+            console.error(`gux-popover: invalid element supplied to 'for': "${this.for}"`);
+        }
+    }
+    connectedCallback() {
+        this.updateForElement();
+        trackComponent(this.root, { variant: this.position });
+    }
+    componentDidLoad() {
+        if (!this.forElement) {
+            return;
+        }
+        this.forElement.popoverTargetElement = this.popupElement;
+        if (this.isOpen) {
+            this.popupElement.togglePopover();
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.isOpen) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    renderDismissButton() {
+        if (this.displayDismissButton) {
+            return (h("gux-dismiss-button", { onClick: this.dismiss.bind(this), position: "inherit" }));
+        }
+    }
+    render() {
+        return (h("div", { key: 'aa737a1566ca572ee66663bf93f81d0dcb2ab54a', 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' }))));
+    }
+    static get is() { return "gux-popover-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-popover.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-popover.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "for": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates the id of the element the popover should anchor to"
+                },
+                "attribute": "for",
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate position of popover element arrow (follow floating ui placement attribute api)"
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'bottom'"
+            },
+            "displayDismissButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicate if the dismiss button is displayed"
+                },
+                "attribute": "display-dismiss-button",
+                "reflect": false
+            },
+            "closeOnClickOutside": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Close popover when the user clicks outside of its bounds"
+                },
+                "attribute": "close-on-click-outside",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isOpen": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls hiding and showing the popover"
+                },
+                "attribute": "is-open",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "forElement": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "guxdismiss",
+                "name": "guxdismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when a user dismisses the popover"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "root"; }
+    static get watchers() {
+        return [{
+                "propName": "for",
+                "methodName": "updateForElement"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxPopover.prototype, "checkForClickOutside", null);

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

@@ -18,7 +18,7 @@ export class GuxRichTextEditorActionGroup {
         }
     }
     render() {
-        return (h(Host, { key: '71f1f627972a0fe4506b8a855debc8d33d33a9c9' }, h("div", { key: '5a74851c3855d4632b585f0d75fc0d3398ddff69', class: "gux-action-group-container" }, h("slot", { key: '0f5d4503a0e1743f26cbea14b4a1bdafae3cee81' })), this.renderActionGroupDivider()));
+        return (h(Host, { key: 'a5e18d4a8720c312e815ddf55114cef0b4e2e306' }, h("div", { key: '0554a4949eacc8b108b581db576ce4f65ea98f6e', class: "gux-action-group-container" }, h("slot", { key: '89e6d6befcb318cf7ad6ea1c5793da91022f278e' })), 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

@@ -34,10 +34,10 @@ export class GuxRichTextEditor {
         return this.renderSlot('global-actions', 'gux-global-actions-container');
     }
     render() {
-        return (h("div", { key: 'd2f0c7e3760d33d1a162e25091fb38600b551713', class: {
+        return (h("div", { key: 'c8b7d0e895d041a9365af8e9fc7bb50bb5917213', class: {
                 'gux-rich-text-editor-container': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '6cb5313df385ff2eaf578d1f04f90160165446d4', class: "gux-rich-text-editor-toolbar-container" }, this.renderTypographicalEmphasis(), this.renderTextStyling(), this.renderListsIndentation(), this.renderInserting(), this.renderGlobalActions()), h("slot", { key: '34b06313c8c5fc7c0d1aca06fab3e222688c8a78', name: "editor" })));
+            } }, 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" })));
     }
     static get is() { return "gux-rich-text-editor-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,7 +8,7 @@ export class GuxScreenReader {
         trackComponent(this.root);
     }
     render() {
-        return (h("span", { key: '5faa66e55e3ebc5882090df54f1588aaf80d5979', class: "gux-sr-only" }, h("slot", { key: 'f6d6c305eef26c0f6f78e072b55e7cc1511fe3ac' })));
+        return (h("span", { key: '8fb432d7388caa1a6cd218f8912e0ebf2a5740a2', class: "gux-sr-only" }, h("slot", { key: 'e45f4cbc43482f66d29d413625e2c85e64d34240' })));
     }
     static get is() { return "gux-screen-reader-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,18 +45,18 @@ export class GuxSegmentedControlItem {
         }
     }
     render() {
-        return (h("div", { key: '62adb0bf4159700506cd14b99153260f784cb551', class: {
+        return (h("div", { key: 'dc46906606d50c91ab22416895539fee3c4b2aad', class: {
                 'gux-container': true,
                 'gux-start': this.isInStartPosition(this.root),
                 'gux-end': this.isInEndPosition(this.root)
-            } }, h("button", { key: '18af6a0c4c057a307374e40cdde031234c67603a', class: {
+            } }, h("button", { key: 'd523cd1a0bffee8bd4089a4818f89c59f8730e65', 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: '082eeacb9d0298b9eef16d9d6d6e7f1744208d85', class: {
+            }, type: "button", disabled: this.disabled }, this.renderIconSlot(), h("div", { key: '14fa53716ca35297ada5a9123df90b450ced14c9', class: {
                 'gux-text': true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'c4ceb7a0b24bd0157dd40e025ea3d5626a4c2942', name: "text" }))), this.renderTooltip()));
+            } }, h("slot", { key: 'cabd8871458da9377daa62dea1d31662721f82f7', name: "text" }))), this.renderTooltip()));
     }
     static get is() { return "gux-segmented-control-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class GuxSegmentedControl {
         });
     }
     render() {
-        return (h(Host, { key: '734e7af66b54ad7ec3ea4ebbff4c112776ea7640', role: "group" }, h("slot", { key: 'c1ed62ed43011977f22a7847feec542f1e054148', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: 'd92279de25eca923eb4a937b43285e72fe01e6db', role: "group" }, h("slot", { key: 'b31f4db1c171864b25aa09fa3b771f170ebd1862', 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: '5b60d7ada3e594a681fd3f68e9f0cc2c731e0d93', class: {
+        return (h("div", { key: '36e9854a9b1596985a14344e5d382a70b26a3865', class: {
                 'gux-selector-card': true,
                 [`gux-${this.variant}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '9e139a97ef02724adfc45b71f76ff9074e9aee00', class: "gux-content" }, h("div", { key: '0b37efa740903195268a61ec36ca7b32cf5b9ec9', class: "gux-icon" }, h("slot", { key: 'f794d384a4037f67b1e8038a97116d122fe20306', name: "icon" })), h("div", { key: '392b31d49762af5949c300d88e7254571fb8e3e1', class: "gux-label-container" }, h("slot", { key: '13d20dfc17e19b98d8e837e7f3e9ce7fa2d6d371', name: "label" })), h("slot", { key: '469ac58ab46d2e1c746f2f593c812f48d0d7b467', name: "input" }), this.renderDescription(), this.renderBadge())));
+            } }, 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())));
     }
     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: '03a212b20ed023ca41a667190c0737888abe881f', class: "gux-selector-cards" }, h("slot", { key: '4915402317cfb8da294e69c6b2724e9618616827' })));
+        return (h("div", { key: 'a344a19a4d45e0a02e4fc305ada701ee8a218ea4', class: "gux-selector-cards" }, h("slot", { key: '42711c8d6c3b618baa9f15de853064348ea01d7d' })));
     }
     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: 'c2a16009561127533597b903ed9ffc14de015ec9' }, this.renderTime()));
+        return (h(Host, { key: 'fa04f8b1e997d50afac9d3386c28f0d18bec0e31' }, 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: 'dc4331c82dd78340f46e5db2ea5652cd222560f5' }, this.renderZoneDisplay()));
+        return (h(Host, { key: '94ba4fe8ba6e941f0c13cd988370f044f34c6ad9' }, 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: '8ac8904ea59b1b8d948342f1da7b21d7ef7d3899', class: {
+        return (h("gux-dropdown", { key: 'd738513f1ad0226ebcc972558a5c9d803e936cb2', 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: 'f2b316f10946e66ecc3b140245f2b11d5a61832d', "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: '83b90fee82119ad099e616fe2c3d1553b529fa43', "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

@@ -116,10 +116,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '14041b171c08679235e91bdf45f77b722541d1fb', 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: '1c812332b1dfb0c5d721d3255a4299ad52945f06', class: {
+        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: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'b7dd84722cdbd10d77a0ead536386fe968895953', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: 'bd526d929810207c84c5c9048826c95e98363f6e', 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: '4f2fe6261336821a9fb7ff251ea1a298769ff527', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: 'fde0703ca1f47baa889159cbbc51b4092e4eb00e', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el) }, h("span", { key: 'e0655c2e2fc41d811476794564bc73f6024e3752', slot: "content" }, h("slot", { key: '072435014ecb771df5d5a9c26040897e43453a9d', name: "content" }, h("slot", { key: '6169cb70045f34b20dfdce1021028b6a3163bc0e' }))))));
+        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' }))))));
     }
     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: '06b669e25c915727a75188e6c83a67cf3a6c6e50' }, h("div", { key: '0d46cc738d0cc0e7eb576bbcfd3077d549422fba', class: "gux-header" }, h("div", { key: 'b85869fa7722f20c0729ed8476adde8c60d784dd', class: "gux-icon" }, h("slot", { key: 'd7c9e66d8a9bce4eca1545b8e52a3567e12d3288', name: "icon" })), h("div", { key: '434e4133c44507d1c0ac0e5c09217180c5a9582a', class: "gux-title" }, h("slot", { key: '489704db17f3058f21331ca25607dd640b37120e', name: "title" }))), h("div", { key: 'e7ad6de9053b0ab2a2da03d910e0b10a84872c31', class: "gux-message" }, h("slot", { key: 'b2b8fed563c3ddf1bede89a3b89b168157fe28ba', name: "message" })), h("div", { key: 'a70341b12c2e371edeedafb0d6abc53f8fb88a84', class: "gux-action-buttons" }, h("div", { key: '14f269ee62ce87f386cdefa01f571f21240f761e', class: "gux-positive-button" }, h("slot", { key: '89ae930fdb9bea2c8fda3d973bdc42e7126a6999', name: "positive-button" })), h("div", { key: '4a058200c8d61fa5f30c407993c930f76777f693', class: "gux-negative-button" }, h("slot", { key: '451a38cfa2e7e1544ed71ee43ea05aace7efb661', name: "negative-button" })))));
+        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" })))));
     }
     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: '94b16dc60cbea6e1d78b988ace9f2f0730489c0c', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '42be6592e1ccbbdcc93902a9b9f203199fa1ca5d', 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: 'f9b06ba4837c32b5dfd8d6233e4c308faba199c7', expanded: this.opened, disabled: this.disabled }, h("div", { key: 'f89e194b78859e4fc7bb4cdcceef1ae7fa3782e6', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '5f0034e7e4de52e27101121a61edc8e9ce29373f', 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: '24d22ea767f69a998a522bcf8554b3c1e0085a9f', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '92a1f295682e39d20598e8552e64caf34faaf1a4', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '8bd6a915c60fb7b2c9233e3eb31de259cec8821d', class: "gux-icon-wrapper" }, h("gux-icon", { key: '9d9e9369da50a4497bb39de473aa66e0b1946c6d', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '7368775bed0ab1a7171493c91d2d22eb4d5fac75', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: '09ce3cf94503ddd3b4a9c7f81609b1f1aea1c249', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'fa8492040da77c1f97abf8a5e3660b3223372500', "label-position": "screenreader" }, h("label", { key: '4b5b4c48f47c48c17a683caff813abfb79e81286', slot: "label" }, this.i18n('searchAria')), h("input", { key: '243396bf7efb1b1366717cd3075a6dad86cde2a9', slot: "input", type: "search", onInput: (event) => {
+        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) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '31fa0ae21688f4133c7f2166eb04caaeb47a4785', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'd792e3d51da170ade6c9dcbcf303da8bd8fa7d2b' }))))));
+            }, 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' }))))));
     }
     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: 'ddef471b42c98794dab1a0e5e755cf54fec2b0c2', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '20de61af1b0b1708fff14674f935681fc8aee6fa', 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: '6d1a848d5390dca8a58c7b80a4eed44827bf1115', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '7fc00905888e1fa6ec8a4d7b3af68366a793793c', id: this.panelId, class: {
+        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: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: 'e884ac7e55fe4dca6fbbb974246ad1f56c08123a', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: '15a78fbfc0740a4312a6790f546e9dd85bf8867c', 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: '5f457e12306e532a5faeb08ccd5088def404500d', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '9320f3205d2140c8297960533c16a6f42d112873', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '313656eb077ba16cae4e0a1e6b0ccd5a28ad5591', class: "gux-modal-header", id: titleID }, h("slot", { key: '713027a2e52f39d690f4ae9f54fa53338c9c74d8', name: "title" }))), h("gux-dismiss-button", { key: '9d6f660adca155f6ad6cabc57ec47fcff5288689', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: 'a627f9095e3fe0c5ad4e3c147bd8df2a1329ebd6', class: {
+        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: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'dcd2c29acc0a5af774e3e9979db379f7209d0bdc' }, h("slot", { key: 'b43de22c106dcb9f96635b4c3db484597869f236', name: "content" }))), hasFooterButtons && (h("div", { key: '69e643ca248133f867c0ff0685d9b659acbfd870', class: "gux-button-footer" }, h("div", { key: 'bd33f4551ca3541a26ffab0fb5a99942c4b5fffe', class: "gux-left-align-buttons" }, h("slot", { key: '1705c355ed16be660a6ae1e133fadfd564c2ae50', name: "left-align-buttons" })), h("div", { key: 'e35f60dc7090908e1a4fccae789b7fe833309d7d', class: "gux-right-align-buttons" }, h("slot", { key: '6c481dc20a43810f482ebda0193d5d740a3cb161', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, 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())));
     }
     // 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: 'e89fcf11738baf03317d7c56273811131da3f7b0' }, h("div", { key: '89277a68a30e49eb069115ca11311d9ddd6830f9', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'f665c7775ae1a6a6ff1958a8c34483b29341adec', name: "icon" })), h("div", { key: 'ddd5b9585bfdbc8c6370144f028ca3c4c38e6504', class: "gux-content" }, h("gux-truncate", { key: 'ccae37cd7fc780b22aaa7fac06e7a4e6565a0320', class: "gux-title", "max-lines": 1 }, h("slot", { key: '06b2199b949c06e3af9b6070dac58c5d265fd7c9', name: "title" })), h("gux-truncate", { key: '9661906d06cb5c49d7eea6c8eb76909dcbb7ecbc', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'bf0cf6c4bfc6216323bcc4a38ad297cb8b160610', name: "message" }))), h("gux-dismiss-button", { key: '81a8198540694dcc1a8bd2c11ef64679c8393145', onClick: this.onDismissClickHandler.bind(this) })));
+        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) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();