genesys-spark-components 4.65.2 → 4.67.0

package/dist/cjs/gux-flyout-menu.cjs.entry.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const floatingUi_dom_esm = require('./floating-ui.dom.esm-f8b4cd90.js');
 const afterNextRender = require('./after-next-render-162425fe.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 const guxMenu_common = require('./gux-menu.common-4025206c.js');
 
 const guxFlyoutMenuCss = ":host{z-index:var(--gse-semantic-zIndex-popover);color:var(--gse-ui-menu-option-label-foregroundColor);cursor:default}:host(:focus){outline:none}:host(:focus-visible){outline:var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);outline-offset:var(--gse-semantic-focusRing-offset)}.gux-flyout-menu-content{position:fixed;display:none;border:none;border-radius:var(--gse-ui-menu-borderRadius)}.gux-flyout-menu-content.gux-shown{display:flex}.gux-flyout-menu-content .gux-arrow{position:absolute;z-index:-1;width:var(--gse-ui-popover-anchor-width);height:var(--gse-ui-popover-anchor-height);background:var(--gse-ui-popover-backgroundColor);border:none;box-shadow:var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color)}";
@@ -171,10 +171,10 @@ const GuxFlyoutMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '668923463417deedda3ef75f60c3577d33e4ac0f', tabIndex: 0, "aria-haspopup": "true" }, index.h("span", { key: '1e69b6c6e005bde4508fb6743e3bdfba162771a6', ref: el => (this.targetElement = el) }, index.h("slot", { key: 'fc9c5449e11af4171845c0b20e4b3f6dee653710', name: "target" })), index.h("div", { key: '94eaf16316a15fa306ba1df5f8384f289e3d422b', class: {
+        return (index.h(index.Host, { key: '1acb09a1f3e783b3a1d56c2f41aca77008d66845', tabIndex: 0, "aria-haspopup": "true" }, index.h("span", { key: 'e52eb8f2f8ccccaf129054c4ff81d58b5ddfe2d2', ref: el => (this.targetElement = el) }, index.h("slot", { key: '4e3685669a6f8f109b67e447ed37b3c32fa1f143', name: "target" })), index.h("div", { key: '8b578fcf85f62b614ff8bee35a0a326972cbe9ca', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: '63d74ae8897f706ead076c45b9149204c1694243', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), index.h("slot", { key: 'a76dabe861b1b2ba9861b87eb30d3a8967ea9fc4', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, index.h("div", { key: '3fa2563f223d425561f12dc4a2bd1f5c12afc46b', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), index.h("slot", { key: '854d0c0a021ab9754a8e5fc50644a029896c11c8', name: "menu" }))));
     }
     get root() { return index.getElement(this); }
 };

package/dist/cjs/gux-form-field-checkbox.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 usage = require('./usage-2de21825.js');
-const guxFormField_service = require('./gux-form-field.service-f5697509.js');
+const usage = require('./usage-d382fd1a.js');
+const guxFormField_service = require('./gux-form-field.service-57a00684.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
@@ -51,10 +51,10 @@ const GuxFormFieldCheckbox = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'e8c625f6d0687c707e5cefbf0dde2a487faced25', class: {
+        return (index.h(index.Host, { key: 'dbc5b820711914bae07225ad9b1811a854e7ad28', class: {
                 'gux-input-error': this.hasError,
                 'gux-disabled': this.disabled
-            } }, index.h("div", { key: '4bc7a46bea73ad5f38b90b47554cb6f330c1f639', class: "gux-form-field-container" }, index.h("div", { key: 'fa879e9b2b58afb8039fcfe75d453773a9c7e936', class: "gux-input-label" }, index.h("div", { key: '22620b8d78150ca51fc35596215a66c12f83cbad', class: "gux-input" }, index.h("slot", { key: '10975f45e08b2c4dea53d7f47c79635cade0593b', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'a43b0e44790171037bf32d2a168d630b20dc69b7', class: `gux-label-${this.labelPosition}` }, index.h("slot", { key: '8e6e825334b3b1257c4a74bac694c1d507a40ba4', name: "label" }))), index.h("div", { key: '8cf9f85c0d8ca434791a568d0bd5febfadaa95d8', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '222a58f60b91b615feb9da4cdeea5ed86bcf256b', show: this.hasError }, index.h("slot", { key: 'f56a8d990d647e70377ebbff3c80cb280a173110', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '6864c0173ab2c00b34cf72295b40cf45fea962e0', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '9c85ddb2f11dbb12b90440d4ebb7e9cbacfe11f6', name: "help" }))))));
+            } }, index.h("div", { key: '186bcc2e645fce34ff39d7b2d696cf7c7d58131b', class: "gux-form-field-container" }, index.h("div", { key: '91220d71212ae4b89c44e0a790db090b935bbc88', class: "gux-input-label" }, index.h("div", { key: '1d87509253e088d326b210641b4db5681274a0b1', class: "gux-input" }, index.h("slot", { key: '87d57b5275189477095effcfea5e302190feebd4', name: "input", onSlotchange: () => this.setInput() })), index.h("div", { key: 'b80f9c7374c178938701ae94c5387e3112e7a294', class: `gux-label-${this.labelPosition}` }, index.h("slot", { key: '8b4ea705ea70dfabb4fc0fe533da4b257c814bb5', name: "label" }))), index.h("div", { key: 'e747b80480bf4452b100f2bc85034c05bc32eb96', class: "error-and-help-text" }, index.h(guxFormFieldError.GuxFormFieldError, { key: '1173252d333786c6560c43ffdad803dcd02bffff', show: this.hasError }, index.h("slot", { key: '1d9f2b06eb3ae099a510b314354cbcd5ffbbdb1f', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'd6cbc4777257dd64a53160a6aa6f6577d088c45b', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '0338e7913998dce8886c45899cd0d2312e3b902b', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

package/dist/cjs/gux-form-field-color.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-d382fd1a.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.js');
 
-const guxFormFieldColorCss = ".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:0 1 auto;align-self:auto;order:0;width:var(--gse-ui-colorPicker-input-swatchSizing);min-width:var(--gse-ui-colorPicker-input-swatchSizing);height:var(--gse-ui-colorPicker-input-swatchSizing);padding:0;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);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}.gux-input-and-error-container .gux-input .gux-input-container{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;align-self:auto;order:0;width:var(--gse-ui-formControl-input-colorPicker-size);height:var(--gse-ui-formControl-input-colorPicker-size);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-container:hover{cursor:pointer;border-color: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 guxFormFieldColorCss = ".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:0 1 auto;align-self:auto;order:0;width:var(--gse-ui-colorPicker-input-swatchSizing);min-width:var(--gse-ui-colorPicker-input-swatchSizing);height:var(--gse-ui-colorPicker-input-swatchSizing);padding:0;overflow:hidden;font-size:var(--gse-ui-formControl-input-contentText-fontSize);color:var(--gse-ui-formControl-input-populatedColor);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}.gux-input-and-error-container .gux-input .gux-input-container{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;align-self:auto;order:0;width:var(--gse-ui-formControl-input-colorPicker-size);height:var(--gse-ui-formControl-input-colorPicker-size);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-container:hover{cursor:pointer;border-color: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 GuxFormFieldColorStyle0 = guxFormFieldColorCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -40,12 +40,41 @@ const GuxFormFieldColor = 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 GuxFormFieldColor = class {
         }
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'fcc97d5b04472ee4e2a30bc32d33798189422d11', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'dab229cd53b2009e4d26d49a18372cfd4651f7af', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'ce515380ae6e7268cfa128260950f6ab36809b6a', name: "label", onSlotchange: () => this.setLabel() })), index.h("div", { key: 'd99aaeac941a828c0042d3f2447529bbf054a752', class: "gux-input-and-error-container" }, index.h("div", { key: '5c916d732398013ca6358d0ac5149755883b4e5d', class: {
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'f92e953034fbbe4f864248608c3a25404829062c', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'cd4f2a3d91a25f63cd254a54868b5182767f42c2', required: this.required, position: this.computedLabelPosition }, index.h("slot", { key: 'ee0773dcaf16f82184811d17ef1f58a13ae0cdf2', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: 'eff53af5d047f4bb14dae0a2357fe8fc679ab5e6', variant: "required", required: this.required }), index.h("slot", { key: 'eb28e019d6ed98b186f45bcc2756717ff2bcb57f', name: "label-info" })), index.h("div", { key: '187fc972554c6f0d7880a01e701043ac9d7d065d', class: "gux-input-and-error-container" }, index.h("div", { key: '80752846a3df0102b698407ec1dd0b546b447d68', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("div", { key: '335d5b35d05c2a68b25475b86a3aadbde76e9fa8', class: {
+            } }, index.h("div", { key: '6cfea92820ee7bb5adb8dbdcf91ee1cb7e96719a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, index.h("slot", { key: '6690de2a8a48acfcca030e719ce6446892127ffb', name: "input", onSlotchange: () => this.setInput() }))), index.h(guxFormFieldError.GuxFormFieldError, { key: '966b3b5cd0dbe2516c67f4335e1fe739c1da5296', show: this.hasError }, index.h("slot", { key: 'b38fae89959ff63e630d1d51b35fa53541809ca5', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '96492cf053bcbdb1b87cd30aca9fd80b56aba66b', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '92c2bcd33121e6920c7f1eeefde99d3212fbedae', name: "help" })))));
+            } }, index.h("slot", { key: 'cb427702841a197a2cf5690e354e10829d0e8609', name: "input", onSlotchange: () => this.setInput() }))), index.h(guxFormFieldError.GuxFormFieldError, { key: 'a112c9e846436ad66eb355e59c6f316b3f264cda', show: this.hasError }, index.h("slot", { key: '73921eb2a20829dfc743f4a29139dc444082f213', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '44d2a5be7d27fd223393e092f548fd5974570240', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'fbb93ca9d4368bbfbb38ddf4e83fc9053d95fe16', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -8,10 +8,10 @@ const onMutation = require('./on-mutation-3d294d15.js');
 const onAttributeChange = require('./on-attribute-change-321d434b.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 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-d382fd1a.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 guxFormFieldDropdownCss = ".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}: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;width:100%}";
+const guxFormFieldDropdownCss = ".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}: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;width:100%}";
 const GuxFormFieldDropdownStyle0 = guxFormFieldDropdownCss;
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -43,6 +43,7 @@ const GuxFormFieldDropdown = class {
         this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const dropdownSlot = this.root.querySelector('gux-dropdown') ||
@@ -52,15 +53,45 @@ const GuxFormFieldDropdown = class {
         }
     }
     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.dropdownElement.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.dropdownElement.matches(':focus-within')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
     async componentWillLoad() {
         this.getI18nValue = await 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() {
@@ -68,17 +99,18 @@ const GuxFormFieldDropdown = class {
             this.requiredObserver.disconnect();
         }
     }
-    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: '666a7685c605ea7479a051d974539de44ecaef98', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldLegendLabel, { key: '11758886f2f34ffe6e86d7d7cd09eb8b5fc4b4fe', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, index.h("slot", { key: 'bb7665c398da3d38396bb5e3ca65d5aea10611da', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent.getSlotTextContent(this.root, 'help'), this.hasHelp)), index.h("div", { key: '1fc1141771a6cf9adebd75ef14a466191f17cd65', class: "gux-input-and-error-container" }, index.h("div", { key: '8a44f9eafffc9a764fda33656e28ffee6c2495b4', class: {
+        return (index.h(guxFormFieldFieldsetContainer.GuxFormFieldFieldsetContainer, { key: '769d0863b4adc96bbe6733f067043ac96dea27eb', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldFieldsetContainer.GuxFormFieldScreenreaderLabel, { key: 'af328e637e5b57668e8a31e71a922d2c32194c82' }, (_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, 'help'), this.hasHelp), this.renderText(getSlotTextContent.getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), index.h(guxFormFieldFieldsetContainer.GuxFormFieldVisualLabel, { key: 'e9de0468d74cd89ca37bcef0082abc9bdf3d0c27', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: 'd8cf52f49ede1c0cdd7e546fd6fb01ad61a22e10', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '44e3ef7c0a5f691ab96aef8573451b94636b1331', variant: "required", required: this.required }), index.h("slot", { key: '82bca75b4f869e32bee1ddad211767a24553910d', name: "label-info" })), index.h("div", { key: '5dde879d43dfb5f1c1483595cee7ef0a279021db', class: "gux-input-and-error-container" }, index.h("div", { key: '044adc97b3ba5fee8b51c4e65628b385bec4693c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, index.h("slot", { key: '423b5f3c63c2dca04bd02203a893b8cb780e4288' })), index.h(guxFormFieldError.GuxFormFieldError, { key: '87b68e6fdccb9cdeeb194cea7a74accb0bc91ed2', show: this.hasError }, index.h("slot", { key: '0324435c911a0614737641ebe7d2d362ef342537', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'f5ff6c7188ac726cfcca95e8f192d01682fff4fc', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'f0a51c6237eaaa370e6a6a3491dae66cf5d60dde', name: "help" })))));
+            } }, index.h("slot", { key: 'd8d5ccf59dc3ff470c96f3941d70f2a2801c1a73' })), index.h(guxFormFieldError.GuxFormFieldError, { key: '21b34c5cfd1af2508e34023f1570c7cc395f2501', show: this.hasError }, index.h("slot", { key: '6c4295be90f42a2a195ff1bfc72fcb414775c680', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '6f6a76b4ccdfed413f0ce93e6a4073081a92fffb', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '07f4340cf8c6ee21e8875db697b8cd568e8c994c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

package/dist/cjs/{gux-form-field-fieldset-container-51f42694.js → gux-form-field-fieldset-container-bf86cba7.js}

@@ -2,15 +2,16 @@
 
 const index = require('./index-7fb02c8c.js');
 
-const GuxFormFieldLegendLabel = ({ position, required, labelText }, children) => {
-    return [
-        index.h("legend", { class: "gux-form-field-legend-label gux-screenreader" }, children),
-        index.h("span", { class: {
-                'gux-form-field-legend-label': true,
-                [`gux-${position}`]: true,
-                'gux-required': required
-            }, role: "presentation", "aria-hidden": "true" }, labelText)
-    ];
+const GuxFormFieldVisualLabel = ({ position, required }, children) => {
+    return (index.h("div", { class: {
+            'gux-form-field-visual-label': true,
+            [`gux-${position}`]: true,
+            'gux-required': required
+        }, role: "presentation" }, children));
+};
+
+const GuxFormFieldScreenreaderLabel = (_, children) => {
+    return (index.h("legend", { class: "gux-form-field-screenreader-label" }, children));
 };
 
 const GuxFormFieldFieldsetContainer = ({ labelPosition, disabled }, children) => {
@@ -27,4 +28,5 @@ const GuxFormFieldFieldsetContainer = ({ labelPosition, disabled }, children) =>
 };
 
 exports.GuxFormFieldFieldsetContainer = GuxFormFieldFieldsetContainer;
-exports.GuxFormFieldLegendLabel = GuxFormFieldLegendLabel;
+exports.GuxFormFieldScreenreaderLabel = GuxFormFieldScreenreaderLabel;
+exports.GuxFormFieldVisualLabel = GuxFormFieldVisualLabel;

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

@@ -5,17 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-7fb02c8c.js');
 const onMutation = require('./on-mutation-3d294d15.js');
 const hasSlot = require('./has-slot-3edae188.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.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 guxFormField_service = require('./gux-form-field.service-57a00684.js');
 const preventBrowserValidationStyling = require('./prevent-browser-validation-styling-132644ad.js');
 const onAttributeChange = require('./on-attribute-change-321d434b.js');
 require('./random-html-id-71c43d5a.js');
 require('./log-error-7b9d4b57.js');
 require('./simulate-native-event-e88bf64f.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) {
@@ -38,14 +38,43 @@ const GuxFormFieldFile = class {
         this.required = 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.hasError = hasSlot.hasSlot(this.root, 'error');
         this.hasHelp = hasSlot.hasSlot(this.root, 'help');
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         usage.trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -58,13 +87,13 @@ const GuxFormFieldFile = class {
         this.computedLabelPosition = guxFormField_service.getComputedLabelPosition(this.label, this.labelPosition);
     }
     setInput() {
-        this.fileInputElement = guxFormField_service.getSlottedInput(this.root, 'input[type="file"][slot="input"]');
-        preventBrowserValidationStyling.preventBrowserValidationStyling(this.fileInputElement);
-        this.required = this.fileInputElement.required;
-        this.requiredObserver = onAttributeChange.onRequiredChange(this.fileInputElement, (required) => {
+        this.input = guxFormField_service.getSlottedInput(this.root, 'input[type="file"][slot="input"]');
+        preventBrowserValidationStyling.preventBrowserValidationStyling(this.input);
+        this.required = this.input.required;
+        this.requiredObserver = onAttributeChange.onRequiredChange(this.input, (required) => {
             this.required = required;
         });
-        guxFormField_service.validateFormIds(this.root, this.fileInputElement);
+        guxFormField_service.validateFormIds(this.root, this.input);
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -74,7 +103,7 @@ const GuxFormFieldFile = class {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'f293d2a20f76e919abaa49dd2c74c69df77e5c96', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: '833348f22f828945a1f0883c0abb816ab9d87d35', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '1ce01c50321d6b55a9e53a8c5fa1518ed1c224e3', name: "label", onSlotchange: () => this.setLabel() })), index.h("slot", { key: 'feb8729fe9eea50f7bbbbc1784501e42137f8ec4', name: "input", onSlotchange: () => this.setInput() }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'beb5831489ee9ad6fc5e9d457ad30a16e1fec904', show: this.hasError }, index.h("slot", { key: '1a9d65b3848c1a1686c50cb16661cfcd1f28ff2c', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: 'a9d8f1bbd8e6ea11ee84f605b0f6a7072664d1c4', show: !this.hasError && this.hasHelp }, index.h("slot", { key: 'af95628cbd205dbb95f57cdb0a69169854afa8cc', name: "help" }))));
+        return (index.h(guxFormFieldContainer.GuxFormFieldContainer, { key: 'a3528820f1ce0da415f1f88cb481b24c50da1bb3', labelPosition: this.computedLabelPosition }, index.h(guxFormFieldContainer.GuxFormFieldLabel, { key: 'ad8d2fedd105b44a6d33d76dfbaebcc540c440b6', position: this.computedLabelPosition, required: this.required }, index.h("slot", { key: '349c6b669d7ec163ce889e4b4c698291af62fece', name: "label", onSlotchange: () => this.setLabel() }), index.h("gux-form-field-label-indicator", { key: '642a9a0956b212bacdfb411342124f6a70d73e66', variant: "required", required: this.required }), index.h("slot", { key: 'ee0edc22b7c211f33192ac7b1fb078d990744c8f', name: "label-info" })), index.h("div", { key: 'f1a85660385ef5f7831446b1f1cf6a59c69d2230', class: "gux-input-and-error-container" }, index.h("slot", { key: '41ccbd999248f5c4d29480c63ac2b57d02ce59db', name: "input", onSlotchange: () => this.setInput() }), index.h(guxFormFieldError.GuxFormFieldError, { key: 'c9bf25630a50f4b8c383dd1d6f8fd38df89f458a', show: this.hasError }, index.h("slot", { key: 'b4a362e2059e1af1bfece334f1b670b875507317', name: "error" })), index.h(guxFormFieldError.GuxFormFieldHelp, { key: '141246a74aceff5d1895bad4da1b88fb5d8ce2ed', show: !this.hasError && this.hasHelp }, index.h("slot", { key: '219153e535b6778eb71a75edc6d1a04d93a45968', name: "help" })))));
     }
     get root() { return index.getElement(this); }
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-7fb02c8c.js');
-const usage = require('./usage-2de21825.js');
+const usage = require('./usage-d382fd1a.js');
 const index$1 = require('./index-a1a48d79.js');
 require('./get-closest-element-9e41d6b9.js');
 
@@ -24,7 +24,7 @@ const GuxFormFieldInputClearButton = class {
         this.i18n = await index$1.buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (index.h("button", { key: 'f2ca1f6b2662be485b2810c61c7f3bc6c910c4a3', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: '742e4e73ae7d607433cdff90a26ce96726fc4929', "icon-name": "fa/xmark-large-regular", decorative: true })));
+        return (index.h("button", { key: '396f8388e24e30c41c1cce970ffd1492668ed1ff', tabIndex: -1, type: "button", title: this.i18n('clear') }, index.h("gux-icon", { key: '28c90daa4bf9ececb2e84aa774e673eae5cd2679', "icon-name": "fa/xmark-large-regular", decorative: true })));
     }
     static get delegatesFocus() { return true; }
     get root() { return index.getElement(this); }

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-7fb02c8c.js');
+const usage = require('./usage-d382fd1a.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) {
+        index.registerInstance(this, hostRef);
+        this.variant = 'required';
+        this.required = false;
+    }
+    componentWillLoad() {
+        usage.trackComponent(this.root, { variant: this.variant });
+    }
+    render() {
+        if (this.variant === 'required' && this.required) {
+            return (index.h("span", { class: "gux-form-field-label-indicator-required", "aria-hidden": "true" }, "*"));
+        }
+        else {
+            return null;
+        }
+    }
+    get root() { return index.getElement(this); }
+};
+GuxFormFieldLabelIndicator.style = GuxFormFieldLabelIndicatorStyle0;
+
+exports.gux_form_field_label_indicator = GuxFormFieldLabelIndicator;