genesys-spark-components 3.82.2 → 3.83.0

package/dist/esm/gux-dropdown-multi-beta.entry.js

@@ -4,7 +4,7 @@ import { b as buildI18nForComponent } from './index-fbebbbd0.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { b as afterNextRender } from './after-next-render-ed0f7dcd.js';
 import { o as onInputDisabledStateChange } from './on-input-disabled-state-change-3ea76372.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { g as getSearchOption } from './gux-listbox.service-534dc33f.js';
 import { O as OnMutation } from './on-mutation-35d8145e.js';
 import './get-closest-element-1597503c.js';
@@ -22,7 +22,7 @@ const translationResources = {
 	pressEnterToCreate: pressEnterToCreate
 };
 
-const guxDropdownMultiCss = ":host{color:#2e394c}.gux-dropdown-container{position:relative}.gux-error.gux-target-container-collapsed .gux-field-button,.gux-error.gux-target-container-expanded{border-color:#ea0b0b}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:6px 0 6px 6px;font-family:inherit;font-size:12px;line-height:1.6667;cursor:pointer;background-color:#f6f7f9}.gux-field.gux-input-field{height:30px;cursor:text}.gux-field .gux-field-content{position:relative;display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;min-width:0;height:100%}.gux-field .gux-field-content .gux-filter,.gux-field .gux-field-content .gux-selected-option,.gux-field .gux-field-content .gux-placeholder{flex:1 1 auto;align-self:auto;order:0;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gux-field .gux-field-content .gux-filter .gux-sr-only:not(:focus):not(:active),.gux-field .gux-field-content .gux-selected-option .gux-sr-only:not(:focus):not(:active),.gux-field .gux-field-content .gux-placeholder .gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.gux-field .gux-field-content .gux-filter{position:relative;height:100%;padding-left:0}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;width:100%;color:transparent;caret-color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display{white-space:pre}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-text{color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:#596373}.gux-field .gux-field-content .gux-filter .gux-filter-input,.gux-field .gux-field-content .gux-filter .gux-filter-display{position:absolute}.gux-field .gux-field-content .gux-placeholder{color:#596373}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;padding:0 8px;color:#596373}.gux-target-container-expanded{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-expanded:focus-visible,.gux-target-container-expanded:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{border:none;outline:none}.gux-target-container-expanded .gux-field-button{width:auto;height:30px;padding:0 0 0 8px;margin:0;background:inherit;border:none;outline:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-collapsed .gux-field-button:focus-visible,.gux-target-container-collapsed .gux-field-button:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-listbox-container{box-sizing:border-box;margin:0;color:#2e394c}.gux-error-message-container{display:none;margin:4px 0}.gux-error-message-container.gux-show{display:flex}";
+const guxDropdownMultiCss = ":host{color:#2e394c}.gux-dropdown-container{position:relative}.gux-error.gux-target-container-collapsed .gux-field-button,.gux-error.gux-target-container-expanded{border-color:#ea0b0b}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:6px 0 6px 6px;font-family:inherit;font-size:12px;line-height:1.6667;cursor:pointer;background-color:#f6f7f9}.gux-field.gux-input-field{height:30px;cursor:text}.gux-field .gux-field-content{position:relative;display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;min-width:0;height:100%}.gux-field .gux-field-content .gux-filter,.gux-field .gux-field-content .gux-selected-option,.gux-field .gux-field-content .gux-placeholder{flex:1 1 auto;align-self:auto;order:0;padding-left:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gux-field .gux-field-content .gux-filter .gux-sr-only:not(:focus):not(:active),.gux-field .gux-field-content .gux-selected-option .gux-sr-only:not(:focus):not(:active),.gux-field .gux-field-content .gux-placeholder .gux-sr-only:not(:focus):not(:active){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.gux-field .gux-field-content .gux-filter{position:relative;height:100%;padding-left:0}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;width:100%;color:transparent;caret-color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display{white-space:pre}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-text{color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:#596373}.gux-field .gux-field-content .gux-filter .gux-filter-input,.gux-field .gux-field-content .gux-filter .gux-filter-display{position:absolute}.gux-field .gux-field-content .gux-placeholder{color:#596373}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;padding:0 8px;color:#596373}.gux-target-container-expanded{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-expanded:focus-visible,.gux-target-container-expanded:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{border:none;outline:none}.gux-target-container-expanded .gux-field-button{width:auto;height:30px;padding:0 0 0 8px;margin:0;background:inherit;border:none;outline:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-collapsed .gux-field-button:focus-visible,.gux-target-container-collapsed .gux-field-button:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-listbox-container{box-sizing:border-box;margin:0;color:#2e394c}gux-popup-beta::part(gux-popup-container){width:inherit}.gux-error-message-container{display:none;margin:4px 0}.gux-error-message-container.gux-show{display:flex}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

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

