genesys-spark-components 4.65.2 → 4.66.0

package/dist/cjs/gux-form-field-phone.cjs.entry.js

@@ -6,12 +6,12 @@ const index = require('./index-7fb02c8c.js');
 const index$1 = require('./index-a1a48d79.js');
 const onMutation = require('./on-mutation-3d294d15.js');
 const onAttributeChange = require('./on-attribute-change-321d434b.js');
-const usage = require('./usage-2de21825.js');
-const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-51f42694.js');
+const usage = require('./usage-56cf287d.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
+const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-bf86cba7.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
 require('./get-closest-element-9e41d6b9.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
@@ -22,7 +22,7 @@ const componentResources = {
 	required: required
 };
 
-const guxFormFieldPhoneCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-fieldset-container.gux-beside{flex-direction:row}.gux-form-field-fieldset-container.gux-above{flex-direction:column}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;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;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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}";
+const guxFormFieldPhoneCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-fieldset-container.gux-beside{flex-direction:row}.gux-form-field-fieldset-container.gux-above{flex-direction:column}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;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);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}";
 const GuxFormFieldPhoneStyle0 = guxFormFieldPhoneCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -44,6 +44,7 @@ const GuxFormFieldPhone = class {
         this.required = false;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const phoneInputSlot = this.root.querySelector('gux-phone-input-beta');
@@ -52,15 +53,46 @@ const GuxFormFieldPhone = class {
         }
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot.hasSlot(this.root, 'label-info');
+    }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-within')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
     }
     async componentWillLoad() {
         this.getI18nValue = await index$1.buildI18nForComponent(this.root, componentResources);
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot.hasSlot(this.root, 'label-info');
         usage.trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -69,17 +101,18 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'db6b4f1a2f50c6da9543db76c567c1ccbe66d2f5', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldLegendLabel, { key: '6d9927d38d812f560f6a8ccb16e2d46463208208', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, index.h("slot", { key: 'd1dd0b051cb68dce0cd3a6878b3c3a7de44096bb', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError)), index.h("div", { key: 'f1583acb36f66a3b55e2b99478f36469bfe80e26', class: "gux-input-and-error-container" }, index.h("div", { key: '2cf57ada67e14dc402c9108a0a980708f910c9a8', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '7cd455c3e6fb71c038fbaa592e6e08d29e86e07d', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '08601e700c84bd5caa814d22ab436b195e418833' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: 'c12110988edb809381eb280ec80f6ecea819a5d4', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'dd2d9636c9a768509fa8a5476782ad34ccce8354', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '6aa94291315b892a6de33d3746362ad5ce9d007a', variant: "required", required: this.required }), index.h("slot", { key: 'fd5e58e5112fcaaabe7bd5cd7d124497c7f7ea98', name: "label-info" })), index.h("div", { key: '48bbe27265311a9bf329510ff68c8e13cff4b087', class: "gux-input-and-error-container" }, index.h("div", { key: '2d3a1f8c5799704242ad1752c4834b6810edb4c6', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: 'e8515020246b404c20ee19ee181db7769199695b', class: {
+            } }, index.h("div", { key: '6ceb1a48dc60d604b7400ab7d80cb0e8ec8b4940', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '5a960eae67822c36963c3ce30a5484b960a8baa8' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '7fdc9ac607f7c776c5c864c25f790a8a9f8217b9', show: this.hasError }, index.h("slot", { key: 'ed8d8dceac60fb9e8896a49a312f87fb09a9cd72', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'a3785fa725ce1ab00c3b285e6ed98014aeec85c3', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'd59dae2017a361cba7a429ef521ea8a30ce7aa58', name: "help" })))));
+            } }, index.h("slot", { key: '3858fb0121cba2d4d4d366f331e25de2c045bd86' }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'fe024ed18eb6f65c1871f7fef5f6d1df516e818a', show: this.hasError }, index.h("slot", { key: '2299ab38fbd2f86e3a3852b7e2842becc84c0703', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '24e4c552c4ba13fefd0a0e321040e02b7d7c1697', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '39140e39353a3433befa751ccfc0fd455c33d877', name: "help" })))));
     }
