genesys-spark-components 4.115.1 → 4.117.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/gux-form-field-file.css

@@ -0,0 +1,159 @@
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */
+.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;
+  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);
+}
+
+.gux-input-and-error-container {
+  flex-grow: 1;
+}
+
+.gux-drop-container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  gap: var(--gse-ui-fileUpload-dragDrop-btnText-gap);
+  margin-block: var(--gse-ui-fileUpload-mainContainer-gap);
+  margin-inline: 0;
+  font-family: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontFamily);
+  font-size: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontSize);
+  font-weight: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-fontWeight);
+  line-height: var(--gse-ui-fileUpload-dragAndDrop-dropZone-text-lineHeight);
+  color: var(--gse-ui-fileUpload-dragAndDrop-dropZoneText-color);
+}
+.gux-drop-container.gux-drop-zone {
+  place-content: stretch center;
+  align-items: center;
+  min-block-size: var(--gse-ui-fileUpload-dragAndDrop-dropZone-minHeight);
+  padding: 20px;
+  border: var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-width) var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-style) var(--gse-ui-fileUpload-dragAndDrop-dropZone-default-border-color);
+  border-radius: var(--gse-ui-fileUpload-dropZone-borderRadius);
+}
+.gux-drop-container.gux-drop-zone.gux-drag-over:not(.gux-disabled) {
+  background-color: var(--gse-ui-fileUpload-dragAndDrop-dropZone-background-active);
+  border: var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-width) var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-style) var(--gse-ui-fileUpload-dragAndDrop-dropZone-active-border-color);
+}
+.gux-drop-container.gux-drop-zone.gux-disabled {
+  border-color: rgba(0, 0, 64, 0.2509803922);
+}
+.gux-drop-container.gux-drop-zone.gux-disabled .gux-drag-and-drop-text {
+  opacity: 0.5;
+}
+
+.gux-offscreen {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
+.gux-proxy-button {
+  inline-size: fit-content;
+  border-radius: var(--gse-ui-button-borderRadius);
+}
+
+.gux-proxy-button:focus-within {
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
+}
+
+.gux-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gse-ui-fileUpload-fileCard-cardGroup-gap);
+  inline-size: 100%;
+}

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/gux-form-field-file.js