@@ -4,7 +4,7 @@ import { b as buildI18nForComponent } from './index-fbebbbd0.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { o as onInputDisabledStateChange, c as calculateInputDisabledState } from './on-input-disabled-state-change-3ea76372.js';
 import { b as afterNextRender } from './after-next-render-ed0f7dcd.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { O as OnMutation } from './on-mutation-35d8145e.js';
 import { k as getListOptions, g as getSearchOption, s as setInitialActiveOption, c as clearActiveOptions, a as setLastOptionActive, b as setFirstOptionActive, h as hasPreviousOption, d as setPreviousOptionActive, e as hasNextOption, f as setNextOptionActive, i as actOnActiveOption, j as goToOption, m as matchOption, o as onClickedOption } from './gux-listbox.service-534dc33f.js';
 import { w as whenEventIsFrom } from './when-event-is-from-18667084.js';
@@ -20,7 +20,7 @@ const translationResources$1 = {
 	dropdown: dropdown
 };
 
-const guxDropdownCss = ":host{color:#2e394c}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:6px 8px;font-family:inherit;font-size:12px;line-height:1.6667;cursor:pointer;background-color:#f6f7f9}.gux-error.gux-target-container-collapsed .gux-field-button,.gux-error.gux-target-container-expanded{border-color:#ea0b0b}.gux-field.gux-input-field{height:30px}.gux-field .gux-field-content{display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;min-width:0;height:100%}.gux-field .gux-field-content .gux-filter,.gux-field .gux-field-content .gux-selected-option,.gux-field .gux-field-content .gux-placeholder{flex:1 1 auto;align-self:auto;order:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gux-field .gux-field-content .gux-filter{position:relative;height:100%}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;width:100%;color:transparent;caret-color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display{white-space:pre}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-text{color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:#596373}.gux-field .gux-field-content .gux-filter .gux-filter-input,.gux-field .gux-field-content .gux-filter .gux-filter-display{position:absolute}.gux-field .gux-field-content .gux-placeholder{color:#596373}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;padding-left:8px;color:#596373}.gux-target-container-expanded{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-expanded:focus-visible,.gux-target-container-expanded:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{border:none;outline:none}.gux-target-container-expanded .gux-field-button{width:auto;height:30px;padding:0 0 0 8px;margin:0;background:inherit;border:none;outline:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-collapsed .gux-field-button:focus-visible,.gux-target-container-collapsed .gux-field-button:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-listbox-container{box-sizing:border-box;margin:0;color:#2e394c}.gux-selected-icon{display:flex;align-items:center}.gux-selected-icon gux-icon{width:16px;height:16px;padding-right:8px}";
+const guxDropdownCss = ":host{color:#2e394c}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:center;width:100%;height:32px;padding:6px 8px;font-family:inherit;font-size:12px;line-height:1.6667;cursor:pointer;background-color:#f6f7f9}.gux-error.gux-target-container-collapsed .gux-field-button,.gux-error.gux-target-container-expanded{border-color:#ea0b0b}.gux-field.gux-input-field{height:30px}.gux-field .gux-field-content{--gux-zindex-tooltip:3;display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;min-width:0;height:100%}.gux-field .gux-field-content .gux-filter,.gux-field .gux-field-content .gux-selected-option,.gux-field .gux-field-content .gux-placeholder{flex:1 1 auto;align-self:auto;order:0;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gux-field .gux-field-content .gux-filter{position:relative;height:100%}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;width:100%;color:transparent;caret-color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display{white-space:pre}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-text{color:#2e394c}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:#596373}.gux-field .gux-field-content .gux-filter .gux-filter-input,.gux-field .gux-field-content .gux-filter .gux-filter-display{position:absolute}.gux-field .gux-field-content .gux-placeholder{color:#596373}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;width:16px;height:16px;padding-left:8px;color:#596373}.gux-target-container-expanded{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-expanded:focus-visible,.gux-target-container-expanded:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{border:none;outline:none}.gux-target-container-expanded .gux-field-button{width:auto;height:30px;padding:0 0 0 8px;margin:0;background:inherit;border:none;outline:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border:1px solid #6b7585;border-radius:4px;box-shadow:inset 0 0 4px rgba(32, 41, 55, 0.16)}.gux-target-container-collapsed .gux-field-button:focus-visible,.gux-target-container-collapsed .gux-field-button:focus-within{outline:3px solid #aac9ff;outline-offset:1px;box-shadow:0 0 0 1px #fdfdfd}.gux-listbox-container{box-sizing:border-box;margin:0;color:#2e394c}gux-popup-beta::part(gux-popup-container){width:inherit}.gux-selected-icon{display:flex;align-items:center}.gux-selected-icon gux-icon{width:16px;height:16px;padding-right:8px}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -159,6 +159,14 @@ const GuxDropdown = class {
       this.listboxElement.filter = this.filter;
     }
   }
+  showTooltip() {
+    var _a;
+    void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+  }
+  hideTooltip() {
+    var _a;
+    void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setHideTooltip());
+  }
   validateValue(newValue, listboxElement) {
     if (newValue === undefined) {
       if (listboxElement) {
@@ -285,7 +293,7 @@ const GuxDropdown = class {
     const tag = item.tagName.toLowerCase();
     switch (tag) {
       case 'gux-option':
-        return (h("span", null, item.textContent));
+        return (h("gux-truncate-beta", { ref: el => (this.truncateElement = el) }, item.textContent));
       case 'gux-option-icon':
         return this.renderIconOption(item);
       default:
@@ -299,7 +307,7 @@ const GuxDropdown = class {
     if (iconOption.iconColor !== null) {
       iconStyle = { color: iconOption.iconColor };
     }
-    return (h("span", { class: "gux-selected-icon" }, h("gux-icon", { "icon-name": iconOption.iconName, style: iconStyle, decorative: true }), iconOption.textContent));
+    return (h("span", { class: "gux-selected-icon" }, h("gux-icon", { "icon-name": iconOption.iconName, style: iconStyle, decorative: true }), h("gux-truncate-beta", { ref: el => (this.truncateElement = el) }, iconOption.textContent)));
   }
   renderFilterInputField() {
     if (this.expanded && this.isFilterable()) {
@@ -314,7 +322,7 @@ const GuxDropdown = class {
         'gux-target-container-expanded': this.expanded && this.isFilterable(),
         'gux-target-container-collapsed': !(this.expanded && this.isFilterable()),
         'gux-error': this.hasError
-      }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: calculateInputDisabledState(this.root), onClick: this.fieldButtonClick.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderRadialLoading(), h("gux-icon", { class: {
+      }, slot: "target" }, this.renderFilterInputField(), h("button", { type: "button", class: "gux-field gux-field-button", disabled: calculateInputDisabledState(this.root), onClick: this.fieldButtonClick.bind(this), onFocusin: this.showTooltip.bind(this), onFocusout: this.hideTooltip.bind(this), ref: el => (this.fieldButtonElement = el), "aria-haspopup": "listbox", "aria-expanded": this.expanded.toString() }, this.renderTargetContent(), this.renderRadialLoading(), h("gux-icon", { class: {
         'gux-expand-icon': true
       }, "screenreader-text": this.i18n('dropdown'), iconName: "chevron-small-down" }))));
   }
@@ -516,7 +524,7 @@ const GuxListbox = class {
 };
 GuxListbox.style = guxListboxCss;
 
-const guxOptionCss = "gux-option{box-sizing:border-box;display:flex;min-height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-option.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option.gux-selected{background:#deeaff}gux-option.gux-active,gux-option.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option.gux-filtered{display:none}";
+const guxOptionCss = "gux-option{box-sizing:border-box;display:flex;height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-option.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option.gux-selected{background:#deeaff}gux-option.gux-active,gux-option.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option.gux-filtered{display:none}gux-option .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}";
 
 const GuxOption = class {
   constructor(hostRef) {
@@ -534,6 +542,15 @@ const GuxOption = class {
   onMouseleave() {
     this.hovered = false;
   }
+  handleActive(active) {
+    var _a, _b;
+    if (active) {
+      void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+    }
+    else {
+      void ((_b = this.truncateElement) === null || _b === void 0 ? void 0 : _b.setHideTooltip());
+    }
+  }
   componentWillLoad() {
     this.root.id = this.root.id || randomHTMLId('gux-option');
   }
@@ -550,9 +567,12 @@ const GuxOption = class {
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("slot", null)));
+      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-truncate-beta", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   get root() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["handleActive"]
+  }; }
 };
 GuxOption.style = guxOptionCss;
 

package/dist/esm/gux-error-message-beta.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxErrorMessageBetaCss = ".gux-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-container gux-icon{flex:0 1 auto;align-self:auto;order:0;width:16px;height:16px;margin:0 4px;color:#ea0b0b}.gux-container .gux-message{flex:0 1 auto;align-self:auto;order:0}";
 

package/dist/esm/gux-flyout-menu-beta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-816e34d8.js';
 import { a as afterNextRenderTimeout } from './after-next-render-ed0f7dcd.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { h as hideDelay } from './gux-menu.common-4a871a5c.js';
 import { c as createPopper } from './popper-d15dbc3d.js';
 

package/dist/esm/gux-form-field-checkbox.entry.js

@@ -4,7 +4,7 @@ import { O as OnMutation } from './on-mutation-35d8145e.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds } from './gux-form-field.service-9e7fef65.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-color.entry.js

@@ -6,7 +6,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-dropdown.entry.js

@@ -5,7 +5,7 @@ import { o as onRequiredChange } from './on-attribute-change-5fd8da7c.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-input-clear-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { b as buildI18nForComponent } from './index-fbebbbd0.js';
 import './get-closest-element-1597503c.js';
 

package/dist/esm/gux-form-field-legacy.entry.js

@@ -4,7 +4,7 @@ import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 import { a as logWarn } from './log-error-3d08c2b1.js';
 import { o as onRequiredChange } from './on-attribute-change-5fd8da7c.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxFormFieldCss = "gux-form-field-legacy{display:block;color:#2e394c}gux-form-field-legacy .gux-label-and-input-and-error-container{margin:16px 0}gux-form-field-legacy .gux-label-and-input-and-error-container label{font-size:12px;font-weight:bold;line-height:20px}gux-form-field-legacy .gux-label-and-input-and-error-container input,gux-form-field-legacy .gux-label-and-input-and-error-container select{width:100%;font-size:12px}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-container input{overflow:hidden;text-overflow:ellipsis}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-container{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error textarea{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-error .gux-input-color-main-element{border-color:#ea0b0b}gux-form-field-legacy .gux-label-and-input-and-error-container .gux-input-and-error-container{flex-grow:1}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside{display:flex;flex-direction:row}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside .gux-label-container{position:relative;top:7px;width:fit-content;min-width:45px;margin-right:8px}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-range,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-select,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-text-like,gux-form-field-legacy .gux-label-and-input-and-error-container.gux-beside gux-input-search{flex:1 1 auto}gux-form-field-legacy .gux-label-and-input-and-error-container.gux-screenreader label{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}gux-form-field-legacy .gux-required::after{font-size:12px;color:#ea0b0b;content:' *'}gux-form-field-legacy .gux-error{display:none;margin:4px 0}gux-form-field-legacy .gux-error.gux-show{display:block}";
 

package/dist/esm/gux-form-field-number.entry.js

@@ -9,7 +9,7 @@ import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { h as hasContent, c as clearInput, G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './get-closest-element-1597503c.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';

package/dist/esm/gux-form-field-phone.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, g as getElement } from './i
 import { b as buildI18nForComponent } from './index-fbebbbd0.js';
 import { O as OnMutation } from './on-mutation-35d8145e.js';
 import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-change-5fd8da7c.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { G as GuxFormFieldLegendLabel, g as getSlotTextContent, a as GuxFormFieldFieldsetContainer } from './get-slot-text-content-d96faef2.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';

package/dist/esm/gux-form-field-radio.entry.js

@@ -4,7 +4,7 @@ import { O as OnMutation } from './on-mutation-35d8145e.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds } from './gux-form-field.service-9e7fef65.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-range.entry.js

@@ -6,7 +6,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-search.entry.js

@@ -6,7 +6,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { h as hasContent, c as clearInput, G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-select.entry.js

@@ -6,7 +6,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-text-like.entry.js

@@ -6,7 +6,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { h as hasContent, s as setSlotAriaDescribedby, c as clearInput, G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-textarea.entry.js

@@ -6,7 +6,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-40484056.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';
 import './set-input-value-5adeaccc.js';

package/dist/esm/gux-form-field-time-picker.entry.js

@@ -5,7 +5,7 @@ import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-cha
 import { h as hasSlot } from './has-slot-062ae63a.js';
 import { G as GuxFormFieldLegendLabel, g as getSlotTextContent, a as GuxFormFieldFieldsetContainer } from './get-slot-text-content-d96faef2.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp, v as validateFormIds, g as getComputedLabelPosition } from './gux-form-field.service-9e7fef65.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './get-closest-element-1597503c.js';
 import './random-html-id-8e3f658c.js';
 import './log-error-3d08c2b1.js';

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

@@ -1,5 +1,5 @@
 import { a as getAssetPath, r as registerInstance, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { l as logError } from './log-error-3d08c2b1.js';
 
 const iconNameMap = {

package/dist/esm/gux-inline-alert-beta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-816e34d8.js';
 import { b as buildI18nForComponent } from './index-fbebbbd0.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import './get-closest-element-1597503c.js';
 
 const info = "Information alert with message";

package/dist/esm/gux-list-item-legacy_2.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxListItemCss = ":host:focus-visible .gux-list-item,:host:active .gux-list-item,:host:hover:not([disabled]) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host(:focus-visible) .gux-list-item,:host(:active) .gux-list-item,:host(:hover:not([disabled])) .gux-list-item{color:#fdfdfd;background:#2a60c8}:host([disabled]) .gux-list-item{pointer-events:none;cursor:default;opacity:0.5}.gux-list-item{display:flex;height:max-content;padding:0 16px;line-height:32px;word-wrap:break-word;cursor:pointer}.gux-list-item .gux-text{width:100%}";
 

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-816e34d8.js';
 import { l as last, n as next, f as first, p as previous, b as byId, c as byClosestId } from './gux-list.service-d61fe8f6.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxListCss = ":host{display:flex;flex-direction:column;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start}";
 

package/dist/esm/gux-listbox-multi.entry.js

@@ -3,7 +3,7 @@ import { s as setInitialActiveOption, c as clearActiveOptions, a as setLastOptio
 import { b as buildI18nForComponent } from './index-fbebbbd0.js';
 import { w as whenEventIsFrom } from './when-event-is-from-18667084.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { b as afterNextRender } from './after-next-render-ed0f7dcd.js';
 import './get-closest-element-1597503c.js';
 

package/dist/esm/gux-loading-message-beta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, d as readTask, h, g as getElement } from './index-816e34d8.js';
 import { a as afterNextRenderTimeout } from './after-next-render-ed0f7dcd.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 /**
  * Below are the max-widths for the loading component.

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxModalCss = ":host .gux-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--gux-zindex-modal, 1);display:flex;align-items:center;justify-content:center;color:#2e394c;background:rgba(32, 41, 55, 0.8)}:host .gux-modal .gux-modal-container{box-shadow:0 8px 24px rgba(32, 41, 55, 0.4);position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:40px;background:#fdfdfd;border:1px solid #b4bccb;border-radius:4px}:host .gux-modal .gux-modal-container.gux-small{width:416px;max-height:min(368px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-medium{width:672px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-large{width:940px;max-height:min(640px, 100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic{max-width:calc(100vw - 2 * 24px);max-height:calc(100vh - 2 * 24px)}:host .gux-modal .gux-modal-container.gux-dynamic .gux-modal-content{max-height:none}:host .gux-modal .gux-modal-container .gux-modal-header{padding-bottom:24px;margin:0;font-family:Roboto, sans-serif;font-weight:400;font-weight:300;font-size:24px;line-height:32px}:host .gux-modal .gux-modal-container .gux-modal-content{max-height:432px;margin:0 8px 24px;overflow-y:auto}:host .gux-modal .gux-modal-container .gux-modal-content.gux-no-buttons{margin-bottom:0}:host .gux-modal .gux-modal-container .gux-button-footer{display:flex;justify-content:space-between}:host .gux-modal .gux-modal-container .gux-button-footer .gux-left-align-buttons gux-button{padding-right:5px}:host .gux-modal .gux-modal-container .gux-button-footer .gux-right-align-buttons gux-button{padding-left:5px}@media (max-width: 416px){:host .gux-modal .gux-modal-container.gux-small,:host .gux-modal .gux-modal-container.gux-medium,:host .gux-modal .gux-modal-container.gux-large{width:100%;height:100%}}";
 

package/dist/esm/gux-month-picker-beta.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { O as OnClickOutside } from './on-click-outside-8fa334c9.js';
 import { b as buildI18nForComponent, g as getDesiredLocale } from './index-fbebbbd0.js';
 import { s as simulateNativeEvent } from './simulate-native-event-ac69961f.js';

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxNotificationToastCss = ":host{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:flex-start;justify-content:flex-start;width:294px;padding:16px 8px 16px 16px;margin-bottom:4px;color:#2e394c;background:#f6f7f9;border:1px solid #b4bccb;border-color:#b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-icon{flex:0 1 auto;align-self:auto;order:0;margin:4px}.gux-icon ::slotted(gux-icon){width:24px !important;height:24px !important}.gux-icon.gux-alert{color:#ea0b0b}.gux-icon.gux-warning{color:#ffae00}.gux-icon.gux-positive{color:#3c8527}.gux-icon.gux-neutral{color:#203b73}.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;margin:0 12px 0 8px;color:#2e394c}.gux-content .gux-title,.gux-content .gux-message{flex:1 1 auto;align-self:auto;order:0}.gux-content .gux-title{font-family:Roboto, sans-serif;font-weight:400;font-size:14px;line-height:20px}";
 

package/dist/esm/gux-option-icon.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-816e34d8.js';
 import { r as randomHTMLId } from './random-html-id-8e3f658c.js';
 
-const guxOptionIconCss = "gux-option-icon{box-sizing:border-box;display:flex;min-height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer;align-items:flex-start}gux-option-icon.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-icon.gux-selected{background:#deeaff}gux-option-icon.gux-active,gux-option-icon.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option-icon.gux-filtered{display:none}gux-option-icon gux-icon{flex-shrink:0;width:16px;height:16px;margin-block-start:calc((20px - 16px) / 2);margin-inline-end:8px}";
+const guxOptionIconCss = "gux-option-icon{box-sizing:border-box;display:flex;height:32px;padding:6px 8px;color:#2e394c;word-wrap:break-word;cursor:pointer;align-items:flex-start}gux-option-icon.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-icon.gux-selected{background:#deeaff}gux-option-icon.gux-active,gux-option-icon.gux-hovered:not(:disabled){color:#fdfdfd;background:#2a60c8}gux-option-icon.gux-filtered{display:none}gux-option-icon .gux-slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}gux-option-icon gux-icon{flex-shrink:0;width:16px;height:16px;margin-block-start:calc((20px - 16px) / 2);margin-inline-end:8px}";
 
 const GuxOptionIcon = class {
   constructor(hostRef) {
@@ -22,6 +22,15 @@ const GuxOptionIcon = class {
   onMouseleave() {
     this.hovered = false;
   }
+  handleActive(active) {
+    var _a, _b;
+    if (active) {
+      void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+    }
+    else {
+      void ((_b = this.truncateElement) === null || _b === void 0 ? void 0 : _b.setHideTooltip());
+    }
+  }
   componentWillLoad() {
     this.root.id = this.root.id || randomHTMLId('gux-option-icon');
   }
@@ -44,9 +53,12 @@ const GuxOptionIcon = class {
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("slot", null)));
+      }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, h("gux-icon", { decorative: this.iconSrText == null, "screenreader-text": this.iconSrText, "icon-name": this.iconName, style: iconStyle }), h("gux-truncate-beta", { ref: el => (this.truncateElement = el) }, h("slot", null))));
   }
   get root() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["handleActive"]
+  }; }
 };
 GuxOptionIcon.style = guxOptionIconCss;
 

package/dist/esm/gux-option-multi.entry.js

@@ -8,7 +8,7 @@ const translationResources = {
 	removeCustomElementInstructions: removeCustomElementInstructions
 };
 
-const guxOptionMultiCss = "gux-option-multi{box-sizing:border-box;display:flex;min-height:32px;padding:6px 12px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-option-multi .gux-option::before{position:relative;top:2px;display:inline-block;width:13px;height:13px;margin-right:7px;content:'';background-color:white;background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='%23596373' /%3E%3C/svg%3E\");border-radius:30%}gux-option-multi.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-multi.gux-selected .gux-option::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active,gux-option-multi.gux-hovered:not([disabled]){color:#fdfdfd;background:#2a60c8}gux-option-multi.gux-active.gux-selected .gux-option::before,gux-option-multi.gux-hovered:not([disabled]).gux-selected .gux-option::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active:not(.gux-selected) .gux-option::before,gux-option-multi.gux-hovered:not([disabled]):not(.gux-selected) .gux-option::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='none' /%3E%3C/svg%3E\")}gux-option-multi.gux-filtered{display:none}gux-option-multi .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
+const guxOptionMultiCss = "gux-option-multi{box-sizing:border-box;display:flex;min-height:32px;padding:6px 12px;color:#2e394c;word-wrap:break-word;cursor:pointer}gux-option-multi .gux-checkbox-container::before{position:relative;top:2px;display:inline-block;width:13px;height:13px;margin-right:7px;content:'';background-color:white;background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='%23596373' /%3E%3C/svg%3E\");border-radius:30%}gux-option-multi.gux-disabled{pointer-events:none;cursor:default;opacity:0.5}gux-option-multi.gux-selected .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M4 1H11C11.7956 1 12.5587 1.31607 13.1213 1.87868C13.6839 2.44129 14 3.20435 14 4V11C14 11.7956 13.6839 12.5587 13.1213 13.1213C12.5587 13.6839 11.7956 14 11 14H4C3.20435 14 2.44129 13.6839 1.87868 13.1213C1.31607 12.5587 1 11.7956 1 11V4C1 3.20435 1.31607 2.44129 1.87868 1.87868C2.44129 1.31607 3.20435 1 4 1ZM5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active,gux-option-multi.gux-hovered:not([disabled]){color:#fdfdfd;background:#2a60c8}gux-option-multi.gux-active.gux-selected .gux-checkbox-container::before,gux-option-multi.gux-hovered:not([disabled]).gux-selected .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M5.57018 10.4198C5.7051 10.5547 5.87599 10.6177 6.04689 10.6177C6.22678 10.6177 6.39767 10.5457 6.52359 10.4198L11.7944 5.14905C12.0552 4.88821 12.0552 4.45647 11.7944 4.19563C11.5335 3.93479 11.1018 3.93479 10.841 4.19563L6.04689 8.9897L4.14905 7.08286C3.88821 6.82202 3.45647 6.82202 3.19563 7.08286C2.93479 7.3437 2.93479 7.77544 3.19563 8.03628L5.57018 10.4198Z' fill='%232a60c8' /%3E%3C/svg%3E\")}gux-option-multi.gux-active:not(.gux-selected) .gux-checkbox-container::before,gux-option-multi.gux-hovered:not([disabled]):not(.gux-selected) .gux-checkbox-container::before{background-image:url(\"data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='1 1 13 13'%3E%3Cpath d='M11 2.5H4C3.17157 2.5 2.5 3.17157 2.5 4V11C2.5 11.8284 3.17157 12.5 4 12.5H11C11.8284 12.5 12.5 11.8284 12.5 11V4C12.5 3.17157 11.8284 2.5 11 2.5ZM4 1C2.34315 1 1 2.34315 1 4V11C1 12.6569 2.34315 14 4 14H11C12.6569 14 14 12.6569 14 11V4C14 2.34315 12.6569 1 11 1H4Z' fill='none' /%3E%3C/svg%3E\")}gux-option-multi.gux-filtered{display:none}gux-option-multi .gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}";
 
 const GuxOptionMulti = class {
   constructor(hostRef) {
@@ -34,6 +34,15 @@ const GuxOptionMulti = class {
       this.guxremovecustomoption.emit();
     }
   }
+  handleActive(active) {
+    var _a, _b;
+    if (active) {
+      void ((_a = this.truncateElement) === null || _a === void 0 ? void 0 : _a.setShowTooltip());
+    }
+    else {
+      void ((_b = this.truncateElement) === null || _b === void 0 ? void 0 : _b.setHideTooltip());
+    }
+  }
   async componentWillLoad() {
     this.i18n = await buildI18nForComponent(this.root, translationResources);
     this.root.id = this.root.id || randomHTMLId('gux-option-multi');
@@ -53,11 +62,12 @@ const GuxOptionMulti = class {
         'gux-filtered': this.filtered,
         'gux-hovered': this.hovered,
         'gux-selected': this.selected
-      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, h("div", { "gux-slot-container": true, class: "gux-option" }, h("slot", null)), this.renderCustomOptionInstructions()));
+      }, "aria-selected": this.selected.toString(), "aria-disabled": this.disabled.toString() }, h("span", { class: "gux-checkbox-container" }), h("gux-truncate-beta", { "gux-slot-container": true, ref: el => (this.truncateElement = el) }, h("slot", null)), this.renderCustomOptionInstructions()));
   }
   get root() { return getElement(this); }
   static get watchers() { return {
-    "selected": ["emitRemoveCustomOption"]
+    "selected": ["emitRemoveCustomOption"],
+    "active": ["handleActive"]
   }; }
 };
 GuxOptionMulti.style = guxOptionMultiCss;

