genesys-spark-components 4.58.0 → 4.60.0

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

@@ -0,0 +1,213 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { newSparkE2EPage, a11yCheck } from "../../../../../../test/e2eTestUtils";
+const axeExclusions = [
+    {
+        issueId: 'color-contrast',
+        target: 'gux-form-field-radio-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-radio-group-beta,span[role="presentation"]',
+        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-radio-group-beta', () => {
+    describe('#render', () => {
+        [
+            `
+      <gux-form-field-radio-group-beta>
+        <label slot="group-label">Food</label>
+        <gux-form-field-radio>
+          <input slot="input" type="radio" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-radio>
+      </gux-form-field-radio-group-beta>
+       `,
+            `
+       <gux-form-field-radio-group-beta>
+       <label slot="group-label">Food</label>
+   
+       <gux-form-field-radio>
+         <input slot="input" type="radio" name="food-1" value="pizza" />
+         <label slot="label">Pizza</label>
+       </gux-form-field-radio>
+   
+       <gux-form-field-radio>
+         <input
+           slot="input"
+           type="radio"
+           name="food-1"
+           value="sandwich"
+           disabled
+         />
+         <label slot="label">Sandwich</label>
+       </gux-form-field-radio>
+   
+       <gux-form-field-radio>
+         <input slot="input" type="radio" name="food-1" value="spaghetti" />
+         <label slot="label">Spaghetti</label>
+         <span slot="help">This is a help message</span>
+       </gux-form-field-radio>
+       <span slot="group-error">Subject to availibility</span>
+     </gux-form-field-radio-group-beta>
+       `,
+            `<gux-form-field-radio-group-beta>
+       <label slot="group-label">Food</label>
+   
+       <gux-form-field-radio>
+         <input slot="input" type="radio" name="food-1" value="pizza" />
+         <label slot="label">Pizza</label>
+       </gux-form-field-radio>
+   
+       <gux-form-field-radio>
+         <input
+           slot="input"
+           type="radio"
+           name="food-1"
+           value="sandwich"
+           disabled
+         />
+         <label slot="label">Sandwich</label>
+       </gux-form-field-radio>
+   
+       <gux-form-field-radio>
+         <input slot="input" type="radio" name="food-1" value="sushi" />
+         <label slot="label">Sushi</label>
+         <span slot="error">Subject to availibility</span>
+       </gux-form-field-radio>
+   
+       <gux-form-field-radio>
+         <input slot="input" type="radio" name="food-1" value="spaghetti" />
+         <label slot="label">Spaghetti</label>
+         <span slot="help">This is a help message</span>
+       </gux-form-field-radio>
+       <span slot="group-help">This is a group help message</span>
+     </gux-form-field-radio-group-beta>`,
+            ` <gux-form-field-radio-group-beta disabled>
+     <span label="group-label">Food</span>
+ 
+     <gux-form-field-radio>
+       <input slot="input" type="radio" name="food-1" value="pizza" />
+       <label slot="label">Pizza</label>
+     </gux-form-field-radio>
+ 
+     <gux-form-field-radio>
+       <input
+         slot="input"
+         type="radio"
+         name="food-1"
+         value="sandwich"
+         disabled
+       />
+       <label slot="label">Sandwich</label>
+     </gux-form-field-radio>
+ 
+     <gux-form-field-radio>
+       <input slot="input" type="radio" name="food-1" value="sushi" />
+       <label slot="label">Sushi</label>
+       <span slot="error">Subject to availibility</span>
+     </gux-form-field-radio>
+ 
+     <gux-form-field-radio>
+       <input slot="input" type="radio" name="food-1" value="spaghetti" />
+       <label slot="label">Spaghetti</label>
+       <span slot="help">This is a help message</span>
+     </gux-form-field-radio>
+   </gux-form-field-radio-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-radio');
+                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-radio-group-beta>
+        <label slot="label">Food</label>
+        <gux-form-field-radio id="pizza">
+          <input slot="input" type="radio" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-radio>
+        <gux-form-field-radio id="pasta">
+          <input slot="input" type="radio" name="food-1" value="pasta"/>
+          <label slot="label">Pasta</label>
+        </gux-form-field-radio>
+      </gux-form-field-radio-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 radio');
+        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 radio');
+        await pastaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(false);
+        expect(await pastaInput.getProperty('checked')).toBe(true);
+        await pizzaLabel.click();
+        await page.waitForChanges();
+        expect(await pizzaInput.getProperty('checked')).toBe(true);
+        expect(await pastaInput.getProperty('checked')).toBe(false);
+    });
+    it('disables the slotted form field radio inputs', async () => {
+        const page = await newSparkE2EPage({
+            html: `
+      <gux-form-field-radio-group-beta disabled>
+        <label slot="label">Food</label>
+        <gux-form-field-radio id="pizza">
+          <input slot="input" type="radio" name="food-1" value="pizza"/>
+          <label slot="label">Pizza</label>
+        </gux-form-field-radio>
+        <gux-form-field-radio id="pasta">
+          <input slot="input" type="radio" name="food-1" value="pasta"/>
+          <label slot="label">Pasta</label>
+        </gux-form-field-radio>
+      </gux-form-field-radio-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 radio');
+        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 radio');
+        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-radio-group/tests/gux-form-field-radio-group.spec.js

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

@@ -35,6 +35,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -48,11 +49,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -82,9 +82,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'f6e3915cb942511008c37f877f136bf9fd3556e3', class: {
+        return (h(Host, { key: 'ab84b7a0a6ffe60550f76789f435a86e32850874', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: 'f01df73d2706a27f1bd79517e80129d015be9f83', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b63c5b4683977385ec66cfd305d3787406874821', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '21ec96f66320f1ca51cad635333201a770273bea', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'ae19a718a32a2a1316f8bab27470b6c2d88d173e', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '5ebbfe83db1319cc818b1c1ef525b17d96f568df', show: this.hasError }, h("slot", { key: '6c2128ae9ccfa2d4bb59effb312b8709ee377982', name: "error" })), h(GuxFormFieldHelp, { key: '899f946a19fae07206d637b5b6c8ad3cb814327c', show: !this.hasError && this.hasHelp }, h("slot", { key: '93be28cc012997c736d0fdd880bce2be479ce945', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '7e37db581de411b3c8548ef9142e11362c59ff41', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '81bfda9e439bcdf6d4a444cd53ae80cb6d186d60', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'f1536b5af281b9051919c5c11d18a7e5633d9603', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '0868eb6e6af3efe69db3b3d3c5324a6450f7eb73', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '91130872a632988e5cde9765dd74a27a8a0cc4f7', show: this.hasError }, h("slot", { key: '3081f22e9dfc5d58cc42bd6075fa225fb4dbe036', name: "error" })), h(GuxFormFieldHelp, { key: '0e3d8cf3afc0773f369f19257916c919dd6c8ca2', show: !this.hasError && this.hasHelp }, h("slot", { key: '02b487e1c73af225d7227b56d9fc1bb9da51498e', 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.css

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -62,13 +62,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'cc4ddf4554a3170d2b63552c31381c9bd0defddf', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '95415f4ef625a1aa2de0c27b4bff3f9f71cba452', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '4fd148a5e4cbcbc7db5213f96662e1164c512be9', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'aafd0448d7845dfd784dd8174f80a675fd8aca11', class: "gux-input-and-error-container" }, h("div", { key: '264cd6b96b0f69bf0b2e2036a1e971dcbb232a77', class: {
+        return (h(GuxFormFieldContainer, { key: '42779f1c2d0cab45b38f18e6ae50166f70f257f7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '080fb3751b41d43042a65ac6a2bbf666d25f0be4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c6ffd706741bb8daeb959b720daa0c03a44a27e5', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '525766420143a047d9f7ed56ce06399f100931a2', class: "gux-input-and-error-container" }, h("div", { key: '83073128ad9ed6c7a168e77c690ee4792900a4f2', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '5bd3fd5ac4a9f38e929fcd077b62cca43a1aae70', class: {
+            } }, h("div", { key: '5ba45dde5c2aab840675dca2ff37272527793d01', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("gux-icon", { key: 'a71d0ae281a9b9a4d3110cc7d0524cf7af8baaa6', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '959fb60d5e3a7debf9a54dc7929705bc9d8ea9db', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'e8f336eb8ce7abe755670a50b806ed427eaf8254', show: this.hasError }, h("slot", { key: '98aac5c59dbe1ae93ea490a3ad27b8d8c5f5b5e9', name: "error" })), h(GuxFormFieldHelp, { key: '197f16c081cd844f5cde3c285459c0a06b5ef21b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a0ba4381b562ab69c3db102f14b213825f2e90d5', name: "help" })))));
+            } }, h("gux-icon", { key: 'f673d51be68a9a3ca29d75e71fc78b87bfc6e588', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '317c0dab47ae69fece7829507aa3800e4f08a384', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '897ae0159c0abfe24724897b079d631e878c00a5', show: this.hasError }, h("slot", { key: '5ec68b0692c98b2154f2d7baefb109b1de6ad5f9', name: "error" })), h(GuxFormFieldHelp, { key: '1f457eae9906f50809f53510e36b9aa799294772', show: !this.hasError && this.hasHelp }, h("slot", { key: '5acac15b6f1306fe62398ff136cfb487b35e2be0', 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.css

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -53,13 +53,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'b6d615322b4665e220cd056b7ddc269b1e6acf76', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ac5df58df2f5936cea1c3e4b3c90df66e3536f00', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '041304f77f5ad972b85fbfde9d19a3e50d38471e', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'bb07f72d3dd643757d703ff48b439b813c12200f', class: "gux-input-and-error-container" }, h("div", { key: 'c64707b087cc48e30ef822f300f5a50a119dd71c', class: {
+        return (h(GuxFormFieldContainer, { key: '0f05fda9050e25ffa3dafa20b650a79e5451b557', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'df77654c404549e8649b9fd0825f7cbf2e133271', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'cc902ff85b3a340db13c2bf984af0129be98b9fa', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '5798224cf3620259bbcc051327772bf484b43065', class: "gux-input-and-error-container" }, h("div", { key: '7dc8d4a80418c7f26b4987e0f5a7b9124ae12399', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'baacc8768dc47af622c6dea486711495ba2b402a', class: {
+            } }, h("div", { key: 'd363aa3963e9be7174d74e96976244ccc3ce7d37', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'd56e4b407b17c9b0d72fe3907deaab936e30c1d3', name: "input" }), h("gux-icon", { key: 'f7801ad158649c466c7a7bbdd68b11ca9afdf5fe', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '533c1fc74e0052a38796efb480f4c42c775372c1', show: this.hasError }, h("slot", { key: '9234e675667b39c2f32ef087615fc9f98d4d005f', name: "error" })), h(GuxFormFieldHelp, { key: 'be26e942e42e68c093fdbb29ccfb2dae299421f7', show: !this.hasError && this.hasHelp }, h("slot", { key: '0fcd9d8efa6253bd6ea233f1f5b26b3ab0e14ed1', name: "help" })))));
+            } }, h("slot", { key: '5933423758246e0a2e6ac345eb74398372c20f4f', name: "input" }), h("gux-icon", { key: '6ad7a5a76f4f84c4b2f8102705ea523baac3f542', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '76effa57179c825bd47ac1c4b608d0528b5f55c5', show: this.hasError }, h("slot", { key: '675f20bf2273b7d82d34a7e628b1dbe70e9e70f7', name: "error" })), h(GuxFormFieldHelp, { key: '56d5679c4bdc9a436fc703b4450ae2d18bb13a9d', show: !this.hasError && this.hasHelp }, h("slot", { key: '3bf29e3d11f598851a2538f6096760a068cc2627', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -80,15 +80,15 @@ export class GuxFormFieldTextLike {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '31d901d8eb74880635835b24c1170639de41dd07', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '6a7cf6ebe553906aebfdff553451be781aa91ff4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '33483280309581609f4346e678b0ea3fdaaff2d4', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'ed8493e2a749caebb2d10d47aa6669303bd50009', class: "gux-input-and-error-container" }, h("div", { key: 'ca5bf5c393573822d3a09ddc4e1ea7c7c1f0f680', class: {
+        return (h(GuxFormFieldContainer, { key: '86a510be1423b2e46f8f0e8457dde0c1e9df13ed', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '63c3fc02eb3ec146075c2da84c462f27822ca808', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '4ef1afb40888de7df1642f23286e5cffcf6d5864', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'fd35d679cdac2f9c64eedbe144e5792a2cfa03ad', class: "gux-input-and-error-container" }, h("div", { key: 'ae0d6f2d3662997b8e2d7dcb8895ee2a57033119', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '7aefdc2e126f29753fc9240e16bd44169f603158', class: {
+            } }, h("div", { key: 'faced97c3fd4504e59eb8086b0adef95b9ec881f', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            } }, h("slot", { key: '28430db859b8834f0468734b910490cb175593d9', name: "prefix" }), h("slot", { key: '2fff82d35dcb63d3020da2c8258e5f3f610ee7b5', name: "input" }), this.renderRadialLoading(), h("slot", { key: 'bd2bf3447f52947db7d292d3caa37de8a3aa0a07', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '60f62b68271f01de02e14b3fbada16805f203709', show: this.hasError }, h("slot", { key: 'a0e1911c34fe75dbc312e752cbbf6ae2ba003e8a', name: "error" })), h(GuxFormFieldHelp, { key: '9cdec572ca90604f8ed1f04b512fceefb4012cac', show: !this.hasError && this.hasHelp }, h("slot", { key: '717b5dbdfe1df684c1c98ad7a3c28453ea411cc7', name: "help" })))));
+            } }, h("slot", { key: '7e936d0be636981e6404c559e20a29dbd8654eee', name: "prefix" }), h("slot", { key: '3945e2a3c79ff28178c355002c576c6fa0fbe099', name: "input" }), this.renderRadialLoading(), h("slot", { key: '2ed2ac89134fe77eb62e286a84d0c0ffe4fe13d2', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '3abfa87d4642948fd21dfd8748e30efbcd18d527', show: this.hasError }, h("slot", { key: 'b77a1af625c5901e31809fee6e88aeadbb76c851', name: "error" })), h(GuxFormFieldHelp, { key: '1e1e5474f87d937186c140690f2e8d85cde0c14a', show: !this.hasError && this.hasHelp }, h("slot", { key: 'cffc4e02f2ce1e6c0f64621e760bcf6f5b67c627', 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.css

@@ -10,6 +10,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -23,11 +24,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -57,12 +57,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '6593436e544045a488bc45bacfef0853ed294c26', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '0f6125b263b93e1dae58c1e4ddae04aef75f5a3e', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'bb4d1106e443bef1b0497a72d3a9a12ff1eb5fc0', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'a2301cbdcfc1c6f6c29231954b13ed6175c9dee5', class: "gux-input-and-error-container" }, h("div", { key: '30ee81e751f72c7c5d399e387fd1f3679207ad11', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '3e5c4c4fbcac1d5bf9d19d95d7bc1fd70d43019e', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '113d8de398b8f7d22bcb07531103c82a3a8e7abf', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '3a310279167b2adeeed50e44481c8bbf866d1157', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'f2d964b6e336fe7be88e6e0ba568fc01bf0ef485', class: "gux-input-and-error-container" }, h("div", { key: '712f3f48fb15d0c1481fa1cf81723e0121c736fd', 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: '7a9a6423690e30d972f71015bd61f983037fd6c6', name: "input" })), h(GuxFormFieldError, { key: '2cfadea783445a7376831407a1309853fc0243aa', show: this.hasError }, h("slot", { key: 'dfaa9a2fe5e87af43a87eaadb81871c7a782bec8', name: "error" })), h(GuxFormFieldHelp, { key: 'a4d2178c5862ba9132acb551c3776121b032781c', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b4ac570b98dd9ceca915aff9bccbb13137db65a8', name: "help" })))));
+            } }, h("slot", { key: 'd9da9023de29d890a935ec1e0b0b79bf0f7d19b1', name: "input" })), h(GuxFormFieldError, { key: 'fa7bbaf903fa1eb0554a29750bbbc018806620e4', show: this.hasError }, h("slot", { key: '790a3c8ae66649ff548e9c651882c529abd3df47', name: "error" })), h(GuxFormFieldHelp, { key: '689e7ce01a75b85e0219096b36bcad0020afd167', show: !this.hasError && this.hasHelp }, h("slot", { key: '2fe135afeb4851885897b3227fd8a67d18f40f53', 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.css

@@ -19,6 +19,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -32,11 +33,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -61,13 +61,13 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '95020038fca4e39446f63d759008055f74368cc8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '009e300862c0f0ecb0131d40be71073734464231', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '645d7bc64a258ada05793b66280ddff36bdc468b', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '67e394357c955ea072c05618c8193c59628073f3', class: "gux-input-and-error-container" }, h("div", { key: '2bbb28ee1e81b1f929c9174788b1738d1fd7b8bd', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'dd411e739df07f7c1eba5bd79dd57bc65cd03caf', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'ce01d20567e7424760c81e9fe6668e33ceb12d0b', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '6f2915ad697f455b4f08139eb9838a9e636aa3b8', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '068d6aadb8a70d7b77a82f7837d5a4021eb272fe', class: "gux-input-and-error-container" }, h("div", { key: '4e45c08204dba5e52018bdeb38c39d3454e8cb75', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '097fd4601c7363b394ef8910b1d7e4d93967e6e2', class: {
+            } }, h("div", { key: '857c8ab3f5e7cd4c6bca4f3fb51509152d416a22', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '78d142411812126a518cf6b87f0e572b672c02f7' }))), h(GuxFormFieldError, { key: 'c6144e5164cac92910f761c00839db6dfea5a97b', show: this.hasError }, h("slot", { key: 'e1d0a01c6ef55734bf884249063dfcb4b8eaea67', name: "error" })), h(GuxFormFieldHelp, { key: 'd22cd2f3451c400b33732a9da073a97c527f9439', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e08f3ed06594191406eaac53e380a8d2e41f2807', name: "help" })))));
+            } }, h("slot", { key: '8d5b8a0856f1562a4d7437f6512f592b6342c228' }))), h(GuxFormFieldError, { key: '00d2bacf3b165896326edf957e8b361d33a72cc4', show: this.hasError }, h("slot", { key: '409e5e1117d520e5a3e8d00f70726545114378df', name: "error" })), h(GuxFormFieldHelp, { key: '53b4932c7332ba0cf6428e7ffa6603afc793dcfa', show: !this.hasError && this.hasHelp }, h("slot", { key: 'e16ced5c18d6df46e4ff2fb849d74657dc16b068', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

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

@@ -19,6 +19,7 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-formControl-helper-gap);
   place-content: stretch flex-start;
   align-items: center;
   padding: var(--gse-ui-formControl-helper-errorPadding);
@@ -32,11 +33,10 @@
 }
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
-  align-self: auto;
+  align-self: start;
   order: 0;
   min-width: var(--gse-ui-icon-size-sm);
   min-height: var(--gse-ui-icon-size-sm);
-  margin-right: var(--gse-ui-formControl-helper-gap);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {

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

@@ -61,12 +61,12 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '85bb9f285de4cd00694713b301dc2adfd28e8984', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: 'f739520121334450a14e77ba3c6ca242f37a1e58', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '22b31c76b41619552aad0e7814a697f886a6addf', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'a69a76166eb91d58b6a742e20ab139f60e787bc7', class: "gux-input-and-error-container" }, h("div", { key: '8409b08f18ee5d60240f3b871f511d1be0a2241b', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'f94434c2698f294abbdb8bb06b05c634f6bd7544', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '36b28fee558e5a55565ee0046a05a8e4074445e8', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '4b1ae9a76308987b21ee89477e28f0b9ccee5590', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '57e80ad01c6c5d4c70851a53c6af5960a194ead4', class: "gux-input-and-error-container" }, h("div", { key: '9dba2395f519b52dca9af3e343665a5a4b89f4a3', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '602f45d26e9b291556afb2bd77100afc1135ad36' })), h(GuxFormFieldError, { key: '6c6fe3090a4d2d4a2d949312da32ea25d65ef646', show: this.hasError }, h("slot", { key: '26fabdbc87c948541c980577cfe33268fc3d4d6c', name: "error" })), h(GuxFormFieldHelp, { key: '0c9afa80f404476b686e21920f1f69d4cf48ab49', show: !this.hasError && this.hasHelp }, h("slot", { key: '863206de4186c1d90e6dfd711e3eba2651200e90', name: "help" })))));
+            } }, h("slot", { key: 'c21a0347234434ec2496fb03c2a45cb156109351' })), h(GuxFormFieldError, { key: '93c6e7fe6a8e300145ffba7d31dbd412978cf6c2', show: this.hasError }, h("slot", { key: 'f63893abd4985dc87d923f7b7df46d0979f70dac', name: "error" })), h(GuxFormFieldHelp, { key: 'e1646724b78fc3be329b135041edec3a455a8706', show: !this.hasError && this.hasHelp }, h("slot", { key: '907afd34c8a11d6dac079c7f2c07574e8e61e790', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {