genesys-spark-components 4.74.1 → 4.76.0

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

@@ -30,12 +30,12 @@ describe('gux-form-field-checkbox-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"
@@ -46,7 +46,7 @@ describe('gux-form-field-checkbox-beta', () => {
         />
         <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>
@@ -57,12 +57,12 @@ describe('gux-form-field-checkbox-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"
@@ -73,13 +73,13 @@ describe('gux-form-field-checkbox-beta', () => {
         />
         <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>
@@ -117,7 +117,25 @@ describe('gux-form-field-checkbox-beta', () => {
           <label slot="label">Spaghetti</label>
           <span slot="help">This is a help message</span>
         </gux-form-field-checkbox>
-      </gux-form-field-checkbox-group-beta>`
+      </gux-form-field-checkbox-group-beta>`,
+            `
+      <gux-form-field-checkbox-group-beta required>
+        <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 indicator-mark="optional">
+        <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>
+      `
         ].forEach((html, index) => {
             it(`should render component as expected (${index + 1})`, async () => {
                 const page = await newSpecPage({ components, html, language });

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

@@ -84,13 +84,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'beea545f0af379549fd6d1568c8e52550eb56e46', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '23c76d3e8ec04e2a9462f8f77b5b550bddd15b2d', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ac8d4daba1212c45b2756f68bfeb6f47b6745e71', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '25e0448b2a586ea0238af32c4728de6efb365523', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'e3dd9a259e040bbc14f3c4a860651e5931a67d6e', name: "label-info" })), h("div", { key: 'ad387ba45672f2c931e86deb4444f7abc7f1d9e6', class: "gux-input-and-error-container" }, h("div", { key: '0dd42ef2d5f0b2c1348fd7fd38c38f7bff6578cf', class: {
+        return (h(GuxFormFieldContainer, { key: '0a39317eebc6d1b0b5095a05f9233f7a89119acb', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'e6ad2446431a1a0e6ff3f7a35199cc6ea4f4ddae', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '4d9e6dc69f9f59bbed04a78db47dc96a36941b32', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5467932eb0dbd4e62c9525f71826628be16626ee', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'ce3f830ef46c878b08fb60f06b34635ea8981c25', name: "label-info" })), h("div", { key: '0cacee7d9692522a64cf92bfab8db70aa22b2ab4', class: "gux-input-and-error-container" }, h("div", { key: '7540aff1d8ee693387e5ff2f72ee0fd5a64ada7e', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'f8316cdd1dcce6f40dff2e01b46245cfb177d3b9', class: {
+            } }, h("div", { key: '4aba3697be096dcf947a6cde9d06b963b31d4ddd', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '0d340e3dde1e70f6b5e4959cf46d13df3cc341c0', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'e1725d3a02298abc52280b678bab9a1dea400b25', show: this.hasError }, h("slot", { key: '92bba41c1afbdca694b9f79a3a7f59444febd1dd', name: "error" })), h(GuxFormFieldHelp, { key: '2871b88f2dfbc94c4578871f7c55d673844c0f7c', show: !this.hasError && this.hasHelp }, h("slot", { key: 'df5758d0e278d0ea602b496715dd739b380ee316', name: "help" })))));
+            } }, h("slot", { key: 'd94ad5e6147de68ce73d669239018437b505d665', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '4442453b96851a84d65571a4cdbd30189148bff7', show: this.hasError }, h("slot", { key: '337a8d583e109816ff9d69f57618c6e42a05c137', name: "error" })), h(GuxFormFieldHelp, { key: 'c3fb67cf3d2bad26c2847d2362e17420951fe963', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd6cc78440ba431d4796fe7559f60ba697657236f', 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

@@ -96,11 +96,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '793b4565a0aa3433dfde881f742dc0d428e893dc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'af8f695d2c95d86876856c2e0b7fce2c786d7dab' }, (_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: '34e04381c808f0ba8d75dc39524ad2c8fcac2bb4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'b803b64eba1031d1dcce7b7c68f51b40ea222324', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f224b6a8132de38200521810048b6c8b2fc4b636', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8876f10c02cd50459d8ea877dc84c7258609a741', name: "label-info" })), h("div", { key: '0dc4e16637109fa4443d717da729f30615aa14d4', class: "gux-input-and-error-container" }, h("div", { key: '5b2320ce332f8998bedfae33eddb6476aa067d76', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'a250369da3c693575bcae560207c82a77982089f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'a7ba0b81a9e17d73100927f11e708aab31338e0e' }, (_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: 'f2626b303a8ce77adc050107c496f0556ab56af6', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '69032596a69268b426c43d8a370de1957adf6364', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b7ae73d2b1d4c9060fb81c6225222d55f0b9ba3d', variant: this.indicatorMark, required: this.required }), h("slot", { key: '68ebf129d77c75e2bb565499ad8da68f85d7a37e', name: "label-info" })), h("div", { key: 'c5813f2aa922a7ece51a84fb2850a659c2694133', class: "gux-input-and-error-container" }, h("div", { key: '98bb80f662b3746c9228a099224c12fffd26e171', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'c049c3f436332eccd76e03bf3d599489e3bac679' })), h(GuxFormFieldError, { key: 'bc0d44b7c7b54c79fcfbc79d461c5678cc547ace', show: this.hasError }, h("slot", { key: '1bd5f293bb39b40f5692efb15967a7b1f9304f5b', name: "error" })), h(GuxFormFieldHelp, { key: 'ff1bfe0b822cb2919f78cdeb2ed6c652e6a81ced', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f8c84f91538b7ce940be2e2e5a4049529adbc750', name: "help" })))));
+            } }, h("slot", { key: '14c6b0561f35234241f241a4150f98b3ca3db61a' })), h(GuxFormFieldError, { key: '6d6df40a7d65ded4f1bedaff9cae5e76ded6d70b', show: this.hasError }, h("slot", { key: '98b107a272159b89ab4a223fea9506b00aa3f304', name: "error" })), h(GuxFormFieldHelp, { key: '00c607f82c67a2083229171e130f44caf15dab95', show: !this.hasError && this.hasHelp }, h("slot", { key: '3bc4f90cecce9b35967d747e456565265c6a1e0f', 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

@@ -98,7 +98,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '56adbb8d351a3bf55323634c73201e2243a43e55', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '9a7442ce33af3a5129241bf959f3c72002d8c45b', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c8d3a1349a13e8f0bf6d74cb53f214659ebda735', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'cf0c9b0d17c25e374484cfffb26aca99e5bb6931', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7b6543b0b7e3791e6e54339953dbf8ea1442d362', name: "label-info" })), h("div", { key: '9bf6998d1a6d8ad5eeaba539d82ed5d232b8af9b', class: "gux-input-and-error-container" }, h("slot", { key: 'd98c3ab08059bed75308605ecf216d240d42bdd8', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'eac44af58cb6b704264a1c589ec7e61f1be88133', show: this.hasError }, h("slot", { key: '5534a76ddd6d81dcf3c33b26333877d628f56640', name: "error" })), h(GuxFormFieldHelp, { key: 'd2f2d2e1888f86b4d044eefbbf4e496d6a1f478e', show: !this.hasError && this.hasHelp }, h("slot", { key: '7c66488f98b7504523cf8d811b860910e0a3d60b', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: '7abf536d21c5c458cb5b21f33f1bd9396044a0b7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '13ed9bf6c351863b755077efa5566a5cd1e90a14', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '09575fed78d9ca655eb4b63722b6a82315c0a146', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'd64a434050c1f7a1019aa089d6740683efdc7df5', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8e076c976fd28f8f21dd4bc12b2d0896756614ad', name: "label-info" })), h("div", { key: '93a3c6723a0f4a305fa06630eebb4a74f6905f81', class: "gux-input-and-error-container" }, h("slot", { key: '6aff1d14f123368160df5ad0ff76f2730ff05eb2', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '4e20fc902a0f9faa6a2590edd16d7499f2a717a9', show: this.hasError }, h("slot", { key: 'da00c934c70ab2084663d46e7e18d53639668620', name: "error" })), h(GuxFormFieldHelp, { key: '5516d1ff98f2f1486b5e7a390d7885d6d2b1914b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'dd642f28776f0bd7497d7d29f05b9ea74f811148', 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

@@ -101,14 +101,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: '0ec348a84d25ac461074fe16950931fc9574693f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'fd33fac2f166a736493c7d4e2215fd14d656c3a1', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '1ba9cab32db3bfd16eed199de1c1bdb153f080c3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1ef31b479bfb3f40dfe7b6ec737388726f838fe8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '2be9211485d87da7da354865f183c3f06f6b760c', name: "label-info" })), h("div", { key: 'cf7a4da1106fb05a2bf3317324e4de2a6eb8646e', class: "gux-input-and-error-container" }, h("div", { key: '19deca3232a1fc38a466878bcd4f5dd08fc842d7', class: {
+        return (h(GuxFormFieldContainer, { key: '785fec87017ff42abee831b3c624c217b41d56fd', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8b2118c7b4aa61db406ebe9156b0b4662274a8dd', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '0bb97183776944254809140c67c8b4f95b7e6473', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '0b567491a4dbb3332962621fcd06fcb7f260fbaa', variant: this.indicatorMark, required: this.required }), h("slot", { key: '9c788f5e5be22657879e04abec11bd4cd8a01cc1', name: "label-info" })), h("div", { key: 'c1395eeffda28e6618c0ed585f98ea16566db1e4', class: "gux-input-and-error-container" }, h("div", { key: '79ed7447b231810038ed4967f95f24625987a291', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '522316804aa2d01f198631d6951424dd1d357540', class: {
+            }, part: "input-section" }, h("div", { key: 'e2a946f4c05b1dd34fe3f68988da03fad88be780', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '29b61bfc0e0b5b7aecc615a4e5f899dbc89f9914', 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: 'da7ca3f8ac449f24ea622d39b0b55ad988a7b5c0', show: this.hasError }, h("slot", { key: '114cc9c0e75c8de3195b92156ba83871fbde35d1', name: "error" })), h(GuxFormFieldHelp, { key: 'd5b4619db333c55a88d9edf3bf2d538b6b1cc6de', show: !this.hasError && this.hasHelp }, h("slot", { key: '41ef69a9df8ed93a8cdd07bc71334e4ad0aed4e7', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '6f58481bf65dad53105af30c21e0cccf083ff606', 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: '7c321e86300923dda697ea1ed96f395f2eae5e80', show: this.hasError }, h("slot", { key: 'ea01b157b5c696b3243eb22da2e7e0ca6b7091fe', name: "error" })), h(GuxFormFieldHelp, { key: '715ba6fc83227e5c35452c709fc4b5d66c7d96c4', show: !this.hasError && this.hasHelp }, h("slot", { key: '4b36fc63670534b1e314c6c4e79b8ee4164e19e7', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -92,14 +92,14 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f16ffc855c4ff55f987495093ef141e389c8e47f', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '8123821ad38bc998a095561235f119835681b44f' }, (_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: '788e7689295cdee5c328e142e70f59950dfc7f96', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'efcd980dfe8cb85b58a9117eb596db3418e352cc', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '22eee71b6181c248d8e651a979e6e595ab5a7ed9', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3715ff4399fd04204797f28a3bfe16726a327815', name: "label-info" })), h("div", { key: 'aae66367993cfdffa60d3525675a562bd9bfbc5d', class: "gux-input-and-error-container" }, h("div", { key: 'd89f8b5a5aedf029f31e9d0c5e1c34c4bd352cff', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '56f12f972a655ae407c09f1daf04cc23c7de1bcf', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'f2fe6e36721035fb33bf7bcdd8d1650bfb7dfdef' }, (_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: 'e07e162217ab41732b4f995944c60bfa2d14a9ce', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'e5f95f3ac47968fec7f0ccd6f6592cc868089be1', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'da85988d13e8024ab9fe74d4056ecede0d6530cf', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'feb7b1e0d892135bda3257dd8bb8531771304359', name: "label-info" })), h("div", { key: '700833f9c865c82b40f49653a227cf5f0fd19aa9', class: "gux-input-and-error-container" }, h("div", { key: '5e34d7c821c11a0616902073d56052802264abf3', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '317049b3ab3a986f3f4bafbc9c6f647e78ac4a21', class: {
+            } }, h("div", { key: 'fddd3d42d84ec8fdcc2ea1ca525e88b5a684493a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '3d539d235373a41fb6f937f3a88b91f2eec0bb0e' }))), h(GuxFormFieldError, { key: '86a6cd99d5d50f2bf4866a6f40b27bc4eb345f53', show: this.hasError }, h("slot", { key: '478e089f1f16858570b13d73802d24ac705ccec9', name: "error" })), h(GuxFormFieldHelp, { key: '20caea1fa5e73ff35b8ae644d8699c5011ab293f', show: !this.hasError && this.hasHelp }, h("slot", { key: '9d4158f94a959135b4e6a71ecca5e64ef5768308', name: "help" })))));
+            } }, h("slot", { key: 'd58fa6a08698808604691bbc8e72c3792827ef35' }))), h(GuxFormFieldError, { key: 'd6faf31ecd47ef331d932162b719e67ea0110e69', show: this.hasError }, h("slot", { key: '493b1b0249f723205ce9cb7c32638d82ed625d73', name: "error" })), h(GuxFormFieldHelp, { key: 'c9efbe0fc5a1b79d6a0d0d7426491ceb69b876e4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'afe33f3ec89fa5246c12327dcb78346f4d7258f1', 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: 'a0b5407dedc705a9ceb73ef503eb98383067ab85', class: {
+        return (h(Host, { key: '7dc1f9d2b6002960146602218bf0ef4023ab6920', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'c28bc5f3af6d3fc421f47f7e426b2d436b269064', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '2002638774f8d2a20162a60a8d30d4902bc324a7', class: "gux-input-label" }, h("div", { key: '604f27b34e4aa341eb3628168c41016eebc1c947', class: "gux-input" }, h("slot", { key: '56cf53da54c9efcec3816f79553fc865d0278d46', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '40e019b5ec7c74c4a31567f51ff42a89f972c342', class: "gux-label" }, h("slot", { key: 'b8e6eeefaa1ddcfa46d1a595e3e7a5353fadec1d', name: "label" }))), h("div", { key: '0b8987e1e9b808666e9886195b24dc7afd1c342c', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '0709931e3f2aabe6b062bc8b0818f2fc753deb8f', show: this.hasError }, h("slot", { key: '8ad6962d5d747a1400376c736aa5b4c6e09a6640', name: "error" })), h(GuxFormFieldHelp, { key: '4a4afefc1c5cdb276e5520eb30aa1e46e8ac3eab', show: !this.hasError && this.hasHelp }, h("slot", { key: '3a528496d59db95ec5e1b002d71aefaa86805833', name: "help" }))))));
+            } }, h("div", { key: '6e84121c488ef2bbec5458bde706455e73b270f0', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'fd7d80734803eb61c1391d5063fdb1084fe47c64', class: "gux-input-label" }, h("div", { key: 'dabc615e2494c0eb41b6196706e9ad3d740cfef7', class: "gux-input" }, h("slot", { key: '5a595f86b59079deaf325916c32f43e1020b5df6', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '2acf844b9be3fd281af460054af6bf06ab45ba80', class: "gux-label" }, h("slot", { key: 'fe34d02ffe32db3241f5cd0f6de31542a963edad', name: "label" }))), h("div", { key: 'e8db7c74f32d014ca1b64dc77dd6bd40979ed80c', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'a72e210faf7c6a85b79f4bba55b4450ad0d2761b', show: this.hasError }, h("slot", { key: 'f7802fcbac90cacf10f78cb9a8e362b1d471e4e7', name: "error" })), h(GuxFormFieldHelp, { key: '027bb4efd13c8267c700bb1231873f96156d4ee6', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a562df50f27d540e8d68d4b9efa5b23e4e96cee2', name: "help" }))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

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

@@ -11,9 +11,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from "@stencil/core";
 import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
+import { buildI18nForComponent } from "../../../../../i18n";
 import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldScreenreaderLabel, GuxFormFieldFieldsetContainer, GuxFormFieldVisualLabel } from "../../functional-components/functional-components";
 import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
 import { trackComponent } from "../../../../../utils/tracking/usage";
+import componentResources from "./i18n/en.json";
 /**
  * @slot group-label - Required slot for label tag
  * @slot group-error - Optional slot for error message
@@ -22,6 +24,8 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
  */
 export class GuxFormFieldRadioGroupBeta {
     constructor() {
+        this.required = false;
+        this.indicatorMark = 'required';
         this.hasGroupError = false;
         this.hasGroupHelp = false;
         this.hasGroupLabelInfo = false;
@@ -70,7 +74,8 @@ export class GuxFormFieldRadioGroupBeta {
         void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
         clearTimeout(this.hideTooltipTimeout);
     }
-    componentWillLoad() {
+    async componentWillLoad() {
+        this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
         this.groupLabelInfo = this.root.querySelector('[slot=group-label-info]');
         this.hasGroupError = hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot(this.root, 'group-help');
@@ -99,8 +104,8 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'cfb2a9340bd3aae78348520c041cda2b32da0725', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '67c0be1d64d53062034c4b85baec1f31df2dd586' }, (_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: 'c65436fe0cac707c2ae9fb7e4316edbb7eaf57e0', position: "above", required: false }, h("slot", { key: 'f3c3a14b923ffc576edfe29aa77cd5e3ac85a52d', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: '8dbc59fb5f52a9b4864e2bf11a7cf071db746b9f', name: "group-label-info" })), h("slot", { key: 'dfeab49b8fabfde3ac9a09f2ee93894e6c910f57' }), h(GuxFormFieldError, { key: '81e1135464e64bff72ecad9f32e851ceb13c01ae', show: this.hasGroupError }, h("slot", { key: 'd408e9926bcfddb4ef6aa13e02ae402fcad252e9', name: "group-error" })), h(GuxFormFieldHelp, { key: '35e0a64b9ae7cf6dfc3e6b465f708784f74bab3a', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '22ae0bc5645846e776b9845702911c6683b531bb', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: 'f8f4831a93f54ea356b1902fbf037d897797523f', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '7a8c10ab4a4d4603b3801c1ebdbecc01b6a54433' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '04c17fff48218c66531b6dee9f3d591656121b0d', position: "above", required: this.required }, h("slot", { key: '7f75dd2ed841bffc60c40bc7ed670f9430a64f10', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '52977414d02b4ee2c07e74e3238a6612c11ea7e2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '9e339bbc65c945fb59434dc4727dc85acda9b22a', name: "group-label-info" })), h("slot", { key: 'cfa5ecb0cb906eae359dd2fe33afeff60cf53ec4' }), h(GuxFormFieldError, { key: '39c31179488c93d7476821a53869b1cd416e73e2', show: this.hasGroupError }, h("slot", { key: '4308eb7fad69d59ad0ec2af5a63999376569c8b1', name: "group-error" })), h(GuxFormFieldHelp, { key: 'c8377482e8d2742c632b20795fbd6007ead688ef', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '55940e9024684cbff7ee46db3ff46b8435f04bab', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');
@@ -119,6 +124,48 @@ export class GuxFormFieldRadioGroupBeta {
     }
     static get properties() {
         return {
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
+            },
             "disabled": {
                 "type": "boolean",
                 "mutable": false,

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

@@ -30,12 +30,12 @@ describe('gux-form-field-radio-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"
@@ -46,7 +46,7 @@ describe('gux-form-field-radio-beta', () => {
         />
         <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>
@@ -57,12 +57,12 @@ describe('gux-form-field-radio-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"
@@ -73,13 +73,13 @@ describe('gux-form-field-radio-beta', () => {
         />
         <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>
@@ -117,7 +117,51 @@ describe('gux-form-field-radio-beta', () => {
           <label slot="label">Spaghetti</label>
           <span slot="help">This is a help message</span>
         </gux-form-field-radio>
-      </gux-form-field-radio-group-beta>`
+      </gux-form-field-radio-group-beta>`,
+            `<gux-form-field-radio-group-beta indicator-mark="otpional">
+      <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" />
+        <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>
+      </gux-form-field-radio>
+
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="spaghetti" />
+        <label slot="label">Spaghetti</label>
+      </gux-form-field-radio>
+    </gux-form-field-radio-group-beta>`,
+            `<gux-form-field-radio-group-beta required>
+      <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" />
+        <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>
+      </gux-form-field-radio>
+
+      <gux-form-field-radio>
+        <input slot="input" type="radio" name="food-1" value="spaghetti" />
+        <label slot="label">Spaghetti</label>
+      </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 });

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

@@ -114,9 +114,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: '4d67610cec424ba908a0ffd339d92a5595312a43', class: {
+        return (h(Host, { key: 'db002b685d2d45e6009f39c8764169fcedad462f', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '2807aad199c83a96c00f24d9cb89554bf1e6b7f6', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ce51d571a2904e806feb72563b9c4492d8d803bd', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '46f09c1ae15f722000274151775eb7a7e1172941', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e152da38ff37c07e8a5869b349a7a8593381576b', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'a691b52c4251c9f229c3ed7950c1cc8661124e42', name: "label-info" })), h("div", { key: '6b471bc8841f4f68ca8f3dcdbb6ba3f184fbe98f', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: 'bb7d4328cc6357b68c83aa1ccb6b66bfc6e3dea1', show: this.hasError }, h("slot", { key: '7f192481f8c2a933c75ea183bd03d1d29a6671c9', name: "error" })), h(GuxFormFieldHelp, { key: 'f89a1016fdb911cd55a912ae1bdbfea682c46c0e', show: !this.hasError && this.hasHelp }, h("slot", { key: '3fb73fab436c6db7979f5da1e84a455e01619150', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '3bd4a211a8922871705f3ec89257d65f1759fd45', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '92119c60c0534f2d6b939055c41fd18f51b573a7', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '5f6179ce92020f54ec8bdc7d2045dd7b7e77c344', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9f1ceea87987e5b5708ba385d54396cc928cb645', variant: this.indicatorMark, required: this.required }), h("slot", { key: '535f26087b83b8ca61514a7bfae91f16a83a9a0b', name: "label-info" })), h("div", { key: 'd5939e7972e0943c57d0d735e1e60d7470e9ff32', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '58361330a95e52faa7339d4d7b770261b07a5686', show: this.hasError }, h("slot", { key: '6220c513e60271b94ce974db015805fb39ad308b', name: "error" })), h(GuxFormFieldHelp, { key: 'e550602f315df7f03d650e3ed737a9a47f518043', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fa2a4ee04b93939478d8cd2c14baa0c320d47299', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -94,13 +94,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'e6305e46a67dfb6588e7994e4acf8d40209614ea', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '3fe4869e001fdd736a4476061c84bb7f3f81493f', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '53cbd391bc92a2ba90cb6f9eb6c3660305f171db', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '4c5ba3b3358e5ce0f17f9c2b8a54073fc5556ed1', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3d423aaf1a39b465dd32de1b76bb5c3e73a56a8c', name: "label-info" })), h("div", { key: 'db665c3e2b17b638fec7e439a4ff6c741c35816b', class: "gux-input-and-error-container" }, h("div", { key: '8b777680340c5f4dd33a03d1368d06d67fef46e6', class: {
+        return (h(GuxFormFieldContainer, { key: 'a30394f27a86d20b0e598df66cbdb6bda45bd4d0', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '25a4e6f6c1246e1ff8dd6d3bd5712241e3da476c', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '88d218d2aee11f2c27f7ab60ab6c2f78bfb8883d', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '53c5e9611ef7c53bbfb872852c6f0f910df44161', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8186ebb9d9a1c2b40c9586a39871c72430c4c9f1', name: "label-info" })), h("div", { key: 'f5a5c5eb6ce3dac279aa01f4482ac68d5826ae48', class: "gux-input-and-error-container" }, h("div", { key: '0ff8bd0453cf3e742516dee6151b824d9251e97a', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '9419559eaa633e26b00cd105471b1d41810705a8', class: {
+            } }, h("div", { key: '761b0ac38b6d6412e90d183c2c19f78d7e0ff591', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '0501942b05a8a3516cdcd2761a8293b679e1c3e4', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'd27e73e819b75228f8d783af9f34e209175eb714', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '7be9989dd153517c36ffb93dbeeb14b19b2d5a9f', show: this.hasError }, h("slot", { key: '5cde9763882793f85d56c04a338d1538564ec88f', name: "error" })), h(GuxFormFieldHelp, { key: '140a0a88010219a1b573de92731a94febdec11bb', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd8a74f72e8ea37109ec1d2ab5158237904990bb5', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '41bc95593404332f033f4ea16dee9c5fb6fdcbb0', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '25dd3495337b18bb13a36cef9c782b5718fd065a', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'c53231d3f96492b8b2cef987e16d81abecf86f1f', show: this.hasError }, h("slot", { key: '11a60452e6feb101a5e8db771283a206ac30e24d', name: "error" })), h(GuxFormFieldHelp, { key: 'fee2295ee046031446e1f2331a22d7268ed83a60', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b956452e2c38425bb962ae0b7251d7ea7771fea2', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -84,13 +84,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'aa58368b08402d14160cf3daab82297ff13536f4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '856176b61d3542508a8e69242da958303b5355f6', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'acb41a286f0d4e9bfd61a2d6d9e5a5784e2c2b5a', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'a486e36eaf157067979cd7152251b78c3e30ec56', variant: this.indicatorMark, required: this.required }), h("slot", { key: '569226b12b59c82ae33894ef00bd075e3053bd6e', name: "label-info" })), h("div", { key: 'ff819b568822abd448e2ecd13394618552a6b220', class: "gux-input-and-error-container" }, h("div", { key: 'c185c9e9f3f3f77ad05109bd05fdba0527f552cd', class: {
+        return (h(GuxFormFieldContainer, { key: 'b369435896f25fb7ec1325a6b0be5c781fd67efc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '38901edb2eb3bd3f100d6cf3f132deb60b046896', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'a89921edc4dbe6986031d28cd9cfb051942d0b75', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'bd85f0211926890d31628ec5927ba84b7973f694', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'a332b280ba8eabf29a12e0349a520400bb6dc60a', name: "label-info" })), h("div", { key: '1d4fb4187c5831e4d929e4863d328ee9052e4d82', class: "gux-input-and-error-container" }, h("div", { key: '6c631f4539772e2392ca1543575c30d35cbe1f5d', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'db3d835cc3dc153892340eb9dc2e6493846cc707', class: {
+            } }, h("div", { key: '02bc02d0cb457ea7e021746be96470941560e6c8', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '4feadf722e748a5a7ba00eef18a429638f6fe21c', name: "input" }), h("gux-icon", { key: 'aa35722e94844e822e60c76ea73169b6fe802503', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'e52c3f9912517e5a6decb05a1585f8bf605f6789', show: this.hasError }, h("slot", { key: 'db0d496150bd89772305a2994a2a7caed61569ba', name: "error" })), h(GuxFormFieldHelp, { key: 'bf90c868e6b667087f46f895a50b57e294ce9ee9', show: !this.hasError && this.hasHelp }, h("slot", { key: '6c89362a8db8346f5feeb6447bdf17c3f3522b1a', name: "help" })))));
+            } }, h("slot", { key: '205bd13c0311f90e9d43415660c5fa52b12729f4', name: "input" }), h("gux-icon", { key: 'da7a103eea8e102efb4f0f070945efd2251464b6', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'aff49e31e92ce372557e9becee4b2bafb7c9e784', show: this.hasError }, h("slot", { key: 'dad5c48492a0b2d9691aa02b88ece74fd72d1a24', name: "error" })), h(GuxFormFieldHelp, { key: '484e6a4559d60f6a106fad7ef283fe9108aca87c', show: !this.hasError && this.hasHelp }, h("slot", { key: '4ced60adf8dad029da74ad51b209550662967b6d', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -88,12 +88,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'd39811ffbb0bccc3055e42e8f8d9e9318a0b9d38', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ce0d140dda0b88c6a144aec28e92b5feddf6b352', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '5373fa879b15f5dc8963a4708f3082705978ab9c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '61ef2cf37235239dd3ecac077ca7d1d20442ab23', variant: this.indicatorMark, required: this.required }), h("slot", { key: '6420554f988a513a381d5c950abfba759aaa0688', name: "label-info" })), h("div", { key: '92903c916b70cd57b0962afd59f6abb0125a60ef', class: "gux-input-and-error-container" }, h("div", { key: '9edf94ff62e26d59710b067a3b35096b1a5f22ec', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '3ab558e4589ebd613292374d01eed67a10499a20', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '46d9d2fcf36c5bb731ffadd9df2bab8cc2b18265', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f18d23a96d46fa7df87c53a92a82152f942c58e1', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6c9ff48bbf20bad5844cebd08a26df7ddee084f4', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'd70ab2f2da69b4ff005e6d56d7fedb7e2556a411', name: "label-info" })), h("div", { key: '6bbea9474b4a2a7a988f2cb50fac5caa345f6fdc', class: "gux-input-and-error-container" }, h("div", { key: 'ff32248f326120071dbc6863125d0a1627c5e149', 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: 'caf68192f180b2bcb62621ae2b930f8e039c6b74', name: "input" })), h(GuxFormFieldError, { key: 'b6875b9559d10e2c086509fe4bad0f117762c658', show: this.hasError }, h("slot", { key: '8816580fa2953be7406e53a8df1809f0c907f23c', name: "error" })), h(GuxFormFieldHelp, { key: '9aee948c8db811d37b3ad6fa0c28e25814de59cd', show: !this.hasError && this.hasHelp }, h("slot", { key: '9fb4def3df2996fe2ba39c9a708f35a9bdc32edf', name: "help" })))));
+            } }, h("slot", { key: 'd7ea5e54b58900cca265223eca34dc33ab8c37b3', name: "input" })), h(GuxFormFieldError, { key: '5ddfe3bae1acf64b4860331377e5c1e176fbe45e', show: this.hasError }, h("slot", { key: 'd23cf2f4f3b653a56009f3bdd015b24b89c948f3', name: "error" })), h(GuxFormFieldHelp, { key: '6ff0e8b248d2fa2067b3159ca758894821461eab', show: !this.hasError && this.hasHelp }, h("slot", { key: '0d97f94cea4d945e2930d8990672467ca7875bbc', 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

@@ -93,14 +93,14 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '807ca888be1318d9c630856017124378e121c7e2', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '7b179b2708a7c5bc7da0890188833da31b983dec' }, (_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: 'bba4cf762a128bc2f261c317de46e25a0e7e8039', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '54a3a9ea4fc256d763cfc49b58012a270f05497f', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '02ef21d3229a8bed1683c6030f17073cd2c32e2f', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f27f3814d92b789110ee2cd623380532b01c212c', name: "label-info" })), h("div", { key: 'edc9597ad40521a06e30aa05dbc004ed4e1c3c99', class: "gux-input-and-error-container" }, h("div", { key: 'd0e4760ef11117c5419d83840853a7c3a55d2883', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '60646429de08f5be22c63509833e16af7d91a5b1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '3836dd001b55139f67a4eba1a1b1af8cc48724c5' }, (_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: 'e92f4bece7a7dcd46ee01c63e0e2bce5dfa4c53c', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '8914ad5937f3ed04f7b06002859172cfc71c02b0', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'be970468e71815ab969d1133002197b15cf0946c', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'fb8138911368a0722aea51e0ee46e3d4ee9e2a04', name: "label-info" })), h("div", { key: '9fbe887c3cbd2c7338c36c96bb7347ba943bc6c8', class: "gux-input-and-error-container" }, h("div", { key: '282647ff5019aea33d48a926c2fd49507a4545e8', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '01e3c4cc1d2830a893ba74efac5d4ceb8f68e75f', class: {
+            } }, h("div", { key: 'ca0fb7f3caabc2a6ba6e3a84bad1e0a9ca160f6b', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '123ef8fa7f589f3b835bb83eb3b51055002a7508' }))), h(GuxFormFieldError, { key: '4280815a94277a7e0e5a599d1e1935ee8909cf8c', show: this.hasError }, h("slot", { key: '2943c7a654a3b34eb2c37930e4e000020d222ba2', name: "error" })), h(GuxFormFieldHelp, { key: '9ed9ef48efe9073b223ec0e80c8ae9d92d545ce7', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b14414ca1b2afb6cc9e2fa2449d345363073b08e', name: "help" })))));
+            } }, h("slot", { key: 'eeab7196b9023849030d13c3dacf9c62cba80d92' }))), h(GuxFormFieldError, { key: 'c950dc34f5f7c2d4d194cdfe499f28d80783f0c1', show: this.hasError }, h("slot", { key: '24383262d7a92085c023e8cd69c29e74c7a89d68', name: "error" })), h(GuxFormFieldHelp, { key: '32efe93a351fb63d9159a117233e20641e681a3e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'c30f18a1fa9f225b8d3e1843b588277f36b8e5a4', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

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

@@ -94,13 +94,13 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '9ac7aa7d22c07fac90fe60d4689c9f66c753dddc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '150c662ed536198b05d5ab1c327231027e85d531' }, (_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: '8a1dd247b58194ede227ef623c202c890facca94', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '62b5ed2595464018236fc3d783a79433468a24fa', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '66a69b9e02398a1ef6954a8e0376e61fd58a11b8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '0e63e981ab0af5b61604c7893e250ead130f9d7d', name: "label-info" })), h("slot", { key: '880e4bda7852aa9d39e9c2b2b6ef6579482f5e40', name: "label-info" }), h("div", { key: '0645f927407893968861e085d2f0362f41a40dcc', class: "gux-input-and-error-container" }, h("div", { key: '210bf7b9426a1fd3700fa7716b1982b8e8058fbc', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '830fe622d4dfd9c8989ec5b8f773b79c91b640c5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'b60a3cc9ad9b51563c50566cd155483a600d25af' }, (_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: '2a1bbf884b186e840364613a667491d1df43ca72', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '3b17fd4bbdaea69801e7b94111591f86401e069d', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '699c71c6aee52ce29377ba8bd586296bac42d82b', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7164f758422720c56e4319eae042870ca698dd42', name: "label-info" })), h("slot", { key: 'cb1e3bf31091ffbf84127d0c4dcc8e46545ca1a6', name: "label-info" }), h("div", { key: '88c5cfd7f100279a3f838c46a53143172ea6b570', class: "gux-input-and-error-container" }, h("div", { key: 'ef3560f089a6afc0f46133ae8a475b1926f69e48', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'a890560813c8b6e4151518c7dd1f16dac58b9b87' })), h(GuxFormFieldError, { key: '93f5447ff575090900a051ab86a0a3d4ddb0b07f', show: this.hasError }, h("slot", { key: 'a69d6c7a55aa7cb8ad8a339c0163f4fc2418319f', name: "error" })), h(GuxFormFieldHelp, { key: '41285ad604a55ae2b47d878f2e5723d50c5f0bd5', show: !this.hasError && this.hasHelp }, h("slot", { key: '955959fb904c31cf622ccf3ce42e8804b49ee476', name: "help" })))));
+            } }, h("slot", { key: '8986a9d1092383d279ad2ab1131403a4c989256e' })), h(GuxFormFieldError, { key: '1b0f957d7041d9f98872143cf3ff17be1aec8b7e', show: this.hasError }, h("slot", { key: '21697dfc6f67fbbbbe83570b650ce9a616e6340d', name: "error" })), h(GuxFormFieldHelp, { key: 'b4a571e7cd42a17d826b64cb70a7e306791760e1', show: !this.hasError && this.hasHelp }, h("slot", { key: '97249df4da2c8b56b196c6d8a9015bb0c4bb11dd', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

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: '203c195fdddb1de2a5ca23731acfec6f28427641', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '3544be5beb9caabe7d246b1d3e1d180bad6ce48a', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (h("button", { key: '8e3e3c5de710ef86247ccdf649ff4c9695d7a88b', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: 'f7c35fe3fa03064a90c242e33bcbeffefdaf14c5', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get is() { return "gux-form-field-input-clear-button"; }
     static get encapsulation() { return "shadow"; }