genesys-spark-components 4.155.0 → 4.155.1

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

@@ -8,7 +8,7 @@ const randomHtmlId = require('./random-html-id-71c43d5a.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const isoDates = require('./iso-dates-2daf4199.js');
 const onClickOutside = require('./on-click-outside-8a2d3a8e.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const index$1 = require('./index-aa48ea67.js');
 const intl = require('./intl-ed89316c.js');
 const useRegionalDates = require('./use-regional-dates-4d3f1b9d.js');

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e321455d.js');
 const index$1 = require('./index-aa48ea67.js');
 const intl = require('./intl-ed89316c.js');
-const index_umd = require('./index.umd-cca9b19f.js');
+const index_umd = require('./index.umd-3caf0dbf.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./get-closest-element-26170ce0.js');
 

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
 const randomHtmlId = require('./random-html-id-71c43d5a.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-9e41d6b9.js');
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-9e41d6b9.js');
 

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

@@ -8,7 +8,7 @@ const index$1 = require('./index-aa48ea67.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const guxListbox_service = require('./gux-listbox.service-700ba659.js');
 const onMutation = require('./on-mutation-6d71ec1a.js');
 require('./get-closest-element-9e41d6b9.js');

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

@@ -8,7 +8,7 @@ const index$1 = require('./index-aa48ea67.js');
 const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const onInputDisabledStateChange = require('./on-input-disabled-state-change-660a5191.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const onMutation = require('./on-mutation-6d71ec1a.js');
 const guxListbox_service = require('./gux-listbox.service-700ba659.js');
 const hasSlot = require('./has-slot-3edae188.js');

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
 const index$1 = require('./index-aa48ea67.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const removeFile = "Remove {filename} file";
@@ -32,11 +32,11 @@ const GuxFileListItem = class {
         usage.trackComponent(this.root);
     }
     render() {
-        return (index.h("div", { key: 'd53955036d4a45a954e6beaafb6c933a380c29b8', class: {
+        return (index.h("div", { key: 'f3728cb6a3f569b8e40e2306f6f352bbf3ba32d3', class: {
                 'gux-file-list-item': true,
                 [`gux-${this.status}`]: true,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '3a1003748e90a3b27ecdbece18249884ed8835a3', class: "gux-info" }, index.h("gux-truncate", { key: '7ffb12f5e1d210bf991075ba6936c72518cce6fd' }, index.h("span", { key: '461a240baa6c3dac8c0cb7027045bfb10edf906b', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+            } }, 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()));
     }
     renderStatusIndicator() {
         switch (this.status) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-9e41d6b9.js');
 

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

@@ -5,8 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e321455d.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-ec8cb051.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const guxMenu_common = require('./gux-menu.common-b5cd8551.js');
+const index$1 = require('./index-aa48ea67.js');
+require('./get-closest-element-9e41d6b9.js');
+
+const onMenuFocus = "Use the right arrow to enter the submenu, and the left arrow to return to the previous menu";
+const onTargetFocus = "A popup has appeared. Press the down arrow to enter the menu";
+const translationResources = {
+	onMenuFocus: onMenuFocus,
+	onTargetFocus: onTargetFocus
+};
 
 const guxFlyoutMenuCss = ":host{z-index:var(--gse-semantic-zIndex-popover);color:var(--gse-ui-menu-option-label-foregroundColor);cursor:default}:host(:focus){outline:none}:host(:focus-visible){outline:var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);outline-offset:var(--gse-semantic-focusOutline-offset)}.gux-flyout-menu-content{position:fixed;display:none;border:none;border-radius:var(--gse-ui-menu-borderRadius);opacity:0}.gux-flyout-menu-content.gux-shown{display:flex;animation-name:fade-in;animation-duration:100ms;animation-delay:350ms;animation-fill-mode:forwards}.gux-flyout-menu-content .gux-arrow{position:absolute;inline-size:var(--gse-ui-popover-anchor-width);block-size:var(--gse-ui-popover-anchor-height);padding-block-end:4px;overflow:hidden}.gux-flyout-menu-content .gux-arrow-caret{inline-size:0;block-size:0;border-block-start:calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);border-inline-start:calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;border-inline-end:calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;filter:drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow))}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}";
 const GuxFlyoutMenuStyle0 = guxFlyoutMenuCss;
@@ -67,6 +76,9 @@ const GuxFlyoutMenu = class {
         this.root.focus();
     }
     onFocusin() {
+        if (!this.isShown) {
+            void this.announceElement.guxAnnounce(this.i18n('onTargetFocus'));
+        }
         this.show();
     }
     onFocusout() {
@@ -152,13 +164,17 @@ const GuxFlyoutMenu = class {
         if (this.menuContentElement.contains(document.activeElement)) {
             return;
         }
+        this.hideDelayTimeout = afterNextRender.afterNextRenderTimeout(() => {
+            void this.announceElement.guxAnnounce(this.i18n('onMenuFocus'));
+        });
         const menu = this.root.querySelector('gux-menu');
         const menuItems = Array.from(menu.children);
         const nextFocusableElement = menuItems[0];
         void nextFocusableElement.guxFocus();
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         usage.trackComponent(this.root);
+        this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     componentDidLoad() {
         if (this.isShown) {
@@ -179,10 +195,10 @@ const GuxFlyoutMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '2351ad3d650d9d219d7272d1462bc4896b027b12', tabIndex: 0, "aria-haspopup": "true" }, index.h("span", { key: 'a00f3834b35a503a64d4beca6638e9fe34ac0d14', ref: el => (this.targetElement = el) }, index.h("slot", { key: '53f5b8d5562cd648cabc0ea4860cc1c473796ac5', name: "target" })), index.h("div", { key: 'a8245bae6e65405ed733d3332ccbe6e0fd994098', class: {
+        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: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: '5972fa797f392f3c300ea50d61c41d2ed747db07', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, index.h("div", { key: 'c6a1f06a0928b002b0a43f2bec0ea04bac0e96cc', class: "gux-arrow-caret" })), index.h("slot", { key: '01054f699549e0b63b63d36b0d8f5d6cfa26e752', name: "menu" }))));
+            }, 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" }))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -11,7 +11,7 @@ const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-db1aba2b.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 require('./get-closest-element-9e41d6b9.js');
 
 function setAllCheckboxInputs(root, checked) {
@@ -197,8 +197,8 @@ const GuxFormFieldCheckboxGroupBeta = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '98d0690d8c1fd17b434f8946cd7f93c394b9b9f4', labelPosition: "above" }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '298fe9be8fbbb3b7f7ff7749d0ce873bfa219995' }, (_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: 'a94e7153bacb115cf63ed0b4dc4603b8347229cd', position: "above", required: this.required }, index.h("slot", { key: 'd30a5befd3fd15213c284d0c7af243d6d07bc780', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '6449f6c04cdfcdfcd80d75a9b9f229f445b7b7d5', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '4eab381a152e8baf40bfb4adcda5bf81937a262a', name: "group-label-info" })), index.h("slot", { key: '8c988a909db54ff6e9dc294d7dc9e0c4a5d702bd', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), index.h("slot", { key: '286b30b7358d9715e8c1b9e0bb2a90b259305f59', onSlotchange: () => this.updateMainCheckbox() }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'b7aafae8f77cf32e153591bcb0670384aafc1bb2', show: this.hasGroupError }, index.h("slot", { key: 'a35123dda49a72c62deb59e18f29a9d829a28ff3', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4969a7009d6f8bf513394cf60297c6b5b499afb2', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: 'a377111d6f5816316189e5b9fda971311af68c8d', name: "group-help" }))));
+        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" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -8,7 +8,7 @@ const onMutation = require('./on-mutation-6d71ec1a.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -52,10 +52,10 @@ const GuxFormFieldCheckbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e33c81e5ebf0d6384e70c9dbebd425818b629b05', class: {
+        return (index.h(index.Host, { key: '9b37ae14b5aa5d2904c22ffcf8393a2d845dc4d4', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: 'c0b7b7cd778f53bac8d86714fc4717e5529a4bbf', class: "gux-form-field-container" }, index.h("div", { key: '67a1fb1fe64d980bbaf270863fdf7ca3ce40e55e', class: "gux-input-label" }, index.h("div", { key: '412e3c06405f31ffbcd018ce4d11b3a535a02dee', class: "gux-input" }, index.h("slot", { key: '201f531bb890e6c0d607f4b5f4d8a7449c11707f', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'ceec62d559b90a0d73e5c72b64fdfb67466fc85b', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: 'ca0dd77a35a4efdc20dac88259fc54662082bb5b', name: "label" }))), index.h("div", { key: '84de835f978c2fb17d6c28b7f8f17bc55bb5152c', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: 'a042683304e69c33f29d1e35f60bc689398ee3f0', show: this.hasError }, index.h("slot", { key: '45285c03bcf42723bba20c92063b60db0cbfb449', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '0430f5040a211df1c350acde8f1c77163f47cea7', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'dea14136220f341ba6649a6ebdebe7f18539d19b', name: "help" }))))));
+            } }, index.h("div", { key: '2e17696291cdc811675563fbd99096784c0d8d13', class: "gux-form-field-container" }, index.h("div", { key: '9437488b97202380453b4ce4599262ee55eb1848', class: "gux-input-label" }, index.h("div", { key: 'f5f4cfbc9add601c6cd3a668468deebf22c79032', class: "gux-input" }, index.h("slot", { key: '7d2563cfe7d5fb645f6200da43528743c6d18f66', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '91047391d4a93e0101c23348738166b9a879891a', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("slot", { key: '6b6288cd053446a5500fd259028f8f357bd9cb95', name: "label" }))), index.h("div", { key: '7ca2cd22c659755cf46cb72ed8925ff4e23105f9', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '53bc3cd91b30776ca37071a1591d75adef860b1a', show: this.hasError }, index.h("slot", { key: '6f5b4a935ad5f4149f3608bd8b90fd1f568baf35', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'c1fcbeb423ee9e8c902933bca6a09358b7498071', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '0200774d9d227bf123e68c9cda5277b1d3284171', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

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

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldContainer = require('./gux-form-field-container-64894e99.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -90,13 +90,13 @@ const GuxFormFieldColor = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '2b294a491cedc62325544ae31f7ca0e32ae3441b', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '5b9714407a6faaeb26502007efc73c59ec87cf60', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '46c9249b6a3dd4f697c8ea296d236726fb345121', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'c170cbb3cc937ed4c9b6d1d26ba04f3c87266e2c', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'dfad3c6d0fbe5fb49a88d26dd926d193e7359a5f', name: "label-info" })), index.h("div", { key: 'e67d83ced521d1b46ae7d61074d4a9b9c51b98d5', class: "gux-input-and-error-container" }, index.h("div", { key: 'd220d60f0b54edc579177651823855d63165f7ec', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '02de15bef4a1e5b206e8abe595c7353f73f93295', class: {
+            } }, index.h("div", { key: '41c6dcd864d396fd51ef29c381ffe6d157a950c8', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '98f63dfef469bc8ed7e4990d5ce2a82b33f213f9', name: "input", onSlotchange: () => this.setInput() }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e7973a26ae9c40a79142180782f9c2d8a21eb00f', show: this.hasError }, index.h("slot", { key: '892a55dfd1c972e2bb1cea9375b071b167e6ccd5', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '0429c9be3c92067b61bd8c2bffb9da4402ad0d9e', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '85fbf1c590a2d5b99d4bf4bc19212d6baabba4bd', name: "help" })))));
+            } }, 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" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -11,7 +11,7 @@ const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-db1aba2b.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -110,11 +110,11 @@ const GuxFormFieldDropdown = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'f2f4e9a8ff7f9e22045a4be75a5d3b41447ae71d', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '00ed473cf198a45a2cef8ba110780d2caa71b03f' }, (_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: 'e18eb380e152e014acf011e2858e4e1f802073b3', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'fb18e487b41ad436918342653f1d7642d6530074', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '27c7ca59d34e537eeda039c95c4b119232c1fe9e', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'cd7efd152a6c02f115a5953e57d8a5f0333ffbf5', name: "label-info" })), index.h("div", { key: '021d1706cabb39b8dc9402ab8d531aed533fb57d', class: "gux-input-and-error-container" }, index.h("div", { key: '2c5117c5e441a28dd9bc270d5a45cd3e1d7b8f00', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("slot", { key: '6faca4e188336a14f3ca7ed945ccce9531157a86' })), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e60dab8fbe562ea703d869b08684672a372a19a5', show: this.hasError }, index.h("slot", { key: '4fbe80625cb1c8e4e6ecc6c7e7e0fbd01c1353fd', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'd97ecff22998058888377877b40574a40bcbcccc', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '4516800cc56bb7203f18c752689d5ba266578b41', name: "help" })))));
+            } }, 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" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -6,7 +6,7 @@ const index = require('./index-e321455d.js');
 const index$1 = require('./index-aa48ea67.js');
 const onMutation = require('./on-mutation-6d71ec1a.js');
 const hasSlot = require('./has-slot-3edae188.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldContainer = require('./gux-form-field-container-64894e99.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
@@ -113,7 +113,7 @@ const GuxFormFieldFileBeta = class {
         (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'd6cd4823100ca775ddd66079da9825e9dcf6c41c', labelPosition: "above" }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'c35ca22f59ce27c225b92d14002418fbe600fd69', position: "above", required: this.required }, index.h("slot", { key: 'b19f3e2baacb6d03212926d9f3383c2dd6e75060', name: "label" }), index.h("gux-form-field-label-indicator", { key: 'baf3c024b9dc7bba0a2ad8ef697a9d0928efdca5', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '0cb36f65dc3460538daac6bbf62f0edf99e39bd9', name: "label-info" })), index.h("div", { key: '8f68e0239d124e802752800c054d867508175181', class: "gux-input-and-error-container" }, index.h(guxFormFieldError.GuxFormFieldHelp, { key: '3f512ba19d68ec08e72b3f1ab994c0246f15b762', show: this.hasHelp }, index.h("slot", { key: '3e663f6a7094935eb03ee6a69410190bb0d50a63', name: "help" })), this.renderInputSlot(), index.h(guxFormFieldError.GuxFormFieldError, { key: '4d9dd6596e57c32a4e2f86da8684c59b6a72ef69', show: this.hasError }, index.h("slot", { key: 'dbdbac3f00d3764d9b0bdf70394ba96e4d79cdbe', name: "error" })), this.renderFileList())));
+        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())));
     }
     setInput() {
         this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="file"][slot="input"]');

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-e321455d.js');
 const onMutation = require('./on-mutation-6d71ec1a.js');
 const hasSlot = require('./has-slot-3edae188.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldContainer = require('./gux-form-field-container-64894e99.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
@@ -108,7 +108,7 @@ const GuxFormFieldFile = class {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '08511bf60b590f9a13ba6a7fb3561769eb0d3aa1', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '04a5dfc249109bbe7fa2989d764a9ae58bc952b4', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '6953fc2d625acbf6e3b33da32647cb534c1864d1', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '51ec4246ee2079232ef350e6decf7dbf1dc91b04', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'b2f6397e827292e196516614dc72774bb9a80020', name: "label-info" })), index.h("div", { key: '4a1a487771bc384f433278cfe3ba63c23141fa8b', class: "gux-input-and-error-container" }, index.h("slot", { key: '47d0d93b1ff6902dbb6fb17233455a6209f15698', name: "input", onSlotchange: () => this.setInput() }), index.h(guxFormFieldError.GuxFormFieldError, { key: '96b0f4cf4ccc15e6f42856c03ce0e109a30c7d72', show: this.hasError }, index.h("slot", { key: 'ae24a6c6a1ffbe31d576a946dd7e8d8c4574fb39', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '2702e229e642c9e700b203f7fc20a15bc7c0fdc0', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'da73bd0d3b3207bffdff1d0cbc6506c301cf8792', name: "help" })))));
+        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" })))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -24,7 +24,7 @@ const GuxFormFieldInputClearButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("button", { key: '7670bf93893c19a33fc980fa44b193be1f2e9ee6', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: 'e04beaace608a0712bbe4e9d9f7e5b7a865d00df', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })));
+        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" })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e321455d.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const index$1 = require('./index-aa48ea67.js');
 require('./get-closest-element-9e41d6b9.js');
 

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

@@ -13,7 +13,7 @@ const simulateNativeEvent = require('./simulate-native-event-e88bf64f.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldContainer = require('./gux-form-field-container-64894e99.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 const en = require('./en-66d2b744.js');
 const onClickOutside = require('./on-click-outside-8a2d3a8e.js');
@@ -114,14 +114,14 @@ const GuxFormFieldNumber = class {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '064b2007a38027d4f97550745ca7c7f3cf4b7d8f', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'd1740901d5d5c27ec4f806bf35befa064e6a66d5', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '58027f50032fbeafecd90837708f7d601d10f1fe', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '0488b44de3e25719b594ad8d8ddb11bf262ec7dd', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'de7653879e59754090b60f0e252b31e56465aeca', name: "label-info" })), index.h("div", { key: '90ac5896eca80bcf8f90bd46ddffeb55cb8a8857', class: "gux-input-and-error-container" }, index.h("div", { key: 'ba18c3897c9c0a05c79db41a2e830cf868278f3b', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, index.h("div", { key: 'df7c0fda30de62de2b8e60d990db981d46bed398', class: {
+            }, part: "input-section" }, index.h("div", { key: '2611ee74b88f36ea13e737a9ca2628ce239c2723', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("slot", { key: 'db8e57514b91b790ffef0e6527c7453f4b836ff1', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (index.h("gux-form-field-input-clear-button", { key: 'a94c0704fd44dd528e715f080fb78ce4c01c4c34', onClick: () => guxFormField_service.clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), index.h(guxFormFieldError.GuxFormFieldError, { key: '2b5102f868a4e18812549bf6e96b6e413f352096', show: this.hasError }, index.h("slot", { key: '9d22a28226b37f1f07269fac2b213a95ea28081a', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '337135575dadc0205a503693eb6ed0904048e7ed', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '5ff91b042057e53e5a0544a1f2f2360d6efcb671', name: "help" })))));
+            }, 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" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -281,10 +281,10 @@ const GuxPaginationEllipsisButton = class {
     }
     render() {
         return [
-            index.h("gux-button", { key: '3b4e01afe3cc52e4f15bd06beaf246ddb6022347', 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: '4dd184f3df45a8217662c6a2212a43ed8b8dc637', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular", size: "small" })),
-            index.h("gux-tooltip", { key: '7c5e0ae742547ebb974acd5893d32cf1f7c7a160', for: "popover-target" }, index.h("div", { key: 'ab2acb2eaddf719a43100a02961ade72fb58adac', slot: "content" }, this.i18n('goToPage'))),
-            index.h("gux-popover", { key: 'fd4dfdb6366ff55b0bb2cf89cb44ba4619c512e4', "is-open": this.isOpen, for: "popover-target" }, index.h("span", { key: '9df657db624e86018296c02bb1af9601414cef7c', slot: "title" }, this.i18n('goToPage')), index.h("gux-form-field-number", { key: 'bdd0cbe91e36e28dbcd5f24312f287f1e1ec4441' }, index.h("input", { key: 'a229de63ad7e45af3526dc547765dfa19fdacf6e', 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: '2300839502e8b3d3c267ef8a8e46fe349315db57', slot: "label" })))
+            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" })))
         ];
     }
     get root() { return index.getElement(this); }

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

@@ -6,7 +6,7 @@ const index = require('./index-e321455d.js');
 const index$1 = require('./index-aa48ea67.js');
 const onMutation = require('./on-mutation-6d71ec1a.js');
 const onAttributeChange = require('./on-attribute-change-a9f44523.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-db1aba2b.js');
 const hasSlot = require('./has-slot-3edae188.js');
@@ -105,14 +105,14 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '76ec4542d19c73820b60e842627c0a858cc72a01', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'd2602bce25fe1e01096e6da3d3d171730c362688' }, (_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: '6f55fa065e8739cd78cd06568f89611205eb5ee6', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '8e4dd8ba32b6ee45ee98f3973d52fc7a8ab52ff8', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2574f92ac8b14b7daf54555a15f79ddb2ed94707', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '7ed18535d9d73a9cf45c33146a2263221d873edb', name: "label-info" })), index.h("div", { key: 'c7763fe39299bf1f7f8c8d02e8589ef26bc60d30', class: "gux-input-and-error-container" }, index.h("div", { key: '3af18fef9a1de6dc05f590310d681a7648e5a55f', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '18aaf519eb2e58eee8fadd543a838cbe87c4371e', class: {
+            } }, index.h("div", { key: '02ceeccbe07de8777c292d5dc6fcfc4243009eef', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '70dfbc0d9a344cbc81cd90834b16f6696316634c' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e24b52b1084eb2b69398de9e5e0bafbe34efe3a1', show: this.hasError }, index.h("slot", { key: 'e6785757f2193cc643fb2c5285e5a7d57ac495bf', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '27d134d612398cb783e4875b437b0a7fd7135942', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '98e602e754705715c2793776ef5803c07ecada0d', name: "help" })))));
+            } }, 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" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

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

@@ -9,7 +9,7 @@ const index$1 = require('./index-aa48ea67.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-db1aba2b.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 require('./get-closest-element-9e41d6b9.js');
 
 const required = "Required";
@@ -130,8 +130,8 @@ const GuxFormFieldRadioGroupBeta = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '731c2e0b2b969f58583d3df7f813a9c73e59e489', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '18dffd2ce505962b4df7fef1ab31fcf0e44eac38' }, (_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: 'd857a6f447a4e05c30092cf947aaf24ea3fd2a81', position: "above", required: this.required }, index.h("slot", { key: 'd85271ac786c4556e0452bbfec8b584a1d4f0877', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '3a0d099903ac6c3bb938e0744e8f474862e34756', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '851cb0c5e43e9b6f65188177e58138e82f1420aa', name: "group-label-info" })), index.h("slot", { key: 'b538ad5c1be5b6ad27cd60124b1164edf6bbba9d' }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'bb1ecc4080944f92df270cd270f8e65d319caea6', show: this.hasGroupError }, index.h("slot", { key: 'a2655f28592b13240491db06e8d3e2059d5a9239', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '394bbd8bf6c106a2be881a9e456d996ce8904d66', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '60ad4e1b66ddf8ed1a69fa350114614de7f614af', name: "group-help" }))));
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'fad484fb7fa8ec26abc118586b82c66b5952915c', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'e8446de191e32faf08297a3baaa710caceda7290' }, (_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: 'ee8f1870612c16fd90dfa7ae69155abdd0768013', position: "above", required: this.required }, index.h("slot", { key: '6b20419b25b7b7381740834b42d6f057db18ad2a', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'de00848bbb489b3db197dfd92328940f529cc85c', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'd1bd07ac555ca287b40a850458b212f0ea13728d', name: "group-label-info" })), index.h("slot", { key: '525f68e3742ae671bdf928c8578581893eddca07' }), index.h(guxFormFieldError.GuxFormFieldError, { key: '46e74e1785062aab209be58ac7a34d4f9041353f', show: this.hasGroupError }, index.h("slot", { key: '41824728fe7ae908f4428147f3f3696c7d139c5e', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '1e3c4ab5237c81ed55d6d075f5d0c6983c04dbd7', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: 'b89ae47b91befcb31fbca744ea3a5768ffe40060', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -9,7 +9,7 @@ const preventBrowserValidationStyling = require('./prevent-browser-validation-st
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -51,10 +51,10 @@ const GuxFormFieldRadio = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '027a65529baac39c48426634b16e216de228e935', class: {
+        return (index.h(index.Host, { key: 'e9b9c79eb41ac2d19d0bcc932f7ec95a199b9903', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: 'a368d94400ded63f97a91961c04c68e2b5458c36', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '54ffe9d74bd5b5f2763008ceb774d71b4cad744b', class: "gux-input-label" }, index.h("div", { key: '4d32d3a82fa16d0ed6461b20779b76c8c6ee8692', class: "gux-input" }, index.h("slot", { key: '2cc9b7db733a5845f2bd758ae25eea223cdd184d', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'd2e351035f0737fab0eab622148baa0e14bcdca7', class: "gux-label" }, index.h("slot", { key: '1bcdee07bdd20ce7cb7c2f6905e82ed56611735d', name: "label" }))), index.h("div", { key: '662f53fba77fda4fd7067a5c255d9ecc6d66ebd7', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '1a2b4f3cdd0ef55638941da8a5f80b109aeea2b9', show: this.hasError }, index.h("slot", { key: 'ec9fab4a338961d884bf90ad30c61b50fbd1b866', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '41e1975a1824c49330654cb7693d314cd765bb45', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '47fbf0b55fea3fcbff967fec03a134b3dad95384', name: "help" }))))));
+            } }, index.h("div", { key: '1da2143e7a310bcbc1516e59e15c9b4fd9f26fdd', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '93853b97a827184389f35d5b280d11977c099ca8', class: "gux-input-label" }, index.h("div", { key: '8f0c0905566540f255a83de16db9a89b3421876a', class: "gux-input" }, index.h("slot", { key: '946aeb85de8bc850756baf6a60e72dc05eff2de6', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '5b4cdf94ddff3cc059fe5ac76abfa52ca4db01e1', class: "gux-label" }, index.h("slot", { key: 'aab275c888fc44566fdbeae133e1950addbff70e', name: "label" }))), index.h("div", { key: '5b06a11563515764b09ce8d66f9c9ed8600f63ba', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: 'db447c98e56b06fca8a73c5db54b7a2af8ff0a3c', show: this.hasError }, index.h("slot", { key: '372a75fe6ac5a8144b5a516049de6d334b4dff44', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '1aecda0403524cbf79fa34e572d83d22a9cab2a9', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '221aae6237ca1072200759a0ee0fe75c0e227e8b', name: "help" }))))));
     }
     setInput() {
         this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

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

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldContainer = require('./gux-form-field-container-64894e99.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const onResize = require('./on-resize-b2cc6e7f.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -116,9 +116,9 @@ const GuxFormField = class {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (index.h(index.Host, { key: 'f7dab9b140b4729fac375f8cda59fd68a8d9bd0a', class: {
+        return (index.h(index.Host, { key: 'ac6396675a70341ede73d1f0e4d77327f80f48e6', class: {
                 'gux-active': this.active
-            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '4f7f841f694cbba7353efacae151a5a36675961c', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '182bf50f074a917f47bfa1f72d306003b5534518', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '533261011f51862d74349dfdc3a93f6ac2d577aa', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'e1ee1408ef44be674d2e9592f3fb7c8e843a5735', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'c65695772089c745c8aef175a96282a0dfed522d', name: "label-info" })), index.h("div", { key: '97eeb2700066fb6581acf93b8f7a515218a84a71', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: 'ea49b1560d6b560fa91b3c369c9675cdb23b248a', show: this.hasError }, index.h("slot", { key: '24ac328b0312224b18361a3cc665666833ecab0e', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '239084e90d111fc37b036607921a37ec28d99266', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '1a32d3340caa1c46835c3771522f0b393344e282', name: "help" }))))));
+            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '23657e405c569be2dce010be4bcfedf5b54f9bc5', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'b71e9c317f19951c12b09bdda6183e9ae6830fa3', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '9044fd0692baeee3544288c94bf239926a160549', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'aa6dff32c0a3d879c1810b3afdef375886d96191', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: '77f5fcb31f86bb617fca118552b0b5bd8233d9e5', name: "label-info" })), index.h("div", { key: '6023b57dc00df1cabca6f3e2764d15cecc74b6da', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: '257c4a9379d86e21803431b028d53d8b847a734b', show: this.hasError }, index.h("slot", { key: '6c7b143edbf0722e5d3f93b638bc3d5ef36cbfb4', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '2d57e4f92318e10cfb660192326c5ec2bc6a29c5', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '0a3cdd8d4ee97e4de487ac8215eb5e4bbb047a72', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -11,7 +11,7 @@ const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-e6b8a9ad.js');
 const guxFormFieldContainer = require('./gux-form-field-container-64894e99.js');
 const guxFormField_service = require('./gux-form-field.service-9cc5debc.js');
-const usage = require('./usage-f9f34ca4.js');
+const usage = require('./usage-16af582c.js');
 const focusInputElement = require('./focus-input-element-3a0c1858.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -101,13 +101,13 @@ const GuxFormFieldSearch = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'a74e52145e3730e81a2fc9809f6b91caab36f95d', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '4ca03c5135a5f0caff983e89c1be29e140b63dbb', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '143a6c904688b0bcdf6bf904cbe9689a0d7893c2', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'cd0e5d753d09fb2b129add014a878c7407ff9216', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'b647dd68be49b0d54e49c0c88b9ac484dca8b615', name: "label-info" })), index.h("div", { key: '7f1fec79684afa6943489451d2a02e578e4317bf', class: "gux-input-and-error-container" }, index.h("div", { key: '9080ac7a90dc51ccd4461f3e20058f93e605bcec', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '8a63dea595a1c5d42dcb4cd8facc9d460a9e5a1b', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'cfd0eec1ecf20523561684958daa1f6acf972caa', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'a3aaeff0832e5a64d1df1117d740c278c9c272af', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '70fe33bfb767af9d906cedcc9ce9ee60ca747af8', variant: this.indicatorMark, required: this.required }), index.h("slot", { key: 'a56375db0f57772478adc032a6098545abef2a19', name: "label-info" })), index.h("div", { key: 'c018d09f0cec6cca6986fc5e3dbe3d2ed110e1cd', class: "gux-input-and-error-container" }, index.h("div", { key: '612e3730ffec8c4e2c6cd1a99f6b236f7f4c3294', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: 'c4a3823de7f3e5e6171c48b7a0b8860379eb70fa', class: {
+            } }, index.h("div", { key: '4484c395ec89c16ea0e431ce4ba40c7f12f07f4c', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("gux-icon", { key: 'c751e178a2df12fbb1450c8e634c8ddfc88529ea', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), index.h("slot", { key: '4c9789b11d5ce5da90e6bf16e0de694878f1b093', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: '11e2f54cc02572395b5c23b9e3e6d7382756171a', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: '95affd07be581b62a0d1feb8f6f6066b90b32214', show: this.hasError }, index.h("slot", { key: '521c6e8eac641c4c6cae8fd1eae8c2842078d509', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '3fc1bdb3cad4e36bc7852d31164acf67b70ad513', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '7eb1cbf7147edd67c2b87143ab6f2f5d24877669', name: "help" })))));
+            }, onClick: () => focusInputElement.focusInputElement(this.input) }, index.h("gux-icon", { key: 'fc268ba929820ea0cb29914dc49dfc6a2ca65128', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), index.h("slot", { key: '7454d1c6c2bdce9896dc23bc146186da366fcc2a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { key: 'f503f5d0aa5b2ec5528002b88364eab21e698824', onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'bbc51e468617a53ac4e6765ca62b5b4a3c9f4d56', show: this.hasError }, index.h("slot", { key: '694a574192897e77f2ddee09372e79918625e835', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'b790d4a1238ca6d77415785f8c98c0fba45143eb', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '710ab2c334609e1d6d803046a08e25abf3e6ce6a', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition