genesys-spark-components 4.65.2 → 4.66.0

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

@@ -11,18 +11,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { h } from "@stencil/core";
 import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
-import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer } from "../../functional-components/functional-components";
+import { GuxFormFieldError, GuxFormFieldHelp, GuxFormFieldScreenreaderLabel, GuxFormFieldFieldsetContainer, GuxFormFieldVisualLabel } from "../../functional-components/functional-components";
 import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
 import { trackComponent } from "../../../../../utils/tracking/usage";
 /**
  * @slot group-label - Required slot for label tag
  * @slot group-error - Optional slot for error message
  * @slot group-help - Optional slot for help message
+ * @slot label-info - Optional slot for tooltip
  */
 export class GuxFormFieldRadioGroupBeta {
     constructor() {
         this.hasGroupError = false;
         this.hasGroupHelp = false;
+        this.hasGroupLabelInfo = false;
         this.disabled = false;
     }
     watchGroupError(hasGroupError) {
@@ -37,12 +39,42 @@ export class GuxFormFieldRadioGroupBeta {
         this.setDisabledRadio();
     }
     onMutation() {
+        this.groupLabelInfo = this.root.querySelector('[slot=group-label-info]');
         this.hasGroupError = hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot(this.root, 'group-help');
     }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.root.matches(':focus-within')) {
+                    void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideTooltipTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.root.matches(':focus-within')) {
+                    void ((_b = this.groupLabelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideTooltipTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideTooltipTimeout);
+    }
     componentWillLoad() {
+        this.groupLabelInfo = this.root.querySelector('[slot=group-label-info]');
         this.hasGroupError = hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot(this.root, 'group-label-info');
         this.setLabel();
         this.setDisabledRadio();
         trackComponent(this.root);
@@ -60,14 +92,15 @@ export class GuxFormFieldRadioGroupBeta {
             });
         }
     }
