genesys-spark-components 4.58.0 → 4.59.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: '452a88b472a77083f5878406b9b1f84a54e2941b', 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: '4ca11339451208acf905fd0f2c7a4e8551b04c18', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5d17e46afa81209b5e3c60ff94e8dd546fb631b3', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '00115f8167fde4e5631dda50554fb86b75b82149', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'bf6f36a21065b4c932f1efd32d06c62c9f284534', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: 'bf91840ef34f3e67ea38000a21956c0bafa4d7f6', show: this.hasError }, h("slot", { key: '0c7ce3f52902ec67d64efc1b804640abef240b72', name: "error" })), h(GuxFormFieldHelp, { key: 'a90199cbc3cf58b7c5693dc9fe98342867cf134b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a63394f60f0820320b89e61b2d856bf6b068b61b', 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: 'eae9c8659ddb5471f4cc13d8033ebce2e159efdb', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '7e5d682b6952513634bc8789ade7630f012b6bce', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'eb6428c53a2c5f8a3159c925fd6e3797473987aa', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '0ad6c809bcd37ca397cce65ef7a38c2567b7d12f', class: "gux-input-and-error-container" }, h("div", { key: '78b59a3f13a75474f930587c8bb5c309e3b96ace', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '5bd3fd5ac4a9f38e929fcd077b62cca43a1aae70', class: {
+            } }, h("div", { key: '915b59490d2c95d8276f43b6087a01be58c52cd3', 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: '9d9e1565619b3902931afcba8bbff66c99e32015', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'ecc5fe01557818ae02c52dd9b4beb9e2eb474cb8', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'e74de993184468a668f9d7f087980582dd13b53a', show: this.hasError }, h("slot", { key: '20277ecb11cf72797d0dc8d8457be3324e200b33', name: "error" })), h(GuxFormFieldHelp, { key: 'd1a78b8009dfab3af50999a38a4cfd276106b6c5', show: !this.hasError && this.hasHelp }, h("slot", { key: 'c938fc9efec79d50f30dcd139ec344dfbf4743e7', 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: '72ea38787283ae092e18b7f48e004024a1e59b98', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'bc46f96bcd85b45f328618c329b800a728404f96', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '11cced80844a01b95f6dc2120d9a925af876bb58', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '61840cecfc4e0ca4b656af5da003d5590c54f906', class: "gux-input-and-error-container" }, h("div", { key: '822f2f358003f14cab79ae3f76ab18987827fdce', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'baacc8768dc47af622c6dea486711495ba2b402a', class: {
+            } }, h("div", { key: '6874351a8b3c91b08c96c77aff17b97c38dc38ae', 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: 'a367d5f06134d52039267207ee9d5e234c9a4572', name: "input" }), h("gux-icon", { key: '516bf6ba0bbedf4a0ef93ffd4ac360a7163b7340', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '3f2921b59ed462110f8e62e427165cd7e7269961', show: this.hasError }, h("slot", { key: 'eb50d621311828cf4536957cac6dbebd6ffd1ff3', name: "error" })), h(GuxFormFieldHelp, { key: '48675c384e89c5201f85beecf80d4cb7a36069fd', show: !this.hasError && this.hasHelp }, h("slot", { key: '4a09eb9739507a5b98fe7405dcba1d389a2106ea', 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-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: 'e979a94377785246cdb54e0c02c9d353bdfb951c', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ed29b2893a7146495d708a652c461a172d11de01', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'e59b2d31b8c5c27894ee08adeafdf04500b31664', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'c3ec954743e260c59c2812b6d4a908cea3022b93', class: "gux-input-and-error-container" }, h("div", { key: '4367a234eb8ce018f492ca654144dcddf522c5fa', 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: '817d605e6e4a6b3eecb982462a499cd0841f9a92', name: "input" })), h(GuxFormFieldError, { key: 'c8cb6c4de92e4525ccee2240806653d8a3cda6a9', show: this.hasError }, h("slot", { key: '7bfe9951e9ca42702f0ebb46750b8b447e3de122', name: "error" })), h(GuxFormFieldHelp, { key: '57fc8d15edb3faccbc3f3f15cb5fad38d7d67285', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd0545ec9191cd249ef6465a0b48258140cfa8bbb', 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: 'd9f56ba03fb8bb91c762ac534d2b2c0c830eb617', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '66bb27dd485a699b7556d69d73590b1f72bd6dde', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'e8d11ad28178d7897e47f11bdce14ebcc7b95769', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'f38261ee3eae550224508fa1147938bd36a7ac55', class: "gux-input-and-error-container" }, h("div", { key: 'f1d0954da1b5ffca1fc9ce1e5482d545f5d56199', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '097fd4601c7363b394ef8910b1d7e4d93967e6e2', class: {
+            } }, h("div", { key: '62e1515b202fb7d6804ebf86b7ec1ac9122d45ae', 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: '6943949cb8010d2385acc6e6da2c4a7be8061a3c' }))), h(GuxFormFieldError, { key: '2118d51bc453b2185792b24b54c84a2f617d7d95', show: this.hasError }, h("slot", { key: '13fc21b1f8e93e5ff3291b2733361988dc474f5c', name: "error" })), h(GuxFormFieldHelp, { key: '0a3044bae2f160f11bda134af97c6ced67cafcd9', show: !this.hasError && this.hasHelp }, h("slot", { key: '36a334b034afa7e68c1a66353fccc62ee7c42462', 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: 'a261e4a0dfef65293bab43cb0b24b8046a049e24', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '51a8a9c6415a8558ff16b0a806f5398581d6238b', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'df1aa773111f8c9177f8f1eede33f456834bcea3', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '68962311832bc62a7e8356c03e64ff7f2e12e96b', class: "gux-input-and-error-container" }, h("div", { key: '4248ebb1c03f89a5b2deb652ebe69353cfd9999c', 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: '3db291ff951e407a0d1da4363594688a45ea5364' })), h(GuxFormFieldError, { key: '422f599fc666a2c1a98e3b2672d07eb97024ced1', show: this.hasError }, h("slot", { key: '7131273984482a30e9741ab33b91b9cc2f3061a1', name: "error" })), h(GuxFormFieldHelp, { key: '01463b42824158972a53ea3505fc7274c9ab7939', show: !this.hasError && this.hasHelp }, h("slot", { key: '00137dbca755e504388e378deed7f52ccb05b773', name: "help" })))));
     }
     renderScreenReaderText(text, condition = true) {
         if (condition) {

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

@@ -3,5 +3,5 @@ export const GuxFormFieldError = ({ show }, children) => {
     return (h("div", { class: {
             'gux-form-field-error': true,
             'gux-show': show
-        } }, h("gux-icon", { "icon-name": "fa/hexagon-exclamation-regular", decorative: true }), h("div", { class: "gux-message" }, children)));
+        } }, h("gux-icon", { "icon-name": "fa/hexagon-exclamation-solid", decorative: true }), h("div", { class: "gux-message" }, children)));
 };

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.js

@@ -8,7 +8,7 @@ export class GuxFormFieldInputClearButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '0c0332679ab95514e045ffe45c8859585deab429', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: 'f3ee13ea9fc4643f88909327f3c82a1011b5e78f', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (h("button", { key: '3b8fc6590a53d050d63f2f8ccaddb6784325c0a2', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '52f5082dfa228dafbd261917a1d4ee31ac4be68d', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get is() { return "gux-form-field-input-clear-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-icon/gux-icon.js

@@ -57,7 +57,7 @@ export class GuxIcon {
         return svgElement.outerHTML;
     }
     render() {
-        return (this.svgHtml && (h("div", { key: '9fd45bbcc6dcdd3fabc148ca1481d9ee8c2faae7', class: "gux-icon-container", innerHTML: this.svgHtml })));
+        return (this.svgHtml && (h("div", { key: '77650cbcabc6a74191d4e8c99083dd4f25dfe730', class: "gux-icon-container", innerHTML: this.svgHtml })));
     }
     static get is() { return "gux-icon"; }
     static get encapsulation() { return "shadow"; }