genesys-spark-components 4.137.1 → 4.138.0

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const usage = require('./usage-47b5afb6.js');
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
 
 const guxTabsCss = ":host{display:flex;flex-direction:column}:host .gux-tabs{display:flex;block-size:100%}:host .gux-tabs:not(.gux-vertical){flex-direction:column}:host .gux-panel-container{display:flex;flex:1 1 auto;flex-direction:column;block-size:100%;min-block-size:0}";
 const GuxTabsStyle0 = guxTabsCss;
@@ -12,10 +12,14 @@ const GuxTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.guxactivetabchange = index.createEvent(this, "guxactivetabchange", 7);
-        this.activeTab = undefined;
+        /**
+         * Specifies horizontal or vertical orientation of tabs
+         */
         this.orientation = 'horizontal';
+        /**
+         * Specifies left aligned, centered, or full width tabs
+         */
         this.alignment = 'left';
-        this.tabList = undefined;
         this.tabPanels = [];
     }
     watchActiveTab(newValue) {
@@ -51,7 +55,7 @@ const GuxTabs = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h(index.Host, { key: '3e75f6bbe1ca70d2e06252256dd7e0da9d87414e' }, index.h("div", { key: '2fefd55f8960a7ffd28d78145b53133fa24753dc', class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { key: '83fb2462545b9e07bd13e1562725c4f97114fab5', name: "tab-list" }), index.h("div", { key: '058ce4ed6f4c41a0ba84436d959b1b04a26cf978', class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, index.h("slot", { key: 'a33c5b51269f29f4cbb2593be17cf7c75449fd21', onSlotchange: this.onSlotchange.bind(this) })))));
+        return (index.h(index.Host, { key: '7fdc61c4f732fb4bee5375e0672a85ae5dfe4b05' }, index.h("div", { key: '5b81a10ce41c2b7888b7247c92207ebe3bd9fa65', class: `gux-tabs gux-${this.alignment} gux-${this.orientation}` }, index.h("slot", { key: '7cbaa1cae34b019e0161a1aec7c20e575e9b7021', name: "tab-list" }), index.h("div", { key: '5337ba55bb7c74f832fe97c113a3f95bd3369931', class: `gux-${this.alignment} gux-${this.orientation} gux-panel-container` }, index.h("slot", { key: '003ed2350c122ea5c1aded128bea3a1efd0f2797', onSlotchange: this.onSlotchange.bind(this) })))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const index$1 = require('./index-3ee995a4.js');
-const usage = require('./usage-47b5afb6.js');
+const index = require('./index-e321455d.js');
+const index$1 = require('./index-aa48ea67.js');
+const usage = require('./usage-66f3f455.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const tag = "tag with label: {label}";
@@ -26,7 +26,6 @@ const GuxTag = class {
         this.removable = false;
         this.size = 'small';
         this.emphasis = 'bold';
-        this.label = undefined;
     }
     onKeyDown(event) {
         switch (event.key) {
@@ -69,7 +68,7 @@ const GuxTag = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, tagResources);
     }
     render() {
-        return (index.h("div", { key: 'd4860a650699120c5ac4c31f9c4824125500e84f', class: {
+        return (index.h("div", { key: 'ba6317addb48b6d4317df3ed659ce28574cd6d22', class: {
                 'gux-tag': true,
                 [`gux-accent-${this.accent}`]: true,
                 'gux-disabled': this.disabled,

package/dist/cjs/gux-text-highlight.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const usage = require('./usage-47b5afb6.js');
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
 
 const conversion = /[ +]/g;
 const expressions = new Map();
@@ -53,9 +53,13 @@ const GuxTextHighlightStyle0 = guxTextHighlightCss;
 const GuxTextHighlight = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.text = undefined;
-        this.highlight = undefined;
+        /**
+         * The way the text should be highlighted.
+         */
         this.strategy = 'start';
+        /**
+         * The highlight color should be dimmed
+         */
         this.dimmed = false;
     }
     componentWillLoad() {

package/dist/cjs/gux-time-beta.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const usage = require('./usage-47b5afb6.js');
-const getValidTimezone = require('./get-valid-timezone-2f200f69.js');
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
+const getValidTimezone = require('./get-valid-timezone-6d0cf04e.js');
 const intl = require('./intl-ed89316c.js');
 const useRegionalDates = require('./use-regional-dates-4d3f1b9d.js');
-const index$1 = require('./index-3ee995a4.js');
+const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-26170ce0.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -15,9 +15,14 @@ const GuxTime = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.hasRegionalDatesCookie = false;
+        /**
+         * The ISO string representation of the time to format
+         */
         this.datetime = new Date().toISOString();
+        /**
+         * Format option type
+         */
         this.format = 'short';
-        this.timeZone = undefined;
     }
     componentWillLoad() {
         usage.trackComponent(this.root);

package/dist/cjs/gux-time-picker.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-1337610f.js');
-const onClickOutside = require('./on-click-outside-bfd599ca.js');
+const index$1 = require('./index-e321455d.js');
+const onClickOutside = require('./on-click-outside-8a2d3a8e.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const index = require('./index-3ee995a4.js');
-const usage = require('./usage-47b5afb6.js');
+const index = require('./index-aa48ea67.js');
+const usage = require('./usage-66f3f455.js');
 const logError = require('./log-error-7b9d4b57.js');
 const intl = require('./intl-ed89316c.js');
 const useRegionalDates = require('./use-regional-dates-4d3f1b9d.js');
@@ -244,9 +244,6 @@ const GuxTimePicker = class {
         this.disabled = false;
         this.required = false;
         this.hasError = false;
-        this.clockType = undefined;
-        this.min = undefined;
-        this.max = undefined;
         this.expanded = false;
     }
     onFocus() {
@@ -459,7 +456,7 @@ const GuxTimePicker = class {
         return (index$1.h("div", { slot: "popup", class: "gux-list-container", onKeyDown: (e) => this.onListKeyDown(e) }, index$1.h("gux-list", { ref: el => (this.listElement = el) }, this.renderTimeListItems())));
     }
     render() {
-        return (index$1.h("gux-popup", { key: '7d87923d3d6803717c9e0395672e2da9830f5808', class: {
+        return (index$1.h("gux-popup", { key: '88fcdcab282d28e61fd07429aeda9ea7f3ffdda0', class: {
                 'gux-time-picker': true,
                 'gux-error': this.hasError
             }, expanded: this.expanded, disabled: this.disabled }, this.renderTarget(), this.renderPopup()));

package/dist/cjs/gux-time-zone-beta.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const usage = require('./usage-47b5afb6.js');
-const index$1 = require('./index-3ee995a4.js');
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
+const index$1 = require('./index-aa48ea67.js');
 const timeZone = require('./time-zone-57632efb.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -22,10 +22,6 @@ function getLocalizedOffset(localizedUTC, timeZoneId) {
 const GuxTimeZoneBeta = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.timeZoneId = undefined;
-        this.offset = undefined;
-        this.surroundOffset = undefined;
-        this.shorten = undefined;
     }
     renderZoneDisplay() {
         let localizedZone = this.i18n(this.timeZoneId);

package/dist/cjs/gux-time-zone-picker-beta.cjs.entry.js

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const index$1 = require('./index-3ee995a4.js');
+const index = require('./index-e321455d.js');
+const index$1 = require('./index-aa48ea67.js');
 const timeZone = require('./time-zone-57632efb.js');
-const usage = require('./usage-47b5afb6.js');
+const usage = require('./usage-66f3f455.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -15,18 +15,10 @@ const GuxTimeZonePickerBetaStyle0 = guxTimeZonePickerCss;
 const GuxTimeZonePickerBeta = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.value = undefined;
-        this.workspaceDefault = undefined;
-        this.localDefault = undefined;
-        this.customDefault = undefined;
-        this.customDefaultLabel = undefined;
         this.hasError = false;
         this.disabled = false;
         this.required = false;
         this.searchString = '';
-        this.timeZoneOptionElements = undefined;
-        this.timeZoneList = undefined;
-        this.filteredZoneList = undefined;
     }
     on(event) {
         this.searchString = event.detail;

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

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const usage = require('./usage-47b5afb6.js');
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const logError = require('./log-error-7b9d4b57.js');
 
@@ -59,9 +59,9 @@ const GuxToast = class {
         return (index.h("gux-cta-group", { class: "gux-buttons-bar", align: "end" }, this.hasSecondaryButton && (index.h("gux-button-slot", { slot: "secondary" }, index.h("slot", { name: "secondary-button" }))), index.h("gux-button-slot", { slot: "primary" }, index.h("slot", { name: "primary-button" }))));
     }
     render() {
-        return (index.h("div", { key: 'f46ed25bd37a97bea8c2ff2b2dc61e4aab323a48', class: `gux-toast gux-toast-${this.toastType}` }, index.h("div", { key: '2ccc12891eb7d4f8b203b16fd1e71f04e9ce258f', class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), index.h("div", { key: 'e80dee5f0b4f9140893d8f3b959ad233f377786f', class: "gux-content" }, index.h("div", { key: 'f60e6e202ffceae0efaeb984fcafb39517ca9bbe', class: "gux-message" }, index.h("gux-truncate", { key: '955b81a41eb14cbc88a121dc85b6fb735955d87b', class: "gux-message-title", "max-lines": 1 }, index.h("slot", { key: '576a1abd5515827782959257dce55e7540117d9f', name: "title" })), index.h("gux-truncate", { key: '49ab880816ccf09860170c1e9fd4d94e0f32f469', class: "gux-message-body", "max-lines": 2 }, index.h("slot", { key: '32d619d38d8dd07651c24fe11ea91a4c1de47f0e', name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&
+        return (index.h("div", { key: '25961d73356340a8c09b7c3eca35844580231495', class: `gux-toast gux-toast-${this.toastType}` }, index.h("div", { key: 'd91c94b9ee5d82bdb90e52f5655192ef24c4d636', class: `gux-icon gux-icon-${this.toastType}` }, this.renderToastIcon()), index.h("div", { key: '9c2953c61775b77995b591df0ab5e17f1ede2a22', class: "gux-content" }, index.h("div", { key: '05c1207807c9be423acca1261da7ef459198db78', class: "gux-message" }, index.h("gux-truncate", { key: 'a02966c34b3864143695594f20d7ab190ad0a56d', class: "gux-message-title", "max-lines": 1 }, index.h("slot", { key: '2099a76aec045694b64a806b5fa09cc694d33662', name: "title" })), index.h("gux-truncate", { key: 'dcb3ea2544dad2a9901319dcbabdce60883bde6f', class: "gux-message-body", "max-lines": 2 }, index.h("slot", { key: 'fcb924aa6faf88c0d2e559761092660b99b4524d', name: "message" }))), this.toastType !== 'action' && this.hasLink && this.renderLink(), this.toastType === 'action' &&
             this.hasPrimaryButton &&
-            this.renderActions()), index.h("gux-dismiss-button", { key: 'f37fe30b31d49524b2d78045b82463e5710ea0ae', position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+            this.renderActions()), index.h("gux-dismiss-button", { key: '201e1fa01443f0bb420c88da43a8338ecf6c9ece', position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
+const index = require('./index-e321455d.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;inline-size:var(--gse-ui-toggle-track-width);block-size:var(--gse-ui-toggle-track-height);cursor:pointer;border-radius:var(--gse-ui-toggle-track-borderRadius)}gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider{background-color:var(--gse-ui-toggle-track-error-off-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-error .gux-slider .gux-switch{border:var(--gse-ui-toggle-handle-error-border-width) var(--gse-ui-toggle-handle-error-border-style) var(--gse-ui-toggle-handle-error-border-color)}gux-toggle-slider .gux-toggle-slider.gux-error.gux-checked .gux-slider{background-color:var(--gse-ui-toggle-track-error-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-disabled{pointer-events:none;cursor:default;background-color:var(--gse-ui-toggle-track-disabled-off-backgroundColor);opacity:var(--gse-ui-toggle-disabled-opacity)}gux-toggle-slider .gux-toggle-slider:focus-visible{outline:var(--gse-ui-toggle-focus-border-width) var(--gse-ui-toggle-focus-border-style) var(--gse-ui-toggle-focus-border-color);outline-offset:var(--gse-ui-toggle-focus-offset);border-radius:var(--gse-ui-toggle-focus-borderRadius)}gux-toggle-slider .gux-toggle-slider .gux-slider{position:absolute;inset:0;background-color:var(--gse-ui-toggle-track-enabled-off-backgroundColor);border-radius:calc(var(--gse-ui-toggle-track-height) / 2);transition:background-color 0.2s ease}gux-toggle-slider .gux-toggle-slider .gux-slider:hover{background-color:var(--gse-ui-toggle-track-hover-off-backgroundColor)}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch{position:absolute;inset-block-end:calc((var(--gse-ui-toggle-track-height) - (var(--gse-ui-toggle-handle-width))) / 2);inset-inline-start:calc((var(--gse-ui-toggle-track-height) - (var(--gse-ui-toggle-handle-width))) / 2);inline-size:calc((var(--gse-ui-toggle-handle-width)) - 4px);block-size:calc(var(--gse-ui-toggle-handle-height) - 4px);color:var(--gse-ui-toggle-handle-foregroundColor);content:\"\";background-color:var(--gse-ui-toggle-handle-backgroundColor);border:var(--gse-ui-toggle-handle-enabled-border-width) var(--gse-ui-toggle-handle-enabled-border-style) var(--gse-ui-toggle-handle-enabled-border-color);border-radius:var(--gse-ui-toggle-handle-borderRadius);transition:0.2s}gux-toggle-slider .gux-toggle-slider .gux-slider .gux-switch gux-icon{position:absolute;inset:0;inline-size:calc((var(--gse-ui-toggle-handle-width)) - 6px);block-size:calc((var(--gse-ui-toggle-handle-width)) - 6px);margin:auto;color:var(--gse-ui-toggle-handle-backgroundColor);transition:color 0.2s linear}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider{background-color:var(--gse-ui-toggle-track-enabled-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled{background-color:var(--gse-ui-toggle-track-disabled-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider.gux-disabled .gux-switch{border:var(--gse-ui-toggle-handle-disabled-border-width) var(--gse-ui-toggle-handle-disabled-border-style) var(--gse-ui-toggle-handle-disabled-border-color)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover{background-color:var(--gse-ui-toggle-track-hover-on-backgroundColor)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider:hover .gux-switch{border:var(--gse-ui-toggle-handle-hover-border-width) var(--gse-ui-toggle-handle-hover-border-style) var(--gse-ui-toggle-handle-hover-border-color)}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch{transform:translateX(calc(var(--gse-ui-toggle-track-width) - var(--gse-ui-toggle-track-height)))}gux-toggle-slider .gux-toggle-slider.gux-checked .gux-slider .gux-switch gux-icon{color:var(--gse-ui-toggle-handle-foregroundColor);opacity:1;transition:opacity 0.1s linear;transition-delay:0.1s}";
 const GuxToggleSliderStyle0 = guxToggleSliderCss;
@@ -25,12 +25,12 @@ const GuxToggleSlider = class {
     }
     render() {
         const isError = this.errorId.length > 0;
-        return (index.h("div", { key: '7d524e23f0ab60c1d863b1b73aa2e2b5bff3766d', class: {
+        return (index.h("div", { key: '0eb8c8c2ebfcae002402dc8a1f9299f32bfc0da5', class: {
                 'gux-toggle-slider': true,
                 'gux-checked': this.checked,
                 'gux-disabled': this.disabled,
                 'gux-error': isError
-            }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, index.h("div", { key: '784eaef2455b5b5df6ad066f5e9fc834b3e0b47b', class: "gux-slider" }, index.h("div", { key: '774fd09993f708ba53a8acb06a2dca9cacb5f2eb', class: "gux-switch" }, !isError && (index.h("gux-icon", { key: 'ba8a605d4fab3a6d42ce57f2732b3abf16ea99ed', "icon-name": "fa/check-solid", decorative: true }))))));
+            }, role: "checkbox", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), tabindex: this.disabled ? '' : '0', ref: el => (this.checkboxElement = el) }, index.h("div", { key: '574f856c02f95bb0a2167fa849e0e252d43a3f14', class: "gux-slider" }, index.h("div", { key: '6adfae5a1d15e0efabb0b1b83313142a45727e38', class: "gux-switch" }, !isError && (index.h("gux-icon", { key: '176e19bafb87a3ad8ae841cc5aac440627be4241', "icon-name": "fa/check-solid", decorative: true }))))));
     }
 };
 GuxToggleSlider.style = GuxToggleSliderStyle0;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
-const usage = require('./usage-47b5afb6.js');
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const index$1 = require('./index-3ee995a4.js');
+const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const defaultAriaLabel = "Toggle Switch";
@@ -29,11 +29,7 @@ const GuxToggle = class {
         this.checked = false;
         this.disabled = false;
         this.loading = false;
-        this.label = undefined;
-        this.checkedLabel = undefined;
-        this.uncheckedLabel = undefined;
         this.labelPosition = 'right';
-        this.errorMessage = undefined;
         this.displayInline = false;
     }
     handleLoading(loading) {
@@ -91,11 +87,11 @@ const GuxToggle = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'd040fbdee7d5c55da814f2cdbb8c704c494f62a3', class: { 'gux-display-inline': this.displayInline } }, index.h("div", { key: '6a68458c84d103c1a597a0a2e87d682d6bfe130b', class: {
+        return (index.h(index.Host, { key: 'bd4881a81fe6ee959fa399ed25afcf23d4e066b7', class: { 'gux-display-inline': this.displayInline } }, index.h("div", { key: 'd2e8faa4ad4f6c0ae71206802f6a7f03e033f754', class: {
                 'gux-toggle-container': true,
                 'gux-toggle-label-left': this.labelPosition === 'left',
                 'gux-disabled': this.disabled || this.loading
-            } }, index.h("div", { key: '2ec395e79521f360b73040c8c3a1f719cf321bb0', class: "gux-toggle-input", onClick: this.toggle.bind(this) }, index.h("gux-toggle-slider", { key: '8d39cee087b78401fce45c4e2d55d793bcf42d98', checked: this.checked, disabled: this.disabled || this.loading, guxAriaLabel: this.getAriaLabel(), labelId: this.checkedLabel && this.uncheckedLabel ? this.labelId : '', onKeyDown: this.onKeydown.bind(this), errorId: this.errorMessage ? this.errorId : '' }), this.renderLabel()), this.renderError()), index.h("gux-announce-beta", { key: 'f6c51d507ff623cbb71398f0dde7bec532a52fed', ref: el => (this.announceElement = el) })));
+            } }, index.h("div", { key: 'da46e2dbed216a1d723872c000ec5ff03180f033', class: "gux-toggle-input", onClick: this.toggle.bind(this) }, index.h("gux-toggle-slider", { key: '3603c51c1b31201053e1a65004007625ba9c9e78', checked: this.checked, disabled: this.disabled || this.loading, guxAriaLabel: this.getAriaLabel(), labelId: this.checkedLabel && this.uncheckedLabel ? this.labelId : '', onKeyDown: this.onKeydown.bind(this), errorId: this.errorMessage ? this.errorId : '' }), this.renderLabel()), this.renderError()), index.h("gux-announce-beta", { key: '8f46f9736a735c7bd046d404eb9f96cace8e8913', ref: el => (this.announceElement = el) })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
+const index = require('./index-e321455d.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-471324c9.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-47b5afb6.js');
+const usage = require('./usage-66f3f455.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const overflowDetection = require('./overflow-detection-cb449687.js');
 const findElementById = require('./find-element-by-id-fde17c92.js');
@@ -24,16 +24,26 @@ const GuxTooltipBase = class {
             ['pointerenter', this.pointerenterHandler],
             ['pointerleave', this.pointerleaveHandler],
             ['focusin', this.focusinHandler],
-            ['focusout', this.focusoutHandler]
+            ['focusout', this.focusoutHandler],
+            ['mousemove', this.handlePointerMove.bind(this)]
         ]);
         this.id = randomHtmlId.randomHTMLId('gux-tooltip-base');
-        this.tooltipId = undefined;
-        this.forElement = undefined;
+        /**
+         * Placement of the tooltip. Default is bottom-start
+         */
         this.placement = 'bottom-start';
         this.offsetX = 0;
         this.offsetY = 0;
         this.accent = 'light';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
         this.visualOnly = false;
+        this.followMouse = false;
+        /**
+         * If tooltip is shown or not
+         */
         this.isShown = false;
     }
     handleKeyDown(event) {
@@ -47,6 +57,13 @@ const GuxTooltipBase = class {
     handlePointerleave() {
         this.hide();
     }
+    handlePointerMove(event) {
+        if (this.followMouse) {
+            event.preventDefault();
+            this.refElement = this.getRefElement(event.clientX, event.clientY);
+            this.runUpdatePosition();
+        }
+    }
     /*
      * Show tooltip
      */
@@ -62,14 +79,15 @@ const GuxTooltipBase = class {
         this.hide();
     }
     runUpdatePosition() {
-        this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(this.forElement, this.root, () => this.updatePosition(), {
+        const ref = this.followMouse && this.refElement ? this.refElement : this.forElement;
+        this.cleanupUpdatePosition = floatingUi_dom_esm.autoUpdate(ref, this.root, () => this.updatePosition(ref), {
             ancestorScroll: true,
             elementResize: true,
-            animationFrame: false,
+            animationFrame: this.followMouse,
             ancestorResize: true
         });
     }
-    updatePosition() {
+    updatePosition(ref) {
         const middleware = [
             floatingUi_dom_esm.offset(16),
             floatingUi_dom_esm.flip(),
@@ -77,7 +95,7 @@ const GuxTooltipBase = class {
             floatingUi_dom_esm.hide(),
             overflowDetection.overflowDetection()
         ];
-        void floatingUi_dom_esm.computePosition(this.forElement, this.root, {
+        void floatingUi_dom_esm.computePosition(ref, this.root, {
             placement: this.placement,
             strategy: 'fixed',
             middleware: middleware
@@ -85,7 +103,7 @@ const GuxTooltipBase = class {
             var _a;
             Object.assign(this.root.style, {
                 left: `${x + this.offsetX}px`,
-                top: `${y - this.offsetY}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.
@@ -102,6 +120,7 @@ const GuxTooltipBase = class {
     hide() {
         this.hideDelayTimeout = setTimeout(() => {
             this.isShown = false;
+            this.refElement = undefined;
             if (this.cleanupUpdatePosition) {
                 this.cleanupUpdatePosition();
             }
@@ -126,6 +145,22 @@ const GuxTooltipBase = class {
         this.disconnectForElement();
         this.setForElement();
     }
+    getRefElement(cursorX, cursorY) {
+        return {
+            getBoundingClientRect() {
+                return {
+                    x: cursorX,
+                    y: cursorY,
+                    top: cursorY,
+                    left: cursorX,
+                    bottom: cursorY,
+                    right: cursorX,
+                    width: 10,
+                    height: 10
+                };
+            }
+        };
+    }
     connectedCallback() {
         this.setForElement();
     }
@@ -139,10 +174,10 @@ const GuxTooltipBase = class {
         this.disconnectForElement();
     }
     render() {
-        return (index.h(index.Host, { key: '64e1b8b7935a7fe487f7cfe19fbd6af4fe9eb54b', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, index.h("div", { key: 'b14355016dfeb6a3e8b6a1c32cd31188fd143d97', class: {
+        return (index.h(index.Host, { key: '4e7c0cf62fae55affefec3c26c6f09e1a7a31edd', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, index.h("div", { key: '5331c5c37ba1c7fff188e3aab855d8ed0abbd921', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, index.h("slot", { key: '08fc4e527b11d357db025b64730f64a93d7dc599', name: "content" }))));
+            }, "data-placement": this.placement }, index.h("slot", { key: '70e9076b53ea55109e601bc5f6f9a8eca82ff3c8', name: "content" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {
@@ -157,11 +192,15 @@ const GuxTooltip = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = randomHtmlId.randomHTMLId('gux-tooltip');
-        this.forElement = undefined;
-        this.role = undefined;
-        this.for = undefined;
+        /**
+         * Placement of the tooltip. Default is bottom-start
+         */
         this.placement = 'bottom-start';
         this.accent = 'light';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
         this.visualOnly = false;
     }
     /*

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

@@ -0,0 +1,87 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e321455d.js');
+const usage = require('./usage-66f3f455.js');
+const findElementById = require('./find-element-by-id-fde17c92.js');
+const randomHtmlId = require('./random-html-id-71c43d5a.js');
+
+const GuxTooltipPointer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.id = randomHtmlId.randomHTMLId('gux-tooltip-pointer');
+        this.accent = 'light';
+        this.placement = 'bottom-start';
+        /**
+         * Determines whether the text in the tooltip is read by screenreaders.
+         * Use for cases where the forElement component handles the accessibility.
+         */
+        this.visualOnly = false;
+    }
+    /*
+     * 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-pointer: invalid element supplied to 'for': "${this.for}"`);
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: 'fb000951b9b468e71d44773cb2cf78f25fd1fb34', id: this.id, role: this.role }, index.h("gux-tooltip-base-beta", { key: 'dfbeb8488b7e9c18c4a6a9d562bfc759bc7e7441', forElement: this.forElement, placement: this.placement, accent: this.accent, tooltipId: this.id, visualOnly: this.visualOnly, ref: el => (this.baseTooltip = el), followMouse: true }, index.h("span", { key: '1c339b9f6a987e8995b667e80ad1341a5b226f1d', slot: "content" }, index.h("slot", { key: '5cfe0123dce5e4ed2b9bacf0fc8f9f33539798e8', name: "content" }, index.h("slot", { key: '02e85502243c4d20b447ef4e192c1b581d8ed1e9' }))))));
+    }
+    get root() { return index.getElement(this); }
+    static get watchers() { return {
+        "for": ["updateForElement"]
+    }; }
+};
+
+exports.gux_tooltip_pointer_beta = GuxTooltipPointer;

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1337610f.js');
+const index = require('./index-e321455d.js');
 const logError = require('./log-error-7b9d4b57.js');
-const onMutation = require('./on-mutation-7c046081.js');
-const onResize = require('./on-resize-514663f7.js');
+const onMutation = require('./on-mutation-6d71ec1a.js');
+const onResize = require('./on-resize-b2cc6e7f.js');
 
 const guxTooltipTitleCss = "gux-tooltip-title{overflow:hidden}gux-tooltip{font-weight:normal;line-height:normal;text-align:start;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-inline-start:20px}.gux-tooltip-icon-decorative .gux-title-container gux-icon,.gux-tooltip-icon-decorative .gux-title-container ::slotted(gux-icon){position:absolute;inset-block-start:1px;inset-inline-start:-20px;flex-shrink:0;inline-size:16px;block-size:16px}.gux-icon-only{line-height:0px}";
 const GuxTooltipTitleStyle0 = guxTooltipTitleCss;
@@ -129,10 +129,10 @@ const GuxTooltipTitle = class {
     }
     render() {
         return [
-            index.h("span", { key: '51e3a363495c4f5ebe92d4303979c6c019b66d87', class: {
+            index.h("span", { key: 'cba947eff67ef23ec53277350ae12c3687154410', class: {
                     'gux-title-container': true,
                     'gux-icon-only': this.iconOnly
-                } }, index.h("slot", { key: 'f1121269950760e368cae9d922e283ccbcde6bae' })),
+                } }, index.h("slot", { key: '28d95434eab0783863e00b8e5f3cbcaf02231f4a' })),
             this.renderTooltip()
         ];
     }