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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-76088db2.js');
 const hasSlot = require('./has-slot-2e73d6e7.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)}";
@@ -41,7 +41,7 @@ const GuxToast = class {
     return (index.h("div", { class: "gux-buttons-bar" }, index.h("slot", { name: "link" })));
   }
   renderActions() {
-    return (index.h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (index.h("gux-button-slot-beta", null, index.h("slot", { name: "secondary-button" }))), index.h("gux-button-slot-beta", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, index.h("slot", { name: "primary-button" }))));
+    return (index.h("div", { class: "gux-buttons-bar" }, this.hasSecondaryButton && (index.h("gux-button-slot", null, index.h("slot", { name: "secondary-button" }))), index.h("gux-button-slot", { accent: this.hasSecondaryButton ? 'primary' : 'tertiary' }, index.h("slot", { name: "primary-button" }))));
   }
   render() {
     return (index.h("div", { class: `gux-toast gux-toast-${this.toastType}` }, index.h("div", { class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), index.h("div", { class: "gux-content" }, index.h("div", { class: "gux-message" }, index.h("gux-truncate", { class: "gux-message-title", "max-lines": 1 }, index.h("slot", { name: "title" })), index.h("gux-truncate", { class: "gux-message-body", "max-lines": 2 }, index.h("slot", { name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.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/cjs/gux-toggle.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const usage = require('./usage-1066593d.js');
+const usage = require('./usage-76088db2.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
 const index$1 = require('./index-9bbde1aa.js');
 require('./get-closest-element-ab4b2eee.js');
@@ -17,7 +17,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/cjs/gux-tooltip-title.cjs.entry.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-0d0fdb85.js');
 const logError = require('./log-error-d46c02b7.js');
 const onMutation = require('./on-mutation-247f99dd.js');
+const afterNextRender = require('./after-next-render-a09f528a.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}";
 
@@ -54,6 +55,10 @@ const GuxTooltipTitle = class {
   onMutation() {
     this.titleName = this.setTooltipTitleText();
     this.checkForTooltipHideOrShow();
+    // Handle checking if the tooltip should hide/show for dynamic content
+    afterNextRender.afterNextRenderTimeout(() => {
+      this.checkForTooltipHideOrShow();
+    }, 500);
   }
   componentWillLoad() {
     this.titleName = this.setTooltipTitleText();

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d0fdb85.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-cad0a9cf.js');
+const floatingUi_dom_esm = require('./floating-ui.dom.esm-2ed3685b.js');
 const randomHtmlId = require('./random-html-id-b86b61c0.js');
-const usage = require('./usage-1066593d.js');
-const findElementById = require('./find-element-by-id-99f1f933.js');
+const usage = require('./usage-76088db2.js');
+const findElementById = require('./find-element-by-id-ecf0efa3.js');
 const afterNextRender = require('./after-next-render-a09f528a.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) {
@@ -21,6 +21,8 @@ const GuxTooltip = class {
     this.id = randomHtmlId.randomHTMLId('gux-tooltip');
     this.for = undefined;
     this.placement = 'bottom-start';
+    this.accent = 'light';
+    this.anchor = false;
     this.isShown = false;
   }
   handleKeyDown(event) {
@@ -51,17 +53,41 @@ const GuxTooltip = class {
     });
   }
   updatePosition() {
+    const middleware = [floatingUi_dom_esm.offset(16), floatingUi_dom_esm.flip(), floatingUi_dom_esm.shift()];
+    if (this.anchor) {
+      middleware.push(floatingUi_dom_esm.arrow({ element: this.arrowElement }));
+    }
     void floatingUi_dom_esm.computePosition(this.forElement, this.root, {
       placement: this.placement,
       strategy: 'fixed',
-      middleware: [floatingUi_dom_esm.offset(16), floatingUi_dom_esm.flip(), floatingUi_dom_esm.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() {
@@ -89,6 +115,11 @@ const GuxTooltip = class {
       console.error(`gux-tooltip: invalid element supplied to 'for': "${this.for}"`);
     }
   }
+  renderAnchor() {
+    if (this.anchor) {
+      return (index.h("div", { ref: (el) => (this.arrowElement = el), class: "gux-arrow" }));
+    }
+  }
   connectedCallback() {
     this.getForElement();
     if (this.forElement) {
@@ -103,7 +134,7 @@ const GuxTooltip = class {
     }
   }
   componentWillLoad() {
-    usage.trackComponent(this.root);
+    usage.trackComponent(this.root, { variant: this.placement });
   }
   disconnectedCallback() {
     var _a, _b, _c, _d, _e;
@@ -117,7 +148,10 @@ const GuxTooltip = class {
     (_e = this.forElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('focusout', this.focusoutHandler);
   }
   render() {
-    return (index.h(index.Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, index.h("div", { class: "gux-container" }, index.h("slot", null))));
+    return (index.h(index.Host, { id: this.id, class: { 'gux-show': this.isShown }, role: "tooltip" }, index.h("div", { class: {
+        'gux-container': true,
+        [`gux-${this.accent}`]: true
+      }, "data-placement": this.placement }, index.h("slot", null), this.renderAnchor())));
   }
   get root() { return index.getElement(this); }
 };

package/dist/cjs/index-0d0fdb85.js

@@ -2071,22 +2071,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-action-toast-legacy.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-advanced-dropdown.cjs':
+        case 'gux-advanced-dropdown-legacy.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-advanced-dropdown.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-advanced-dropdown-legacy.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-all-row-select.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-all-row-select.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-badge-beta.cjs':
+        case 'gux-badge.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-badge-beta.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-blank-state-beta.cjs':
+            './gux-badge.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-blank-state.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-blank-state-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-blank-state.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-breadcrumb-item.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2111,18 +2111,18 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-card.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-column-manager-beta.cjs':
+        case 'gux-column-manager.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-column-manager-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-column-manager.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-column-manager-item.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-column-manager-item.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-context-menu-beta.cjs':
+        case 'gux-context-menu.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-context-menu-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-context-menu.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-copy-to-clipboard.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2139,22 +2139,18 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-datepicker.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-disclosure-button.cjs':
+        case 'gux-disclosure-button-legacy.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-disclosure-button.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-dropdown-multi-beta.cjs':
+            './gux-disclosure-button-legacy.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-dropdown-multi.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-dropdown-multi-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-dropdown-multi.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-dropdown-option.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-dropdown-option.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-error-message-beta.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-error-message-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-flyout-menu-beta.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2195,18 +2191,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-inline-alert.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-list-divider.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-list-divider.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-listbox-multi.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-listbox-multi.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-loading-message-beta.cjs':
+        case 'gux-loading-message.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-loading-message-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-loading-message.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-menu.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2243,26 +2235,18 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-pagination.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-pagination-beta.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-pagination-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-pagination-cursor.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-pagination-cursor.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-phone-input-beta.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-phone-input-beta.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-popover.cjs':
+        case 'gux-pagination-legacy.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-popover.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-popover-list-beta.cjs':
+            './gux-pagination-legacy.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-phone-input-beta.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-popover-list-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-phone-input-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-radial-progress.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2283,10 +2267,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-skip-navigation-item.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-skip-navigation-list-beta.cjs':
+        case 'gux-skip-navigation-list.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-skip-navigation-list-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-skip-navigation-list.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-sort-control.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2327,26 +2311,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-tab-panel.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-tab-panel-beta.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-tab-panel-beta.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-table-beta.cjs':
+        case 'gux-table.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-table-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-table.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-table-select-menu.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-table-select-menu.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-table-toolbar-action.cjs':
+        case 'gux-table-toolbar.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-table-toolbar-action.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-table-toolbar-beta.cjs':
+            './gux-table-toolbar.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-table-toolbar-action.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-table-toolbar-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-table-toolbar-action.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-tabs.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2355,18 +2335,22 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-tabs-advanced.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-tag-beta.cjs':
+        case 'gux-tag.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-tag-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-tag.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-time-beta.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-time-beta.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-time-picker-beta.cjs':
+        case 'gux-time-picker.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-time-picker-beta.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-time-picker.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-time-zone-picker-beta.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-time-zone-picker-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-toast.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2395,6 +2379,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-form-field-search.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-list-divider.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-list-divider.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-list-item.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2407,10 +2395,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-pagination-buttons_3.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-pagination-buttons-beta_2.cjs':
+        case 'gux-pagination-buttons-legacy_3.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
-            './gux-pagination-buttons-beta_2.cjs.entry.js')); }).then(processMod, consoleError);
+            './gux-pagination-buttons-legacy_3.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-popover-list.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2455,10 +2443,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-form-field-number_3.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-pagination-items-per-page-beta.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-pagination-items-per-page-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-form-field-checkbox.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2467,10 +2451,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-screen-reader-beta.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-tooltip-title.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-tooltip-title.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-dropdown_3.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2479,6 +2459,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-list.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-tooltip-title.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-tooltip-title.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-form-field-input-clear-button.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
@@ -2495,14 +2479,14 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-truncate.cjs.entry.js')); }).then(processMod, consoleError);
-        case 'gux-button-slot-beta.cjs':
-          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
-            /* webpackMode: "lazy" */
-            './gux-button-slot-beta.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-popup.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */
             './gux-popup.cjs.entry.js')); }).then(processMod, consoleError);
+        case 'gux-button-slot.cjs':
+          return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+            /* webpackMode: "lazy" */
+            './gux-button-slot.cjs.entry.js')); }).then(processMod, consoleError);
         case 'gux-tooltip.cjs':
           return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
             /* webpackMode: "lazy" */