genesys-spark-components 4.65.1 → 4.66.0

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

@@ -25,6 +25,7 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
  * @slot suffix - Optional slot for suffix
  * @slot error - Optional slot for error message
  * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for label tooltip
  */
 export class GuxFormFieldTextLike {
     constructor() {
@@ -41,9 +42,37 @@ export class GuxFormFieldTextLike {
         this.hasHelp = false;
     }
     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-visible')) {
+                    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-visible')) {
+                    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);
+    }
     // eslint-disable-next-line @typescript-eslint/require-await
     async guxForceUpdate() {
         this.hasContent = hasContent(this.input);
@@ -59,6 +88,7 @@ export class GuxFormFieldTextLike {
     componentWillLoad() {
         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.hasPrefix = Boolean(this.root.querySelector('[slot="prefix"]'));
@@ -80,15 +110,15 @@ export class GuxFormFieldTextLike {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '86a510be1423b2e46f8f0e8457dde0c1e9df13ed', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '63c3fc02eb3ec146075c2da84c462f27822ca808', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '4ef1afb40888de7df1642f23286e5cffcf6d5864', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'fd35d679cdac2f9c64eedbe144e5792a2cfa03ad', class: "gux-input-and-error-container" }, h("div", { key: 'ae0d6f2d3662997b8e2d7dcb8895ee2a57033119', class: {
+        return (h(GuxFormFieldContainer, { key: 'bb6c077df61d47169ddbd8af74d6906cd5354a18', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b71214d65749df1743a9b37cba6f9808ed26afed', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'e8b921f53a2f96e4e7de5c0a1050da1dbc893a19', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c29409c64ae4f46149e61a8c937d983dbad8566e', variant: "required", required: this.required }), h("slot", { key: '7e9d51f99a6fa3c3771ba2d01f8eee1707d5de1a', name: "label-info" })), h("div", { key: '597300a419b56423ed9d79765f1e0d7e7834a43c', class: "gux-input-and-error-container" }, h("div", { key: '1fbe34b0a399b38077681c29b2bdb03b0a147043', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'faced97c3fd4504e59eb8086b0adef95b9ec881f', class: {
+            } }, h("div", { key: '9994182f2aaa915bb5445836b754c037052cbebb', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            } }, h("slot", { key: '7e936d0be636981e6404c559e20a29dbd8654eee', name: "prefix" }), h("slot", { key: '3945e2a3c79ff28178c355002c576c6fa0fbe099', name: "input" }), this.renderRadialLoading(), h("slot", { key: '2ed2ac89134fe77eb62e286a84d0c0ffe4fe13d2', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '3abfa87d4642948fd21dfd8748e30efbcd18d527', show: this.hasError }, h("slot", { key: 'b77a1af625c5901e31809fee6e88aeadbb76c851', name: "error" })), h(GuxFormFieldHelp, { key: '1e1e5474f87d937186c140690f2e8d85cde0c14a', show: !this.hasError && this.hasHelp }, h("slot", { key: 'cffc4e02f2ce1e6c0f64621e760bcf6f5b67c627', name: "help" })))));
+            } }, h("slot", { key: '4be921cb58fd54171f9bc81409451b45904fcdd9', name: "prefix" }), h("slot", { key: 'c942c81394a5c2f79e030484191dc1878e7ba9ad', name: "input" }), this.renderRadialLoading(), h("slot", { key: '52428b82056bf77902ded5c730ed3f976d24be13', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'debc94e90a94c098c21be404daaf3e339ae8f5c0', show: this.hasError }, h("slot", { key: '04d219fd899ac0b09468c0e9a1360c5c9ff52ec9', name: "error" })), h(GuxFormFieldHelp, { key: '07600d7b0bbb3b1fcb25ac23283944c2f143284f', show: !this.hasError && this.hasHelp }, h("slot", { key: '87b4f9fdf2eb08d4da0ccf197d279f99d73fc04c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -227,6 +257,21 @@ export class GuxFormFieldTextLike {
         };
     }
     static get elementRef() { return "root"; }
+    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-text-like/tests/gux-form-field-text-like.spec.js

@@ -94,6 +94,21 @@ describe('gux-form-field-text-like', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        describe('label-info', () => {
+            it('should render component as expected', async () => {
+                const html = `
+          <gux-form-field-text-like>
+          <input slot="input" type="text" name="e-1" />
+          <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-text-like>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
         describe('label-position', () => {
             [
                 '',

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

@@ -36,16 +36,23 @@
   order: 0;
 }
 
-.gux-form-field-label.gux-required::after {
-  color: var(--gse-ui-formControl-label-indicator-requiredColor);
-  content: " *";
+.gux-form-field-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   width: fit-content;
-  min-width: 45px;
-  margin-right: var(--gse-ui-formControl-label-gap);
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
   padding: var(--gse-ui-formControl-label-padding);

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

@@ -23,6 +23,7 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
  * @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 GuxFormFieldTextarea {
     constructor() {
@@ -35,12 +36,41 @@ export class GuxFormFieldTextarea {
         this.hasHelp = false;
     }
     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-visible')) {
+                    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-visible')) {
+                    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);
+    }
     componentWillLoad() {
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
         trackComponent(this.root, { variant: this.variant });
@@ -57,12 +87,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'c9f234ba85bd5c74f2055e0e92da75ffa2387f7b', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b3a0ffa00cd263edbc3f324586482006c631c0f0', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '653cb3c9e3951eb736124457ef8d61e576a16100', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'cc1db32ae61b2080033b01970162e2bc8d4407c5', class: "gux-input-and-error-container" }, h("div", { key: '1698d45688f8b70cce2707c39a5a064b6e6328d0', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '43b28391a715f32a263ef1df852c3ea5e2803dfc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '77baab9e20d6d06a1bfb3154fd53ff8e8b4df5db', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '583f964f54dac1ac3eb0aa9f496581f7f04cb8b4', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '61e42f3d04fa6b1e0fe4d8c72b24dce4a1881d7e', variant: "required", required: this.required }), h("slot", { key: '657d582d2b3d8a91aaff3ee1c251e0289314dba6', name: "label-info" })), h("div", { key: '7b8037f91f519b1eeb3b4474ea95d0a99e8a046c', class: "gux-input-and-error-container" }, h("div", { key: 'a8a5a626920f09415420cdb4e9f3e6be4b279eed', 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: '4a6ad15452fc7ddb08e80e6bbf72512096d67af4', name: "input" })), h(GuxFormFieldError, { key: '8ad3247396074f2901a03ef0e8b8730516665a06', show: this.hasError }, h("slot", { key: '51a86cb8c4c0aa7afcbfd6c21d4b7ce4a61503c2', name: "error" })), h(GuxFormFieldHelp, { key: 'f2e760497107c5d9f38e778898b2802de7d7598f', show: !this.hasError && this.hasHelp }, h("slot", { key: '953db9f931de9c98faa53ed05ac7aad23e9475f6', name: "help" })))));
+            } }, h("slot", { key: '399fbd6427a990fa1289c21d73eb3249ca7cc6b4', name: "input" })), h(GuxFormFieldError, { key: '797230dacb7209b2e4b3a1707b6a8395a305767d', show: this.hasError }, h("slot", { key: '74833e0052505904200713348721c7fcf25a447a', name: "error" })), h(GuxFormFieldHelp, { key: 'b1f1359ea640b61de1512d6ae91c99dbb7e97505', show: !this.hasError && this.hasHelp }, h("slot", { key: '128c2c4c7f6f28df86ef618f44cf5cd3e572f23d', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -171,6 +201,21 @@ export class GuxFormFieldTextarea {
         };
     }
     static get elementRef() { return "root"; }
+    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-textarea/tests/gux-form-field-textarea.spec.js

@@ -75,5 +75,20 @@ describe('gux-form-field-textarea', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        describe('label-info', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-textarea>
+        <textarea slot="input" name="textarea"></textarea>
+        <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-textarea>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
     });
 });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-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-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);