genesys-spark-components 4.68.0 → 4.69.1

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/tests/gux-form-field-checkbox-group.e2e.js

@@ -0,0 +1,212 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'color-contrast',
+        target: 'gux-form-field-checkbox-group-beta,span',
+        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+    },
+    {
+        issueId: 'color-contrast',
+        target: 'gux-form-field-checkbox-group-beta,span[role="presentation"]',
+        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+    },
+    {
+        issueId: 'color-contrast',
+        target: 'label[slot="group-label"]',
+        exclusionReason: 'WCAG 1.4.3 Contrast (Minimum), inactive user interface components do not need to meet contrast minimum'
+    }
+];
+async function newNonrandomE2EPage({ html }) {
+    const page = await newE2EPage();
+    await page.evaluateOnNewDocument(() => {
+        Math.random = () => 0.5;
+    });
+    await page.setContent(html);
+    await page.waitForChanges();
+    return page;
+}
+describe('gux-form-field-checkbox-group-beta', () => {
+    describe('#render', () => {
+        [
+            `
+      <gux-form-field-checkbox-group-beta>
+        <label slot="group-label">Food</label>
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+       `,
+            `
+       <gux-form-field-checkbox-group-beta>
+       <label slot="group-label">Food</label>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="pizza" />
+         <label slot="label">Pizza</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input
+           slot="input"
+           type="checkbox"
+           name="food-1"
+           value="sandwich"
+           disabled
+         />
+         <label slot="label">Sandwich</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+         <label slot="label">Spaghetti</label>
+         <span slot="help">This is a help message</span>
+       </gux-form-field-checkbox>
+       <span slot="group-error">Subject to availibility</span>
+     </gux-form-field-checkbox-group-beta>
+       `,
+            `<gux-form-field-checkbox-group-beta>
+       <label slot="group-label">Food</label>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="pizza" />
+         <label slot="label">Pizza</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input
+           slot="input"
+           type="checkbox"
+           name="food-1"
+           value="sandwich"
+           disabled
+         />
+         <label slot="label">Sandwich</label>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="sushi" />
+         <label slot="label">Sushi</label>
+         <span slot="error">Subject to availibility</span>
+       </gux-form-field-checkbox>
+   
+       <gux-form-field-checkbox>
+         <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+         <label slot="label">Spaghetti</label>
+         <span slot="help">This is a help message</span>
+       </gux-form-field-checkbox>
+       <span slot="group-help">This is a group help message</span>
+     </gux-form-field-checkbox-group-beta>`,
+            ` <gux-form-field-checkbox-group-beta disabled>
+         <label slot="group-label">Food</label>
+
+         <gux-form-field-checkbox>
+           <input slot="input" type="checkbox" name="food-1" value="pizza" />
+           <label slot="label">Pizza</label>
+         </gux-form-field-checkbox>
+
+         <gux-form-field-checkbox>
+           <input
+             slot="input"
+             type="checkbox"
+             name="food-1"
+             value="sandwich"
+             disabled
+           />
+           <label slot="label">Sandwich</label>
+         </gux-form-field-checkbox>
+
+         <gux-form-field-checkbox>
+           <input slot="input" type="checkbox" name="food-1" value="sushi" />
+           <label slot="label">Sushi</label>
+         </gux-form-field-checkbox>
+
+         <gux-form-field-checkbox>
+           <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+           <label slot="label">Spaghetti</label>
+         </gux-form-field-checkbox>
+       </gux-form-field-checkbox-group-beta>`
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newNonrandomE2EPage({ html });
+                const element = await page.find('gux-form-field-checkbox');
+                const elementShadowDom = await element.find('pierce/.gux-form-field-container');
+                expect(element.outerHTML).toMatchSnapshot();
+                expect(elementShadowDom).toMatchSnapshot();
+            });
+            it(`should be accessible (${index + 1})`, async () => {
+                const page = await newSparkE2EPage({ html });
+                await a11yCheck(page, axeExclusions);
+            });
+        });
+    });
+    it('switches between states when clicked', async () => {
+        const page = await newSparkE2EPage({
+            html: `
+      <gux-form-field-checkbox-group-beta>
+        <label slot="label">Food</label>
+        <gux-form-field-checkbox id="pizza">
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+        <gux-form-field-checkbox id="pasta">
+          <input slot="input" type="checkbox" name="food-1" value="pasta"/>
+          <label slot="label">Pasta</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+
+      `
+        });
+        const pizzaElement = await page.find('#pizza');
+        const pizzaLabel = await pizzaElement.find('label');
+        const pizzaInput = await pizzaElement.find('input');
+        const pastaElement = await page.find('#pasta');
+        const pastaLabel = await pastaElement.find('label');
+        const pastaInput = await pastaElement.find('input');
+        await a11yCheck(page, axeExclusions, 'Before checking checkbox');
+        await pizzaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(true);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+        await a11yCheck(page, axeExclusions, 'After checking checkbox');
+        await pastaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(true);
+        expect(await pastaInput.getProperty('checked')).toBe(true);
+    });
+    it('disables the slotted form field checkbox inputs', async () => {
+        const page = await newSparkE2EPage({
+            html: `
+      <gux-form-field-checkbox-group-beta disabled>
+        <label slot="label">Food</label>
+        <gux-form-field-checkbox id="pizza">
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+        <gux-form-field-checkbox id="pasta">
+          <input slot="input" type="checkbox" name="food-1" value="pasta"/>
+          <label slot="label">Pasta</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+
+      `
+        });
+        const pizzaElement = await page.find('#pizza');
+        const pizzaLabel = await pizzaElement.find('label');
+        const pizzaInput = await pizzaElement.find('input');
+        const pastaElement = await page.find('#pasta');
+        const pastaLabel = await pastaElement.find('label');
+        const pastaInput = await pastaElement.find('input');
+        await a11yCheck(page, axeExclusions, 'Before checking checkbox');
+        await pizzaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(false);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+        await a11yCheck(page, axeExclusions, 'After checking checkbox');
+        await pastaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(false);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+    });
+});

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-checkbox-group/tests/gux-form-field-checkbox-group.spec.js

