genesys-spark-components 4.65.1 → 4.66.0

package/dist/collection/components/stable/gux-context-menu/gux-context-menu.js

@@ -107,8 +107,8 @@ export class GuxContextMenu {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'f0541f7bb22b271ab0ac4adb09dc274162fc6b3b' }, h("gux-popup", { key: 'f140a6e82a37ade87baec7536fee2990f28c460b', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '459323b0c1742b8eddead8961e4355c96801397a', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: 'ed3d5016dcfc5f203df91bf6b2a1488c1c6c36e5', accent: "ghost" }, h("button", { key: 'a2925a0822e9085b6c285496b4a8eec958badb6f', type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { key: 'e56609d43adfb8a8c56553987bc43489b03367fb', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.screenreaderText ||
-                this.i18n('contextMenuScreenreaderText') })))), h("div", { key: '7eab593cc6438bd1afb0bf4a17504c066e011da7', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'edeab18b640d37bb32b68ca6cb452d2fcf6e014d', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'b57bcc824d35ffc462edbdefad489eecc4501e88' }))))));
+        return (h(Host, { key: '79745c79ec1094118485be26de3fb95e275ef907' }, h("gux-popup", { key: '67eb5bebef399fbc5cee8287cc6425e4627e31f5', expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '1253d863f884cabf63c0ddb6ac82b39ef6463e00', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '2892c2b653c69bbda08f10d5c5077203d42a05bf', accent: "ghost" }, h("button", { key: 'f64b9fd5e7b5869c6c61d4bd0f9ea4194906b2ed', type: "button", onClick: () => this.onButtonClick(), id: this.buttonId, class: { 'gux-compact': this.compact }, ref: el => (this.button = el), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), disabled: this.disabled }, h("gux-icon", { key: '105ede9ecf987895414927c6d581cf3973fdf07a', "icon-name": "fa/ellipsis-vertical-regular", "screenreader-text": this.screenreaderText ||
+                this.i18n('contextMenuScreenreaderText') })))), h("div", { key: 'a72a35d72e6323c32f17a1ce718883991aa3427b', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'd80133df2e3ead8b307e821752eabd5617971faf', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'd73dc1c4570bf9947c268b87379f0a6730f369a7' }))))));
     }
     static get is() { return "gux-context-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.js

@@ -57,7 +57,7 @@ export class GuxCopyToClipboard {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '360a1ef4d903cadb78920bafbbb3bcf7655ccef7', class: "gux-copy-to-clipboard-wrapper", ref: el => (this.copyButton = el), onClick: this.onCopyToClipboard.bind(this) }, h("div", { key: '6ffda12c3e129ff18b403dffaab9f67d1d313899', class: "gux-copy-content" }, h("slot", { key: '797a4d51fef241b54ab218e77fbdb80928054673', name: "content" }), h("gux-icon", { key: '5d09eb5265ab0c88eeb69ca66f678d73fcd176fa', "icon-name": "fa/copy-regular", decorative: true })), this.renderTooltip()));
+        return (h("button", { key: '5e1a241af98c356000f0244e4449b21dfc58c7fe', class: "gux-copy-to-clipboard-wrapper", ref: el => (this.copyButton = el), onClick: this.onCopyToClipboard.bind(this) }, h("div", { key: '8969dbbaf7a5bea764cb4bc927db75378b904747', class: "gux-copy-content" }, h("slot", { key: '053a08c92964a18f699f84388298dc8bdbf8523a', name: "content" }), h("gux-icon", { key: 'e262110f174b321ab1e7199f868a4eaca5d6d2c7', "icon-name": "fa/copy-regular", decorative: true })), this.renderTooltip()));
     }
     static get is() { return "gux-copy-to-clipboard"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.js

@@ -50,7 +50,9 @@ export class GuxDatepicker {
         this.pressedKeys = [];
     }
     watchValue() {
-        this.updateDate();
+        if (this.format) {
+            this.updateDate();
+        }
     }
     watchMinDate(newDate) {
         if (newDate) {
@@ -508,7 +510,7 @@ export class GuxDatepicker {
             } }, h("label", { htmlFor: this.endInputId, class: "gux-datepicker-field-label" }, this.getCalendarLabels()[1]), h("div", { class: "gux-datepicker-field-input" }, h("div", { class: "gux-datepicker-field-text-input" }, h("input", { id: this.endInputId, type: "text", ref: (el) => (this.toInputElement = el), onMouseUp: e => this.onInputMouseUp(e), onFocusin: e => this.onInputFocusIn(e), onFocusout: () => this.onInputFocusOut(), value: this.toFormattedValue, disabled: this.disabled }), this.renderCalendarToggleButton()))));
     }
     render() {
-        return (h("div", { key: '1c33a3aca622516c61cbdd4d5bac4242cfbad49c', class: {
+        return (h("div", { key: '6c576871c9fe0eac07839bce1a634b3f60e3c025', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.js

@@ -11,7 +11,7 @@ export class GuxDismissButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("gux-button-slot", { key: 'a80b309ee71fe9ebfd9370ed9ae9776070c87832', accent: "ghost", class: this.position == 'inherit' ? 'gux-inherit' : undefined }, h("button", { key: 'f086d6337c65be4865dce6f7b5eafc818170d16b', type: "button", title: this.i18n('dismiss') }, h("div", { key: '95380421d453c9d300647dbcdd35145440ebf497', class: "gux-icon-container" }, h("gux-icon", { key: '72191ec2b236d3acbd30cd6a0ab0fd45598dc9d8', "icon-name": "fa/xmark-large-regular", decorative: true })))));
+        return (h("gux-button-slot", { key: 'ba80f135403acafa76182e1f562740c2865ee93e', accent: "ghost", class: this.position == 'inherit' ? 'gux-inherit' : undefined }, h("button", { key: '2192904bc528e40f58fdf197468581b4980cda0e', type: "button", title: this.i18n('dismiss') }, h("div", { key: '1382fb15f0c5c300cc04923d2cb0fc98b31ac4b4', class: "gux-icon-container" }, h("gux-icon", { key: 'ccd0d0e50b060cdf48de4861347a8e47b3098838', "icon-name": "fa/xmark-large-regular", decorative: true })))));
     }
     static get is() { return "gux-dismiss-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -340,7 +340,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: '1bf630a1efca19cd958d15746bebfbc53d442f67', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: '032dbbf828631add3ba418a543a0171ed0396856', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled }, this.renderTarget(), this.renderPopup()));
     }
     static get is() { return "gux-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi-tag/gux-dropdown-multi-tag.js

@@ -29,7 +29,7 @@ export class GuxDropdownMultiTag {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: 'f88f924246234b9db6aef37db2fb3f6bedd24532', class: {
+        return (h("div", { key: '7da5944b17c9135577940ab5bd1e5dc2b5b277bd', class: {
                 'gux-tag': true,
                 'gux-disabled': this.disabled
             }, "aria-disabled": this.disabled.toString() }, this.numberSelected.toString(), this.renderRemoveButton()));

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.js

@@ -368,7 +368,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '475be896246091f798a81ff2bfc027b41a31c4df', class: "gux-dropdown-container" }, h("gux-popup", { key: '02da36e1506eecd9343291e1e45fa7eebef11b2c', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: '819e01fbf460c9bbe0dd99172a06c56dd89ccade', class: "gux-dropdown-container" }, h("gux-popup", { key: '20cbd25cff98e929d01271bca3ce2e0cde5150b7', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.js

@@ -166,10 +166,10 @@ export class GuxFlyoutMenu {
         }
     }
     render() {
-        return (h(Host, { key: '668923463417deedda3ef75f60c3577d33e4ac0f', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: '1e69b6c6e005bde4508fb6743e3bdfba162771a6', ref: el => (this.targetElement = el) }, h("slot", { key: 'fc9c5449e11af4171845c0b20e4b3f6dee653710', name: "target" })), h("div", { key: '94eaf16316a15fa306ba1df5f8384f289e3d422b', class: {
+        return (h(Host, { key: '1acb09a1f3e783b3a1d56c2f41aca77008d66845', tabIndex: 0, "aria-haspopup": "true" }, h("span", { key: 'e52eb8f2f8ccccaf129054c4ff81d58b5ddfe2d2', ref: el => (this.targetElement = el) }, h("slot", { key: '4e3685669a6f8f109b67e447ed37b3c32fa1f143', name: "target" })), h("div", { key: '8b578fcf85f62b614ff8bee35a0a326972cbe9ca', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '63d74ae8897f706ead076c45b9149204c1694243', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), h("slot", { key: 'a76dabe861b1b2ba9861b87eb30d3a8967ea9fc4', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '3fa2563f223d425561f12dc4a2bd1f5c12afc46b', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }), h("slot", { key: '854d0c0a021ab9754a8e5fc50644a029896c11c8', name: "menu" }))));
     }
     static get is() { return "gux-flyout-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu-option/gux-menu-option.js

@@ -28,7 +28,7 @@ export class GuxMenuOption {
         }
     }
     render() {
-        return (h("button", { key: 'ac8ea23303f5089f7c2d56472dffc63d00457f5f', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: 'c2d1ff7e89e8607517824ee4be06a633fff6b635', class: "gux-menu-option-button-text" }, h("slot", { key: 'ca0610c34b2bdcdb674e1424089172acc2a429d4' }))));
+        return (h("button", { key: '7eaa2c60009f7124629c80433eb9e06b59c3269e', type: "button", class: "gux-menu-option-button", role: "menuitem", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '5558db7a9a4baceed7fe02227f9d566b997b0c14', class: "gux-menu-option-button-text" }, h("slot", { key: 'dffb8a6afbf64593926a60f744d538c38d73c412' }))));
     }
     static get is() { return "gux-menu-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-menu.js

@@ -4,7 +4,7 @@ import { h, Host } from "@stencil/core";
  */
 export class GuxMenu {
     render() {
-        return (h(Host, { key: '50356084eb65059628148b0070b8b36e32bdbf8e', role: "menu" }, h("slot", { key: 'ce1e2974c0a4ee1db57a4a6d8f2f232087fdeea3' })));
+        return (h(Host, { key: '06abf6932fb8b2be9d9fa983a94c422e199c4241', role: "menu" }, h("slot", { key: '50b3ddd9c2447c92f253db00ab3b9e7507cb36e1' })));
     }
     static get is() { return "gux-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.js

@@ -140,13 +140,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: '7e642bf815750185f8ed4c3629acfdd5fce06db1' }, h("button", { key: 'd383df46f57de9aec3dd18fefde5dd6f369fb7f9', type: "button", class: {
+        return (h(Host, { key: '14d23558d387e1cf8936ba1dec84117e8217b94c' }, h("button", { key: 'a40df1ddb07a60326cfbad5dda20e428ca1d7a11', type: "button", class: {
                 'gux-submenu-button': true,
                 'gux-submenu-button-active': this.isShown
-            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: '2a86ac278b7e3066bf60bbe7911ec2baf43a05a0', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '3f0f05fd374f17c1d457af8b70836170a5a09e08', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: 'ad5bb371fb46c2635aa251c739bb953c5d653d58', ref: el => (this.submenuElement = el), class: {
+            }, role: "menuitem", tabIndex: -1, ref: el => (this.buttonElement = el), "aria-haspopup": "true", "aria-expanded": this.isShown.toString() }, h("span", { key: 'baea8c6e45075366f59c4d0b13ba01c9217bc599', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '326f89ed1ab037a9b505e44cb6bb9e528562e21c', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true })), h("div", { key: '8a4721985e4ac57bdb4a0d84bdb9345fb964a334', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '8ec9163990d5244a36d17ec848d3af0abbb93e45', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'b12468fb757f0135b25a389894e3ae3a4601c037' })))));
+            } }, h("div", { key: '5e7b73c3b5b3acf8271f4e7565bbf8c3576db2dc', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'fdeccd90af34af647e9d89d0a1acfde87a3ec504' })))));
     }
     static get is() { return "gux-submenu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -46,10 +46,10 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'e8c625f6d0687c707e5cefbf0dde2a487faced25', class: {
+        return (h(Host, { key: 'dbc5b820711914bae07225ad9b1811a854e7ad28', class: {
                 'gux-input-error': this.hasError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '4bc7a46bea73ad5f38b90b47554cb6f330c1f639', class: "gux-form-field-container" }, h("div", { key: 'fa879e9b2b58afb8039fcfe75d453773a9c7e936', class: "gux-input-label" }, h("div", { key: '22620b8d78150ca51fc35596215a66c12f83cbad', class: "gux-input" }, h("slot", { key: '10975f45e08b2c4dea53d7f47c79635cade0593b', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'a43b0e44790171037bf32d2a168d630b20dc69b7', class: `gux-label-${this.labelPosition}` }, h("slot", { key: '8e6e825334b3b1257c4a74bac694c1d507a40ba4', name: "label" }))), h("div", { key: '8cf9f85c0d8ca434791a568d0bd5febfadaa95d8', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '222a58f60b91b615feb9da4cdeea5ed86bcf256b', show: this.hasError }, h("slot", { key: 'f56a8d990d647e70377ebbff3c80cb280a173110', name: "error" })), h(GuxFormFieldHelp, { key: '6864c0173ab2c00b34cf72295b40cf45fea962e0', show: !this.hasError && this.hasHelp }, h("slot", { key: '9c85ddb2f11dbb12b90440d4ebb7e9cbacfe11f6', name: "help" }))))));
+            } }, h("div", { key: '186bcc2e645fce34ff39d7b2d696cf7c7d58131b', class: "gux-form-field-container" }, h("div", { key: '91220d71212ae4b89c44e0a790db090b935bbc88', class: "gux-input-label" }, h("div", { key: '1d87509253e088d326b210641b4db5681274a0b1', class: "gux-input" }, h("slot", { key: '87d57b5275189477095effcfea5e302190feebd4', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'b80f9c7374c178938701ae94c5387e3112e7a294', class: `gux-label-${this.labelPosition}` }, h("slot", { key: '8b4ea705ea70dfabb4fc0fe533da4b257c814bb5', name: "label" }))), h("div", { key: 'e747b80480bf4452b100f2bc85034c05bc32eb96', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '1173252d333786c6560c43ffdad803dcd02bffff', show: this.hasError }, h("slot", { key: '1d9f2b06eb3ae099a510b314354cbcd5ffbbdb1f', name: "error" })), h(GuxFormFieldHelp, { key: 'd6cbc4777257dd64a53160a6aa6f6577d088c45b', show: !this.hasError && this.hasHelp }, h("slot", { key: '0338e7913998dce8886c45899cd0d2312e3b902b', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

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

@@ -36,16 +36,23 @@
   order: 0;
 }
 
-.gux-form-field-label.gux-required::after {
-  color: var(--gse-ui-formControl-label-indicator-requiredColor);
-  content: " *";
+.gux-form-field-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   width: fit-content;
-  min-width: 45px;
-  margin-right: var(--gse-ui-formControl-label-gap);
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
   padding: var(--gse-ui-formControl-label-padding);

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

@@ -23,6 +23,7 @@ import { trackComponent } from "../../../../../utils/tracking/usage";
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
  * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for label tooltip
  */
 export class GuxFormFieldColor {
     constructor() {
@@ -34,12 +35,41 @@ export class GuxFormFieldColor {
         this.hasHelp = false;
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
     }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.input.matches(':focus-visible')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
     componentWillLoad() {
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
         trackComponent(this.root, { variant: this.variant });
@@ -53,13 +83,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: 'fcc97d5b04472ee4e2a30bc32d33798189422d11', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'dab229cd53b2009e4d26d49a18372cfd4651f7af', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ce515380ae6e7268cfa128260950f6ab36809b6a', name: "label", onSlotchange: () => this.setLabel() })), h("div", { key: 'd99aaeac941a828c0042d3f2447529bbf054a752', class: "gux-input-and-error-container" }, h("div", { key: '5c916d732398013ca6358d0ac5149755883b4e5d', class: {
+        return (h(GuxFormFieldContainer, { key: 'f92e953034fbbe4f864248608c3a25404829062c', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'cd4f2a3d91a25f63cd254a54868b5182767f42c2', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ee0773dcaf16f82184811d17ef1f58a13ae0cdf2', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'eff53af5d047f4bb14dae0a2357fe8fc679ab5e6', variant: "required", required: this.required }), h("slot", { key: 'eb28e019d6ed98b186f45bcc2756717ff2bcb57f', name: "label-info" })), h("div", { key: '187fc972554c6f0d7880a01e701043ac9d7d065d', class: "gux-input-and-error-container" }, h("div", { key: '80752846a3df0102b698407ec1dd0b546b447d68', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '335d5b35d05c2a68b25475b86a3aadbde76e9fa8', class: {
+            } }, h("div", { key: '6cfea92820ee7bb5adb8dbdcf91ee1cb7e96719a', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '6690de2a8a48acfcca030e719ce6446892127ffb', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '966b3b5cd0dbe2516c67f4335e1fe739c1da5296', show: this.hasError }, h("slot", { key: 'b38fae89959ff63e630d1d51b35fa53541809ca5', name: "error" })), h(GuxFormFieldHelp, { key: '96492cf053bcbdb1b87cd30aca9fd80b56aba66b', show: !this.hasError && this.hasHelp }, h("slot", { key: '92c2bcd33121e6920c7f1eeefde99d3212fbedae', name: "help" })))));
+            } }, h("slot", { key: 'cb427702841a197a2cf5690e354e10829d0e8609', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'a112c9e846436ad66eb355e59c6f316b3f264cda', show: this.hasError }, h("slot", { key: '73921eb2a20829dfc743f4a29139dc444082f213', name: "error" })), h(GuxFormFieldHelp, { key: '44d2a5be7d27fd223393e092f548fd5974570240', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fbb93ca9d4368bbfbb38ddf4e83fc9053d95fe16', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';
@@ -130,6 +160,21 @@ export class GuxFormFieldColor {
         };
     }
     static get elementRef() { return "root"; }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     OnMutation({ childList: true, subtree: true })

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-color/tests/gux-form-field-color.spec.js

@@ -61,5 +61,18 @@ describe('gux-form-field-color', () => {
                 expect(page.root).toMatchSnapshot();
             });
         });
+        it('should render the label info when provided', async () => {
+            const html = `
+            <gux-form-field-color>
+              <input slot="input" type="color" name="e-1" value="#cc3ebe" />
+              <label slot="label">Default</label>
+              <gux-label-info-beta slot="label-info">
+                <span slot="content">This is some tooltip text</span>
+              </gux-label-info-beta>
+            </gux-form-field-color>
+          `;
+            const page = await newSpecPage({ components, html, language });
+            expect(page.root).toMatchSnapshot();
+        });
     });
 });

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

@@ -1,5 +1,5 @@
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
-/* stylelint-disable-next-line selector-class-pattern */
+/* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
@@ -45,33 +45,6 @@
   order: 0;
 }
 
-.gux-form-field-legend-label ::slotted(label) {
-  white-space: nowrap;
-}
-.gux-form-field-legend-label.gux-required::after {
-  color: var(--gse-ui-formControl-label-indicator-requiredColor);
-  content: " *";
-}
-.gux-form-field-legend-label.gux-beside {
-  position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  float: left;
-  width: fit-content;
-  min-width: 45px;
-  margin-right: var(--gse-ui-formControl-label-gap);
-}
-.gux-form-field-legend-label.gux-above {
-  padding: var(--gse-ui-formControl-label-padding);
-}
-.gux-form-field-legend-label.gux-screenreader {
-  position: absolute;
-  top: auto;
-  left: -10000px;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-}
-
 .gux-form-field-help {
   display: none;
   flex-direction: row;
@@ -94,6 +67,40 @@
   order: 0;
 }
 
+.gux-form-field-visual-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-visual-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-visual-label.gux-beside {
+  position: relative;
+  top: var(--gse-ui-formControl-input-top);
+  width: fit-content;
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
+}
+.gux-form-field-visual-label.gux-above {
+  padding: var(--gse-ui-formControl-label-padding);
+}
+.gux-form-field-visual-label.gux-screenreader {
+  display: none;
+}
+
+.gux-form-field-screenreader-label {
+  position: absolute;
+  top: auto;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}
+
 :host {
   display: block;
 }

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

@@ -13,7 +13,7 @@ import { buildI18nForComponent } from "../../../../../i18n";
 import { OnMutation } from "../../../../../utils/decorator/on-mutation";
 import { onRequiredChange } from "../../../../../utils/dom/on-attribute-change";
 import { hasSlot } from "../../../../../utils/dom/has-slot";
-import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldLegendLabel, GuxFormFieldFieldsetContainer } from "../../functional-components/functional-components";
+import { GuxFormFieldHelp, GuxFormFieldError, GuxFormFieldFieldsetContainer, GuxFormFieldVisualLabel, GuxFormFieldScreenreaderLabel } from "../../functional-components/functional-components";
 import { getSlotTextContent } from "../../../../../utils/dom/get-slot-text-content";
 import { getComputedLabelPosition, setSlotAriaLabelledby, setSlotAriaDescribedby } from "../../gux-form-field.service";
 import { trackComponent } from "../../../../../utils/tracking/usage";
@@ -23,6 +23,7 @@ import componentResources from "./i18n/en.json";
  * @slot label - Required slot for label tag
  * @slot error - Optional slot for error message
  * @slot help - Optional slot for help message
+ * @slot label-info - Optional slot for label tooltip
  */
 export class GuxFormFieldDropdown {
     constructor() {
@@ -31,6 +32,7 @@ export class GuxFormFieldDropdown {
         this.required = undefined;
         this.hasError = false;
         this.hasHelp = false;
+        this.hasLabelInfo = false;
     }
     watchValue(hasError) {
         const dropdownSlot = this.root.querySelector('gux-dropdown') ||
@@ -40,15 +42,45 @@ export class GuxFormFieldDropdown {
         }
     }
     onMutation() {
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
     }
+    handleKeyup(event) {
+        var _a, _b;
+        switch (event.key) {
+            case 'Tab': {
+                if (this.dropdownElement.matches(':focus-within')) {
+                    void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.showTooltip());
+                    this.hideLabelInfoTimeout = setTimeout(() => {
+                        var _a;
+                        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+                    }, 6000);
+                }
+                break;
+            }
+            default: {
+                if (this.dropdownElement.matches(':focus-within')) {
+                    void ((_b = this.labelInfo) === null || _b === void 0 ? void 0 : _b.hideTooltip());
+                    clearTimeout(this.hideLabelInfoTimeout);
+                }
+                break;
+            }
+        }
+    }
+    onFocusout() {
+        var _a;
+        void ((_a = this.labelInfo) === null || _a === void 0 ? void 0 : _a.hideTooltip());
+        clearTimeout(this.hideLabelInfoTimeout);
+    }
     async componentWillLoad() {
         this.getI18nValue = await buildI18nForComponent(this.root, componentResources);
         this.setInput();
         this.setLabel();
+        this.labelInfo = this.root.querySelector('[slot=label-info]');
         this.hasError = hasSlot(this.root, 'error');
         this.hasHelp = hasSlot(this.root, 'help');
+        this.hasLabelInfo = hasSlot(this.root, 'label-info');
         trackComponent(this.root, { variant: this.variant });
     }
     disconnectedCallback() {
@@ -56,17 +88,18 @@ export class GuxFormFieldDropdown {
             this.requiredObserver.disconnect();
         }
     }
-    renderScreenReaderText(text, condition = false) {
+    renderText(text, condition = false) {
         if (condition) {
-            return (h("gux-screen-reader-beta", null, text));
+            return ' ' + text;
         }
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '666a7685c605ea7479a051d974539de44ecaef98', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLegendLabel, { key: '11758886f2f34ffe6e86d7d7cd09eb8b5fc4b4fe', position: this.computedLabelPosition, required: this.required, labelText: (_a = this.label) === null || _a === void 0 ? void 0 : _a.textContent }, h("slot", { key: 'bb7665c398da3d38396bb5e3ca65d5aea10611da', name: "label", onSlotchange: () => this.setLabel() }), this.renderScreenReaderText(this.getI18nValue('required'), this.required), this.renderScreenReaderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderScreenReaderText(getSlotTextContent(this.root, 'help'), this.hasHelp)), h("div", { key: '1fc1141771a6cf9adebd75ef14a466191f17cd65', class: "gux-input-and-error-container" }, h("div", { key: '8a44f9eafffc9a764fda33656e28ffee6c2495b4', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '769d0863b4adc96bbe6733f067043ac96dea27eb', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'af328e637e5b57668e8a31e71a922d2c32194c82' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'help'), this.hasHelp), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'e9de0468d74cd89ca37bcef0082abc9bdf3d0c27', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'd8cf52f49ede1c0cdd7e546fd6fb01ad61a22e10', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '44e3ef7c0a5f691ab96aef8573451b94636b1331', variant: "required", required: this.required }), h("slot", { key: '82bca75b4f869e32bee1ddad211767a24553910d', name: "label-info" })), h("div", { key: '5dde879d43dfb5f1c1483595cee7ef0a279021db', class: "gux-input-and-error-container" }, h("div", { key: '044adc97b3ba5fee8b51c4e65628b385bec4693c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '423b5f3c63c2dca04bd02203a893b8cb780e4288' })), h(GuxFormFieldError, { key: '87b68e6fdccb9cdeeb194cea7a74accb0bc91ed2', show: this.hasError }, h("slot", { key: '0324435c911a0614737641ebe7d2d362ef342537', name: "error" })), h(GuxFormFieldHelp, { key: 'f5ff6c7188ac726cfcca95e8f192d01682fff4fc', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f0a51c6237eaaa370e6a6a3491dae66cf5d60dde', name: "help" })))));
+            } }, h("slot", { key: 'd8d5ccf59dc3ff470c96f3941d70f2a2801c1a73' })), h(GuxFormFieldError, { key: '21b34c5cfd1af2508e34023f1570c7cc395f2501', show: this.hasError }, h("slot", { key: '6c4295be90f42a2a195ff1bfc72fcb414775c680', name: "error" })), h(GuxFormFieldHelp, { key: '6f6a76b4ccdfed413f0ce93e6a4073081a92fffb', show: !this.hasError && this.hasHelp }, h("slot", { key: '07f4340cf8c6ee21e8875db697b8cd568e8c994c', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -138,7 +171,8 @@ export class GuxFormFieldDropdown {
             "computedLabelPosition": {},
             "required": {},
             "hasError": {},
-            "hasHelp": {}
+            "hasHelp": {},
+            "hasLabelInfo": {}
         };
     }
     static get elementRef() { return "root"; }
@@ -148,6 +182,21 @@ export class GuxFormFieldDropdown {
                 "methodName": "watchValue"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keyup",
+                "method": "handleKeyup",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focusout",
+                "method": "onFocusout",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 __decorate([
     OnMutation({ childList: true, subtree: true })

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

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

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

@@ -36,16 +36,23 @@
   order: 0;
 }
 
-.gux-form-field-label.gux-required::after {
-  color: var(--gse-ui-formControl-label-indicator-requiredColor);
-  content: " *";
+.gux-form-field-label {
+  display: inline-flex;
+  flex: 1 0 auto;
+}
+.gux-form-field-label ::slotted(gux-label-info-beta) {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
+}
+.gux-form-field-label.gux-required gux-form-field-label-indicator {
+  padding-inline-start: var(--gse-ui-formControl-label-gap);
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   width: fit-content;
-  min-width: 45px;
-  margin-right: var(--gse-ui-formControl-label-gap);
+  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-width: fit-content;
+  margin-right: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
   padding: var(--gse-ui-formControl-label-padding);
@@ -91,4 +98,8 @@
   font-weight: var(--gse-ui-formControl-label-text-fontWeight);
   line-height: var(--gse-ui-formControl-label-text-lineHeight);
   color: var(--gse-ui-formControl-label-labelColor);
+}
+
+.gux-input-and-error-container {
+  flex-grow: 1;
 }