genesys-spark-components 4.109.0 → 4.110.0

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

@@ -0,0 +1,296 @@
+import { r as registerInstance, f as forceUpdate, h, g as getElement, c as createEvent } from './index-feb7be20.js';
+import { b as buildI18nForComponent } from './index-6fa3d266.js';
+import { c as calculateInputDisabledState, o as onInputDisabledStateChange } from './on-input-disabled-state-change-27395154.js';
+import { O as OnMutation } from './on-mutation-0160ea8e.js';
+import { o as onRequiredChange } from './on-attribute-change-f42eabee.js';
+import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
+import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition, d as setInputValue } from './gux-form-field.service-986d3f3f.js';
+import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
+import { h as hasSlot } from './has-slot-f24a46a6.js';
+import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
+import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3b76ab09.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
+import { f as focusInputElement } from './focus-input-element-8a137b12.js';
+import { t as translationResources } from './en-25a315a0.js';
+import { O as OnClickOutside } from './on-click-outside-4688e1f9.js';
+import { b as afterNextRender } from './after-next-render-07a41f53.js';
+import './get-closest-element-728b9f18.js';
+import './random-html-id-81ac821b.js';
+import './log-error-274efeb7.js';
+
+const increment = "Increment";
+const decrement = "Decrement";
+const componentResources = {
+	increment: increment,
+	decrement: decrement
+};
+
+const guxFormFieldNumberCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;order:0;min-inline-size:var(--gse-ui-icon-small-size);min-block-size:var(--gse-ui-icon-small-size);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label{display:inline-flex;flex:1 0 auto}.gux-form-field-label ::slotted(gux-label-info-beta){padding-inline-start:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-beside{position:relative;inset-block-start:var(--gse-ui-formControl-input-top);inline-size:fit-content;min-inline-size:var(--gse-ui-formControl-input-textfield-minWidth);max-inline-size:fit-content;margin-inline-end:var(--gse-ui-formControl-group-gapItems)}.gux-form-field-label.gux-above{padding-block-end:var(--gse-ui-formControl-formField-gap)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding-block-start:var(--gse-ui-formControl-formField-gap);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-textBold-fontFamily);font-size:var(--gse-ui-formControl-label-textBold-fontSize);font-weight:var(--gse-ui-formControl-label-textBold-fontWeight);line-height:var(--gse-ui-formControl-label-textBold-lineHeight);color:var(--gse-ui-formControl-label-labelColor)}::slotted(input){flex:1 1 auto;align-self:auto;order:0;inline-size:100%;padding-block-end:0;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);text-align:end;text-overflow:ellipsis;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center;inline-size:100%}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;align-self:auto;order:0;inline-size:100%;block-size:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);cursor:text;background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;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-input-and-error-container .gux-input .gux-input-container.gux-disabled{cursor:default;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{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-focusRing-borderRadius);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-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}.gux-step-buttons-container{flex:0 1 14px;align-self:auto;order:0;margin-inline-start:var(--gse-ui-formControl-spinButton-gap)}.gux-step-buttons-container .gux-step-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor);background:transparent;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) transparent}.gux-step-buttons-container .gux-step-button:not(:disabled):focus-visible,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{cursor:pointer;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-step-buttons-container .gux-step-button gux-icon{flex:0 0 auto;inline-size:14px;block-size:14px}";
+const GuxFormFieldNumberStyle0 = guxFormFieldNumberCss;
+
+var __decorate$1 = (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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const GuxFormFieldNumber = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.clearable = undefined;
+        this.labelPosition = undefined;
+        this.indicatorMark = 'required';
+        this.computedLabelPosition = 'above';
+        this.disabled = undefined;
+        this.required = undefined;
+        this.hasContent = false;
+        this.hasError = false;
+        this.hasHelp = false;
+    }
+    onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+    }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
+    // eslint-disable-next-line @typescript-eslint/require-await
+    async guxForceUpdate() {
+        this.hasContent = hasContent(this.input);
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+        forceUpdate(this.root);
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
+        this.setInput();
+        this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+        trackComponent(this.root, { variant: this.variant });
+    }
+    disconnectedCallback() {
+        if (this.disabledObserver) {
+            this.disabledObserver.disconnect();
+        }
+        if (this.requiredObserver) {
+            this.requiredObserver.disconnect();
+        }
+    }
+    render() {
+        const showClearButton = this.clearable && this.hasContent && !this.disabled;
+        return (h(GuxFormFieldContainer, { key: '9130606d82f93896ef88f3487080054e283de111', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '4bd5e3c71628b945a50a468d6fc7aa7afabd624e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '4383c95fe83fec6e6ae94c2c7afe8d3ab859a5b3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9bb2de3331e4977313ef7dd047e8ef4780b2f1df', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f4f3d3c172301bfadb156183a5ca02fe48dce92e', name: "label-info" })), h("div", { key: '7bf94ce9b4fd7a3cc5d6f5ab68f9d43e581e433f', class: "gux-input-and-error-container" }, h("div", { key: '35883426da3b8b5ceb7fa61cfc137f23e4b3c75a', class: {
+                'gux-input': true,
+                'gux-input-error': this.hasError
+            }, part: "input-section" }, h("div", { key: 'a3ff727dbfc4abde0b284b270ee9d068953573ba', class: {
+                'gux-input-container': true,
+                'gux-disabled': this.disabled,
+                'gux-clear': showClearButton
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '9616ca55da9df60b1dd821d1561ee2e1ceb03722', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: '8d0d4acf4ec59c2895fe9a80cca45b517734106a', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'd34205cf5be5d6815608bf7a2791e7c159cd2166', show: this.hasError }, h("slot", { key: '213e706a54a8651c3bb7cdcaf94f00a9f30aafe6', name: "error" })), h(GuxFormFieldHelp, { key: 'b55428378780dece7d43fcf879dda30415b5ed91', show: !this.hasError && this.hasHelp }, h("slot", { key: '4a0b845c87da629bd806f76011e917fc8def2b92', name: "help" })))));
+    }
+    get variant() {
+        const labelPositionVariant = this.labelPosition
+            ? this.labelPosition.toLowerCase()
+            : 'none';
+        const clearableVariant = this.clearable ? 'clearable' : 'unclearable';
+        return `${clearableVariant}-${labelPositionVariant}`;
+    }
+    setInput() {
+        this.input = getSlottedInput(this.root, 'input[type="number"][slot="input"]');
+        this.hasContent = hasContent(this.input);
+        preventBrowserValidationStyling(this.input);
+        this.input.addEventListener('input', () => {
+            this.hasContent = hasContent(this.input);
+        });
+        this.disabled = calculateInputDisabledState(this.input);
+        this.required = this.input.required;
+        this.disabledObserver = onInputDisabledStateChange(this.input, (disabled) => {
+            this.disabled = disabled;
+        });
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
+            this.required = required;
+        });
+        validateFormIds(this.root, this.input);
+    }
+    setLabel() {
+        this.label = this.root.querySelector('label[slot="label"]');
+        this.computedLabelPosition = getComputedLabelPosition(this.label, this.labelPosition);
+    }
+    renderStepButtons(input, getI18nValue, disabled) {
+        return (h("div", { class: "gux-step-buttons-container" }, h("button", { class: "gux-step-button", tabIndex: -1, type: "button", title: getI18nValue('increment'), disabled: disabled, onClick: () => this.stepUp(input) }, h("gux-icon", { "icon-name": "custom/chevron-up-small-regular", decorative: true })), h("button", { class: "gux-step-button", tabIndex: -1, type: "button", title: getI18nValue('decrement'), disabled: disabled, onClick: () => this.stepDown(input) }, h("gux-icon", { "icon-name": "custom/chevron-down-small-regular", decorative: true }))));
+    }
+    stepDown(input) {
+        if (input.value === '') {
+            setInputValue(input, input.min || '0', false);
+        }
+        else {
+            input.stepDown();
+            this.simulateNativeInputAndChangeEvents(input);
+        }
+    }
+    stepUp(input) {
+        if (input.value === '') {
+            setInputValue(input, input.min || '0', false);
+        }
+        else {
+            input.stepUp();
+            this.simulateNativeInputAndChangeEvents(input);
+        }
+    }
+    simulateNativeInputAndChangeEvents(input) {
+        simulateNativeEvent(input, 'input');
+        simulateNativeEvent(input, 'change');
+    }
+    static get delegatesFocus() { return true; }
+    get root() { return getElement(this); }
+};
+__decorate$1([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldNumber.prototype, "onMutation", null);
+GuxFormFieldNumber.style = GuxFormFieldNumberStyle0;
+
+const guxPaginationEllipsisButtonCss = "gux-button gux-icon{inline-size:var(--gse-ui-icon-small-size);block-size:var(--gse-ui-icon-small-size);padding-block-start:4px}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield}";
+const GuxPaginationEllipsisButtonStyle0 = guxPaginationEllipsisButtonCss;
+
+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;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const GuxPaginationEllipsisButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.goToPage = createEvent(this, "goToPage", 7);
+        this.isOpen = false;
+        this.totalPages = undefined;
+        this.disabled = false;
+    }
+    handleKeyDown(event) {
+        const composedPath = event.composedPath();
+        switch (event.key) {
+            case 'Escape':
+                this.isOpen = false;
+                this.ellipsisButton.focus();
+                break;
+            case 'Tab': {
+                this.isOpen = false;
+                break;
+            }
+            case 'ArrowDown':
+            case 'Enter':
+                if (composedPath.includes(this.ellipsisButton)) {
+                    event.preventDefault();
+                    this.isOpen = true;
+                    this.focusInputElement();
+                }
+                break;
+        }
+    }
+    handleKeyup(event) {
+        switch (event.key) {
+            case ' ': {
+                const composedPath = event.composedPath();
+                if (composedPath.includes(this.ellipsisButton)) {
+                    this.isOpen = true;
+                    this.focusInputElement();
+                }
+                break;
+            }
+        }
+    }
+    watchIsDisabled(newValue) {
+        if (newValue) {
+            this.isOpen = false;
+        }
+    }
+    toggle() {
+        this.isOpen = !this.isOpen;
+        if (this.isOpen) {
+            this.focusInputElement();
+        }
+    }
+    onClickOutside() {
+        this.isOpen = false;
+    }
+    focusInputElement() {
+        afterNextRender(() => {
+            this.inputElement.focus();
+        });
+    }
+    applyInputListener() {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', (event) => {
+            const inputValue = event.target.value.trim();
+            if (event.key == 'Enter' || event.key == ' ') {
+                if (inputValue == '') {
+                    event.preventDefault();
+                }
+                else {
+                    event.preventDefault();
+                    this.goToPage.emit(event.target.value);
+                    this.isOpen = false;
+                }
+            }
+        });
+    }
+    async componentWillLoad() {
+        this.i18n = await buildI18nForComponent(this.root, translationResources, 'gux-pagination-buttons');
+        trackComponent(this.root);
+    }
+    componentDidLoad() {
+        this.applyInputListener();
+    }
+    render() {
+        return [
+            h("gux-button", { key: '258495300f80e1f80f3e8706e6fc83f315f7d572', 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() }, h("gux-icon", { key: '56dcd682abb12400d7fb2306acc2534a1c1d91b8', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })),
+            h("gux-tooltip", { key: 'f1e5e9f7d68b791864ef041f5f577ca0a9634465', for: "popover-target" }, h("div", { key: '746905e11b254b8e96468ba65de519b503dc6f52', slot: "content" }, this.i18n('goToPage'))),
+            h("gux-popover", { key: '98a2530f626de66abe173c88a1f84a29e7e5b25d', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: '720755b6d126370abf68d1d3cdca76be2c638dc0', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: '598923bb82a35dd5f17511e23fe5d7347e5bede8' }, h("input", { key: '2a03837e242b6524e4c6cb0687c25e321fff0d59', 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() }), h("label", { key: 'd43aa39ae19743596a7d3d7d1f640917b7a8b264', slot: "label" })))
+        ];
+    }
+    get root() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchIsDisabled"]
+    }; }
+};
+__decorate([
+    OnClickOutside({ triggerEvents: 'mousedown' })
+], GuxPaginationEllipsisButton.prototype, "onClickOutside", null);
+GuxPaginationEllipsisButton.style = GuxPaginationEllipsisButtonStyle0;
+
+export { GuxFormFieldNumber as gux_form_field_number, GuxPaginationEllipsisButton as gux_pagination_ellipsis_button };

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