-    renderScreenReaderText(text, condition = false) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '19228b0bcab52c0526996d7d0f6d31ef0ababd24', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldLegendLabel, { key: 'f772a428e7144532036205cf8315cec1a33b8cf9', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '9245e721f752b56153bd48f55be1bbe1d2ccd70b', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: 'a67a2bdfdc770c5bd168603697a297638025fb9b' }), h(GuxFormFieldError, { key: '44552902197a66af19c006c0698868e49a866db3', show: this.hasGroupError }, h("slot", { key: '6036ceddfb54947f96568effde76a10d40373287', name: "group-error" })), h(GuxFormFieldHelp, { key: '859aa51e629873dbfe1613cd395494116139e534', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '3a36b35266d4d4e7f5ca91ea0b6135ccb07fa909', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: 'ff8bd3225266d39e7594f4e8c9cedce40ee35072', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '206273a0da581b0f9165fee2fa885ccdec40bf71' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '0d08b1d0ed92347875f43bd9c880b14b62490add', position: "above", required: false }, h("slot", { key: '96a1d4a2551a802b2a9143b9be0a4b54cbfa4ae1', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: 'f4c90bb6a6c9430d3ae3175b3dfb255e3e701a2f', name: "group-label-info" })), h("slot", { key: '94bf5301a0e109fe1c7bfb29fe6716fbbb79d73a' }), h(GuxFormFieldError, { key: 'ec7d70173c21907b98f10a5860d340aa8430009d', show: this.hasGroupError }, h("slot", { key: 'f8d90f822e9ad6c8b3ea63dd8dd8b465b0f127c1', name: "group-error" })), h(GuxFormFieldHelp, { key: '5b07f4d09346864b574c93a914a91fd40d812960', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'b0902bd8f39a1d6940475e4b605629e616d2749f', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');
@@ -109,7 +142,8 @@ export class GuxFormFieldRadioGroupBeta {
     static get states() {
         return {
             "hasGroupError": {},
-            "hasGroupHelp": {}
+            "hasGroupHelp": {},
+            "hasGroupLabelInfo": {}
         };
     }
     static get elementRef() { return "root"; }
@@ -122,6 +156,21 @@ export class GuxFormFieldRadioGroupBeta {
                 "methodName": "watchDisabled"
             }];
     }
+    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-range/gux-form-field-range.css

@@ -61,16 +61,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-range/gux-form-field-range.js

@@ -24,6 +24,7 @@ import { OnResize } from "../../../../../utils/decorator/on-resize";
  * @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 GuxFormField {
     constructor() {
@@ -52,12 +53,42 @@ export class GuxFormField {
         this.active = 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;
+        this.active = false;
+        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 });
@@ -82,9 +113,9 @@ export class GuxFormField {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: '555a470f41986a6ab8731c8803b240b30cd4d65e', class: {
+        return (h(Host, { key: '3c79eb363dfae32c858cffad043764902d8dae85', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '39f20232cd05020500ab0a9aa9be1fdaf1291619', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '1bbfe067086bc8c7d7673b5cdc9c789052b08a86', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'eaca0784721a3cd922dc07a5cd769fe18601aabd', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '23fc47b9206f15812a47dcef4f28825021619426', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '123775129952675ae780f24308deee4151d1c102', show: this.hasError }, h("slot", { key: '98bc664e228397f35fe3c9459d61543d33de50bc', name: "error" })), h(GuxFormFieldHelp, { key: '58bd604286dc20f3228eebe9796a92f1dae762d0', show: !this.hasError && this.hasHelp }, h("slot", { key: '6570f867aa63fa8ef6d679b419419376565e4d78', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: 'ae0bc64f1d0180332c427dd692ebc1fb94457f95', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'cb326bd43897be87ecc8d7eb31d04a1474377fb3', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'c6eb68766e994d20c5b930cd777816a9ca80714c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e10e38dcc251d9eb5d76ca3b09deb813eb84b80f', variant: "required", required: this.required }), h("slot", { key: 'cabdb686e15ffee841d7cfc96ef89877d5753e67', name: "label-info" })), h("div", { key: 'd8a55159e6fcf0c887a854c4d7c48f7d3f484c55', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '71a0770956d98d2ca991f470e3b48ab77d9304b4', show: this.hasError }, h("slot", { key: '9be62a32a0c0fe6dc08ac5d56584a39f71ad9731', name: "error" })), h(GuxFormFieldHelp, { key: '4e841ac142102e97671c812bba62f963f9c4ed53', show: !this.hasError && this.hasHelp }, h("slot", { key: 'decbb8b0ee04d4402b2d37e3b4586c3d6ee4a1b1', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -251,17 +282,23 @@ export class GuxFormField {
                 "capture": false,
                 "passive": true
             }, {
-                "name": "focusout",
+                "name": "mouseup",
                 "method": "onMouseup",
                 "target": undefined,
                 "capture": false,
+                "passive": true
+            }, {
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
                 "passive": false
             }, {
-                "name": "mouseup",
-                "method": "onMouseup",
+                "name": "focusout",
+                "method": "onFocusout",
                 "target": undefined,
                 "capture": false,
-                "passive": true
+                "passive": false
             }];
     }
 }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.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-search/gux-form-field-search.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 GuxFormFieldSearch {
     constructor() {
@@ -36,9 +37,37 @@ export class GuxFormFieldSearch {
         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);
@@ -49,6 +78,7 @@ export class GuxFormFieldSearch {
     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 });
@@ -62,13 +92,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '5ed3aaeee90391b9a7b9a5dd162fe5901d5bba64', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '6aba7a96cd2cfaed4078e7f27bbb7c35b10f565a', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'a1ba5413c0bdc64b35623b7c55acc4bdf73593fc', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: '5e1e1fbd4284e0693282c4ad81c301d866c92c24', class: "gux-input-and-error-container" }, h("div", { key: '64ec4e3f17fdc0fc90e8a502e02fcdb2471c6919', class: {
+        return (h(GuxFormFieldContainer, { key: 'ef96177e5e1480b4ca642e24fc76978a5975a068', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '2f57a79271df2635b4b94aafdd54014cf3e68807', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '5f83442364ebcad43ae2d3c1fae7b5505357b21c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2a8f39c847a5d30a4ce87e9da0839da0e7fdf04e', variant: "required", required: this.required }), h("slot", { key: '41e72a5f6ad41378d91e6767bb91f91d5cd68a8a', name: "label-info" })), h("div", { key: 'ccac0b555024cf9fbae23e62a343451f88231351', class: "gux-input-and-error-container" }, h("div", { key: 'f97951825cc335a257dc7b9b0735c80e6cd83142', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'f3189f5fe549c8bacfc867684ac5b84a426aef06', class: {
+            } }, h("div", { key: 'ec5e78d90797b98275bb80f2efccae240e03c081', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("gux-icon", { key: '57e4528eac359bb1580e145dad3651955fda1daf', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: '4d4711e0186639fa96b535bc9eaec2ba9a7380d3', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '1538996618a45b3f7029c6a64413782a4880b25d', show: this.hasError }, h("slot", { key: 'ca2785b35aa7791b17b7f8a5362229141af59b47', name: "error" })), h(GuxFormFieldHelp, { key: '24cb43bfc43dcebc9543d3353da8bebbe1d112f4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'bae67ddb44efc1b45ddaf8254267115c86b72a4b', name: "help" })))));
+            } }, h("gux-icon", { key: '36f8527ec1bd5ba4080037d9216f8f035f354fca', "icon-name": "fa/magnifying-glass-regular", decorative: true }), h("slot", { key: 'e30a445cd5d25bfb51365619f869267edd254a80', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'c2f8a7ea0d69672c8ffda1dc5dc4c1857ce216df', show: this.hasError }, h("slot", { key: '633e0a0f84f360b349c4c928dba275906599d453', name: "error" })), h(GuxFormFieldHelp, { key: '1c968ea45350d2c0c9396e79848d81711dfeef20', show: !this.hasError && this.hasHelp }, h("slot", { key: 'c71533a3cd0f2363c7f2b9803648307f7b946544', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -170,6 +200,21 @@ export class GuxFormFieldSearch {
         };
     }
     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-search/tests/gux-form-field-search.spec.js

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

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.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-select/gux-form-field-select.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 GuxFormFieldSelect {
     constructor() {
@@ -34,12 +35,41 @@ export class GuxFormFieldSelect {
         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 });
@@ -53,13 +83,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '71560e52fd946884252bab335b9bd4d3c799fcd8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b3d111f96ea13f348bba62f9081fd49b4d38c842', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ae493203aa4f45506032269d6f4aeb17ac898c68', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'fae6260a05a95d676d9d26be8ac8193e1ac48253', class: "gux-input-and-error-container" }, h("div", { key: '0affd627db23cee070538734c270edae97112516', class: {
+        return (h(GuxFormFieldContainer, { key: 'a097f65d0c47d8bd6872af62d7e455a458506eb1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '9c7c1c506b780bfe1fdf48d0aef5ac7379da3dbf', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '2090c115f21d72d87f6b6afbacbc0edac2cd72ca', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5196bfc9c861aeeff50f13a2b8358b46e47a3fc6', variant: "required", required: this.required }), h("slot", { key: '312164dd53aa9390f8a3622072b6a0146ff8ae1e', name: "label-info" })), h("div", { key: '7c9364856b06b645f2d044245fb4c56ba70e1f0c', class: "gux-input-and-error-container" }, h("div", { key: '61206f6a37b64af3159a5829e7ef3fcc2f94f5e4', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'aa35c1b1e99ee28ec05ef4c357fb2f734766c453', class: {
+            } }, h("div", { key: '41a04deaac72b7e283ca6cde41e80878ce39961e', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'e0b55eb8b19490eb6bd5ad167382cb1bb2af3c05', name: "input" }), h("gux-icon", { key: '7c218454fcd6448f674cfae5424043c20fce2d14', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: '890a27ccc85e96f0e628dd9b905b3b4ed65050e4', show: this.hasError }, h("slot", { key: '6741388a2325f9c472ffae38a88eb58f34a15338', name: "error" })), h(GuxFormFieldHelp, { key: '36ad5cf7f4bbf0048abed1c3194cf852f18a93e4', show: !this.hasError && this.hasHelp }, h("slot", { key: '74a733da174b4687f88adf33ddadcad73560e0aa', name: "help" })))));
+            } }, h("slot", { key: '175f8b8cdca17a9c7767e6085655fe1748f7bf5f', name: "input" }), h("gux-icon", { key: 'a4575605493a5a0b3f5c52c007bf482fbdf2ca06', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), h(GuxFormFieldError, { key: 'e772b5db006cd95f55dcb7cd47ebc9fb85aec646', show: this.hasError }, h("slot", { key: '01eca5bac2ae8886ee8ed270cdc1fe125220a7a5', name: "error" })), h(GuxFormFieldHelp, { key: 'a90392fa1efe6f12e0a01fe8d4545a1a5d851fc2', show: !this.hasError && this.hasHelp }, h("slot", { key: '1adf43eb8c518ad574df891a19e1bf1177a925f1', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -134,6 +164,21 @@ export class GuxFormFieldSelect {
         };
     }
     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-select/tests/gux-form-field-select.spec.js

@@ -76,5 +76,24 @@ describe('gux-form-field-select', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        describe('label-info', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-select>
+        <select slot="input" name="e-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-label-info-beta slot="label-info">
+          <span slot="content">This is some tooltip text</span>
+        </gux-label-info-beta>
+      </gux-form-field-select>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
     });
 });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.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);