genesys-spark-components 4.199.0 → 4.199.2

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: '0bb8e7cbdb444f9121f835953d336706ee32c851', draggable: "true", onMouseUp: event => this.onMouseUp(event) }, h("div", { key: 'a66ed565c6ec89e205eff0dbb19064f0d8d650fd', 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: '4f3626a007b2759c49570c392db4703faf08d2b9', 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: '4f74a4523f7bc606962ceaf55c3e71d2f49c43bb', "icon-name": "fa/grip-vertical-solid", decorative: true, size: "small" }), h("span", { key: 'd5078724571fdc889289d481d2ee7af72ad1837a', class: "gux-sr-only" }, this.i18n('activateReordering', { columnName: this.text }))), h("div", { key: 'b886cdbe68f7272fc856179b9795d89ea1765589', class: "gux-select" }, h("slot", { key: 'f38859d5960bd7d75ecba7f3287b45824ef83da9', onSlotchange: () => this.onSlotChange() }), h("gux-text-highlight", { key: '6867f4c085305555e914538bf5d7201a945cc305', 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: '9180140ef650eee47d235354b6033767e75e1509', class: { 'gux-reordering': isReordering } }, h("div", { key: 'fa0f8f4d88bf8d44f01918febf4961ef9ff59bd8', class: "gux-container" }, h("div", { key: '270743e0cb67516a1243dcaa26e835affdcbfa3f', class: "gux-sr-only", "aria-live": "polite" }, `${this.highlightResults.matchCount} ${this.i18n('searchResults')}`), h("div", { key: '4f20f66f0cec7fe077548e0ac24ba3f0253483c7', class: "gux-search" }, h("gux-content-search", { key: '3566d4d735dd6e4e506e3ee843d2b6d84b99a974', "match-count": this.highlightResults.matchCount, "current-match": this.highlightResults.currentMatch, onGuxcurrentmatchchanged: event => this.onGuxCurrentMatchChanged(event) }, h("input", { key: 'd3dd6ac8602b65a8fd1a61dc988cf4120ae97012', type: "search", placeholder: this.i18n('search'), onInput: () => this.onSearchInput(), ref: el => (this.searchElement = el) }))), h("div", { key: '2c76cde8312cf987062e63a85a66b1a6b150fd8b', class: "gux-select" }, h("gux-form-field-checkbox", { key: '9e263ce9d3b943c22ae8a253a9dadf7e090a2001' }, h("input", { key: '0e36f7d018153f2663a81041e9762958988e0600', slot: "input", type: "checkbox", ref: el => (this.mainCheckboxElement = el), onChange: () => this.onMainCheckboxChange() }), h("label", { key: '3a9000d7e24b67ea0e72a9ac9c24edd8afc458fc', slot: "label" }, this.renderSelectedColumnCount()))), h("div", { key: '814ae37aa105a28c07e0a593a9cbbcce596d7569', class: "gux-list", onChange: () => this.onListChange() }, h("slot", { key: '55f6147bc98fc223f1cda73697bc49ca8ee6eaee', onSlotchange: () => this.onSlotChange() })), h("gux-announce-beta", { key: '6fb042630df98775f6f621549d6ceacbef1ca421', 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: '0322d498380bf4142aae58c002d6e255c10b0d2a', 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: '544452f5dade815dae33c8a750308f67ce5d7613', class: "gux-search-icon" }, h("gux-icon", { key: 'ee0d4eff05cbbfeb22b6c423e4f9a5fd46f90652', size: "small", decorative: true, "icon-name": "fa/magnifying-glass-regular" })), h("slot", { key: '06903a8957fbf65f3d72a55edeccbc6d4ff809bd' }), 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: '81836c77be4c08e8a8064e5496b3a93d176bca94' }, h("gux-popup", { key: 'd1c0641894fa09c885f4081ef11c164d99a3173a', placement: this.placement, expanded: this.isOpen, offset: parsePxValue(uiTokens.dropdown['gap']), "exceed-target-width": true }, h("div", { key: '9c38589ae3493ac7213833d543d5358020ba3c99', slot: "target", class: "gux-button-container" }, h("gux-button-slot", { key: 'c1d9f87227a982aaff25c8039dd957c88f7e9445', accent: "ghost" }, h("button", { key: '935c5b453ddb4276f4cf33e704c2724dbd39b7f0', 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: '84bdd613ee3c688b7581c3945e6a9f813a424432' }, this.screenreaderText ||
+            this.i18n('contextMenuScreenreaderText')), h("gux-icon", { key: 'c51448b1ca8fc4cc549650de048955324163784a', "icon-name": "fa/ellipsis-vertical-regular", size: "small", decorative: true })))), h("div", { key: 'b2c8fac0ec29de0112892fb635a4d3d1dc67ce80', slot: "popup", class: "gux-list-container" }, h("gux-list", { key: 'd0321ba183384455f360acdabb28cd9131572aea', onClick: e => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '1cadfb8651d374fce5f451497fd1426e229959e6' }))))));
     }
     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: '47ceb34ec5e2f59f5248519ad89d942776dd86c9', class: "gux-copy-to-clipboard-wrapper", onClick: this.onCopyToClipboard.bind(this), "aria-label": getSlotTextContent(this.root, 'content') }, h("div", { key: '0be72c41a00e3e16ebde6533408b460a4d3d803b', class: "gux-copy-content" }, h("slot", { key: '93aa1cf91d2321ba0aed46bbb97d1bc7ee787738', name: "content" }), h("gux-icon", { key: 'd90d9cb3efdc100692d468fa69e464026cc126f4', "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: 'e2d2b71084dc77ee917998b8360c0339acf85a01', 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: 'b7d20fcf144d85a77a59cd9e455de8be64a8ce8a', accent: "ghost", class: {
+        return (h("gux-button-slot", { key: '17d54102c6cd3b5be24e494dbb0e89a2828765cc', accent: "ghost", class: {
                 'gux-inherit': this.position == 'inherit',
                 'gux-dismiss-small': this.size == 'small'
-            } }, h("button", { key: '8e0c9014d7277227156b8a7512d1d6acf93fef89', type: "button", title: this.i18n('dismiss') }, h("div", { key: 'f6c1e74884c6c924f945ad274973a9553d937b11', class: "gux-icon-container" }, h("gux-icon", { key: 'c61ce0393b4827a3526cf0980fc8b6f48d1c9d3b', "icon-name": "fa/xmark-large-regular", decorative: true, size: "small" })))));
+            } }, h("button", { key: '7093ecf3f2e2ce68544f133aea9da1b22180d99e', type: "button", title: this.i18n('dismiss') }, h("div", { key: 'ce3aff7c04e157f98f239a0701e0b0f506fad86b', class: "gux-icon-container" }, h("gux-icon", { key: 'ba4c84e62cee99acaa05c5ca50868111d9b8791a', "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.css

@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dropdown-gap);
   place-content: stretch center;
   align-items: center;
   inline-size: 100%;

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

@@ -368,7 +368,7 @@ export class GuxDropdown {
         }
     }
     render() {
-        return (h("gux-popup", { key: 'e4781f02c135aac0d306241af4ff14ee576ef4b2', 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: '3adac9cd14b03a5770ebdaf54dd80ce3da53ca1f', 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

@@ -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: 'a114a67321b30ec5eb27cad0b4b583cbf6040aec', 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.css

@@ -23,6 +23,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
+  gap: var(--gse-ui-dropdown-gap);
   place-content: stretch center;
   align-items: center;
   inline-size: 100%;

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: 'fbbbae3e6294e77e5c78212216d2c74db5c066f7', class: "gux-dropdown-container" }, h("gux-popup", { key: 'cf9e2b30bd0267b8206969c6c6b3079959a5adae', 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: '5b2376413d40db8954a5f78630de79887d3e396c', tabIndex: 0, "aria-haspopup": "true" }, h("gux-announce-beta", { key: 'faafe424e69a4f34df4bd71bffa5268897667b61', ref: el => (this.announceElement = el) }), h("span", { key: '2c02399a516a80d0ba4f0b384b9983af38368f8b', ref: el => (this.targetElement = el) }, h("slot", { key: '1a60f90751608ae9838fcf6ae398ee1de2166f00', name: "target" })), h("div", { key: '0687d6e5959748eab76473146c5721f59b1e5ee7', 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: '995da3807eda87a9a6d123b13fcd6bd97a9beeb6', ref: (el) => (this.arrowElement = el), class: "gux-arrow" }, h("div", { key: 'e4a91985cf899690a720f9386cb7cfa051e0ee96', class: "gux-arrow-caret" })), h("slot", { key: '3cd07ce856ecaedfb774f0102d7f1c5c98d3c8a4', 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: '7e623f4cfc8c062af7e400cc3f7b35d3c5a56ba8', type: "button", class: "gux-menu-option-button", "aria-haspopup": "false", tabIndex: -1, ref: el => (this.buttonElement = el) }, h("span", { key: 'e496c6c90aaf58b9fc41368a8d1240f7e959f571', class: "gux-menu-option-button-text" }, h("slot", { key: '2967b0a4be4ff7134cef373c696299d423dfac05' }))));
     }
     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: 'a08c2ceb0b9d5b96c3f3754df88c314c54f8dc80', role: "menu" }, h("slot", { key: 'ba0ec3424e9866cfc72cbbc62ef60a405a54651e' })));
     }
     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: '73a0569705273527edaa472e8d3ca5ae81b338b4' }, h("button", { key: 'ce927c57f2cead342640c0721cf5d7e5f6c2c7d5', 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: '656c8e2916b3e14d0a19cf1bab1f80c230df47a3', class: "gux-submenu-button-text" }, this.label), h("gux-icon", { key: '46decffeaa2039497d6273cb99add54445c53c98', class: "gux-submenu-open-icon", "icon-name": "custom/chevron-right-small-regular", decorative: true, size: "small" })), h("div", { key: 'e757a658cdd2ad9c6a91cc010dfd8884305031bc', 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: '9d42563892b59960ab9f72fa80da773813598435', role: "menu", class: "gux-submenu-content", ref: el => (this.submenuContentElement = el) }, h("slot", { key: 'f9a42aaea9caed6302df9f9efed66eaa2339fb7d' })))));
     }
     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: 'fb7667a4463c699f3e73d3b19ce7ed8793526705', 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: 'f5ccb8ab97b7eae908067a589383a7fa881926d9', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: '92dc792e00087d796542d3018f0fde710e26edfb', class: "gux-input-label" }, h("div", { key: 'dac18e9f39ee86ad3823fd97b3379c43d09f47ea', class: "gux-input" }, h("slot", { key: 'decfc141738913059d30a0b9c82de9c61befcd4d', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: '07ccac1d64fc67ec4a85647d290bab90e9cdc07c', class: `gux-label-${this.labelPosition}`, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'bedd05155c5de9a2b6a14682ee8ad59e381b69e9', name: "label" }))), h("div", { key: 'c4ccc766c03dab282e00997d62ab221d753b1754', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '7cf7ba239d21281fb8b1fa7a28291194dc13022a', show: this.hasError }, h("slot", { key: '97bd4618a18760668146ce4a0616161a2742409b', name: "error" })), h(GuxFormFieldHelp, { key: '7903ba4214b3daab85f7d3344582cac557ee1641', show: !this.hasError && this.hasHelp }, h("slot", { key: 'd692786ed768ceb1ee76b1617dab2bc21e0b3830', 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: '334076bd823a3b5140cc43883651cedf28f2f822', labelPosition: "above" }, h(GuxFormFieldScreenreaderLabel, { key: '728fc91f5407db29a4cb9ea16c8f9131529ff890' }, (_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: 'dac5f516da5e894e64d34c94327ba7cb7ac6097d', position: "above", required: this.required }, h("slot", { key: '964570bb5e721990e4435e9bcb55885bf878b5ef', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'f453c38418fca06d897bdbbab31a0bff2e796609', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8b4448bd354a82092af7b1f0362c9df2b45f5281', name: "group-label-info" })), h("slot", { key: '6a8d8db7d72f68b6189bc005787d6b378b6f02ee', onSlotchange: () => this.setupNestedCheckboxes(), name: "group-checkbox" }), h("slot", { key: 'b63701e72580fbe9a9bd1dd8705d22f125682669', onSlotchange: () => this.updateMainCheckbox() }), h(GuxFormFieldError, { key: 'c36ef89456b9f5c6fe5a88d4c24684a8ff06e301', show: this.hasGroupError }, h("slot", { key: '89334f9b85c25bea501140c1fe0102a126f66c0b', name: "group-error" })), h(GuxFormFieldHelp, { key: '76330fd2a2164c89eb39b9472d3a9602faea8670', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '5ceafc970a9b5ed3339bb6fa04cb0b33c0903804', 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: 'f6e7d7b1d7ccbfa8087781d93ce64b9da53f02c3', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'b162bf4dbb2543b9df9d19e7c5c3f1a3b4df1088', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'ca8607d663e927b1170e5253af4dbab440b82b45', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '4d3635b95c062dbacbdd2dfa44b86d178abb84ef', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b7775bf07e9b5437f0450abe8e3424e3656aac72', name: "label-info" })), h("div", { key: '4417c4980e93577d3fc0f5b22eb1df92ebe5d457', class: "gux-input-and-error-container" }, h("div", { key: '51a8640109fb27494844e4a8239c37d19727a910', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'c9536bf3c1d2b013a99fbe926ffaa23e105c658e', class: {
+            } }, h("div", { key: '8cfdfdb314b57acef65e2a2f3abbf75476cb3832', 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: '33297c844d90b74c7a396b144a898233313566b3', name: "input", onSlotchange: () => this.setInput() }))), h(GuxFormFieldError, { key: 'b5c589d33b9b8b22c531708f000609a6d24baaa3', show: this.hasError }, h("slot", { key: 'c45496e6f3c23011feeeb63d90fc08b4248fa5c4', name: "error" })), h(GuxFormFieldHelp, { key: 'e4a420035ff6ad3ab0829d2b52ef547667cf7047', show: !this.hasError && this.hasHelp }, h("slot", { key: '00496872cb32b3a0ed44d580c37ec48d8b3d73dd', 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: 'b5279e6991b68c0d3788e2e4c902ae6b2cc65260', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '703dd1c91d4c7034164d4d2e92db29bd70b51b6e' }, (_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: 'bdfa6b8468dd12409a814e00cd790198c9f6b56d', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ab67908202b76f6547b4f6e4bc143d3a3b320da3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '93f93d39b1b483e12cd7890e15a47de11cfb2b2a', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'da298b1ca505d030657419b2096d59d5ed48e82e', name: "label-info" })), h("div", { key: '267ba02dac20ad18bbcc9c676d0e077ef694a245', class: "gux-input-and-error-container" }, h("div", { key: 'f94a983f649f8ae5fc37fb5ae5b101c04776b3a7', 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: 'd05393461eedda9e96354f44bf1abadb3430bc8d' })), h(GuxFormFieldError, { key: '6e287057c3e2478f0c2ccaa7ec6acdaaafdb5aae', show: this.hasError }, h("slot", { key: 'd4f0b3ac5a20231c8567413f49f25d201c7c2d6d', name: "error" })), h(GuxFormFieldHelp, { key: '3b2ed746fff8b662269be05658de25da8a666d9d', show: !this.hasError && this.hasHelp }, h("slot", { key: '9a05538df97c8af1195141000d2197242df1d129', 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: 'fcb5203150da6d16a097d3c1139b2ac45dce24a4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '848e9d993bf460ab5a528683ab6a64da46517013', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'e3a93a05c3d57d18076b775d020021d744efbba1', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '0d004bbf500984c12f35599f137c976b9da571f8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '3643a218d190d8b14fed4399c8c5d969a55f2477', name: "label-info" })), h("div", { key: '018444e358f77ad1c9a2b5e2c7d151addedf00f9', class: "gux-input-and-error-container" }, h("slot", { key: '2db769ce22592842976cf541ae61f35dc2d49612', name: "input", onSlotchange: () => this.setInput() }), h(GuxFormFieldError, { key: '65de0b91cebf616fd01fb0d72a1aed6194460aaf', show: this.hasError }, h("slot", { key: 'f9a1d3420ea4f8b65f5a55052b6a4878f79fac6e', name: "error" })), h(GuxFormFieldHelp, { key: '566ebf6959869b2953ccfcbb90609e30c64bea49', show: !this.hasError && this.hasHelp }, h("slot", { key: '5099d3f8d3b4b16f10510153e36afc36b3907a72', 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: 'db9fcf9dc789dd6fe5a74bebd6ef72e0666057d1', 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: 'a53d203206e5351d12552af8ad649ffe9baacbbe', class: "gux-info" }, h("gux-truncate", { key: 'b2c3a410891aab4a1c818c7b2448186d2c3fe2dc' }, h("span", { key: 'af6f80b9cac6a7607582f1d1c304a0794cb121f2', 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: '65a1932baf805737c18286dc72a3b7a23b80c00c', labelPosition: "above" }, h(GuxFormFieldLabel, { key: 'cde655eff45141e8ab9109c107261ab565ab82ab', position: "above", required: this.required }, h("slot", { key: 'd7dd60eaf3dd42178299085480cbf83c4d028cc6', name: "label" }), h("gux-form-field-label-indicator", { key: 'f274c7b9d3435530f3435e27a28b8aea36e839e5', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'd49ad17768c63669e986545460cdd8c26290715a', name: "label-info" })), h("div", { key: '94899fff1277f8af73e8dd20edc8dc574427c001', class: "gux-input-and-error-container" }, h(GuxFormFieldHelp, { key: 'fe62ab96fdd29138b972259d2018cc423e3dd300', show: this.hasHelp }, h("slot", { key: 'c591507d2d2766d5381ebb7afc15ca1c7cd63d9a', name: "help" })), this.renderInputSlot(), h(GuxFormFieldError, { key: '72c0bc32b52c1953a906430b2218f52a9b7bc9ef', show: this.hasError }, h("slot", { key: 'd7a37f74db27cd091539adc00645a546f3386474', 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: '1afb09a448b2cc280635470424833594aa33a436', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '7d15d6e9e056cf791c413d19a4e7593a069b4ab8', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '576ed3cd517e30895ef919e4a919753d0744fce3', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'bc80eaff5f873ef7886cbe47eb58ee257e3159e7', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'ff1f5deceff8871ce3d3f6212aa85f66f185789e', name: "label-info" })), h("div", { key: 'e4419df87fca952990ea3904a9653080e1525acd', class: "gux-input-and-error-container" }, h("div", { key: 'c7828d8c8ef6fd70d7ccf79b18c11203228c207e', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            }, part: "input-section" }, h("div", { key: '48f6e9d99ae983229690d3defdef9deb3fc0774b', class: {
+            }, part: "input-section" }, h("div", { key: '4ea301bd8363355d5a457da4382bade792e33a85', 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: '869519b5fee822675980b209f5977a97fb9cc46e', name: "input", onSlotchange: () => this.setInput() }), showClearButton && (h("gux-form-field-input-clear-button", { key: 'e06d26730668b07bc8d6540498105608675b5261', onClick: () => clearInput(this.input) }))), this.renderStepButtons(this.input, this.getI18nValue, this.disabled)), h(GuxFormFieldError, { key: '1626273042068e9fbb1aa2a34108144081aeeac7', show: this.hasError }, h("slot", { key: '564b1572c570e9d09f9328c8f8442950f2da9b74', name: "error" })), h(GuxFormFieldHelp, { key: '720c9cf71974405305f4c2f07dae379fbaaf7a02', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f9c6a63636cebb60c51878ad71b37c089e034114', 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: '53000c90b4beb4b39a5b01034c0f3fa73b396876', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '6a4254e82dd5b768633e6612ae651ed0248f4ae9' }, (_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: 'b2e2a111d921bc08b263a0fd97c81f3eacd6cc79', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '804d6889de8742cfd867a498198df4071ff9c943', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '659eec208d8e4c854dd3cfd1f9cde624f4635402', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'b5240ca888ba1d103445db25a713127b30e3d990', name: "label-info" })), h("div", { key: '3c8c7f5861a2e8a9fc1f820d3f9074d805ca8e0c', class: "gux-input-and-error-container" }, h("div", { key: 'a591e5fadd1710f309284fb0585d858312c2e49a', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: 'd7ae0f45b6bba0984cad385da8a9cbeaf265f158', class: {
+            } }, h("div", { key: '566ee4849c10818c9a995071ed7975ed1a5abaa0', 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: '11deece909da10c36cf3bdb4dfa3ca3d4c0880ff' }))), h(GuxFormFieldError, { key: 'a18267eaeb18e47e7353bfd5ef80d42b7a5dd596', show: this.hasError }, h("slot", { key: '5cc8272da81a69d381b2577012edf5ebee602cf3', name: "error" })), h(GuxFormFieldHelp, { key: '69abfbacabeedcdc63dcd752b0946811548ad25a', show: !this.hasError && this.hasHelp }, h("slot", { key: '8b79a04842832c6e85a124d6b6d6cd0f44de3c99', 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: 'b98b27ed8d0a8d5abe14ee10f142754eab52d328', 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: 'f4c9b73176c38ed3294c75265b19a1277b064483', class: "gux-form-field-container", "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'fae2731afab82056dd66d7227a5ef04ebcff72c7', class: "gux-input-label" }, h("div", { key: '2ffa9946ee945013279cdb2e22a895cfabb63e74', class: "gux-input" }, h("slot", { key: '11c8ff038e8902a597b4e9b1143eae57f4848ee3', name: "input", onSlotchange: () => this.setInput() })), h("div", { key: 'bc96caee8655129ce492044aa573211cb7312da2', class: "gux-label" }, h("slot", { key: '8591ac397a617afdb1a438081533204f84ced124', name: "label" }))), h("div", { key: '95c77f38708c1441565c055ad64e567e12814953', class: "error-and-help-text" }, h(GuxFormFieldError, { key: '3e113730b5cf959acd78485799abb036e70a0833', show: this.hasError }, h("slot", { key: '5dabb15f01b21e26dfb3f7e9a399be3bd79ba2ea', name: "error" })), h(GuxFormFieldHelp, { key: '38419e0287dd06ca1ce84c9b7a51cf207a6cbd67', show: !this.hasError && this.hasHelp }, h("slot", { key: 'f13d14dbbd145be3c8148974b74e167599d5e650', 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: 'e881bcd96cecc3c883ee4cff00d381142b6c03c7', labelPosition: "above", disabled: this.disabled }, h(GuxFormFieldScreenreaderLabel, { key: 'ce05ec0f0ef21df4e4cf477765744ad6b2696c40' }, (_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: '837fba29937dd4e4086b6385e9837e8342298bdb', position: "above", required: this.required }, h("slot", { key: '5abc8b8250fe8dc8e795250ce9009a6267a2086a', name: "group-label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c02c76d2ed257a9c07c84b5e3fc97db2274b9a45', variant: this.indicatorMark, required: this.required }), h("slot", { key: '8a6052361e00413536632f1e002ab1b524a41ff6', name: "group-label-info" })), h("slot", { key: '68edec2e6e82a5c2fdf5bad66278ab0d707e8e68' }), h(GuxFormFieldError, { key: '4a5a3698a952a0640dc56f8bc760cbffd3cd6e65', show: this.hasGroupError }, h("slot", { key: 'caed6db06b01031ae7e42cae75332dd889155198', name: "group-error" })), h(GuxFormFieldHelp, { key: '3a5075eb14843fe46c87a525bfafc2b1ef49f290', show: !this.hasGroupError && this.hasGroupHelp }, h("slot", { key: '6eda3f62aa08ee56b939a916223aa6d14fa72e93', 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: 'ab4702d8fbd679c42b62b92492fe520d15bb4ae1', 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: 'ed3c22c3a06e1be5d34b6db8c318f17160b56f34', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'c1bf9980e9061948adf39cc65341c37a836ea957', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'baf7e6ea89b65d3f35e3cc920032e47919f6f64b', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '3945354b2582627b5df484dd56a2cc8bb7790ade', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f8ae2f6f15d3b604e4443bb0569a9fae5b50b42e', name: "label-info" })), h("div", { key: '0732d11e5ba3cc3eb0a2000fc7c28514cc5d5f29', class: "gux-input-and-error-container" }, this.renderRangeInput(), h(GuxFormFieldError, { key: '5480154884dfb0ddad58bb62b8a7ab9263ffcdbf', show: this.hasError }, h("slot", { key: '14b19b68d851790426b8c96250f390eed7bfc7a2', name: "error" })), h(GuxFormFieldHelp, { key: 'b474b4c75f3a188e989116aee10cfb9035256238', show: !this.hasError && this.hasHelp }, h("slot", { key: '0696024395cb20c3f4606b0f4b94e423b4563b68', 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: '3cc20f3ef9b2640e7b15797965b122f9b06dea4b', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'f0f61cf789d1600cd34cddc21a0ae1602c13e898', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '9ce422a06e603ce31416ec0c1ba81942351c3b66', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: 'c1d022f5bffc5f18d8ebb2fd3fb6d56792759e2e', variant: this.indicatorMark, required: this.required }), h("slot", { key: '7b22ef8aabaf23f47b89fd32f8db58f72b469f7e', name: "label-info" })), h("div", { key: '7fde3d3417e1d53ed3a2d23c30b49bd53f526a47', class: "gux-input-and-error-container" }, h("div", { key: '44ed53dffef4cd0bcf90f57e7d2555384fa364bc', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '8b97da4a7c0de0954934555426d50de4c5a031a5', class: {
+            } }, h("div", { key: '46aa44f6c7e1401b8fa671be0798ab0f4067f653', 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: '532298e11fcc46ffd14d8470e4877f2050954b31', "icon-name": "fa/magnifying-glass-regular", decorative: true, size: "small" }), h("slot", { key: '3ade933bcbb71001a8851f5e7aaae3944a203535', name: "input" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { key: 'd7e2e144e858871e88644d5d32dc66d8848595ad', onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '1373603af9f884b6c4d832cc9b1337c9a3ac6af4', show: this.hasError }, h("slot", { key: 'ac0dc681cdb6fbe7ad05bacc5e223a5bff1f93c8', name: "error" })), h(GuxFormFieldHelp, { key: '17de0a427a62d9fcf55b21b023852cd0e693f673', show: !this.hasError && this.hasHelp }, h("slot", { key: '567d4ae2f8ec19b3cc5188ed2b328f92774bf957', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition