genesys-spark-components 4.199.0 → 4.199.1

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

@@ -11,6 +11,7 @@ export class GuxColumnManagerItem {
         this.pendingReorder = 'none';
         this.isDragging = false;
         this.isReordering = false;
+        this.isParentReordering = false;
     }
     // eslint-disable-next-line @typescript-eslint/require-await
     async guxSetHighlight(highlight = '', highlightActive = false) {
@@ -53,6 +54,14 @@ export class GuxColumnManagerItem {
     onDragEnd() {
         this.isDragging = false;
     }
+    onmouseenter() {
+        const parentElement = this.root.parentElement;
+        this.isParentReordering =
+            parentElement.classList.contains('gux-reordering');
+    }
+    onMouseleave() {
+        this.isParentReordering = false;
+    }
     onDrop(event) {
         const oldIndex = Number(event.dataTransfer.getData('oldIndex'));
         const dropIndex = getIndexInParent(this.root);
@@ -93,13 +102,14 @@ export class GuxColumnManagerItem {
     onMouseUp(event) {
         event.preventDefault();
         const clickedElement = event.target;
-        // Only mouse click reordering if user clicked on reorder icon, not the checkbox or label
-        if (clickedElement.slot === 'input' || clickedElement.slot === 'label') {
+        // Only handle mouse click reordering if user clicked on reorder icon, not the checkbox or label
+        if (clickedElement.tagName === 'GUX-FORM-FIELD-CHECKBOX' ||
+            clickedElement.tagName === 'LABEL' ||
+            clickedElement.tagName === 'INPUT') {
             return;
         }
         if (!this.isDragging) {
             this.isReordering = !this.isReordering;
-            this.pendingReorder = 'below';
             this.internal_mouse_reorder_move.emit(clickedElement);
             document.removeEventListener('mouseup', this.onMouseUp);
         }
@@ -150,14 +160,15 @@ export class GuxColumnManagerItem {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'd46b492190b43af5a120d148f98514e2eab75909', draggable: "true", onMouseUp: event => this.onMouseUp(event) }, h("div", { key: '6b59de6beae70a332742b0f0426966c3cda4e294', class: {
+        return (h(Host, { key: '5d5cead78083e419c5ef5dd6eaaf1f9f93b22a7d', draggable: "true", onMouseUp: event => this.onMouseUp(event) }, h("div", { key: '1eaa69f78e2a8fb97b756ae29cc1e43ad1637955', class: {
                 'gux-container': true,
                 [`gux-drop-${this.pendingReorder}`]: true,
-                'gux-dragging': this.isDragging
-            } }, h("button", { key: 'c894e33166ff15775d6ce26f4ae205414eb4cc5b', class: {
+                'gux-dragging': this.isDragging,
+                'gux-parent-reordering': this.isParentReordering
+            } }, h("button", { key: '955df1b8ecdf022a78aa1ca5be1c16f63f793190', class: {
                 'gux-reorder': true,
                 'gux-reordering': this.isReordering
-            }, type: "button", onClick: () => this.toggleReorderMode(), onMouseDown: () => this.onMouseDown(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: '81b0ca381207f40644c3ef44c8adead458a726d8', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: '328659fd3faf9f971a6f3c32b0c1977fbfe55bad', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: '169a850276b43646a9af71ad48ceffd6af0ea888', class: "gux-select" }, h("slot", { key: '605d709354d30261ad140522c515728e670b9b2a', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '095dd4f62778c9ef215edf3ee8d7ac3aec4e1ec0', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
+            }, type: "button", onClick: () => this.toggleReorderMode(), onMouseDown: () => this.onMouseDown(), onKeyDown: event => this.keyboardReorder(event), ref: el => (this.reorderButtonElement = el) }, h("gux-icon", { key: '302541e4e6561a0bae6a37aa301453ce19de69fe', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: '7d2945f43e56d227bf3edc385257345e9a80125f', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: '92d1c26eb14034cf8d9b205b5e2e8847d472d78c', class: "gux-select" }, h("slot", { key: 'd8a9d897bff581ce232c34ef8e4a74b6cd1d57fd', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '00313b556d4a8eba0d5ab6492cf97349834cf878', highlight: this.highlight, text: this.text, strategy: "contains", dimmed: !this.highlightActive })))));
     }
     static get is() { return "gux-column-manager-item"; }
     static get encapsulation() { return "shadow"; }
@@ -201,7 +212,8 @@ export class GuxColumnManagerItem {
             "text": {},
             "pendingReorder": {},
             "isDragging": {},
-            "isReordering": {}
+            "isReordering": {},
+            "isParentReordering": {}
         };
     }
     static get events() {
@@ -410,6 +422,18 @@ export class GuxColumnManagerItem {
                 "target": undefined,
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "mouseenter",
+                "method": "onmouseenter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "mouseleave",
+                "method": "onMouseleave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }, {
                 "name": "drop",
                 "method": "onDrop",

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

@@ -1,4 +1,4 @@
-import { h, forceUpdate } from "@stencil/core";
+import { h, forceUpdate, Host } from "@stencil/core";
 import { buildI18nForComponent } from "../../../i18n/index";
 import { trackComponent } from "../../../utils/tracking/usage";
 import { getEmptyKeyboardOrderChange, getIndexInParent, getNewKeyboardOrderChange, getNewOrder, getSelectedColumnCount, setAllCheckboxInputs, setHighlights, setKeyboardReorderPositionIndicator, setMainCheckboxElementCheckedState } from "./gux-column-manager.service";
@@ -119,7 +119,9 @@ 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: '3f8cf9644b0d6d7ae927ba1946b45f2cb4929d0a', class: "gux-container" }, h("div", { key: 'e4725cd8ec35d9186606419aa0bb23b63571dfa2', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: 'febfd9ce9c998d24f6874c44acb3749664aae4f5', class: "gux-search" }, h("gux-content-search", { key: 'ab08470d0d0b3313501bdf36d361ad07af857252', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: '10257aedafe829f9eaf2216cff7fd0c24cd92d3c', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: 'fda5d1fdd46f785049384a38da77278529b9de23', class: "gux-select" }, h("gux-form-field-checkbox", { key: '3bd783295b248418f4901491e42d0ed94f1f9f59' }, h("input", { key: 'cf02f0018bc01173535191aa93c3ef56a267b170', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '0ddf91f1bbc5766464a3f8a2092568db51f45541', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '35617683f3a1e63c08eb7517a4a996a3c13d3456', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: 'd7a49ae706f81e1adb6dba687bfb748c33d66b40', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '55b26a081cfe1d6710688df1ec131895e6abca04', ref: el => (this.announceElement = el) })));
+        var _a;
+        const isReordering = ((_a = this.keyboardOrderChange) === null || _a === void 0 ? void 0 : _a.oldIndex) !== null;
+        return (h(Host, { key: '2f65d1b779a4558eca9bd37b85d46da531f57d64', class: { 'gux-reordering': isReordering } }, h("div", { key: '6583f72901ad97faa415f08d4ece744a24cfe729', class: "gux-container" }, h("div", { key: '1c8c3ba5721f2dbadc1f2e7057ebb578140b0643', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: 'f48a1bb067166a33eaa9113b98ceab98aeb9fd1b', class: "gux-search" }, h("gux-content-search", { key: '9709b2ac88faf9a8dfda06cc4b45fea91dc8620b', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: '2f998beca883c3eb115247d4b2a39dd866376875', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '11f98380fa72214371749083f957582979958f23', class: "gux-select" }, h("gux-form-field-checkbox", { key: 'e0edb734ec544344e7954fdabbffda87abd08a76' }, h("input", { key: '35ab8cc8832afa14c02c9239680295eeabedeb80', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: 'd1b1bf2cf1b903f0182c3183dce4c6609dace63b', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '24ab1391b54b4f6e1dc473be036d669e1f5369e5', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: 'd8b143e5dbb74d466f7e8e0a1397d1d02887b1ea', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: 'd20a3c9e64b4e28af1576bf6c0a47b498ebeef2c', 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: '5b904d01b64d7bcb7c194a9590c5eb63eb8d9bf8', class: {
+        return (h("div", { key: '52c6971f2da0ecbc95fba8eb9324737a6c690b36', class: {
                 'gux-content-search': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: 'fc40b4f3719ac86668fed256e546ab4a77b713ad', class: "gux-search-icon" }, h("gux-icon", { key: '9a5ef4a51342d6d6ed1c27baf864f7eb5036adfc', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '6b07026a7e86dd99e6577b7c227eff8c7857cdb8' }), this.getNavigationPanel()));
+            }, onClick: () => focusInputElement(this.inputSlottedElement) }, h("div", { key: 'eb6c7ddb2abc13dc0128ac29e51e35d962d2e7b4', class: "gux-search-icon" }, h("gux-icon", { key: 'dffb03e4342920424605ba52a99ccd79bbeda6ae', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '9eb81ac4e434ac61dde816703be9fd47dbede9f9' }), this.getNavigationPanel()));
     }
     getNavigationPanel() {
         if (this.showNavigationPanel()) {

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

@@ -124,8 +124,8 @@ export class GuxContextMenu {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h(Host, { key: 'acfcdcce5a55c4ffaacf0c335daba7cd09b6f79c' }, h("gux-popup", { key: 'c93602f43f149290730d27e940f4cb7498835eac', placement: this.placement, expanded: this.isOpen, offset: parsePxValue(uiTokens.dropdown['gap']), "exceed-target-width": true }, h("div", { key: '610fb201e3597cdeb40312b134c2e5bbef29e886', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: '12cf07e91bbcdf9c33de1e9fa2689838deffbb75', accent: "ghost" }, h("button", { key: '2b6df04450e778944046419b233840185cbdb693', 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: 'de978ddc36cd76e2eb19febc78a177ccc0c7cb2a' }, this.screenreaderText ||
-            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: '01ae25a413fbc60e3e9614e714b6630585234ab4', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: 'adf6db6a4065a33f00e6d8a55a738194f24be008', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'a649c8f29856553b64a708da1f869219f90ffbf6', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'ea23dbea00ef83fe84b3c60d52a5cee052354590' }))))));
+        return (h(Host, { key: 'e1a0f86ff7f5628342de617743ea4f789d173b05' }, h("gux-popup", { key: 'dd2cfd053e6b69108b4ebecfd7db368f7a6c95e8', placement: this.placement, expanded: this.isOpen, offset: parsePxValue(uiTokens.dropdown['gap']), "exceed-target-width": true }, h("div", { key: '210acbac25411c5b03c7bb04610fd340b6404878', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: 'c3985e8d204041c4484afb6875dbe8de2f2ccc82', accent: "ghost" }, h("button", { key: '53409d9d707eb98848f1ac4e9795dd1055cde0a3', 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: '92a71c4a539e19ceb47ca7c31499ac11fe35599e' }, this.screenreaderText ||
+            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: '1901ae4b10c88f768810b0410ad248dce50c6377', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: '8bfa4fca39690d6dd42855e2ed1391fe219457c1', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'e8c30a20e430a79f59f93d43bb3c6c7f74f5486c', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: 'cb337637c12171feb30720168fcc22abb7592a06' }))))));
     }
     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: 'dc4b4fb114f297d9335b440f0a5036e510ff2907', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: '156eb5ad95b8ea0498c3879f8207c39052ad7ee0', class: "gux-copy-content" }, h("slot", { key: '2974fd7b3e36230fcc5cd742186245d80ffc12ba', name: "content" }), h("gux-icon", { key: '378811d48803292dcfb919ca63486f156da820dc', "icon-name": "fa/copy-regular", size: "small", decorative: true })), this.renderTooltip()));
+        return (h("button", { key: '08da9bc4513059d90d97e73fcc327bdf6ac469d8', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: 'd05708c37a89cb495ce0626e3bf4c3fdef22d744', class: "gux-copy-content" }, h("slot", { key: '040c1ab39fd7cb4d070319291af0147fcbe1a361', name: "content" }), h("gux-icon", { key: '0741dfb08eebe1917fd1f97ca9e78cc276bb8dfb', "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

@@ -566,7 +566,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: '09e2bc237900d4e16b24af47371bafd0775bbcc9', class: {
+        return (h("div", { key: '753515db40b45f4e573cc7b09d094d2eaf7c8a95', class: {
                 'gux-datepicker': true,
                 'gux-active': this.active,
                 'gux-disabled': this.disabled

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

@@ -36,7 +36,7 @@ export class GuxDropdownMultiTag {
         this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        return (h("div", { key: '0b79d5a7b47eb6227605b18fcf0b45399ddd3c36', class: {
+        return (h("div", { key: '2f9fddc813ba4ab7d367992ffedafc4b2f6af876', 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

@@ -416,7 +416,7 @@ export class GuxDropdownMulti {
     }
     render() {
         return [
-            h("div", { key: '31656f799ca75d11e47d975e23e09db9376d5049', class: "gux-dropdown-container" }, h("gux-popup", { key: '5b47b02dd50e621798a141416045ff51a46ac947', expanded: this.expanded && (!this.loading || this.isFilterable()), disabled: this.disabled || (this.loading && !this.isFilterable()), exceedTargetWidth: this.exceedTargetWidth }, this.renderTarget(), this.renderPopup()))
+            h("div", { key: 'a3c7dfc5a088943e84e447052f7cba5b75d7bca3', class: "gux-dropdown-container" }, h("gux-popup", { key: '96de09c27ef9ddfac544bcb1823a41d2b1fc619e', 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: '50c5feac34a065e8308ab8ffd4c3576466f12e07', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: '53906aba810762b75d31e26bcb388f67e918e472', ref: el => (this.announceElement = el) }), h("span", { key: 'f90591e2cb74cee3e5d0ecd3af8f6745b1e26127', ref: el => (this.targetElement = el) }, h("slot", { key: '32ab82b5fe229deeaeec086627f525a7590e2d87', name: "target" })), h("div", { key: 'b3e216e5773d287add993669b3865133f6ddedc0', class: {
+        return (h(Host, { key: 'd3b502f251376ed98562a513c4a91d20f4bbcff3', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: '884ea314fb50cf835f4197f25915919058cf43c9', ref: el => (this.announceElement = el) }), h("span", { key: 'e3c698df869b2f4a7507f56ed5d8a170bd7cc794', ref: el => (this.targetElement = el) }, h("slot", { key: 'f823a69e0115c9a3dde93d78980581ff09311480', name: "target" })), h("div", { key: '25cd38a1fd9579145c77c889f6e8cced0a46a0c0', class: {
                 'gux-flyout-menu-content': true,
                 'gux-shown': this.isShown
-            }, ref: el => (this.menuContentElement = el) }, h("div", { key: '60e2c5bc206607a04248744b555b99e27ba66835', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '4b75d38702616a4b65d03e6f64289f37ebbcbd60', class: "gux-arrow-caret" })), h("slot", { key: 'fce6f3a9dc46ba0d2c34fc9cad1223d1ba45ae61', name: "menu" }))));
+            }, ref: el => (this.menuContentElement = el) }, h("div", { key: 'c99a3da87b6d48a55a71cd743074b52fcfb3d97e', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: '0f812f5a7f139561bee2f7715fc79aa15923ed14', class: "gux-arrow-caret" })), h("slot", { key: 'ce19c680e0fe591d3d7639fd50470d4682fa267c', 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: 'a33cf2aaf26e28ff8addd7571582566dcf0a87bb', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '3e1464dc5ca44cc6575f038f295914f3772c2c46', class: "gux-menu-option-button-text" }, h("slot", { key: '64e8c6d28b80487daa8b0d23d8474f09a423edbd' }))));
+        return (h("button", { key: '99c99960a717bd97309352856b96c4525885d018', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: '40e1abcd55204e90e12f4e7489ad2f5384225e3d', class: "gux-menu-option-button-text" }, h("slot", { key: '0093eac3e28b3b311fb0c006a176a2c39aa69403' }))));
     }
     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: 'cd3d710134b2cc4696289e3997eae22eb2bd22f1', role: "menu" }, h("slot", { key: 'b5799a9bdbda141f5680b65dbbfd72ae1dd7d973' })));
+        return (h(Host, { key: '7cb0a4d8e89fdd8a2676dcdf3b4313fa6098bdf9', role: "menu" }, h("slot", { key: '139bb4b54ea6719824413ee230c5a6507d5ee26c' })));
     }
     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: '84ac6faabde0b447eb8c09b92d4a0dd23c60929e' }, h("button", { key: '60fc0a732e60c6929c28eb0549257b5dd5e19121', type: "button", class: {
+        return (h(Host, { key: '22e556c84a88a5bdeb98c8c13d0b1c0ebbe7e045' }, h("button", { key: '806dbf6f2f1fc49eb94b60f682e92e066f0dddea', 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: '605779605a81342508c8789a71fc01fe4e530b36', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '84a9de0a56a92322cdea5434352299a0d5606da3', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: '6033ade2de06d26eac3d637ac36bfa73d8a6903a', 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: '4e05075439c9cd0a0a7a5a6039e99dfb15299146', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '14c7a8540ddf60fd6ccaf5418659713c71c97c0d', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: 'ba137f476cb82c339223a107bb2066b433c5da80', ref: el => (this.submenuElement = el), class: {
                 'gux-submenu-wrapper': true,
                 'gux-shown': this.isShown
-            } }, h("div", { key: '441f1d1c8aeead410ad885bb28bdc8e65a0cf94f', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'd3dff76f4953681a0f0931f0cb4050c624d49abb' })))));
+            } }, h("div", { key: '4ef378fa03703ab54b18db08775c65833ee44f5f', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: '66284f9f2dce85b25b84aad37c0dc995d1fbb450' })))));
     }
     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: 'f3ee03f85fd8b0c0cc6c6dea848b7ec784899f3f', class: {
+        return (h(Host, { key: '9a67611178b4fbab4de144aa1bdc1a72925ce901', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: 'f7e315c092c47f89ec0608f7cc0b1f545bf03018', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '12c0119369f66090ac050085dc1b996827285ed0', class: "gux-input-label" }, h("div", { key: '0ab3f6b8cffae4fa54506215fcc92e787099153c', class: "gux-input" }, h("slot", { key: '3e682dd24124254a6c2c017b3054d2b9901ee47b', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'd3915ba819ba13879a2389eaeedeb823e0d5c9c4', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'a271dab20e31017654e81f53b4439c0521d69557', name: "label" }))), h("div", { key: 'b62854e3667a9ccc4937b1028ae72241557b7002', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '4d7211f0a9d54b7e7c070926a59518f8afd63616', show: this.hasError }, h("slot", { key: 'cc7eaceef271abba3d6d0caef3eede476ae21570', name: "error" })), h(GuxFormFieldHelp, { key: 'e185bd75c1fca4cced04b3db74188727440b21e4', show: !this.hasError && this.hasHelp }, h("slot", { key: '01a2219d9114c2a0d87d5dd9a475999117d699e5', name: "help" }))))));
+            } }, h("div", { key: 'e28cf023c99ed25ade7cf91cf611742b4010e327', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '96b73aadb08d2e30fc607238ebcac504fa272e59', class: "gux-input-label" }, h("div", { key: '0f651ffbfe26e03ff75c29ec1b12f9f34c54dc15', class: "gux-input" }, h("slot", { key: '852b28057e2de1f7f3143f43c399e80819848a8d', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '7f2955e54e31d1ca5f6e293f30b239a60600c06b', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '878cbab4ced7c03cd8fcc5de5d3118d454e12890', name: "label" }))), h("div", { key: '6dbacbf57dbdd0effd2e432027bbab37a5da233f', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '1270122ffe746ffa8c391bf33247d392d660fa58', show: this.hasError }, h("slot", { key: 'd9bbfa0e6796cfbc007f36168e74020048ff3623', name: "error" })), h(GuxFormFieldHelp, { key: '9baab5c9ad95605d3f93edd9796867e92e86eb3d', show: !this.hasError && this.hasHelp }, h("slot", { key: '6a62b0006e15934e14097ea01e86026081087190', 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: '92a844e6b459fb565b325714f3d5f6ed23732482', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '89cefa37c45059fbdce83afae13e983fbf05245e' }, (_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: 'b0240912912abacb44a18efc4c1e8641938f7e00', position: "above", required: this.required }, h("slot", { key: '317093d695fe364541b04415cf5aed1ade800dca', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '61bfcb1509c7d1ffe63ae960adc142095f9ea962', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1510300f79f8b03f35ab737866f3b1335ac57957', name: "group-label-info" })), h("slot", { key: '0694c5420af5762b9727b7db75c1ab72777cd743', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'a6d6d49ca5844ef86aa1ab7e2ebf2478f6c03464', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: '2ee5482888822666d0451cddc3f604a78d32420c', show: this.hasGroupError }, h("slot", { key: 'da96d3430ad950ce1eba527973617e2b12eff57d', name: "group-error" })), h(GuxFormFieldHelp, { key: 'fb3264c8f5dba8e4acd2dbd47271bdf7e166f86c', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '0b5fcd43da00bcc2883f1e651271bed69f3d4fb6', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '9ef89b47c90168ee012be4bbb8dacfd7732e229e', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '34f65b8c8f1cdc4b52b37f59db46baae2c412f4f' }, (_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: '3414234f6225cfd77b3c8b6046cf8c7014409cab', position: "above", required: this.required }, h("slot", { key: '0ab8c8a8cb183df2161768601429bf706a8355ab', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9d074b28860c6250ba35a1df0d5a4f2cbe9673c2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '02cfbeb4acaf746b626af70ed1056604620578ed', name: "group-label-info" })), h("slot", { key: '8f403408a080e0716ae357cc4b26b669b5fc7fce', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: '6a95327977757a855aede87d5ba3af76bd9fb955', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: '7f536cab854c95179b06523226d83f3f31d1e3ee', show: this.hasGroupError }, h("slot", { key: 'b9b685c48b351fc04ace61704bac3eb0503de957', name: "group-error" })), h(GuxFormFieldHelp, { key: '33002142c44e57e237077d3e2b4e31bb4ee8145e', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '2717c87f3dc03abe96ab8cb20241b2dfddb62536', 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

@@ -88,13 +88,13 @@ export class GuxFormFieldColor {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '7ae46b24ae3151ab80b14bea6c449b94f9f3d0af', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '2621b92ad1a11a36e23b6b8b752c3f3e9db64733', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '97100d4c6a6e22d0c1fb0dc13ab18e8885810f50', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '11cf8407ed1c1a2b7891da4f36affb4da45e30e8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '79c7005dfa407e9951085b78eb9e38d638a80c2e', name: "label-info" })), h("div", { key: '9f268ec512da2faf2cc21303d6971d4bc84582f6', class: "gux-input-and-error-container" }, h("div", { key: '54e1400eec5b010eda2c5a1793caf45b87b17584', class: {
+        return (h(GuxFormFieldContainer, { key: '219f4a0718ad7ed67ac89a3350073c16f04f766a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '70de9cc31cdc03faef8d81f206e78ae063e43c11', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '4d7498b7ccd9f49868e2bf53d80cd9d1b497ecad', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2f9f04abceed2f9e91a7bbe1346047ac1aba656e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '5a64d3c90fecfbdd18074c20b9885e04481575cc', name: "label-info" })), h("div", { key: '1aec60e34affb0f9ea19593837f2c3ecb2ea2949', class: "gux-input-and-error-container" }, h("div", { key: '7dec62b0d5140f5f8853b4a4abd6f110effb4663', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'c9536bf3c1d2b013a99fbe926ffaa23e105c658e', class: {
+            } }, h("div", { key: '490065f61f0cc51fc90642fdee24716b1dcfac95', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '1f27963e69948292c5e81992723533a6ea39f77f', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: '1abdb89e7442e3d0fcf16db6c7ef6e92de6987e0', show: this.hasError }, h("slot", { key: '7faa5a9c50cebe60440e2287e41f4a968407d3a2', name: "error" })), h(GuxFormFieldHelp, { key: '6cc55324a81e01db245e369235a22d3f33760a50', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f6a356d08459075bd1735ec4318d48e13906ff72', name: "help" })))));
+            } }, h("slot", { key: '766dc8fff8596545a4988bca32bea33ba4a6bcb5', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'f8fd59d01f3663807a434f67a0d013d33132bdcc', show: this.hasError }, h("slot", { key: '712b3728ff4fb0ae385ae49a2e3f52c02fdcd136', name: "error" })), h(GuxFormFieldHelp, { key: 'a8354fd6c4ab5cd377f3fe5f362f32712f829d0f', show: !this.hasError && this.hasHelp }, h("slot", { key: '8f5f5663bd83e0e33765b178981ed6bf0a2b0eda', 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

@@ -102,11 +102,11 @@ export class GuxFormFieldDropdown {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'bd5a9b56b2b463bbcd47b0d848e8fcaec15d7bae', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: 'c42d702abbe91566650575edca6aee30956f8ec3' }, (_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: '30451157ece2c841eb63ff1ec17c45e12dda2ae2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '62d3807d6eaec6817a691edc9efa52c961954392', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'a967b1d2f7558f052efd7b5058edd94e43b636a6', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7ac30a844a6073be2ad2ded6b0393d262c2894f6', name: "label-info" })), h("div", { key: 'b2683a7e75d91508871a997d40a1f6165417a505', class: "gux-input-and-error-container" }, h("div", { key: '1e32cd4a36b3d78dc8ade9b277730c6c426de3cc', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: 'ec646997b4f8d98e72fd85fc1d733ad3ff86eb50', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '8a134b39c68bda760923a6f4e4b12e7b071cf935' }, (_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: '1e1f058b1104a30a4ea06c3b77cb32206f2179b1', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '314afc1d4ab62e41398c05390a92a8910b736036', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'b793439b45a6a2343b06c93586c5d3281ba111bc', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3a116c63e13c06e9521ae129ea5e3d5b0f1838ad', name: "label-info" })), h("div", { key: '023609836f4ae6c8561de81cf2b75e65aaf08e14', class: "gux-input-and-error-container" }, h("div", { key: '264577a04ad1ae9a60972c7bb08b4e4cb4136bd7', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '8c98c697edcd4eed3cace93a085c4b539dd486c5' })), h(GuxFormFieldError, { key: '05c226f6cb719b8d9101114dfa46608d827d600f', show: this.hasError }, h("slot", { key: 'd0cf4cce0b8f158ee334552bcca07746d01de98e', name: "error" })), h(GuxFormFieldHelp, { key: 'a8f8a6efbe78e5bf88416cab4f2fdcd5287851b4', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b857156a70d1cec9207efbff4fda1a44e262ce56', name: "help" })))));
+            } }, h("slot", { key: '4fca7d269966a355fc2fd8751b06e5e40bbfa7d2' })), h(GuxFormFieldError, { key: '81a77841c23ea807b4b4080be72e3e33036b874e', show: this.hasError }, h("slot", { key: 'bfe215d97a4ebb10c36d1c88e3ec6b0a395483e5', name: "error" })), h(GuxFormFieldHelp, { key: '3398463f4ebf6d648af038e4359fa5593ae1964d', show: !this.hasError && this.hasHelp }, h("slot", { key: '77c22b9f1015c351f9bd1ec8bb7b515b91383738', 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

@@ -105,7 +105,7 @@ export class GuxFormFieldFile {
         return `${type}-${labelPositionVariant}`;
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '800706efb32a5fc069785e68b17af6ce353cc2e9', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '061505ad88782106a3cd218fbcfd65462d61178a', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'd2e8a671d2b4758311179c996d967bec81d04e5d', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '8cd22242c1a53d632c461dcc93ea77a31d2b6e9c', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'e4ecdf92ed980fc8dd74f3812e4ea32e148e4542', name: "label-info" })), h("div", { key: 'f0bd99e4bf8c7d1d0d64f0f8bb1b00a9df8108fa', class: "gux-input-and-error-container" }, h("slot", { key: '151f007b4f7f21ee46a3ea0dd653cd6facd4c009', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'd9f70eed956e54821bb9008b932f135951373e57', show: this.hasError }, h("slot", { key: '762675f3a42171715d844475bcbedbea1413fa30', name: "error" })), h(GuxFormFieldHelp, { key: '650c387520aea7172343587f601b975bbe13a8ff', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b6eb0b7b9c44c29e38f85a483684f81c92538d32', name: "help" })))));
+        return (h(GuxFormFieldContainer, { key: 'b332159adc6c4ee6ada7e9f03b33bb4a4f390410', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8bcc9ff337c1bd08a9be8a9297aa995591f214d2', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '8bb7965a56e846f9a0e6cf3f1b1c92e204d6703b', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'ad45c2965c423367cdf58b057b2d8b9ea2b82a72', variant: this.indicatorMark, required: this.required }), h("slot", { key: '08e2fa920ffaa0b48ba279c6e34ddc8bf000a53e', name: "label-info" })), h("div", { key: '1593256c7e719413751798bb997b2b47a559dda6', class: "gux-input-and-error-container" }, h("slot", { key: 'b88b29a2b252658dbecb34a0cff3f5934a00b810', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: 'ba275152daa1f92884dd719c173826d9f85db4ef', show: this.hasError }, h("slot", { key: '427d887d9f00f91cf2de1f315db158695ca7ba66', name: "error" })), h(GuxFormFieldHelp, { key: '77c2dc2ee4392bb73d6f3db9c3b630f1340ff05c', show: !this.hasError && this.hasHelp }, h("slot", { key: 'a3acd59c02593d0292c8b3907b7e341c2009a8c5', 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-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: '7b4586249fb2b75a920744514d7431fa3cc0a815', class: {
+        return (h("div", { key: '00990d1ebf3b321209e6c62f45f15cf486485ba2', class: {
                 'gux-file-list-item': true,
                 [`gux-${this.status}`]: true,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '5cea930f837fd6a900c811c27fafe955a8532cc7', class: "gux-info" }, h("gux-truncate", { key: '93bfd717b2a5e39f01eb3f8a8ba36f9fa458b072' }, h("span", { key: 'c39f2eb0bf67c1a93946a3ec5b7f9288d40c001a', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
+            } }, h("div", { key: '8089b456376230aacb9ebe4009d1cd0a659d9cf4', class: "gux-info" }, h("gux-truncate", { key: 'dbfc05cb6c2741c22d087c239f03ab79ee41f473' }, h("span", { key: 'c7c59a3f0c8c9911c72bfc883bdb673c07687606', class: "gux-file-name" }, this.name)), this.renderStatusIndicator(), this.renderFileRemoveButton()), this.renderAdditionalInfo()));
     }
     renderStatusIndicator() {
         switch (this.status) {

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

@@ -94,7 +94,7 @@ export class GuxFormFieldFileBeta {
         (_c = this.multipleObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '9e9bbaec5bbd3c926e973305ec996df8adf1d9b1', labelPosition: "above" }, h(GuxFormFieldLabel, { key: '074a8887189ea9303211036f73f2d3695eda49b3', position: "above", required: this.required }, h("slot", { key: '88e8c37a8e03e160dde9dc543faf34fecae6d4f0', name: "label" }), h("gux-form-field-label-indicator", { key: 'b9b0af8ea039d0511eb0e7bfa51a044d50c094fa', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'bd40cd0bf61b433329f9b672c6d61e635fcab493', name: "label-info" })), h("div", { key: 'b408fc16579d909a809de5757c81b714a5e440b6', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: '789502c9e47879284a9928727a098666a3172206', show: this.hasHelp }, h("slot", { key: 'bffe0ae64f217682edf3e01bdfe1a6c0545805d5', name: "help" })), this.renderInputSlot(), h(GuxFormFieldError, { key: '49a5992a62e699cd1a998fe7c07689bdc4ab4940', show: this.hasError }, h("slot", { key: 'cc68b2d9bdb53022dd8e4d3250b635cbe155aa34', name: "error" })), this.renderFileList())));
+        return (h(GuxFormFieldContainer, { key: '0436c9af8c166d2eb58f513179c746964f5b20d7', labelPosition: "above" }, h(GuxFormFieldLabel, { key: 'e3e86c8aba35a07427731c7bc8dd1142c2cd1f3d', position: "above", required: this.required }, h("slot", { key: '79b4ae008d058d117dfe8bf77465c3646ef5a1c8', name: "label" }), h("gux-form-field-label-indicator", { key: 'd303918feff2a3c42a01350898765e2189b634fe', variant: this.indicatorMark, required: this.required }), h("slot", { key: '9a7b1ab0b500de60d2c331c8eb8451a8f0b661e1', name: "label-info" })), h("div", { key: '46862e36e14d6d8b2f2c734bdf4923187f4a6f06', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: 'f0bb5e0e3bb4af2c7d72405df9412a478ecb5559', show: this.hasHelp }, h("slot", { key: '11fc5aaa68b0b94cdd642db2c00749a8c2e7ee9d', name: "help" })), this.renderInputSlot(), h(GuxFormFieldError, { key: 'a324982a5daf4bfe9d4b62d6cb4b77bc6d504f92', show: this.hasError }, h("slot", { key: '171e7ccc498134dc1514618201c24aaf83dabf62', name: "error" })), this.renderFileList())));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="file"][slot="input"]');

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

@@ -106,14 +106,14 @@ export class GuxFormFieldNumber {
     }
     render() {
         const showClearButton = this.clearable && this.hasContent && !this.disabled;
-        return (h(GuxFormFieldContainer, { key: 'f8e0dfe12b4371a0e8ed1d9dcc8d7dedd0d3b481', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '1cb0ecceacecaa233238afda2c25173e75e13425', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'fcaf21db47267fb62339d9235119891d97c310a0', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2ffbef17f6ded2ce595ef667eb4bbeb4bda7f515', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'e1a91238631fb6fc8a6497a9437568e1688824bb', name: "label-info" })), h("div", { key: 'f1a4116ae6921ffc3bea4a59be85e6003d8968d5', class: "gux-input-and-error-container" }, h("div", { key: '52c7c3a5112fc46d4ed3027d9523ad5b7b3b3408', class: {
+        return (h(GuxFormFieldContainer, { key: '802e4e804c0ff63447beb64d1c3ec74641f0f9e5', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'c4a8919fa11e73bbf5a6a9f16d9c31be1ef6694b', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'b94b116930844aec239fb700792b986f0dcdfb68', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '26d03102dbeeff75be46b10437130642a3a3d1ba', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'c75977abf537734087596b45851b6ed002c3ff06', name: "label-info" })), h("div", { key: '3cd90c995d27e5ae6324e0c738a8bc57d6d06a8d', class: "gux-input-and-error-container" }, h("div", { key: '6110a08d781ff6633170b05ab86fe62d41e59042', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '48f6e9d99ae983229690d3defdef9deb3fc0774b', class: {
+            }, part: "input-section" }, h("div", { key: 'dd3ddf7fd3ff9f85ee2cd0813129da60fed14ead', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-clear': showClearButton
-            }, style: { '--gux-text-align': this.textAlign }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '56561b6989928d1c59ec3db3970f2ffc9b72314c', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: 'faa195b85f1f6dde262820f4474d1f4beab129be', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '43afd45c0e7ce0667cbdaff64e3bb6c817a901a1', show: this.hasError }, h("slot", { key: '6376e17617f4190814ef6c4f5bba6fd1a702d95b', name: "error" })), h(GuxFormFieldHelp, { key: 'a9df73f4fa893117617d4edd03f69c822907e20e', show: !this.hasError && this.hasHelp }, h("slot", { key: 'fc3c7bb473f10af851f1ff3068034b86da80b751', name: "help" })))));
+            }, style: { '--gux-text-align': this.textAlign }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '62523b10e81b47392f422bc48d6982e0407feacf', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: '8e8d305fd03f54979d67fed1fd67cee04318c958', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: 'dd4ab025eef11248369fb2d7b34f130a30c87739', show: this.hasError }, h("slot", { key: '949db9a5bac588cc3a47428e1ef2e01d4a433f4c', name: "error" })), h(GuxFormFieldHelp, { key: '46c1f0d9f2128cfedbe241551a98fddf39e5ba4e', show: !this.hasError && this.hasHelp }, h("slot", { key: '6b0eeb8d8cbfbd069e28bae2dbaf759e44cd43a3', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -98,14 +98,14 @@ export class GuxFormFieldPhone {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '39a407208d3376eff32481d80fd7cd885f8879f7', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '845c687f78775c6f6cfe24dbf267520ce19f2b46' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '7f10639eb517a75ea7460cdbd8a846ffdd75bb76', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '225815c06ff37df869c3124059338f0ab10d7aa3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'e691e8e73d381e21d327ac8ea14b0ea82ccf5710', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'aa0c807c18732462724b170feb164746affbd39d', name: "label-info" })), h("div", { key: '71747507e15078f43f045820156a2f001ae15880', class: "gux-input-and-error-container" }, h("div", { key: '30295fbb1c3219edba2424b29fe9bce9dc7a7af5', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '757cebb89a13fe36ebd2ba756dcdc6dd4973b4e9', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '1f6343bc6255556d8e38f4729cdb76d003e7d4ee' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'c921c0f1f61ad5ae9c406dadbca51873729604a8', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '1da746dc51d15b046edabfb2c628925c036543be', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '693dc7b8456373ef7d8d1e8dd95ef4a248c37635', variant: this.indicatorMark, required: this.required }), h("slot", { key: '99451c0b8fbd56e017e709e4b0c870bc38696bf6', name: "label-info" })), h("div", { key: '06f2235a9542cab53159ad0ba61c1b71f860442d', class: "gux-input-and-error-container" }, h("div", { key: '01ccf1a88c30096d43424704f6b3024c90e0004c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'd7ae0f45b6bba0984cad385da8a9cbeaf265f158', class: {
+            } }, h("div", { key: 'ca8c3a6b3d4e0d8edba4787660248f337a07336c', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '6e8536d0a24dc0a50c756b0a9f97c2d6dc86a318' }))), h(GuxFormFieldError, { key: 'c7f083797d4f68730ef17268a3bf14155b4fbf58', show: this.hasError }, h("slot", { key: '8942b4457ec833f4e80985e812ea9d5ecaa3af69', name: "error" })), h(GuxFormFieldHelp, { key: '278ffdc44a4b6d4c335a75ed07bd726ff6e87901', show: !this.hasError && this.hasHelp }, h("slot", { key: '9ddda671e1422f1e9d952f12a5d9bb2a494b8916', name: "help" })))));
+            } }, h("slot", { key: 'bb332adf129294ced650fc25ecbd0fbe02209785' }))), h(GuxFormFieldError, { key: '0c13dfde870fc9a6f7b6d12a9057d431d488f178', show: this.hasError }, h("slot", { key: 'fd27983e9293fb8af84dcc83e0784adaac1a3f8e', name: "error" })), h(GuxFormFieldHelp, { key: '425bb54b990cb99914a225f298b5b89b3551c3d8', show: !this.hasError && this.hasHelp }, h("slot", { key: '08689d1b13d15fab6e73633fb4be9ac726838d40', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {

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

@@ -46,10 +46,10 @@ export class GuxFormFieldRadio {
         }
     }
     render() {
-        return (h(Host, { key: '67116e4eb3942df84634acee5e9ce953775a5d73', class: {
+        return (h(Host, { key: 'cc6a04d4435bfbfca304beb4769bcd330bbdf514', class: {
                 'gux-input-error': this.hasError || this.hasGroupError,
                 'gux-disabled': this.disabled
-            } }, h("div", { key: '823c51daa536c9f4d74e079e389e23ca2b329e29', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '31167f841d8682b44d28107f9f8ba4dce9d24d36', class: "gux-input-label" }, h("div", { key: 'b41e9dc80b1ceedb5e86b9d4840885e8845c6e7a', class: "gux-input" }, h("slot", { key: '7abc5d9b92c977b3fe9c2e972dac49c23ae00f17', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '753be796e830557b7c9673a4daad39276ed6f48e', class: "gux-label" }, h("slot", { key: '031994e319d909cd095ff008e95e80e28ae4429d', name: "label" }))), h("div", { key: 'ab4d5bc0a67cb0674bb42f5c68e088a7548c1b0c', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'f299e1eb9508216270b46408b2264cae2aaa44e3', show: this.hasError }, h("slot", { key: '3dc59aec8fa8d4faf52d8424e870a6ce44cbf18e', name: "error" })), h(GuxFormFieldHelp, { key: 'bfd5e8b55d213fa5296742b756874f40d884f718', show: !this.hasError && this.hasHelp }, h("slot", { key: '769394d7fed56cd0bb7de8e77df1d7637684e6c0', name: "help" }))))));
+            } }, h("div", { key: '4ae84c4e5d60358eb997f129b8c088a1f0ae5f10', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'd942e12836b2bc5ab4c204cf6213eb842dd92fbf', class: "gux-input-label" }, h("div", { key: 'd1657d6c7fa5aca36d25787c99ff7c9ce15f2750', class: "gux-input" }, h("slot", { key: 'eff047b0f6106620d33517a5e3bc26b06c0d9d86', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '7a4bf9ad866dd55887c8374d3b45cf0e13578fbd', class: "gux-label" }, h("slot", { key: '4e169d9f2012f3e9f783a25acb26acbd76001b7e', name: "label" }))), h("div", { key: '969e9e6130e9da8fcdcd1582aa0b561515156b05', class: "error-and-help-text" }, h(GuxFormFieldError, { key: 'cb5dd92f7334c02c7658b4d4c588b2255e95834a', show: this.hasError }, h("slot", { key: '88a2ca3252fa17b8a550f230bd2b54350f716bd7', name: "error" })), h(GuxFormFieldHelp, { key: '299d15016018ca89c22a6cb14f70147642604c18', show: !this.hasError && this.hasHelp }, h("slot", { key: 'da2c41a1dc738427a769ae79af28f4063a26cb16', name: "help" }))))));
     }
     setInput() {
         this.input = getSlottedInput(this.root, 'input[type="radio"][slot="input"]');

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

@@ -124,8 +124,8 @@ export class GuxFormFieldRadioGroupBeta {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '1dddf22be29f710fca6ba6ce98b0dbe1faf032f9', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '14f39be31f723aa8d45addf90e70361e1473a8ca' }, (_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: 'e1b406b2f4641ff77792d3379cbedabad581cec2', position: "above", required: this.required }, h("slot", { key: '822237035b64c334efc7a3949ef079b64653142c', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'bc3ea838afc780927e61b23b85240da795c9d512', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1ab538015e21dec0a12be8006097f259e96c87dc', name: "group-label-info" })), h("slot", { key: 'db77e8d6c5af8a3e1bbca49449fd250604682a49' }), h(GuxFormFieldError, { key: '4e92f44b08b08733bfa61ab18b1e8a5422c9dcd1', show: this.hasGroupError }, h("slot", { key: '0b2846006c3eb88ae795ffa7bdf46fe19e7838fe', name: "group-error" })), h(GuxFormFieldHelp, { key: 'e883b50237c419f86fd9bded37bc8facb4ed995c', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: 'b778e4b03942129d6b5670707f261a1ceb428017', name: "group-help" }))));
+        return (h(GuxFormFieldFieldsetContainer, { key: '064878acc06694359eac83ea971398e7dde5eca6', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: '45cac8e655a3879c2e413c483fe3a842b15569d2' }, (_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: '02983c33307a2e495bbfbc13e4b9c5a95a70c9eb', position: "above", required: this.required }, h("slot", { key: '6115a27910af173207d57d4d19e27dbc6d0a762e', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '28a5d2eb175c842367d1bb2dc1e22e9d628d08d2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '074821371b9fbb2fc62c57d6877a213292174b36', name: "group-label-info" })), h("slot", { key: 'ea9d5891081645fc731ef2e02ffcf0d6d5351cdb' }), h(GuxFormFieldError, { key: '1941202beb7c274ffc6aa5e4b0a5da768c225fdc', show: this.hasGroupError }, h("slot", { key: '84bc65865c84649fd31ecf7fcf313f8d99295edc', name: "group-error" })), h(GuxFormFieldHelp, { key: 'e6817262317f6cfc5ee06bd57c37f0ecab3baf82', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '95adb1fbec549329e2478e8375430ef752395f49', 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-range/gux-form-field-range.js

@@ -114,9 +114,9 @@ export class GuxFormFieldRange {
         clearInterval(this.valueWatcherId);
     }
     render() {
-        return (h(Host, { key: 'a6f22a9e582ec638d9f6309313c920356e1bb630', class: {
+        return (h(Host, { key: '9619f39516089dec1af3add943c647616d6a206c', class: {
                 'gux-active': this.active
-            } }, h(GuxFormFieldContainer, { key: '160c53d5399debe101c82e188b5c46f47b84cce1', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '4527048ac90fb4442efd0d1073c682bd03ca6461', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'f2da62566c5ba9a271d9ff0d671d6dbed37f88a3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '6f57048aee9b0389a4cdb96b007d27511eac1fe5', variant: this.indicatorMark, required: this.required }), h("slot", { key: '659d2f15e5914c8b257f61fce0945c0a750de459', name: "label-info" })), h("div", { key: '3d6c2f68312721c4e3a79bea2d76c9a123812241', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '380b1076a454b286534d3b9a1d687fe59df10e3c', show: this.hasError }, h("slot", { key: 'c4e0bd4ab15ac54623ca8f7295e590b717c3a5e8', name: "error" })), h(GuxFormFieldHelp, { key: '032ad62e730d205a65a05d952202cb42912cd304', show: !this.hasError && this.hasHelp }, h("slot", { key: '224729f7c5c00f411b7348ce3d591fa84ff2a893', name: "help" }))))));
+            } }, h(GuxFormFieldContainer, { key: '55bb9b7123d8b56d82ed16ec936bb8c822065e90', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'cf035065a70bf185c39838e54458d8f2fd8e7a4b', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '2376af0a20104ab59db2df3188ecc96267cf777b', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'abb34b53fd55306a49d1ee1c47714cbbaee443f8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '23bd81b67c8621ae098f7e653abd0ef7dede782a', name: "label-info" })), h("div", { key: '70a9ad941f868cd1fdaf6376d287d6854380dfc5', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '2f4d79036c7b295b1f74b78701534a4a2345a8f2', show: this.hasError }, h("slot", { key: 'fd856f1a5e020881ce54473a1fb67ecb7d4949f2', name: "error" })), h(GuxFormFieldHelp, { key: '485ce0bf3a37dba85b7413b8ca556a7d607186da', show: !this.hasError && this.hasHelp }, h("slot", { key: 'adfc74111011054ddb56c07b1c9fed6fc82a5b19', name: "help" }))))));
     }
     get variant() {
         return this.labelPosition ? this.labelPosition.toLowerCase() : 'none';

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

@@ -99,13 +99,13 @@ export class GuxFormFieldSearch {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '6507ce14649f45316af15c20184d610b5cfba20a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '87cd402400bb26ea4ce621d0898dee78f644d6f7', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '4913517e08d245dc3e2ff4ec3de1b3ec675c5507', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '22b5fa6aefd1185ae0bede4e8b9457ab3eee5193', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1415a0d73398c3aee5ab10c5e1cba8bbe2f43d57', name: "label-info" })), h("div", { key: '4d1a634b508b4891c6c977d047af50e0667977d7', class: "gux-input-and-error-container" }, h("div", { key: '1b5e492b7f653b0bec71247ffd83678b7d46d861', class: {
+        return (h(GuxFormFieldContainer, { key: '29b59df9fb4b700ab144d7d5a4f4751b76985ff8', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '63121bf73a0059cd543e1cfc436e0f9cdee8aa69', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'cd413ade3e1583cdb46d46890d4fba8a4a2f515f', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '800eb4bf8c204e54891270e5c10d43cf74f09767', variant: this.indicatorMark, required: this.required }), h("slot", { key: '4ecd777e2c5efcb0ffec0477c033cc677393b9aa', name: "label-info" })), h("div", { key: 'a410526dfb1af30c9195764509237e6450433c8f', class: "gux-input-and-error-container" }, h("div", { key: '197e1a1b08e4570bf32899de7f22ce1e03c1d86d', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '8b97da4a7c0de0954934555426d50de4c5a031a5', class: {
+            } }, h("div", { key: 'b6fee2f89c0ef01aada923cc56619f34080fa086', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: 'b38376b0f79e187a38501230dee96ca0bb4cea6f', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), h("slot", { key: 'd98ce658d611bad649645350bd44b13f7a37d49b', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '3cb5ce32805749636cbf5334d45884635f0e1e26', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: 'bccad44237fe2e71f50197c1a55f89736a8621b1', show: this.hasError }, h("slot", { key: '0a62fba69aae92493020a49636315b9ad076b858', name: "error" })), h(GuxFormFieldHelp, { key: '263c386c65e8dd1705e0ccafd0b71487802b09d1', show: !this.hasError && this.hasHelp }, h("slot", { key: '6507f8559f672d99bfc75d92a3d843a44397e13e', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("gux-icon", { key: '1bb545531deb946096774175558d26741f4fa120', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), h("slot", { key: '65a20e02bd472bf21992854b13300faa9e5d2f64', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: '44d426c7a0dd4c8541c1c1308f63a4ac26163ec6', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '0366df7203d470467e0df99a8f13d43bbf8f730e', show: this.hasError }, h("slot", { key: '127b81417379054338d15a2fc3bec7078409cb8d', name: "error" })), h(GuxFormFieldHelp, { key: '582b4031ea679ecfc197fbf289c466b290b63ac2', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b4fa4f8f444899782adf53188027690693f0bf79', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -89,13 +89,13 @@ export class GuxFormFieldSelect {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '95b1307ae83899f5978ddaf34054191201f66c51', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'db8a4a35beb1dd0c413c35bc62cc2194222dddd7', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'a805817a5220c93d18d62a7f3adb9ab56150f398', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '419d709c54c8228ff85d4f684c013098a6c16744', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b1344f130052784e29dac48241b1e895e14cc6e3', name: "label-info" })), h("div", { key: 'bc55fa3bdd47cb7a0d76dad4fc15c62fab2fe1ad', class: "gux-input-and-error-container" }, h("div", { key: 'a04f7cedf8ae05aef94cbe64747c5ddcf750b401', class: {
+        return (h(GuxFormFieldContainer, { key: '28357f6d18b35cbe1b62ec9d7e02ef04a822ab68', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'a2b5bde275327e7ca88299319ffa1cee6777c9d0', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '01de425157db781a55ace8168c312a9285416fd7', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9ebf52c54223194f1014bc1a70041d6365909fb7', variant: this.indicatorMark, required: this.required }), h("slot", { key: '1695b0d4e9c12042c63ff381d57ba737f8f749c3', name: "label-info" })), h("div", { key: '203c55784147e1dca931abdbf7d2729bab1b4e84', class: "gux-input-and-error-container" }, h("div", { key: '584c2abb9210b783c5a4893b15df94787f53970c', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '2730d639d0f62854440ee43a2b0761abfbdf6c92', class: {
+            } }, h("div", { key: '95e98d853744d4516c0f40e191bd805e19b05c09', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'fd0ca6b699de87bced903bb678a562b38b49fe01', name: "input" }), h("gux-icon", { key: '0db4a6a9f4b387f1ca366a6dd164cb5ccb751bf0', "icon-name": "custom/chevron-down-small-regular", decorative: true, size: "small" }))), h(GuxFormFieldError, { key: 'f2b6f167158037f6027790a94a2b1d439175f009', show: this.hasError }, h("slot", { key: '0014171582ed20fdaa79d498526307d6bff2f993', name: "error" })), h(GuxFormFieldHelp, { key: 'ea68634f4529ace457f236ccd3d296aa129a020a', show: !this.hasError && this.hasHelp }, h("slot", { key: '04f367c56b52dcda0dcc439b721366ab60e4f1c5', name: "help" })))));
+            } }, h("slot", { key: '301cf81dc4e152195be4015fb6ce2b13c56dcabd', name: "input" }), h("gux-icon", { key: '0b6e4b26b58f5cc1cc44af0d5d46096651db7c14', "icon-name": "custom/chevron-down-small-regular", decorative: true, size: "small" }))), h(GuxFormFieldError, { key: '895fce78e62929770b6468333cf22eff18bb5d6e', show: this.hasError }, h("slot", { key: '12aef346f03b6ba72d31614155f2f8fc6f81f98e', name: "error" })), h(GuxFormFieldHelp, { key: 'ed9fc46e8ce3809944a5671796bac3cb4026c32c', show: !this.hasError && this.hasHelp }, h("slot", { key: '37ae1c1d8e94ebae17cb419fc9920c3bb6f8a2a7', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition

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

@@ -93,12 +93,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '9d4a14eecf131a8949928deb7d1341b8fd7aa6cb', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '8f3f9aad9aaf77e13964916b6b72270f0dcbd1a4', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '6ae871001183b1eb908a2505bc4f94445ed87711', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '9c5b545896d669cf19f0a7c738076f555c3a4517', variant: this.indicatorMark, required: this.required }), h("slot", { key: '9a3e6985da7354c2e73e0ab8dec2e93c3eba6b10', name: "label-info" })), h("div", { key: 'ef9a4d8eb3ba37b9bba43cf7bef3c85688662bde', class: "gux-input-and-error-container" }, h("div", { key: '24f5b080cd8efba1885482ef2b94d6ca2c1f5c38', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: '2a365f9b1d447674235bd9ffddf98967d5b8fae4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '49a6b8ee2a03c41c743e7fd2d2e8e5d5f4bc47d8', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '8cc074b8079ac81b2b98a4859fe90a86bdcb21c2', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '61a95740d7664c80eba7efd5311ff6f1e5b1a80c', variant: this.indicatorMark, required: this.required }), h("slot", { key: '987228befabf0916554deca27d065d7585495ab6', name: "label-info" })), h("div", { key: '19302986d05d9a4d6ef58488861954c32d33d0e0', class: "gux-input-and-error-container" }, h("div", { key: 'bae0c384922fae381e7321bf5daccdd9b30b5215', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: 'bbba06d3e1c30eff82c73f7639f7b804e1e4aa30', name: "input" })), h(GuxFormFieldError, { key: 'b258457525950e755e23c165cc5d60ef6e1dc9ee', show: this.hasError }, h("slot", { key: 'faf677c38681fa0dcabf911680d48027bde696b4', name: "error" })), h(GuxFormFieldHelp, { key: 'b74295df0254d41d8dbfe8814316c9994ed4144a', show: !this.hasError && this.hasHelp }, h("slot", { key: '13648cef817f3c5104d6c13fb0648570aa9e7c0f', name: "help" })))));
+            } }, h("slot", { key: 'be421f029fede53fb56e2625ddbc155a85a383b1', name: "input" })), h(GuxFormFieldError, { key: '7539f848c1efc9ed993f227ab6bd4309040746af', show: this.hasError }, h("slot", { key: 'c93372c511eeb2c8461f6241c7c2a76f6d11bfca', name: "error" })), h(GuxFormFieldHelp, { key: '90359ce1f49f6f181f7fe635afba6ff2d53c260c', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b5ec14693a86c09e7638fe7881bb048cf2fa8dd3', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition