genesys-spark-components 4.160.0 → 4.161.0

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-bhm3ZgMN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var getValidTimezone = require('./get-valid-timezone-D_x3gLaW.js');
 var intl = require('./intl-CN825h6c.js');
 var useRegionalDates = require('./use-regional-dates-qjhuD9Ak.js');

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

@@ -6,7 +6,7 @@ var randomHtmlId = require('./random-html-id-DH9-ntZu.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
 var isoDates = require('./iso-dates-B-hZmvim.js');
 var onClickOutside = require('./on-click-outside-B3wBBwlG.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 var intl = require('./intl-CN825h6c.js');
 var useRegionalDates = require('./use-regional-dates-qjhuD9Ak.js');
@@ -676,7 +676,7 @@ const GuxDatepicker = class {
             } }, index.h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), index.h("div", { class: "gux-datepicker-field-input" }, index.h("div", { class: "gux-datepicker-field-text-input" }, index.h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (index.h("div", { key: '8bf19a961f4cd2d4b66e75d6088b93ea72a13879', class: {
+        return (index.h("div", { key: '31bcd6b65eac76aad4d68723e2308cbf6f55d8bc', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

package/dist/cjs/gux-disclosure-button-legacy.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-bhm3ZgMN.js');
 var randomHtmlId = require('./random-html-id-DH9-ntZu.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 require('./get-closest-element-CfyZl7i7.js');
 
@@ -55,10 +55,10 @@ const GuxDisclosureButtonLegacy = class {
         this.updateIcon();
     }
     render() {
-        return (index.h("div", { key: 'c96d5f177492ff489747baca32b70f93adaf1bf5', class: `gux-disclosure-button-container gux-${this.position}` }, index.h("button", { key: 'f71f8d93c8146fa3367acdab0c4c116197abbba7', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, index.h("gux-icon", { key: '7bbf022e573cd8f16fde788be416c6b93b76f203', "icon-name": `${this.icon}`, decorative: true })), index.h("div", { key: '53f88d45530817e81c91f130f083307e4b166bbe', id: this.panelId, class: {
+        return (index.h("div", { key: '4f95ace29e11d22b3f56df612f39c28da0fe6289', class: `gux-disclosure-button-container gux-${this.position}` }, index.h("button", { key: 'c632fe72b7ef8e2055b093ea95853d67b4459c08', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, index.h("gux-icon", { key: '3ad7df364e129138cbfa8debe9000c505f450318', "icon-name": `${this.icon}`, decorative: true })), index.h("div", { key: '69f77ab04cbeb96272f10d2868e850de096e81dc', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, index.h("slot", { key: '3e234ddc4164e3da3aaf9d430d57f016d031068d', name: "panel-content" }))));
+            }, role: "region" }, index.h("slot", { key: '60dd373d4ff9ed7c9f67f0d5103be0954a48173c', name: "panel-content" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-dismiss-button.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-bhm3ZgMN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 require('./get-closest-element-CfyZl7i7.js');
 
@@ -23,10 +23,10 @@ const GuxDismissButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("gux-button-slot", { key: '699c5876801bf26edbae2803ca5f7ba7d047b27e', accent: "ghost", class: {
+        return (index.h("gux-button-slot", { key: 'a42976c1081623a502264f40087c0832e86cd37c', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, index.h("button", { key: 'de66227205545b4dbf92210167fa4d5ca1ca4a48', type: "button", title: this.i18n('dismiss') }, index.h("div", { key: 'f9284ac02c27e32ea3646718efcad36954099ce6', class: "gux-icon-container" }, index.h("gux-icon", { key: 'fc37236b5f832358416119d97e8aa6cc3612a825', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
+            } }, index.h("button", { key: 'de941be5548f25d721caaf43613cd0503932ac4d', type: "button", title: this.i18n('dismiss') }, index.h("div", { key: '7f55c0a2220d228e01246b1eeca8c56b30561ac8', class: "gux-icon-container" }, index.h("gux-icon", { key: '65da72a2702d705a233e9a0e47b6ed1ac01430e2', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -45,7 +45,7 @@ const GuxDropdownMultiTag = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("div", { key: '736f46e03112b67563ab34cff27d60a81b74d06f', class: {
+        return (index.h("div", { key: '974b5a86160b5aacae364e031e274067a8c49aaf', class: {
                 'gux-tag': true,
                 'gux-disabled': this.disabled
             }, "aria-disabled": this.disabled.toString() }, this.numberSelected.toString(), this.renderRemoveButton()));

package/dist/cjs/gux-dropdown-multi.cjs.entry.js

@@ -6,7 +6,7 @@ var index$1 = require('./index-Cu12q3Jc.js');
 var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
 var onInputDisabledStateChange = require('./on-input-disabled-state-change-CSLxaSas.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var guxListbox_service = require('./gux-listbox.service-Dvz43AV2.js');
 var onMutation = require('./on-mutation-NV8nVGXy.js');
 require('./get-closest-element-CfyZl7i7.js');
@@ -427,7 +427,7 @@ const GuxDropdownMulti = class {
     }
     render() {
         return [
-            index.h("div", { key: '21470eb5abc8ce97d749c5b4199c97c3209b63d4', class: "gux-dropdown-container" }, index.h("gux-popup", { key: 'a46922d1410cd946f8a8c4d873dfb26fe61de9c3', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            index.h("div", { key: 'c20af3c7255018600ecae391f368f5393524abbd', class: "gux-dropdown-container" }, index.h("gux-popup", { key: 'a8fe4f4356451bcdfe2256336ee2753c5365a34a', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get delegatesFocus() { return true; }

package/dist/cjs/gux-dropdown-option.cjs.entry.js

@@ -59,7 +59,7 @@ const GuxDropdownOption = class {
         };
     }
     __stencil_render() {
-        return (index.h("div", { key: '5e04a1dcfcfc30f675e15113f6d6bb61c1d90b51', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (index.h("div", { key: 'b09f99af11571bae1ec9b601aba9dbfb208ff1a8', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {

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

@@ -6,7 +6,7 @@ var index$1 = require('./index-Cu12q3Jc.js');
 var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
 var onInputDisabledStateChange = require('./on-input-disabled-state-change-CSLxaSas.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var onMutation = require('./on-mutation-NV8nVGXy.js');
 var guxListbox_service = require('./gux-listbox.service-Dvz43AV2.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
@@ -23,7 +23,7 @@ var translationResources$1 = {
 	dropdown: dropdown
 };
 
-const guxDropdownCss = ":host{box-sizing:border-box;color:var(--gse-ui-formControl-input-populatedColor)}.gux-field,.gux-target-container-expanded{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch center;align-items:center;inline-size:100%;block-size:var(--gse-ui-formControl-input-textfield-height);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);cursor:pointer;background-color:var(--gse-ui-formControl-input-backgroundColor)}.gux-target-container-expanded,.gux-target-container-collapsed .gux-field{padding:var(--gse-ui-formControl-input-padding)}.gux-error.gux-target-container-collapsed .gux-field-button,.gux-error.gux-target-container-expanded{border:var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color)}.gux-disabled.gux-target-container-collapsed .gux-field-button,.gux-disabled.gux-target-container-expanded{user-select:none;border:var(--gse-ui-formControl-input-disabled-border-width) var(--gse-ui-formControl-input-disabled-border-style) var(--gse-ui-formControl-input-disabled-border-color)}.gux-target-container-collapsed .gux-field-button:hover,.gux-target-container-expanded:hover{border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-field.gux-input-field{block-size:var(--gse-ui-formControl-input-contentText-lineHeight)}.gux-field .gux-field-content{--gux-zindex-tooltip:3;display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;min-inline-size:0;block-size:var(--gse-ui-formControl-input-contentText-lineHeight)}.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;block-size:100%}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;inline-size:100%;color:transparent;caret-color:var(--gse-ui-formControl-input-populatedColor)}.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:var(--gse-ui-formControl-input-populatedColor)}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:var(--gse-ui-formControl-input-suggestionColor)}.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:var(--gse-ui-formControl-input-placeholderColor)}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;padding-inline-start:var(--gse-ui-dropdown-gap);color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-target-container-expanded{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-target-container-expanded:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-expanded:focus-within:has(:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-expanded .gux-filter-input{background-color:inherit;border:none}.gux-target-container-expanded .gux-filter-input:focus{outline:none;border:none}.gux-target-container-expanded .gux-field-button{inline-size:auto;block-size:var(--gse-ui-formControl-input-contentText-lineHeight);margin:0;outline:none;background:inherit;border:none;box-shadow:none}.gux-target-container-expanded .gux-field-button:focus{outline:none}.gux-target-container-collapsed .gux-field-button{border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-target-container-collapsed .gux-field-button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-collapsed .gux-field-button:focus-within:has(:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}::slotted(gux-listbox){outline:none;box-shadow:var(--gse-ui-menu-boxShadow)}.gux-selected-icon{display:flex;flex-direction:row;align-items:center}.gux-selected-icon.gux-icon-position-end{flex-direction:row-reverse}.gux-selected-icon gux-icon{padding-inline-end:var(--gse-ui-dropdown-gap)}";
+const guxDropdownCss = ":host{box-sizing:border-box;color:var(--gse-ui-formControl-input-populatedColor)}.gux-field,.gux-target-container-filterable{all:unset;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;place-content:stretch center;align-items:center;inline-size:100%;block-size:var(--gse-ui-formControl-input-textfield-height);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);cursor:pointer;background-color:var(--gse-ui-formControl-input-backgroundColor)}.gux-target-container-filterable,.gux-target-container-not-filterable .gux-field{padding:var(--gse-ui-formControl-input-padding)}.gux-error.gux-target-container-not-filterable .gux-field-button,.gux-error.gux-target-container-filterable{border:var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color)}.gux-disabled.gux-target-container-not-filterable .gux-field-button,.gux-disabled.gux-target-container-filterable{user-select:none;border:var(--gse-ui-formControl-input-disabled-border-width) var(--gse-ui-formControl-input-disabled-border-style) var(--gse-ui-formControl-input-disabled-border-color)}.gux-target-container-not-filterable .gux-field-button:hover,.gux-target-container-filterable:hover{border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-field.gux-input-field{block-size:var(--gse-ui-formControl-input-contentText-lineHeight)}.gux-field .gux-field-content{--gux-zindex-tooltip:3;display:flex;flex:1 1 0;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;min-inline-size:0;block-size:var(--gse-ui-formControl-input-contentText-lineHeight)}.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;block-size:100%}.gux-field .gux-field-content .gux-filter .gux-filter-input{all:unset;inline-size:100%;color:transparent;caret-color:var(--gse-ui-formControl-input-populatedColor)}.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:var(--gse-ui-formControl-input-populatedColor)}.gux-field .gux-field-content .gux-filter .gux-filter-display .gux-filter-suggestion{color:var(--gse-ui-formControl-input-suggestionColor)}.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:var(--gse-ui-formControl-input-placeholderColor)}.gux-field .gux-expand-icon{flex:0 0 auto;align-self:auto;order:0;padding-inline-start:var(--gse-ui-dropdown-gap);color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-target-container-filterable{border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-target-container-filterable.gux-target-container-filterable-active{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-target-container-filterable:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-filterable:focus-within:has(:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-filterable .gux-filter-input{background-color:inherit;border:none}.gux-target-container-filterable .gux-filter-input:focus{outline:none;border:none}.gux-target-container-filterable .gux-filter-input::selection{color:inherit;background:transparent;}.gux-target-container-filterable .gux-field-button{inline-size:auto;block-size:var(--gse-ui-formControl-input-contentText-lineHeight);margin:0;outline:none;background:inherit;border:none;box-shadow:none}.gux-target-container-filterable .gux-field-button:focus{outline:none}.gux-target-container-not-filterable .gux-field-button{border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-target-container-not-filterable .gux-field-button:focus-visible{outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-target-container-not-filterable .gux-field-button:focus-within:has(:focus-visible){outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusOutline-offset)}::slotted(gux-listbox){outline:none;box-shadow:var(--gse-ui-menu-boxShadow)}.gux-selected-icon{display:flex;flex-direction:row;align-items:center}.gux-selected-icon.gux-icon-position-end{flex-direction:row-reverse}.gux-selected-icon gux-icon{padding-inline-end:var(--gse-ui-dropdown-gap)}";
 
 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;
@@ -58,6 +58,7 @@ const GuxDropdown = class {
     watchExpanded(expanded) {
         if (!expanded) {
             this.filter = '';
+            this.filterElement.value = '';
         }
     }
     watchValue(newValue) {
@@ -124,6 +125,10 @@ const GuxDropdown = class {
     }
     onFocusin(event) {
         this.stopPropagationOfInternalFocusEvents(event);
+        if (this.isFilterable() &&
+            !this.root.contains(event === null || event === void 0 ? void 0 : event.relatedTarget)) {
+            this.filterElement.focus();
+        }
     }
     onClickOutside() {
         this.collapseListbox('noFocusChange');
@@ -346,8 +351,8 @@ const GuxDropdown = class {
             } }, index.h("gux-icon", { "icon-name": iconOption.iconName, style: iconStyle, decorative: true, size: "small" }), index.h("gux-truncate", { ref: el => (this.truncateElement = el) }, optionText)));
     }
     renderFilterInputField() {
-        if (this.expanded && this.isFilterable()) {
-            return (index.h("div", { class: "gux-field gux-input-field", dir: "auto" }, index.h("div", { class: "gux-field-content" }, index.h("div", { class: "gux-filter" }, index.h("div", { class: "gux-filter-display" }, index.h("span", { class: "gux-filter-text" }, this.filter), index.h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.filter))), index.h("div", { class: "input-and-dropdown-button" }, index.h("input", { onClick: this.fieldButtonClick.bind(this), class: "gux-filter-input", type: "text", "aria-label": this.i18n('filterResults'), ref: el => (this.filterElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), disabled: this.disabled }))))));
+        if (this.isFilterable()) {
+            return (index.h("div", { class: "gux-field gux-input-field", dir: "auto" }, index.h("div", { class: "gux-field-content" }, index.h("div", { class: "gux-filter" }, index.h("div", { class: "gux-filter-display" }, index.h("span", { class: "gux-filter-text" }, this.filter), index.h("span", { class: "gux-filter-suggestion" }, this.getTypeaheadText(this.filter))), index.h("div", { class: "input-and-dropdown-button" }, index.h("input", { class: "gux-filter-input", type: "text", "aria-label": this.i18n('filterResults'), ref: el => (this.filterElement = el), onInput: this.filterInput.bind(this), onKeyDown: this.filterKeydown.bind(this), onKeyUp: this.filterKeyup.bind(this), onFocus: () => (this.expanded = true), disabled: this.disabled }), this.renderTargetContent())))));
         }
     }
     renderPopup() {
@@ -355,11 +360,12 @@ const GuxDropdown = class {
     }
     renderTarget() {
         return (index.h("div", { class: {
-                'gux-target-container-expanded': this.expanded && this.isFilterable(),
-                'gux-target-container-collapsed': !(this.expanded && this.isFilterable()),
+                'gux-target-container-filterable': this.isFilterable(),
+                'gux-target-container-filterable-active': this.expanded && this.isFilterable(),
+                'gux-target-container-not-filterable': !this.isFilterable(),
                 'gux-error': this.hasError,
                 'gux-disabled': this.disabled
-            }, slot: "target" }, this.renderFilterInputField(), index.h("button", { type: "button", class: "gux-field gux-field-button", disabled: onInputDisabledStateChange.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(), index.h("gux-icon", { class: {
+            }, slot: "target" }, this.renderFilterInputField(), index.h("button", { type: "button", class: "gux-field gux-field-button", disabled: onInputDisabledStateChange.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.isFilterable() && this.renderTargetContent(), this.renderRadialLoading(), index.h("gux-icon", { class: {
                 'gux-expand-icon': true
             }, "screenreader-text": this.i18n('dropdown'), size: "small", iconName: this.expanded
                 ? 'custom/chevron-up-small-regular'
@@ -376,7 +382,7 @@ const GuxDropdown = class {
         }
     }
     render() {
-        return (index.h("gux-popup", { key: '1489eb86035a07be578c9add3edf616e95061f16', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (index.h("gux-popup", { key: '49c7e8f06f4de5511cf7d70953d281fb2b7326de', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }
@@ -600,13 +606,13 @@ const GuxOption = class {
         return parentListbox === null || parentListbox === void 0 ? void 0 : parentListbox.disabled;
     }
     render() {
-        return (index.h(index.Host, { key: 'c2672c6cb5bf516a3495eea8357d3bc4c4c900da', role: "option", class: {
+        return (index.h(index.Host, { key: 'bdd62143a1608793696ce79b8c7706fd25adda6c', role: "option", class: {
                 'gux-active': this.active,
                 'gux-disabled': this.disabled || this.hasDisabledParent(),
                 'gux-filtered': this.filtered,
                 'gux-selected': this.selected,
                 'gux-show-subtext': this.hasSubtext
-            }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, index.h("div", { key: 'b85bf4d463039f58f49ec2d6d18d2d1415403f32', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '18608184d2d7a77a8fd0018745f9a1b6a8a5fa80', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, index.h("slot", { key: '1b42a67570ad5b853612cbfce4481be09442aebd' })), index.h("slot", { key: '279602519fa45e83691133da63ef404ff014c43e', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
+            }, "aria-selected": this.getAriaSelected(), "aria-disabled": this.disabled.toString() }, index.h("div", { key: 'dcdd4752efff5e7028286bceaf5ec794495bb6d0', class: "gux-option-wrapper" }, index.h("gux-truncate", { key: '386152d4643e7f7c25aa54d74d9a2878d058069a', "tooltip-placement": "right", ref: el => (this.truncateElement = el) }, index.h("slot", { key: '553d5cc29d887e8ae220f877749b4c998c6af63a' })), index.h("slot", { key: 'a6c6bc79dfa32e6b782d35c48490a74e0d40b666', onSlotchange: () => this.onSubtextChange(), name: "subtext" }))));
     }
     get root() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gux-file-list-item.cjs.entry.js

@@ -2,7 +2,7 @@
 
 var index = require('./index-bhm3ZgMN.js');
 var index$1 = require('./index-Cu12q3Jc.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 const removeFile = "Remove {filename} file";
@@ -29,11 +29,11 @@ const GuxFileListItem = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h("div", { key: 'f3728cb6a3f569b8e40e2306f6f352bbf3ba32d3', class: {
+        return (index.h("div", { key: 'd49c0767377da03e5365273f91a39bad62062500', class: {
                 'gux-file-list-item': true,
                 [`gux-${this.status}`]: true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: 'ab8b83c2c6e544d5061311b15661d823f2dc48da', class: "gux-info" }, index.h("gux-truncate", { key: '9d43e488a09c57d3b7c6623609b58571d032e79a' }, index.h("span", { key: '3026f444ac1c121e3a6cbdb5a084217de0eb9fab', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+            } }, index.h("div", { key: 'a33471c150928e030a4c05dff3d702588641a1e9', class: "gux-info" }, index.h("gux-truncate", { key: 'dc3765ded0e84e51262359a7d0bc64ca62dac65d' }, index.h("span", { key: '6aecdc1894a57119fbecdea686e2e2d5a0a5f6d5', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
     }
     renderStatusIndicator() {
         switch (this.status) {

package/dist/cjs/gux-flag-icon-beta.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-bhm3ZgMN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 require('./get-closest-element-CfyZl7i7.js');
 

package/dist/cjs/gux-flyout-menu.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-bhm3ZgMN.js');
 var floatingUi_dom = require('./floating-ui.dom-CFIqWljW.js');
 var afterNextRender = require('./after-next-render-CeY_1Kbz.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var guxMenu_common = require('./gux-menu.common-B8_9UAPe.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 require('./get-closest-element-CfyZl7i7.js');
@@ -190,10 +190,10 @@ const GuxFlyoutMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7ad3efd714c201938298cf87b5acc6e86a4618c0', tabIndex: 0, "aria-haspopup": "true" }, index.h("gux-announce-beta", { key: 'f2c96a97da0e807e8a0506b12b01e7d9dc4e03f1', ref: el => (this.announceElement = el) }), index.h("span", { key: '92702bfb121a185695edac754f6bc29371b7f635', ref: el => (this.targetElement = el) }, index.h("slot", { key: '6b6e3221ea75d5f498466c178e1229f1eb27e675', name: "target" })), index.h("div", { key: '701eb459b5a0f71395b55c5785f549bef720d23d', class: {
+        return (index.h(index.Host, { key: '6cf59014f90870cbe8d838110c2aa096543a114b', tabIndex: 0, "aria-haspopup": "true" }, index.h("gux-announce-beta", { key: '1695c676fccd04b1f329a03ebf07887236ef08f3', ref: el => (this.announceElement = el) }), index.h("span", { key: '0e5f007704cf3ceee5e6de231a417eed53c72d57', ref: el => (this.targetElement = el) }, index.h("slot", { key: '0dbf1fe885215ab2e70266ae2c09be958ae48657', name: "target" })), index.h("div", { key: '6e475181c87066e81feda5ce432c75bf700f17a6', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: 'acf809c3553c47e9c7807695dd4598251268ed7a', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: 'efea8e265eee0be91e5a95867b869fe0d7c92f6d', class: "gux-arrow-caret" })), index.h("slot", { key: '7ab7ae4ec3ade19ff50e2eec0d0fc1b20d3d7c93', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: '4026a9def2ebdfde26aa0e5300673e5a8c1b9c1c', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: '2cbd5a5d8ebc4726dacebf764a4a33465fa34b1e', class: "gux-arrow-caret" })), index.h("slot", { key: '46ac2c59463c9ee24f3c931ba4aeed791291bd98', name: "menu" }))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-form-field-checkbox-group-beta.cjs.entry.js

@@ -9,7 +9,7 @@ var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-Bf1LtFMR.js');
 var getSlotTextContent = require('./get-slot-text-content-DZwcXMIm.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 require('./get-closest-element-CfyZl7i7.js');
 
 function setAllCheckboxInputs(root, checked) {
@@ -194,8 +194,8 @@ const GuxFormFieldCheckboxGroupBeta = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'e510f0c0fcf9fd76c3c391bd66ec2fef75b7be9a', labelPosition: "above" }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'bc4bb057d2d535f204cefe85ad27d9b6217dec46' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '5e5164adc2563d6d3bab22188a5d75440c572e27', position: "above", required: this.required }, index.h("slot", { key: '0906ef1243947d52d9c3d2618c0c88a62b94b945', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '19e888030a5c2078c38dab9b5685e6c8e4dcb4f9', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '5dd452934445d8269cd667ae910f1533aee27f75', name: "group-label-info" })), index.h("slot", { key: '4155cf7d2f092ffe73188f573c04b62a50aacdc2', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), index.h("slot", { key: '34ef875c9dc46ff37eb3574ef94b065e44199c21', onSlotchange: () => this.updateMainCheckbox() }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e367804623750343279f24afbb6030c7405f0360', show: this.hasGroupError }, index.h("slot", { key: 'e140d2c5cf27f58464cabc70f7f49023061696ec', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '6828d92569eee8d5fdadbe1fbcd93910091ae9b0', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '2b5e8829043e90f7f55c13ec14842436ce6dfa29', name: "group-help" }))));
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '1bd55cd30c1d66f866ff614711307af7b2753049', labelPosition: "above" }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '53c77e1bab69f3b770f6a7b0a8b12aa0dcf29a74' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '3232b20676b1951a6f8b47d6bb557d3debae43e5', position: "above", required: this.required }, index.h("slot", { key: '6a87a0c77c616b89be18115ec37ca270fa26cc12', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'fdf1091895b1a02a6575e563e0778798d6a15fb2', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '40e09a0c533ff7b39d5d31e7c0f6b515783589d8', name: "group-label-info" })), index.h("slot", { key: '4e9debc65762b8e86889c08c8a897caa49160198', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), index.h("slot", { key: 'f0efc758f04c597f1d45902794423bfc35326595', onSlotchange: () => this.updateMainCheckbox() }), index.h(guxFormFieldError.GuxFormFieldError, { key: '942ca8456bed376cb8ea987d422acdda34fa5167', show: this.hasGroupError }, index.h("slot", { key: '126c1015d36a535c8e88eb729840831c3738f5e9', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4764c245a4f74de1e23b811605a16f8a56c344d3', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: 'f48dd8183237c169b655fca54749a89424d30dca', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -6,7 +6,7 @@ var onMutation = require('./on-mutation-NV8nVGXy.js');
 var preventBrowserValidationStyling = require('./prevent-browser-validation-styling-Dcbciyyc.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var guxFormField_service = require('./gux-form-field.service-MaWFZxSN.js');
 require('./random-html-id-DH9-ntZu.js');
 require('./log-error-nWO_o1C3.js');
@@ -49,10 +49,10 @@ const GuxFormFieldCheckbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '9b37ae14b5aa5d2904c22ffcf8393a2d845dc4d4', class: {
+        return (index.h(index.Host, { key: '8581778dc168bd68805734f4f1a1d96935327f4b', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '88dcd1250fae77eb5dce53948b529bdbf7d2a305', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'f1286e98b0c3e00b42c97f171f9e0050d5b13ee4', class: "gux-input-label" }, index.h("div", { key: '1884ee7889b14035720aee337ddf9de0d9d1d1b4', class: "gux-input" }, index.h("slot", { key: 'cc7e9eb9a01cb65e48b93d1acd53f0aeba2b3d4d', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '8427792713aa87fd81f71ec3d206cb1723083f77', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '378f25400af0eb3243918c677435746e41035576', name: "label" }))), index.h("div", { key: '5af392b1b7a9f2340deda557b9b4c8cb44c80623', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '2f04e17d935c9368401fc6bb6521a070b646910b', show: this.hasError }, index.h("slot", { key: 'cc324117414007141e0205fad334897811c5f80b', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4f918830189307a41cbfa00893015102ca5136f4', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '1b464e2b2ea883e46cf2ff7b4d12baef04f2d444', name: "help" }))))));
+            } }, index.h("div", { key: '4c63f70ff1db923a238e21f456bab8f29a72781b', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '38e009c001bf831543477875ba840e8862c44f48', class: "gux-input-label" }, index.h("div", { key: 'f7f71142b086d18d54cac7bb6e4362b6d9ca2401', class: "gux-input" }, index.h("slot", { key: '2e318e7cc9c99514508dae735501a5c3c541f5d9', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '6c65b22cb643656764009eb9dc70e9aefca1e208', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: 'c5cd085547086688333042b5876f1a9401c012b9', name: "label" }))), index.h("div", { key: 'ad15e5dce7b496eff018ed618c317aad85b1b6c0', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '7906a5bd3d48c8b48beedc24a1116564357cc847', show: this.hasError }, index.h("slot", { key: 'd7b98fe8e361f77bdaee472f8de50a252103bf41', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '810453eeb0afef16b13d7af52232560678980523', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '71d2c1db3e2b9c964b125bdb93992a485d86960c', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

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

@@ -9,7 +9,7 @@ var hasSlot = require('./has-slot-BFTyqu_U.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldContainer = require('./gux-form-field-container-BoogsqbY.js');
 var guxFormField_service = require('./gux-form-field.service-MaWFZxSN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 require('./random-html-id-DH9-ntZu.js');
 require('./log-error-nWO_o1C3.js');
 require('./simulate-native-event-_MPnVmRN.js');
@@ -87,13 +87,13 @@ const GuxFormFieldColor = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '9bb0ee43e91d6bc55f14c79bf205615caef36b6f', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '94e0d29db2d749880f35701ce99aa22015d23325', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '97a0e24aea02d952179317e1453cea220738733e', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '9efa9064b0e6270f48f756de90d71e5081b6eb3a', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'ea8cce3efc4e54fbb18ca9b498f684457f16166d', name: "label-info" })), index.h("div", { key: '85730bcafa56972ec24edfff30b7cba3e22e4f7d', class: "gux-input-and-error-container" }, index.h("div", { key: 'b64c5aaea6f3f16dc9dd05aaca7e4ba4e558a55e', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '545246d9da1c49969b9a9d27cde862b01bdb188f', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '928e5e60935b41818ff2b60542c838120c4516b4', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'b2bbf26060dca87fd94e57e86e81aae1c4a3fac9', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '17bc94c09d012c9f2a8bb9463b8b83a29b4b3a1e', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '1fdf0abf89df7cb6cac5ad6b0b4984e3d03413c6', name: "label-info" })), index.h("div", { key: 'daa1acf1cfae60f89fcd62449b9c940c36dca4cf', class: "gux-input-and-error-container" }, index.h("div", { key: '2646e6dbf2548d6a34c7ce33edf8585de8315db8', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '41c6dcd864d396fd51ef29c381ffe6d157a950c8', class: {
+            } }, index.h("div", { key: 'fee91e931225b2a0376b0bd1c368bd18979449e8', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '0b967d0efd9eca208a40369679725389f4feccb9', name: "input", onSlotchange: () => this.setInput() }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '03c36ee06dc975ee41dbe176e4c225cf520d3145', show: this.hasError }, index.h("slot", { key: '5f39c0b374eab15bdc51bcc8d4b66d8099a1bae2', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '308153f1fa7f016ea9e724626e335a48171b8722', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '13d012116faf9688ba1d98b080c545c286d3cb6c', name: "help" })))));
+            } }, index.h("slot", { key: 'e4bc50afcc9a4d5dc84fe73d36adfe32f318628d', name: "input", onSlotchange: () => this.setInput() }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'ba46aae96078cbd4cb8e2c4a7e8f0ecf88ffe96b', show: this.hasError }, index.h("slot", { key: '0b86d27ae8c5748a5f3c47911047baae5fdd379a', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4bec11ed658bb83deb9e396338cff69af2c2fdc1', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'abdd45619889cdddade102f5589ad0f0168db166', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -9,7 +9,7 @@ var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-Bf1LtFMR.js');
 var getSlotTextContent = require('./get-slot-text-content-DZwcXMIm.js');
 var guxFormField_service = require('./gux-form-field.service-MaWFZxSN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 require('./get-closest-element-CfyZl7i7.js');
 require('./random-html-id-DH9-ntZu.js');
 require('./log-error-nWO_o1C3.js');
@@ -107,11 +107,11 @@ const GuxFormFieldDropdown = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '9020a7db668f3cb5c6ef3db9a230e008ace4bed1', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '52a423218fba63fa959e8563b323e23316da0ea2' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '61d0d48c3ed153d93c4973615b1285dabc474847', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'cf6a6a962503f69bc33bb8fe4dbe633561e29985', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '9d529f92d0fc5977033217a41faf43dcb57bdaf4', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '5a93d1502c8337f4037c65fa06870c1244f574ec', name: "label-info" })), index.h("div", { key: '19ee8d6085059cc637cb46ffee99279c2481ddb8', class: "gux-input-and-error-container" }, index.h("div", { key: '179346ac87f748081e7a591612f5a69de233e9f1', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '596bb0a9daaafca0972f9a6b85b20f8b934dfe09', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '31ff833828ec9d6ada68a1ed2212762cab337c9f' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '1876dbd7c222526cbd793382c33a4a5cf6313f22', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '57176f9da8cc8e51c9eb8e0e73c8d6b25bd36513', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2eda5ae93db8bac0f6760fab263b3d3204bc918b', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'f151bbc8a07a7cb3ae1e034c440279f927a5538c', name: "label-info" })), index.h("div", { key: '341a3ee72c67e6fb6039152bbe4641175c51d0d5', class: "gux-input-and-error-container" }, index.h("div", { key: 'd49d5d689935c59450b9c45108d476087f1ec769', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("slot", { key: '7a91ec18082348fc7334733f22a36738d74b6d0b' })), index.h(guxFormFieldError.GuxFormFieldError, { key: 'bb4687aed62b3ba2246967125884897861afdc03', show: this.hasError }, index.h("slot", { key: '1a7d9292bb9afdfef87cadfd73c042f4ca223ecf', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '600311438afad613d07e99aced9b948809b430ae', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '7590cb2f825a03586d6b4375479cd7c25abbf620', name: "help" })))));
+            } }, index.h("slot", { key: '7e17c222eeb244ae7c250f47dc58a5bc4ae4ffbb' })), index.h(guxFormFieldError.GuxFormFieldError, { key: 'dc95fd03d59f87d4664c2eb6f13c5936dd60b945', show: this.hasError }, index.h("slot", { key: '2dbc4edeb102145a556b910a05413d9b274e6f35', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '0e508b39d190fce5609540bb6eaefdaacc887f16', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '23c6cbd1bef40176dcf070eaea4ba55140094ae1', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/gux-form-field-file-beta.cjs.entry.js

@@ -4,7 +4,7 @@ var index = require('./index-bhm3ZgMN.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 var onMutation = require('./on-mutation-NV8nVGXy.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldContainer = require('./gux-form-field-container-BoogsqbY.js');
 var guxFormField_service = require('./gux-form-field.service-MaWFZxSN.js');
@@ -110,7 +110,7 @@ const GuxFormFieldFileBeta = class {
         (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '8451c2a30bb00d14fad89e1fbb993a1c5058ad5a', labelPosition: "above" }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '3dcf64d426c989bb005eddb277411e8bea6b1852', position: "above", required: this.required }, index.h("slot", { key: '3ea96a58a420162f051ffaeb07cc0e3697cf695a', name: "label" }), index.h("gux-form-field-label-indicator", { key: '924a17317d4b72fc4c69e5cfb38cf384db936b79', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'b381194dade9716256eb6fab4e52d6916a5c275b', name: "label-info" })), index.h("div", { key: '6226c9f869e8ecef880151f338bc97fcb55869a4', class: "gux-input-and-error-container" }, index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'ffac960d9eecf25043264127195d89d22d789c79', show: this.hasHelp }, index.h("slot", { key: 'a11355486ece569db8df0933ac7924792e891ef9', name: "help" })), this.renderInputSlot(), index.h(guxFormFieldError.GuxFormFieldError, { key: '276793d8e2fde30fddcd52ced436aeab2e056c17', show: this.hasError }, index.h("slot", { key: 'ea31b2604bfc7e070d857659b43badcc70fd3afc', name: "error" })), this.renderFileList())));
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'b9023b70ad5ff7522f61bb41925f5a5ae7b56890', labelPosition: "above" }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '351a0f61a4f37ae17336c2235e7ec5e78e8c2f1a', position: "above", required: this.required }, index.h("slot", { key: 'fabb6eca3ee70511de095f242aaeef09f3bcf189', name: "label" }), index.h("gux-form-field-label-indicator", { key: 'f9af4d8e81d64c5d1e7d05b4e5ac70519f6e766c', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '9fd5f19b6815f393c0b36efb6b1e6a61396c0b0c', name: "label-info" })), index.h("div", { key: 'a19837c2d873443682fa1908a246456471c4f787', class: "gux-input-and-error-container" }, index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'df5cdae8921bd3f0b47e79249e729d4c76b6600c', show: this.hasHelp }, index.h("slot", { key: '5ccc21f83e3a012eb863a00ec58e9462ad5ff02e', name: "help" })), this.renderInputSlot(), index.h(guxFormFieldError.GuxFormFieldError, { key: 'bc0c10fde130a357f9e8978ed8b5b5f17de3045b', show: this.hasError }, index.h("slot", { key: '26456e741cd563033b52ad5cc1f5abf24189d041', name: "error" })), this.renderFileList())));
     }
     setInput() {
         this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="file"][slot="input"]');

package/dist/cjs/gux-form-field-file.cjs.entry.js

@@ -3,7 +3,7 @@
 var index = require('./index-bhm3ZgMN.js');
 var onMutation = require('./on-mutation-NV8nVGXy.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldContainer = require('./gux-form-field-container-BoogsqbY.js');
 var guxFormField_service = require('./gux-form-field.service-MaWFZxSN.js');
@@ -105,7 +105,7 @@ const GuxFormFieldFile = class {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'c81fbfa48e90ff635a168d726efb0317912e8eec', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'df4978a1e3d8b36f15f6a38194513a4dc3608a38', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'bcb8e39bf89e2a56ae2863d9fdececb28450aa29', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '27fe84a8081016d09788b5f054fa37cda4f5673b', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'faffd8212a5705085e9c279cd8b5dc209bc95b67', name: "label-info" })), index.h("div", { key: '92e9275b73d2952e66e0409ebc9dbe933b591c1c', class: "gux-input-and-error-container" }, index.h("slot", { key: '976de47774150f01eab0302f77818917fcc8c5a6', name: "input", onSlotchange: () => this.setInput() }), index.h(guxFormFieldError.GuxFormFieldError, { key: '73113ae0f0e5447df7466f0cfb77ced4d9177078', show: this.hasError }, index.h("slot", { key: 'c55abb34569f8e1ac336698613f8846df65a35f7', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '89df5ee890bffc28be97e4181e5450bfdb97bd91', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '0f5a5a4124ae5bfbf8988ecd3710dd66428416cf', name: "help" })))));
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'afbe0d255c886bdb7ef76136ba1a0266ce02928f', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '4150a02f330208c2f79b0e7df5112614ba24b7d3', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '963c1669469579e49ce6702649d1c5469cef7322', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'b5d67f2ba79201a15c885d66ecdf6570b63be400', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'b3531081795eaf2f954dc0e42340986b4b00696a', name: "label-info" })), index.h("div", { key: '09ac2a78594f80c404297404e535bc10159290b4', class: "gux-input-and-error-container" }, index.h("slot", { key: 'feccb4c1f2526d8400f2253114573bd159dd3c14', name: "input", onSlotchange: () => this.setInput() }), index.h(guxFormFieldError.GuxFormFieldError, { key: '5f1191145e144f3ab6da99c66adf1eb578136214', show: this.hasError }, index.h("slot", { key: '28980350a36385b61fa21f79f71facc4fe953b71', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '50eac306bde1f09eed4197bcd8f0767f3aad1ef2', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '89683766e4e0486175a6e1416d8dc239107720da', name: "help" })))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-bhm3ZgMN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 require('./get-closest-element-CfyZl7i7.js');
 
@@ -21,7 +21,7 @@ const GuxFormFieldInputClearButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("button", { key: '305675dae6c35eab394e01dc39155b2f352a8c5e', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: '35444cb25808da5079a96c9f0c12b710726b687a', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })));
+        return (index.h("button", { key: 'a21ab3976e7e6ba49457aa4b44461a456611f367', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: 'b4b51e50d8dd85ea803b0650e0c387e97d97c1f9', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

package/dist/cjs/gux-form-field-label-indicator.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-bhm3ZgMN.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 require('./get-closest-element-CfyZl7i7.js');
 

package/dist/cjs/gux-form-field-number_2.cjs.entry.js

@@ -11,7 +11,7 @@ var simulateNativeEvent = require('./simulate-native-event-_MPnVmRN.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldContainer = require('./gux-form-field-container-BoogsqbY.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var focusInputElement = require('./focus-input-element-DmhIgp7F.js');
 var en = require('./en-0H0Z_nRu.js');
 var onClickOutside = require('./on-click-outside-B3wBBwlG.js');
@@ -111,14 +111,14 @@ const GuxFormFieldNumber = class {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'edb6b56da16df96351ddb058dddb8d9b14e14392', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'f6ea1699ba8db6572769e468fd1c97b8d305f28a', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'cdb3dc75c64bbfcadc13def9dab2d310e392d8fa', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'c49ba227f4d66e5418b0c21f9e7f5c1bb6e48212', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '55aa21efa1f278a0e816e5c27ee99ce926dca80b', name: "label-info" })), index.h("div", { key: '73d9ce4436dd94c458c281ac9a288b6c101cbac9', class: "gux-input-and-error-container" }, index.h("div", { key: 'ef7d9d1f4e5be99d839ad69b6be888a208eed405', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '7b28edd43bc818d8f1498486c396e7f9f9aee678', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '017d5eeaf123163fc06f3f3da23691ad863c9960', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '0e4ba199221759c31601b3e95dc333fcace3efd5', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'f929df4b73135f282a69cdaab59c7dc21ba5601d', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '7422744e0637c50382a085fbf8c23b6ee31549f3', name: "label-info" })), index.h("div", { key: '06613d1746aca0caa7527a60b37d2fe50056e8a1', class: "gux-input-and-error-container" }, index.h("div", { key: 'bb85a923c23b32711b277335f361a885644914c9', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, index.h("div", { key: '2611ee74b88f36ea13e737a9ca2628ce239c2723', class: {
+            }, part: "input-section" }, index.h("div", { key: '0a4119d2dd03b289d96abf142ac49f9e173bf5a2', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: 'ce295da6ddf992d86bd463ddf8145bdfdfb67788', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: '7b2083a27f83ab12bca4dc3f9741029d03ab09eb', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e319a958a910322f1e5ea30eba226cd50fbf494e', show: this.hasError }, index.h("slot", { key: '60bbbecb56a2c6e97e85f2a032853f561e946c9c', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '33279665977b056a4d17a515cfdfb11b7fd45016', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'eb112d1eacfd8b341a8ef72a2e1e4b673f6e6ff9', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: '024dd3b3d7301fda75af59a9b871f84ebaf11773', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: 'ce023e6cc138081233dda3c254e7c330419b4474', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: '6fd65820dd73e0716a9deda87d083b7dbdf368e4', show: this.hasError }, index.h("slot", { key: 'a3e0ae95fe2f96d1f6c6938a718a01bb2b422fa3', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '9b03426a3901e9e40f8bf78da47939df67ad4b8e', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '9670369675c0700943a6e9b3c3e66205240fdf0e', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -277,10 +277,10 @@ const GuxPaginationEllipsisButton = class {
     }
     render() {
         return [
-            index.h("gux-button", { key: '454441358989e2ef8054889e263e714a74b98411', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: '0e56ff1b9756228976929d4db5d4da5edc5437a2', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
-            index.h("gux-tooltip", { key: '2eed7f75f9de5709ec09f756250c93a5c6d6852e', for: "popover-target" }, index.h("div", { key: 'd9e02b0f0f8abf8c0d18387006d534a6cb2f5d2b', slot: "content" }, this.i18n('goToPage'))),
-            index.h("gux-popover", { key: 'dfc6e87c29e082fe2de4e7e5ca4504996fdb648b', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: '0dff29cc2478921d133c73c56922ad42f98dc309', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: '910764919a171ec5d15215856011353acd23079c' }, index.h("input", { key: 'f12b964eafa335c9626d4cf5978e7a7ab68ed196', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
-                    evt.preventDefault() }), index.h("label", { key: '5175b0b5d341d49b770e29cb80ae9c5d73a35f42', slot: "label" })))
+            index.h("gux-button", { key: '6b1bf7562dde88875e64bffd6eb2706d68053fd6', accent: "ghost", id: "popover-target", type: "button", disabled: this.disabled, ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, index.h("gux-icon", { key: '653f51ec02ef93057a68ebb7af3348da66f44de3', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
+            index.h("gux-tooltip", { key: '729905dd57fd32de84bcce1d7363ff1f0d18f2fb', for: "popover-target" }, index.h("div", { key: '0cd5d979d929db9196ab79e960fac1d446c75260', slot: "content" }, this.i18n('goToPage'))),
+            index.h("gux-popover", { key: 'c092a7e7850f517b04ba611e122871f11ad9a151', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: 'aec8b1063bec15644af85025356ce9d3f95933ed', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: 'e281e8d72fd81b9fadb81344d4be8678ecdd7b6f' }, index.h("input", { key: 'd428ded498a742be8e2254af671e8e999bcda505', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
+                    evt.preventDefault() }), index.h("label", { key: '6a99f403ff16b4dc35f7feaeb2cb7600e9d030f6', slot: "label" })))
         ];
     }
     get root() { return index.getElement(this); }

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

@@ -4,7 +4,7 @@ var index = require('./index-bhm3ZgMN.js');
 var index$1 = require('./index-Cu12q3Jc.js');
 var onMutation = require('./on-mutation-NV8nVGXy.js');
 var onAttributeChange = require('./on-attribute-change-Cv7L_5Zv.js');
-var usage = require('./usage-CIZ1jVjw.js');
+var usage = require('./usage-Dl0X7Yn5.js');
 var guxFormFieldError = require('./gux-form-field-error-DV2bS0KW.js');
 var guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-Bf1LtFMR.js');
 var hasSlot = require('./has-slot-BFTyqu_U.js');
@@ -102,14 +102,14 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '84fb36ddae824e95b57ed1bd01658a94a3b6647b', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'b9054d4ab45c67a347abcff39f938ce98c93e252' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: 'bc002ae72821d78a90bd2c2585908b0e54e08538', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '6e5b2bed76416bbcc247f9263df9f40141c436f8', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '147c97654d5598e45b84f32c3d8a9e3bf794ecca', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'd915277d0a0a7f6ef7b57158f7fd3ef1e3397004', name: "label-info" })), index.h("div", { key: '20aa48151cd584bb3f932639d2e2c5cf6d0fb1aa', class: "gux-input-and-error-container" }, index.h("div", { key: '301d5dddcd2557cfabfa637556c8dad695d780e5', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '6d6bb87376f707dcbca3fa8acdb804bc3f27ff8a', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'a57866c2b0a2d6e934c85d3ab748651249d8516a' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '96d9d56ff4c3281bf0f12125ebbf35348af38783', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'fa79113bc2e0979feeb863692bc45cb0c8668b4d', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'a41fa1fe3559d93d5eedb1b06230cfe17e95d29b', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '920d7aa1dd49ff53efdccfd50f5988880e154348', name: "label-info" })), index.h("div", { key: '44a4574b847810c6ee309a231a55aad133a9e9c3', class: "gux-input-and-error-container" }, index.h("div", { key: '335e198d51279ee6ddbc83b0bea4a6a6f72ef705', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '02ceeccbe07de8777c292d5dc6fcfc4243009eef', class: {
+            } }, index.h("div", { key: '6c0208ba28179b72d39fb1789fa92db0e91a447a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '2b40a34bfd3da43d81e5ba8b2c98be33a3bb631b' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'defff04d82a5caf40dd2adca0eb74861618a14f9', show: this.hasError }, index.h("slot", { key: '8bbfb9bf2dc1938027f97c163ce4940d641ff692', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4b9ada38eaffa65c80a24c2e035447f01c04e04a', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'bb45642d29768d246dca2ce61e9121cc4aa34206', name: "help" })))));
+            } }, index.h("slot", { key: '0b45742c85ec5c7fab69a48066e4088536473dc9' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '2e2b2af70208bf36133f8e1ec3e0dc887dec1f35', show: this.hasError }, index.h("slot", { key: 'ffb20ed836f2ff03f9bc1d41b32774cdc4d427b4', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '68826c18d750dedecb55929a76cd97f324b02022', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'e2befac8788e1cdb6acb815886fa4ea33cf019ab', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {