genesys-spark-components 4.65.2 → 4.67.0

package/dist/esm/gux-form-field-file.entry.js

@@ -1,17 +1,17 @@
 import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
 import { O as OnMutation } from './on-mutation-1355c534.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
-import { t as trackComponent } from './usage-19d91e67.js';
-import { a as GuxFormFieldHelp, G as GuxFormFieldError } from './gux-form-field-error-4d654b58.js';
+import { t as trackComponent } from './usage-d9544ca5.js';
+import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-4d654b58.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-777ec473.js';
-import { a as getComputedLabelPosition, g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-6cfb4f6f.js';
+import { a as getComputedLabelPosition, g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-46fea82d.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { o as onRequiredChange } from './on-attribute-change-f42eabee.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
 import './simulate-native-event-e0631897.js';
 
-const guxFormFieldFileCss = ".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)}";
+const guxFormFieldFileCss = ".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)}.gux-input-and-error-container{flex-grow:1}";
 const GuxFormFieldFileStyle0 = guxFormFieldFileCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -34,14 +34,43 @@ const GuxFormFieldFile = class {
         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() {
@@ -54,13 +83,13 @@ const GuxFormFieldFile = class {
         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
@@ -70,7 +99,7 @@ const GuxFormFieldFile = class {
         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" })))));
     }
     get root() { return getElement(this); }
 };

package/dist/esm/gux-form-field-input-clear-button.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
-import { t as trackComponent } from './usage-19d91e67.js';
+import { t as trackComponent } from './usage-d9544ca5.js';
 import { b as buildI18nForComponent } from './index-3f1e5ba8.js';
 import './get-closest-element-728b9f18.js';
 
@@ -20,7 +20,7 @@ const GuxFormFieldInputClearButton = class {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: 'f2ca1f6b2662be485b2810c61c7f3bc6c910c4a3', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '742e4e73ae7d607433cdff90a26ce96726fc4929', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (h("button", { key: '396f8388e24e30c41c1cce970ffd1492668ed1ff', tabIndex: -1, type: "button", title: this.i18n('clear') }, h("gux-icon", { key: '28c90daa4bf9ececb2e84aa774e673eae5cd2679', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get delegatesFocus() { return true; }
     get root() { return getElement(this); }

package/dist/esm/gux-form-field-label-indicator.entry.js

@@ -0,0 +1,28 @@
+import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
+import { t as trackComponent } from './usage-d9544ca5.js';
+
+const guxFormFieldLabelIndicatorCss = ".gux-form-field-label-indicator-required{color:var(--gse-ui-formControl-label-indicator-requiredColor)}";
+const GuxFormFieldLabelIndicatorStyle0 = guxFormFieldLabelIndicatorCss;
+
+const GuxFormFieldLabelIndicator = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = 'required';
+        this.required = false;
+    }
+    componentWillLoad() {
+        trackComponent(this.root, { variant: this.variant });
+    }
+    render() {
+        if (this.variant === 'required' && this.required) {
+            return (h("span", { class: "gux-form-field-label-indicator-required", "aria-hidden": "true" }, "*"));
+        }
+        else {
+            return null;
+        }
+    }
+    get root() { return getElement(this); }
+};
+GuxFormFieldLabelIndicator.style = GuxFormFieldLabelIndicatorStyle0;
+
+export { GuxFormFieldLabelIndicator as gux_form_field_label_indicator };

package/dist/esm/gux-form-field-number_3.entry.js

@@ -4,12 +4,12 @@ import { c as calculateInputDisabledState, o as onInputDisabledStateChange } fro
 import { O as OnMutation } from './on-mutation-1355c534.js';
 import { o as onRequiredChange } from './on-attribute-change-f42eabee.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
-import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition, d as setInputValue } from './gux-form-field.service-6cfb4f6f.js';
+import { h as hasContent, c as clearInput, g as getSlottedInput, v as validateFormIds, a as getComputedLabelPosition, d as setInputValue } from './gux-form-field.service-46fea82d.js';
 import { s as simulateNativeEvent } from './simulate-native-event-e0631897.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-4d654b58.js';
 import { G as GuxFormFieldLabel, a as GuxFormFieldContainer } from './gux-form-field-container-777ec473.js';
-import { t as trackComponent } from './usage-19d91e67.js';
+import { t as trackComponent } from './usage-d9544ca5.js';
 import { t as translationResources } from './en-25a315a0.js';
 import { O as OnClickOutside } from './on-click-outside-21dd269e.js';
 import { b as afterNextRender } from './after-next-render-07a41f53.js';
@@ -27,7 +27,7 @@ const componentResources = {
 	decrement: decrement
 };
 
-const guxFormFieldNumberCss = ".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%;padding-bottom:0;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);text-align:right;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;width:100%}.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);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: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)}.gux-step-buttons-container{flex:0 1 14px;align-self:auto;order:0;margin-left:var(--gse-ui-formControl-spinButton-gap)}.gux-step-buttons-container .gux-step-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor);background:transparent;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) transparent}.gux-step-buttons-container .gux-step-button:not(:disabled):focus-visible,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{cursor:pointer;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-step-buttons-container .gux-step-button gux-icon{flex:0 0 auto;width:14px;height:14px}";
+const guxFormFieldNumberCss = ".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%;padding-bottom:0;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);text-align:right;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;width:100%}.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);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: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)}.gux-step-buttons-container{flex:0 1 14px;align-self:auto;order:0;margin-left:var(--gse-ui-formControl-spinButton-gap)}.gux-step-buttons-container .gux-step-button{display:flex;flex:0 1 auto;align-items:center;align-self:auto;justify-content:center;order:0;padding:0;color:var(--gse-ui-formControl-input-inputIcon-defaultColor);background:transparent;border:var(--gse-ui-formControl-input-default-border-width) var(--gse-ui-formControl-input-default-border-style) transparent}.gux-step-buttons-container .gux-step-button:not(:disabled):focus-visible,.gux-step-buttons-container .gux-step-button:not(:disabled):hover{cursor:pointer;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-step-buttons-container .gux-step-button gux-icon{flex:0 0 auto;width:14px;height:14px}";
 const GuxFormFieldNumberStyle0 = guxFormFieldNumberCss;
 
 var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -53,9 +53,37 @@ const GuxFormFieldNumber = class {
         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);
@@ -67,6 +95,7 @@ const GuxFormFieldNumber = class {
         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 });
@@ -81,14 +110,14 @@ const GuxFormFieldNumber = class {
     }
     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
@@ -221,10 +250,16 @@ const GuxPaginationEllipsisButton = class {
     applyInputListener() {
         var _a;
         (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', (event) => {
+            const inputValue = event.target.value.trim();
             if (event.key == 'Enter' || event.key == ' ') {
-                event.preventDefault();
-                this.goToPage.emit(event.target.value);
-                this.isOpen = false;
+                if (inputValue == '') {
+                    event.preventDefault();
+                }
+                else {
+                    event.preventDefault();
+                    this.goToPage.emit(event.target.value);
+                    this.isOpen = false;
+                }
             }
         });
     }
@@ -236,7 +271,8 @@ const GuxPaginationEllipsisButton = class {
         this.applyInputListener();
     }
     render() {
-        return (h(Host, { key: '7125e762997358d558dad2b3656cb55d6b0c90e0' }, h("button", { key: 'c7f9683f0ab394a8f904ae74837b2420a73cb47c', id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: '40acfdcc4fa03064105d5e56cef25fc07d4a0d51', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })), h("gux-tooltip", { key: '958eaa260b48b6c098211e046d8e9a730c6dc127', for: "popover-target" }, h("div", { key: '7dbc535f1e9557d9bc1bf85fb7ac2ba42e0b1a93', slot: "content" }, this.i18n('goToPage'))), h("gux-popover", { key: '20989aa1bf1cc97522822197277613c2546bad59', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'ff98dcda59dac1fcd251fe6a44e9ba01fd99b0c0', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: 'c07be4bea371436110971332da2cf0f0b8cfd016' }, h("input", { key: 'dea87826ca4c9707ff568b2fda18f76e9cd4ea34', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1" }), h("label", { key: 'b80c9a1071b460f0e7a2d5e7d12755fed5debbeb', slot: "label" })))));
+        return (h(Host, { key: 'a188c1dce413b710c91e13f5ea4414e4de4f0d94' }, h("button", { key: '217631219f71adf52a7882e4104cfb4189d87351', id: "popover-target", type: "button", ref: el => (this.ellipsisButton = el), onClick: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("gux-icon", { key: '854a398967e59df2ed62ed1f91f6e7e4ffdafd4d', screenreaderText: this.i18n('goToPage'), "icon-name": "fa/ellipsis-regular" })), h("gux-tooltip", { key: '3a27be4f8a205903c448649290f5983fb4eae217', for: "popover-target" }, h("div", { key: '543ecb926bd84e27305a86b763be0e6c655ec02c', slot: "content" }, this.i18n('goToPage'))), h("gux-popover", { key: '97fa5f1602cbd8368d5e492ce0ef8e93e505b9c7', "is-open": this.isOpen, for: "popover-target" }, h("span", { key: 'fd3efb82d2aca48c834ae9ceedf293b8f7d72f84', slot: "title" }, this.i18n('goToPage')), h("gux-form-field-number", { key: '4d91a45d27472a10a5025777872db3b9cc9600b4' }, h("input", { key: '6f1d2891a600c405abf84464bddb586cf0601b55', slot: "input", type: "number", ref: el => (this.inputElement = el), min: "1", max: this.totalPages, value: "1", onKeyDown: evt => ['e', 'E', '+', '-', '.'].includes(evt.key) &&
+                evt.preventDefault() }), h("label", { key: 'cd34ed52c6d9932dafc012eb8d92176476979a67', slot: "label" })))));
     }
     get root() { return getElement(this); }
 };
@@ -397,10 +433,10 @@ const GuxPopover = class {
         }
     }
     render() {
-        return (h("div", { key: 'd853cf4f861236f5e327c5ba32dcd9b02b402df1', ref: (el) => (this.popupElement = el), class: {
+        return (h("div", { key: '1636856365361a8e45fa477b94d6ea9acbb7b3ac', ref: (el) => (this.popupElement = el), class: {
                 'gux-hidden': !this.isOpen,
                 'gux-popover-wrapper': true
-            }, "data-placement": true }, h("div", { key: '58ded08a67dd0e6efe57771e0d817ff4d85e2786', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'a4bdcc1a5d847b8c61b0d0fddf103e1bd6be0db1', class: "gux-arrow-caret" })), h("div", { key: '2ee2c66586396ff8a976014da10e65fac3142c64', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: 'ff97360ea32e90761b1b53b6233d547431f01c12', name: "title" }), this.renderDismissButton()), h("div", { key: '952fe0ace925f4731b433773758fc4d815e0c080', class: "gux-popover-content" }, h("slot", { key: '3bea87486a087d25606c60dd0d285837800290b2' }))));
+            }, "data-placement": true }, h("div", { key: '218fcaf5cfbab4d6c46c2b432fee2421a67a14b7', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'd6458f85deff302f3b756897ead6894603d4fd14', class: "gux-arrow-caret" })), h("div", { key: 'cbd7052f04e354070633316a3c3c5ac544442ba3', class: { 'gux-popover-header': Boolean(this.titleSlot) } }, h("slot", { key: '8675905dc5a471ca38c628caba7f15f46d9f2ebe', name: "title" }), this.renderDismissButton()), h("div", { key: '90289dfa658c5e425a65f5d75cada50e256be0a0', class: "gux-popover-content" }, h("slot", { key: '4c57be1cc853722f638fd63c4765db80393ae0b3' }))));
     }
     get root() { return getElement(this); }
 };

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

@@ -2,12 +2,12 @@ import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
 import { b as buildI18nForComponent } from './index-3f1e5ba8.js';
 import { O as OnMutation } from './on-mutation-1355c534.js';
 import { a as onDisabledChange, o as onRequiredChange } from './on-attribute-change-f42eabee.js';
-import { t as trackComponent } from './usage-19d91e67.js';
-import { G as GuxFormFieldLegendLabel, a as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-8d2b9425.js';
+import { t as trackComponent } from './usage-d9544ca5.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-4d654b58.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-1769a15e.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
-import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-6cfb4f6f.js';
+import { v as validateFormIds, a as getComputedLabelPosition } from './gux-form-field.service-46fea82d.js';
 import './get-closest-element-728b9f18.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
@@ -18,7 +18,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) {
@@ -40,6 +40,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');
@@ -48,15 +49,46 @@ const GuxFormFieldPhone = class {
         }
     }
     onMutation() {
+        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');
+    }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-within')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
     }
     async componentWillLoad() {
         this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot(this.root, 'label-info');
         trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -65,17 +97,18 @@ const GuxFormFieldPhone = class {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'db6b4f1a2f50c6da9543db76c567c1ccbe66d2f5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '6d9927d38d812f560f6a8ccb16e2d46463208208', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'd1dd0b051cb68dce0cd3a6878b3c3a7de44096bb', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError)), h("div", { key: 'f1583acb36f66a3b55e2b99478f36469bfe80e26', class: "gux-input-and-error-container" }, h("div", { key: '2cf57ada67e14dc402c9108a0a980708f910c9a8', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '7cd455c3e6fb71c038fbaa592e6e08d29e86e07d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '08601e700c84bd5caa814d22ab436b195e418833' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'c12110988edb809381eb280ec80f6ecea819a5d4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'dd2d9636c9a768509fa8a5476782ad34ccce8354', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6aa94291315b892a6de33d3746362ad5ce9d007a', variant: "required", required: this.required }), h("slot", { key: 'fd5e58e5112fcaaabe7bd5cd7d124497c7f7ea98', name: "label-info" })), h("div", { key: '48bbe27265311a9bf329510ff68c8e13cff4b087', class: "gux-input-and-error-container" }, h("div", { key: '2d3a1f8c5799704242ad1752c4834b6810edb4c6', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'e8515020246b404c20ee19ee181db7769199695b', class: {
+            } }, h("div", { key: '6ceb1a48dc60d604b7400ab7d80cb0e8ec8b4940', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '5a960eae67822c36963c3ce30a5484b960a8baa8' }))), h(GuxFormFieldError, { key: '7fdc9ac607f7c776c5c864c25f790a8a9f8217b9', show: this.hasError }, h("slot", { key: 'ed8d8dceac60fb9e8896a49a312f87fb09a9cd72', name: "error" })), h(GuxFormFieldHelp, { key: 'a3785fa725ce1ab00c3b285e6ed98014aeec85c3', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd59dae2017a361cba7a429ef521ea8a30ce7aa58', name: "help" })))));
+            } }, h("slot", { key: '3858fb0121cba2d4d4d366f331e25de2c045bd86' }))), h(GuxFormFieldError, { key: 'fe024ed18eb6f65c1871f7fef5f6d1df516e818a', show: this.hasError }, h("slot", { key: '2299ab38fbd2f86e3a3852b7e2842becc84c0703', name: "error" })), h(GuxFormFieldHelp, { key: '24e4c552c4ba13fefd0a0e321040e02b7d7c1697', show: !this.hasError && this.hasHelp }, h("slot", { key: '39140e39353a3433befa751ccfc0fd455c33d877', name: "help" })))));
     }
-    renderScreenReaderText(text, condition = true) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     get variant() {
@@ -86,16 +119,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 = 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 = onDisabledChange(this.input, (disabled) => {
             this.disabled = disabled;
         });
-        this.requiredObserver = onRequiredChange(this.phoneInputElement, (required) => {
+        this.requiredObserver = onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        validateFormIds(this.root, this.phoneInputElement);
+        validateFormIds(this.root, this.input);
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="label"]');

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

@@ -2,11 +2,11 @@ import { r as registerInstance, h, g as getElement } from './index-da21b737.js';
 import { O as OnMutation } from './on-mutation-1355c534.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { a as GuxFormFieldHelp, G as GuxFormFieldError } from './gux-form-field-error-4d654b58.js';
-import { G as GuxFormFieldLegendLabel, a as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-8d2b9425.js';
+import { G as GuxFormFieldVisualLabel, a as GuxFormFieldScreenreaderLabel, b as GuxFormFieldFieldsetContainer } from './gux-form-field-fieldset-container-1769a15e.js';
 import { g as getSlotTextContent } from './get-slot-text-content-95a85429.js';
-import { t as trackComponent } from './usage-19d91e67.js';
+import { t as trackComponent } from './usage-d9544ca5.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) {
@@ -24,6 +24,7 @@ const GuxFormFieldRadioGroupBeta = class {
         registerInstance(this, hostRef);
         this.hasGroupError = false;
         this.hasGroupHelp = false;
+        this.hasGroupLabelInfo = false;
         this.disabled = false;
     }
     watchGroupError(hasGroupError) {
@@ -38,12 +39,42 @@ const GuxFormFieldRadioGroupBeta = class {
         this.setDisabledRadio();
     }
     onMutation() {
+        this.groupLabelInfo = this.root.querySelector('[slot=group-label-info]');
         this.hasGroupError = hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot(this.root, 'group-help');
     }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.root.matches(':focus-within')) {
+                    void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideTooltipTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.root.matches(':focus-within')) {
+                    void ((_b = this.groupLabelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideTooltipTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.groupLabelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideTooltipTimeout);
+    }
     componentWillLoad() {
+        this.groupLabelInfo = this.root.querySelector('[slot=group-label-info]');
         this.hasGroupError = hasSlot(this.root, 'group-error');
         this.hasGroupHelp = hasSlot(this.root, 'group-help');
+        this.hasGroupLabelInfo = hasSlot(this.root, 'group-label-info');
         this.setLabel();
         this.setDisabledRadio();
         trackComponent(this.root);
@@ -61,14 +92,15 @@ const GuxFormFieldRadioGroupBeta = class {
             });
         }
     }
-    renderScreenReaderText(text, condition = false) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '19228b0bcab52c0526996d7d0f6d31ef0ababd24', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldLegendLabel, { key: 'f772a428e7144532036205cf8315cec1a33b8cf9', position: "above", required: false, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: '9245e721f752b56153bd48f55be1bbe1d2ccd70b', name: "group-label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderScreenReaderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp)), h("slot", { key: 'a67a2bdfdc770c5bd168603697a297638025fb9b' }), h(GuxFormFieldError, { key: '44552902197a66af19c006c0698868e49a866db3', show: this.hasGroupError }, h("slot", { key: '6036ceddfb54947f96568effde76a10d40373287', name: "group-error" })), h(GuxFormFieldHelp, { key: '859aa51e629873dbfe1613cd395494116139e534', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '3a36b35266d4d4e7f5ca91ea0b6135ccb07fa909', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: 'ff8bd3225266d39e7594f4e8c9cedce40ee35072', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '206273a0da581b0f9165fee2fa885ccdec40bf71' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '0d08b1d0ed92347875f43bd9c880b14b62490add', position: "above", required: false }, h("slot", { key: '96a1d4a2551a802b2a9143b9be0a4b54cbfa4ae1', name: "group-label", onSlotchange: () => this.setLabel() }), h("slot", { key: 'f4c90bb6a6c9430d3ae3175b3dfb255e3e701a2f', name: "group-label-info" })), h("slot", { key: '94bf5301a0e109fe1c7bfb29fe6716fbbb79d73a' }), h(GuxFormFieldError, { key: 'ec7d70173c21907b98f10a5860d340aa8430009d', show: this.hasGroupError }, h("slot", { key: 'f8d90f822e9ad6c8b3ea63dd8dd8b465b0f127c1', name: "group-error" })), h(GuxFormFieldHelp, { key: '5b07f4d09346864b574c93a914a91fd40d812960', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'b0902bd8f39a1d6940475e4b605629e616d2749f', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -4,8 +4,8 @@ import { O as OnMutation } from './on-mutation-1355c534.js';
 import { p as preventBrowserValidationStyling } from './prevent-browser-validation-styling-3983eb0a.js';
 import { h as hasSlot } from './has-slot-f24a46a6.js';
 import { G as GuxFormFieldError, a as GuxFormFieldHelp } from './gux-form-field-error-4d654b58.js';
-import { g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-6cfb4f6f.js';
-import { t as trackComponent } from './usage-19d91e67.js';
+import { g as getSlottedInput, v as validateFormIds } from './gux-form-field.service-46fea82d.js';
+import { t as trackComponent } from './usage-d9544ca5.js';
 import './random-html-id-81ac821b.js';
 import './log-error-274efeb7.js';
 import './simulate-native-event-e0631897.js';
@@ -48,10 +48,10 @@ const GuxFormFieldRadio = class {
         }
     }
     render() {
-        return (h(Host, { key: 'b3bdb321adb2df6184a7b8e2518f250b6c3b4a70', class: {
+        return (h(Host, { key: '417a99fa322982f9b02250e69a1d6db75a6c2a10', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '6f4d6bebe6aada0b06df3afef88616a625bd0b27', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'c139782a489eb88a223312a909bb46b47d06a132', class: "gux-input-label" }, h("div", { key: 'cae2121349b56cd2e49c5e4982581d1512daba5a', class: "gux-input" }, h("slot", { key: '52c097c30fa30c08d7347dfe121beea42c57a812', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'a1020cd4b7c262de6a0b021b7ca823708beb563a', class: "gux-label" }, h("slot", { key: '31b0e62ff7000247385f4484b91fce73776f110c', name: "label" }))), h("div", { key: 'c071368fb3df0ab2bc9764d1a1eb9d43c613da01', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '8bc289e3d7d1b16a0cff1fb3317458ded3dcd2b1', show: this.hasError }, h("slot", { key: 'e1585457772bd61239b7ba5252923458174653a6', name: "error" })), h(GuxFormFieldHelp, { key: 'acc371fd134857b1d0fbfb402d2f7ccf55bfe132', show: !this.hasError && this.hasHelp }, h("slot", { key: '4888bfa5b03bfb7ad5c88faa2c53e0a23056bb79', name: "help" }))))));
+            } }, h("div", { key: 'fb40c40fcc41f3d657fc402fe2ed234aef988de8', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'e4c01a81247f51f6d72ac43f2d75f0b10190a1a8', class: "gux-input-label" }, h("div", { key: 'e331c7f3b00ed62edd7f761e4fc4e9ad617e2d04', class: "gux-input" }, h("slot", { key: 'c9c338a03869cd387c31681cf1f6f6a7b4399668', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '84f5c336a564eaa9f2e37e28527a91bcf11c687f', class: "gux-label" }, h("slot", { key: '75c1063a6788556e10890c0fffc5b58338deebe9', name: "label" }))), h("div", { key: '2ae36d15932102e08fc45d92cf4f579613351568', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '2d3116d4f38c561001afc02034c819fd872f943c', show: this.hasError }, h("slot", { key: 'aad5927a627eee8478d3d7fb1e9c175c638e63c4', name: "error" })), h(GuxFormFieldHelp, { key: '136f7f7e375ecd3fc2fc9e7e1a307b958df9313b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd0aeb7c95a5cf20d9770a6aca39e26b953be439d', name: "help" }))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');