@@ -0,0 +1,296 @@
+var __decorate = (this && this.__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;
+};
+import { h, forceUpdate } from "@stencil/core";
+import { buildI18nForComponent } from "../../../../../i18n";
+import { OnMutation } from "../../../../../utils/decorator/on-mutation";
+import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+import { GuxFormFieldError, GuxFormFieldContainer, GuxFormFieldHelp, GuxFormFieldLabel } from "../../functional-components/functional-components";
+import { getSlottedInput, validateFormIds } from "../../gux-form-field.service";
+import { preventBrowserValidationStyling } from "../../../../../utils/dom/prevent-browser-validation-styling";
+import { onDisabledChange, onRequiredChange, onMultipleChange } from "../../../../../utils/dom/on-attribute-change";
+import simulateNativeEvent from "../../../../../utils/dom/simulate-native-event";
+import componentResources from "./i18n/en.json";
+/**
+ * @slot input - Required slot for input tag
+ * @slot label - Required slot for label tag
+ * @slot error - Optional slot for error message
+ * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for tooltip
+ */
+export class GuxFormFieldFileBeta {
+    constructor() {
+        this.indicatorMark = 'required';
+        this.dragAndDrop = false;
+        this.disabled = false;
+        this.hasError = false;
+        this.hasHelp = false;
+        this.required = 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);
+    }
+    onGuxRemoveFile(event) {
+        this.removeFile(event.detail);
+    }
+    async componentWillLoad() {
+        this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
+        this.setInput();
+        this.hasError = hasSlot(this.root, 'error');
+        this.hasHelp = hasSlot(this.root, 'help');
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
+        trackComponent(this.root);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.disabledObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.requiredObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    }
+    render() {
+        return (h(GuxFormFieldContainer, { key: '00c36efa4405c0b5a91f862cb01ec2b8a71046ec', labelPosition: "above" }, h(GuxFormFieldLabel, { key: '70256247ed84be23f88ae9bb38c49269b171ccf8', position: "above", required: this.required }, h("slot", { key: 'd533077057b2e9ba5a7d93db92227b370ca01958', name: "label" }), h("gux-form-field-label-indicator", { key: 'e97db53e8a57d4788e362145ead6edf1d06c6856', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3404533998a709fe4de78b3d4acaf769892ae6a0', name: "label-info" })), h("div", { key: 'a76911d55098f00f1d3ad972aab42d9a4670328f', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: '97d13f4d962563a6128a18f06d70b5adc830d0ee', show: this.hasHelp }, h("slot", { key: '15db9f5259d63b803cf34cb8d82974e79f2c7328', name: "help" })), this.renderInputSlot(), this.renderFileList(), h(GuxFormFieldError, { key: '7160af25b00b911a46598cc694c27abf9cddef9f', show: this.hasError }, h("slot", { key: '9cad5228cefbff40f83f7a3657927421d64900ee', name: "error" })))));
+    }
+    setInput() {
+        this.input = getSlottedInput(this.root, 'input[type="file"][slot="input"]');
+        this.input.addEventListener('input', () => {
+            forceUpdate(this.root);
+        });
+        preventBrowserValidationStyling(this.input);
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onDisabledChange(this.input, (disabled) => {
+            this.disabled = disabled;
+        });
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
+            this.required = required;
+        });
+        this.multipleObserver = onMultipleChange(this.input, () => {
+            forceUpdate(this.root);
+        });
+        validateFormIds(this.root, this.input);
+    }
+    getDropZoneText() {
+        if (this.input.multiple) {
+            return this.getI18nValue('dragAndDropFilesInstructions');
+        }
+        else {
+            return this.getI18nValue('dragAndDropFileInstructions');
+        }
+    }
+    getProxyButtonText() {
+        if (this.dragAndDrop) {
+            return this.getI18nValue('clickToUpload');
+        }
+        else if (this.input.multiple) {
+            if (this.input.files.length > 0) {
+                return this.getI18nValue('changeFiles');
+            }
+            return this.getI18nValue('uploadFiles');
+        }
+        else {
+            if (this.input.files.length > 0) {
+                return this.getI18nValue('changeFile');
+            }
+            return this.getI18nValue('uploadFile');
+        }
+    }
+    removeFile(index) {
+        const fileList = this.input.files;
+        const dt = new DataTransfer();
+        for (let i = 0; i < fileList.length; i++) {
+            if (index !== i) {
+                dt.items.add(fileList[i]);
+            }
+        }
+        this.modifyInputFiles(dt.files);
+    }
+    modifyInputFiles(files) {
+        this.input.files = files;
+        simulateNativeEvent(this.root, 'input');
+        simulateNativeEvent(this.root, 'change');
+        forceUpdate(this.root);
+    }
+    onProxyFileButtonClick(event) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        this.input.focus();
+        this.input.click();
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.disabled) {
+            return;
+        }
+        const currentFileList = this.input.files;
+        const newFileList = event.dataTransfer.items;
+        const dt = new DataTransfer();
+        for (let i = 0; i < currentFileList.length; i++) {
+            dt.items.add(currentFileList[i]);
+        }
+        for (let i = 0; i < newFileList.length; i++) {
+            const item = newFileList[i];
+            if (item.kind === 'file' && item.webkitGetAsEntry().isFile) {
+                dt.items.add(item.getAsFile());
+            }
+        }
+        this.dropContainer.classList.remove('gux-drag-over');
+        this.modifyInputFiles(dt.files);
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.dropContainer.classList.add('gux-drag-over');
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.dropContainer.classList.remove('gux-drag-over');
+    }
+    renderFileList() {
+        const files = Array.from(this.input.files || new DataTransfer().files);
+        if (files.length === 0) {
+            return null;
+        }
+        return (h("div", { class: "gux-file-list" }, files.map((file, index) => {
+            return (h("slot", { name: `file-${index}` }, h("gux-file-list-item", { name: file.name, index: index, disabled: this.disabled })));
+        })));
+    }
+    renderInputSlot() {
+        return (h("div", { ref: el => (this.dropContainer = el), class: {
+                'gux-drop-container': true,
+                'gux-drop-zone': this.dragAndDrop,
+                'gux-disabled': this.disabled
+            }, onDrop: event => this.onDrop(event), onDragOver: event => this.onDragOver(event), onDragEnter: event => this.onDragOver(event), onDragLeave: event => this.onDragLeave(event) }, this.dragAndDrop && (h("div", { class: "gux-drag-and-drop-text" }, this.getDropZoneText())), h("div", { class: "gux-proxy-button" }, h("gux-button-slot", { accent: "tertiary" }, h("button", { tabIndex: -1, type: "button", disabled: this.disabled, onClick: e => this.onProxyFileButtonClick(e) }, h("div", null, this.getProxyButtonText()))), h("div", { class: "gux-offscreen" }, h("slot", { name: "input", onSlotchange: () => this.setInput() })))));
+    }
+    static get is() { return "gux-form-field-file-beta"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-file.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-file.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"none\" | \"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
+            },
+            "dragAndDrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "drag-and-drop",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "disabled": {},
+            "hasError": {},
+            "hasHelp": {},
+            "required": {}
+        };
+    }
+    static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "guxremovefile",
+                "method": "onGuxRemoveFile",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+__decorate([
+    OnMutation({ childList: true, subtree: true })
+], GuxFormFieldFileBeta.prototype, "onMutation", null);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.js