package/dist/esm/gux-page-loading-spinner.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxPageLoadingSpinnerCss = ":host{display:flex}.gux-spinner{margin:auto}";
 

package/dist/esm/gux-pagination-beta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, d as readTask, h, g as getElement } from './index-816e34d8.js';
 import { a as afterNextRenderTimeout } from './after-next-render-ed0f7dcd.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxPaginationBetaCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:40px;margin:12px 12px 0 12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:0 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-spacer{flex:1 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 

package/dist/esm/gux-pagination-cursor.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { b as buildI18nForComponent } from './index-fbebbbd0.js';
 import './get-closest-element-1597503c.js';
 

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxPaginationCss = ":host{display:block;border-top:1px solid #e2e6ee}.gux-pagination-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;justify-content:space-between;height:32px;margin-top:12px}.gux-pagination-container .gux-pagination-info{display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;align-self:auto;justify-content:flex-start;order:0}.gux-pagination-container .gux-pagination-info>*{flex:0 1 auto;align-self:auto;order:0}.gux-pagination-container .gux-pagination-change{flex:1 1 auto;align-self:auto;order:0;margin-left:16px}.gux-pagination-container .gux-pagination-change:first-child{margin-left:0}";
 

package/dist/esm/gux-panel-frame-legacy.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index-816e34d8.js';
 import { h as hasSlot } from './has-slot-062ae63a.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxPanelFrameCss = ".gux-panel-container{box-sizing:border-box;display:flex;flex-direction:column;height:100%;padding:8px 15px;color:#2e394c;background-color:#fdfdfd;border:1px solid #e2e6ee}.gux-panel-container .gux-panel-header,.gux-panel-container .gux-panel-body,.gux-panel-container .gux-panel-footer{box-sizing:border-box;width:100%}.gux-panel-container .gux-panel-header{flex-shrink:0;padding:0 8px;border-bottom:1px solid #e2e6ee}.gux-panel-container .gux-panel-body{flex-grow:1;padding:8px;overflow-y:auto}.gux-panel-container .gux-panel-footer{flex-shrink:0;padding:12px 8px;border-top:1px solid #e2e6ee}";
 

