genesys-spark-components 4.111.6 → 4.113.0

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow.js

@@ -0,0 +1,218 @@
+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, Host } from "@stencil/core";
+import { autoUpdate, computePosition, offset } from "@floating-ui/dom";
+import { OnClickOutside } from "../../../../utils/decorator/on-click-outside";
+import { trackComponent } from "../../../../utils/tracking/usage";
+import { logWarn } from "../../../../utils/error/log-error";
+import { groupKeyboardNavigation } from "../gux-avatar-group.service";
+import { afterNextRenderTimeout } from "../../../../utils/dom/after-next-render";
+/**
+ * @slot - a number of gux-avatar-overflow-items
+ */
+export class GuxAvatarOverflow {
+    constructor() {
+        this.delayTime = 250;
+        this.count = 0;
+        this.expanded = false;
+    }
+    async componentWillLoad() {
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        if (this.expanded) {
+            this.runUpdatePosition();
+        }
+    }
+    componentDidUpdate() {
+        if (this.expanded) {
+            this.runUpdatePosition();
+        }
+        else if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.focusDelayTimeout);
+        clearTimeout(this.hideDelayTimeout);
+        if (this.cleanupUpdatePosition) {
+            this.cleanupUpdatePosition();
+        }
+    }
+    onClickOutside() {
+        this.expanded = false;
+    }
+    onKeydown(event) {
+        groupKeyboardNavigation(event, this.root);
+        switch (event.key) {
+            case 'Escape': {
+                this.hide();
+                const target = event.target;
+                if (target.tagName === 'GUX-AVATAR-OVERFLOW-ITEM-BETA') {
+                    this.focusDelayTimeout = afterNextRenderTimeout(() => {
+                        var _a;
+                        (_a = this.overflowButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+                    });
+                }
+                break;
+            }
+            case 'Tab':
+                this.hide();
+                break;
+        }
+    }
+    onClick(e) {
+        e.stopPropagation();
+        const target = e.target;
+        if (target.tagName === 'GUX-AVATAR-OVERFLOW-ITEM-BETA') {
+            // Reset scroll on menu when clicked to avoid scroll jump when reopened
+            this.menuElement.scrollTop = 0;
+            this.expanded = false;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxClose() {
+        this.hide();
+    }
+    runUpdatePosition() {
+        if (this.root.isConnected) {
+            this.cleanupUpdatePosition = autoUpdate(this.overflowButtonElement, this.menuElement, () => this.updatePosition(), {
+                ancestorScroll: true,
+                elementResize: true,
+                animationFrame: true,
+                ancestorResize: true
+            });
+        }
+        else {
+            this.disconnectedCallback();
+        }
+    }
+    updatePosition() {
+        if (this.root) {
+            void computePosition(this.overflowButtonElement, this.menuElement, {
+                placement: 'bottom-start',
+                strategy: 'fixed',
+                middleware: [
+                    offset({
+                        mainAxis: 4,
+                        crossAxis: 4
+                    })
+                ]
+            }).then(({ x, y }) => {
+                Object.assign(this.menuElement.style, {
+                    left: `${x}px`,
+                    top: `${y}px`
+                });
+            });
+        }
+    }
+    getCount() {
+        const menuItems = Array.from(this.root.children);
+        if (menuItems.some(item => item.tagName !== 'GUX-AVATAR-OVERFLOW-ITEM-BETA')) {
+            logWarn(this.root, 'Only gux-avatar-overflow-item-beta elements are allowed as children.');
+        }
+        if (menuItems) {
+            return menuItems.length;
+        }
+    }
+    toggleOverflowMenu() {
+        if (!this.expanded) {
+            this.show();
+        }
+        else {
+            this.hide();
+        }
+    }
+    show() {
+        clearTimeout(this.hideDelayTimeout);
+        this.expanded = true;
+        this.hideDelayTimeout = afterNextRenderTimeout(() => {
+            this.focusOnMenu();
+        });
+    }
+    hide() {
+        if (this.expanded) {
+            this.hideDelayTimeout = setTimeout(() => {
+                this.expanded = false;
+            }, this.delayTime);
+        }
+    }
+    focusOnMenu() {
+        const overflowItems = Array.from(this.root.children);
+        const nextFocusableElement = overflowItems[0];
+        void nextFocusableElement.focus();
+    }
+    render() {
+        return (h(Host, { key: '1eca1d8373f1f8bce38195b234b2aa6c85489d66', role: "menuitem" }, h("button", { key: '52681498cf89bd86b0d0e906009feccf49254424', class: "gux-avatar-overflow", ref: el => (this.overflowButtonElement = el), onClick: () => this.toggleOverflowMenu(), tabIndex: -1, "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, h("span", { key: 'e542e692be6b5e40794526311b35647dafa77a5a', class: "gux-avatar-overflow-wrapper" }, h("span", { key: 'fcf9797285a72682a4a676f980f9da0ebf98ff55', class: "gux-avatar-overflow-content" }, " +", this.getCount()))), h("div", { key: '390fe4b03689c2390022d871bcdf46cfeae773c3', class: {
+                'gux-menu-wrapper': true,
+                'gux-shown': this.expanded
+            }, ref: el => (this.menuElement = el) }, h("div", { key: 'e9775de055cf867360eb43ef87b56c1e4846d283', role: "menu", class: "gux-menu-content" }, h("slot", { key: 'f87d83d682723774826e175ddac0142daa5340f5' })))));
+    }
+    static get is() { return "gux-avatar-overflow-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-overflow.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-overflow.css"]
+        };
+    }
+    static get states() {
+        return {
+            "count": {},
+            "expanded": {}
+        };
+    }
+    static get methods() {
+        return {
+            "guxClose": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "onKeydown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "click",
+                "method": "onClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxAvatarOverflow.prototype, "onClickOutside", null);

package/dist/collection/components/beta/gux-avatar-group/gux-avatar-overflow/gux-avatar-overflow.service.js

@@ -0,0 +1,70 @@
+export function overflowNavigation(event, currentElement) {
+    switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+            event.stopPropagation();
+            event.preventDefault();
+            focusPreviousSiblingLoop(currentElement);
+            break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+            event.stopPropagation();
+            event.preventDefault();
+            focusNextSiblingLoop(currentElement);
+            break;
+        case 'Home':
+            event.stopPropagation();
+            event.preventDefault();
+            focusFirstSibling(currentElement);
+            break;
+        case 'End':
+            event.stopPropagation();
+            event.preventDefault();
+            focusLastSibling(currentElement);
+            break;
+    }
+}
+function focusFirstSibling(currentElement) {
+    const firstFocusableElement = getFirstFocusableElement(currentElement);
+    if (firstFocusableElement) {
+        void firstFocusableElement.focus();
+    }
+}
+function focusLastSibling(currentElement) {
+    const lastFocusableElement = getLastFocusableElement(currentElement);
+    if (lastFocusableElement) {
+        void lastFocusableElement.focus();
+    }
+}
+function focusPreviousSiblingLoop(currentElement) {
+    const previousFocusableElement = currentElement.previousElementSibling;
+    if (previousFocusableElement) {
+        void previousFocusableElement.focus();
+    }
+    else {
+        focusLastSibling(currentElement);
+    }
+}
+function focusNextSiblingLoop(currentElement) {
+    const nextFocusableElement = currentElement.nextElementSibling;
+    if (nextFocusableElement) {
+        void nextFocusableElement.focus();
+    }
+    else {
+        focusFirstSibling(currentElement);
+    }
+}
+function getFirstFocusableElement(currentElement) {
+    let firstFocusableElement = currentElement;
+    while (firstFocusableElement.previousElementSibling !== null) {
+        firstFocusableElement = firstFocusableElement.previousElementSibling;
+    }
+    return firstFocusableElement;
+}
+function getLastFocusableElement(currentElement) {
+    let lastFocusableElement = currentElement;
+    while (lastFocusableElement.nextElementSibling !== null) {
+        lastFocusableElement = lastFocusableElement.nextElementSibling;
+    }
+    return lastFocusableElement;
+}

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

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

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

@@ -62,7 +62,7 @@ export class GuxCTAGroup {
         this.validateDismissSlot(this.root.querySelector('[slot=dismiss]'));
     }
     render() {
-        return (h("div", { key: '96b385023ac2c33b01b33349d38914cdb3e6c0f2', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: '88ae8d58fcca55a91d335285e71260495a8e804a', name: "primary" }), h("slot", { key: 'bf1a700d4ec8f42216c78f335937853d6cd98e59', name: "secondary" }), h("slot", { key: 'f3894780710aeaa6541f8856b19d4062bc37dce4', name: "dismiss" })));
+        return (h("div", { key: '4dd3eefd10c0b9ec4700a79c133808dd9a12d657', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'ae76a7d3ded9990c91b0da787f2a6bc8fd06854c', name: "primary" }), h("slot", { key: '3059cb1e5f5e9d6b63543968f32beeb00e851531', name: "secondary" }), h("slot", { key: '2c4362717183c21600dfbb85965214ba26670c84', name: "dismiss" })));
     }
     static get is() { return "gux-cta-group"; }
     static get encapsulation() { return "shadow"; }

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

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

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

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

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

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