@@ -101,14 +101,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: '9fe2d60e7ae731e094c68998d51a5a2099a80cd5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '3ceafc7cacdb3d46ca1f4b2d0446677cc8c7e46e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'fcad7e7a18ab32c48cdf39fe63fe11d0669ebd66', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6db058d0c69764d20cc4203a6335213349dc0a0a', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'd7aebaabd6b3deb33683abe8b7ca8b59dd066273', name: "label-info" })), h("div", { key: '3aecafbafe1f545e4de2caa9027b1923fc303900', class: "gux-input-and-error-container" }, h("div", { key: '68d6777d215ca7be80462a655912065c9436e888', class: {
+        return (h(GuxFormFieldContainer, { key: 'ac43d3e00fd5df500e494d87e7324698acd4e0d3', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '97ba50cd5cea0ea57ed638b4abbf0b6edf9d193f', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '584c04853deedafd0cdd8621defeca51fef4cc5d', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b4e9f91216e8a327a0e25f9dc8ae65a1f3e3e02a', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b011385f1fbaf8f825fab9a67f477ce20a42392a', name: "label-info" })), h("div", { key: '6ae1d9c9007f0cb6058aed17887e4d42260b7e65', class: "gux-input-and-error-container" }, h("div", { key: '5d41e8f121ac8272a0475d11e0d8b97a3b5fcdd3', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: 'e5a8bb31f04c76d5513dae6180719a26ce9b029c', class: {
+            }, part: "input-section" }, h("div", { key: '44320059d441eca83c239358cfe0a87f1fa413e9', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '7bd49d7eb743604cccf1a1f67d46ca2aa5ff37d8', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: 'c0c085810b2b48ab3998e4bf6cf6899645e758bc', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'd8d284916a98589e15c2fba272ade4fa85997c5d', show: this.hasError }, h("slot", { key: '1fb61143cc901e56c8d9fbad4acf11e3425e5af4', name: "error" })), h(GuxFormFieldHelp, { key: '832dd5c8568a4e84dd1505d1d6517648769b58ed', show: !this.hasError && this.hasHelp }, h("slot", { key: '36cf83fa87f92081c9e1db7bf8f0aaea43a0d81b', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: 'bfc922e0c92a8827fa06e1f58a17a69c94a5a20b', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: '7e124f97a6e4f71882cb7ecf2696d6fa78ea9793', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '983f0c0a61491972c37a1bdf96852da45374296a', show: this.hasError }, h("slot", { key: '681c52116a4f3f38a122528f55026889decec2c2', name: "error" })), h(GuxFormFieldHelp, { key: '8c85f169d647fe851ad214cf7bd6c5d516f45798', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b8ad7cfa8e5ddd3655118905fc4877dbd5bd88db', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-phone/gux-form-field-phone.js

@@ -92,14 +92,14 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '4033587ecc7f9d14a95c6388b5240fc000b35362', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '0dbe6f44f64c58b277c504978926a0c189ec69b6' }, (_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: '4212361a7da48e80fb6644e91227475548ceb16d', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '4a39db24b9c62b9b287f8f20246eef3e37b79910', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'eef893fe39ecb9d43cc47c1dc20b20b698ccc65c', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8318a51d01a4cf48b01652d0604b2f006072025a', name: "label-info" })), h("div", { key: 'a34e3bf2a60b418cbacafd3fc921eb57917b8eeb', class: "gux-input-and-error-container" }, h("div", { key: '3c5730f1d80484789345645fd4b216c4502d110b', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'c93531f34fd250f1eb87a3648985015bb8c47c28', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'a91c9df2dc59a24499b5a180251f9dfbb4967a09' }, (_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: '35480b4f84ecb8f1d75c728280e2aa4954678d20', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '88e910a85326f24d17a9d3238ed152de4f07794d', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '633fa98eeb2b3be9d31316ff0a8583e67a2f9b27', variant: this.indicatorMark, required: this.required }), h("slot", { key: '97505c8a83c10c7a235b6b847ff2a6d71a401be2', name: "label-info" })), h("div", { key: '4dda89cb69f96b795f394f6507e0f9df9a169d6a', class: "gux-input-and-error-container" }, h("div", { key: 'f20777a0d251c8c18686ea3d8a7be3c0fa514d43', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '0946b1e552926c2abe69b26f5c8d7c93f80829a7', class: {
+            } }, h("div", { key: 'e70478460b99c1810436761d1a7ee9b83fe158db', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '1651c44bda8d5983564143412363207a47d45465' }))), h(GuxFormFieldError, { key: '45bcb523d3ce076f9c2b92f876812aa08e2ed063', show: this.hasError }, h("slot", { key: '75f98de65f93eb22d561c3a6186a6db0f18c16d0', name: "error" })), h(GuxFormFieldHelp, { key: '828b128b8457969838561683d2fc98de260105ff', show: !this.hasError && this.hasHelp }, h("slot", { key: '555d9a314841611b848c3e6fa89f811587871de0', name: "help" })))));
+            } }, h("slot", { key: '7a663e8dcf1eefdd1568e0e81baff975360c50c0' }))), h(GuxFormFieldError, { key: 'bf3c57ac3b1fcfe7ba368b3a3ff81ef125a62a24', show: this.hasError }, h("slot", { key: 'a0678cc8d2900f3c46ae748009f6c4950cbf73db', name: "error" })), h(GuxFormFieldHelp, { key: '309a6b11b3e6cd88711a561d17d6788699426ffc', show: !this.hasError && this.hasHelp }, h("slot", { key: 'bc3114fdf65b8d052004896c30f816973dc2af2d', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio/gux-form-field-radio.js

@@ -47,10 +47,10 @@ export class GuxFormFieldRadio {
         }
     }
     render() {
-        return (h(Host, { key: '560cbdecf43e08dadab6931c24ccbfc911d54d3e', class: {
+        return (h(Host, { key: '6666752113d7cc54d93ecc03e39f4ae79c4b4c3e', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'aad62148a263916930f601bbe743d389d44d0317', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'e6c669679198fb93b26d971df6f7951f592b7ee1', class: "gux-input-label" }, h("div", { key: '86146038e32e4b835a231bf46d8c6f8f5a623b87', class: "gux-input" }, h("slot", { key: 'ff0f31a8c14331d32e52d64c55d8ff78ce973dcd', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'd36e8bd01ff2eeb30e2978ed297d301daa347869', class: "gux-label" }, h("slot", { key: '893da0327de98f89e133b23fcf2c7f6c9f1da830', name: "label" }))), h("div", { key: '8acc4f27e6a035ef674b5fe4f5642218a5b97674', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '90b93cf7c6f6249cfff5317cccc9a363ec19debb', show: this.hasError }, h("slot", { key: '81e6e7aec500c69489331f64ebef22e21f2b99f8', name: "error" })), h(GuxFormFieldHelp, { key: 'b0dc0a5a71b40cacb0987c382c4a7854323cbfb8', show: !this.hasError && this.hasHelp }, h("slot", { key: '1d7772ca5ac735bf5af51d3e983a03fd1b50d664', name: "help" }))))));
+            } }, h("div", { key: '37d807601e261fb975067c3a34ff7cd5d4d35960', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '963f0c694f739cc0471150d520b5bb3bc589ca60', class: "gux-input-label" }, h("div", { key: '9f169688ec401f48256058cdca76fc7d57cd4e81', class: "gux-input" }, h("slot", { key: '648e1c0ad77e044a705893b1f8bd5e01cf15f3f9', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'ef20edaffa3add8f3346742b1a1c67407260c243', class: "gux-label" }, h("slot", { key: '5d872e8a456876ccd3a7146f423528791e59befc', name: "label" }))), h("div", { key: '6d9b6bcc13aabeea73c2569e5c75cded2187ac20', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'b4d6736b16687aa8c6c068faec518966a86f6f4d', show: this.hasError }, h("slot", { key: '7fb8a2e55e86292f0a484511942bf2eb6a0359a3', name: "error" })), h(GuxFormFieldHelp, { key: '2ef7e15ee387b4955a43238cb272d374c3717e82', show: !this.hasError && this.hasHelp }, h("slot", { key: '727179c2ccdadbae131825b613c42140a8783a56', name: "help" }))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-radio-group/gux-form-field-radio-group.js

@@ -104,8 +104,8 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'dbfd1fbf7433197bd3fa3c0916c83179cd7f6126', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '1ac4adb29e5864803e3091d87ba2d87f3e490490' }, (_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: '68b80b835359d30d034ad53bb20a7134a45c0231', position: "above", required: this.required }, h("slot", { key: 'e1bd8a17e79cc7d1a5c89b6acd439b736526c980', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '0d4da7437e97244c1fd1bb64cf983e76838b5736', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f0982ea5528442ff241ba7c670d476e976704826', name: "group-label-info" })), h("slot", { key: 'c819d8ef5b4c3ea70c85f8c044e2d06bbe5dbd73' }), h(GuxFormFieldError, { key: '70d2b7e13b963713f9419482790bc2d6c796c6db', show: this.hasGroupError }, h("slot", { key: '7bc7db9d77b25c051f699b65e227246d76c9b034', name: "group-error" })), h(GuxFormFieldHelp, { key: '95edee33353f037864f08980dd6ca0cf650a4f6f', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '2128cd99862d7b9ca1b98830e549fbf70a9fec1f', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: 'c7d14a27a6f4c2695e9c04de9403db6899b727f2', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '3fced6220650dce263ff4c6225e8f858e3ade718' }, (_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: '5b7fc368bf6b1f793816e7f2c2b0ccb6ec0a70c4', position: "above", required: this.required }, h("slot", { key: '2b0cba5e51e8ae3c34313c587b03d22223d801b6', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5bb4b22f9dc73924b01b70a636e1337945ff3090', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'de06c0f5e0e94d84726cfb7acb1bff3e095d7b2b', name: "group-label-info" })), h("slot", { key: 'cb0850aab6e295d74abb35cfaa3f31b09e104de0' }), h(GuxFormFieldError, { key: 'f22cb70df0e5b738278176f79f70384d09c3d6bf', show: this.hasGroupError }, h("slot", { key: '4116b53dcbd33c54e8e272a5dee2f1ebea89f5d2', name: "group-error" })), h(GuxFormFieldHelp, { key: '97b2cf259a1c983819dc124bf3bc876a9ab271e8', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '398190b7d563d24b5db92c21f97f2c3aafb0666c', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-range/gux-form-field-range.js

@@ -114,9 +114,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'efdec5b05dc939ae35c8be76a32e1a007d7308ea', class: {
+        return (h(Host, { key: 'c99e1a14767177104ac7f733f5f6ca6d150e0eff', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '04666e490c17816bea66d37f8e3477f8f6442840', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'be72f865c14fa0ad765087c38749916aaf8caa6b', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '6fe99fc9e1cad0bc1eb458b0ea2b7fd30214c743', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5be7bc89b2619867b7d2de8765256e4381eb08ae', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'fb8c186f81cbe84ff54136f5700fbef1bedac972', name: "label-info" })), h("div", { key: 'eed009174352e28030bfaca0dc5fc9a588206011', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '3bf2a9583bb6e7004a49f8185c843043e9fa7b37', show: this.hasError }, h("slot", { key: '5a3cbbe0b35b318a7ac62bb2dbd6ba79e5d5136d', name: "error" })), h(GuxFormFieldHelp, { key: 'ca0cf1aeb0ed8c508fd4298c62e92221998e7ca7', show: !this.hasError && this.hasHelp }, h("slot", { key: 'cd787b966f3662e8af1a4e3b7cdcc6c0e9bfc4ec', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '870297b7670bf5ba072454ae1eaf83521410c508', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f9681cf3541f38478509061b65095db9c2bd7d18', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'b7996687ffcf1f9c94563f6312742f46b72577d6', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'ad6a38c825b8d809b2af5555e4475cabf16af971', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'cdd67828c38e5d584a59f0e708763644e830bba2', name: "label-info" })), h("div", { key: 'c5d63608d0a64fede86505309d48dddc02dd1a72', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '551d86777213d48f1a57353ba7f9cae7493a5321', show: this.hasError }, h("slot", { key: 'fb87d31e460c0a70a9c8538ae4550d4ad57f30ec', name: "error" })), h(GuxFormFieldHelp, { key: 'fa41ac1ca1b8deb473191b7feaeab75dfeefea14', show: !this.hasError && this.hasHelp }, h("slot", { key: '594f71fa1ac41b1d4e0a9892decd54535c827f94', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.js

@@ -94,13 +94,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'fae9d2bde3b9f15520d7cf963352a9cb315ddacc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'c2dfab5ed0dc314a7dd6aa866747375ceae599df', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ce66cd8e59f0e21d9d55319a468effac53af1af3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '7c6fbdcfc0c2144ce4c93b2f1dc3730f45f00ef5', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3d382bee6d91e00f76dea6053012b0ea890871f6', name: "label-info" })), h("div", { key: '2710be721228743cbc5864865dd4a7307ba86cf6', class: "gux-input-and-error-container" }, h("div", { key: '9d895f5095c690d9042dae6a0c6506575e59c082', class: {
+        return (h(GuxFormFieldContainer, { key: 'a2336e7651a6f5ff3820c3e2563a7c90c3874c08', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '6e097e2824de2fddc0a82bdf8e80cbb3657dcd14', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '242a597a2fea8220c73d8b75c0587d25301d5f75', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6fa3c4a77948a92e97ce7c67cf4cc48ac6f1939b', variant: this.indicatorMark, required: this.required }), h("slot", { key: '110f0db57d97eb5eb3a34a2ad9801a6afafb650c', name: "label-info" })), h("div", { key: '3fe4dafec0206dca0a83202086751e5269309b7a', class: "gux-input-and-error-container" }, h("div", { key: '786847c177cbe89d548008faf92cd6c506a443da', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '4a340e271b02549be901f60b9cfa85c044a5d1d9', class: {
+            } }, h("div", { key: '3eb4d02673dc99dbb421ae0c362e15cdc1f67972', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '4a2f32b34255decaf73aaf32ecb5d5520ad935b2', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'b3e0aad95f7af9617fff5718e9a17e3c666d57ed', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'be4c68fa3184f04bdb3e7f1b5c6dda9ea9e6921f', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'a18b0950fe0a6814da3e4f25e5b5ae9841bf0e94', show: this.hasError }, h("slot", { key: '90359f820a41b241e16a596e8c37273ecfd61781', name: "error" })), h(GuxFormFieldHelp, { key: 'f9a40baa4a08a153e5dda5b542712822956698f4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a135a1a2e80cad4e8c287a357a5290f735a33e4d', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '3ba253edcb34ab1f074302cad02676e1ae0791df', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '070b82abdc3bd54a946a99e62ad03beac74a097a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '6a0d7bf586fd25c55a2de4c043b1625126306af8', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '4466425ff65f008288e9d3fba5a9e208a2a1c6a1', show: this.hasError }, h("slot", { key: '3b5e6dd26e7024f7a4154eb5aefb1dc51d396cc4', name: "error" })), h(GuxFormFieldHelp, { key: '4b062ea601c2d5fc9b0bf234870f520264ced92e', show: !this.hasError && this.hasHelp }, h("slot", { key: '11cf3ac8d19f9609d968b555bd468f138d1da4a3', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.js

@@ -84,13 +84,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'cf9b60de02dc645231b392ab46e91408ae937d76', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5cc32d72c253c9b38954824d36815b58c590865e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '125fc6ba3deeedc3676a9cd8e0c3697f75ad9e81', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '74f88c1305203e9032c0402de011b4610ff3d928', variant: this.indicatorMark, required: this.required }), h("slot", { key: '64b6cbc9be3a8aa617cbf1cbc3db883854c16b1d', name: "label-info" })), h("div", { key: '8c0d65ae4e05ae5be03744e7baedb19cb4198ddb', class: "gux-input-and-error-container" }, h("div", { key: '75ad79a390b93b54cb0ee21c426d908c9f096803', class: {
+        return (h(GuxFormFieldContainer, { key: 'bc2c490c7ad6a1fd9fb35fe7c17720ae0434d353', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '1d9d352c69498c7c18b0af044919c0353aa99916', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '32c9ba5e2a27c5b867bbcfbbbabe0ccb22c90a1f', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '4b7a813d4f844e4e81d47ed8a1015a368e15d53c', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b1ecdf7980f691819057bf5d9235709315bfaa7d', name: "label-info" })), h("div", { key: '0e433faf1800d4155488c7ccb7410e07281a2274', class: "gux-input-and-error-container" }, h("div", { key: '51783b00b2f96fd486ddceaaaa86f6f44deee720', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'a65f1b161716ea1d29752c7625f8f8314656f5e3', class: {
+            } }, h("div", { key: 'c2e8f32366a97e19cddc0c88ff95c4c938e9f957', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'ebe490e4ef8acd982ecfc0dd82835b193e003945', name: "input" }), h("gux-icon", { key: '8f024b3621a087cde0871f5587942618254e59c6', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '3dcd33346761e4faec0f006bb931cd599d62c496', show: this.hasError }, h("slot", { key: '38ff107bff216be2ef6dca3a109ca1c44564db85', name: "error" })), h(GuxFormFieldHelp, { key: 'd549c71211e2dcc0fb3d59dd0da56be6a6fa58c2', show: !this.hasError && this.hasHelp }, h("slot", { key: '982cdba7d61099fcf99f9e70747459d2da71ac9b', name: "help" })))));
+            } }, h("slot", { key: '9255c1eb21a504e0ce4a8f6262b24d949e0b57de', name: "input" }), h("gux-icon", { key: '781da46b1bafae98554a1a734c1d4b0a4e1d1dd9', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '0e5b86d31fbc2d7ca0a2336b880feff6b8ad3395', show: this.hasError }, h("slot", { key: '2ca26adcb51cf8d14f701065eec4186424c0fe55', name: "error" })), h(GuxFormFieldHelp, { key: '9c17f9bf58289bac8626a4f5d1df003d30953598', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd224d3b3b65864305ee0dc4d0a13f12722905d02', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.js

@@ -88,12 +88,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '911413e5bc044254be5302c018a9ec464edd40ff', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a01e54a6b6df5cc0c5046dcfb39e30a12193d67a', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '9f8759c55ce2b7958506dbb666b8311f04594848', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'fcd7a77bc13727fe5b6417d6fced16a7dc07cd3a', variant: this.indicatorMark, required: this.required }), h("slot", { key: '6bd8a95ec0392ab106a52ee1f2ebafc665e754f9', name: "label-info" })), h("div", { key: '36d50195f5a9db72fa4823a75a8665ed7ba30e26', class: "gux-input-and-error-container" }, h("div", { key: '3183ab5a87a464be3f30ecad6abcfc09a0d35cf3', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: 'ff1116e958e1f4014e7b6d7b64be67fe9553b4e3', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '2b8585aece1242a77a09d3c7e6be911cfafdf2ef', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '4bdc31c30e46b6992551674313bdc71ce3433813', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '774e5db50ddb91302eaecc1cb6ac37b589275b9d', variant: this.indicatorMark, required: this.required }), h("slot", { key: '93ac6b4edb3c526a4fc8713b4b70e833c154b5d1', name: "label-info" })), h("div", { key: '7398484c3e0cd708cda2a585d49e1f4b878e8442', class: "gux-input-and-error-container" }, h("div", { key: '6e89f5a2942bd719be32e109a06bb9ef500ea784', 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: '28d2a79fec541d0b583a4f9bad0e4b703e11a2a8', name: "input" })), h(GuxFormFieldError, { key: 'c7f87321ecc5cce01cfe170ffd930a2776d342bd', show: this.hasError }, h("slot", { key: '976c7e01fd76cea875de287bc7ebc822f3ab2e02', name: "error" })), h(GuxFormFieldHelp, { key: 'b60e636ff3995288651e32b8e2dae51219457c54', show: !this.hasError && this.hasHelp }, h("slot", { key: '8e34f88cbbb2b841f07c02097f5becca3f4d6698', name: "help" })))));
+            } }, h("slot", { key: '05b9db97c55a3a7d23a614478365ee04dec6324c', name: "input" })), h(GuxFormFieldError, { key: '3f092b502db804352a8b2934f6004572ab8dde20', show: this.hasError }, h("slot", { key: '63ade17e80798d9f3127282aff876c61cfcdb9b8', name: "error" })), h(GuxFormFieldHelp, { key: '7c23febf13fc9779645305345afd0f807c778bcb', show: !this.hasError && this.hasHelp }, h("slot", { key: 'df027b22b429b5e66ffa793b821a009ba83d45c9', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition