genesys-spark-components 4.65.2 → 4.67.0

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

@@ -14,7 +14,7 @@ import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { onDisabledChange, onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
 import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldLegendLabel } from "../../functional-components/functional-components";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldScreenreaderLabel, GuxFormFieldVisualLabel } from "../../functional-components/functional-components";
 import { getComputedLabelPosition, validateFormIds } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
 import componentResources from "./i18n/en.json";
@@ -23,6 +23,7 @@ import componentResources from "./i18n/en.json";
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
  * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for label tooltip
  */
 export class GuxFormFieldTimePicker {
     constructor() {
@@ -32,6 +33,7 @@ export class GuxFormFieldTimePicker {
         this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const timePickerSlot = this.root.querySelector('gux-time-picker');
@@ -40,15 +42,44 @@ export class GuxFormFieldTimePicker {
         }
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
     }
+    handleKeyup(event) {
+        var _a;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-within')) {
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
     async componentWillLoad() {
         this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot(this.root, 'label-info');
         trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -61,17 +92,18 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '567e8415a3056f89a631927079a8853dfa3be29d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '885ad3676005e7ef8b42d4a57975a8106ede917c', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '19bd0809e858a22af995909e15304040f6a8d0ee', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'ba77f4248745a859c40fa02d576df03296ac740a', class: "gux-input-and-error-container" }, h("div", { key: '5d4482c64e9dd26b09d555c478c5bbb9ce05dcc1', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'bd16f2509036be8ed9accbbce974b3957b0ca423', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'fc1f9321ca0a297c6b3bd8b13af88bfc8c7f87f0' }, (_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: '1f506df71beeb9068ea26ffa74dd413ed8eecc89', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'dc34aa447c7b720a04edd72fb7dd192fde747baa', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '73b6105b2076dacd64527990b8a0b3aa783d124f', variant: "required", required: this.required }), h("slot", { key: '115ddb550dd5bcf9f3495a109aa524b31f4c9f4d', name: "label-info" })), h("div", { key: '63af6d9cdd5793ac7a764c449bf5e71507c02580', class: "gux-input-and-error-container" }, h("div", { key: 'd2692c414be3cd7481285fb3569862e4151479c7', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'a42797e638481307999e2642017967c5d64a36c6', class: {
+            } }, h("div", { key: '3ee8b3b75baaf416f618ff9bdd211ad5f699ba65', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'a6377d5ccf68b6c71aad7f24d08e8e350b621ca2' }))), h(GuxFormFieldError, { key: '6e9d3e43724562991bee6e4e4460416409bb2120', show: this.hasError }, h("slot", { key: '84468b92e25b1d05c0f986f3843002c7cb9eaa78', name: "error" })), h(GuxFormFieldHelp, { key: 'ed2b787bb6a6cce1183f2da2760322de1b8c7ae1', show: !this.hasError && this.hasHelp }, h("slot", { key: '9e51298096553178c7ebef0fb56209db18cb7eed', name: "help" })))));
+            } }, h("slot", { key: 'd658d265fa0172d60ec07d804cefac8530f3c549' }))), h(GuxFormFieldError, { key: '83d10344b28bd3d955a62471523d575aaafd5b74', show: this.hasError }, h("slot", { key: '7b20eb00e85eff6abb42fe6fad1d03a1cf822870', name: "error" })), h(GuxFormFieldHelp, { key: '5bbbeb9e59b2c8812fcbaa49e6dc9e0e49a2a83d', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fea51cb027c05f4df03a17c751e4dd152acc7bd4', name: "help" })))));
     }
-    renderScreenReaderText(text, condition = true) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     get variant() {
@@ -82,16 +114,16 @@ export class GuxFormFieldTimePicker {
         return `${type}-${labelPositionVariant}`;
     }
     setInput() {
-        this.timePickerElement = this.root.querySelector('gux-time-picker');
-        this.disabled = this.timePickerElement.disabled;
-        this.required = this.timePickerElement.required;
-        this.disabledObserver = onDisabledChange(this.timePickerElement, (disabled) => {
+        this.input = this.root.querySelector('gux-time-picker');
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onDisabledChange(this.input, (disabled) => {
             this.disabled = disabled;
         });
-        this.requiredObserver = onRequiredChange(this.timePickerElement, (required) => {
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        validateFormIds(this.root, this.timePickerElement);
+        validateFormIds(this.root, this.input);
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');
@@ -142,7 +174,8 @@ export class GuxFormFieldTimePicker {
             "disabled": {},
             "required": {},
             "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasLabelInfo": {}
         };
     }
     static get elementRef() { return "root"; }
@@ -152,6 +185,21 @@ export class GuxFormFieldTimePicker {
                 "methodName": "watchValue"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     OnMutation({ childList: true, subtree: true })

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

@@ -62,5 +62,20 @@ describe('gux-form-field-time-picker', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        describe('label-info', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-time-picker>
+        <gux-time-picker value="09:00"></gux-time-picker>
+        <label slot="label">Select Time</label>
+        <gux-label-info-beta slot="label-info">
+          <span slot="content">This is some tooltip text</span>
+        </gux-label-info-beta>
+      </gux-form-field-time-picker>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
     });
 });

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

@@ -1,6 +1,5 @@
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
-/* stylelint-disable-next-line selector-class-pattern */
-/* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
   min-width: 0;
@@ -45,33 +44,6 @@
   order: 0;
 }
 
-.gux-form-field-legend-label ::slotted(label) {
-  white-space: nowrap;
-}
-.gux-form-field-legend-label.gux-required::after {
-  color: var(--gse-ui-formControl-label-indicator-requiredColor);
-  content: " *";
-}
-.gux-form-field-legend-label.gux-beside {
-  position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  float: left;
-  width: fit-content;
-  min-width: 45px;
-  margin-right: var(--gse-ui-formControl-label-gap);
-}
-.gux-form-field-legend-label.gux-above {
-  padding: var(--gse-ui-formControl-label-padding);
-}
-.gux-form-field-legend-label.gux-screenreader {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -94,6 +66,40 @@
   order: 0;
 }
 
+.gux-form-field-visual-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-visual-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-beside {
+  position: relative;
+  top: var(--gse-ui-formControl-input-top);
+  width: fit-content;
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
+}
+.gux-form-field-visual-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.gux-form-field-visual-label.gux-screenreader {
+  display: none;
+}
+
+.gux-form-field-screenreader-label {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 ::slotted(label) {
   font-family: var(--gse-ui-formControl-label-text-fontFamily);
   font-size: var(--gse-ui-formControl-label-text-fontSize);

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

@@ -14,7 +14,7 @@ import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { onDisabledChange, onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
 import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldLegendLabel } from "../../functional-components/functional-components";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldScreenreaderLabel, GuxFormFieldVisualLabel } from "../../functional-components/functional-components";
 import { getComputedLabelPosition, validateFormIds } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
 import componentResources from "./i18n/en.json";
@@ -23,6 +23,7 @@ import componentResources from "./i18n/en.json";
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
  * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for label tooltip
  */
 export class GuxFormFieldTimeZonePicker {
     constructor() {
@@ -32,6 +33,7 @@ export class GuxFormFieldTimeZonePicker {
         this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const timeZonePickerSlot = this.root.querySelector('gux-time-zone-picker-beta');
@@ -40,15 +42,45 @@ export class GuxFormFieldTimeZonePicker {
         }
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
     }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-within')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
     async componentWillLoad() {
         this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot(this.root, 'label-info');
         trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -61,16 +93,17 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '15ffed26b936f5d57f7839012009e29a5612b2ae', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '721b5ad0a2679aed79890808338c940b30d479c2', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '9906b0708f0361f70d92dac5a7da230afd851fa6', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: '4e6870799ce3cfc28dc0009ad72486e1574f4bc6', class: "gux-input-and-error-container" }, h("div", { key: '2104167a9235bfeb76a5f8b893982c32501214f5', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'cd7a52de8202d9e8e96ed0ae2fb91e3d828e0057', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'c1e0a47c46fa60b6b85709f7d37534d569879dc1' }, (_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: '3f689034df08073eca1f35b0e13e712bbc128fa2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'bd7c6b19318c913dbe2aa81c679d5c8771185447', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e851d78b940f5f7acfa3a5204df16a2bc63d5b82', variant: "required", required: this.required }), h("slot", { key: '40b42c8fe3f164a20c1908b24dc801005360e732', name: "label-info" })), h("slot", { key: '3e566ee0225e91891d53bfc7af5144d92389ba09', name: "label-info" }), h("div", { key: '43014eb26b0393aeae60fcf8f35c9a721dea08a9', class: "gux-input-and-error-container" }, h("div", { key: 'f4f45913f2a8226ab5760af4ff13be713c3901fc', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'b486aa93ebb8c1cefe20aa8e387717ba73ac4514' })), h(GuxFormFieldError, { key: '994796fc6a3b3e504d57ca44812638934b63e2ac', show: this.hasError }, h("slot", { key: '5adf48d91774ab8ab67b2606d05079d8ba186635', name: "error" })), h(GuxFormFieldHelp, { key: 'b5bd31ce326bfe81663c08cb341f0117b97cdc83', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a57644c2e2771833535ccd85c284442ffcf890a2', name: "help" })))));
+            } }, h("slot", { key: '81b73b33dca30f5d6c5f063255a7993e6624e028' })), h(GuxFormFieldError, { key: 'd64cd9cb465aade7d6dae6c627c64005d57fb3ee', show: this.hasError }, h("slot", { key: '6b65ea0a3f59e25b8a82ddad9bc88ba1284fb0ef', name: "error" })), h(GuxFormFieldHelp, { key: '2a511ab56e7abc242a58aadb1de277ce757a0f8e', show: !this.hasError && this.hasHelp }, h("slot", { key: '8c7093c30053111c12a4a1127f6feef81b6c646b', name: "help" })))));
     }
-    renderScreenReaderText(text, condition = true) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     get variant() {
@@ -81,16 +114,16 @@ export class GuxFormFieldTimeZonePicker {
         return `${type}-${labelPositionVariant}`;
     }
     setInput() {
-        this.timeZonePickerElement = this.root.querySelector('gux-time-zone-picker-beta');
-        this.disabled = this.timeZonePickerElement.disabled;
-        this.required = this.timeZonePickerElement.required;
-        this.disabledObserver = onDisabledChange(this.timeZonePickerElement, (disabled) => {
+        this.input = this.root.querySelector('gux-time-zone-picker-beta');
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onDisabledChange(this.input, (disabled) => {
             this.disabled = disabled;
         });
-        this.requiredObserver = onRequiredChange(this.timeZonePickerElement, (required) => {
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        validateFormIds(this.root, this.timeZonePickerElement);
+        validateFormIds(this.root, this.input);
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');
@@ -141,7 +174,8 @@ export class GuxFormFieldTimeZonePicker {
             "disabled": {},
             "required": {},
             "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasLabelInfo": {}
         };
     }
     static get elementRef() { return "root"; }
@@ -151,6 +185,21 @@ export class GuxFormFieldTimeZonePicker {
                 "methodName": "watchValue"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     OnMutation({ childList: true, subtree: true })

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

@@ -56,6 +56,26 @@ describe('gux-form-field-time-zone-picker', () => {
       </gux-time-zone-picker-beta>
       <label slot="label">Select Time Zone</label>
       <span slot="help">This is a help message</span>
+      </gux-form-field-time-zone-picker>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+        describe('label-info', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-time-zone-picker>
+          <gux-time-zone-picker-beta
+          value="Etc/GMT+1"
+          workspace-default="Etc/GMT"
+          local-default="America/Detroit"
+        >
+        </gux-time-zone-picker-beta>
+        <label slot="label">Select Time Zone</label>
+        <gux-label-info-beta slot="label-info">
+          <span slot="content">This is some tooltip text</span>
+        </gux-label-info-beta>
       </gux-form-field-time-zone-picker>
         `;
                 const page = await newSpecPage({ components, html, language });

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

@@ -1,7 +1,8 @@
 import { GuxFormFieldHelp } from "./gux-form-field-help/gux-form-field-help";
 import { GuxFormFieldError } from "./gux-form-field-error/gux-form-field-error";
 import { GuxFormFieldLabel } from "./gux-form-field-label/gux-form-field-label";
+import { GuxFormFieldVisualLabel } from "./gux-form-field-visual-label/gux-form-field-visual-label";
+import { GuxFormFieldScreenreaderLabel } from "./gux-form-field-screenreader-label/gux-form-field-screenreader-label";
 import { GuxFormFieldContainer } from "./gux-form-field-container/gux-form-field-container";
-import { GuxFormFieldLegendLabel } from "./gux-form-field-legend-label/gux-form-field-legend-label";
 import { GuxFormFieldFieldsetContainer } from "./gux-form-field-fieldset-container/gux-form-field-fieldset-container";
-export { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldContainer, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer };
+export { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLabel, GuxFormFieldScreenreaderLabel, GuxFormFieldVisualLabel, GuxFormFieldContainer, GuxFormFieldFieldsetContainer };

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

@@ -0,0 +1,4 @@
+import { h } from "@stencil/core";
+export const GuxFormFieldScreenreaderLabel = (_, children) => {
+    return (h("legend", { class: "gux-form-field-screenreader-label" }, children));
+};

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

@@ -0,0 +1,8 @@
+import { h } from "@stencil/core";
+export const GuxFormFieldVisualLabel = ({ position, required }, children) => {
+    return (h("div", { class: {
+            'gux-form-field-visual-label': true,
+            [`gux-${position}`]: true,
+            'gux-required': required
+        }, role: "presentation" }, children));
+};

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

@@ -22,7 +22,7 @@ export function getComputedLabelPosition(label, labelPosition) {
     }
 }
 export function validateFormIds(root, input) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e, _f;
     if (hasLabelSlot(root)) {
         const label = root.querySelector('label[slot="label"]');
         const inputHasId = Boolean(input.hasAttribute('id'));
@@ -78,6 +78,21 @@ export function validateFormIds(root, input) {
             .getAttribute('aria-describedby')) === null || _d === void 0 ? void 0 : _d.split(' ').filter(id => !id.startsWith(`gux-form-field-help`))) || [];
         input.setAttribute('aria-describedby', describedByIds.join(' '));
     }
+    if (hasSlot(root, 'label-info')) {
+        const labelInfo = root.querySelector('[slot="label-info"]');
+        const labelInfoId = randomHTMLId('gux-label-info-beta');
+        const describedByIds = ((_e = input
+            .getAttribute('aria-describedby')) === null || _e === void 0 ? void 0 : _e.split(' ').filter(id => !id.startsWith(`gux-label-info-beta`))) || [];
+        labelInfo.setAttribute('id', labelInfoId);
+        describedByIds.push(labelInfoId);
+        describedByIds &&
+            input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
+    else if (input.getAttribute('aria-describedby')) {
+        const describedByIds = ((_f = input
+            .getAttribute('aria-describedby')) === null || _f === void 0 ? void 0 : _f.split(' ').filter(id => !id.startsWith(`gux-label-info-beta`))) || [];
+        input.setAttribute('aria-describedby', describedByIds.join(' '));
+    }
 }
 export function setSlotAriaAttribute(root, attribute, input, slotName) {
     var _a;

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: 'f2ca1f6b2662be485b2810c61c7f3bc6c910c4a3', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '742e4e73ae7d607433cdff90a26ce96726fc4929', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (h("button", { key: '396f8388e24e30c41c1cce970ffd1492668ed1ff', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '28c90daa4bf9ececb2e84aa774e673eae5cd2679', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get is() { return "gux-form-field-input-clear-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.css

@@ -0,0 +1,3 @@
+.gux-form-field-label-indicator-required {
+  color: var(--gse-ui-formControl-label-indicator-requiredColor);
+}

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.js

@@ -0,0 +1,77 @@
+import { h } from "@stencil/core";
+import { trackComponent } from "../../../../../utils/tracking/usage";
+export class GuxFormFieldLabelIndicator {
+    constructor() {
+        this.variant = 'required';
+        this.required = false;
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.variant });
+    }
+    render() {
+        if (this.variant === 'required' && this.required) {
+            return (h("span", { class: "gux-form-field-label-indicator-required", "aria-hidden": "true" }, "*"));
+        }
+        else {
+            return null;
+        }
+    }
+    static get is() { return "gux-form-field-label-indicator"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gux-form-field-label-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gux-form-field-label-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldLabelIndicatorVariant",
+                    "resolved": "\"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldLabelIndicatorVariant": {
+                            "location": "import",
+                            "path": "./gux-form-field-label-indicator.types",
+                            "id": "src/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.types.ts::GuxFormFieldLabelIndicatorVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'required'"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "root"; }
+}

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/tests/gux-form-field-label-indicator.spec.js

@@ -0,0 +1,20 @@
+import { newSpecPage } from "../../../../../../test/specTestUtils";
+import { GuxFormFieldLabelIndicator } from "../gux-form-field-label-indicator";
+const components = [GuxFormFieldLabelIndicator];
+const language = 'en';
+describe('gux-form-field-label-indicator', () => {
+    describe('#render', () => {
+        [
+            '<gux-form-field-label-indicator></gux-form-field-label-indicator>',
+            '<gux-form-field-label-indicator variant="required" required="false"></gux-form-field-label-indicator>',
+            '<gux-form-field-label-indicator variant="required" required="true"></gux-form-field-label-indicator>',
+            '<gux-form-field-label-indicator variant="optional" required="false"></gux-form-field-label-indicator>',
+            '<gux-form-field-label-indicator variant="optional" required="true"></gux-form-field-label-indicator>'
+        ].forEach((html, index) => {
+            it(`should render component as expected (${index + 1})`, async () => {
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
+    });
+});

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

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

package/dist/collection/components/stable/gux-inline-alert/gux-inline-alert.js

@@ -28,10 +28,10 @@ export class GuxAlert {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: '441d71a8c6cfe5e0c7c1dfe62b70d7a607503d32', class: {
+        return (h("div", { key: '3f7a988f3399a0ed980c388d6c3c0f366e1be9f1', class: {
                 'gux-inline-alert': true,
                 [`gux-${this.accent}`]: true
-            } }, h("div", { key: 'aec305145d4cc0c58fe7b3762a6cd77fb4551787', class: "gux-message-wrapper" }, h("gux-icon", { key: '636814087e9f5d3acb4228cccd1aa28f59ec2966', "icon-name": this.getIcon(this.accent), decorative: true }), h("div", { key: '50a2b862dabc781d586b46e8ee8e3a2a5f39c114', class: "gux-sr-only" }, this.i18n(this.accent)), h("div", { key: '89980c218894c919fc1577f1d330458b007df78b', class: "gux-content" }, h("slot", { key: 'd083d3e2d5cdabf5b19f4b92ff2202dadccc7cd2', name: "content" }, h("slot", { key: '76ce00860b2058b3993a759a30c92e40b944db54' }))))));
+            } }, h("div", { key: 'ba1716c5cd54ed2c59613e2f3688f12973a047f6', class: "gux-message-wrapper" }, h("gux-icon", { key: 'f8e371d3e4fecc7704083ae7467f2b39f4bc53d1', "icon-name": this.getIcon(this.accent), decorative: true }), h("div", { key: '5dcddaaa4459358757b1f7d0751521d31e40510a', class: "gux-sr-only" }, this.i18n(this.accent)), h("div", { key: '82fb28d33dd951506a1b2fbaf51e36c123364ff5', class: "gux-content" }, h("slot", { key: '20d27aee6d02d133f5fdfac4379ae15897f66321', name: "content" }, h("slot", { key: '2e24cd792085c73b1cb0d413d0d17024b9bce856' }))))));
     }
     static get is() { return "gux-inline-alert"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-list/gux-list-divider/gux-list-divider.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class GuxListDivider {
     render() {
-        return (h(Host, { key: 'afb8a02891446c21b8f96ae006fb508b8500d323', role: "presentation" }));
+        return (h(Host, { key: '8beda4b11721cb284a8c56523299a8bc413d0499', role: "presentation" }));
     }
     static get is() { return "gux-list-divider"; }
     static get encapsulation() { return "shadow"; }