-    renderScreenReaderText(text, condition = true) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (index.h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     get variant() {
@@ -90,16 +123,16 @@ const GuxFormFieldPhone = class {
         return `${type}-${labelPositionVariant}`;
     }
     setInput() {
-        this.phoneInputElement = this.root.querySelector('gux-phone-input-beta');
-        this.disabled = this.phoneInputElement.disabled;
-        this.required = this.phoneInputElement.required;
-        this.disabledObserver = onAttributeChange.onDisabledChange(this.phoneInputElement, (disabled) => {
+        this.input = this.root.querySelector('gux-phone-input-beta');
+        this.disabled = this.input.disabled;
+        this.required = this.input.required;
+        this.disabledObserver = onAttributeChange.onDisabledChange(this.input, (disabled) => {
             this.disabled = disabled;
         });
-        this.requiredObserver = onAttributeChange.onRequiredChange(this.phoneInputElement, (required) => {
+        this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        guxFormField_service.validateFormIds(this.root, this.phoneInputElement);
+        guxFormField_service.validateFormIds(this.root, this.input);
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');

package/dist/cjs/gux-form-field-radio-group-beta.cjs.entry.js

@@ -6,11 +6,11 @@ const index = require('./index-7fb02c8c.js');
 const onMutation = require('./on-mutation-3d294d15.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
-const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-51f42694.js');
+const guxFormFieldFieldsetContainer = require('./gux-form-field-fieldset-container-bf86cba7.js');
 const getSlotTextContent = require('./get-slot-text-content-83cb3c6d.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-56cf287d.js');
 
-const guxFormFieldRadioGroupCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-fieldset-container.gux-beside{flex-direction:row}.gux-form-field-fieldset-container.gux-above{flex-direction:column}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;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;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(gux-form-field-radio){padding-top:var(--gse-ui-formControl-group-gapItems)}::slotted(gux-form-field-radio:first-of-type){padding-top:0}:host([disabled]) .gux-form-field-legend-label{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-form-field-legend-label{font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}";
+const guxFormFieldRadioGroupCss = ".gux-form-field-fieldset-container{display:flex;min-width:0;padding:0;margin:0;border:none}.gux-form-field-fieldset-container.gux-beside{flex-direction:row}.gux-form-field-fieldset-container.gux-above{flex-direction:column}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;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}::slotted(gux-form-field-radio){padding-top:var(--gse-ui-formControl-group-gapItems)}::slotted(gux-form-field-radio:first-of-type){padding-top:0}:host([disabled]) .gux-form-field-legend-label{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-form-field-legend-label{font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}";
 const GuxFormFieldRadioGroupBetaStyle0 = guxFormFieldRadioGroupCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -28,6 +28,7 @@ const GuxFormFieldRadioGroupBeta = class {
         index.registerInstance(this, hostRef);
         this.hasGroupError = false;
         this.hasGroupHelp = false;
+        this.hasGroupLabelInfo = false;
         this.disabled = false;
     }
     watchGroupError(hasGroupError) {
@@ -42,12 +43,42 @@ const GuxFormFieldRadioGroupBeta = class {
         this.setDisabledRadio();
     }
     onMutation() {
+        this.groupLabelInfo = this.root.querySelector('[slot=group-label-info]');
         this.hasGroupError = hasSlot.hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot.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.hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot.hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot.hasSlot(this.root, 'group-label-info');
         this.setLabel();
         this.setDisabledRadio();
         usage.trackComponent(this.root);
@@ -65,14 +96,15 @@ const GuxFormFieldRadioGroupBeta = class {
             });
         }
     }
-    renderScreenReaderText(text, condition = false) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (index.h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     render() {
         var _a;
-        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '19228b0bcab52c0526996d7d0f6d31ef0ababd24', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldLegendLabel, { key: 'f772a428e7144532036205cf8315cec1a33b8cf9', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, index.h("slot", { key: '9245e721f752b56153bd48f55be1bbe1d2ccd70b', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), index.h("slot", { key: 'a67a2bdfdc770c5bd168603697a297638025fb9b' }), index.h(guxFormFieldError.GuxFormFieldError, { key: '44552902197a66af19c006c0698868e49a866db3', show: this.hasGroupError }, index.h("slot", { key: '6036ceddfb54947f96568effde76a10d40373287', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '859aa51e629873dbfe1613cd395494116139e534', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: '3a36b35266d4d4e7f5ca91ea0b6135ccb07fa909', name: "group-help" }))));
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: 'ff8bd3225266d39e7594f4e8c9cedce40ee35072', labelPosition: "above", disabled: this.disabled }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: '206273a0da581b0f9165fee2fa885ccdec40bf71' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: '0d08b1d0ed92347875f43bd9c880b14b62490add', position: "above", required: false }, index.h("slot", { key: '96a1d4a2551a802b2a9143b9be0a4b54cbfa4ae1', name: "group-label", onSlotchange: () => this.setLabel() }), index.h("slot", { key: 'f4c90bb6a6c9430d3ae3175b3dfb255e3e701a2f', name: "group-label-info" })), index.h("slot", { key: '94bf5301a0e109fe1c7bfb29fe6716fbbb79d73a' }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'ec7d70173c21907b98f10a5860d340aa8430009d', show: this.hasGroupError }, index.h("slot", { key: 'f8d90f822e9ad6c8b3ea63dd8dd8b465b0f127c1', name: "group-error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '5b07f4d09346864b574c93a914a91fd40d812960', show: !this.hasGroupError && this.hasGroupHelp }, index.h("slot", { key: 'b0902bd8f39a1d6940475e4b605629e616d2749f', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

package/dist/cjs/gux-form-field-radio.cjs.entry.js

@@ -8,8 +8,8 @@ const onMutation = require('./on-mutation-3d294d15.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
-const usage = require('./usage-2de21825.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
+const usage = require('./usage-56cf287d.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -52,10 +52,10 @@ const GuxFormFieldRadio = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b3bdb321adb2df6184a7b8e2518f250b6c3b4a70', class: {
+        return (index.h(index.Host, { key: '417a99fa322982f9b02250e69a1d6db75a6c2a10', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '6f4d6bebe6aada0b06df3afef88616a625bd0b27', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'c139782a489eb88a223312a909bb46b47d06a132', class: "gux-input-label" }, index.h("div", { key: 'cae2121349b56cd2e49c5e4982581d1512daba5a', class: "gux-input" }, index.h("slot", { key: '52c097c30fa30c08d7347dfe121beea42c57a812', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'a1020cd4b7c262de6a0b021b7ca823708beb563a', class: "gux-label" }, index.h("slot", { key: '31b0e62ff7000247385f4484b91fce73776f110c', name: "label" }))), index.h("div", { key: 'c071368fb3df0ab2bc9764d1a1eb9d43c613da01', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '8bc289e3d7d1b16a0cff1fb3317458ded3dcd2b1', show: this.hasError }, index.h("slot", { key: 'e1585457772bd61239b7ba5252923458174653a6', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'acc371fd134857b1d0fbfb402d2f7ccf55bfe132', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '4888bfa5b03bfb7ad5c88faa2c53e0a23056bb79', name: "help" }))))));
+            } }, index.h("div", { key: 'fb40c40fcc41f3d657fc402fe2ed234aef988de8', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'e4c01a81247f51f6d72ac43f2d75f0b10190a1a8', class: "gux-input-label" }, index.h("div", { key: 'e331c7f3b00ed62edd7f761e4fc4e9ad617e2d04', class: "gux-input" }, index.h("slot", { key: 'c9c338a03869cd387c31681cf1f6f6a7b4399668', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: '84f5c336a564eaa9f2e37e28527a91bcf11c687f', class: "gux-label" }, index.h("slot", { key: '75c1063a6788556e10890c0fffc5b58338deebe9', name: "label" }))), index.h("div", { key: '2ae36d15932102e08fc45d92cf4f579613351568', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '2d3116d4f38c561001afc02034c819fd872f943c', show: this.hasError }, index.h("slot", { key: 'aad5927a627eee8478d3d7fb1e9c175c638e63c4', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '136f7f7e375ecd3fc2fc9e7e1a307b958df9313b', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'd0aeb7c95a5cf20d9770a6aca39e26b953be439d', name: "help" }))))));
     }
     setInput() {
         this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

package/dist/cjs/gux-form-field-range.cjs.entry.js

@@ -10,14 +10,14 @@ const preventBrowserValidationStyling = require('./prevent-browser-validation-st
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
 const guxFormFieldContainer = require('./gux-form-field-container-51849136.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
-const usage = require('./usage-2de21825.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
+const usage = require('./usage-56cf287d.js');
 const onResize = require('./on-resize-da1477df.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
 
-const guxFormFieldRangeCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}::slotted(input[type=range]){position:absolute;width:100%;width:100%;height:var(--gse-ui-slider-bar-height);margin:calc(var(--gse-ui-slider-handle-width) / 2) 0;margin-top:calc(-1 * (var(--gse-ui-slider-handle-width) / 2 + var(--gse-ui-slider-bar-height)));-webkit-appearance:none;background:transparent}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container.gux-hidden{display:none}.gux-input-and-error-container .gux-range-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-slider-gap);place-content:stretch flex-start;align-items:center;height:32px;font-size:var(--gse-ui-slider-label-text-fontSize)}.gux-input-and-error-container .gux-range-input-container.gux-disabled{opacity:var(--gse-ui-slider-disabled-opacity)}.gux-input-and-error-container .gux-range-input-container .gux-range{position:relative;flex:1 1 auto;align-self:center;order:0}.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip{visibility:visible}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track{width:100%;height:var(--gse-ui-slider-bar-height);margin:6px 0;background:var(--gse-ui-slider-bar-default-backgroundColor);border-radius:var(--gse-ui-slider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress{height:var(--gse-ui-slider-bar-height);background-color:var(--gse-ui-slider-bar-selected-backgroundColor);border-radius:var(--gse-ui-slider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-display{flex:0 1 auto;align-self:auto;order:0;margin:0 0 0 var(--gux-spacing-medium);font-family:var(--gse-ui-slider-label-text-fontFamily);font-size:var(--gse-ui-slider-label-text-fontSize);font-weight:var(--gse-ui-slider-label-text-fontWeight);line-height:var(--gse-ui-slider-label-text-lineHeight);text-align:right}.gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden{display:none}";
+const guxFormFieldRangeCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.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: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-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}::slotted(input[type=range]){position:absolute;width:100%;width:100%;height:var(--gse-ui-slider-bar-height);margin:calc(var(--gse-ui-slider-handle-width) / 2) 0;margin-top:calc(-1 * (var(--gse-ui-slider-handle-width) / 2 + var(--gse-ui-slider-bar-height)));-webkit-appearance:none;background:transparent}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container.gux-hidden{display:none}.gux-input-and-error-container .gux-range-input-container{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-slider-gap);place-content:stretch flex-start;align-items:center;height:32px;font-size:var(--gse-ui-slider-label-text-fontSize)}.gux-input-and-error-container .gux-range-input-container.gux-disabled{opacity:var(--gse-ui-slider-disabled-opacity)}.gux-input-and-error-container .gux-range-input-container .gux-range{position:relative;flex:1 1 auto;align-self:center;order:0}.gux-input-and-error-container .gux-range-input-container .gux-range:hover .gux-range-tooltip,.gux-input-and-error-container .gux-range-input-container .gux-range:focus-within .gux-range-tooltip{visibility:visible}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track{width:100%;height:var(--gse-ui-slider-bar-height);margin:6px 0;background:var(--gse-ui-slider-bar-default-backgroundColor);border-radius:var(--gse-ui-slider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress{height:var(--gse-ui-slider-bar-height);background-color:var(--gse-ui-slider-bar-selected-backgroundColor);border-radius:var(--gse-ui-slider-track-borderRadius)}.gux-input-and-error-container .gux-range-input-container .gux-display{flex:0 1 auto;align-self:auto;order:0;margin:0 0 0 var(--gux-spacing-medium);font-family:var(--gse-ui-slider-label-text-fontFamily);font-size:var(--gse-ui-slider-label-text-fontSize);font-weight:var(--gse-ui-slider-label-text-fontWeight);line-height:var(--gse-ui-slider-label-text-lineHeight);text-align:right}.gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden{display:none}";
 const GuxFormFieldRangeStyle0 = guxFormFieldRangeCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -58,12 +58,42 @@ const GuxFormField = class {
         this.active = false;
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.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.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
         usage.trackComponent(this.root, { variant: this.variant });
@@ -88,9 +118,9 @@ const GuxFormField = class {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (index.h(index.Host, { key: '555a470f41986a6ab8731c8803b240b30cd4d65e', class: {
+        return (index.h(index.Host, { key: '3c79eb363dfae32c858cffad043764902d8dae85', class: {
                 'gux-active': this.active
-            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '39f20232cd05020500ab0a9aa9be1fdaf1291619', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '1bbfe067086bc8c7d7673b5cdc9c789052b08a86', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'eaca0784721a3cd922dc07a5cd769fe18601aabd', name: "label", onSlotchange: () => this.setLabel() })), index.h("div", { key: '23fc47b9206f15812a47dcef4f28825021619426', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: '123775129952675ae780f24308deee4151d1c102', show: this.hasError }, index.h("slot", { key: '98bc664e228397f35fe3c9459d61543d33de50bc', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '58bd604286dc20f3228eebe9796a92f1dae762d0', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '6570f867aa63fa8ef6d679b419419376565e4d78', name: "help" }))))));
+            } }, index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'ae0bc64f1d0180332c427dd692ebc1fb94457f95', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'cb326bd43897be87ecc8d7eb31d04a1474377fb3', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'c6eb68766e994d20c5b930cd777816a9ca80714c', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'e10e38dcc251d9eb5d76ca3b09deb813eb84b80f', variant: "required", required: this.required }), index.h("slot", { key: 'cabdb686e15ffee841d7cfc96ef89877d5753e67', name: "label-info" })), index.h("div", { key: 'd8a55159e6fcf0c887a854c4d7c48f7d3f484c55', class: "gux-input-and-error-container" }, this.renderRangeInput(), index.h(guxFormFieldError.GuxFormFieldError, { key: '71a0770956d98d2ca991f470e3b48ab77d9304b4', show: this.hasError }, index.h("slot", { key: '9be62a32a0c0fe6dc08ac5d56584a39f71ad9731', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '4e841ac142102e97671c812bba62f963f9c4ed53', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'decbb8b0ee04d4402b2d37e3b4586c3d6ee4a1b1', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

package/dist/cjs/gux-form-field-search.cjs.entry.js

@@ -10,13 +10,13 @@ const preventBrowserValidationStyling = require('./prevent-browser-validation-st
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
 const guxFormFieldContainer = require('./gux-form-field-container-51849136.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
-const usage = require('./usage-2de21825.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
+const usage = require('./usage-56cf287d.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
 
-const guxFormFieldSearchCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);text-overflow:ellipsis;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;align-self:auto;order:0;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name=search]{flex:0 0 auto;align-self:auto;order:0;width:var(--gse-ui-formControl-input-inputIcon-size);height:var(--gse-ui-formControl-input-inputIcon-size);color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled){border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
+const guxFormFieldSearchCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.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: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-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}::slotted(input){flex:1 1 auto;align-self:auto;order:0;width:100%;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);text-overflow:ellipsis;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;outline:none}::slotted(input)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input{display:flex;flex-direction:row;flex-wrap:nowrap;align-content:stretch;align-items:center}.gux-input-and-error-container .gux-input .gux-input-container{box-sizing:border-box;display:flex;flex:1 1 auto;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;align-self:auto;order:0;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding:var(--gse-ui-formControl-input-padding);font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container gux-icon[icon-name=search]{flex:0 0 auto;align-self:auto;order:0;width:var(--gse-ui-formControl-input-inputIcon-size);height:var(--gse-ui-formControl-input-inputIcon-size);color:var(--gse-ui-formControl-input-inputIcon-defaultColor)}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled){border:var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
 const GuxFormFieldSearchStyle0 = guxFormFieldSearchCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -42,9 +42,37 @@ const GuxFormFieldSearch = class {
         this.hasHelp = false;
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.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 = guxFormField_service.hasContent(this.input);
@@ -55,6 +83,7 @@ const GuxFormFieldSearch = class {
     componentWillLoad() {
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
         usage.trackComponent(this.root, { variant: this.variant });
@@ -68,13 +97,13 @@ const GuxFormFieldSearch = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '5ed3aaeee90391b9a7b9a5dd162fe5901d5bba64', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '6aba7a96cd2cfaed4078e7f27bbb7c35b10f565a', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'a1ba5413c0bdc64b35623b7c55acc4bdf73593fc', name: "label", onSlotchange: () => this.setLabel() })), index.h("div", { key: '5e1e1fbd4284e0693282c4ad81c301d866c92c24', class: "gux-input-and-error-container" }, index.h("div", { key: '64ec4e3f17fdc0fc90e8a502e02fcdb2471c6919', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'ef96177e5e1480b4ca642e24fc76978a5975a068', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '2f57a79271df2635b4b94aafdd54014cf3e68807', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '5f83442364ebcad43ae2d3c1fae7b5505357b21c', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '2a8f39c847a5d30a4ce87e9da0839da0e7fdf04e', variant: "required", required: this.required }), index.h("slot", { key: '41e72a5f6ad41378d91e6767bb91f91d5cd68a8a', name: "label-info" })), index.h("div", { key: 'ccac0b555024cf9fbae23e62a343451f88231351', class: "gux-input-and-error-container" }, index.h("div", { key: 'f97951825cc335a257dc7b9b0735c80e6cd83142', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: 'f3189f5fe549c8bacfc867684ac5b84a426aef06', class: {
+            } }, index.h("div", { key: 'ec5e78d90797b98275bb80f2efccae240e03c081', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("gux-icon", { key: '57e4528eac359bb1580e145dad3651955fda1daf', "icon-name": "fa/magnifying-glass-regular", decorative: true }), index.h("slot", { key: '4d4711e0186639fa96b535bc9eaec2ba9a7380d3', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: '1538996618a45b3f7029c6a64413782a4880b25d', show: this.hasError }, index.h("slot", { key: 'ca2785b35aa7791b17b7f8a5362229141af59b47', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '24cb43bfc43dcebc9543d3353da8bebbe1d112f4', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'bae67ddb44efc1b45ddaf8254267115c86b72a4b', name: "help" })))));
+            } }, index.h("gux-icon", { key: '36f8527ec1bd5ba4080037d9216f8f035f354fca', "icon-name": "fa/magnifying-glass-regular", decorative: true }), index.h("slot", { key: 'e30a445cd5d25bfb51365619f869267edd254a80', name: "input" }), this.clearable && this.hasContent && !this.disabled && (index.h("gux-form-field-input-clear-button", { onClick: () => guxFormField_service.clearInput(this.input) })))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'c2f8a7ea0d69672c8ffda1dc5dc4c1857ce216df', show: this.hasError }, index.h("slot", { key: '633e0a0f84f360b349c4c928dba275906599d453', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '1c968ea45350d2c0c9396e79848d81711dfeef20', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'c71533a3cd0f2363c7f2b9803648307f7b946544', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/gux-form-field-select.cjs.entry.js

@@ -10,13 +10,13 @@ const preventBrowserValidationStyling = require('./prevent-browser-validation-st
 const hasSlot = require('./has-slot-3edae188.js');
 const guxFormFieldError = require('./gux-form-field-error-4e1d6772.js');
 const guxFormFieldContainer = require('./gux-form-field-container-51849136.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
-const usage = require('./usage-2de21825.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
+const usage = require('./usage-56cf287d.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
 
-const guxFormFieldSelectCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.gux-form-field-label.gux-required::after{color:var(--gse-ui-formControl-label-indicator-requiredColor);content:\" *\"}.gux-form-field-label.gux-beside{position:relative;top:8px;width:fit-content;min-width:45px;margin-right:var(--gse-ui-formControl-label-gap)}.gux-form-field-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}::slotted(select){flex:1 1 auto;align-self:auto;order:0;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding-left:var(--gse-ui-formControl-input-gap);color:var(--gse-ui-formControl-input-populatedColor);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;border-radius:var(--gse-ui-formControl-input-borderRadius);outline:none}::slotted(select)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input .gux-input-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;width:100%;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{pointer-events:none;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-input-and-error-container .gux-input .gux-input-container gux-icon{position:absolute;top:0;right:0;width:var(--gse-ui-formControl-input-inputIcon-size);height:var(--gse-ui-formControl-input-inputIcon-size);margin:var(--gse-ui-formControl-input-padding);pointer-events:none}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
+const guxFormFieldSelectCss = ".gux-form-field-container.gux-beside{display:flex;flex-direction:row}.gux-form-field-error{display:none;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-helper-gap);place-content:stretch flex-start;align-items:center;padding:var(--gse-ui-formControl-helper-errorPadding);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error.gux-show{display:flex}.gux-form-field-error gux-icon{flex:0 1 auto;align-self:start;order:0;min-width:var(--gse-ui-icon-size-sm);min-height:var(--gse-ui-icon-size-sm);color:var(--gse-ui-formControl-helper-errorColor)}.gux-form-field-error .gux-message{flex:0 1 auto;align-self:auto;order:0}.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: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-label.gux-above{padding:var(--gse-ui-formControl-label-padding)}.gux-form-field-label.gux-screenreader{position:absolute;top:auto;left:-10000px;width:1px;height:1px;overflow:hidden}.gux-form-field-help{display:none;flex-direction:row;flex-wrap:nowrap;place-content:stretch flex-start;align-items:flex-start;justify-content:flex-start;padding:var(--gse-ui-formControl-helper-paddingSmall);font-family:var(--gse-ui-formControl-helper-helperText-fontFamily);font-size:var(--gse-ui-formControl-helper-helperText-fontSize);line-height:var(--gse-ui-formControl-helper-helperText-lineHeight);color:var(--gse-ui-formControl-helper-defaultColor)}.gux-form-field-help.gux-show{display:flex}.gux-form-field-help .gux-message{flex:0 1 auto;align-self:none;order:0}:host{display:block}::slotted(label){font-family:var(--gse-ui-formControl-label-text-fontFamily);font-size:var(--gse-ui-formControl-label-text-fontSize);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)}::slotted(select){flex:1 1 auto;align-self:auto;order:0;width:100%;height:var(--gse-ui-formControl-input-textfield-height);padding-left:var(--gse-ui-formControl-input-gap);color:var(--gse-ui-formControl-input-populatedColor);-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:var(--gse-ui-formControl-input-backgroundColor);border:none;border-radius:var(--gse-ui-formControl-input-borderRadius);outline:none}::slotted(select)::placeholder{color:var(--gse-ui-formControl-input-placeholderColor);opacity:1}.gux-input-and-error-container{flex-grow:1}.gux-input-and-error-container .gux-input .gux-input-container{position:relative;box-sizing:border-box;display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--gse-ui-formControl-input-gap);place-content:stretch center;align-items:center;width:100%;font-family:var(--gse-ui-formControl-input-contentText-fontFamily);font-size:var(--gse-ui-formControl-input-contentText-fontSize);font-weight:var(--gse-ui-formControl-input-contentText-fontWeight);line-height:var(--gse-ui-formControl-input-contentText-lineHeight);color:var(--gse-ui-formControl-input-populatedColor);background-color:var(--gse-ui-formControl-input-backgroundColor);background-image:none;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) var(--gse-ui-formControl-input-default-border-color);border-radius:var(--gse-ui-formControl-input-borderRadius)}.gux-input-and-error-container .gux-input .gux-input-container.gux-disabled{pointer-events:none;opacity:var(--gse-ui-formControl-input-disabled-opacity)}.gux-input-and-error-container .gux-input .gux-input-container:hover gux-icon{color:var(--gse-ui-formControl-input-inputIcon-iconEndColor)}.gux-input-and-error-container .gux-input .gux-input-container gux-icon{position:absolute;top:0;right:0;width:var(--gse-ui-formControl-input-inputIcon-size);height:var(--gse-ui-formControl-input-inputIcon-size);margin:var(--gse-ui-formControl-input-padding);pointer-events:none}.gux-input-and-error-container .gux-input .gux-input-container:focus-within{border:var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);border-radius:var(--gse-ui-formControl-focusRing-borderRadius);outline:var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-input-and-error-container .gux-input.gux-input-error .gux-input-container{border-color:var(--gse-ui-formControl-input-error-border-color)}";
 const GuxFormFieldSelectStyle0 = guxFormFieldSelectCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -40,12 +40,41 @@ const GuxFormFieldSelect = class {
         this.hasHelp = false;
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.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.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
         usage.trackComponent(this.root, { variant: this.variant });
@@ -59,13 +88,13 @@ const GuxFormFieldSelect = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: '71560e52fd946884252bab335b9bd4d3c799fcd8', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'b3d111f96ea13f348bba62f9081fd49b4d38c842', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'ae493203aa4f45506032269d6f4aeb17ac898c68', name: "label", onSlotchange: () => this.setLabel() })), index.h("div", { key: 'fae6260a05a95d676d9d26be8ac8193e1ac48253', class: "gux-input-and-error-container" }, index.h("div", { key: '0affd627db23cee070538734c270edae97112516', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'a097f65d0c47d8bd6872af62d7e455a458506eb1', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '9c7c1c506b780bfe1fdf48d0aef5ac7379da3dbf', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: '2090c115f21d72d87f6b6afbacbc0edac2cd72ca', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '5196bfc9c861aeeff50f13a2b8358b46e47a3fc6', variant: "required", required: this.required }), index.h("slot", { key: '312164dd53aa9390f8a3622072b6a0146ff8ae1e', name: "label-info" })), index.h("div", { key: '7c9364856b06b645f2d044245fb4c56ba70e1f0c', class: "gux-input-and-error-container" }, index.h("div", { key: '61206f6a37b64af3159a5829e7ef3fcc2f94f5e4', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: 'aa35c1b1e99ee28ec05ef4c357fb2f734766c453', class: {
+            } }, index.h("div", { key: '41a04deaac72b7e283ca6cde41e80878ce39961e', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: 'e0b55eb8b19490eb6bd5ad167382cb1bb2af3c05', name: "input" }), index.h("gux-icon", { key: '7c218454fcd6448f674cfae5424043c20fce2d14', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '890a27ccc85e96f0e628dd9b905b3b4ed65050e4', show: this.hasError }, index.h("slot", { key: '6741388a2325f9c472ffae38a88eb58f34a15338', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '36ad5cf7f4bbf0048abed1c3194cf852f18a93e4', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '74a733da174b4687f88adf33ddadcad73560e0aa', name: "help" })))));
+            } }, index.h("slot", { key: '175f8b8cdca17a9c7767e6085655fe1748f7bf5f', name: "input" }), index.h("gux-icon", { key: 'a4575605493a5a0b3f5c52c007bf482fbdf2ca06', "icon-name": "custom/chevron-down-small-regular", decorative: true }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'e772b5db006cd95f55dcb7cd47ebc9fb85aec646', show: this.hasError }, index.h("slot", { key: '01eca5bac2ae8886ee8ed270cdc1fe125220a7a5', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'a90392fa1efe6f12e0a01fe8d4545a1a5d851fc2', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '1adf43eb8c518ad574df891a19e1bf1177a925f1', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition