genesys-spark-components 4.0.0-beta.3 → 4.0.0-beta.31

package/dist/esm/gux-toast.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-0b66fe2c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-c2ef5c8c.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';
 
 const guxToastCss = ".gux-toast{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;gap:var(--gse-ui-toast-gap);width:var(--gse-ui-toast-wrappingWidth);padding:var(--gse-ui-toast-margin);margin-bottom:var(--gse-ui-toast-stacking-gap);border-radius:var(--gse-ui-toast-borderRadius);box-shadow:var(--gse-ui-toast-boxShadow-x) var(--gse-ui-toast-boxShadow-y) var(--gse-ui-toast-boxShadow-blur) var(--gse-ui-toast-boxShadow-spread) var(--gse-ui-toast-boxShadow-color)}.gux-toast .gux-icon ::slotted(gux-icon){width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon gux-icon{width:var(--gse-ui-toast-icon) !important;height:var(--gse-ui-toast-icon) !important}.gux-toast .gux-icon.gux-icon-error{color:var(--gse-ui-toast-error-iconColor)}.gux-toast .gux-icon.gux-icon-warning{color:var(--gse-ui-toast-warning-iconColor)}.gux-toast .gux-icon.gux-icon-success{color:var(--gse-ui-toast-success-iconColor)}.gux-toast .gux-icon.gux-icon-info{color:var(--gse-ui-toast-info-iconColor)}.gux-toast .gux-icon.gux-icon-action{color:var(--gse-ui-toast-action-iconColor)}.gux-toast .gux-content{display:flex;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;align-self:auto;justify-content:flex-start;order:0;gap:var(--gse-ui-toast-gapButton)}.gux-toast .gux-content .gux-message{display:flex;flex-direction:column;gap:var(--gse-ui-toast-gapText)}.gux-toast .gux-content .gux-message .gux-message-title{font-family:var(--gse-ui-toast-heading-fontFamily);line-height:var(--gse-ui-toast-heading-lineHeight);font-size:var(--gse-ui-toast-heading-fontSize);font-weight:var(--gse-ui-toast-heading-fontWeight)}.gux-toast .gux-content .gux-message .gux-message-body{font-family:var(--gse-ui-toast-text-fontFamily);line-height:var(--gse-ui-toast-text-lineHeight);font-size:var(--gse-ui-toast-text-fontSize)}.gux-toast .gux-content .gux-buttons-bar{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;gap:var(--gse-ui-toast-buttonBar-gap)}.gux-toast.gux-toast-success{background-color:var(--gse-ui-toast-success-backgroundColor)}.gux-toast.gux-toast-success .gux-message{color:var(--gse-ui-toast-success-foregroundColor)}.gux-toast.gux-toast-warning{background-color:var(--gse-ui-toast-warning-backgroundColor)}.gux-toast.gux-toast-warning .gux-message{color:var(--gse-ui-toast-warning-foregroundColor)}.gux-toast.gux-toast-error{background-color:var(--gse-ui-toast-error-backgroundColor)}.gux-toast.gux-toast-error .gux-message{color:var(--gse-ui-toast-error-foregroundColor)}.gux-toast.gux-toast-info{background-color:var(--gse-ui-toast-info-backgroundColor)}.gux-toast.gux-toast-info .gux-message{color:var(--gse-ui-toast-info-foregroundColor)}.gux-toast.gux-toast-action{background-color:var(--gse-ui-toast-action-backgroundColor)}.gux-toast.gux-toast-action .gux-message{color:var(--gse-ui-toast-action-foregroundColor)}";