@@ -2,7 +2,7 @@ import { r as registerInstance, h, g as getElement } from './index-feb7be20.js';
 import { b as buildI18nForComponent } from './index-6fa3d266.js';
 import { O as OnMutation } from './on-mutation-0160ea8e.js';
 import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-change-f42eabee.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-6b73f582.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
@@ -98,14 +98,14 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '33fe0fc8c809b55349fa51aa7d80a285a2788edd', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'eb56dd16bd5820f58481ac506e9aa5001ec470f7' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '074c11f16f051c6f00198989c73e265fbc76e28f', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'e8fc15414ce78419b8f5556b25575799eab4501c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '075f6120f5985fcbac369b15e6d4d3890547022b', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'c08bbf1c0247f0cec8f13d7dbfc8a1f189c17c58', name: "label-info" })), h("div", { key: '4f73ec6078aa6cf796b9c9d8fcbe23bed8a39c72', class: "gux-input-and-error-container" }, h("div", { key: 'f9b6da0b9a11f8af494846f09b0d3640e1919112', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'b4ab6ded3d06cdbe6013533fe6e66fb8a0d7e959', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '7e8770fe64aa2ccad7f39abba8779c48ff4c9ce2' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'ed26f0594ee1620528280279c0224a8dec16e8f8', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '28d1172b152fd9a23e1a67c3f5548908169a0f67', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '078b0061f4b2bd2b645723685ea5544cc241e1be', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'bfe2d61ab954d3db6db9325e0c0b5fe737da8e57', name: "label-info" })), h("div", { key: '2f72143c66756d7b62de182e703e413f72c676c6', class: "gux-input-and-error-container" }, h("div", { key: '49fb490b08a621c5e6c8952c0f4e9ed6825e02b2', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '9ed48adf358623e4175e30e32b00c59be6df02bd', class: {
+            } }, h("div", { key: '2b531ea8e07b950bd47394baf0cf7a03750a050a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '9d648cc3ae68f9cb2f7ab93e1fc829cbe083ad06' }))), h(GuxFormFieldError, { key: '22296a416c1da45479a209608c1f48ccbd529244', show: this.hasError }, h("slot", { key: '5deb14f2838dcaaca697cfd3aa091bc263c8128e', name: "error" })), h(GuxFormFieldHelp, { key: '47c4d90105b9b46c8a856173b41a61b9d00ef19f', show: !this.hasError && this.hasHelp }, h("slot", { key: '039f3beaa6aebf7415c1d16be0a633ac406f4b17', name: "help" })))));
+            } }, h("slot", { key: '83e25848d17cc1140a9ba017818eaeb74bb15f6f' }))), h(GuxFormFieldError, { key: '4e2812c595f717faff7c77c7ea157588d863c85f', show: this.hasError }, h("slot", { key: '0313ae1d6ad56a14d00563c1f154dfad3e2c8d40', name: "error" })), h(GuxFormFieldHelp, { key: '23ca0fd41588a0543cd1aba80a314461c739e25f', show: !this.hasError && this.hasHelp }, h("slot", { key: 'ba096bf423d9ae62ec17662bf2d35dd3f4aac4f1', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

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

@@ -5,7 +5,7 @@ import { b as buildI18nForComponent } from './index-6fa3d266.js';
 import { G as GuxFormFieldHelp, a as GuxFormFieldError } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-6b73f582.js';
 import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import './get-closest-element-728b9f18.js';
 
 const required = "Required";
@@ -109,8 +109,8 @@ const GuxFormFieldRadioGroupBeta = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '901bbf005bca412c1a435e535583155725ed5296', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '1d6bf900cc576bfee106b073afe09f0a97022d87' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '21ee4f534fff08e51dae8030faa8a1d78226f2fb', position: "above", required: this.required }, h("slot", { key: '0afa63140278375301a0de0263055195008662f9', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'dd422f39ad5e082ab184350265f37c678cf06b68', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3b2fe0b59bdd8591a08ea076280aa57a28c10b3a', name: "group-label-info" })), h("slot", { key: 'ee6540334797f3c1982f5af98e445c5b0a7c4531' }), h(GuxFormFieldError, { key: '0158fec3eee96f854076c57bb20b9f893697d6e7', show: this.hasGroupError }, h("slot", { key: '8c2a42b6fc072fe4d16d25d2f4f79c9f7dffed45', name: "group-error" })), h(GuxFormFieldHelp, { key: '9a40da4a5449db9784e3fd656b9611c31c9f7fea', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '7c2cbec4c5e3bc907eb3782f2af38a24589cab29', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '8646d0b536f9fa77a62cb72d22a574132c569d76', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '1b328bd383b62b0f0776bc15b5ec16472ec468bd' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '19d74f17c38c7e10c3aea107f9c0111874bcc918', position: "above", required: this.required }, h("slot", { key: 'c4bf7222ed7c1607257baa0a81d2e565a280a644', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'bab75d7afa7348004d0448a6e994aa4ec05dd958', variant: this.indicatorMark, required: this.required }), h("slot", { key: '2e0de2aa4c82f1533bac8087f6c5f186f33251af', name: "group-label-info" })), h("slot", { key: '2331499f77ea40ba7ef38ff275840718ce28c0fa' }), h(GuxFormFieldError, { key: '91bfd5f14aed331e7c5543bda4b318541ba390fa', show: this.hasGroupError }, h("slot", { key: '4ec2134e3b722b51cc00ca4fad8979237ffc42cd', name: "group-error" })), h(GuxFormFieldHelp, { key: 'a5c27963c7bcefd352e312660b6c8ef23b8d0096', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '7517b64af6c049abc4081eb2f4dea1d043e88e71', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -5,7 +5,7 @@ import { p as preventBrowserValidationStyling } from './prevent-browser-validati
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
 import './simulate-native-event-e0631897.js';
@@ -48,10 +48,10 @@ const GuxFormFieldRadio = class {
         }
     }
     render() {
-        return (h(Host, { key: '49ef8bdb9e7268f6ed72d138596e30d2942df483', class: {
+        return (h(Host, { key: 'fed96c8c49406e71ae3bb7b116afb2c0591f6b81', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '6a26a205570eb6ff11e77f81d01d44261d21e072', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'b77bc44125eaa97141430489ac2eb184ba7df709', class: "gux-input-label" }, h("div", { key: 'd4186aef6e7b7a0ebfe645344d5a745e16cc9614', class: "gux-input" }, h("slot", { key: '2fc89568cc4659ff4838799e5278baa273085d2a', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '61ff648660ef9c6c37ebdea28bbb35d7f6c14d0e', class: "gux-label" }, h("slot", { key: '6ff9554ebb06ff5c11b68b784b24a834dc7837e5', name: "label" }))), h("div", { key: 'ac51eb19dfe44b8069ce7e29edb9e97073d8c75f', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '6d27501b269cad64a8c4f1fb78545a5c6e512254', show: this.hasError }, h("slot", { key: 'bada69224c02868f8541a2895218fb392cc46d59', name: "error" })), h(GuxFormFieldHelp, { key: 'a3d3221e309a5c891ac5beb1c50ed3f8cddfbb86', show: !this.hasError && this.hasHelp }, h("slot", { key: '7794ca8ee2cc4b82d761c37e2868ff0a776864cd', name: "help" }))))));
+            } }, h("div", { key: '2914da86215007f985b046af492ca8314a081c84', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '24b4774de5f4fd92202bd97d06a01c6b47a48d4b', class: "gux-input-label" }, h("div", { key: '52c2cd0df939bb58fcdb45c05f7bf22b02693874', class: "gux-input" }, h("slot", { key: '416b6efb605f2ef8818cd836b4d1ea41d457101a', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '7773dcff902ee4c96c67c37c348b031f6c12a67a', class: "gux-label" }, h("slot", { key: '38784500d1703c5766657214c1a05312f004bd3b', name: "label" }))), h("div", { key: '3251d742977c72cbcdd62702faeaa45d840ce8fd', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '90220712c3b8ec0a63b7fff0502ccdd086a21033', show: this.hasError }, h("slot", { key: '8dc4388036c1800950c438af3dc337aef6ee7ba0', name: "error" })), h(GuxFormFieldHelp, { key: '7f9741c57918a12c8342a45a79d27462ed00ffab', show: !this.hasError && this.hasHelp }, h("slot", { key: '40c2560f8cc8fbc733e881d0307e465efa5bff7a', name: "help" }))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

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

@@ -7,7 +7,7 @@ import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { a as GuxFormFieldContainer, G as GuxFormFieldLabel } from './gux-form-field-container-3b76ab09.js';
 import { g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import { O as OnResize } from './on-resize-324dd7f4.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -115,9 +115,9 @@ const GuxFormField = class {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: '10dc378e629a8849da1a892210e7958a8470ce43', class: {
+        return (h(Host, { key: '02099beaaeb4945b00855e08ebf2fa454ae4afee', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '9d46076ea44be2971e14250654b2f40cd0df0677', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'c55006d31378d6a1643f039f2cfa4bd55311bea9', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'e48fdca477e8261992afc9430d0f4f005d0746b7', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'a75ef1657cd9618109dcfebc0130feb99897c17a', variant: this.indicatorMark, required: this.required }), h("slot", { key: '43cfbcbfa92a4a05b2686ddc214e1807b7cd721a', name: "label-info" })), h("div", { key: 'd43b71f759820db1bf395db7c22e304c5c8d268e', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '2c250ef63c41033ab24925ab4d24b2492c9d2927', show: this.hasError }, h("slot", { key: '4ecfa3f9770e5f483d3676f32b631f814025d35d', name: "error" })), h(GuxFormFieldHelp, { key: 'acfe671b39a300314b9fd8d139ab028a20495b29', show: !this.hasError && this.hasHelp }, h("slot", { key: '2b220e6169e6ec487705a6047137f2c7536be970', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: 'f4489a7dd9336025587ce549b071f5573d43e5db', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '15fc734b4e3ae3f6bc8d4c64e71a86138d244491', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f7e238bbb6024496fe86b8be6aaf253072504a10', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b6d29541f18996f54a031df06dc1978aa73997d8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '6deee026027198297109bf4b9330c8b7f3808156', name: "label-info" })), h("div", { key: '236a128611adab8603ca027a3e4f1ab6c981fb96', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '90984e8e3e4505ded924b06fee25becd1b8b83d8', show: this.hasError }, h("slot", { key: 'a220b4b923acee2e436bb9dfc06f70b5ec4a9ea1', name: "error" })), h(GuxFormFieldHelp, { key: 'dbbc319d2ef70283687cf108e65a8d9c0ff215ed', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b6f51b36cf7192450981b6fa65cd36d92be49185', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -7,7 +7,7 @@ import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3b76ab09.js';
 import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import { f as focusInputElement } from './focus-input-element-8a137b12.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -95,13 +95,13 @@ const GuxFormFieldSearch = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '4a9ef410dae67b430409d3ecd7143f779d5d6d76', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '23f4292311d8d4d09cc9abd8ea410c564189feb6', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '0a8392e9de5c4c107219340946c5d986b14a0e79', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'a5485bcf989d6cee36f56f38df6e3779097b3c9b', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3bd66abfbaabd6154769732b10ec2a0234e168f6', name: "label-info" })), h("div", { key: '0824538640f07a080d7feabb9bd380d08fee6fec', class: "gux-input-and-error-container" }, h("div", { key: '7b56736d1214a53dd52d9f71bf5557a1e212144d', class: {
+        return (h(GuxFormFieldContainer, { key: '1a4242f3b735fc0d5cd819f42c47b629d97442b4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '04d15a249db7ed6f8cc1bd742a281248e675f467', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '231ecc5e1d442068a32785ffc72830a8d017cb00', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f2d923c0a0114c75b2ad90f80b7775ffe93b6f24', variant: this.indicatorMark, required: this.required }), h("slot", { key: '929c36b2473641e4049679c77266e83b1ee0e138', name: "label-info" })), h("div", { key: 'ad0a4389b375d749a42eb068a3544c5aa25877a7', class: "gux-input-and-error-container" }, h("div", { key: 'f5b1c31aeafce11a66b9ba3525677b45ddf7207c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'a34519a64680d176ea13b2084b394f807021ca44', class: {
+            } }, h("div", { key: 'cff2837d655fde12182fccf58997d734e30941f3', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '6609df36d361839721fb45ab6252664697587cef', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '99167c46f703671d1d9985100e39e8d9844a28ce', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '9f31a3d43b814c8d150d2a0b7a6bd829e953d163', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'adf9c25f7529abbd1138ba954905ea6365c13f1b', show: this.hasError }, h("slot", { key: '88533ba9ae394f9d3d61213d8d1856abd370850b', name: "error" })), h(GuxFormFieldHelp, { key: '775b434f3eb50601ab4379ba3fae1fa28cbc3f08', show: !this.hasError && this.hasHelp }, h("slot", { key: '79df589a292ea5da8a717fecd029085e445625ff', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: 'd349b5ea69f440c1b63a99e4678fab3f67aaea47', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '2b31ffb30dffc2baa771033bc0832365e754851d', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '9306432483b8017a0baa5ffa212c5d8dafddee51', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '09e84078aaa9ee132a295a38567352e677cd28a9', show: this.hasError }, h("slot", { key: 'd7db374229d352d3fca1e5fd5153a7037817c44e', name: "error" })), h(GuxFormFieldHelp, { key: '7284f02292dd146a12daf28f0ba36ac2a5c17978', show: !this.hasError && this.hasHelp }, h("slot", { key: '087be384f47d40659191dc5e82a36ceac9e7bf6c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -7,7 +7,7 @@ import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3b76ab09.js';
 import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
 import './simulate-native-event-e0631897.js';
@@ -85,13 +85,13 @@ const GuxFormFieldSelect = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'b928031f683999046e3cc9bed38ad760c236e9e9', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'e07c87117a539fecf347b8edb8ca56fa1dd54a7e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '7289cde4c59f1fe8b1e28356d9cb721305ae8fe9', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '205d12d026049867610b2bf5a700aa6a1c1d35c2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '07d62929f16393fde084434f488889ef97ffeca5', name: "label-info" })), h("div", { key: '542540171c3e6ce101e974707c36d44b827884cd', class: "gux-input-and-error-container" }, h("div", { key: '9486afc4de383775409ec2b9d126798a03deda29', class: {
+        return (h(GuxFormFieldContainer, { key: '797587c3df23fbcdfa8057399915683ff4c83e0a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'c3127414aa313f2f69b17166a4fbb02140646c71', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '9a821346a11df2e01111912ba2ff6469478fe1d0', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '34ef7dc053274eb6e6d13a83d947f4c534f87b75', variant: this.indicatorMark, required: this.required }), h("slot", { key: '139768502d5fa8a95eb232ee31e9cd4925cb3296', name: "label-info" })), h("div", { key: 'f647a57c95e3744e36e81fe3c0f2a649c5e5342e', class: "gux-input-and-error-container" }, h("div", { key: 'fdfbc4d44aa46694928aa26839519bdf0fd08c69', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '6a05e35a061b711b3edb8bec261223aa0a4ae335', class: {
+            } }, h("div", { key: 'd8a672ae13c1b23876cf62f77127d6b9a1f5f372', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '7d2a610b542a165fac36caf3f737c38b1af844b2', name: "input" }), h("gux-icon", { key: '15be1be18f83f14f23555df075a4c2f35f52d813', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '751b065232ef2e12cc98b897fc6cf07edafdfb11', show: this.hasError }, h("slot", { key: '4ff01e5d20eb7fcc1079116bc813fd4d2d0d18c2', name: "error" })), h(GuxFormFieldHelp, { key: '2d78511124551d897983bc577cf0f0da3cef02f3', show: !this.hasError && this.hasHelp }, h("slot", { key: '14890b954cea5d3452bf1a1352224ee6d36a5324', name: "help" })))));
+            } }, h("slot", { key: '8b4c9ed83fb78e472f5dad00c6b4497528249769', name: "input" }), h("gux-icon", { key: '73bdba1572f9f648f2563169a35a7e41f6dafeac', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'b456395f95f07a0e2277c3561f3e1e0fa866b237', show: this.hasError }, h("slot", { key: '3672109e8950e05ad2a4df7f6e7191e63a2e55f1', name: "error" })), h(GuxFormFieldHelp, { key: 'fd815ad74300866113603ed10bf11f16b8428d4c', show: !this.hasError && this.hasHelp }, h("slot", { key: '13744e182709909834074d4f00c17b95e0d6dcec', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -7,7 +7,7 @@ import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3b76ab09.js';
 import { h as hasContent, b as setSlotAriaDescribedby, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import { f as focusInputElement } from './focus-input-element-8a137b12.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -111,15 +111,15 @@ const GuxFormFieldTextLike = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '4bfc2c90ceda36b591173fb005c270f212c519f4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '6cb86ea988e2381b54fd73c257702b4cb4833393', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '6aae331a3446da315706bf381a6943fbceed9695', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6c13dbbd39696396243fc84221d24f8adb612d88', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'd7d696dd7029f2ef13b571434ff2e2c4b9ae44ee', name: "label-info" })), h("div", { key: '4adebc576047a0b0df4bec53e8d0e520c28caccc', class: "gux-input-and-error-container" }, h("div", { key: 'b3c47ca1858946defb5c5bf0a5e96eefc45bb287', class: {
+        return (h(GuxFormFieldContainer, { key: '1ca223257c2c32f7d9b4916ba256271dd5b1d078', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '891622b154066f89ef432137514222bdb0c7b8cd', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '07ebbf4da32bfb7c043bae5db05a3a0d86117873', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2cf8c5e3c5f12d028ece1309a7817f667b06c265', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1f9b6aaf0a37c44792af82940545e92c97834c64', name: "label-info" })), h("div", { key: 'fb69f8031c90def7c837b9d78742bcbf61550c27', class: "gux-input-and-error-container" }, h("div", { key: 'ff2d9d7e483c05e625893a0f5850982cdd92c55b', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '66923b721b025485284a666eeabda9d8ddf38a8f', class: {
+            } }, h("div", { key: 'd449698a1223c5d827a07761385d16c72cbdd89a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '6d30e93d1772b718346d6335e23e9f38b812419a', name: "prefix" }), h("slot", { key: '449f84eb06fa74a0fd1acaa33ff016b1ec45f550', name: "input" }), this.renderRadialLoading(), h("slot", { key: 'b3b67a15ecf829a143f052f51f1c95fb2d3e04ce', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'c8869108f24091264f38748e2d3f41846cd7291d', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'ad45607c9fd01891cd0023959a5b5de5213e741f', show: this.hasError }, h("slot", { key: '52f46539c187533b54522b185bb5ba084c52e70a', name: "error" })), h(GuxFormFieldHelp, { key: 'f91d1eb88f117e1cbe451b23565921b9dad0710b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'c907e53165909fea45e0d4cca3aed992dada7a6b', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '7cdc2f7fa447aef0e718d3dea1c217b05738fec0', name: "prefix" }), h("slot", { key: 'e54caf74962d08fcdddaff8b8608c3d6e943bbdd', name: "input" }), this.renderRadialLoading(), h("slot", { key: '05332b5ca75369f96ee6ebbd57a3f44a6050c3fa', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'dbcef6499ddde4169e89c920c5a021dc1a375362', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '5527c143efb4e9e4bb97ffbd52d407c7c86b3864', show: this.hasError }, h("slot", { key: '532d5e81c1a39cab499766e7fc5951195c092dd5', name: "error" })), h(GuxFormFieldHelp, { key: '7f7e8243c8b23da439f373250e2d86f030774433', show: !this.hasError && this.hasHelp }, h("slot", { key: '633bccea0610149a1efdb19c9ec7098f33412eb7', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -7,7 +7,7 @@ import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-3b76ab09.js';
 import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
 import './simulate-native-event-e0631897.js';
@@ -89,12 +89,12 @@ const GuxFormFieldTextarea = class {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '5b34e63a46e08d10f6ebeb0adffc4abd6c5a3316', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '41d08e265a0c6686565b73954a8ff3ef32bc7ada', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'eea924a17613c05b476eed2ab63f8d14300cc194', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '4aab859ba4d3aa0d14515088c952b6143c09e967', variant: this.indicatorMark, required: this.required }), h("slot", { key: '06917fe2c3762228680974025a7f5e96f3aeaef8', name: "label-info" })), h("div", { key: '1e8a15c09b26292e96ba0383b9394f84e34c1783', class: "gux-input-and-error-container" }, h("div", { key: '25642be5f42cf493be10d5f4605498709c52e43b', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '71c1de67f1dad119124c1ea356bde10e1ffb4db0', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8aaa07ae0d057d127da790e50de4c0137a245e12', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ef0ecd2bb3ea150200fecf39e5b0b7cb1642ed66', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '29c6d2afff6c7c609847ee8a5041f20213418b4d', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'ff98ef2722dae089385c3077e31284295f0a6109', name: "label-info" })), h("div", { key: '8cd8ec697f2146824987c2abdac1b0ad899dde68', class: "gux-input-and-error-container" }, h("div", { key: '79400572c06fd09c9be0f7a4b369d07d3378f23f', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '1e26b96af64062705a868d7f955329f88476bab9', name: "input" })), h(GuxFormFieldError, { key: '20110fdd5362b4609e174e4b06a160a67279e705', show: this.hasError }, h("slot", { key: '2576e35ea5b98b138dd26d48aa4014fcd7b9de9a', name: "error" })), h(GuxFormFieldHelp, { key: '4064c18cec6fb21db59a8198e387cd729b0a53a0', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b7e2865905fc2c37dbc8f84d7a1406756cf0458c', name: "help" })))));
+            } }, h("slot", { key: '2ed962f8388a011018e8ba93ba6ee5fec6a48470', name: "input" })), h(GuxFormFieldError, { key: '3747d415a3c4995c0b6eaed34b89090b9c16344f', show: this.hasError }, h("slot", { key: 'f98acba360c20d9dc59a8f90a51aa3bbdfa06cbc', name: "error" })), h(GuxFormFieldHelp, { key: '277819ef5cabb623ab5fd4d1d051f7d076e44abf', show: !this.hasError && this.hasHelp }, h("slot", { key: 'bd9e7d80cee978682a679254c712451bdec390fe', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -7,7 +7,7 @@ import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
 import { a as GuxFormFieldError, G as GuxFormFieldHelp } from './gux-form-field-error-453cd4f0.js';
 import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-6b73f582.js';
 import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-986d3f3f.js';
-import { t as trackComponent } from './usage-44795045.js';
+import { t as trackComponent } from './usage-8ab524c4.js';
 import './get-closest-element-728b9f18.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -100,14 +100,14 @@ const GuxFormFieldTimePicker = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'e0d005546fc236e48253b7a60ba7f2f06a87e01f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'af36d71fc2935031209502122e62d3abfea194e4' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'e2f28c1ce391f60927935424b19b4b3efa3092d3', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '1d14f473ba0b168308e4477d776fe0ae387810e3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3138164f5645e1cad9ab99985875c5dd86c9837f', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'fb893658b774944a45287f6ffc3ec6aaf52eabc1', name: "label-info" })), h("div", { key: '3a067b1088e58ccdc7a69eed3caac2968fcee041', class: "gux-input-and-error-container" }, h("div", { key: '77d0a872f46fb8d14e35c8524053ccede8d5db94', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '05621a679b25141ff91bb3d7ff3ca4cac027078a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'ba4177cf79d77a641a5f9b687b09cff6c544f45d' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '169c24a296e2f9dc100bcf3b5305912aa9bce7d0', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ea7ddcac1cc2736eca597d4b165ad1c69860aa36', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e72016b0d3c2d00b4906c76e0b2f41afdd933df3', variant: this.indicatorMark, required: this.required }), h("slot", { key: '501f4c28dcad1f70144d7d3fa53f7d2047be446f', name: "label-info" })), h("div", { key: '6aeb95debef3d5e92c8f863c2898377a9c8a6ea7', class: "gux-input-and-error-container" }, h("div", { key: '109c62b4a4b99f70367d07d8fd9bfccabdd9c8b3', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'cad69e2af1d02afd89d5b62499795cff2b096390', class: {
+            } }, h("div", { key: '972de3bd25423f7e916d9d582fab90f2a3a3b88c', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '01334d392a9a831356dd8214ff166cccd98657c9' }))), h(GuxFormFieldError, { key: '1bd038f5ba05f3b5f47cafe712bf053851495a2b', show: this.hasError }, h("slot", { key: '4acc3c861298a007455eaa49d29999da5a0d0d75', name: "error" })), h(GuxFormFieldHelp, { key: '8f773c3a3e35f431aaaedae563f0e2568fc8404c', show: !this.hasError && this.hasHelp }, h("slot", { key: 'ba238f4f3007537411dfe30d57eee0ec307e37a1', name: "help" })))));
+            } }, h("slot", { key: '2b7a9076c3979b02f332a408573e610b93b96920' }))), h(GuxFormFieldError, { key: 'a88874caef02df2d1feeaf38c6e421deb46b1f03', show: this.hasError }, h("slot", { key: 'f52be1d006a3e58c26381457b121876e73b51811', name: "error" })), h(GuxFormFieldHelp, { key: '65a5f764e7cd5177551217cd784f620d7592e4c0', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd10b7047d800d06e120cbf505b07ea1ec015890f', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {