genesys-spark-components 4.73.1 → 4.74.0

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

@@ -80,6 +80,26 @@ describe('gux-form-field-dropdown', () => {
                     });
                 });
             });
+            describe('indicator marks', () => {
+                ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                    it(`should render component as expected optional dropdown (${index + 1})`, async () => {
+                        const html = `
+                <gux-form-field-dropdown ${indicatorMark}>
+                    <gux-dropdown>
+                      <gux-listbox>
+                        <gux-option value="a" disabled>Ant</gux-option>
+                        <gux-option value="b">Bat</gux-option>
+                        <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
+                      </gux-listbox>
+                    </gux-dropdown>
+                    <label slot="label">Default</label>
+                  </gux-form-field-dropdown>
+              `;
+                        const page = await newSpecPage({ components, html, language });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
         });
     });
     describe('multi select dropdown', () => {
@@ -149,13 +169,13 @@ describe('gux-form-field-dropdown', () => {
                 it('should render component as expected', async () => {
                     const html = `
           <gux-form-field-dropdown>
-          <gux-dropdown>
-            <gux-listbox>
-              <gux-option value="a" disabled>Ant</gux-option>
-              <gux-option value="b">Bat</gux-option>
-              <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-            </gux-listbox>
-          </gux-dropdown>
+          <gux-dropdown-multi>
+            <gux-listbox-multi>
+              <gux-option-multi value="a" disabled>Ant</gux-option-multi>
+              <gux-option-multi value="b">Bat</gux-option-multi>
+              <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
+            </gux-listbox-multi>
+          </gux-dropdown-multi>
           <label slot="label">Default</label>
           <span slot="help">This is a help message</span>
         </gux-form-field-dropdown>
@@ -183,22 +203,22 @@ describe('gux-form-field-dropdown', () => {
                     expect(page.root).toMatchSnapshot();
                 });
             });
-            describe('label-info', () => {
+            describe('multi label-info', () => {
                 it('should render component as expected', async () => {
                     const html = `
-          <gux-form-field-dropdown>
-          <gux-dropdown>
-            <gux-listbox>
-              <gux-option value="a" disabled>Ant</gux-option>
-              <gux-option value="b">Bat</gux-option>
-              <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
-            </gux-listbox>
-          </gux-dropdown>
-          <label slot="label">Default</label>
-          <gux-label-info-beta slot="label-info">
-            <span slot="content">This is some tooltip text</span>
-          </gux-label-info-beta>
-        </gux-form-field-dropdown>
+            <gux-form-field-dropdown>
+              <gux-dropdown-multi>
+                <gux-listbox-multi>
+                  <gux-option-multi value="a" disabled>Ant</gux-option-multi>
+                  <gux-option-multi value="b">Bat</gux-option-multi>
+                  <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
+                </gux-listbox-multi>
+              </gux-dropdown-multi>
+              <label slot="label">Default</label>
+              <gux-label-info-beta slot="label-info">
+                <span slot="content">This is some tooltip text</span>
+              </gux-label-info-beta>
+            </gux-form-field-dropdown>
           `;
                     const page = await newSpecPage({ components, html, language });
                     expect(page.root).toMatchSnapshot();
@@ -225,6 +245,26 @@ describe('gux-form-field-dropdown', () => {
                     expect(page.root).toMatchSnapshot();
                 });
             });
+            describe('multi indicator marks', () => {
+                ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                    it(`should render component as expected optional dropdown (${index + 1})`, async () => {
+                        const html = `
+                <gux-form-field-dropdown ${indicatorMark}>
+                    <gux-dropdown-multi>
+                      <gux-listbox-multi>
+                        <gux-option-multi value="a" disabled>Ant</gux-option-multi>
+                        <gux-option-multi value="b">Bat</gux-option-multi>
+                        <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
+                      </gux-listbox-multi>
+                    </gux-dropdown-multi>
+                    <label slot="label">Default</label>
+                  </gux-form-field-dropdown>
+              `;
+                        const page = await newSpecPage({ components, html, language });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
         });
     });
 });

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

@@ -26,6 +26,7 @@ import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 export class GuxFormFieldFile {
     constructor() {
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.hasError = false;
         this.hasHelp = false;
@@ -97,7 +98,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'e5b4d9fdfa79cad57d505668636f26d2f9daf69c', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '99f7577d1400eb36b0242b195008988b59f5f248', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'c12c665f1cd9dc5749057cfc2a594481ecc0faca', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '52b9d60441ba013611560a7d2116c14e0e5323e0', variant: "required", required: this.required }), h("slot", { key: '5ffdd1246404deeb9f621ada51a85bb4ec29dd65', name: "label-info" })), h("div", { key: 'b4d0f24cbe35ea18cb2390d7cad8db8c44186157', class: "gux-input-and-error-container" }, h("slot", { key: '5576250cc594f994c3bd8d265c509e8a72fd49f1', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '142b616ae68ce9bbf0add9261eb298b085c4eced', show: this.hasError }, h("slot", { key: 'f0e40d277507f95bf89a6adb7db6700e1760f969', name: "error" })), h(GuxFormFieldHelp, { key: 'f9019d60c785a5f1134748beee6322b887f3e02a', show: !this.hasError && this.hasHelp }, h("slot", { key: 'ce08f918eb12f490a5a1b0f6e02ec2c8866d3845', name: "help" })))));
+        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" })))));
     }
     static get is() { return "gux-form-field-file"; }
     static get encapsulation() { return "shadow"; }
@@ -135,6 +136,30 @@ export class GuxFormFieldFile {
                 },
                 "attribute": "label-position",
                 "reflect": 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'"
             }
         };
     }

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

@@ -66,6 +66,26 @@ describe('gux-form-field-file', () => {
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+            <gux-form-field-file ${indicatorMark}>
+              <label slot="label">Upload a profile picture</label>
+              <input
+                slot="input"
+                type="file"
+                id="avatar"
+                name="avatar"
+                accept="image/png, image/jpeg"
+              />
+            </gux-form-field-file>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
         describe('help', () => {
             it('should render component as expected', async () => {
                 const html = `

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

@@ -35,6 +35,7 @@ export class GuxFormFieldNumber {
     constructor() {
         this.clearable = undefined;
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = undefined;
@@ -100,14 +101,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: 'bdc69abdce07c79cae7b2bcee9810710d6f2bfd8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '60a348cae72ba59bcd5c8891604364ddda93eae2', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'cafa11ccc43a7d8bc095069ae4adb90f8a75f3c8', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3612424e53ed5c23683b09ecf0a03d8f231e1b44', variant: "required", required: this.required }), h("slot", { key: '280b627fcd8dedb13787769231d412d0f394b5e7', name: "label-info" })), h("div", { key: '51b56fe321cc3d48096754423442f2d529d558bb', class: "gux-input-and-error-container" }, h("div", { key: 'f9a1f85e390fcfcb73384d9f2d1bd49917dbd5e0', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: 'c71394a32b8e54bef7161419e2eed7e8cc887c48', class: {
+            }, part: "input-section" }, h("div", { key: '522316804aa2d01f198631d6951424dd1d357540', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '7f131a33acd53537257fc75dd9192b9117701eb0', 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: 'eb3f61b5aa6a845637679bac55f61cfee15bdc82', show: this.hasError }, h("slot", { key: '792521d7085f609db90658b39357cdb9705d9954', name: "error" })), h(GuxFormFieldHelp, { key: '824c3def4a6e454b609f55c6dd7666db5810d88d', show: !this.hasError && this.hasHelp }, h("slot", { key: '6f7980541f036d255aee6ac55f91842f16292eca', name: "help" })))));
+            }, 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" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -216,6 +217,30 @@ export class GuxFormFieldNumber {
                 },
                 "attribute": "label-position",
                 "reflect": 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'"
             }
         };
     }

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

@@ -68,6 +68,20 @@ describe('gux-form-field-number', () => {
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+              <gux-form-field-number ${indicatorMark}>
+                <input slot="input" type="number" value="10" />
+                <label slot="label">Label</label>
+              </gux-form-field-number>
+            `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
         describe('help', () => {
             it('should render component as expected', async () => {
                 const html = `

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

@@ -29,6 +29,7 @@ import { GuxFormFieldHelp } from "../../functional-components/gux-form-field-hel
 export class GuxFormFieldPhone {
     constructor() {
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = false;
@@ -91,14 +92,14 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f59d59a0f211944242fa5cb903783c0ec688a3dc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '46d2314d09ac44e99592fe5ae51f3f9f42797eca' }, (_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: '6beddafc280b6dda6773e71b7fefcdac626ce1a4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'fa6011c0ab31dadaf15c02ed73ad74385dfcd0b7', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'edcb15d0cff3838217b1e21f0ed7fab64db2ec39', variant: "required", required: this.required }), h("slot", { key: 'a90402b0c8e5f58d8c204e81ee19667cd176720c', name: "label-info" })), h("div", { key: '5fa23b1af5132135c5900ddb30f7779648f2cb47', class: "gux-input-and-error-container" }, h("div", { key: 'b54a1436d004891780cd737bf4ef6d9c9a1f4b2b', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '436c0d1c902cb6e4d9a7a091928bdbd081b46f99', class: {
+            } }, h("div", { key: '317049b3ab3a986f3f4bafbc9c6f647e78ac4a21', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'b0da838a3f47a070489a78666f80fb0925734dd9' }))), h(GuxFormFieldError, { key: 'db226c7be27b8220e18bb0e772e05fe46ce65adc', show: this.hasError }, h("slot", { key: '6e3f9975a9220b5ea93a096fa76455105f1c617c', name: "error" })), h(GuxFormFieldHelp, { key: '0e9c4b1a117c0cb0da2d58749b8a43924d027541', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b7ae2ae7958eb4c8a31a74943914fd9583a7f345', name: "help" })))));
+            } }, 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" })))));
     }
     renderText(text, condition = false) {
         if (condition) {
@@ -164,6 +165,30 @@ export class GuxFormFieldPhone {
                 },
                 "attribute": "label-position",
                 "reflect": 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'"
             }
         };
     }

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

