genesys-spark-components 4.100.0 → 4.101.1

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

@@ -0,0 +1,67 @@
+import { h, Host } from "@stencil/core";
+import { trackComponent } from "../../../utils/tracking/usage";
+import { logWarn } from "../../../utils/error/log-error";
+import { setFocusTarget, resetFocusableSibling } from "./gux-avatar-group.service";
+/**
+ * @slot - slot for gux-avatar-group-item components
+ */
+export class GuxAvatarGroup {
+    async componentWillLoad() {
+        trackComponent(this.root);
+        if (this.root.querySelectorAll('gux-avatar-group-item-beta').length === 0) {
+            logWarn(this.root, 'gux-avatar-group-beta: No gux-avatar-group-item-beta tags found in slot. Please add gux-avatar-group-item-beta tags to the slot.');
+        }
+    }
+    componentDidLoad() {
+        this.setInitialFocusTarget();
+    }
+    setInitialFocusTarget() {
+        const groupItems = Array.from(this.root.children);
+        if (groupItems.length > 0) {
+            const firstGroupItem = groupItems[0];
+            setFocusTarget(firstGroupItem);
+        }
+    }
+    onMouseOver(event) {
+        this.hideCurrentTooltip(event);
+    }
+    hideCurrentTooltip(event) {
+        const target = event.target;
+        const groupItems = Array.from(this.root.children);
+        const focusedChild = groupItems.find(child => child.matches(':focus-within'));
+        if (focusedChild && focusedChild !== target) {
+            focusedChild.hideTooltip();
+        }
+    }
+    handleClick(event) {
+        const clickedElement = event.target;
+        resetFocusableSibling(clickedElement);
+        setFocusTarget(clickedElement);
+    }
+    render() {
+        return (h(Host, { key: 'a0c74e33fa71e345201ab4c1f0cea37fd767f40a', role: "menu", onClick: this.handleClick.bind(this) }, h("slot", { key: '761b86e5d15febdb0334abd3bf390042643e7d68' })));
+    }
+    static get is() { return "gux-avatar-group-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-avatar-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-avatar-group.css"]
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "mouseover",
+                "method": "onMouseOver",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }];
+    }
+}

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

@@ -0,0 +1,109 @@
+export function groupKeyboardNavigation(event, currentElement) {
+    switch (event.key) {
+        case 'ArrowLeft':
+            event.stopPropagation();
+            event.preventDefault();
+            focusPreviousSiblingLoop(currentElement);
+            break;
+        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;
+    }
+}
+export function resetFocusableSibling(element) {
+    const focusableSibling = getSiblings(element).find((sibling) => {
+        const button = getGroupItemButton(sibling);
+        return button && button.tabIndex !== -1;
+    });
+    if (focusableSibling) {
+        setItemTabIndex(focusableSibling, -1);
+    }
+}
+export function setFocusTarget(element) {
+    setItemTabIndex(element, 0);
+}
+function focusFirstSibling(currentElement) {
+    const firstFocusableElement = getFirstFocusableElement(currentElement);
+    if (firstFocusableElement) {
+        void firstFocusableElement.guxFocus();
+        void setItemTabIndex(firstFocusableElement, 0);
+        void resetFocusableSibling(firstFocusableElement);
+    }
+}
+function focusLastSibling(currentElement) {
+    const lastFocusableElement = getLastFocusableElement(currentElement);
+    if (lastFocusableElement) {
+        void lastFocusableElement.guxFocus();
+        void setItemTabIndex(lastFocusableElement, 0);
+        void resetFocusableSibling(lastFocusableElement);
+    }
+}
+function focusPreviousSiblingLoop(currentElement) {
+    const previousFocusableElement = currentElement.previousElementSibling;
+    setItemTabIndex(currentElement, -1);
+    if (previousFocusableElement) {
+        void previousFocusableElement.guxFocus();
+        void setItemTabIndex(previousFocusableElement, 0);
+    }
+    else {
+        focusLastSibling(currentElement);
+    }
+}
+function focusNextSiblingLoop(currentElement) {
+    const nextFocusableElement = currentElement.nextElementSibling;
+    setItemTabIndex(currentElement, -1);
+    if (nextFocusableElement) {
+        void nextFocusableElement.guxFocus();
+        void setItemTabIndex(nextFocusableElement, 0);
+    }
+    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;
+}
+function getGroupItemButton(element) {
+    var _a;
+    return (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+}
+function getSiblings(element) {
+    const siblings = Array.from(element.parentElement.children);
+    // Early return for performance when there are no siblings
+    if (siblings.length <= 1) {
+        return [];
+    }
+    return siblings.filter(child => child !== element);
+}
+function setItemTabIndex(element, newIndex) {
+    const button = getGroupItemButton(element);
+    if (button) {
+        button.tabIndex = newIndex;
+    }
+    else {
+        console.log('No button found in the gux-avatar-group-item element');
+    }
+}

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: '06cea2ee177e04b06cbeb787c5e4d9ca146a120d', class: "gux-calendar-beta" }, h("slot", { key: 'bee83ea56f4f17c14376528fabe878e287e66d4b' }), this.renderHeader(), this.renderContent()));
+        return (h("div", { key: '4810ec697a88feab92ed7bb5f0deb725755de699', class: "gux-calendar-beta" }, h("slot", { key: 'cfde02db14b9d5d3fc68905f86ed4718828e0364' }), 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: 'ea48cb42883a8e129c88d39bc26430bb998f7e6d', class: `gux-cta-group gux-${this.align}-align` }, h("slot", { key: 'b3a420b15d08d01b9f640891228c443f93197497', name: "primary" }), h("slot", { key: 'bb98fe2475fb716dda62cfb887a63c3042a10be3', name: "secondary" }), h("slot", { key: '6bf8a3c8152cda870f7d3036c837918f83dee8e1', name: "dismiss" })));
+        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" })));
     }
     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: '9385c8d0c79a8839c2eb3624d17dbb7aa66f0949' }, this.renderDate()));