package/dist/esm/gux-phone-input-beta.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, g as getElement } from './index-816e34d8.js';
 import { g as getDefaultExportFromCjs, c as createCommonjsModule, a as commonjsGlobal, b as commonjsRequire } from './_commonjsHelpers-5ec8f9b7.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { b as buildI18nForComponent, g as getDesiredLocale } from './index-fbebbbd0.js';
 import { O as OnClickOutside } from './on-click-outside-8fa334c9.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-d16c3f4c.js';

package/dist/esm/gux-popover-beta.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.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-2389d4f3.js';
 import { O as OnClickOutside } from './on-click-outside-8fa334c9.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { g as getSlot } from './get-slot-52d073f3.js';
 import { f as findElementById } from './find-element-by-id-4d8e4156.js';
 

package/dist/esm/gux-popover-list-beta.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.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-2389d4f3.js';
 import { O as OnClickOutside } from './on-click-outside-8fa334c9.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 
 const guxPopoverListBetaCss = ".gux-popover-wrapper{position:absolute;top:0;left:0;z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0;color:#2e394c;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper.gux-hidden{display:none}.gux-popover-wrapper .gux-arrow{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper[data-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-placement='bottom-end'] .gux-arrow{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-placement='top'] .gux-arrow,.gux-popover-wrapper[data-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-placement='top-end'] .gux-arrow{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-placement='left'] .gux-arrow,.gux-popover-wrapper[data-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-placement='left-end'] .gux-arrow{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-placement='right'] .gux-arrow,.gux-popover-wrapper[data-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-placement='right-end'] .gux-arrow{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";
 