@@ -32,6 +32,20 @@ describe('gux-form-field-phone', () => {
                     expect(page.root).toMatchSnapshot();
                 });
             });
+            describe('indicator marks', () => {
+                ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                    it(`should render component as expected (${index + 1})`, async () => {
+                        const html = `
+              <gux-form-field-phone ${indicatorMark}>
+                <gux-phone-input-beta></gux-phone-input-beta>
+                <label slot="label">Label</label>
+              </gux-form-field-phone>
+            `;
+                        const page = await newSpecPage({ components, html, language });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
         });
         describe('error', () => {
             it('should render component as expected', async () => {

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

@@ -31,6 +31,7 @@ export class GuxFormField {
         this.displayUnits = undefined;
         this.valueInTooltip = undefined;
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = undefined;
@@ -113,9 +114,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: '536ac7ef1a315b964bf02624dc3869c1dd96ea0d', class: {
+        return (h(Host, { key: '4d67610cec424ba908a0ffd339d92a5595312a43', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '4a8c15932cbab564411aaf0a5b84b388451c69af', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5bb81b87152c506fa2f5dd58b9dd1f2c0436a75e', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'd8fef894e3055e777419c6b40da7add8d096f9fc', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '941cbbe16442409502235663a3293adc1d86e895', variant: "required", required: this.required }), h("slot", { key: 'bae23aa9ba01d17ddd08dc807eb75d169648293d', name: "label-info" })), h("div", { key: '028ca2d0fb9b09c64d516629bb33f43bc4d1d2fb', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '12713c069c47170c967872e6bfb75d240a7cec40', show: this.hasError }, h("slot", { key: 'a3d0371ae88f3b34f63dd67f9ebfeb986fa02eab', name: "error" })), h(GuxFormFieldHelp, { key: '7e67aff4453179f3ba7d175354b1d1864ace26ae', show: !this.hasError && this.hasHelp }, h("slot", { key: '9c3e1c6c22d718dda1857a6830000e85ecf31dfa', name: "help" }))))));
+            } }, 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" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -247,6 +248,30 @@ export class GuxFormField {
                 },
                 "attribute": "label-position",
                 "reflect": 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'"
             }
         };
     }

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

@@ -29,6 +29,7 @@ import { focusInputElement } from "../../../../../utils/dom/focus-input-element"
 export class GuxFormFieldSearch {
     constructor() {
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.clearable = true;
         this.disabled = undefined;
@@ -93,13 +94,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '61f46a689d49d8525c6df99004583b0eb298ca69', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '32b69524e41af3bd70f27692cfa8fed7760adc82', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '9e728f8517117c8842a7558704ca57a3528b92bc', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3e03db4fe44fd5576cd01d7feff3079ec99f5b59', variant: "required", required: this.required }), h("slot", { key: '6ff27eda3222581c520f422366f99f859272bf41', name: "label-info" })), h("div", { key: '2afd9556de40daf92e239f1788cb9cf26ff40fba', class: "gux-input-and-error-container" }, h("div", { key: '4146064d65f43999a3337d8ce836645697ab7f5c', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'b4f4b06f375b0740a9f75fc9f17ad7c8d32a0ad6', class: {
+            } }, h("div", { key: '9419559eaa633e26b00cd105471b1d41810705a8', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: 'd7a8da28289fe795347ad5b7b5717b25c22c6671', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '2d2d38f7feb613097e19b1138ca181951e0d5346', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'f0be5527b1c78adc3ff2be5e1ca962e1ac7b4c9f', show: this.hasError }, h("slot", { key: '0a13d448d55dfd172a962155a03c98c53216c923', name: "error" })), h(GuxFormFieldHelp, { key: 'c659a6499d84260e5a3aa8f721be4b7547e8e144', show: !this.hasError && this.hasHelp }, h("slot", { key: '5f7f33ee71a283faaad06e2c4e6ac05f302b3efb', name: "help" })))));
+            }, 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" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -165,6 +166,30 @@ export class GuxFormFieldSearch {
                 },
                 "attribute": "label-position",
                 "reflect": 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'"
             }
         };
     }

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