+        return (h(Host, { key: '844c1c8ec9d4c871aecdf1668c5f421e48d4fd0c' }, 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: '26d5041890230bf99ff1d98916e54d3838e007e7' }, this.renderDateTime()));
+        return (h(Host, { key: '7dc17d0204f9fabcda004ad2cd414181ba3f6170' }, 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: '4dfa8e7f981b91025eae981d669566ffa1253b1a', 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: '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 }));
     }
     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: '94a9998b9411fbf8b09ecaf98f73c1b9a2e53050' }));
+        return (h("slot", { key: 'e4c4c2e660cac80462fb436b5a903d319335917b' }));
     }
     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: '955753bff72c465f0e72956388a5b358fff36a18' }));
+        return (h("slot", { key: 'aa3dedf40c53c691c895e818925e1c55dda1808a' }));
     }
     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: 'e029fc31ed5de0869aa0705225162559c53e0705', class: {
+        return (h(Host, { key: 'a10f053969f6e06355ce6201a4644c60b9f6d257', class: {
                 [`gux-form-footer-${this.placement}`]: true
-            } }, h("slot", { key: '3acdbefafd30f736eeee6ef36f64f6e1ad273211' })));
+            } }, h("slot", { key: 'a510ed08050f3ae9f4b3e6499f7199a9c10b1bc5' })));
     }
     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: '3c916a8b2173ae6b53b8046c3f925e13d2cf6d34' }));
+        return (h("slot", { key: 'efd15e7076eee788198c8839a636a1eb8921f3b0' }));
     }
     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: '5ae86892c61c1db5065ac21ebd14f4e81cfd316a' }));
+        return (h("slot", { key: '972101b460b0688fd2c178532cee9f4b022d1551' }));
     }
     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: '3b20ccaf0e499e8429c53e8c1fb7797f9670a847', class: "gux-icon-tooltip" }, h("gux-screen-reader-beta", { key: '856479e539bc5fa9d31bbecdb515bb3cb12e3480' }, h("slot", { key: 'b2ba5630a1e21a86cdf1a1c88a288be655caecee', name: "content" })), h("gux-icon", { key: '34df8f3f0d589512db100f7dbffae33f1f0c9886', "icon-name": this.iconName, size: "small", decorative: true }), h("gux-tooltip-beta", { key: '13f395f1bc88341ba85d8f4b7ac6e170d42d339c', placement: this.placement, ref: el => (this.tooltip = el) }, h("div", { key: '903935e57e9c178e07cdb04b798dd5bf473f89b3', slot: "content" }, getSlotTextContent(this.root, 'content')))));
