genesys-spark-components 4.198.0 → 4.199.1

package/dist/collection/components/beta/gux-tree-multi/gux-leaf-multi/gux-leaf-multi.css

@@ -58,6 +58,62 @@
   display: flex;
   align-items: center;
 }
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox] {
+  display: inline-grid;
+  inline-size: var(--gse-ui-checkbox-icon-width);
+  block-size: var(--gse-ui-checkbox-icon-height);
+  margin: 0;
+  vertical-align: middle;
+  text-align: center;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+  border: 0;
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]::before {
+  grid-area: 1/1;
+  content: "";
+  border-radius: 15%;
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:focus-visible {
+  outline: var(--gse-ui-checkbox-focus-border-width) var(--gse-ui-checkbox-focus-border-style) var(--gse-ui-checkbox-focus-border-color);
+  outline-offset: var(--gse-ui-checkbox-focus-offset);
+  border-radius: var(--gse-ui-checkbox-focus-borderRadiusSmall);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:not(:checked)::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-default-unselectedForegroundColor);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:not(:checked):not(:disabled):not(:indeterminate):hover::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M13.7143 0C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143ZM13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:checked::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-default-selectedForegroundColor);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:checked:not(:disabled):hover::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M2.28571 0C1.025 0 0 1.025 0 2.28571V13.7143C0 14.975 1.025 16 2.28571 16H13.7143C14.975 16 16 14.975 16 13.7143V2.28571C16 1.025 14.975 0 13.7143 0H2.28571ZM12.0357 6.32143L7.46429 10.8929C7.12857 11.2286 6.58571 11.2286 6.25357 10.8929L3.96786 8.60714C3.63214 8.27143 3.63214 7.72857 3.96786 7.39643C4.30357 7.06429 4.84643 7.06071 5.17857 7.39643L6.85714 9.075L10.8214 5.10714C11.1571 4.77143 11.7 4.77143 12.0321 5.10714C12.3643 5.44286 12.3679 5.98571 12.0321 6.31786L12.0357 6.32143Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:indeterminate::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z'/%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-default-selectedForegroundColor);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:not(:disabled):indeterminate:hover::before {
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' %3E%3Cpath d='M11.1429 7.14286C11.6179 7.14286 12 7.525 12 8C12 8.475 11.6179 8.85714 11.1429 8.85714H4.85714C4.38214 8.85714 4 8.475 4 8C4 7.525 4.38214 7.14286 4.85714 7.14286H11.1429ZM0 2.28571C0 1.02321 1.02321 0 2.28571 0H13.7143C14.975 0 16 1.02321 16 2.28571V13.7143C16 14.975 14.975 16 13.7143 16H2.28571C1.02321 16 0 14.975 0 13.7143V2.28571ZM1.71429 2.28571V13.7143C1.71429 14.0286 1.97 14.2857 2.28571 14.2857H13.7143C14.0286 14.2857 14.2857 14.0286 14.2857 13.7143V2.28571C14.2857 1.97 14.0286 1.71429 13.7143 1.71429H2.28571C1.97 1.71429 1.71429 1.97 1.71429 2.28571Z' /%3E%3C/svg%3E");
+  background: var(--gse-ui-checkbox-icon-hover-foregroundColor);
+}
+.gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-checkbox-container input[type=checkbox]:disabled::before {
+  cursor: not-allowed;
+}
 .gux-wrapper .gux-node .gux-tree-item .gux-selection-target .gux-icon {
   display: flex;
   align-items: center;

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

@@ -17,6 +17,22 @@
   border-block-start: 2px solid transparent;
   border-block-end: 2px solid transparent;
 }
+.gux-container.gux-parent-reordering {
+  cursor: pointer;
+}
+.gux-container.gux-parent-reordering .gux-reorder {
+  cursor: pointer;
+}
+.gux-container.gux-parent-reordering:hover {
+  border-block-end-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-drop-borderColor);
+}
+.gux-container gux-icon {
+  border-radius: var(--gse-ui-dataTableItems-editColumn-editColumnItem-editColumnIcon-borderRadius);
+}
+.gux-container:hover gux-icon {
+  color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-hover-foregroundColor);
+  background-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-hover-backgroundColor);
+}
 .gux-container.gux-drop-above {
   border-block-start-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-drop-borderColor);
 }
@@ -24,6 +40,7 @@
   border-block-end-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-drop-borderColor);
 }
 .gux-container.gux-dragging {
+  cursor: grabbing;
   border-block-start-color: transparent;
   border-block-end-color: transparent;
   opacity: 0.4;
@@ -34,22 +51,27 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
+  inline-size: var(--gse-ui-dataTableItems-editColumn-editColumnItem-editColumnIcon-width);
+  block-size: var(--gse-ui-dataTableItems-editColumn-editColumnItem-editColumnIcon-height);
   color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-foregroundColor);
   cursor: grab;
-  border-radius: 4px;
+  border-radius: var(--gse-ui-dataTableItems-editColumn-editColumnItem-editColumnIcon-borderRadius);
+}
+.gux-container .gux-reorder.gux-reordering {
+  color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-active-foregroundColor);
+  background-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-active-backgroundColor);
 }
 .gux-container .gux-reorder:active {
   pointer-events: none;
   cursor: grabbing !important;
 }
 .gux-container .gux-reorder:active gux-icon, .gux-container .gux-reorder:focus-visible gux-icon {
-  color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-active-foregroundColor);
+  color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-active-foregroundColor);
+  background-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-active-backgroundColor);
 }
 .gux-container .gux-reorder:hover gux-icon {
-  color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-hover-foregroundColor);
-}
-.gux-container .gux-reorder:hover, .gux-container .gux-reorder:focus-visible {
-  outline: var(--gse-semantic-focusOutline-sm-borderWidth) solid var(--gse-semantic-border-focus);
+  color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-hover-foregroundColor);
+  background-color: var(--gse-ui-dataTableItems-editColumn-editColumnItem-columnItemIcon-hover-backgroundColor);
 }
 .gux-container .gux-select {
   position: relative;

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) {