@@ -0,0 +1,128 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldCheckboxGroupBeta } from "../gux-form-field-checkbox-group";
+const components = [GuxFormFieldCheckboxGroupBeta];
+const language = 'en';
+describe('gux-form-field-checkbox-beta', () => {
+    it('should build', async () => {
+        const html = `
+      <gux-form-field-checkbox-group-beta>
+        <label slot="group-label">Food</label>
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+    `;
+        const page = await newSpecPage({ components, html, language });
+        expect(page.rootInstance).toBeInstanceOf(GuxFormFieldCheckboxGroupBeta);
+    });
+    describe('#render', () => {
+        [
+            `
+      <gux-form-field-checkbox-group-beta>
+        <label slot="group-label">Food</label>
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>
+     `,
+            `
+     <gux-form-field-checkbox-group-beta>
+      <label slot="group-label">Food</label>
+  
+      <gux-form-field-checkbox>
+        <input slot="input" type="checkbox" name="food-1" value="pizza" />
+        <label slot="label">Pizza</label>
+      </gux-form-field-checkbox>
+  
+      <gux-form-field-checkbox>
+        <input
+          slot="input"
+          type="checkbox"
+          name="food-1"
+          value="sandwich"
+          disabled
+        />
+        <label slot="label">Sandwich</label>
+      </gux-form-field-checkbox>
+  
+      <gux-form-field-checkbox>
+        <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-checkbox>
+      <span slot="group-error">Subject to availibility</span>
+    </gux-form-field-checkbox-group-beta>
+     `,
+            `<gux-form-field-checkbox-group-beta>
+      <label slot="group-label">Food</label>
+  
+      <gux-form-field-checkbox>
+        <input slot="input" type="checkbox" name="food-1" value="pizza" />
+        <label slot="label">Pizza</label>
+      </gux-form-field-checkbox>
+  
+      <gux-form-field-checkbox>
+        <input
+          slot="input"
+          type="checkbox"
+          name="food-1"
+          value="sandwich"
+          disabled
+        />
+        <label slot="label">Sandwich</label>
+      </gux-form-field-checkbox>
+  
+      <gux-form-field-checkbox>
+        <input slot="input" type="checkbox" name="food-1" value="sushi" />
+        <label slot="label">Sushi</label>
+        <span slot="error">Subject to availibility</span>
+      </gux-form-field-checkbox>
+  
+      <gux-form-field-checkbox>
+        <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+        <label slot="label">Spaghetti</label>
+        <span slot="help">This is a help message</span>
+      </gux-form-field-checkbox>
+      <span slot="group-help">This is a group help message</span>
+    </gux-form-field-checkbox-group-beta>`,
+            ` <gux-form-field-checkbox-group-beta disabled>
+        <label slot="group-label">Food</label>
+
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="pizza" />
+          <label slot="label">Pizza</label>
+        </gux-form-field-checkbox>
+
+        <gux-form-field-checkbox>
+          <input
+            slot="input"
+            type="checkbox"
+            name="food-1"
+            value="sandwich"
+            disabled
+          />
+          <label slot="label">Sandwich</label>
+        </gux-form-field-checkbox>
+
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="sushi" />
+          <label slot="label">Sushi</label>
+          <span slot="error">Subject to availibility</span>
+        </gux-form-field-checkbox>
+
+        <gux-form-field-checkbox>
+          <input slot="input" type="checkbox" name="food-1" value="spaghetti" />
+          <label slot="label">Spaghetti</label>
+          <span slot="help">This is a help message</span>
+        </gux-form-field-checkbox>
+      </gux-form-field-checkbox-group-beta>`
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

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

@@ -83,13 +83,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '0bc6791fef204c4f1695eac9b9e81c8fafdcd5aa', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '605eb31afd984a20faa2b2050df96834f5e6955d', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '9294fd2a8d4ebc7421f26edfe4566eed3e0ecb20', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '103addd93f9c42465a7372a5a4a3f20283080f76', variant: "required", required: this.required }), h("slot", { key: 'aaf912c0fba76c666d5a64f40745edb92a4c0142', name: "label-info" })), h("div", { key: 'c43d73275bd4d87390a0c8c6fc6bbb43deba89d1', class: "gux-input-and-error-container" }, h("div", { key: 'eb165c18249a3e97d36cddb3e789763b7c07dcb2', class: {
+        return (h(GuxFormFieldContainer, { key: 'bd8ffd5498ce8e610991bde0e504f17155013320', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '9110741b56cad3534699aa46c1c9f4906415544b', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '3ae714696acf45e871d5ff5dd17462c007946291', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '778127f519439c2222eb2e2cefb06dafe4ccd580', variant: "required", required: this.required }), h("slot", { key: '458b80b587e2a71a6b74c254b17d0254af689242', name: "label-info" })), h("div", { key: 'be307b732e213e887e603285883939d517a0f515', class: "gux-input-and-error-container" }, h("div", { key: '99606aa771b9cd0d7dc905f5bf372d0611b0cf24', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '71a5695af21256cc7564c83046ba3d628dd991e7', class: {
+            } }, h("div", { key: 'e8f5424a77f503939194845952a600942881fac3', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'a8fffef5cc7fef1de7dddb0cc1463f39f5fb4a6b', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'fc56b4d472b06ca651417c5eba70c5b1ee2aa36f', show: this.hasError }, h("slot", { key: '1db20e7effe6a57bac9f16215d51e6721e05d204', name: "error" })), h(GuxFormFieldHelp, { key: '744072356234864296661edde9535d56773820af', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a9fd83d7589d34a7b25cdb6df5112378b0221fbd', name: "help" })))));
+            } }, h("slot", { key: '5165395c1c2e170ff5a36595d6c818c9f32eec84', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '0d485bd468bd554a68079a95646137c244ed0a9d', show: this.hasError }, h("slot", { key: 'e18a74f723d34c6b250b7848c1638c3cfe31c782', name: "error" })), h(GuxFormFieldHelp, { key: 'cefe2b17cbcb4d1b54be05bccba3b116d303144d', show: !this.hasError && this.hasHelp }, h("slot", { key: 'bb60e7a17e4e3ccbcb32f157976c7dd082a8edf9', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -95,11 +95,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '9a352ab8c07fdccf1c637f30d7acc975c9e9e515', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'ad8a83c58dd09d9c62b7ab0b89b39c8ff983e14c' }, (_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, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'deafd07f1e5928837d6334b5c54c77cadd6c3ed5', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'a38ae7efbc8ec4fbf41b3c45e56de5c4cee0fa29', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5d0c454ef39edccb721fb30b7023f35a31c84150', variant: "required", required: this.required }), h("slot", { key: 'd65940990b9bd1deab10a6a3e9fc51edefc78200', name: "label-info" })), h("div", { key: '358fb1554f11fcf10aececdab5d9aef5806dffd9', class: "gux-input-and-error-container" }, h("div", { key: 'b76f74abccf55f58f1c2a325ac5798aea973c11a', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '63361cf42ffcd8c77f343dee01c3adf81dc0941d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '031c0715fe3cf6987a40233ab80aa5acc6e7710a' }, (_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, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'd325b9b5ebcb0ff61e6a60de667632518e957c56', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '42c42440dbb653efc0d04f2e0b3f136f1656f6f5', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '696d9ddb331ceed2538a74fc23e7b4ed30aa5b09', variant: "required", required: this.required }), h("slot", { key: 'ecd3c58e1d31cb8d94627f38569b441d8e0b486a', name: "label-info" })), h("div", { key: '648d4ee2732fec9cc56acde6a5f646e09f79c7cd', class: "gux-input-and-error-container" }, h("div", { key: '65e1736e94fcff744a62ade04f1e18af77254f3c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '29ed3b19cb95dfcd8949c3a9a4d24254b3645aef' })), h(GuxFormFieldError, { key: 'c6b2f11b400d1a6dcd102c6262cbefc7384bbb53', show: this.hasError }, h("slot", { key: '56a74cb9955061daea5c6c95bb79aae2a7062072', name: "error" })), h(GuxFormFieldHelp, { key: 'c3f7e39d954b6be98776d95d981e699e0b7932c8', show: !this.hasError && this.hasHelp }, h("slot", { key: '068bdcc922d1d5aacbf06186a745361bdde2cf39', name: "help" })))));
+            } }, h("slot", { key: '9411d1f82b80e013850c8ebfc7f55843d643acf7' })), h(GuxFormFieldError, { key: '52f1e48db508e83c7cfc4b375d81f032609b6776', show: this.hasError }, h("slot", { key: '41d22e038c502a355f1c45befb38ac7e190ea43a', name: "error" })), h(GuxFormFieldHelp, { key: '10c388c498f1dcf67a6377ae01673c70fefae884', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd128221341c321854206652607cc4b0078a024f2', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -97,7 +97,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '0525a78d391dc34115520686d84b2469cb03e73a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '688782d0b2054dfd0d6d365e32f2d9c1c761bcb6', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '31e5d8f4388dafc1f72635443626c8066b55eb13', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6e3436cf4295a44d34605d9c5ebeb703c21e2160', variant: "required", required: this.required }), h("slot", { key: '30daa2fa2355c361bef1f22a535de7917cfb078d', name: "label-info" })), h("div", { key: 'd7a20c504f8727c864699f035e913d3924447207', class: "gux-input-and-error-container" }, h("slot", { key: 'e3300b633b42b9b7db6a712bc4d7dd827902f24f', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'a2b928b0979b9899776d9b51d55d2b613d4269ea', show: this.hasError }, h("slot", { key: 'c1739682633318bc460cf17f6276809b89bbaa82', name: "error" })), h(GuxFormFieldHelp, { key: '5bf1dd36e9a50db936e40172ebef765829aa7d4e', show: !this.hasError && this.hasHelp }, h("slot", { key: '1849ec0347a435c8ae96f25cb26513831172f116', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: 'b45503dabdcb64f1df72928b99305aa5efaef423', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f09e291be24f57e678a72e417b2f1b7bb977082e', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'fc9b9068354b8da568006d4d44640fef4123fa9e', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3ef29064e0601bd2c8af11a19c9a1a8b9e986b0e', variant: "required", required: this.required }), h("slot", { key: '83ae1424fcb54708af961155db4c26fcbd059cbd', name: "label-info" })), h("div", { key: '33b58d805d61f1d8b27a50b0db96c31caca6f54b', class: "gux-input-and-error-container" }, h("slot", { key: '4fe2f05d1b6012908ac312d1bacb3a3d62f28c8c', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'f82044540fa10d5cd81806e7ecccba3419fb6667', show: this.hasError }, h("slot", { key: '9142937b77c997e8bfc0ffc80b2e363609e72b88', name: "error" })), h(GuxFormFieldHelp, { key: '6ceb51c3e58b3cd3023e7a7184e171e8c2f75027', show: !this.hasError && this.hasHelp }, h("slot", { key: '60641e4d45948eaa1b9d8faad04aa70f12ab1693', name: "help" })))));
     }
     static get is() { return "gux-form-field-file"; }
     static get encapsulation() { return "shadow"; }

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

@@ -99,14 +99,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: '7933568b7816fa23c82e4f47f6f590dc04a06390', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '4c68d06151843ab21972d116e059b21ac96bfc79', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '54b2aac45cd433644daa6e19776d462ac783766c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b386246df553fd957662379ef771d4fa8f96886b', variant: "required", required: this.required }), h("slot", { key: 'a9ac69f91cc2835a327c1a2388677f9331c31290', name: "label-info" })), h("div", { key: '778ec225fa15fbb9400a4553e843a3df8c089f39', class: "gux-input-and-error-container" }, h("div", { key: 'c50c6a236cb308c173deac4154fbe18de4371037', class: {
+        return (h(GuxFormFieldContainer, { key: '7cd63e19283a6dc3eaf8806073246206834e063c', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'bccccd9a17d23d2d4446fd9685eb9cbe9404a9d1', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'e8886a901750434ae6be0da8f769c82aef5adb17', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f79a65869ea22e74831f01fed54d875cce02e7b4', variant: "required", required: this.required }), h("slot", { key: '0386c4fbff1aa3cd83103e35dd499c8ad4262558', name: "label-info" })), h("div", { key: '6abf848f8a230821fd95429e9e52f724edcdcf8b', class: "gux-input-and-error-container" }, h("div", { key: '16d8e83feacb453361be85817dac8b7941189bab', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: 'ae16a2ef6f56fd450f5222a21e3dee12a65d63b0', class: {
+            }, part: "input-section" }, h("div", { key: 'dab06cf421271d09ed7298b54435a984c281d181', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            } }, h("slot", { key: '831683b98ac47cf8910936f6a96f2227b88bb8f8', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '78708993720afe3dc86fc17d647623cdd29dceb4', show: this.hasError }, h("slot", { key: '7ab1f64c823909396d42487f1f0c9911c52c4f56', name: "error" })), h(GuxFormFieldHelp, { key: 'da6c0e73b11b0fbde8bd453993e06ee6339dc2ee', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a9675ff099449cbe5cec296f28caef950450cfad', name: "help" })))));
+            } }, h("slot", { key: '83e0717bb788c2fb31934824355dbce50bbd750c', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '45adac5e37cf049f696cafab18457c89fc2446f1', show: this.hasError }, h("slot", { key: 'a6e96e5c56a29622d84ae629f2962d35823e7418', name: "error" })), h(GuxFormFieldHelp, { key: '25283d15c640fcd203efaa9d8e108a5524649f6e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e30a17304b3d059bd3938b788c910bd9f4c37268', 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

@@ -91,14 +91,14 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '9d4c6dbffdc6bdc6ffcc837f42de50bb206928f6', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '7169f8a5e3f9ec8ce4a3ab875bad672486c7d915' }, (_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: '1c01a5da652a511174ddf83a8513ac95d7dc19a4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '97a7ba3d4a5c59f9fb646347b12739f0fff5c8c5', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'dc557c304670bc8c567d7ab43934b7eb21ce34ab', variant: "required", required: this.required }), h("slot", { key: '550cd3e4e3215c8de5914b60c7d70af6406ae2da', name: "label-info" })), h("div", { key: '8320d94a2e2aa6939f7f05e02174a6467b658b7a', class: "gux-input-and-error-container" }, h("div", { key: '642a2d56360fc0a94259c77db3aca4a5bfbf965f', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '5e79706a4106eb71219a0fccecf9fecc70ad029f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'beaea1fd3d613ab90ac5e097c025096e7c83244f' }, (_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: 'dfe696f2a760552fff055c424a5cd9e394eeb20b', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '730a6a00c0b6872099d7aa44bdafc923af385d77', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3d1362cfc275d089d41e4d6495aed11a4fbd3056', variant: "required", required: this.required }), h("slot", { key: '734d9a3e505bb48a27b676a6b16c13717ebb87d7', name: "label-info" })), h("div", { key: 'c5151c7762ecfa31164375ae23f7ca48b8b1548d', class: "gux-input-and-error-container" }, h("div", { key: '83a99c191cb03b34ef4ee5e37b9be5f4237556b3', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'f86dd893d7f00ab5f1b84559668643ebdcaded8b', class: {
+            } }, h("div", { key: 'ece2e66fdc6612ab711f4243d803363fabff2b8e', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '5d9f650056e1371cecfce924da5271f436243b5a' }))), h(GuxFormFieldError, { key: 'd81fa03f01285583d6d2d935eb5337acf12a346c', show: this.hasError }, h("slot", { key: '9fc26f779b0db83100fcaed6a8e22de79b22b67a', name: "error" })), h(GuxFormFieldHelp, { key: '9de13c4a3751de1e153b30c04f6902e0c2a9b6d2', show: !this.hasError && this.hasHelp }, h("slot", { key: '43064b55e0a372ecaeacc2f3549801946a3d5c86', name: "help" })))));
+            } }, h("slot", { key: 'aeeb02d360867cd9400046b6d63c61f588df9713' }))), h(GuxFormFieldError, { key: '6ffda1db40ad30c409c431339c8183168d7dbb64', show: this.hasError }, h("slot", { key: 'f75504d4695a26edf90b30cf2db36fb354db4f29', name: "error" })), h(GuxFormFieldHelp, { key: 'f171c53e11efd91de79c2e0337682188d465e134', show: !this.hasError && this.hasHelp }, h("slot", { key: '3858cad08f08ec51f79b1c52461a0d2bb36cb6e9', 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: '4be53308a7caf39eaf426a33fe2f887907016f46', class: {
+        return (h(Host, { key: 'dee308de65283a8fc44ce06f2da458e3f108024a', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '4972931fc0571d13319c91ff3fe995b7e8208b50', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'b25001ef55d8d5bc0b63237a38ce11b6fecf9549', class: "gux-input-label" }, h("div", { key: '0e19497e4f0558252cc976f5227526aa34fcb960', class: "gux-input" }, h("slot", { key: '66cf05ecc934419d3cbce9cc08f956ddb0b222d7', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'aadbf0cd1d7795f0400047b55c9398653ee3da2c', class: "gux-label" }, h("slot", { key: '2fa716ad8d4863ebdef2a7bd1c6c52666b7d37c2', name: "label" }))), h("div", { key: '730560ed315257647a904692659515aca8e6f3da', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '8af82dd72e1ee37e2b83495b894c8b875c3a5359', show: this.hasError }, h("slot", { key: '41d4a359a45fcccabcc69262637864a9f9025858', name: "error" })), h(GuxFormFieldHelp, { key: 'c97b9e2b6586bc5cdddb1d50fa5dc643291db919', show: !this.hasError && this.hasHelp }, h("slot", { key: 'aa00f02472ea6b3eb18c2aed9f043460223c77b7', name: "help" }))))));
+            } }, h("div", { key: '84c778ad31cbc0879422d1b57ffbbfb51c4d733b', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'f29e1012c2140654c626dbdf2e49c6492675f59e', class: "gux-input-label" }, h("div", { key: '9324b917de2d38e872fd6f858198ff7d6971dac1', class: "gux-input" }, h("slot", { key: 'dca06eb2f5370cc6979ea6dd4119083397bcf5ac', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'ebccb4e6bb0438b183f1a7dd542120933b6dd2e1', class: "gux-label" }, h("slot", { key: '204dfc4315640ac7974df1ec434f06691148078b', name: "label" }))), h("div", { key: 'ccffe3e77740d2231216e9e6021f65fd035d1ed1', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '8b6701eb9a7ac2131597ce9f9f08513e3c46bcbf', show: this.hasError }, h("slot", { key: 'fe09527fd9035f25c6d91c3f6285839a09e5c423', name: "error" })), h(GuxFormFieldHelp, { key: 'fd58af8ee7e72a1389c45b37cd46a55798db6efa', show: !this.hasError && this.hasHelp }, h("slot", { key: '7a76298da2764985c0c7febcf744ca9efb40ada8', 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.css

@@ -164,7 +164,7 @@
   padding-top: 0;
 }
 
-:host([disabled]) .gux-form-field-legend-label {
+:host([disabled]) ::slotted(label) {
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 

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

@@ -99,8 +99,8 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'e12c20790c5ba935d5b3c38b16db7230e434c077', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: 'ca80c61d454567f3447456444325d0506dec504c' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, 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: '2c0c16c86d9dc473cabfc0db2bb417ee2dab90b2', position: "above", required: false }, h("slot", { key: '30bc3c2a1969bb3af748a0b67b2d7fb26d1e3df5', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: '35d5aa0f55e729a976cdb8e112ef03849ca5f816', name: "group-label-info" })), h("slot", { key: '7e603c6566ee3679f5ba2221967015fcc783e065' }), h(GuxFormFieldError, { key: '8065668a4897592921dd8f76f8b147f5f3a8403b', show: this.hasGroupError }, h("slot", { key: '0023aaa9c6ffffe22eedd92450631eccd0b1c6cb', name: "group-error" })), h(GuxFormFieldHelp, { key: '51c0d560e63fa06b1a6ead09d5f2752525677018', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '19f31b38455d172042c71de7eb52b9e4ba3be939', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '18fb0c21924bc28ff5ab47fd67c5de6ef6b34df5', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: 'e33a6c28e3a2fafbbdff9107a33bc3ce6cc3e680' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, 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: 'c6420ade388fef239f6cf7e43b062992c6f5ef40', position: "above", required: false }, h("slot", { key: '51ce44d7ebd941cd80de57dabe1afdd28a287aac', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: 'cdefdcf43799bcb758ea0a27a555fb0c3323c96b', name: "group-label-info" })), h("slot", { key: '1b79439e6930fa43d2c508f16a79b2763b369e2c' }), h(GuxFormFieldError, { key: '2eb19786e466d0d8f4dbe3efd6866eee5b7cc9d0', show: this.hasGroupError }, h("slot", { key: '73f97a0982220c438e51086db8b26c7c4d0db509', name: "group-error" })), h(GuxFormFieldHelp, { key: 'd947d3ad2e58438d770785baf504d2e12705069a', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'f102ee933a12c6ae5cd4290e8adb9bae3c6cdee9', 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

@@ -113,9 +113,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'ab9ac048dff6e2d11bb3c772ed451236f3ba077a', class: {
+        return (h(Host, { key: '7174da64feed7ecfd06b26be8d77ca5cd0b2fa5a', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: 'dba594d436aead649aeb87af487ee166189b4bab', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '55700a9623002cb6b14d649220d69892d12f9262', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '6bce5f84176d71f7f55a0aa4b2790009af8c1605', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f5a34330196fc54fc09ab3a8af2c34daf76c5462', variant: "required", required: this.required }), h("slot", { key: '4660b8fce4ca716350a14ffb473afa54c8419318', name: "label-info" })), h("div", { key: '3670a50c686cc5db998c98649ae43f38c0a31dc3', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '393e587693d47724a46b070752f97eea1f5f62e0', show: this.hasError }, h("slot", { key: 'b83b93a254d2700a3939dd146154ad481a6b8c62', name: "error" })), h(GuxFormFieldHelp, { key: 'cb78aadb8966a6d073cc55feff81aefc2958bb26', show: !this.hasError && this.hasHelp }, h("slot", { key: '900d0ca0d05bc5916699632ec749af107ad7b724', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: 'ac0ecc73aedb6bdd9b0536bbfed55d665ae5f248', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b24dd5d42a34beb41887e92b8bcceb3d7bda56e4', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '12ed0520d9b9f1c404b6a31f6ec45fdd0b4c1bfe', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b07b2c6c7f0e118f65be5e01cae6cae15959dc34', variant: "required", required: this.required }), h("slot", { key: '0b06bc69c256872d0726d93344a26a8664955df3', name: "label-info" })), h("div", { key: '3360fc5b2bcfa941f02345e6c4f2ee855c85b9c6', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '48fd7c3a7e142e298fdbfb213b5954b3cfce4a54', show: this.hasError }, h("slot", { key: '91ec76d697c26a0a014f34c30de6d3596044abf1', name: "error" })), h(GuxFormFieldHelp, { key: '9df5deee6beb4a35cfe4051dd2383bb493b412b1', show: !this.hasError && this.hasHelp }, h("slot", { key: 'da27f8af64910cf341f25e31034753526cb1e7c4', 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

@@ -92,13 +92,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'eb54c3d326e5612bed966c4902f81492ef78d047', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '0b1c19574a630d5cd35340aaa26c34d9bcadc0f4', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '55fba1a13845f049fa383c26cbf853ca1a684d35', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'bdab54bc623e445bf23fc8324f23a77ab2dcf3d0', variant: "required", required: this.required }), h("slot", { key: 'da94b4c8d6ed9507950c176cf12c8c8a091674b5', name: "label-info" })), h("div", { key: '15117bec395077d508b5e8a4c720b4ef4540166b', class: "gux-input-and-error-container" }, h("div", { key: '9be16da9d96ffffc5d2f08d5f205f625fbce3190', class: {
+        return (h(GuxFormFieldContainer, { key: '58166543ea3396b6a2f010d8ad25839f6da9862e', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '81f159bde9db11ef976e52c7229a8ffe7a06f22a', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '7d3c829d0551f6924f393a597f00caa1cc6e7bc8', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'adf56d285a6dd185e3b245c0830c238d250025a8', variant: "required", required: this.required }), h("slot", { key: '666f6a5e421b15988c8b62cd6ce3e1b6336a88cb', name: "label-info" })), h("div", { key: '7a74fab6c5ea13071f9b3d76ce45558e635d9c92', class: "gux-input-and-error-container" }, h("div", { key: 'b546aee27c23e2c78c0737506a6b24c71d01bf81', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '7cc45a51aedbb97832dbb2f7645783e28f1c3627', class: {
+            } }, h("div", { key: '9fcd7df004c874c3d5ab3f7d4bef0835e7a924c0', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("gux-icon", { key: '8dab67c6d68f6712f2c3bee6507aba2bc51b1fc3', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'aaea9d4ca0372616ce24be06aef6f8b419bf161b', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '02d266886d64ac5e7e3a01cf47e84178a1339ab3', show: this.hasError }, h("slot", { key: '4cd265a03f79505dbeca1514c4040d61e08641ba', name: "error" })), h(GuxFormFieldHelp, { key: '45dc38aa6b6b2727719863759e2162e3a07390a9', show: !this.hasError && this.hasHelp }, h("slot", { key: '2bd49840dac7d5233def35e135631c5a3b27be38', name: "help" })))));
+            } }, h("gux-icon", { key: 'a84a5af69848417cb3722dc9cb0827ad4ba47fef', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'fab262d30b38203f5ec6ceb9bf2c733b7920530a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'd6f71131cc9d8870ac0e4b40177ddec6806b89e7', show: this.hasError }, h("slot", { key: 'f847c4449ebd17bc83307aca26e61242b900decc', name: "error" })), h(GuxFormFieldHelp, { key: 'a80e3898c62e3f2e1617d5f1babb73001744aed9', show: !this.hasError && this.hasHelp }, h("slot", { key: '8bdd443766bf846d9e02593167152fcfe144bef2', 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

@@ -83,13 +83,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'f844fdb5b498ef8a8b9a34ad3e5eb92bc6a4f3c8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8bd9aa3cf9f5f7b28133c3224611958a6fc73921', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '6f9b1efa8056904ef73ca5d7c438dfe24f18f54e', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3e7bd70e01b8115d69e003195bdd7f046d5e16e3', variant: "required", required: this.required }), h("slot", { key: '1738200114f29f8746cc10af3b2c09aa533cbbff', name: "label-info" })), h("div", { key: '4955c27f50142a08a815e56cd88ea2eb44b0ab0a', class: "gux-input-and-error-container" }, h("div", { key: 'cf6b1c3597e86176cd5bfe3afab05a1f6d0751c3', class: {
+        return (h(GuxFormFieldContainer, { key: 'f6c8c4c85835b1edf47e58d893b81d0d7757012b', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '31962d695482f94ed0323c2f81efdad6c73f562e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '893612c4993892cad7eb814eafec1ba7f2fe4799', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '4cc0d7cd115707185f83e36e9b43f47c200870a3', variant: "required", required: this.required }), h("slot", { key: '9ce8d582a5f9a86cc958b7bacadc1ff34eafa99f', name: "label-info" })), h("div", { key: 'ff5c8045ff06e8d0e3ac28ec6de066af5bcdfe62', class: "gux-input-and-error-container" }, h("div", { key: 'fc10ef8a25b5fa3a432073e661ba94d76a8ad4cd', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '386f8c8acb08f20db807a3cf00f4584454bcfa69', class: {
+            } }, h("div", { key: 'e29c43bbe855965bc23d14c941f38ff5f0145464', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'dfa0e7e042c52181616043207ce8ee31614b0012', name: "input" }), h("gux-icon", { key: 'f75c2764607b6751626564a4c1515199d52bb454', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'a40c957740b240dc83fb93054b875f93eb64d28a', show: this.hasError }, h("slot", { key: '7c20523f6a5dda29ab764d1a92ae69b6f886923e', name: "error" })), h(GuxFormFieldHelp, { key: '079983b7741fb9f295dba4c2070e2d1a03816793', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a53da5835454447df383c75e4b15cbdd816fe90f', name: "help" })))));
+            } }, h("slot", { key: '226af5f2dfdb0b7a200380f495ec462fae6dd24f', name: "input" }), h("gux-icon", { key: 'c8c63569f5dbd6ca9c4ec0e776005d4144b1feac', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'dc2212a149ab0d7262f8dd3b6531dc2b4e3aba88', show: this.hasError }, h("slot", { key: '27165c16911fce8020c79ced2cdeca9c3b5e0223', name: "error" })), h(GuxFormFieldHelp, { key: '51aba62b1c71351a5a0771201606ddaf4a9b5d41', show: !this.hasError && this.hasHelp }, h("slot", { key: '5f3f4e69893e949df23c07f86190adeecfa95102', 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

@@ -87,12 +87,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '3d08751b790371c6338efc65b68d07a360705b97', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '099e32455d842681b4e3cf19f130064bf939a55b', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '241a7c6d259bbe471722516ff8abef1f09593213', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '90a1fae28e9a3fbb42a25f4893d43022cd4ca136', variant: "required", required: this.required }), h("slot", { key: '8c1345acc126822cc735516aa0674c71d24af7ef', name: "label-info" })), h("div", { key: 'b7844b5d4c745d2341257064d934b5e2ef3b423f', class: "gux-input-and-error-container" }, h("div", { key: '562f87e2983f5c59e440fe1f0b7eb9fd17428c2a', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: 'b76aee7edb1ff7b0f1e6b4ce571322522bb177e7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a47b9dab6bb6c102c2da9af51511032b44a90c9c', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '5e89fda87c2c0faac2524339a62b20ed448977a7', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'ae3713273e686a8653a86a8792463ae8d009fc46', variant: "required", required: this.required }), h("slot", { key: 'ed7b5c67058e70991d1ded49436eb52bc61ff621', name: "label-info" })), h("div", { key: '9b2afb7a388af5685d6234dba49a830b35f72734', class: "gux-input-and-error-container" }, h("div", { key: '19da97dbe230588e3cf599ed08cc0eeb72115d6d', 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: '1dbc23505679a3339ca1c19caadc2e65a3f6eece', name: "input" })), h(GuxFormFieldError, { key: 'c6b7511c3513fa247c7161bb54c8abe4f3b1dfef', show: this.hasError }, h("slot", { key: '6fa5d8f256c8cf0858301411c044b51374f2eaef', name: "error" })), h(GuxFormFieldHelp, { key: '4ec4ac7db162b540089d20230753e6a4d5f23cce', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a33dcc3483b91213e1ce01585b29e525c2fced75', name: "help" })))));
+            } }, h("slot", { key: '14720170cb4ad48c3d31d33e99dbf2cd973f9cba', name: "input" })), h(GuxFormFieldError, { key: '3d2acd4b6df2739f83469fdceca895ae3382a087', show: this.hasError }, h("slot", { key: '7eb51dc5366d655b934c5ad370cff1bb2dca26ca', name: "error" })), h(GuxFormFieldHelp, { key: '790dc577a55013b0ef95a383abba64f7da4b4443', show: !this.hasError && this.hasHelp }, h("slot", { key: '0477a424465dca40e4b2f0005874c754e722fdc4', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -92,14 +92,14 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '720b129f00c7f5bab57e2abef1f58ca88f478cb4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '5767d25bcc6ee3e09f1a5b9f02ddc9c7896d25ea' }, (_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: '4cff3066c0a0e277ca413df400e6e406cc7a9914', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c450dfef69446b2b3e67ba9bb8f55a0419d394a7', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e5bbc41943239972bfd246fc7a0f0e1c6bdfb1a3', variant: "required", required: this.required }), h("slot", { key: '0513a3362810b33854aea23fec274f70d162f95d', name: "label-info" })), h("div", { key: 'e97f3ab849f206224e15539bdd803c76200920bb', class: "gux-input-and-error-container" }, h("div", { key: '05b2332efd5aa383b4214502ab75878cc81286bc', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '0e9e7be8b66bfc3b4d1849dfc2bfc78283e048d4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'b5e05e867417fd304ce50362cac1f8d5c25cafc1' }, (_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: 'e20d5248bce984854ca86f06a75db622e6932ca9', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f439bed72e173cd0df8885a041bfaaf967926a7c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '261b3daab809a96e66a736bf909a7cba9fc84d68', variant: "required", required: this.required }), h("slot", { key: '246fba150fb21e81f7e57e37642bc1a6c39eab43', name: "label-info" })), h("div", { key: 'e5c6e5c0231d625218e2e741822743a06732d9d9', class: "gux-input-and-error-container" }, h("div", { key: 'b11307f8c3a99010754f8edec868de5fd807e171', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '050e0189fbccf71626403fa8aff0edd50a8e0c62', class: {
+            } }, h("div", { key: '3c82d5a23c27520d1f17ce8b571c010393f1b5c4', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '1e328e4322a1136e4e77492bdc31ca4910ed77d2' }))), h(GuxFormFieldError, { key: '3814c154c0b004a1fd23f5dd836ce399d29cd40c', show: this.hasError }, h("slot", { key: '17b3f64a99504b77f10b773d67273f9bfed50fa1', name: "error" })), h(GuxFormFieldHelp, { key: '43de587757903e6a84b464f309029aa56c41152b', show: !this.hasError && this.hasHelp }, h("slot", { key: '138b21a8b9d81011c21bda2ba1e821ae6c99dc30', name: "help" })))));
+            } }, h("slot", { key: '82d9fa74282eab284cf28e0fae495b94567172cc' }))), h(GuxFormFieldError, { key: 'fc8385464c9bfbc5d30e1b9b16270401410721a9', show: this.hasError }, h("slot", { key: '1648776e8456bd82c977e5b58c3cd00e8b46e2d7', name: "error" })), h(GuxFormFieldHelp, { key: 'c8377cda699a27c33d0e88cc971e25ca9870b636', show: !this.hasError && this.hasHelp }, h("slot", { key: '2fbf51d0537398274f956fb2eec26f2ea5f4451b', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {