genesys-spark-components 4.166.1 → 4.167.0

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

@@ -50,20 +50,20 @@ export class GuxAccordionSection {
         this.hasIconSlot = !!this.root.querySelector('[slot="icon"]');
     }
     render() {
-        return (h("section", { key: 'a3d6661e4f323e54ad6f9133e8110c97e57ad6b6', class: { 'gux-disabled': this.disabled } }, h("div", { key: '39b570c704c1e4d0f5b3386a17843a214969611c', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '4cc60cf4f347793bfd3ef8b8cdd1e0c6791f20a6', class: {
+        return (h("section", { key: 'c75d8043d26a05924d297dadca25c032f6ae0526', class: { 'gux-disabled': this.disabled } }, h("div", { key: '750e9560166edeb46ede34c1a1dadc62ec94aafe', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'b53548ea3c8cf3161c928cfbbb5843bd201902c6', 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", { key: '3398fac4f567c341bd286841a4707613a5c0cbe9', name: "icon" }), h("div", { key: '3e32d7eb564175bec979b378b4035ff9371dd522', class: {
+            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: 'c726912ea2e56342ae5e1e457d359df6669623c6', name: "icon" }), h("div", { key: '5327ff401a76ca156bbed009ff83a511299193ff', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: 'a628e59a940b1fb1ccde94435b85d4f58d11830c', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '03b635bda5ff426e3a2a7c668974105858287e35', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '3e73a53579d952ed9f19b6d8cf8d5558537b88e5', class: {
+            } }, h("slot", { key: '7cec0481566f2df6042fee39b09cc9257de0f200', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '37889a095f6646939267098e27f19738dbd71e07', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: 'ed188ffbac75e18a0833ca40702d5b75b88d0be5', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: '24c340df4648b65885f4eca158b918dc1388a5ff', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: '050e9c0f2dfe6b7ff623273b5c99a625bea45e8d', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: '2a4cf310fe0429d84f028e4f07ff1e3de27e1e47', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: '7feac8c47c093b5f8ffcd49f0cc7026f7bd41ba6', 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: '01e7993fbbdeac4d9c9461d703d148f5bcb0cd1b', name: "content" }))));
+            } }, h("slot", { key: '561fc3a7c20efc44c44508632a41ef7f6e541f20', 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: 'bd475857f7f2e4244f29d668c529fc5c93687f41' }));
+        return (h("slot", { key: '40c10eb6df635f2f67aedef0880d2a2575d7e4be' }));
     }
     static get is() { return "gux-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -138,7 +138,7 @@ export class GuxActionButton {
         this.i18n = await buildI18nForComponent(this.root, defaultResources);
     }
     render() {
-        return (h("div", { key: '5df60e7be8cbe5c1a71617e76b6d8e3aaa5154cc', class: "gux-action-button-container" }, h("gux-popup", { key: '92188e4fb560de386ae430d7cd67975832f17e1f', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: 'd47c50a95814ac12d5e68334b17eee6ad007cf9c', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'ef244b3415f9c87dd24ba4fef3f43a9f96be6e83', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '9cd1542a97200997f60b2a28565e8741e81ac58b', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick(), "data-testid": "action-button" }, h("slot", { key: '036af66fabf480b82b3655fb20e7eea0c67e2a8e', name: "title" }))), h("gux-button-slot", { key: '81055f21f5d6d26c7945668c9ef0b61eb73492de', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '86c46e0289686bfe9d8587f5718c62e4196205e0', 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'), "data-testid": "dropdown-button" }, h("gux-icon", { key: 'a7fef18f7fa68b5d13f19b2d3b14e0582ba59417', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: '8fc84887b2f897bf90b76c8146d74099a20dfaa8', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '1f092194e7744e9e5b66b8781e96509df4db2dce', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'fcdcf808d519c4eaec9a2fb189c62b30ba347b28' }))))));
+        return (h("div", { key: 'df9dd5a402a6324792ba6f5720f9ab321b667364', class: "gux-action-button-container" }, h("gux-popup", { key: '7c01746417f8ba0becf8515f767e76942b91e7db', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '361a159c4683ae17a0fef7553ad46bdf293a6748', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'd6eb30aed3d5742796fc16c5c372ef23ae2bee6c', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'dc11517826480de7c04b67ecdf66c7795a7ce552', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick(), "data-testid": "action-button" }, h("slot", { key: '6fa178458824c8c3c3554222bb51bb8b7a3a9770', name: "title" }))), h("gux-button-slot", { key: 'de01cecd901bbfd17e64fd649fe2fe51590007e8', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '9dd30f7d7c367a3ba3afc5afbcbec0e36c6305af', 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'), "data-testid": "dropdown-button" }, h("gux-icon", { key: 'fb946785e7f06d461645f293e9c2a10e099fb671', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: '2835ad9397bd6226379bdd344a4c650e443b16b0', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'bffae7b0a2f0d41cd82830878eadb058648a4480', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '5ec78abedc3497737d04ab157cf25dfd44548e80' }))))));
     }
     static get is() { return "gux-action-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -43,7 +43,7 @@ export class GuxBlankState {
         this.hasGuidance = hasSlot(this.root, 'additional-guidance');
     }
     render() {
-        return (h("div", { key: '78927632c700a71df25acab3b09ba3622b479441', class: "gux-container" }, h("div", { key: 'a43905c846832ad28936733ccbb5244f74ec42a2', class: "gux-image" }, h("slot", { key: '4a99b872cc3a6df62d38e1c6e17ebe9a42ec218e', name: "image" })), h("div", { key: '9309e89f6f4c72fd5e4f7b204c45ddb2982305d5', class: "gux-message" }, h("slot", { key: '75eabf530cdf78bb8be1846adb0e067bc161d4c3', name: "primary-message" })), this.renderGuidanceSlot(), this.renderCallToActionSlot()));
+        return (h("div", { key: '552956046140956fafb09eef24724eedca205f2c', class: "gux-container" }, h("div", { key: '7085f843ea70d6e20f1fd114aaa0f916e78702f8', class: "gux-image" }, h("slot", { key: '31dec09402b2ca8f0ab388466d534706783fe900', name: "image" })), h("div", { key: '86be542b754b1cf257f01a0842f2777238b83f3b', class: "gux-message" }, h("slot", { key: '1809ba5287c136a995e5ec882327a94cb4e40599', name: "primary-message" })), this.renderGuidanceSlot(), 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

@@ -35,7 +35,7 @@ export class GuxBreadcrumbItem {
     }
     render() {
         const accent = this.getAccent();
-        return (h(Host, { key: '7b5d4c63c122dd42bc9c981b2c9721bea33f0de3', role: "listitem" }, h("span", { key: 'c2ba5b396b6da88b84d54dda5119a6a6aef1cb81', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(accent), this.getSeparatorIcon())));
+        return (h(Host, { key: 'dc776ce73d09cdc31397017a03c56b7612a896ba', role: "listitem" }, h("span", { key: '9e6106e96f4e83cc5c1ff26135f50f293ef06afe', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(accent), 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: 'b491b4f303a036c22340fcd581c10c6f5ca23e0e', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '60428b5e13701ec0f28c78f3a50696c3fa303904' }, h("slot", { key: '8f9ca0ab78254e4ed887dcbfe04a2576165f9097', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: '28e89b70724e2fee7aed501bdb7876c26e62436d', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '288ad6b8a76170a489b17bbe53c983a6c084e15c' }, h("slot", { key: '1278e0feda4ab8d38e0f9a53ca2c4212199e9b20', 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

@@ -26,10 +26,10 @@ export class GuxButton {
     }
     render() {
         return [
-            h("button", { key: 'af4a9e9f92774b29a3fe122805ca24cb79c6d0ac', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+            h("button", { key: '9c064f7a47d8a4b4deaa4e60af5756a030d716af', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
                     [`gux-${this.accent}`]: true,
                     'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: '4b0039c4c0d47018962d44faa89236377224aa42', onSlotchange: this.slotChanged.bind(this) })),
+                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: 'ee0e8501a4cd24a1fac1cb4c29c452b03bf434bf', onSlotchange: this.slotChanged.bind(this) })),
             this.renderTooltip()
         ];
     }

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

@@ -126,7 +126,7 @@ export class GuxButtonMulti {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("gux-popup", { key: 'b0306d8a18569fef8747b27ecc7919abee6485a3', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'e51517f0b63c6ca26749fd7a182918e9a9713ada', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '3dc7694690e160f509e77b835630f51c70974b3f', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '33fd8678672016a2b0211f7cac46ddeb9044a446', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.guxAriaLabel }, h("slot", { key: '451cebcd2e615c1e79f5f2e8ed7ab69a1126a9c7', name: "title" }), h("gux-icon", { key: '39291d3e6ad291a2e8ec69bf81f057b3c7fcf969', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '455cb0698f730781a7a8700792a13b7c78be003b', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'c17d8076f01dd8295460d061e4db9233f8110847', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '20413297ba0d093bf41855e6112cf39f72860e04' })))));
+        return (h("gux-popup", { key: 'd0471123ebbef7706d65e54444eed83bdc12e8c5', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'b0518abc3f62574c92e51bb7aef6d2a63796084e', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: 'cfbb5ae0ab92a8b73a455fc98eb2e2169bcb625f', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '1e632b8a5081b7baf0ab68faa19ba48de2131844', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.guxAriaLabel }, h("slot", { key: '6f41114c448e2e3bfa155d0f3650e6eea54eadb4', name: "title" }), h("gux-icon", { key: '6d16800f1259010172329c1095a654ac273cb8be', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '0ceaafa916a6334c13245b6127b88958f0bcf9d7', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'e131b5fb0eaae56f8f2a811f14cb28feb7865430', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '006b0c69edb184c8259a1dc3bb2366c9aa6eacb2' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class GuxButtonSlot {
         this.validateSlotContent();
     }
     render() {
-        return (h(Host, { key: 'cedf1ee61bd0713a3ce0a8fb8b88016ef3a0d0b1', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '12e152c94d7001f80dbaded950a142764a5f7150' })));
+        return (h(Host, { key: '1820b416e8c54da3570d3784266eedc5933efbc0', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '66f3850cef58ba9df05d432ab522e60b28280d90' })));
     }
     static get is() { return "gux-button-slot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -344,7 +344,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: '3d02e47d7a0c4b568cc649ee28e302e826e0ade2', class: "gux-calendar" }, h("div", { key: 'aace629948952fde8b8b6f13628645c614906414', class: "gux-header" }, h("button", { key: '1d81134f9fa956a99529faf9c86a67f33ca5bf67', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '4dacd2ef86e37aa9f97335315a38e2790e589c27', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '248be9d1b53a8ed404e6a81aa8b3261ee1871b48', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '947287a738c0fed8a8da0720a27eb79178a0db3d', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: 'ed467dbe25d8a3d5c0bfae22a3b6a20ada90fc32', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: 'e7078b80ee2b85e0fe1c83f96e60a7964939545b', class: "gux-calendar" }, h("div", { key: 'f1e5fe1d328ef32158989cc9e20909f9e3139a67', class: "gux-header" }, h("button", { key: 'aae4da818ac5081ef787c16c812a7c0bc680a32d', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '823f261e39e0b061ead849afb82f5e0a2c5d55e4', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: 'd1d9ebc762d7278b19964ec38d00296b47f98b78', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: 'a7bf63b4506e7c55f691d3aaad430f18edf0623a', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: 'b1cd35692c38c748363d6a0edd9c3f8d866d944e', 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

@@ -14,10 +14,10 @@ export class GuxCard {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: '4ab8b0f22bbbc0b9f9211bff8896c0e6b29f18c8', class: {
+        return (h("div", { key: 'cf65846810dd24ade44d0c3400f9d16c1876746b', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: 'e40b8479e18291315e2555672a9c91e2ec236484' })));
+            } }, h("slot", { key: '4a241e4cc99530464998917f75093f565542dd7f' })));
     }
     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

@@ -124,14 +124,14 @@ export class GuxColumnManagerItem {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: '75146d3e13f40dc2bff39d20b4978dda142cf7a2', draggable: "true" }, h("div", { key: '0b83eb0c921e76ee096d232d30b5a106212c5a62', class: {
+        return (h(Host, { key: '87e64ab19cc75a34e27b0da4a3883b4fc03bdfe4', draggable: "true" }, h("div", { key: '852ceec945260e57f0366ba8dd4067a36cad1815', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
                 'gux-dragging': this.isDragging
-            } }, h("button", { key: 'dc386da053e205fad701cd719791cc904a67eca9', class: {
+            } }, h("button", { key: 'b871cd2344b5df464276ac3b3ef46fd13d491d17', 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: 'ecca917ce8437280169e08f18b3294b722c55dd8', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: '6a3d15e4f04d8264fd77be6059c119200432b058', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: '6eb93dc4b42805b5c8a836e3d6d10609671b6c32', class: "gux-select" }, h("slot", { key: 'ae7fff4f2c730cbb7e3a77781f8df5d607956e07', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '87c1ddb45f1fe957677d6829ae94481bbf22e232', 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: '5ae5841dc9fea7a4c2915c103206aa7cfc96b939', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: 'd33b39c970e321e6216875363cc3fed45a8dfbeb', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'a047de4fd93b7e742b1b70a31061750478f1c224', class: "gux-select" }, h("slot", { key: '6b3a439c12c4ee9f3dca44e7802f691fae62e003', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: 'd64a6d6a97f3d8fecf40a92f7ed8d27f1ef6320f', 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: 'f0dbc0f1b501b179dce025a887d6d9b88626ecb0', class: "gux-container" }, h("div", { key: 'f18fabb02accfbf94bb4b3e68486438110bdecb2', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: 'e51842e94b7dd07ae55c63c140a002173dec8973', class: "gux-search" }, h("gux-content-search", { key: '308df505c26dd6f935b789ae6c1d7f9d79245520', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'c34f84f7480e17217cc6bc19e67286aae048cc13', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '70aa5ef6e6b04af04da4be05e5fea43651aa7b91', class: "gux-select" }, h("gux-form-field-checkbox", { key: '1c9349112407df086b246c1503f81cac2a298236' }, h("input", { key: '993e4746508e8014826f877351d0ea5c5e1d2f07', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '2a8966ef7544794d026dce0d07468f90e06a2e29', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '12795ce87acedd1c2f5a1c27618248b5737f7f8a', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '10fba008ea1af1c7d86f37e8845bfeec17a2fcd3', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: 'cdb1ed0ed77f19cbd3fda169f40c0009634c9ebb', ref: el => (this.announceElement = el) })));
+        return (h("div", { key: '5634246ba2c88484b06021a8865c9566401d069d', class: "gux-container" }, h("div", { key: '331e79feaa5c41b17162af720b679948de0fc5a4', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: 'f3fdd3580c20b6e72d9d9fbb16bcd57f53c233c1', class: "gux-search" }, h("gux-content-search", { key: '7fd12c67d493f5b8df537c44902492308b81d7b2', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'fe70e4da7358e2c413cf535c301d8d688dca0459', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: 'f334f3aeedb3d06980fb3db7fddbc2c94b83b7ab', class: "gux-select" }, h("gux-form-field-checkbox", { key: '7b3587652fd0ee01cf4ce12e05f4d154cd9b5eb0' }, h("input", { key: '86e8bac0b754e2f6d8040dc7c632a1e7dacfb7b1', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: 'd5c984dcfe510e346d5dd7d4e8d76e2515ad72a4', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '290e31ddb2ed344dd96d0088185fd5ece7301f7e', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '9c50c0a680be1c7adf023facf2186b5fa0aef5ac', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '29fee5ffde0698cda242795a20d4fde8fcda791e', 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

@@ -50,10 +50,10 @@ export class GuxContentSearch {
         }
     }
     render() {
-        return (h("div", { key: '81535f6f425a38dc8dc1c2ec2c6b1b4f0ed61dfc', class: {
+        return (h("div", { key: 'ef4715513267f640e3146f356942998a1d7f9e8e', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '4fb46c8f189824298d76f4319e12104649995015', class: "gux-search-icon" }, h("gux-icon", { key: '2be994a10f7edc5ae846eb78e6d2276df7b9b3f9', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '94478b5efb33df4e9bb57732754e542d10206e5e' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: '2f2a5f82d513ca4c1c09e74c83854986a85806f7', class: "gux-search-icon" }, h("gux-icon", { key: 'd0dffb2cfa01e19729d43c4f8560288ca97c3af0', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '830f23a720ef5d477402fb6666da5b9503c453e7' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

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

@@ -125,8 +125,8 @@ export class GuxContextMenu {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'f53ad00a61d8b69fec7d473414f9c9ee990d8b70' }, h("gux-popup", { key: 'de1134b6a02aac5bec5f3b22627e8f63883a2c8a', placement: this.placement, expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '71a2bbca8e5aa94a6224185ca1b47245bbd5fdd4', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '2bc54ea5297c49f9588ff785983f3edc430d1c61', accent: "ghost" }, h("button", { key: 'e21ce309516607acacdef676f17a42e697f6cc89', 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-screen-reader-beta", { key: '99eb639663b91e3553abea8ae4ac2880664ccf3d' }, this.screenreaderText ||
-            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: '8e8675aa5d80674495565cc1c025d6bf5c26db36', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: '24e4969f1deed9b56fe5c4370b953df5bb945e02', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: '7069c3e497b2f6665e660b99a7ab8767c43e25d4', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '7d987a1276a0f80459875f2e7508e4fc05513aa8' }))))));
+        return (h(Host, { key: '71daff89e2c9308fabfe2a72711ee5c6f58febe8' }, h("gux-popup", { key: '1524aa95d9b12ce39377f970a8aa1f88dbb1a96f', placement: this.placement, expanded: this.isOpen, offset: 4, "exceed-target-width": true }, h("div", { key: '0e081fd58aac0ed9514684e7956c3bc987ca9a02', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '59ea669fb9a29dd7eaed40ece717cebb64c65b78', accent: "ghost" }, h("button", { key: '4c62d98299bf658e7a97481ca587d080861a1818', 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-screen-reader-beta", { key: '4e6ce2bc70530d13fff98bbf8aed059c7e4928a9' }, this.screenreaderText ||
+            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: '6fcaea725f16c37a9f47fd840e6bb4854b6c6d81', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: '7af3d8d59460ece729264bd3e8e0c5924e5ac060', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'ed9fe6c367aa9ebbc8d499a27bc0d71ffe63a115', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'fd3b7b86d7eff0e47938440a029b7005add215c4' }))))));
     }
     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

@@ -52,7 +52,7 @@ export class GuxCopyToClipboard {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("button", { key: '75252f50be4e791f0fc2ca787438412283ce2d11', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: '5a0ecfff5c8d9d2f69d4299b86b64082269cda70', class: "gux-copy-content" }, h("slot", { key: '7d18008f1daa91cde33154c9362217e3835b0f25', name: "content" }), h("gux-icon", { key: '7e815130102c689d9b77f6af6e5a094210a9d388', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
+        return (h("button", { key: '986b0d6a44472080a6b1631f47c09a3a9293e0c0', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: 'c382424b3b372d1174344e77d3ca5ebb5c3cc75b', class: "gux-copy-content" }, h("slot", { key: '41e4a779c6215f183b4c0e3e1ff9eff4a3e2c122', name: "content" }), h("gux-icon", { key: 'd1ba22b2523a59e428b0a47603a937e99b840ff5', "icon-name": "fa/copy-regular", size: "small", 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

@@ -538,7 +538,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: 'd77f5674c431b55ae0dbc505d0b7e08c8a3109fc', class: {
+        return (h("div", { key: 'e1c82cefb4af617e0a0c4897db4e137eff68ba16', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

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

@@ -12,10 +12,10 @@ export class GuxDismissButton {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("gux-button-slot", { key: '3d722ad509cb66b26e0e66e4d33d8bb6f3e3aaf3', accent: "ghost", class: {
+        return (h("gux-button-slot", { key: 'ab4d4415b6534ff0bf1b123ca26d51cc28ebe9c5', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, h("button", { key: '392aab6336c518e300dada1ccbc66fd5e07848a9', type: "button", title: this.i18n('dismiss') }, h("div", { key: 'c5d26cd1eb1ac51679e9e765a359d6d37d618e00', class: "gux-icon-container" }, h("gux-icon", { key: 'ccce93cda7b09ae750db8d74e6100e1056fa5e35', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
+            } }, h("button", { key: '3a7f9528fca9183623b19082d34b51dd853ae615', type: "button", title: this.i18n('dismiss') }, h("div", { key: '7310d0b8879ec530ecfcd7432e89cbfd41e953fc', class: "gux-icon-container" }, h("gux-icon", { key: '0883e5154696a9fa8f06cf58bbda345aad7daa4a', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
     }
     static get is() { return "gux-dismiss-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -371,7 +371,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: '66bbe80f63a2d5e6e7d96a57d94e49b9485417ed', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()));
+        return (h("gux-popup", { key: 'ec85a449781ae37c4bfc77294b7c1b93b3483e92', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, 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

@@ -33,7 +33,7 @@ export class GuxDropdownMultiTag {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: 'cb92f9034fb3dd14eb7dbeb1b8e566914046ebcd', class: {
+        return (h("div", { key: '9dc2a9c4f1d75a3fae782daf7b406916f8a69f70', 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

@@ -417,7 +417,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: 'b5e8cc00f6c8c18c1f74df675ffd98ddc9d4bf8f', class: "gux-dropdown-container" }, h("gux-popup", { key: '8246e600c62b48c52b2615504e422ebfe7020107', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: 'cbb2389145c9355304b95c4a334aac53f4cfb68e', class: "gux-dropdown-container" }, h("gux-popup", { key: 'a5f4423dc6c6acd299d353205849a60337cb1b9f', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
         ];
     }
     static get is() { return "gux-dropdown-multi"; }

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

@@ -183,10 +183,10 @@ export class GuxFlyoutMenu {
         }
     }
     render() {
-        return (h(Host, { key: '4a209808a8457f1331c5ad2ab2c885fe4d7540eb', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: 'feb68706749e9be8bb93cca403401bd125b8c778', ref: el => (this.announceElement = el) }), h("span", { key: 'ea558303dac269016c07b98598741654e43714f0', ref: el => (this.targetElement = el) }, h("slot", { key: '2dc83d32adb950cee379c710766fca03e3bf07bb', name: "target" })), h("div", { key: 'd5acea6285dfe3060372d304b9331571366220d9', class: {
+        return (h(Host, { key: '01b2f7b591de02f80ebc30023294d9a125581941', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: 'bb575a0d277ba7c17e5d5d72bdfdbf4e811a8546', ref: el => (this.announceElement = el) }), h("span", { key: '782a9458bb70cd1cb6d15c6cf0c2b84efd418a5a', ref: el => (this.targetElement = el) }, h("slot", { key: '5036b56a98b30f7e5e3e2e552ef049f229ca3b83', name: "target" })), h("div", { key: '8cb12708f669ee1a43279636559cfad0abc52a81', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'c9c6d1dd5ac6e6b52edf3946f35784b9a1eafe24', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '5d99dc66d7d20a289df437b189435a2ab2db5c95', class: "gux-arrow-caret" })), h("slot", { key: '95d1b125906347868b1a6494daa4a486c08c9bbd', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '025640d7561716a0477633c3ec2d314527e78cd4', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '6ef10c8275f541598dd8cac789caa3895ec2cfd9', class: "gux-arrow-caret" })), h("slot", { key: '6efaae19eeb267202f69e649bf4f7a705a5020f9', 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

@@ -31,7 +31,7 @@ export class GuxMenuOption {
         }
     }
     render() {
-        return (h("button", { key: 'ecced16d4f3ecd3c2e5d4a42103a657601e77acd', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: 'a44a598a504c27650751ff533ea052bf83445f7e', class: "gux-menu-option-button-text" }, h("slot", { key: 'aea473f1e713c017159dcb8daf2e634e47e46fcc' }))));
+        return (h("button", { key: '2de491d39c836b2f319b6c96b87b31e408b3ecee', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: 'ec9cfa62ddd1a747a7121a22f1de50acbde01fe7', class: "gux-menu-option-button-text" }, h("slot", { key: '6557fc3a2b2c38890e3e8ee8304f9e5b05a09f46' }))));
     }
     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: 'c5c7b8dcd10f686755314ee5dab41d70819ccb10', role: "menu" }, h("slot", { key: '724189f8e7e0b4e107657143fd3b8ee49f29b6fb' })));
+        return (h(Host, { key: 'cdb799dedd8b4e21a5d201b09a66cf7e58e33cbc', role: "menu" }, h("slot", { key: 'df78d0a5df60760b818c32898e70d9a0aeab9033' })));
     }
     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

@@ -142,13 +142,13 @@ export class GuxSubmenu {
         }
     }
     render() {
-        return (h(Host, { key: 'd7491559f986e63b0ad1f231c5337c77f03a4176' }, h("button", { key: '710f94179cece5e9329a8133c3826d5e09ac1171', type: "button", class: {
+        return (h(Host, { key: '1ad11a00e017b984c136796e2ba9dd69130acbfb' }, h("button", { key: 'f038445901d006e5418d0383c1b90007ebc7d0c0', 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: '0569d6b9ca436453cc7834dcc5e1410969d08048', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '665b9c21b4a7526f9111cfdc8f8faa9d8da31f18', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: 'e95d6f7e5330d469186811b789eced6f9d3b116b', 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: '6df82dc2463debb73e1d6a9012a2693bc0472303', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: 'd133d35ecf42ff9605f29c0eed4510df49470877', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '837cb55663cdc8815aaea972d898848e61be5a67', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: 'ef2d509cfec9a1b0a7a652f36f053496ded98b0e', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: '5b683a4e7e656fd30fdba26be6e0a4174460d4ba' })))));
+            } }, h("div", { key: '23e5beec4ba73ff41118d0b0c2cfbd32a233f6aa', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'df488b3d36386e2a31ac8172c74f801a5adee2af' })))));
     }
     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

@@ -47,10 +47,10 @@ export class GuxFormFieldCheckbox {
         }
     }
     render() {
-        return (h(Host, { key: 'c00f001885ec8656276903332d04cc08eaef7541', class: {
+        return (h(Host, { key: 'e33c81e5ebf0d6384e70c9dbebd425818b629b05', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '1558a76367cb8bf4684cda3ede1cafaa32bf9c35', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'ca069c47033d3fd85c270141cd8bc72741ef5e68', class: "gux-input-label" }, h("div", { key: 'f2e8f012a2e2242fa866e95ebacce52a58ce6e0d', class: "gux-input" }, h("slot", { key: 'c2e52e50ec58c0e62d14482cf862387840dcc445', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'd3a75bce0f7fb239cdf1b3e5e63e084d233386e0', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'd5a2de7f427be31f6007880b11a0c26c2a504f6d', name: "label" }))), h("div", { key: '136d9cc9b33021167a7e9dc5dd9df2f5446ead52', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '7565f75e3b73081d8f64bf4014a1ae3bb9ba6f84', show: this.hasError }, h("slot", { key: 'efbc268aa74fda1005db996fa40cc59efa5922d2', name: "error" })), h(GuxFormFieldHelp, { key: '29c36c7cb9eb274c83db496906050afa2192de2e', show: !this.hasError && this.hasHelp }, h("slot", { key: '87f513c4d208b08a8b5356884252cb7afad98e7d', name: "help" }))))));
+            } }, h("div", { key: '3209c402cd3086dc5973c814cd170431fc40e5e1', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'b8fb142b0a7a9aa18e561fde1e78aa346acae7cf', class: "gux-input-label" }, h("div", { key: 'aa9799bbe2619e3457184eb79c4060c645f042df', class: "gux-input" }, h("slot", { key: 'c653d17b1ce35b6de6da2af0b3ba4a494ff561b2', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '99c76426d28252d0cb0f4814aacc110b9fad5d42', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '6baef9d2ebd2416132c3f344204f38958378bfbf', name: "label" }))), h("div", { key: 'f4a6883b718d55544f99147aefebbc1973cd583d', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '3e48227d9ca51e366c6a667858faa3bfe2c689ab', show: this.hasError }, h("slot", { key: '36e87306f5aaf967487c2326e2473c72b2762b46', name: "error" })), h(GuxFormFieldHelp, { key: 'fbf8f14d1ff02e9285957ef594ac1d9f0a60a984', show: !this.hasError && this.hasHelp }, h("slot", { key: '13a9478a6e10abdff37a4ac822a979c0686f7de7', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition.toLowerCase();

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

@@ -150,8 +150,8 @@ export class GuxFormFieldCheckboxGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '75ad9063b47aa50bb31ff916728450ba7ecbfcf6', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: 'c2fe018edb9658d2bced7e10d92bff9aac2996e7' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: '7d4c2abbb3081b5814a6da254752ed7c05c2d642', position: "above", required: this.required }, h("slot", { key: 'e1c3577cd10944df0c19542232430a1a0871d5ec', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e3d446e7768bff522db318a82155aa7ecca297aa', variant: this.indicatorMark, required: this.required }), h("slot", { key: '25b2fab1e3d9b79394d0d57f740d8f4558e2f5d8', name: "group-label-info" })), h("slot", { key: '04372320ce11c81caf77b6a1150863cf21c2e92e', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'd2fb195fcce3ae947778a679ec9a28ffa5888312', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'efa3e7045ac73b3903519cf92cd0a010bfe7dac8', show: this.hasGroupError }, h("slot", { key: '87213a2477200da6c1a13c118432b0b8ed9f5620', name: "group-error" })), h(GuxFormFieldHelp, { key: '8137531358e3c5c8499dd025fa80f1edd78b61f5', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'd55d18940de96509569ccc2ebc6cbf4503f3e5af', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '98d0690d8c1fd17b434f8946cd7f93c394b9b9f4', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '298fe9be8fbbb3b7f7ff7749d0ce873bfa219995' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'group-error'), this.hasGroupError), this.renderText(getSlotTextContent(this.root, 'group-help'), this.hasGroupHelp), this.renderText(getSlotTextContent(this.root, 'group-label-info'), this.hasGroupLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'a94e7153bacb115cf63ed0b4dc4603b8347229cd', position: "above", required: this.required }, h("slot", { key: 'd30a5befd3fd15213c284d0c7af243d6d07bc780', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6449f6c04cdfcdfcd80d75a9b9f229f445b7b7d5', variant: this.indicatorMark, required: this.required }), h("slot", { key: '4eab381a152e8baf40bfb4adcda5bf81937a262a', name: "group-label-info" })), h("slot", { key: '8c988a909db54ff6e9dc294d7dc9e0c4a5d702bd', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '286b30b7358d9715e8c1b9e0bb2a90b259305f59', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'b7aafae8f77cf32e153591bcb0670384aafc1bb2', show: this.hasGroupError }, h("slot", { key: 'a35123dda49a72c62deb59e18f29a9d829a28ff3', name: "group-error" })), h(GuxFormFieldHelp, { key: '4969a7009d6f8bf513394cf60297c6b5b499afb2', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'a377111d6f5816316189e5b9fda971311af68c8d', name: "group-help" }))));
     }
     setLabel() {
         this.label = this.root.querySelector('label[slot="group-label"]');

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

@@ -85,13 +85,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '8fd4ee70be5f37050f00812a7c4c9aaeba703c32', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '94f4a87ea73c42bcd83f0f6a853f4146d9bce7f4', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f17e3bec992eff92306277e2c5825cb2ec79e664', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '556f9e1afd9dd250b81d694aa9a687390c4f121d', variant: this.indicatorMark, required: this.required }), h("slot", { key: '26a484e2fe6b42c2c5772a5307a3da6f5c886a1d', name: "label-info" })), h("div", { key: 'c53b78811062d2869dab2e82134e03d60e7e28f0', class: "gux-input-and-error-container" }, h("div", { key: 'fa0dca42155e281dc6a2822d125c9764878410fd', class: {
+        return (h(GuxFormFieldContainer, { key: '2b294a491cedc62325544ae31f7ca0e32ae3441b', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '5b9714407a6faaeb26502007efc73c59ec87cf60', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '46c9249b6a3dd4f697c8ea296d236726fb345121', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c170cbb3cc937ed4c9b6d1d26ba04f3c87266e2c', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'dfad3c6d0fbe5fb49a88d26dd926d193e7359a5f', name: "label-info" })), h("div", { key: 'e67d83ced521d1b46ae7d61074d4a9b9c51b98d5', class: "gux-input-and-error-container" }, h("div", { key: 'd220d60f0b54edc579177651823855d63165f7ec', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '1aa0cbb15a18743c183b53050f1a82eb7ef669c2', class: {
+            } }, h("div", { key: '02de15bef4a1e5b206e8abe595c7353f73f93295', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'ce54a077e56dec6314f19594116d5e9c928755dc', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '2dc27b6eec120b78226a6a456283df47ad23557c', show: this.hasError }, h("slot", { key: '3766a2f37d27e25fc7733d9a8361cd63b046c45f', name: "error" })), h(GuxFormFieldHelp, { key: '031c9a6aa3985da4f658c1183c8dc24b003e0fed', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a39894f847288956ac60a509a5b71ed8da657341', name: "help" })))));
+            } }, h("slot", { key: '98f63dfef469bc8ed7e4990d5ce2a82b33f213f9', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'e7973a26ae9c40a79142180782f9c2d8a21eb00f', show: this.hasError }, h("slot", { key: '892a55dfd1c972e2bb1cea9375b071b167e6ccd5', name: "error" })), h(GuxFormFieldHelp, { key: '0429c9be3c92067b61bd8c2bffb9da4402ad0d9e', show: !this.hasError && this.hasHelp }, h("slot", { key: '85fbf1c590a2d5b99d4bf4bc19212d6baabba4bd', name: "help" })))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -99,11 +99,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '4889112d951c545dfb914f5ae76b3e62d3ba2d61', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '1fefe16e027fd8e29e4842d286eb7deca479dab7' }, (_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: '942f2e46b86a36265870a2a5e570217486382f6c', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'a0cee127a577e96e36c65516c2ec7edee23a5436', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f31e500a692f22b4170031532e847f7623a0b010', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'bb8dfe2207939300aeee619a32e0f3d82c00fc92', name: "label-info" })), h("div", { key: '7ca7fc77779cec49c881289524dc1c158d5580df', class: "gux-input-and-error-container" }, h("div", { key: '59d23144501403d28056f44a2521401c29f88a73', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'f2f4e9a8ff7f9e22045a4be75a5d3b41447ae71d', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '00ed473cf198a45a2cef8ba110780d2caa71b03f' }, (_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: 'e18eb380e152e014acf011e2858e4e1f802073b3', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'fb18e487b41ad436918342653f1d7642d6530074', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '27c7ca59d34e537eeda039c95c4b119232c1fe9e', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'cd7efd152a6c02f115a5953e57d8a5f0333ffbf5', name: "label-info" })), h("div", { key: '021d1706cabb39b8dc9402ab8d531aed533fb57d', class: "gux-input-and-error-container" }, h("div", { key: '2c5117c5e441a28dd9bc270d5a45cd3e1d7b8f00', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'ccd7ef0eb8749f8af5be7ab434783475067e39a4' })), h(GuxFormFieldError, { key: '099ff9307c1546d81f1bd9d44980e1bf2f964d7c', show: this.hasError }, h("slot", { key: '0a6a596045b39414b8688deb6dba2164e29678d4', name: "error" })), h(GuxFormFieldHelp, { key: 'dc773c2be1a3f1ff1704dd90da7e7e533605301e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fefed479c81e01c345de74f82535649b04c13dd7', name: "help" })))));
+            } }, h("slot", { key: '6faca4e188336a14f3ca7ed945ccce9531157a86' })), h(GuxFormFieldError, { key: 'e60dab8fbe562ea703d869b08684672a372a19a5', show: this.hasError }, h("slot", { key: '4fbe80625cb1c8e4e6ecc6c7e7e0fbd01c1353fd', name: "error" })), h(GuxFormFieldHelp, { key: 'd97ecff22998058888377877b40574a40bcbcccc', show: !this.hasError && this.hasHelp }, h("slot", { key: '4516800cc56bb7203f18c752689d5ba266578b41', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -102,7 +102,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '27dd2de78b88fb40db7b761bf364f04832522555', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'edb9c36a92fcea697c889854ba6cf3de70a535e2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '7119fe6b49f9200e7618681c29cbf8bc8c5ab53b', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '5e167740132a32b6c25b09707995af567609ffa2', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'd03c0d0602692efdd67289bb0abff12e11d74d73', name: "label-info" })), h("div", { key: '129d69060392f8011008bfe2dcd21a01ba16a16f', class: "gux-input-and-error-container" }, h("slot", { key: 'a66e1efae450e0d474de80fd1bb85acd2d0c50c7', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '66cffc17fad1b8f37f4666c961b74f8ff28d139a', show: this.hasError }, h("slot", { key: '08ad8342f1feaeaa71c6e16dcd7f37fd8d8835a9', name: "error" })), h(GuxFormFieldHelp, { key: 'e32a09fe7b371da5580999b16f87309e51e81b8a', show: !this.hasError && this.hasHelp }, h("slot", { key: '2b9f2221790c69609ab9d28a49bfaad321aff90a', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: '08511bf60b590f9a13ba6a7fb3561769eb0d3aa1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '04a5dfc249109bbe7fa2989d764a9ae58bc952b4', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '6953fc2d625acbf6e3b33da32647cb534c1864d1', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '51ec4246ee2079232ef350e6decf7dbf1dc91b04', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b2f6397e827292e196516614dc72774bb9a80020', name: "label-info" })), h("div", { key: '4a1a487771bc384f433278cfe3ba63c23141fa8b', class: "gux-input-and-error-container" }, h("slot", { key: '47d0d93b1ff6902dbb6fb17233455a6209f15698', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '96b0f4cf4ccc15e6f42856c03ce0e109a30c7d72', show: this.hasError }, h("slot", { key: 'ae24a6c6a1ffbe31d576a946dd7e8d8c4574fb39', name: "error" })), h(GuxFormFieldHelp, { key: '2702e229e642c9e700b203f7fc20a15bc7c0fdc0', show: !this.hasError && this.hasHelp }, h("slot", { key: 'da73bd0d3b3207bffdff1d0cbc6506c301cf8792', name: "help" })))));
     }
     static get is() { return "gux-form-field-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file/tests/gux-form-field-file.common.js

@@ -0,0 +1,77 @@
+const labelPositionRenderConfigs = ['above', 'beside', 'screenreader'].map(labelPosition => ({
+    description: `should render component as expected when label-position is ${labelPosition}`,
+    html: `
+      <gux-form-field-file label-position="${labelPosition}">
+        <label slot="label">Upload a profile picture</label>
+        <input
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+          slot="input"
+        />
+      </gux-form-field-file>
+  `
+}));
+const inputAttributeRenderConfigs = ['disabled', 'required'].map(inputAttribute => ({
+    description: `should render component as expected when input attribute is "${inputAttribute}"`,
+    html: `
+      <gux-form-field-file>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+          ${inputAttribute}
+        />
+      </gux-form-field-file>
+  `
+}));
+const indicatorMarkRenderConfigs = ['optional', 'required'].map(indicatorMark => ({
+    description: `should render component as expected when indicator-mark is "${indicatorMark}"`,
+    html: `
+      <gux-form-field-file indicator-mark="${indicatorMark}">
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+        />
+      </gux-form-field-file>
+  `
+}));
+const optionalSlotRenderConfigs = [
+    { name: 'help', html: `<span slot="help">This is a help message</span>` },
+    { name: 'error', html: `<span slot="error">This is an error message</span>` },
+    {
+        name: 'label-info',
+        html: `<gux-label-info-beta slot="label-info">
+      <span slot="content">This is some tooltip text</span>
+    </gux-label-info-beta>`
+    }
+].map(({ name, html }) => ({
+    description: `should render component as expected when an optional "${name}" slot is provided`,
+    html: `
+    <gux-form-field-file>
+        <label slot="label">Upload a profile picture</label>
+        <input
+          slot="input"
+          type="file"
+          id="avatar"
+          name="avatar"
+          accept="image/png, image/jpeg"
+        />
+      ${html}
+    </gux-form-field-file>
+  `
+}));
+export const renderConfigs = [
+    ...labelPositionRenderConfigs,
+    ...inputAttributeRenderConfigs,
+    ...indicatorMarkRenderConfigs,
+    ...optionalSlotRenderConfigs
+];

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-file-beta/components/gux-file-list-item/gux-file-list-item.js

@@ -11,11 +11,11 @@ export class GuxFileListItem {
         trackComponent(this.root);
     }
     render() {
-        return (h("div", { key: '439256c7744cf64876857a1b5fcdedc83bcfc661', class: {
+        return (h("div", { key: 'd53955036d4a45a954e6beaafb6c933a380c29b8', class: {
                 'gux-file-list-item': true,
                 [`gux-${this.status}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '86fad544c8b9f2e22c36fa6e5394d36e6abdf3da', class: "gux-info" }, h("gux-truncate", { key: '878369fc0ff217135ee5a42cafb5a857e9ead77c' }, h("span", { key: '6680e9d62b2f8257c62e97753b92535022384757', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+            } }, h("div", { key: '3a1003748e90a3b27ecdbece18249884ed8835a3', class: "gux-info" }, h("gux-truncate", { key: '7ffb12f5e1d210bf991075ba6936c72518cce6fd' }, h("span", { key: '461a240baa6c3dac8c0cb7027045bfb10edf906b', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
     }
     renderStatusIndicator() {
         switch (this.status) {