@@ -48,6 +48,20 @@ describe('gux-form-field-search', () => {
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+              <gux-form-field-search ${indicatorMark}>
+                <input slot="input" type="search" value="Sample search"/>
+                <label slot="label">Label</label>
+              </gux-form-field-search>
+            `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
         describe('help', () => {
             it('should render component as expected', async () => {
                 const html = `

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

@@ -28,6 +28,7 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
 export class GuxFormFieldSelect {
     constructor() {
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = undefined;
@@ -83,13 +84,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '08980ed5dc32c02b0dbc3e599b714d1f122985b2', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '1a6065c0a948c3c3d9581c2d70d1820a98dabbb7', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '593b4b6b7532edc2e1adef06f455f787795a65d4', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1864bd74afea14fb9288374bbda67a1baefac500', variant: "required", required: this.required }), h("slot", { key: '1b038f71c9bbbbae97520e5386e2b4ee2b0e874c', name: "label-info" })), h("div", { key: 'a46e1cc02003e98c48929d11f1467cc41e10d88c', class: "gux-input-and-error-container" }, h("div", { key: 'f0933fc43865ff9bfa371841fa96c1cc7d6b699d', class: {
+        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: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'b3fd5ec34c9a0dc48a68150626052d6bdbf2f81b', class: {
+            } }, h("div", { key: 'db3d835cc3dc153892340eb9dc2e6493846cc707', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '0be56977b450309a943fd6864a8c7ea761603fdb', name: "input" }), h("gux-icon", { key: 'eeb535fca9eec5a1209dbfde6cbb5b3c67f5ed1b', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '14601f0ddd918bddec29db3fabeb50060bfac077', show: this.hasError }, h("slot", { key: '362ed23b0b3f95531f58e81c8f166295b3e3d619', name: "error" })), h(GuxFormFieldHelp, { key: 'f87ffcfe4adf34e5066eb7d5b720c7f0d74fe255', show: !this.hasError && this.hasHelp }, h("slot", { key: 'aa8d21b4275e76d5003010e2b4bd793ea4ac7f83', name: "help" })))));
+            } }, 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" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -151,6 +152,30 @@ export class GuxFormFieldSelect {
                 },
                 "attribute": "label-position",
                 "reflect": 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'"
             }
         };
     }

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

@@ -59,6 +59,24 @@ describe('gux-form-field-select', () => {
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+              <gux-form-field-select ${indicatorMark}>
+                <select slot="input" name="lp-1">
+                  <option value="option1">Option 1</option>
+                  <option value="option2">Option 2</option>
+                  <option value="option3">Option 3</option>
+                </select>
+                <label slot="label">Default</label>
+              </gux-form-field-select>
+            `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
         describe('help', () => {
             it('should render component as expected', async () => {
                 const html = `