genesys-spark-components 4.91.1 → 4.93.0

package/dist/stencil-wrapper.js

@@ -7,7 +7,7 @@
  */
 import { defineCustomElements } from '../dist/loader';
 // Value templated out during build process (see scripts/wrap-stencil.js)
-export const COMPONENT_ASSETS_PATH = '/spark-components/build-assets/4.91.1-416/genesys-webcomponents/';
+export const COMPONENT_ASSETS_PATH = '/spark-components/build-assets/4.93.0-424/genesys-webcomponents/';
 // Default domain to load assets from
 const DEFAULT_DOMAIN = 'app.mypurecloud.com';
 // List of Genesys UI domains

package/dist/types/components/beta/gux-tooltip-base/gux-tooltip-base.d.ts

@@ -25,6 +25,11 @@ export declare class GuxTooltipBase {
     offsetX: number;
     offsetY: number;
     accent: GuxTooltipAccent;
+    /**
+     * Determines whether the text in the tooltip is read by screenreaders.
+     * Use for cases where the forElement component handles the accessibility.
+     */
+    visualOnly: boolean;
     /**
      * If tooltip is shown or not
      */

package/dist/types/components/beta/gux-tooltip-beta/gux-tooltip.d.ts

@@ -20,6 +20,11 @@ export declare class GuxTooltip {
      */
     placement: Placement;
     accent: GuxTooltipAccent;
+    /**
+     * Determines whether the text in the tooltip is read by screenreaders.
+     * Use for cases where the forElement component handles the accessibility.
+     */
+    visualOnly: boolean;
     showTooltip(): Promise<void>;
     hideTooltip(): Promise<void>;
     private updateForElement;

package/dist/types/components/stable/gux-button/gux-button.d.ts

@@ -5,6 +5,7 @@ import { GuxButtonAccent, GuxButtonType } from './gux-button.types';
  */
 export declare class GuxButton {
     private root;
+    private buttonId;
     /**
      * The component button type
      */
@@ -22,6 +23,7 @@ export declare class GuxButton {
     connectedCallback(): void;
     componentWillLoad(): void;
     render(): JSX.Element;
+    renderTooltip(): JSX.Element;
     private stopEventIfDisabled;
     private makeSlotContentDisableable;
     private hasIconOnly;

package/dist/types/components.d.ts

@@ -1321,6 +1321,10 @@ export namespace Components {
         "placement": Placement;
         "showTooltip": () => Promise<void>;
         "tooltipId": string;
+        /**
+          * Determines whether the text in the tooltip is read by screenreaders. Use for cases where the forElement component handles the accessibility.
+         */
+        "visualOnly": boolean;
     }
     interface GuxTooltipBeta {
         "accent": GuxTooltipAccent1;
@@ -1334,6 +1338,10 @@ export namespace Components {
          */
         "placement": Placement;
         "showTooltip": () => Promise<void>;
+        /**
+          * Determines whether the text in the tooltip is read by screenreaders. Use for cases where the forElement component handles the accessibility.
+         */
+        "visualOnly": boolean;
     }
     interface GuxTooltipTitle {
         "setHideTooltip": () => Promise<void>;
@@ -4395,6 +4403,10 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
         "tooltipId"?: string;
+        /**
+          * Determines whether the text in the tooltip is read by screenreaders. Use for cases where the forElement component handles the accessibility.
+         */
+        "visualOnly"?: boolean;
     }
     interface GuxTooltipBeta {
         "accent"?: GuxTooltipAccent1;
@@ -4406,6 +4418,10 @@ declare namespace LocalJSX {
           * Placement of the tooltip. Default is bottom-start
          */
         "placement"?: Placement;
+        /**
+          * Determines whether the text in the tooltip is read by screenreaders. Use for cases where the forElement component handles the accessibility.
+         */
+        "visualOnly"?: boolean;
     }
     interface GuxTooltipTitle {
     }

package/dist/types/stencil-wrapper.d.ts

@@ -1,2 +1,2 @@
-export declare const COMPONENT_ASSETS_PATH = "/spark-components/build-assets/4.91.1-416/genesys-webcomponents/";
+export declare const COMPONENT_ASSETS_PATH = "/spark-components/build-assets/4.93.0-424/genesys-webcomponents/";
 export declare function registerElements(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "genesys-spark-components",
-  "version": "4.91.1",
+  "version": "4.93.0",
   "description": "Common webcomponents",
   "license": "MIT",
   "main": "dist/stencil-wrapper.js",
@@ -41,8 +41,8 @@
     "svgo": "find ./src/components/stable/gux-icon/icons/**/*.svg -type f ! -path '*/legacy/*' -exec svgo {} +",
     "test": "TZ=UTC stencil test --spec --e2e",
     "test.ci": "TZ=UTC npm run test.ci.spec",
-    "test.ci.e2e": "TZ=UTC stencil test --e2e --max-workers=2",
-    "test.ci.spec": "TZ=UTC stencil test --spec --max-workers=2",
+    "test.ci.e2e": "TZ=UTC stencil test --e2e --maxWorkers=1",
+    "test.ci.spec": "TZ=UTC stencil test --spec --maxWorkers=1",
     "test.e2e": "TZ=UTC stencil test --e2e",
     "test.e2e.update-snapshot": "TZ=UTC stencil test --e2e --updateSnapshot",
     "test.screenshot": "TZ=UTC stencil test --e2e --screenshot",

package/dist/cjs/gux-screen-reader-beta_2.cjs.entry.js

@@ -1,103 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-79505d14.js');
-const usage = require('./usage-5d46aba1.js');
-const findElementById = require('./find-element-by-id-fde17c92.js');
-const randomHtmlId = require('./random-html-id-71c43d5a.js');
-
-const guxScreenReaderCss = ".gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-const GuxScreenReaderBetaStyle0 = guxScreenReaderCss;
-
-const GuxScreenReader = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-    }
-    componentWillLoad() {
-        usage.trackComponent(this.root);
-    }
-    render() {
-        return (index.h("span", { key: '5833c3dc9a14981e711c8ad8049d9494ae334e08', class: "gux-sr-only" }, index.h("slot", { key: 'd2a0fa01359aff542daca760147e60821c33dfe0' })));
-    }
-    get root() { return index.getElement(this); }
-};
-GuxScreenReader.style = GuxScreenReaderBetaStyle0;
-
-const GuxTooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.id = randomHtmlId.randomHTMLId('gux-tooltip');
-        this.forElement = undefined;
-        this.role = undefined;
-        this.for = undefined;
-        this.placement = 'bottom-start';
-        this.accent = 'light';
-    }
-    /*
-     * Show tooltip
-     */
-    async showTooltip() {
-        return await this.baseTooltip.showTooltip();
-    }
-    /*
-     * Hide tooltip
-     */
-    async hideTooltip() {
-        return await this.baseTooltip.hideTooltip();
-    }
-    updateForElement() {
-        this.forElement = this.getForElement();
-    }
-    componentWillLoad() {
-        usage.trackComponent(this.root, { variant: this.placement });
-    }
-    componentDidLoad() {
-        if (this.baseTooltip) {
-            this.tooltipObserver = new MutationObserver(() => {
-                var _a;
-                this.role = (_a = this.baseTooltip) === null || _a === void 0 ? void 0 : _a.role;
-            });
-            this.tooltipObserver.observe(this.baseTooltip, {
-                childList: true,
-                attributes: true,
-                attributeFilter: ['role']
-            });
-        }
-    }
-    connectedCallback() {
-        this.updateForElement();
-    }
-    disconnectedCallback() {
-        if (this.tooltipObserver) {
-            this.tooltipObserver.disconnect();
-        }
-    }
-    getForElement() {
-        if (this.for) {
-            const forElement = findElementById.findElementById(this.root, this.for);
-            if (!forElement) {
-                this.logForAttributeError();
-            }
-            return forElement;
-        }
-        else {
-            return this.root.parentElement;
-        }
-    }
-    logForAttributeError() {
-        if (this.root.isConnected) {
-            console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
-        }
-    }
-    render() {
-        return (index.h(index.Host, { key: 'd67714689706254bde15a07e63b63ae9fa4c50bc', id: this.id, role: this.role }, index.h("gux-tooltip-base-beta", { key: '180b9a944c2fd996a5180ae796a0e790b96e44d1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, index.h("span", { key: 'e8fe6d5c1566e6cd3795c80dd9dc346dd22d6e8a', slot: "content" }, index.h("slot", { key: 'a2cd637d7324ebd756f831b73c5b8110ef3f88b1', name: "content" }, index.h("slot", { key: '16746b53ca338be94ead51baaab40ffccc742dbe' }))))));
-    }
-    get root() { return index.getElement(this); }
-    static get watchers() { return {
-        "for": ["updateForElement"]
-    }; }
-};
-
-exports.gux_screen_reader_beta = GuxScreenReader;
-exports.gux_tooltip_beta = GuxTooltip;

package/dist/cjs/gux-tooltip-base-beta.cjs.entry.js

@@ -1,136 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-79505d14.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-139d92fc.js');
-const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-5d46aba1.js');
-const afterNextRender = require('./after-next-render-162425fe.js');
-
-const guxTooltipBaseCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;width:max-content;max-width:250px;pointer-events:none;border-radius:var(--gse-ui-tooltip-borderRadius);box-shadow:var(--gse-ui-tooltip-boxShadow-x, var(--gse-ui-tooltip-boxShadow-offsetX)) var(--gse-ui-tooltip-boxShadow-y, var(--gse-ui-tooltip-boxShadow-offsetY)) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:350ms;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));height:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));color:var(--gse-ui-tooltip-light-foregroundColor)}.gux-container ::slotted(*){width:100%;overflow-wrap:break-word;white-space:normal}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));height:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
-const GuxTooltipBaseBetaStyle0 = guxTooltipBaseCss;
-
-const GuxTooltipBase = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.pointerenterHandler = () => this.show();
-        this.pointerleaveHandler = () => this.hide();
-        this.focusinHandler = () => this.show();
-        this.focusoutHandler = () => this.hide();
-        this.forElementListeners = new Map([
-            ['pointerenter', this.pointerenterHandler],
-            ['pointerleave', this.pointerleaveHandler],
-            ['focusin', this.focusinHandler],
-            ['focusout', this.focusoutHandler]
-        ]);
-        this.id = randomHtmlId.randomHTMLId('gux-tooltip-base');
-        this.tooltipId = undefined;
-        this.forElement = undefined;
-        this.placement = 'bottom-start';
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.accent = 'light';
-        this.isShown = false;
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.isShown) {
-            this.hide();
-        }
-    }
-    /*
-     * Show tooltip
-     */
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async showTooltip() {
-        this.show();
-    }
-    /*
-     * Hide tooltip
-     */
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async hideTooltip() {
-        this.hide();
-    }
-    runUpdatePosition() {
-        this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
-            ancestorScroll: true,
-            elementResize: true,
-            animationFrame: false,
-            ancestorResize: true
-        });
-    }
-    updatePosition() {
-        const middleware = [floatingUi_dom_esm.offset(16), floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift(), floatingUi_dom_esm.hide()];
-        void floatingUi_dom_esm.computePosition(this.forElement, this.root, {
-            placement: this.placement,
-            strategy: 'fixed',
-            middleware: middleware
-        }).then(({ x, y, middlewareData }) => {
-            var _a;
-            Object.assign(this.root.style, {
-                left: `${x + this.offsetX}px`,
-                top: `${y - this.offsetY}px`,
-                visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
-            });
-            //data-placement needed on the for e2e tests.
-            this.root.setAttribute('data-placement', this.placement);
-        });
-    }
-    show() {
-        this.isShown = true;
-        afterNextRender.afterNextRender(() => {
-            this.runUpdatePosition();
-        });
-    }
-    hide() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.isShown = false;
-    }
-    setForElement() {
-        if (this.forElement) {
-            const tooltipId = this.tooltipId ? this.tooltipId : this.id;
-            this.forElement.setAttribute('aria-describedby', tooltipId);
-            this.forElementListeners.forEach((handler, type) => this.forElement.addEventListener(type, handler));
-        }
-    }
-    disconnectForElement() {
-        if (this.forElement) {
-            this.forElement.removeAttribute('aria-describedby');
-            this.forElementListeners.forEach((handler, type) => this.forElement.removeEventListener(type, handler));
-        }
-    }
-    updateForElement() {
-        this.disconnectForElement();
-        this.setForElement();
-    }
-    connectedCallback() {
-        this.setForElement();
-    }
-    componentWillLoad() {
-        usage.trackComponent(this.root, { variant: this.placement });
-    }
-    disconnectedCallback() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.disconnectForElement();
-    }
-    render() {
-        return (index.h(index.Host, { key: '4ab2d8a50269e0fedf663a3bc0cea69806b4a652', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, index.h("div", { key: '61467459d3a5c4cec41c88196476e130e23c276e', class: {
-                'gux-container': true,
-                [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, index.h("slot", { key: '731059ba036aef672fad3569e36bd042d051f352', name: "content" }))));
-    }
-    get root() { return index.getElement(this); }
-    static get watchers() { return {
-        "offsetX": ["runUpdatePosition"],
-        "offsetY": ["runUpdatePosition"],
-        "forElement": ["updateForElement"]
-    }; }
-};
-GuxTooltipBase.style = GuxTooltipBaseBetaStyle0;
-
-exports.gux_tooltip_base_beta = GuxTooltipBase;

package/dist/esm/gux-screen-reader-beta_2.entry.js

@@ -1,98 +0,0 @@
-import { r as registerInstance, h, g as getElement, H as Host } from './index-b6ca2adc.js';
-import { t as trackComponent } from './usage-b8c7fe6c.js';
-import { f as findElementById } from './find-element-by-id-d0ce6208.js';
-import { r as randomHTMLId } from './random-html-id-81ac821b.js';
-
-const guxScreenReaderCss = ".gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-const GuxScreenReaderBetaStyle0 = guxScreenReaderCss;
-
-const GuxScreenReader = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    componentWillLoad() {
-        trackComponent(this.root);
-    }
-    render() {
-        return (h("span", { key: '5833c3dc9a14981e711c8ad8049d9494ae334e08', class: "gux-sr-only" }, h("slot", { key: 'd2a0fa01359aff542daca760147e60821c33dfe0' })));
-    }
-    get root() { return getElement(this); }
-};
-GuxScreenReader.style = GuxScreenReaderBetaStyle0;
-
-const GuxTooltip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.id = randomHTMLId('gux-tooltip');
-        this.forElement = undefined;
-        this.role = undefined;
-        this.for = undefined;
-        this.placement = 'bottom-start';
-        this.accent = 'light';
-    }
-    /*
-     * Show tooltip
-     */
-    async showTooltip() {
-        return await this.baseTooltip.showTooltip();
-    }
-    /*
-     * Hide tooltip
-     */
-    async hideTooltip() {
-        return await this.baseTooltip.hideTooltip();
-    }
-    updateForElement() {
-        this.forElement = this.getForElement();
-    }
-    componentWillLoad() {
-        trackComponent(this.root, { variant: this.placement });
-    }
-    componentDidLoad() {
-        if (this.baseTooltip) {
-            this.tooltipObserver = new MutationObserver(() => {
-                var _a;
-                this.role = (_a = this.baseTooltip) === null || _a === void 0 ? void 0 : _a.role;
-            });
-            this.tooltipObserver.observe(this.baseTooltip, {
-                childList: true,
-                attributes: true,
-                attributeFilter: ['role']
-            });
-        }
-    }
-    connectedCallback() {
-        this.updateForElement();
-    }
-    disconnectedCallback() {
-        if (this.tooltipObserver) {
-            this.tooltipObserver.disconnect();
-        }
-    }
-    getForElement() {
-        if (this.for) {
-            const forElement = findElementById(this.root, this.for);
-            if (!forElement) {
-                this.logForAttributeError();
-            }
-            return forElement;
-        }
-        else {
-            return this.root.parentElement;
-        }
-    }
-    logForAttributeError() {
-        if (this.root.isConnected) {
-            console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
-        }
-    }
-    render() {
-        return (h(Host, { key: 'd67714689706254bde15a07e63b63ae9fa4c50bc', id: this.id, role: this.role }, h("gux-tooltip-base-beta", { key: '180b9a944c2fd996a5180ae796a0e790b96e44d1', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, ref: el => (this.baseTooltip = el) }, h("span", { key: 'e8fe6d5c1566e6cd3795c80dd9dc346dd22d6e8a', slot: "content" }, h("slot", { key: 'a2cd637d7324ebd756f831b73c5b8110ef3f88b1', name: "content" }, h("slot", { key: '16746b53ca338be94ead51baaab40ffccc742dbe' }))))));
-    }
-    get root() { return getElement(this); }
-    static get watchers() { return {
-        "for": ["updateForElement"]
-    }; }
-};
-
-export { GuxScreenReader as gux_screen_reader_beta, GuxTooltip as gux_tooltip_beta };

