genesys-spark-components 4.65.2 → 4.67.0

package/dist/collection/components/stable/gux-accordion/gux-accordion-section/gux-accordion-section.js

@@ -44,20 +44,20 @@ export class GuxAccordionSection {
         this.hasIconSlot = !!this.root.querySelector('[slot="icon"]');
     }
     render() {
-        return (h("section", { key: '52f477f44f3f0cfbd7fccc2b80a741cffc72cf1b', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'fa6c61e8c0b2492095f833891ea93a3a1c1fc86a', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '60f0fe4ff0a2dfdb570445c6470c977ff8df1df6', class: {
+        return (h("section", { key: '6bc2dbce6318f397d8d3f0eb509a3ace92556dcc', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'b6596099f2cf404fb1bc7eab29d34c7c5567f98f', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'abb10a97b4b33ac91a13c2c79b8b0419cdca0239', class: {
                 'gux-header': true,
                 'gux-reverse-headings': this.reverseHeadings
-            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { name: "icon" }), h("div", { key: '4425072c876b8f5b6c63807e9a378a3817acdf7f', class: {
+            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { name: "icon" }), h("div", { key: 'b6aebd9e087a3ea62f2238b7e64edf151b20ff08', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: '92a7ac9dfff36be7c9ce7d36158f24f32a85a691', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '2b6e06962d21a8e58cd035e6471f1de9197d0bc8', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '2238b4ef84a191e9dd4a0701785beea98b09abac', class: {
+            } }, h("slot", { key: 'c19088779fbf0c5177f4be750da19de9ee2a8457', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: 'b500c02a671db3831f5351ea77dacff1949449c8', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: 'c90e3bd6cfc6c8135d4abd000c7f3cd47bf0f56d', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: 'd70bb0323a784c6fce25793f97a18a3f59d2d729', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '75a4e79e64233146c83b6974988f32eb39cdece4', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: '995bcb3dc7db952ba469505552e2f689e354bcff', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '1cf06a1ae7e171f4cb5e0bf7666cb8a73b0de23d', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
                 'gux-content': true,
                 'gux-expanded': this.open,
                 'gux-text-content-layout': this.contentLayout === 'text'
-            } }, h("slot", { key: '3604b0862f13fb8dfe3d3280c4ec5304303f9228', name: "content" }))));
+            } }, h("slot", { key: 'c0d0a8215c9751f1847b699321a55ab009f53b2d', name: "content" }))));
     }
     static get is() { return "gux-accordion-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class GuxAccordion {
         }
     }
     render() {
-        return (h("slot", { key: '82f13c02f56c09f639ce95c12b462d250ff146c0' }));
+        return (h("slot", { key: '4c045aa71769a45acc49beeab9bf818c55ff5a29' }));
     }
     static get is() { return "gux-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -115,7 +115,7 @@ export class GuxActionButton {
         this.i18n = await buildI18nForComponent(this.root, defaultResources);
     }
     render() {
-        return (h("div", { key: '0cd7beefebe16c498525f8e4e3480c50e3e49c9f', class: "gux-action-button-container" }, h("gux-popup", { key: '0d4397ff6e5f654f7ed28f6035ff674f4d635dcc', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: 'fd4494b21cd332ecb2a86b821540dae6edb82c22', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'bc8c314442ea33ee3ac247bfe4fa56a7bab22501', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '13f21d5e008d1006c9c5fac49ea7901c0d6428e4', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '8adb116e8c7a97f87453e45f4f39fbe52427563b', name: "title" }))), h("gux-button-slot", { key: '32d826f3a791589cba410b4c6d58e8e4defbb585', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '00b77b9065ca6bc5280aa3cb16ea4f617e161e9d', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions') }, h("gux-icon", { key: 'c2d3e68f420809e861827e936668e46cb18e9e43', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '2a1b5272b5ab3c2129df81d71cde1fbd8d919f74', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'f89b27e882bbc4afe23b1e0d02041a51f785f280', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '0e3d86f2f9e45f898cd7f8bbf30bc7e16875d0ed' }))))));
+        return (h("div", { key: '236aa22b99fc42fff46e0d7db7a788db7c19cff9', class: "gux-action-button-container" }, h("gux-popup", { key: '08dcec7fdfc5aefb6c6b32c8dc069a4b0f08e12a', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: 'c094b186e7ca2b02205e343d44713918435d0ad6', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: '31219740445d3fab33d1ad7cd58ef7c491e25e4c', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '0c049554f8175b729172202a75a898103afa6115', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick() }, h("slot", { key: '3a15d00ed18857c22a740dce49eb03c08299cf62', name: "title" }))), h("gux-button-slot", { key: '7ebf577f31e04241e3450dc331f6d392888faa47', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '5d440d3bb3c99b5aa57439d3d1f6616ce5400b35', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions') }, h("gux-icon", { key: '6ec521623b1bc73882e62204ade561bb9fbe2488', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '53f0b149489de2f3aced0bae3ffc3e572d490c6e', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'ed6eb4962dcf4d6b7cfd76ee12a87611a39040b2', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'a1be18034b62a0295026707fb18c51112058ca6c' }))))));
     }
     static get is() { return "gux-action-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -33,7 +33,7 @@ export class GuxBadge {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: '774207fe1f24db3b46eba2f0218cd20f60c46c6f', class: {
+        return (h("div", { key: '255622c77e97499f91576807adffc0fb5e170888', class: {
                 'gux-badge': true,
                 [`gux-${this.accent}`]: true,
                 'gux-bold': this.bold

package/dist/collection/components/stable/gux-blank-state/gux-blank-state.js

@@ -35,7 +35,7 @@ export class GuxBlankState {
         this.hasCallToAction = hasSlot(this.root, 'call-to-action');
     }
     render() {
-        return (h("div", { key: '575ca29cba9f2d617b8b2c65bb054204e7aa411c', class: "gux-container" }, h("div", { key: '6e327d20d21eef32f6f24bb63473340091e3deab', class: "gux-image" }, h("slot", { key: '7b5d67578ea392eac4a5ff9c18939cdc790f42a7', name: "image" })), h("div", { key: 'd932ec19493d5a7507f664427250ee7118ecfa16', class: "gux-message" }, h("slot", { key: 'eced123b60f15a4fa026f7d15a42ef623aeb22e1', name: "primary-message" })), h("div", { key: '813c7f55583a0d75473f7a2c0d6b8a7cec08a4f0', class: "gux-guidance" }, h("slot", { key: 'eb2a777a3cdfad4ca6d32f3641fb601df3184664', name: "additional-guidance" })), this.renderCallToActionSlot()));
+        return (h("div", { key: '6a5e9203be09fab0959f0dec947bf8ab69a26e5a', class: "gux-container" }, h("div", { key: 'c4511e0db2f9605e23f055275dd813103d58aeae', class: "gux-image" }, h("slot", { key: 'd73e935433d963002c4fd106b6156f058af95451', name: "image" })), h("div", { key: '3e5cead9db6e0de250218644a298746cfa519e4f', class: "gux-message" }, h("slot", { key: '91da6b28888872d8b7c01a989bc81e0ac0986ebb', name: "primary-message" })), h("div", { key: '7ddddc9f53283b61cbf6a412a9dbba0980f7ae77', class: "gux-guidance" }, h("slot", { key: 'd5018c40313612891f0a93041dc0086d9fc51b2e', name: "additional-guidance" })), this.renderCallToActionSlot()));
     }
     static get is() { return "gux-blank-state"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-breadcrumbs/breadcrumb-item/gux-breadcrumb-item.js

@@ -38,7 +38,7 @@ export class GuxBreadcrumbItem {
     }
     render() {
         const accent = this.getAccent();
-        return (h(Host, { key: 'a8e349dc55879b82d93e8b86f9c0988818fbb3b3', role: "listitem" }, h("span", { key: '97d40bb321b6f189868ef4659801822e9a32886c', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
+        return (h(Host, { key: '20473ef24aa216223040e739c20038412f90aa54', role: "listitem" }, h("span", { key: '8772afe0bf03f5e34ff4fa8703b40bcd65947898', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(), this.getSeparatorIcon())));
     }
     static get is() { return "gux-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class GuxBreadcrumbs {
         Array.from(this.root.children).forEach(child => forceUpdate(child));
     }
     render() {
-        return (h("nav", { key: '75e6b2e53e8d86ab51ac9bcb0e38a99a48389af2', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: 'c33bae4bcfc95304ea23bd28cad07145ae42f6fe' }, h("slot", { key: '0d5734f0e43c84a63567733f37ede37aa5753b22', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: 'd924dd5f1391fd1451dfda482fb9e99c5e90d1b3', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '0742dbb730e495d4d046dad103431238a1db7357' }, h("slot", { key: '9c08113326d2f4e4a94629c1a8a8348dfe19816d', onSlotchange: this.onSlotChange.bind(this) }))));
     }
     static get is() { return "gux-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,10 +18,10 @@ export class GuxButton {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("button", { key: '3373bf55091be961c26a60500a6b25ca63893251', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
+        return (h("button", { key: 'c31bb1879557d9dcb1a5fc8c16cb83bb7420da4a', type: this.type, title: this.guxTitle, disabled: this.disabled, class: {
                 [`gux-${this.accent}`]: true,
                 'gux-icon-only': this.iconOnly
-            } }, h("slot", { key: 'f97d2ffd0dd867827409974cb28609c3c618d3f3', onSlotchange: this.slotChanged.bind(this) })));
+            } }, h("slot", { key: 'b9413a30294f833a8b16cb8278b332064375c0d1', onSlotchange: this.slotChanged.bind(this) })));
     }
     stopEventIfDisabled(event) {
         if (this.disabled) {

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

@@ -103,7 +103,7 @@ export class GuxButtonMulti {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("gux-popup", { key: 'd11ee46bdc394e449948a990c3392e67561b5440', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: '9bcee7ee324bfe28f2a4b3f54350da517e213e5e', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '078262dda15c7d90b8ebd5ea4eeeba54135bdbd5', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '0226c6123fd6f41457a2a59fc79b5eb6856ada7c', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: '8c3ff11aa93a3bc3a7aa532f3883ec1e1e34e786', name: "title" }), h("gux-icon", { key: 'cb3f3e29dc0d7aa677dfc4a51fb7481d47bff5b7', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '0fc02de7d793f0b72e8356dda71630a84e54b894', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '3b65d94364a7491e611d752b3652ebcedeb3da8e', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '4ea6256473eb88b0d029becc3d00a1a0d3b0f187' })))));
+        return (h("gux-popup", { key: 'f959df581f8d80a65cb12aa9e449bd301f5da5dc', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: '9cbd29c2f65792eb98a93d2490be18d697b857e8', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '56aa59da27857926ae4e4760ee47372abcc7526b', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '5fd1fc9b3daa59d58224a6385a60667a64872a98', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString() }, h("slot", { key: 'ac67bfb1fb381826b4c87244f5d0b64aeb6f647b', name: "title" }), h("gux-icon", { key: '921ff95852321adacdccddcb2eeafc925dc772cc', decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: 'c95809a5e93d3199d28ac1db429ad6b670ab4cc2', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'd0a0cb6c695cd90c2f40bb4ae9c51b5a390ff4c9', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'f40772b63daac6d0bf88aff8ac02ea5fa9f7bd8d' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class GuxButtonSlot {
         this.validateSlotContent();
     }
     render() {
-        return (h(Host, { key: '3c9175c6a12ed3d91ff4418f802fa3a717f79418', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '8c2c8cfc67ed5944057fdd78b1edc87a98c5cb36' })));
+        return (h(Host, { key: 'badbad6874dc17bd715793d474be91a98dcc2151', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: 'c9052094c37609ce84b371387c33312e0c4e3ce2' })));
     }
     static get is() { return "gux-button-slot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -322,7 +322,7 @@ export class GuxCalendar {
         return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("span", { class: "gux-sr-only" }, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: '16221a149dfe8fac67eb2b4c38f84775f04e6122', class: "gux-calendar" }, h("div", { key: '9d2984e7852a9012ad1bce4803d132e1779eafd1', class: "gux-header" }, h("button", { key: 'f0b75de22c5df1ba52a9b731cf5bc114c6fa0edc', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'e200f6e4a419091ba09d79e6cd411dac342a0bd8', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '1509ebeb10278bd9c124577040b22cbf523b8b35', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'f6e8ea3aa272de7187d70dd3694b4afff76aeb72', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '4bace72796459b7064d365285a09c70042dc852c', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: '4a276aef1eebfd772d72c89a7045cdfa32d4cb68', class: "gux-calendar" }, h("div", { key: 'df59ceb11b7cbf7d9479908448740164082f96d3', class: "gux-header" }, h("button", { key: '4442b2517beb58274fc40512e45451bfa6c8759e', type: "button", class: "gux-left", onClick: () => this.incrementPreviewDateByMonth(-1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: '831b9ba2c759171aae07c8ed82913f5a5a9c951a', decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'a19d13d912774ff4e9906259860cdccf66ea3206', type: "button", class: "gux-right", onClick: () => this.incrementPreviewDateByMonth(1), tabindex: "-1", "aria-hidden": "true" }, h("gux-icon", { key: 'ed01c461b9e2b03b8fcee6e6e869063e97511edd', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '8862931ddc372b822e98978482d33fd703664c37', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     static get is() { return "gux-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,10 +11,10 @@ export class GuxCard {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: 'c5c221ea7b8707264a00609dcb8adb17d26bae8b', class: {
+        return (h("div", { key: 'bda10128007a9ec19db6d2518f78e1f3c7c5f654', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: 'f12ceb174a2ad7fd32ec5853eb7c3888c59f2ede' })));
+            } }, h("slot", { key: '8c12d21d641848c2d687b1babf4b30b5b801776e' })));
     }
     static get is() { return "gux-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.js

@@ -128,14 +128,14 @@ export class GuxColumnManagerItem {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: '4b4c3ef355c0d140730fc90e635cba61e82e077e', draggable: "true" }, h("div", { key: 'b7108b987d42d6447701b3db59a23455a85b5554', class: {
+        return (h(Host, { key: 'b74f37e716db481c6b347f661a44acd98584a7ce', draggable: "true" }, h("div", { key: '7136a764a87980dde4d12ece6c945eddbb782fd5', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
                 'gux-dragging': this.isDragging
-            } }, h("button", { key: '3d66a05cf5655bd5f0d8dbfa566167be5bceb681', class: {
+            } }, h("button", { key: 'b3aaa1940f978e79b6ef574298605a1e441ad74e', class: {
                 'gux-reorder': true,
                 'gux-reordering': this.isReordering
-            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: 'feea2baefd6ba7128d8eb1d7fbbe48f241c5f788', "icon-name": "fa/grip-vertical-solid", decorative: true }), h("span", { key: '6828baaeb877ec32bac9c78d96cceecb1becc79d', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'e3d3148a61099acb4707f5cb66a40c1dbefc3789', class: "gux-select" }, h("slot", { key: 'fad304e29274cdf9fa15a679ba7d6009c68868b8', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: 'a4012488bdd5f6a979283768710e69c4f62188ea', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
+            }, type: "button", onClick: () => this.toggleReorderMode(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: 'ee1cbb421d88192f1e895573e754ebb5b5e8c084', "icon-name": "fa/grip-vertical-solid", decorative: true }), h("span", { key: 'b23fb70be4e7d2e5ed24c075ea3917b1422e92f5', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'e791a411ef99b04105cb377dc1f9eb957e1b6925', class: "gux-select" }, h("slot", { key: '8edbab865af1ddcdbafe0dc724aba57c8a81fc9c', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: 'ce28da1b61549a5627c1aca2647db7b9150ab561', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
     }
     static get is() { return "gux-column-manager-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager.js

@@ -89,7 +89,7 @@ export class GuxColumnManager {
         return (h("div", null, h("span", { "aria-hidden": "true" }, this.i18n('selectedColumnCount', { count, total })), h("span", { class: "gux-sr-only" }, count === total ? (h("span", null, ": ", this.i18n('unselectAllColumnsScreenReader', { count, total }))) : (h("span", null, ": ", this.i18n('selectAllColumnsScreenReader', { count, total }))))));
     }
     render() {
-        return (h("div", { key: '235c27899f7907107d12ec4d7651443ca763de03', class: "gux-container" }, h("div", { key: 'a67dd33d227868fd49bb75cbd089c51945f204fc', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '62d80474abfdb828efaf3d68663db230fd6acb04', class: "gux-search" }, h("gux-content-search", { key: 'a0104c41a58927e5b5441fe682312d83923ac65b', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'f6b653b05402b950c0b187e3cbea9098dda33b04', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: 'a1c6a894e9355394556a354a5ad4517c47ea48cb', class: "gux-select" }, h("gux-form-field-checkbox", { key: 'ef7523a6686227c4a9bb999cb68e377912d8ce42' }, h("input", { key: '14d3438c585c61ac2423f2bbc4a674340b2a0134', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '5fa1c2a35b48dfcbe8bf83380951219e41d15244', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: 'c2fe9d9e9289e1708f5a39ebaf5de9c1c6143f20', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: 'd1a6b7b13c7e61039d1849ae50376f5183b8484c', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '1b810acfb1b38167c55029865dc4c6aed8cfc845', ref: el => (this.announceElement = el) })));
+        return (h("div", { key: '0dfee136e2857b3b18cbfec5c401cac3b2650112', class: "gux-container" }, h("div", { key: 'bf006dc5df4daaf2b72cbaf205cea2c574c9245f', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: 'f1361f98b055db3911db03046b0a365b395afc51', class: "gux-search" }, h("gux-content-search", { key: '50de7d3f92261462420929e34e70eba056d25326', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: '60e99d1997295f28538243115db96426cb0fd981', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '178cb2cfe4979beb88c74d606c5a921ec8e94f20', class: "gux-select" }, h("gux-form-field-checkbox", { key: 'e967983c21804db72fe77de71f3f59a557680d7a' }, h("input", { key: '934dad0a49c4782330c19d2edac3cfac7f8b9fe5', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '9a127776276ac832f23140bf04bacca0426f73a8', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '39eb9f66ca7638ab356431b3e43187ae189d279a', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '3e0d2375a486629333d0a905fd4dfae18c37e80e', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '9d7de46749ac925399f18d54ffd21a432d05874e', ref: el => (this.announceElement = el) })));
     }
     static get is() { return "gux-column-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-content-search/gux-content-search.js

@@ -45,10 +45,10 @@ export class GuxContentSearch {
         }
     }
     render() {
-        return (h("div", { key: '486f3b73154fa3ab5fdbc2b08a3814b2963f9e2a', class: {
+        return (h("div", { key: 'e68c5657440c08a681454e3997f017b1b0605c2e', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '5e763b1f39a341e0cfa6f3b37b1fdf91680ff1be', class: "gux-search-icon" }, h("gux-icon", { key: 'cdabebb4eff1a8c9d4aacaae16d81a2681ec8910', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '7e60dd512c15f41dd2256da0a776cd42945e645b' }), this.getNavigationPanel()));
+            } }, h("div", { key: 'f85e519ae144209d22acd0b2bbf3953f1e2dbb2e', class: "gux-search-icon" }, h("gux-icon", { key: 'd57f62dc071fec39c72b31548f3675b801d4b6de', decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '053bf32638f622a428b2976c55d37fb6e9b3613c' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

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

@@ -510,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: '7cd816e6c68300d9b1d6fff27608ae525653607b', 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();
+        });
     });
 });