genesys-spark-components 4.65.2 → 4.67.0

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

@@ -1,5 +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 */
 .gux-form-field-fieldset-container {
   display: flex;
@@ -45,33 +45,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 +67,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;
+}
+
 :host {
   display: block;
 }

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

@@ -13,7 +13,7 @@ import { buildI18nForComponent } from "../../../../../i18n";
 import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer } from "../../functional-components/functional-components";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldVisualLabel, GuxFormFieldScreenreaderLabel } from "../../functional-components/functional-components";
 import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
 import { getComputedLabelPosition, setSlotAriaLabelledby, setSlotAriaDescribedby } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
@@ -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 GuxFormFieldDropdown {
     constructor() {
@@ -31,6 +32,7 @@ export class GuxFormFieldDropdown {
         this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const dropdownSlot = this.root.querySelector('gux-dropdown') ||
@@ -40,15 +42,45 @@ export class GuxFormFieldDropdown {
         }
     }
     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.dropdownElement.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.dropdownElement.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() {
@@ -56,17 +88,18 @@ export class GuxFormFieldDropdown {
             this.requiredObserver.disconnect();
         }
     }
-    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: '666a7685c605ea7479a051d974539de44ecaef98', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '11758886f2f34ffe6e86d7d7cd09eb8b5fc4b4fe', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'bb7665c398da3d38396bb5e3ca65d5aea10611da', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { key: '1fc1141771a6cf9adebd75ef14a466191f17cd65', class: "gux-input-and-error-container" }, h("div", { key: '8a44f9eafffc9a764fda33656e28ffee6c2495b4', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '769d0863b4adc96bbe6733f067043ac96dea27eb', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'af328e637e5b57668e8a31e71a922d2c32194c82' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'e9de0468d74cd89ca37bcef0082abc9bdf3d0c27', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'd8cf52f49ede1c0cdd7e546fd6fb01ad61a22e10', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '44e3ef7c0a5f691ab96aef8573451b94636b1331', variant: "required", required: this.required }), h("slot", { key: '82bca75b4f869e32bee1ddad211767a24553910d', name: "label-info" })), h("div", { key: '5dde879d43dfb5f1c1483595cee7ef0a279021db', class: "gux-input-and-error-container" }, h("div", { key: '044adc97b3ba5fee8b51c4e65628b385bec4693c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '423b5f3c63c2dca04bd02203a893b8cb780e4288' })), h(GuxFormFieldError, { key: '87b68e6fdccb9cdeeb194cea7a74accb0bc91ed2', show: this.hasError }, h("slot", { key: '0324435c911a0614737641ebe7d2d362ef342537', name: "error" })), h(GuxFormFieldHelp, { key: 'f5ff6c7188ac726cfcca95e8f192d01682fff4fc', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f0a51c6237eaaa370e6a6a3491dae66cf5d60dde', name: "help" })))));
+            } }, h("slot", { key: 'd8d5ccf59dc3ff470c96f3941d70f2a2801c1a73' })), h(GuxFormFieldError, { key: '21b34c5cfd1af2508e34023f1570c7cc395f2501', show: this.hasError }, h("slot", { key: '6c4295be90f42a2a195ff1bfc72fcb414775c680', name: "error" })), h(GuxFormFieldHelp, { key: '6f6a76b4ccdfed413f0ce93e6a4073081a92fffb', show: !this.hasError && this.hasHelp }, h("slot", { key: '07f4340cf8c6ee21e8875db697b8cd568e8c994c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -138,7 +171,8 @@ export class GuxFormFieldDropdown {
             "computedLabelPosition": {},
             "required": {},
             "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasLabelInfo": {}
         };
     }
     static get elementRef() { return "root"; }
@@ -148,6 +182,21 @@ export class GuxFormFieldDropdown {
                 "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-dropdown/tests/gux-form-field-dropdown.spec.js

@@ -177,6 +177,48 @@ describe('gux-form-field-dropdown', () => {
           </gux-dropdown-multi>
           <label slot="label">Default</label>
           <span slot="help">This is a help message</span>
+        </gux-form-field-dropdown>
+          `;
+                    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-dropdown>
+          <gux-dropdown>
+            <gux-listbox>
+              <gux-option value="a" disabled>Ant</gux-option>
+              <gux-option value="b">Bat</gux-option>
+              <gux-option value="c">Cat<span slot="subtext">Medium</span></gux-option>
+            </gux-listbox>
+          </gux-dropdown>
+          <label slot="label">Default</label>
+          <gux-label-info-beta slot="label-info">
+            <span slot="content">This is some tooltip text</span>
+          </gux-label-info-beta>
+        </gux-form-field-dropdown>
+          `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+            describe('help multi select', () => {
+                it('should render component as expected', async () => {
+                    const html = `
+          <gux-form-field-dropdown>
+          <gux-dropdown-multi>
+            <gux-listbox-multi>
+              <gux-option-multi value="a" disabled>Ant</gux-option-multi>
+              <gux-option-multi value="b">Bat</gux-option-multi>
+              <gux-option-multi value="c">Cat<span slot="subtext">Medium</span></gux-option-multi>
+            </gux-listbox-multi>
+          </gux-dropdown-multi>
+          <label slot="label">Default</label>
+          <gux-label-info-beta slot="label-info">
+            <span slot="content">This is some tooltip text</span>
+          </gux-label-info-beta>
         </gux-form-field-dropdown>
           `;
                     const page = await newSpecPage({ components, html, language });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/gux-form-field-file.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);
@@ -91,4 +98,8 @@
   font-weight: var(--gse-ui-formControl-label-text-fontWeight);
   line-height: var(--gse-ui-formControl-label-text-lineHeight);
   color: var(--gse-ui-formControl-label-labelColor);
+}
+
+.gux-input-and-error-container {
+  flex-grow: 1;
 }

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

@@ -21,6 +21,7 @@ import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
  * @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 tooltip
  */
 export class GuxFormFieldFile {
     constructor() {
@@ -31,14 +32,43 @@ export class GuxFormFieldFile {
         this.required = 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.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -51,13 +81,13 @@ export class GuxFormFieldFile {
         this.computedLabelPosition = getComputedLabelPosition(this.label, this.labelPosition);
     }
     setInput() {
-        this.fileInputElement = getSlottedInput(this.root, 'input[type="file"][slot="input"]');
-        preventBrowserValidationStyling(this.fileInputElement);
-        this.required = this.fileInputElement.required;
-        this.requiredObserver = onRequiredChange(this.fileInputElement, (required) => {
+        this.input = getSlottedInput(this.root, 'input[type="file"][slot="input"]');
+        preventBrowserValidationStyling(this.input);
+        this.required = this.input.required;
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        validateFormIds(this.root, this.fileInputElement);
+        validateFormIds(this.root, this.input);
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -67,7 +97,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'f293d2a20f76e919abaa49dd2c74c69df77e5c96', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '833348f22f828945a1f0883c0abb816ab9d87d35', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '1ce01c50321d6b55a9e53a8c5fa1518ed1c224e3', name: "label", onSlotchange: () => this.setLabel() })), h("slot", { key: 'feb8729fe9eea50f7bbbbc1784501e42137f8ec4', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'beb5831489ee9ad6fc5e9d457ad30a16e1fec904', show: this.hasError }, h("slot", { key: '1a9d65b3848c1a1686c50cb16661cfcd1f28ff2c', name: "error" })), h(GuxFormFieldHelp, { key: 'a9d8f1bbd8e6ea11ee84f605b0f6a7072664d1c4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'af95628cbd205dbb95f57cdb0a69169854afa8cc', name: "help" }))));
+        return (h(GuxFormFieldContainer, { key: 'a3528820f1ce0da415f1f88cb481b24c50da1bb3', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ad8d2fedd105b44a6d33d76dfbaebcc540c440b6', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '349c6b669d7ec163ce889e4b4c698291af62fece', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '642a9a0956b212bacdfb411342124f6a70d73e66', variant: "required", required: this.required }), h("slot", { key: 'ee0edc22b7c211f33192ac7b1fb078d990744c8f', name: "label-info" })), h("div", { key: 'f1a85660385ef5f7831446b1f1cf6a59c69d2230', class: "gux-input-and-error-container" }, h("slot", { key: '41ccbd999248f5c4d29480c63ac2b57d02ce59db', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'c9bf25630a50f4b8c383dd1d6f8fd38df89f458a', show: this.hasError }, h("slot", { key: 'b4a362e2059e1af1bfece334f1b670b875507317', name: "error" })), h(GuxFormFieldHelp, { key: '141246a74aceff5d1895bad4da1b88fb5d8ce2ed', show: !this.hasError && this.hasHelp }, h("slot", { key: '219153e535b6778eb71a75edc6d1a04d93a45968', name: "help" })))));
     }
     static get is() { return "gux-form-field-file"; }
     static get encapsulation() { return "shadow"; }
@@ -117,6 +147,21 @@ export class GuxFormFieldFile {
         };
     }
     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-file/tests/gux-form-field-file.spec.js

@@ -85,5 +85,26 @@ describe('gux-form-field-file', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        describe('label-info', () => {
+            it('should render component as expected', async () => {
+                const html = `
+        <gux-form-field-file>
+          <label slot="label">Upload a profile picture</label>
+          <input
+            slot="input"
+            type="file"
+            id="avatar"
+            name="avatar"
+            accept="image/png, image/jpeg"
+          />
+          <gux-label-info-beta slot="label-info">
+            <span slot="content">This is some tooltip text</span>
+          </gux-label-info-beta>
+        </gux-form-field-file>
+        `;
+                const page = await newSpecPage({ components, html, language });
+                expect(page.root).toMatchSnapshot();
+            });
+        });
     });
 });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-number/gux-form-field-number.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-number/gux-form-field-number.js

@@ -28,6 +28,7 @@ import componentResources from "./i18n/en.json";
  * @slot error - Optional slot for error message
  * @slot help - Optional slot for help message
  * @part input-section - Style input container
+ * @slot label-info - Optional slot for label tooltip
  */
 export class GuxFormFieldNumber {
     constructor() {
@@ -41,9 +42,37 @@ export class GuxFormFieldNumber {
         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);
@@ -55,6 +84,7 @@ export class GuxFormFieldNumber {
         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');
         trackComponent(this.root, { variant: this.variant });
@@ -69,14 +99,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: '9390fa95d0bc3722ea051195f4d9bf6819117285', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '0e5b642c732129af6218673c52371b656f3694b5', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'd53eb6842297fe84fcf5176015dd05a658a1a895', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'b847593e11471ccc06fdfee9fe1bde882b360148', class: "gux-input-and-error-container" }, h("div", { key: '061cbc0b9058af3c94ad72876cf87e178a5edea0', class: {
+        return (h(GuxFormFieldContainer, { key: 'bd844616e9912a50b111a937633ccb42b6b2079a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '0a5549871891eac88626d509b3f7dac2615b5ed9', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '718dbfa85a5cdd7818fbd343c2ae1293c98b8d3a', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '84829c4c2d82d003496272d0a09fe7f9eb6f5703', variant: "required", required: this.required }), h("slot", { key: 'd299d5edcc4c292a7d967e6849c5864172750119', name: "label-info" })), h("div", { key: '60467c9395c25d25d6365b194a964e04a8f37984', class: "gux-input-and-error-container" }, h("div", { key: '7b4002ca0cdef9eeafab4be8a21f935e5f2756a8', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: 'a92ce5cd2e84cbea997380007ed3a2bfe4eaf696', class: {
+            }, part: "input-section" }, h("div", { key: 'b2afef44b50679f18dcbcc6ebb412ce8ffd5028a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            } }, h("slot", { key: '92defd1fd88eb60d05ceeff1b13752b5d57a54ba', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '47a2dca0d3c734ec4c4c3eef2746a9d0960f46e9', show: this.hasError }, h("slot", { key: 'eece04d615f728c6aab35674398e7880fa40417f', name: "error" })), h(GuxFormFieldHelp, { key: '00229f2e33e64918a3940317da74e16b703d6d93', show: !this.hasError && this.hasHelp }, h("slot", { key: '1fe412bdac2d9427ec321a25572c407774f63b47', name: "help" })))));
+            } }, h("slot", { key: '3ea7a185fdcab813d31d3b04cb60f840971757a0', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'f903bd2f9b7d91350490d343aa89746bcfc97585', show: this.hasError }, h("slot", { key: 'fff7e649267a693e5a18e8ae2c7095efd4ddb4f3', name: "error" })), h(GuxFormFieldHelp, { key: 'f1f475651ddc999a53b540a36c2cad90e8bcffc8', show: !this.hasError && this.hasHelp }, h("slot", { key: '55da6946317a684039d69086e316aa6a8b5d0464', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -220,6 +250,21 @@ export class GuxFormFieldNumber {
         };
     }
     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-number/tests/gux-form-field-number.spec.js

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

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