package/dist/esm/gux-popover-list.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.js';
 import { O as OnClickOutside } from './on-click-outside-8fa334c9.js';
 import { b as onHiddenChange } from './on-attribute-change-5fd8da7c.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { c as createPopper } from './popper-d15dbc3d.js';
 
 const guxPopoverListCss = ":host{color:#2e394c}.gux-popover-wrapper{z-index:var(--gux-zindex-popover, 2);display:inline-block;padding:8px 0;background-color:#fdfdfd;border:1px solid #b4bccb;border-radius:4px;box-shadow:0 2px 4px rgba(32, 41, 55, 0.24)}.gux-popover-wrapper .gux-arrow,.gux-popover-wrapper .gux-arrow::before{position:absolute;width:10px;height:10px;background:inherit}.gux-popover-wrapper .gux-arrow{visibility:hidden}.gux-popover-wrapper .gux-arrow::before{visibility:visible;content:'';transform:rotate(45deg)}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow{top:-5px}.gux-popover-wrapper[data-popper-placement='bottom'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='bottom-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-left:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow{bottom:-5px}.gux-popover-wrapper[data-popper-placement='top'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='top-end'] .gux-arrow::before{border-right:1px solid #b4bccb;border-bottom:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow{right:-5px}.gux-popover-wrapper[data-popper-placement='left'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='left-end'] .gux-arrow::before{border-top:1px solid #b4bccb;border-right:1px solid #b4bccb}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow{left:-5px}.gux-popover-wrapper[data-popper-placement='right'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-start'] .gux-arrow::before,.gux-popover-wrapper[data-popper-placement='right-end'] .gux-arrow::before{border-bottom:1px solid #b4bccb;border-left:1px solid #b4bccb}";

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index-816e34d8.js';
 import { O as OnClickOutside } from './on-click-outside-8fa334c9.js';
 import { b as onHiddenChange } from './on-attribute-change-5fd8da7c.js';
-import { t as trackComponent } from './usage-dc198015.js';
+import { t as trackComponent } from './usage-3030e9c4.js';
 import { g as getSlot } from './get-slot-52d073f3.js';
 import { c as createPopper } from './popper-d15dbc3d.js';