+        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')))));
     }
     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: '002dd520b8963ca31fe898198c1bc461186c5418', class: "gux-label-info" }, h("gux-screen-reader-beta", { key: 'c3dc8f9f95e6d8c0cf72ae06700dea0433f61dbd' }, getSlotTextContent(this.root, 'content')), h("gux-icon", { key: 'fbd08623e72a315950a3d3664c14850fba79e08c', "icon-name": this.getVariantIcon(this.variant), size: "small", decorative: true }), h("gux-tooltip-beta", { key: 'cc8a5475fd40d8e21add82f1b689251831134fc1', placement: this.placement, ref: el => (this.tooltipElement = el) }, h("slot", { key: 'b84d0f31945c0e924e023694a85c53872004f57f', name: "content" }))));
+        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" }))));
     }
     static get is() { return "gux-label-info-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: '1bf08b790a5cdb3279809536c22f21f25febdbc0', class: {
+        return (h("div", { key: '9caf15653919c98d027292a800265c18ad663ed6', 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: '0c1de73e9c85b6f2fc0bdd201a7c488d9be4e012', role: "listitem", value: this.value }, h("div", { key: 'c04537773800e63a7968b7f7d64da46a2c3da07e', class: "gux-container" }, h("button", { key: '4caac77c98d9d7aefb2262b2c5d365fe763fca08', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: 'ccb35f53997ac2d353df127d8dd6208ab2d07727' })))));
+        return (h(Host, { key: '83c6451801cc01f11916968c5a7fbf8268e7fdaa', role: "listitem", value: this.value }, h("div", { key: 'd60137a28ca16e4cbb4750d7e4352da99645b146', class: "gux-container" }, h("button", { key: '2087bf628ae2c59cf72b4507ce1bba3deaf5484b', class: { 'gux-selected': this.selected }, type: "button", tabIndex: -1, disabled: this.disabled }, h("slot", { key: '2271fc3159882a272ca830df30ec18b521867b11' })))));
     }
     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: 'e166432f0a713540f4c1d23e48e0d843adb7161d', role: "list" }, h("slot", { key: 'a378cb4ca462756dccb95f15c991c215d8d436d0' })));
+        return (h(Host, { key: '73337930f8168b2cf3ea19e758840c4d73ede824', role: "list" }, h("slot", { key: '4cb56de3a3999f681f8706eecf1a8311d9aca3f0' })));
     }
     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: '6d0e344fb180a8d62bc065e373629c47dc097ae5', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '3e874f28af6bae4dd53e4f805751401fa48b2fb3', 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: '54e66bedfdede08e3aafa707cd56d996d164b138', expanded: this.expanded, disabled: this.disabled, "exceed-target-width": true }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '88fda2068da55381d5ac83f0853463c623d79c4a', 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: 'bb924b7ec748a448f35fc84fbfaa9be6814a5e0e', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '0956debf6d168a53d2392a9097d1021a40db81ed', ref: (el) => (this.popupElement = el), class: {
                 'gux-popover-wrapper': true,
                 'gux-hidden': !this.isOpen
-            }, "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' }))));
+            }, "data-placement": true, popover: "manual" }, h("div", { key: '8ac78e31d4225d15a19cb213340b43894421d401', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'e763e9f6aaadb4e6746227948e4565dcb9ad5da8', class: "gux-arrow-caret" })), h("div", { key: '89e0769e83e1275f6c59d83a8aec84ac781f0139', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '1f81a0750b248977353e6ee1071e053b8b4e1f00', name: "title" }), this.renderDismissButton()), h("div", { key: '01b627cce8e37043bbd65b34f1a60c1104edfd93', class: "gux-popover-content" }, h("slot", { key: 'b19b3f19dc701ea048b8d14460d743b215a1da63' }))));
     }
     static get is() { return "gux-popover-beta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,31 @@
+/* This is necessary to override the position of the popover on the page. By default, an HTML popover will
+   render in the middle of the screen, which we do not want */
+:popover-open {
+  position: absolute;
+  inset: unset;
+}
+
+.gux-popover-wrapper {
+  position: fixed;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  z-index: var(--gse-semantic-zIndex-popover);
+  display: inline-block;
+  padding-block: 8px;
+  padding-inline: 0;
+  overflow-y: hidden;
+  background-color: var(--gse-ui-popover-backgroundColor);
+  border: none;
+  border-radius: var(--gse-ui-popover-borderRadius);
+  box-shadow: var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color);
+  /* // TODO: COMUI-3210 - Arrow currently does not show  */
+}
+.gux-popover-wrapper.gux-hidden {
+  display: none;
+}
+.gux-popover-wrapper .gux-arrow {
+  position: absolute;
+  inline-size: var(--gse-ui-popover-anchor-width);
+  block-size: var(--gse-ui-popover-anchor-width);
+  background: var(--gse-ui-popover-backgroundColor);
+}