package/dist/esm/gux-tooltip-base-beta.entry.js

@@ -1,132 +0,0 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-b6ca2adc.js';
-import { a as autoUpdate, o as offset, f as flip, s as shift, h as hide, c as computePosition } from './floating-ui.dom.esm-92d89cdf.js';
-import { r as randomHTMLId } from './random-html-id-81ac821b.js';
-import { t as trackComponent } from './usage-b8c7fe6c.js';
-import { b as afterNextRender } from './after-next-render-07a41f53.js';
-
-const guxTooltipBaseCss = ":host{position:fixed;z-index:var(--gse-semantic-zIndex-tooltip);display:none;width:max-content;max-width:250px;pointer-events:none;border-radius:var(--gse-ui-tooltip-borderRadius);box-shadow:var(--gse-ui-tooltip-boxShadow-x, var(--gse-ui-tooltip-boxShadow-offsetX)) var(--gse-ui-tooltip-boxShadow-y, var(--gse-ui-tooltip-boxShadow-offsetY)) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color);opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:350ms;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--gse-ui-tooltip-gap);place-content:center flex-start;padding:var(--gse-ui-tooltip-padding);font-family:var(--gse-ui-tooltip-text-fontFamily);font-size:var(--gse-ui-tooltip-text-fontSize);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);color:var(--gse-ui-tooltip-light-foregroundColor);background-color:var(--gse-ui-tooltip-light-backgroundColor);border:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-radius:var(--gse-ui-tooltip-borderRadius)}.gux-container ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));height:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));color:var(--gse-ui-tooltip-light-foregroundColor)}.gux-container ::slotted(*){width:100%;overflow-wrap:break-word;white-space:normal}.gux-container.gux-dark{color:var(--gse-ui-tooltip-dark-foregroundColor);background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){align-self:center;width:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));height:var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));color:var(--gse-ui-tooltip-dark-iconColor)}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
-const GuxTooltipBaseBetaStyle0 = guxTooltipBaseCss;
-
-const GuxTooltipBase = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.pointerenterHandler = () => this.show();
-        this.pointerleaveHandler = () => this.hide();
-        this.focusinHandler = () => this.show();
-        this.focusoutHandler = () => this.hide();
-        this.forElementListeners = new Map([
-            ['pointerenter', this.pointerenterHandler],
-            ['pointerleave', this.pointerleaveHandler],
-            ['focusin', this.focusinHandler],
-            ['focusout', this.focusoutHandler]
-        ]);
-        this.id = randomHTMLId('gux-tooltip-base');
-        this.tooltipId = undefined;
-        this.forElement = undefined;
-        this.placement = 'bottom-start';
-        this.offsetX = 0;
-        this.offsetY = 0;
-        this.accent = 'light';
-        this.isShown = false;
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.isShown) {
-            this.hide();
-        }
-    }
-    /*
-     * Show tooltip
-     */
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async showTooltip() {
-        this.show();
-    }
-    /*
-     * Hide tooltip
-     */
-    // eslint-disable-next-line @typescript-eslint/require-await
-    async hideTooltip() {
-        this.hide();
-    }
-    runUpdatePosition() {
-        this.cleanupUpdatePosition = autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
-            ancestorScroll: true,
-            elementResize: true,
-            animationFrame: false,
-            ancestorResize: true
-        });
-    }
-    updatePosition() {
-        const middleware = [offset(16), flip(), shift(), hide()];
-        void computePosition(this.forElement, this.root, {
-            placement: this.placement,
-            strategy: 'fixed',
-            middleware: middleware
-        }).then(({ x, y, middlewareData }) => {
-            var _a;
-            Object.assign(this.root.style, {
-                left: `${x + this.offsetX}px`,
-                top: `${y - this.offsetY}px`,
-                visibility: ((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden) ? 'hidden' : 'visible'
-            });
-            //data-placement needed on the for e2e tests.
-            this.root.setAttribute('data-placement', this.placement);
-        });
-    }
-    show() {
-        this.isShown = true;
-        afterNextRender(() => {
-            this.runUpdatePosition();
-        });
-    }
-    hide() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.isShown = false;
-    }
-    setForElement() {
-        if (this.forElement) {
-            const tooltipId = this.tooltipId ? this.tooltipId : this.id;
-            this.forElement.setAttribute('aria-describedby', tooltipId);
-            this.forElementListeners.forEach((handler, type) => this.forElement.addEventListener(type, handler));
-        }
-    }
-    disconnectForElement() {
-        if (this.forElement) {
-            this.forElement.removeAttribute('aria-describedby');
-            this.forElementListeners.forEach((handler, type) => this.forElement.removeEventListener(type, handler));
-        }
-    }
-    updateForElement() {
-        this.disconnectForElement();
-        this.setForElement();
-    }
-    connectedCallback() {
-        this.setForElement();
-    }
-    componentWillLoad() {
-        trackComponent(this.root, { variant: this.placement });
-    }
-    disconnectedCallback() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.disconnectForElement();
-    }
-    render() {
-        return (h(Host, { key: '4ab2d8a50269e0fedf663a3bc0cea69806b4a652', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown } }, h("div", { key: '61467459d3a5c4cec41c88196476e130e23c276e', class: {
-                'gux-container': true,
-                [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: '731059ba036aef672fad3569e36bd042d051f352', name: "content" }))));
-    }
-    get root() { return getElement(this); }
-    static get watchers() { return {
-        "offsetX": ["runUpdatePosition"],
-        "offsetY": ["runUpdatePosition"],
-        "forElement": ["updateForElement"]
-    }; }
-};
-GuxTooltipBase.style = GuxTooltipBaseBetaStyle0;
-
-export { GuxTooltipBase as gux_tooltip_base_beta };