package/dist/collection/components/beta/gux-form/gux-form-description/gux-form-description.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormDescription {
     render() {
-        return (h("slot", { key: 'e4c4c2e660cac80462fb436b5a903d319335917b' }));
+        return (h("slot", { key: '36b2592cec2fd1ac72858ebd2b3f7126be9d2fde' }));
     }
     static get is() { return "gux-form-description"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-fieldset-heading/gux-form-fieldset-heading.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormFieldsetHeading {
     render() {
-        return (h("slot", { key: 'aa3dedf40c53c691c895e818925e1c55dda1808a' }));
+        return (h("slot", { key: '53b701049b6b3af92766ee428bb48e34ea97a7a8' }));
     }
     static get is() { return "gux-form-fieldset-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.js

@@ -11,9 +11,9 @@ export class GuxFormFooter {
         trackComponent(this.root, { variant: this.placement });
     }
     render() {
-        return (h(Host, { key: 'a10f053969f6e06355ce6201a4644c60b9f6d257', class: {
+        return (h(Host, { key: '1800b2ba3ff355461ca245554972bd430275bd21', class: {
                 [`gux-form-footer-${this.placement}`]: true
-            } }, h("slot", { key: 'a510ed08050f3ae9f4b3e6499f7199a9c10b1bc5' })));
+            } }, h("slot", { key: 'a51e6da5a63bf167e8fed7dfff493e21c9a7b947' })));
     }
     static get is() { return "gux-form-footer"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-form/gux-form-heading/gux-form-heading.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxFormHeading {
     render() {
-        return (h("slot", { key: 'efd15e7076eee788198c8839a636a1eb8921f3b0' }));
+        return (h("slot", { key: 'ab8e68c9891db9e8ed2186c43228a344187ee889' }));
     }
     static get is() { return "gux-form-heading"; }
     static get encapsulation() { return "shadow"; }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class GuxForm {
     render() {
-        return (h("slot", { key: '972101b460b0688fd2c178532cee9f4b022d1551' }));
+        return (h("slot", { key: '0609f7683ca92e45a2e0d2002c28e0d96640b40c' }));
     }
     static get is() { return "gux-form-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -25,7 +25,7 @@ export class GuxIconTooltip {
         return await this.tooltip.hideTooltip();
     }
     render() {
-        return (h("div", { key: '9d7877974b1ec769bbabc36e4e6dcb617fe71f13', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'b775e0d3421511c6ab276cd591bb29775d266595' }, h("slot", { key: '0c0a2538bd60553070dd2935432d9bd844267051', name: "content" })), h("gux-icon", { key: '13303179e2856e5e0ef17a1321e08e58aaac3be1', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'addd341ed182ec261e5d600d1bd4dc8dab351a92', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '7439c6f444c757405a2386f6e18c2d36e807f2fc', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        return (h("div", { key: '8529bf15b3bfad65a31f81607c173ffc7445cd0f', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: 'eb9f2480775f73406dac9225072090281a3a4e59' }, h("slot", { key: '3a2ce42fa965c28b49f1dc28e9c0551d4874be8c', name: "content" })), h("gux-icon", { key: '67f296138e09629d2395232aaca01369450e23ca', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '016693d7a1ed09527171d3f20119cb6cdc125b8a', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: 'f83ba3a86c38f8e4cc7cfaee5d7cff46458a626e', slot: "content" }, getSlotTextContent(this.root, 'content')))));
     }
     static get is() { return "gux-icon-tooltip-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-label-info/gux-label-info.js

@@ -30,7 +30,7 @@ export class GuxLabelInfo {
         return await this.tooltipElement.hideTooltip();
     }
     render() {
-        return (h("div", { key: '0a8df28e7c2e878e06faacf935173ae36e71a7e8', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '16b5a6757748bd53eb6f8c0515ff5219daedc38e' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'd26ebf1df33c1355e3532f9bc6c04bc9fc560f82', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '3d70e832bacb7c4a1863d197c719440bc191c9b2', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: '5a21e16c4064e7226bec0923f568540fbf113eb1', name: "content" }))));
+        return (h("div", { key: 'a5cfd50dddc948a84a89406180423e1f2baf3586', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: '242deb6d19f64e64436c867d9ea5cba84c0e69e3' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: '33dcf9d4c85d875532483961f2639e0c6f5b0fdc', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: '439645c57b526ee7f84d67ef8423a38c46dcd12f', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'ca4ee786cba6a3cc7278ef642ff3abb8fd79494a', name: "content" }))));
     }
     static get is() { return "gux-label-info-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ export class GuxLink {
         return !!getClosestElement('.gux-breadcrumb-generation', this.root);
     }
     render() {
-        return (h(Host, { key: 'ff833826e421c0388207abc54ae059a5d703303c', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: '1987d0a30c61e2061882070faf0ee92078f786d3' })));
+        return (h(Host, { key: '73b70b6b28b08bdc4fbec5d6eba37adf1485199f', size: this.size, standalone: this.standalone, class: { 'gux-breadcrumb-link': this.checkBreadcrumbParent() } }, h("slot", { key: 'd7df0d43acc82097e460659345ab845f6a4277e5' })));
     }
     static get is() { return "gux-link-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -166,7 +166,7 @@ export class GuxMonthCalendar {
         return (h("gux-month-list", null, monthButtons));
     }
     render() {
-        return (h("div", { key: '1424303403cccce25ae58839ffde139435cd7a12', class: {
+        return (h("div", { key: '84a2981890cf379e96d4b2d43d9371ea939d5806', class: {
                 'gux-hidden': !this.expanded,
                 'gux-month-calendar': true
             } }, this.renderHeader(), this.renderMonths()));

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

@@ -22,7 +22,7 @@ export class GuxMonthListItem {
         }
     }
     render() {
-        return (h(Host, { key: '9926fc852f8d9d32a5870cce6531d79c65886f33', role: "listitem", value: this.value }, h("div", { key: '554da394b223e1940ec31c22cc2a0f1640c4b1dc', class: "gux-container" }, h("button", { key: '7b7147ed8676d54702728769eb83bcbaf6d766dc', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '59592a31eaef4f03df031cc655209d3c570021ca' })))));
+        return (h(Host, { key: 'ad0ecf6d8957eb96eb4ab0b7934e777dd15142a1', role: "listitem", value: this.value }, h("div", { key: '81ad4c6a4cf0993cb2aa7b321eda7bb7d2d1ced9', class: "gux-container" }, h("button", { key: 'c4db6ec6902fb0d0baa62ccd7097d0ff2b4cfd53', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'bf7f8e72ffc4a57669a3eb1ff713b5a37064073f' })))));
     }
     static get is() { return "gux-month-list-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,7 +38,7 @@ export class GuxMonthList {
         first(this.root, validFocusableItems);
     }
     render() {
-        return (h(Host, { key: 'c134a4b9abc1d870e010a86857f9933012216737', role: "list" }, h("slot", { key: '343ffdf8fd2978166a9ef2a13748534fa5aaf1a9' })));
+        return (h(Host, { key: 'd9ab73cd1531fff0d46e179303b22ccceb8926d7', role: "list" }, h("slot", { key: '3748b9606d4e258d3e0f78211df88b8cde89bfd0' })));
     }
     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: 'df84d6a853f2820d190b7a43721018e820b584bd', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'd86acaf580192ffb933f1bddd919ceb60f6c8064', 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: '1328101d17ba82ed15277fa2d8a56c2dff011614', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '7a4cf36b39c5bdd966ce1e55dbbdd53e97b53c90', 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: '5e481cf437fbeeb2b9a504cbab1bc379dbe7fba6', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '37097ff16c78960e146808147fc29da4b0381693', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '1ef55c5205040fabe293a146b07e5a1f56468657', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '4527d7f23a405d8d937c5bb5150ae7b88286b946', class: "gux-arrow-caret" })), h("div", { key: '877961881a63783b4fa19387badb63cac0701540', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '8ab06c20228f35f0925abd7f125b237ddaa2cdac', name: "title" }), this.renderDismissButton()), h("div", { key: '71eec119b566ee0093dc0f0ac4b4406d2d17ba78', class: "gux-popover-content" }, h("slot", { key: '4794c27cb2eca72bf18132ff1daae35369576a71' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: 'd351ddc5005bc742d78a3d3421be9d17e5269671', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '4269fca2eaa5072b4797fbc8f7f76e637d4f425c', class: "gux-arrow-caret" })), h("div", { key: '7997ad6bc0a9ce3e5e05f21c532bd309ca71c8bf', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'd7561c283fed7d1e1412e77b9123e2184c4645d7', name: "title" }), this.renderDismissButton()), h("div", { key: '35ff91d63e2364a3a00656814bb22eaf6da3f9a1', class: "gux-popover-content" }, h("slot", { key: '48623dcb0f8bec52b3c17bf1ceb2a587f32a818b' }))));
     }
     static get is() { return "gux-popover-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -159,10 +159,10 @@ export class GuxPopoverList {
         }
     }
     render() {
-        return (h("div", { key: 'bba93a975439a4a6ef2472803e25f2668471dce6', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '9294234dfdacafbca88968ce1b952c6f6124ade7', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true, popover: "manual" }, h("div", { key: '0e516e82a5a226ceffdd703e406c3ef11394346f', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: '0299fcb96c6d0fcdafe7c35b98e01e15565cde7b', onClick: this.dismiss.bind(this) })), h("div", { key: 'c7b90ce318294711b5e4204859c9a3a2303d46f8', class: "gux-popover-content" }, h("slot", { key: 'cedca527d7b66e525193ceb4035ebb4665aef4f6' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: 'eb9daf084e2a447cc22f36284e2e7d9d9c930d2c', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), this.displayDismissButton && (h("gux-dismiss-button", { key: 'ed5f74d0e04152a8be18bfa72c187ce66e3066bb', onClick: this.dismiss.bind(this) })), h("div", { key: 'f4856c1a0890bb05f680c5a039f2fbb1294b0a8b', class: "gux-popover-content" }, h("slot", { key: 'a0dd537f9acddd6939ee254385d5739019eb30ec' }))));
     }
     static get is() { return "gux-popover-list-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,6 +17,7 @@ import { afterNextRender } from "../../../../../utils/dom/after-next-render";
 export class GuxRichTextEditorActionLink {
     constructor() {
         this.disabled = false;
+        this.isActive = false;
         this.isOpen = false;
     }
     onClickOutside() {
@@ -69,11 +70,11 @@ export class GuxRichTextEditorActionLink {
     }
     renderTooltip() {
         if (!this.disabled) {
-            return (h("gux-tooltip", null, h("div", { slot: "content" }, this.i18n('link'))));
+            return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n('link'))));
         }
     }
     render() {
-        return (h(Host, { key: '166f87e1bb3c3565cb3dd4e05099a83cfa23f80a' }, h("gux-button-slot", { key: '15b8d3f16c91c7d601e3859cabc7fb71871f4533', accent: "ghost", "icon-only": true }, h("button", { key: '8349fa9d8d15f1f820035d1669ef60d10829022d', id: "popover-target", class: { 'gux-is-pressed': this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled, "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: 'c98e7654129a3160adbc03b9c08c4109122fff21', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: 'd9c70c9f4ad55ebb955751d349d9242b88a16ab1', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: '156f243b70d8cf32e237ea751dd274cb7b764176', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: '819c53504c6e99da78637c9a0cdebac0c19cccb2' }, h("input", { key: '7e11f6f5c0032c99cda31355b0b8b757dccbea47', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '3f66bb54612a3cac364a8f43025bcd7f095656f7', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: '842113a08dbcc053ac64726c87fb5a2d89b259de' }, h("input", { key: '836db888c19706a4b14dc7d35eb55e902fcd45a5', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: 'aaf0d14cccb4b44bf1a7c32bad1302975244fc5b', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '8e3a45cb60f5b7d99504518ccc88f0d6a57e4d53', align: "end" }, h("gux-button", { key: 'a8893b5a2265d48e07eeb154d19b4ccebc6e7147', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '34855e70fa26628fd9f64420acb6b654bdbaf9ab', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
+        return (h(Host, { key: 'c51c67c1063f35575b11db91781763b1a54f9bb1' }, h("gux-button-slot", { key: '921372b56a841e108352fe26722d3455e3fcf799', accent: "ghost", "icon-only": true }, h("button", { key: '1fad4601444c237ae0931950b0bbe031ed265d7f', id: "popover-target", class: { 'gux-is-pressed': this.isActive || this.isOpen }, onClick: () => this.togglePopover(), ref: el => (this.actionButton = el), type: "button", disabled: this.disabled, "aria-label": this.i18n('link'), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-pressed": this.isActive.toString() }, h("gux-icon", { key: 'aed90b615e1e1c4ff08113cfa08a08ee2289f663', size: "small", "icon-name": "fa/link-simple-regular", decorative: true })), this.renderTooltip()), h("gux-popover", { key: '4bf2e0f0c8d8e4b55b814fb45f654cc3a4aea66d', "is-open": this.isOpen, for: "popover-target" }, h("div", { key: '1238ca6fe3ca06e12d822a4d4e83e91181e8a44a', class: "gux-popover-content-wrapper" }, h("gux-form-field-text-like", { key: 'bd7adba7b234b2ee11fd48429757c5e4b8e4cbac' }, h("input", { key: '4e04b841b194fb92674af30148c9e6d843caaf56', id: "textToDisplay", ref: el => (this.textToDisplayInputElement = el), slot: "input", type: "text" }), h("label", { key: '239b6f659d59a85db2137691c9a4d7a05c003b83', slot: "label" }, this.i18n('textToDisplay'))), h("gux-form-field-text-like", { key: 'fe15940a60b7e196f24d578d101f1ef5caf0650c' }, h("input", { key: 'ad8a588ed0433b112929bbac1ee3a9371a467671', ref: el => (this.linkAddressInputElement = el), slot: "input", type: "text" }), h("label", { key: 'ed65192ef701827a4ed60579c51164aa1e4f15dd', slot: "label" }, this.i18n('linkAddress'))), h("gux-cta-group", { key: '6369a6d6bd4a5268c955d12a81b05de28a974f63', align: "end" }, h("gux-button", { key: '468ccc4f482e7a622d2ca3b4fee2b1aae413d831', onClick: () => this.emitLinkOptions(), slot: "primary" }, this.i18n('insert')), h("gux-button", { key: '8f46d9f041a70f747a56f398eaa62d346b86559f', onClick: () => this.togglePopover(), slot: "dismiss" }, this.i18n('cancel')))))));
     }
     static get is() { return "gux-rich-text-editor-action-link"; }
     static get encapsulation() { return "shadow"; }
@@ -106,6 +107,24 @@ export class GuxRichTextEditorActionLink {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "isActive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-active",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -134,6 +134,11 @@ export class GuxRichTextEditorActionRichStyle {
     renderListItem(item) {
         return (h("gux-truncate", { "max-lines": 1 }, item.textContent));
     }
+    renderTooltip() {
+        if (!this.disabled && !this.expanded) {
+            return (h("gux-tooltip-beta", null, h("div", { slot: "content" }, this.i18n('richStyle'))));
+        }
+    }
     onActionButtonClick() {
         this.expanded = !this.expanded;
         if (this.expanded) {
@@ -158,12 +163,12 @@ export class GuxRichTextEditorActionRichStyle {
         return (h("div", { class: "gux-list-container", slot: "popup" }, h("gux-rich-text-editor-list", { ref: el => (this.listElement = el), onClick: e => this.onListClick(e) }, h("slot", null))));
     }
     renderTarget() {
-        return (h("gux-button-slot", { accent: "ghost", slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderTargetDisplay(), h("gux-icon", { "icon-name": this.expanded
+        return (h("gux-button-slot", { accent: "ghost", slot: "target" }, h("button", { type: "button", ref: el => (this.actionButton = el), class: { 'gux-is-pressed': this.expanded }, onClick: () => this.onActionButtonClick(), disabled: this.disabled || hasDisabledParent(this.root), "aria-haspopup": "true", "aria-expanded": this.expanded.toString() }, this.renderTargetDisplay(), h("gux-icon", { size: "small", "icon-name": this.expanded
                 ? 'custom/chevron-up-small-regular'
-                : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') }))));
+                : 'custom/chevron-down-small-regular', "screenreader-text": this.i18n('richStyleDropdown') })), this.renderTooltip()));
     }
     render() {
-        return (h("gux-popup", { key: 'f08a0a259e66577c1d0efd652ef0ade412b54963', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '40e3c24df747dea627240ba4604c7d7c595a83b5', expanded: this.expanded, exceedTargetWidth: true, placement: "bottom-start" }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-rich-text-editor-action-rich-style"; }
     static get encapsulation() { return "shadow"; }