@@ -37,7 +37,7 @@ const GuxToast = class {
     return (h("div", { class: "gux-buttons-bar" }, h("slot", { name: "link" })));
   }
   renderActions() {
-    return (h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (h("gux-button-slot-beta", null, h("slot", { name: "secondary-button" }))), h("gux-button-slot-beta", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, h("slot", { name: "primary-button" }))));
+    return (h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (h("gux-button-slot", null, h("slot", { name: "secondary-button" }))), h("gux-button-slot", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, h("slot", { name: "primary-button" }))));
   }
   render() {
     return (h("div", { class: `gux-toast gux-toast-${this.toastType}` }, h("div", { class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), h("div", { class: "gux-content" }, h("div", { class: "gux-message" }, h("gux-truncate", { class: "gux-message-title", "max-lines": 1 }, h("slot", { name: "title" })), h("gux-truncate", { class: "gux-message-body", "max-lines": 2 }, h("slot", { name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&

package/dist/esm/gux-toggle-slider.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-0b66fe2c.js';
 
-const guxToggleSliderCss = "gux-toggle-slider{display:flex;align-items:center;padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:30px;height:16px;border-radius:8px}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-toggle-slider .gux-toggle-slider:focus-visible{outline:none;outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;inset:0;background-color:#6b7585;border-radius:8px;transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:1px;left:1px;width:14px;height:14px;content:'';background-color:#fdfdfd;border-radius:50%;transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;inset:0;width:12px;height:12px;padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:#2a60c8}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(14px)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
+const guxToggleSliderCss = ".gux-focus-ring-focused:focus{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-focus-ring-small-focused:focus{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-within:focus-within{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}.gux-focus-ring-small-focused-visible:focus-visible{outline-width:var(--gse-semantic-focusRing-small-border-width);outline-style:var(--gse-semantic-focusRing-small-border-style);outline-color:var(--gse-semantic-focusRing-small-border-color)}gux-toggle-slider{display:flex;align-items:center;padding:2px;outline:none}gux-toggle-slider .gux-toggle-slider{position:relative;display:inline-block;flex:0 1 auto;align-self:auto;order:0;width:30px;height:16px;border-radius:8px}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-toggle-slider .gux-toggle-slider:focus-visible{outline:none;outline-width:var(--gse-semantic-focusRing-default-border-width);outline-style:var(--gse-semantic-focusRing-default-border-style);outline-color:var(--gse-semantic-focusRing-default-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;inset:0;background-color:#6b7585;border-radius:8px;transition:background-color 0.5s ease}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;bottom:1px;left:1px;width:14px;height:14px;content:\"\";background-color:#fdfdfd;border-radius:50%;transition:0.5s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;inset:0;width:12px;height:12px;padding:1px;color:#fdfdfd;opacity:0;transition:color 0.5s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:#2a60c8}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(14px)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:#2a60c8;opacity:1;transition:opacity 0.25s linear;transition-delay:0.25s}";
 
 const GuxToggleSlider = class {
   constructor(hostRef) {

package/dist/esm/gux-toggle.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-0b66fe2c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
+import { t as trackComponent } from './usage-c2ef5c8c.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { b as buildI18nForComponent } from './index-694d55cf.js';
 import './get-closest-element-1597503c.js';
@@ -13,7 +13,7 @@ const translationResources = {
 	toggleIsFinishedLoading: toggleIsFinishedLoading
 };
 
-const guxToggleCss = ":host{display:block;margin:2px;color:#2e394c;outline:none}:host(.gux-display-inline){display:inline-block}.gux-toggle-container{cursor:pointer}.gux-toggle-container.gux-disabled{pointer-events:none;cursor:default}.gux-toggle-container.gux-disabled .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{opacity:0.5}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input{flex-direction:row-reverse}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{place-items:end}.gux-toggle-container.gux-toggle-label-left .gux-toggle-error{float:right}.gux-toggle-container .gux-toggle-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}.gux-toggle-container .gux-toggle-input .gux-toggle-label{position:relative;display:inline-block;padding:0 4px}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{display:grid;grid-template-areas:'inner-div';place-items:start}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner{position:relative;grid-area:inner-div}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner.gux-hidden{visibility:hidden}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-loading{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;font-size:11px;color:#2e394c}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin:0 4px;color:#ea0b0b}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container .gux-toggle-error-message{flex:0 1 auto;align-self:auto;order:0}";
+const guxToggleCss = ":host{display:block;margin:2px;color:#2e394c;outline:none}:host(.gux-display-inline){display:inline-block}.gux-toggle-container{cursor:pointer}.gux-toggle-container.gux-disabled{pointer-events:none;cursor:default}.gux-toggle-container.gux-disabled .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{opacity:0.5}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input{flex-direction:row-reverse}.gux-toggle-container.gux-toggle-label-left .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{place-items:end}.gux-toggle-container.gux-toggle-label-left .gux-toggle-error{float:right}.gux-toggle-container .gux-toggle-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}.gux-toggle-container .gux-toggle-input .gux-toggle-label{position:relative;display:inline-block;padding:0 4px}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text{display:grid;grid-template-areas:\"inner-div\";place-items:start}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner{position:relative;grid-area:inner-div}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-text .gux-toggle-label-text-inner.gux-hidden{visibility:hidden}.gux-toggle-container .gux-toggle-input .gux-toggle-label .gux-toggle-label-loading{position:absolute;inset:0;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;font-size:11px;color:#2e394c}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin:0 4px;color:#ea0b0b}.gux-toggle-container .gux-toggle-error .gux-toggle-error-container .gux-toggle-error-message{flex:0 1 auto;align-self:auto;order:0}";
 
 const GuxToggle = class {
   constructor(hostRef) {

package/dist/esm/gux-tooltip-title.entry.js

@@ -1,6 +1,7 @@
 import { r as registerInstance, h, g as getElement } from './index-0b66fe2c.js';
 import { a as logWarn } from './log-error-e0bbd04a.js';
 import { O as OnMutation } from './on-mutation-8c8b2331.js';
+import { a as afterNextRenderTimeout } from './after-next-render-ed0f7dcd.js';
 
 const guxTooltipTitleCss = "gux-tooltip-title{overflow:hidden}gux-tooltip{font-weight:normal;line-height:normal;text-align:left;overflow-wrap:break-word;white-space:normal}.gux-overflow-hidden .gux-title-container ::slotted(span){overflow:hidden;text-overflow:ellipsis}.gux-overflow-hidden .gux-title-container>*{overflow:hidden;text-overflow:ellipsis}.gux-title-container{display:flex;pointer-events:none}.gux-tooltip-icon-decorative .gux-title-container{position:relative;margin-left:20px}.gux-tooltip-icon-decorative .gux-title-container gux-icon,.gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon){position:absolute;left:-20px;flex-shrink:0;width:16px}";
 
@@ -50,6 +51,10 @@ const GuxTooltipTitle = class {
   onMutation() {
     this.titleName = this.setTooltipTitleText();
     this.checkForTooltipHideOrShow();
+    // Handle checking if the tooltip should hide/show for dynamic content
+    afterNextRenderTimeout(() => {
+      this.checkForTooltipHideOrShow();
+    }, 500);
   }
   componentWillLoad() {
     this.titleName = this.setTooltipTitleText();

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

@@ -1,11 +1,11 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-0b66fe2c.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom.esm-48871497.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as arrow } from './floating-ui.dom.esm-c86d3efa.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
-import { t as trackComponent } from './usage-4f6d345a.js';
-import { f as findElementById } from './find-element-by-id-758a0703.js';
+import { t as trackComponent } from './usage-c2ef5c8c.js';
+import { f as findElementById } from './find-element-by-id-7c5f4fbf.js';
 import { b as afterNextRender } from './after-next-render-ed0f7dcd.js';
 
-const guxTooltipCss = ":host{position:fixed;z-index:var(--gux-zindex-tooltip, 1);display:none;width:max-content;max-width:250px;overflow:hidden;opacity:0}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{box-sizing:border-box;padding:6px 12px;color:#2e394c;pointer-events:none;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
+const guxTooltipCss = ":host{position:fixed;z-index:var(--gux-zindex-tooltip, 1);display:none;width:max-content;max-width:250px;opacity:0;box-shadow:var(--gse-ui-tooltip-boxShadow-x) var(--gse-ui-tooltip-boxShadow-y) var(--gse-ui-tooltip-boxShadow-blur) var(--gse-ui-tooltip-boxShadow-spread) var(--gse-ui-tooltip-boxShadow-color)}:host(.gux-show){display:block;animation-name:fade-in;animation-duration:250ms;animation-delay:1s;animation-fill-mode:forwards}.gux-container{display:flex;flex-direction:row;justify-content:flex-start;align-content:center;gap:var(--gse-ui-tooltip-gap);box-sizing:border-box;padding:var(--gse-ui-tooltip-padding);pointer-events:none;border-radius:var(--gse-ui-tooltip-borderRadius);font-family:var(--gse-ui-tooltip-text-fontFamily);font-weight:var(--gse-ui-tooltip-text-fontWeight);line-height:var(--gse-ui-tooltip-text-lineHeight);font-size:var(--gse-ui-tooltip-text-fontSize);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);color:var(--gse-ui-tooltip-light-foregroundColor)}.gux-container[data-placement=bottom] .gux-arrow,.gux-container[data-placement=bottom-start] .gux-arrow,.gux-container[data-placement=bottom-end] .gux-arrow{border-top:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-left:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container[data-placement=top] .gux-arrow,.gux-container[data-placement=top-start] .gux-arrow,.gux-container[data-placement=top-end] .gux-arrow{border-right:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-bottom:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container[data-placement=left] .gux-arrow,.gux-container[data-placement=left-start] .gux-arrow,.gux-container[data-placement=left-end] .gux-arrow{border-top:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-right:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container[data-placement=right] .gux-arrow,.gux-container[data-placement=right-start] .gux-arrow,.gux-container[data-placement=right-end] .gux-arrow{border-bottom:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color);border-left:var(--gse-ui-tooltip-light-border-width) var(--gse-ui-tooltip-light-border-style) var(--gse-ui-tooltip-light-border-color)}.gux-container .gux-arrow{position:absolute;width:13px;height:13px;border-radius:var(--gse-ui-tooltip-borderRadius);background:inherit}.gux-container ::slotted(gux-icon){width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-light-iconColor);align-self:center}.gux-container.gux-dark{background-color:var(--gse-ui-tooltip-dark-backgroundColor);border-color:var(--gse-ui-tooltip-dark-border-color);color:var(--gse-ui-tooltip-dark-foregroundColor)}.gux-container.gux-dark[data-placement=bottom] .gux-arrow,.gux-container.gux-dark[data-placement=bottom-start] .gux-arrow,.gux-container.gux-dark[data-placement=bottom-end] .gux-arrow{border-top:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-left:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark[data-placement=top] .gux-arrow,.gux-container.gux-dark[data-placement=top-start] .gux-arrow,.gux-container.gux-dark[data-placement=top-end] .gux-arrow{border-right:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-bottom:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark[data-placement=left] .gux-arrow,.gux-container.gux-dark[data-placement=left-start] .gux-arrow,.gux-container.gux-dark[data-placement=left-end] .gux-arrow{border-top:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-right:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark[data-placement=right] .gux-arrow,.gux-container.gux-dark[data-placement=right-start] .gux-arrow,.gux-container.gux-dark[data-placement=right-end] .gux-arrow{border-bottom:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color);border-left:var(--gse-ui-tooltip-dark-border-width) var(--gse-ui-tooltip-dark-border-style) var(--gse-ui-tooltip-dark-border-color)}.gux-container.gux-dark ::slotted(gux-icon){width:var(--gse-ui-icon-size-sm);height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-tooltip-dark-iconColor);align-self:center}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
 
 const GuxTooltip = class {
   constructor(hostRef) {
@@ -17,6 +17,8 @@ const GuxTooltip = class {
     this.id = randomHTMLId('gux-tooltip');
     this.for = undefined;
     this.placement = 'bottom-start';
+    this.accent = 'light';
+    this.anchor = false;
     this.isShown = false;
   }
   handleKeyDown(event) {
@@ -47,17 +49,41 @@ const GuxTooltip = class {
     });
   }
   updatePosition() {
+    const middleware = [offset(16), flip(), shift()];
+    if (this.anchor) {
+      middleware.push(arrow({ element: this.arrowElement }));
+    }
     void computePosition(this.forElement, this.root, {
       placement: this.placement,
       strategy: 'fixed',
-      middleware: [offset(16), flip(), shift()]
-    }).then(({ x, y, placement }) => {
+      middleware: middleware
+    }).then(({ x, y, middlewareData, placement }) => {
       Object.assign(this.root.style, {
         left: `${x}px`,
         top: `${y}px`
       });
-      // data-placement is currently only used for e2e tests
-      this.root.setAttribute('data-placement', placement);
+      //data-placement needed on the for e2e tests.
+      this.root.setAttribute('data-placement', this.placement);
+      const side = placement.split('-')[0];
+      const staticSide = {
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+      }[side];
+      if (middlewareData.arrow) {
+        //This is 13 because this makes the arrow look aligned.
+        const arrowLen = 13;
+        const { x, y } = middlewareData.arrow;
+        Object.assign(this.arrowElement.style, {
+          left: x != null ? `${x}px` : '',
+          top: y != null ? `${y}px` : '',
+          right: '',
+          bottom: '',
+          [staticSide]: `${-arrowLen / 2}px`,
+          transform: 'rotate(45deg)'
+        });
+      }
     });
   }
   show() {
@@ -85,6 +111,11 @@ const GuxTooltip = class {
       console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
     }
   }
+  renderAnchor() {
+    if (this.anchor) {
+      return (h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }));
+    }
+  }
   connectedCallback() {
     this.getForElement();
     if (this.forElement) {
@@ -99,7 +130,7 @@ const GuxTooltip = class {
     }
   }
   componentWillLoad() {
-    trackComponent(this.root);
+    trackComponent(this.root, { variant: this.placement });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -113,7 +144,10 @@ const GuxTooltip = class {
     (_e = this.forElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.focusoutHandler);
   }
   render() {
-    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: "gux-container" }, h("slot", null))));
+    return (h(Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.accent}`]: true
+      }, "data-placement": this.placement }, h("slot", null), this.renderAnchor())));
   }
   get root() { return getElement(this); }
 };

package/dist/esm/index-0b66fe2c.js

@@ -2049,22 +2049,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-action-toast-legacy.entry.js').then(processMod, consoleError);
-        case 'gux-advanced-dropdown':
+        case 'gux-advanced-dropdown-legacy':
           return import(
             /* webpackMode: "lazy" */
-            './gux-advanced-dropdown.entry.js').then(processMod, consoleError);
+            './gux-advanced-dropdown-legacy.entry.js').then(processMod, consoleError);
         case 'gux-all-row-select':
           return import(
             /* webpackMode: "lazy" */
             './gux-all-row-select.entry.js').then(processMod, consoleError);
-        case 'gux-badge-beta':
+        case 'gux-badge':
           return import(
             /* webpackMode: "lazy" */
-            './gux-badge-beta.entry.js').then(processMod, consoleError);
-        case 'gux-blank-state-beta':
+            './gux-badge.entry.js').then(processMod, consoleError);
+        case 'gux-blank-state':
           return import(
             /* webpackMode: "lazy" */
-            './gux-blank-state-beta.entry.js').then(processMod, consoleError);
+            './gux-blank-state.entry.js').then(processMod, consoleError);
         case 'gux-breadcrumb-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2089,18 +2089,18 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-card.entry.js').then(processMod, consoleError);
-        case 'gux-column-manager-beta':
+        case 'gux-column-manager':
           return import(
             /* webpackMode: "lazy" */
-            './gux-column-manager-beta.entry.js').then(processMod, consoleError);
+            './gux-column-manager.entry.js').then(processMod, consoleError);
         case 'gux-column-manager-item':
           return import(
             /* webpackMode: "lazy" */
             './gux-column-manager-item.entry.js').then(processMod, consoleError);
-        case 'gux-context-menu-beta':
+        case 'gux-context-menu':
           return import(
             /* webpackMode: "lazy" */
-            './gux-context-menu-beta.entry.js').then(processMod, consoleError);
+            './gux-context-menu.entry.js').then(processMod, consoleError);
         case 'gux-copy-to-clipboard':
           return import(
             /* webpackMode: "lazy" */
@@ -2117,22 +2117,18 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-datepicker.entry.js').then(processMod, consoleError);
-        case 'gux-disclosure-button':
+        case 'gux-disclosure-button-legacy':
           return import(
             /* webpackMode: "lazy" */
-            './gux-disclosure-button.entry.js').then(processMod, consoleError);
-        case 'gux-dropdown-multi-beta':
+            './gux-disclosure-button-legacy.entry.js').then(processMod, consoleError);
+        case 'gux-dropdown-multi':
           return import(
             /* webpackMode: "lazy" */
-            './gux-dropdown-multi-beta.entry.js').then(processMod, consoleError);
+            './gux-dropdown-multi.entry.js').then(processMod, consoleError);
         case 'gux-dropdown-option':
           return import(
             /* webpackMode: "lazy" */
             './gux-dropdown-option.entry.js').then(processMod, consoleError);
-        case 'gux-error-message-beta':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-error-message-beta.entry.js').then(processMod, consoleError);
         case 'gux-flyout-menu-beta':
           return import(
             /* webpackMode: "lazy" */
@@ -2173,18 +2169,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-inline-alert.entry.js').then(processMod, consoleError);
-        case 'gux-list-divider':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-list-divider.entry.js').then(processMod, consoleError);
         case 'gux-listbox-multi':
           return import(
             /* webpackMode: "lazy" */
             './gux-listbox-multi.entry.js').then(processMod, consoleError);
-        case 'gux-loading-message-beta':
+        case 'gux-loading-message':
           return import(
             /* webpackMode: "lazy" */
-            './gux-loading-message-beta.entry.js').then(processMod, consoleError);
+            './gux-loading-message.entry.js').then(processMod, consoleError);
         case 'gux-menu':
           return import(
             /* webpackMode: "lazy" */
@@ -2221,26 +2213,18 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-pagination.entry.js').then(processMod, consoleError);
-        case 'gux-pagination-beta':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-pagination-beta.entry.js').then(processMod, consoleError);
         case 'gux-pagination-cursor':
           return import(
             /* webpackMode: "lazy" */
             './gux-pagination-cursor.entry.js').then(processMod, consoleError);
-        case 'gux-phone-input-beta':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-phone-input-beta.entry.js').then(processMod, consoleError);
-        case 'gux-popover':
+        case 'gux-pagination-legacy':
           return import(
             /* webpackMode: "lazy" */
-            './gux-popover.entry.js').then(processMod, consoleError);
-        case 'gux-popover-list-beta':
+            './gux-pagination-legacy.entry.js').then(processMod, consoleError);
+        case 'gux-phone-input-beta':
           return import(
             /* webpackMode: "lazy" */
-            './gux-popover-list-beta.entry.js').then(processMod, consoleError);
+            './gux-phone-input-beta.entry.js').then(processMod, consoleError);
         case 'gux-radial-progress':
           return import(
             /* webpackMode: "lazy" */
@@ -2261,10 +2245,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-skip-navigation-item.entry.js').then(processMod, consoleError);
-        case 'gux-skip-navigation-list-beta':
+        case 'gux-skip-navigation-list':
           return import(
             /* webpackMode: "lazy" */
-            './gux-skip-navigation-list-beta.entry.js').then(processMod, consoleError);
+            './gux-skip-navigation-list.entry.js').then(processMod, consoleError);
         case 'gux-sort-control':
           return import(
             /* webpackMode: "lazy" */
@@ -2305,26 +2289,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-tab-panel.entry.js').then(processMod, consoleError);
-        case 'gux-tab-panel-beta':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-tab-panel-beta.entry.js').then(processMod, consoleError);
-        case 'gux-table-beta':
+        case 'gux-table':
           return import(
             /* webpackMode: "lazy" */
-            './gux-table-beta.entry.js').then(processMod, consoleError);
+            './gux-table.entry.js').then(processMod, consoleError);
         case 'gux-table-select-menu':
           return import(
             /* webpackMode: "lazy" */
             './gux-table-select-menu.entry.js').then(processMod, consoleError);
-        case 'gux-table-toolbar-action':
+        case 'gux-table-toolbar':
           return import(
             /* webpackMode: "lazy" */
-            './gux-table-toolbar-action.entry.js').then(processMod, consoleError);
-        case 'gux-table-toolbar-beta':
+            './gux-table-toolbar.entry.js').then(processMod, consoleError);
+        case 'gux-table-toolbar-action':
           return import(
             /* webpackMode: "lazy" */
-            './gux-table-toolbar-beta.entry.js').then(processMod, consoleError);
+            './gux-table-toolbar-action.entry.js').then(processMod, consoleError);
         case 'gux-tabs':
           return import(
             /* webpackMode: "lazy" */
@@ -2333,18 +2313,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-tabs-advanced.entry.js').then(processMod, consoleError);
-        case 'gux-tag-beta':
+        case 'gux-tag':
           return import(
             /* webpackMode: "lazy" */
-            './gux-tag-beta.entry.js').then(processMod, consoleError);
+            './gux-tag.entry.js').then(processMod, consoleError);
         case 'gux-time-beta':
           return import(
             /* webpackMode: "lazy" */
             './gux-time-beta.entry.js').then(processMod, consoleError);
-        case 'gux-time-picker-beta':
+        case 'gux-time-picker':
           return import(
             /* webpackMode: "lazy" */
-            './gux-time-picker-beta.entry.js').then(processMod, consoleError);
+            './gux-time-picker.entry.js').then(processMod, consoleError);
+        case 'gux-time-zone-picker-beta':
+          return import(
+            /* webpackMode: "lazy" */
+            './gux-time-zone-picker-beta.entry.js').then(processMod, consoleError);
         case 'gux-toast':
           return import(
             /* webpackMode: "lazy" */
@@ -2373,6 +2357,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-form-field-search.entry.js').then(processMod, consoleError);
+        case 'gux-list-divider':
+          return import(
+            /* webpackMode: "lazy" */
+            './gux-list-divider.entry.js').then(processMod, consoleError);
         case 'gux-list-item':
           return import(
             /* webpackMode: "lazy" */
@@ -2385,10 +2373,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-pagination-buttons_3.entry.js').then(processMod, consoleError);
-        case 'gux-pagination-buttons-beta_2':
+        case 'gux-pagination-buttons-legacy_3':
           return import(
             /* webpackMode: "lazy" */
-            './gux-pagination-buttons-beta_2.entry.js').then(processMod, consoleError);
+            './gux-pagination-buttons-legacy_3.entry.js').then(processMod, consoleError);
         case 'gux-popover-list':
           return import(
             /* webpackMode: "lazy" */
@@ -2433,10 +2421,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-form-field-number_3.entry.js').then(processMod, consoleError);
-        case 'gux-pagination-items-per-page-beta':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-pagination-items-per-page-beta.entry.js').then(processMod, consoleError);
         case 'gux-form-field-checkbox':
           return import(
             /* webpackMode: "lazy" */
@@ -2445,10 +2429,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-screen-reader-beta.entry.js').then(processMod, consoleError);
-        case 'gux-tooltip-title':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-tooltip-title.entry.js').then(processMod, consoleError);
         case 'gux-dropdown_3':
           return import(
             /* webpackMode: "lazy" */
@@ -2457,6 +2437,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-list.entry.js').then(processMod, consoleError);
+        case 'gux-tooltip-title':
+          return import(
+            /* webpackMode: "lazy" */
+            './gux-tooltip-title.entry.js').then(processMod, consoleError);
         case 'gux-form-field-input-clear-button':
           return import(
             /* webpackMode: "lazy" */
@@ -2473,14 +2457,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './gux-truncate.entry.js').then(processMod, consoleError);
-        case 'gux-button-slot-beta':
-          return import(
-            /* webpackMode: "lazy" */
-            './gux-button-slot-beta.entry.js').then(processMod, consoleError);
         case 'gux-popup':
           return import(
             /* webpackMode: "lazy" */
             './gux-popup.entry.js').then(processMod, consoleError);
+        case 'gux-button-slot':
+          return import(
+            /* webpackMode: "lazy" */
+            './gux-button-slot.entry.js').then(processMod, consoleError);
         case 'gux-tooltip':
           return import(
             /* webpackMode: "lazy" */