genesys-spark-components 4.199.0 → 4.199.2

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/beta/gux-tree-multi/gux-leaf-multi/gux-leaf-multi.js

@@ -41,13 +41,13 @@ export class GuxLeafMulti {
         this.root.setAttribute('aria-selected', String(this.selected));
     }
     render() {
-        return (h("div", { key: '1d121ebf8b1a8905a556a303a65aa268bd7dece4', class: {
+        return (h("div", { key: '8c63690bc7c9e9a82a904a5fb1d4d406db61ff42', class: {
                 'gux-wrapper': true,
                 'gux-compact': this.size === 'compact',
                 'gux-end': this.alignment === 'end',
                 'gux-disabled': this.disabled,
                 'gux-selected': this.selected
-            } }, h("div", { key: 'df903fc0312f2f866a6ecefeea3acaa7b02eeda1', class: "gux-node" }, h("div", { key: 'e274acbc49f5ef8913f13ce53dbcdd4dd3db7936', class: "gux-selected-bookmark" }), h("div", { key: 'bb45171dd2a5f2ea2c9bea0cd384e9b522a1a94c', class: "gux-tree-item" }, h("div", { key: '6f130a432b33f59b63cd3e56e5e867b6d9182e5a', class: "gux-selection-target" }, h("div", { key: 'c75bb66b5f2894666ffd6f99efee84ad3510ec86', class: "gux-checkbox-container" }, h("input", { key: '5081263e516f3c590b2f46946c7839297960b52f', tabIndex: -1, type: "checkbox", checked: this.selected, disabled: this.disabled, "aria-labelledby": this.labelId })), h("div", { key: 'e4e92aca17de5e84673441eb45ad7e76d95d4882', class: "gux-icon" }, h("slot", { key: '534bcfdcf96214b1cc42aff37f7132b5a3856bff', name: "icon" })), h("div", { key: '2c4c26b5723a9961d45285809902634db85af4c1', class: "gux-label", id: this.labelId }, h("slot", { key: 'f4f21b9184f86ba17760bbc9a97d53f754786d7f', name: "label" })))))));
+            } }, h("div", { key: '3b88cd9dab9b8dd96528891ed93fb62daab0df7b', class: "gux-node" }, h("div", { key: 'be64c80ea0f9d257b82223dc6afdc5b56fafbcc6', class: "gux-selected-bookmark" }), h("div", { key: 'f3e7656415154c4b45d0c57d4535c9019c92ee5a', class: "gux-tree-item" }, h("div", { key: '6e72ba862eac3b34a851625cbce1e9fe014c7952', class: "gux-selection-target" }, h("div", { key: '2d7588dc656fb0b1d5c7b6ba87f46e08d0e5296a', class: "gux-checkbox-container" }, h("input", { key: 'bf6e11812a397657a5d38a37a0ed85c924cd2304', tabIndex: -1, type: "checkbox", checked: this.selected, disabled: this.disabled, "aria-labelledby": this.labelId })), h("div", { key: 'cfb35943c5d7f1fd8034373930b956569946df46', class: "gux-icon" }, h("slot", { key: 'bcf8209f614376331fda32a1f950ba43f9ef0f5f', name: "icon" })), h("div", { key: '85043c78ec20eae39914505465d3b784bc046c73', class: "gux-label", id: this.labelId }, h("slot", { key: 'a42c0bb1b008b4bcbc893605d06d609f5e29bb0c', name: "label" })))))));
     }
     static get is() { return "gux-leaf-multi"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/beta/gux-tree-multi/gux-tree-multi.js

@@ -176,10 +176,10 @@ export class GuxTreeMulti {
         });
     }
     render() {
-        return (h(Host, { key: 'a68f7c06b4819e546e6ac9970aba64a06c09b654', class: {
+        return (h(Host, { key: '3e0ace77ec0f9c9c3307b0d293293d65646f08b1', class: {
                 'gux-compact': this.size === 'compact',
                 'gux-end': this.alignment === 'end'
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: 'dbd13e9dd86068914c3f2868217ad9901c54e2d7', onSlotchange: () => this.onDefaultSlotchange() })));
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '39b6a90fa99230d4389ab826890d14121d7eb79c', onSlotchange: () => this.onDefaultSlotchange() })));
     }
     static get is() { return "gux-tree-multi-beta"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-action-toast-legacy/gux-action-toast.js

@@ -12,7 +12,7 @@ export class GuxActionToast {
         trackComponent(this.root);
     }
     render() {
-        return (h(Host, { key: '02ba9e2e39d6cf4d91366cc1c94a3efa57a6a78e' }, h("div", { key: 'a90123a53988ddcf34ea3c7a8a35eb4c22f75eda', class: "gux-header" }, h("div", { key: '41cc6b2bdde5e4b1c38b49b5656231db0001aa0c', class: "gux-icon" }, h("slot", { key: 'a16525f1018d75cb71f6021dc929c3f34b773fe5', name: "icon" })), h("div", { key: '08640f03dec7bf0d426777318b105dd0b648410e', class: "gux-title" }, h("slot", { key: 'd805e6e51b89144fc5f2e175180d65904fe13001', name: "title" }))), h("div", { key: 'ddff58055b592f52229937d388ef02b548947f1b', class: "gux-message" }, h("slot", { key: 'e4e1ea225d03b08a87fbbf09544d5820b9ef8c84', name: "message" })), h("div", { key: '35050496b9e88ce00a6d512439e38e93fb0a6417', class: "gux-action-buttons" }, h("div", { key: '84b203ebfe08dd23039884ed0436f56eab8b287c', class: "gux-positive-button" }, h("slot", { key: '82ed742e3703812bd6e9215bd59b26c26a05f7a8', name: "positive-button" })), h("div", { key: '8dcce8e8f326ba603497e3bc4169bea9fde24a9d', class: "gux-negative-button" }, h("slot", { key: 'b1c032a8dfefc83927280ebd614205c202b0c919', name: "negative-button" })))));
+        return (h(Host, { key: '9308a050e27bce9903e52f6d9e748c0c24271cf9' }, h("div", { key: '3e8f34b4bd09367c57f231fc214237d785e8ab2c', class: "gux-header" }, h("div", { key: '75201f20b7d4ff2f05a4659ec07b5ef15e6221a5', class: "gux-icon" }, h("slot", { key: 'c2b7dd8e362a735c0919aa09ab920c2cdbc24df6', name: "icon" })), h("div", { key: '54b82c36f7436e4e4fbd657a3640f9c05e3538ab', class: "gux-title" }, h("slot", { key: 'ef0a08c5a0407c2335076aeaf85f82fa7445ea1a', name: "title" }))), h("div", { key: '0b461af268e5eedb86ae87bcf4b8e00cf166ba6d', class: "gux-message" }, h("slot", { key: '23eace734e4f5603b72cffd66ce428a7b7ecb759', name: "message" })), h("div", { key: '85631094281aae792a52b7a3afeb21ae638fbf17', class: "gux-action-buttons" }, h("div", { key: '2d6fad25497e0c08548e7a3ed22848cb8caf4b2d', class: "gux-positive-button" }, h("slot", { key: '0fe4f7ab0f23067514b2e01ef172233b8f1d4dd6', name: "positive-button" })), h("div", { key: 'cc1a339f3e5ed3452755ea14d2d4034c1b2fad80', class: "gux-negative-button" }, h("slot", { key: 'ee1260271d61457a1ea449651fdacd67b795998f', name: "negative-button" })))));
     }
     static get is() { return "gux-action-toast-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/dropdown-option/gux-dropdown-option.js

@@ -46,7 +46,7 @@ export class GuxDropdownOption {
         };
     }
     render() {
-        return (h("div", { key: 'e9ff9053df8152be8b8542f0213c1071b27341bc', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
+        return (h("div", { key: '5c0bd2d1a9438782b44b791c1c40c499d6e092c9', class: "gux-dropdown-option", title: this.text }, this.textWithHighlights()));
     }
     textWithHighlights() {
         if (!this.highlight || !this.text) {

package/dist/collection/components/legacy/gux-advanced-dropdown-legacy/gux-advanced-dropdown.js

@@ -77,9 +77,9 @@ export class GuxAdvancedDropdownLegacy {
         }
     }
     render() {
-        return (h("gux-popup", { key: '212255ac374f1cc6f87f2b133a35625d46c7d460', expanded: this.opened, disabled: this.disabled }, h("div", { key: '184142cbd759cfc2c03a22b2a1da3d4045f62d16', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: '19b0fdabd6daee87e6ae4ba37588865352aa21bf', ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { key: 'b4e553009343a7067daccc7a03f9355e9a155609', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '3a4c1e067a08ac2151fa5efaf5ee6c0b49111b3a', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: '46f841825c918de6fad086450e01b75d2752b0b9', class: "gux-icon-wrapper" }, h("gux-icon", { key: '394a86ef4d3acf2505c6b9ce171a43a945f78555', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '94cd26e44d3a76024eacd115c549f4a9d63d7a29', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'd14115a4fb40cf86856bd9bf79912a980eb7f7b9', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: 'eabf27cac1055a809c7e031e0a7ab77420145ec0', "label-position": "screenreader" }, h("label", { key: 'ac05cb9ef86db6d03db5f79b6a8c53a09c534418', slot: "label" }, this.i18n('searchAria')), h("input", { key: '6024662486892a5e47d600b532aa1d0f7bd7b575', slot: "input", type: "search", onInput: (event) => {
+        return (h("gux-popup", { key: 'eb9681015339abc16452605bcb786c0862ed4dbc', expanded: this.opened, disabled: this.disabled }, h("div", { key: '972768810d13ac516e540930baa3786d500eac98', slot: "target", class: "gux-select-field", onMouseDown: () => this.inputMouseDown() }, h("a", { key: 'a717a51201a392e879d82ce3358e335baec667e6', ref: el => (this.inputBox = el), class: "gux-select-input", "aria-labelledby": this.srLabelledby, tabindex: "0", onKeyDown: e => this.inputKeyDown(e) }, this.placeholder && !this.value && (h("span", { key: 'e19a6a2e95ac0993b436e1c2cab618209d2a467a', class: "gux-select-placeholder", title: this.placeholder }, this.placeholder)), this.value && (h("span", { key: '88308bdb065572f5fa8e70a3f0c6fa38c8fc170a', class: "gux-select-value", title: this.value }, this.value))), h("div", { key: 'f8e3315a81cc2c466455d6758aa0456353bda140', class: "gux-icon-wrapper" }, h("gux-icon", { key: 'cc440598a8eae40d90462c326023d496a84170e2', decorative: true, "icon-name": "custom/chevron-down-small-regular" }))), h("div", { key: '720e007c7f4a6a85b2a9cfc41c0dc53d6ae7f719', slot: "popup", class: "gux-advanced-dropdown-menu" }, h("div", { key: 'f8ff0dee34c152195149004e545b8a3b93f3cc65', class: "gux-dropdown-menu-container" }, h("gux-form-field-search", { key: '5ce9e8815d54f2a367f17ad7a816f64fcbf33702', "label-position": "screenreader" }, h("label", { key: 'e5fb1c1fb7a7fb4269f18ea865a74a061c2e3309', slot: "label" }, this.i18n('searchAria')), h("input", { key: '65395279f5a1d29e0e506d6106d6751ac45c114c', slot: "input", type: "search", onInput: (event) => {
                 this.handleSearchInput(event);
-            }, ref: el => (this.searchInput = el) })), h("div", { key: '297b62b2fd205337ec603fd1b87d6fe32e5332e1', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: '5b782db8e01c8ad5418690c9c78eda59375a47ba' }))))));
+            }, ref: el => (this.searchInput = el) })), h("div", { key: '3c8f30dc4b9b738a6dad9215f19ec5af82186edf', class: "gux-dropdown-options", style: { maxHeight: this.dropdownHeight }, onKeyDown: e => this.optionsKeyDown(e) }, h("slot", { key: 'ab36d9b3e792903d077cbd5f36c0e015c3e08efb' }))))));
     }
     updateSelectionState() {
         this.selectionOptions = this.getSelectionOptions();

package/dist/collection/components/legacy/gux-disclosure-button-legacy/gux-disclosure-button.js

@@ -46,10 +46,10 @@ export class GuxDisclosureButtonLegacy {
         this.updateIcon();
     }
     render() {
-        return (h("div", { key: '9b45d261445cb700cd3ace52bd2f7e1e294e1573', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: 'cd1b2ecb1e2f589e3eb8c9c9111a77f758802d78', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, h("gux-icon", { key: '3d9412ba7ca7f74551bd83f34648a82a785d37d7', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: 'f58c6c8780952bd6652264cd0a6e3eec0d1d1036', id: this.panelId, class: {
+        return (h("div", { key: 'a5801f632a28aa3c03217a58e63d2b44f78f1008', class: `gux-disclosure-button-container gux-${this.position}` }, h("button", { key: '80b191895f75bdef50366fb27b58c25730b5b030', class: "gux-disclosure-button", onClick: () => this.changeState(), "aria-controls": this.panelId, "aria-expanded": this.isOpen.toString(), "aria-label": this.label || this.i18n('defaultLabel'), "data-testid": "disclosure-button" }, h("gux-icon", { key: '75bc86ca67f992b7565244eaf7a718839351d49f', "icon-name": `${this.icon}`, decorative: true })), h("div", { key: '12a13f3b32aff9bf6bb4be7fff275870e8920843', id: this.panelId, class: {
                 'gux-disclosure-panel': true,
                 'gux-active': this.isOpen
-            }, role: "region" }, h("slot", { key: '95cb78835ceecdcfbc68858e36b3bb8e2e14b667', name: "panel-content" }))));
+            }, role: "region" }, h("slot", { key: 'fdc88097462e435562f42a71918b6aae2101d151', name: "panel-content" }))));
     }
     static get is() { return "gux-disclosure-button-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-modal-legacy/gux-modal-legacy.js

@@ -44,10 +44,10 @@ export class GuxModalLegacy {
         const hasModalTitleSlot = this.hasModalTitleSlot();
         const hasFooterButtons = this.hasFooterButtons();
         const titleID = randomHTMLId();
-        return (h("div", { key: 'de81912269d1fc579e9aeac31a4f253e8480356e', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: '24f26b90dc71cc1d870e62c08f50067b5c4010db', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '36c98ebfbd74f67e2f818750cb1158db779ceb9c', class: "gux-modal-header", id: titleID }, h("slot", { key: '7b074f2b4170b5ae13a31047eb5a5e5605e52f7b', name: "title" }))), h("gux-dismiss-button", { key: 'e5fc2260057addc771513c3613f34505a7a4ea14', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '51ff2250a7dcf4b3360e502427cdea6cc150042c', class: {
+        return (h("div", { key: 'a11f60dc0a74bf1619551acaaba45fbcb3b7bdf4', class: "gux-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": hasModalTitleSlot ? titleID : null }, h("div", { key: 'f255afba3f9f90a124f1aa370e8c1b0b17fd35c3', class: `gux-modal-container gux-${this.size}` }, this.renderModalTrapFocusEl(), hasModalTitleSlot && (h("h1", { key: '0e1185d7cccfd50bf8e3972017b9285715f32c74', class: "gux-modal-header", id: titleID }, h("slot", { key: '551e64c79a9d8822eff64aff94b48d76440a5d74', name: "title" }))), h("gux-dismiss-button", { key: '7fb2997f140e9f0ff156d4ab4b7eede0caff18a2', onClick: this.onDismissHandler.bind(this), ref: el => (this.dismissButton = el) }), h("div", { key: '3ab17495c1069cbecb2151b5a0d4d4017dc316db', class: {
                 'gux-modal-content': true,
                 'gux-no-buttons': !hasFooterButtons
-            } }, h("p", { key: 'd9b669783af8eb5dcd5d25c35f7612af5bcbd2dc' }, h("slot", { key: '9897e416852c7396d40a91ff70616e7ab9ecad6c', name: "content" }))), hasFooterButtons && (h("div", { key: '6f30e8a9a439d67f832237bae930556d0e05f921', class: "gux-button-footer" }, h("div", { key: 'e05367e96ec13f93c40884a1e6492b199440f06f', class: "gux-left-align-buttons" }, h("slot", { key: '5c6ef8bd2888ec2e1ae6c123bf434dad9aedf70b', name: "left-align-buttons" })), h("div", { key: '91dfa902066244ace95868d40bd2451d79180284', class: "gux-right-align-buttons" }, h("slot", { key: '2dfcb68d1a70f037655c71acbb1488fbc7b2e73e', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
+            } }, h("p", { key: 'ef6170f1cf84f668d3345f4992596bc23d2fc396' }, h("slot", { key: '1103a9184e0c4a982fe6b9869ecfe431eb7925ad', name: "content" }))), hasFooterButtons && (h("div", { key: '709e362411905f48521e01dcdfb49070fa7ca8c5', class: "gux-button-footer" }, h("div", { key: '4f9fde78b8c75a1477812c76252d649769108459', class: "gux-left-align-buttons" }, h("slot", { key: 'c2fb582303e4c523cc96e91d3e297752d1d24e6d', name: "left-align-buttons" })), h("div", { key: '15946cd2aec6b1c5f142e756eac5cfafbc378d5f', class: "gux-right-align-buttons" }, h("slot", { key: '08908ff0a2e75d1773966fd9979cf76116a01956', name: "right-align-buttons" })))), this.renderModalTrapFocusEl())));
     }
     // When trap-focus is enabled, focusing this element
     // will immediately redirect focus back to the dismiss button at the top of the modal.

package/dist/collection/components/legacy/gux-notification-toast-legacy/gux-notification-toast.js

@@ -16,7 +16,7 @@ export class GuxNotificationToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: '6daa191820002bec49323dee38e53c514331a6d7' }, h("div", { key: 'dd6e6e6b7921a01f1ea96a508808c35776655c2b', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'a6a26085aac2f7dae2ddd22fd0d1ae026d9e780d', name: "icon" })), h("div", { key: '1e24f7347557f5e49cecfd53c6d104175fcf5bdc', class: "gux-content" }, h("gux-truncate", { key: 'e5cf7c12b2a87ca82759b70d79c6642fbbc152b1', class: "gux-title", "max-lines": 1 }, h("slot", { key: '584a3c5705d4d47deb6bf39580779f22fc58fc24', name: "title" })), h("gux-truncate", { key: '6672987849e0ce4e6650915ea6962aa382577d9f', class: "gux-message", "max-lines": 2 }, h("slot", { key: '3aff6689d3b6688e152ccb24539b6334a5a686a0', name: "message" }))), h("gux-dismiss-button", { key: '974b0c24254c7a9baad50540cf20aed1b4be8526', onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: 'c51154ad7199d5cd7ad187791a778b6c5b009f6c' }, h("div", { key: '9464911b087eae17af3e2869bdfc5340811ef7f3', class: `gux-icon gux-${this.accent}` }, h("slot", { key: 'd786365a3fc451e78beb09839f17813a5b0dfbe6', name: "icon" })), h("div", { key: 'ce7b1adc5f511724d9716609ada00dfce17ade39', class: "gux-content" }, h("gux-truncate", { key: '4edee71e6769ea8c059751afdf877f58301f1849', class: "gux-title", "max-lines": 1 }, h("slot", { key: '00ec24675b1b8c0cc7ab60dfc03a213203208ff4', name: "title" })), h("gux-truncate", { key: 'a6bf67717956a4af16d32c035ddc7f93fe8b0c9e', class: "gux-message", "max-lines": 2 }, h("slot", { key: '481a362b5c0a95d3118509f9fae4509bdb85fa85', name: "message" }))), h("gux-dismiss-button", { key: '42437403b32248e283d07e75bbf9e27afe171afe', onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-buttons-legacy/gux-pagination-buttons.js

@@ -69,7 +69,7 @@ export class GuxPaginationButtonsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: '65792575a578ebd97495220d61d301f9a59041f4', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '2b38e21a1a55cfc93eb355cfaa9ab75be3bfa7f2', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '44a5758883dc58e9ba759168c60ba19c03a808e9', accent: "ghost" }, h("button", { key: '34e669862c9ae135bb7c457d4c45537dcc215ee3', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '5adf918b92b59f8a2367c7d495ef92c3a5aaadd9', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: '6c5ed0bc819db193ca5450625ad6a9ef17495814', accent: "ghost" }, h("button", { key: '73363f269b66ce2e44cb709a983f96050f039dba', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '68727697f2b5a61a7fc3eaf2421a170c098b7786', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '7b15fbac4877812fcaa2d3b9b9146aa9dfd25dc9', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '9843858241adc47ac5a500c6c3837671d61dc3c9', accent: "ghost" }, h("button", { key: '5f753b96ac491d56078dd1fe4796d43eb2825253', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: 'b632559c6309820e7a71f1de2716b470494474c8', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '9daa5f379d44eaadab76c1060bcc1a0c3979ffc4', accent: "ghost" }, h("button", { key: '9d38ade2d68ad8146e882d68b92e3cbed62935b1', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: 'b0e5098e8e2ecb75fdbd7fcd7c9de6b4b2b2e20d', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
+        return (h("div", { key: '35768f2fce06a1c9171685667446cd85c04373c8', class: `gux-pagination-buttons-container gux-${this.layout}` }, h("div", { key: '9967f29b97db3843711b4a28e8f3f6b4b1aa7336', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '1605b567f42dc647de70682b0cc85ec1441073ef', accent: "ghost" }, h("button", { key: '847482805ba0e40cb3fcdcbfe2e4f25f3ea8d6c5', title: this.i18n('first'), disabled: this.onFirstPage, onClick: this.handleClickFirst.bind(this) }, h("gux-icon", { key: '3498d9f65841c6247a143b9638563f45915b2eee', decorative: true, "icon-name": "fa/chevrons-left-regular" }))), h("gux-button-slot", { key: 'db884e8e62b42dd4d97328e69519cfccdf0f5371', accent: "ghost" }, h("button", { key: '3b5d995d2318cff67d36c1cdd93e74ba46ab950a', title: this.i18n('previous'), disabled: this.onFirstPage, onClick: this.handleClickPrevious.bind(this) }, h("gux-icon", { key: '4a54c434f5cfdc283a2b6f8cc5bf5de71aaef5a3', decorative: true, "icon-name": "custom/chevron-left-small-regular" })))), this.getPagePicker(this.layout), h("div", { key: '864faf4c58059ab662d85502a1f459f4762a1c69', class: "gux-pagination-buttons-group" }, h("gux-button-slot", { key: '41b97fe0c5dd8a09688997f3f5d28ef56219f755', accent: "ghost" }, h("button", { key: 'cfe4b065f37d6a97558ad007e73ff809fc77a7bc', title: this.i18n('next'), disabled: this.onLastPage, onClick: this.handleClickNext.bind(this) }, h("gux-icon", { key: '982ac32c2467b6b5e25948fb2562e6a34b0336db', decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("gux-button-slot", { key: '6a8c337d59bce08bab00692be270084bc7ae9604', accent: "ghost" }, h("button", { key: 'f4f51c0f77ac504b9c86ba806d8f4946692fbb33', title: this.i18n('last'), disabled: this.onLastPage, onClick: this.handleClickLast.bind(this) }, h("gux-icon", { key: '2fca58f49d109b9c886a1f9e3b62317ab19a0873', decorative: true, "icon-name": "fa/chevrons-right-regular" }))))));
     }
     static get is() { return "gux-pagination-buttons-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-item-counts-legacy/gux-pagination-item-counts.js

@@ -23,10 +23,10 @@ export class GuxPaginationItemCountsLegacy {
         this.i18n = await buildI18nForComponent(this.root, paginationResources);
     }
     render() {
-        return (h("div", { key: 'ff3df2a0bc3d4d2f9a190a9496d69b08a0da5ba7', class: "gux-pagination-item-counts-container" }, h("span", { key: 'cf0e54b9774a88bcbd034bf2b55b7b7146432ffc', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
+        return (h("div", { key: 'efc9f4c80da3148b9a86cc3b375d31bf94c40dc4', class: "gux-pagination-item-counts-container" }, h("span", { key: '5375e5e9e75f55b291472fa5ce08988c2d38d474', class: "gux-pagination-item-counts-range" }, this.i18n('itemCountDisplay', {
             firstItem: this.firstItem,
             lastItem: this.lastItem
-        })), h("span", { key: '9914721896c2053bf6c08d1f9b37485366fda101' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
+        })), h("span", { key: 'b972eb99cdf2878ffb3493428e9bbfba61777871' }, this.i18n('totalItems', { totalItems: this.totalItems }))));
     }
     static get is() { return "gux-pagination-item-counts-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination-items-per-page-legacy/gux-pagination-items-per-page.js

@@ -19,7 +19,7 @@ export class GuxPaginationItemsPerPageLegacy {
             }) }, h("gux-listbox", { "aria-label": this.i18n('itemsPerPage') }, h("gux-option", { value: "25" }, "25"), h("gux-option", { value: "50" }, "50"), h("gux-option", { value: "75" }, "75"), h("gux-option", { value: "100" }, "100"))));
     }
     render() {
-        return (h("div", { key: '6c6097f50c306c405511d10754b8f2e561b7e21b', class: "gux-pagination-items-per-page-container" }, h("div", { key: '9a71906fb95d919d88c4c125759dba87de0c7360', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'dca4c2e9270b9c21413181d901d8f9d4cf5f2827', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
+        return (h("div", { key: '30e2fe510472873882207154692b087bcbce65b5', class: "gux-pagination-items-per-page-container" }, h("div", { key: '61cfc4367bdd23dae8c224875e2b9124ee5f7a74', class: "gux-pagination-items-per-page-picker" }, this.getDropdown()), h("div", { key: 'c36117b155f0eecd5da415ad40b4963eda2a47fb', class: "gux-pagination-per-page" }, this.i18n('perPage'))));
     }
     static get is() { return "gux-pagination-items-per-page-legacy"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-pagination-legacy/gux-pagination.js

@@ -69,7 +69,7 @@ export class GuxPaginationLegacy {
         this.currentPage = this.calculateCurrentPage();
     }
     render() {
-        return (h("div", { key: '754599f052104e0447451b2d066af671882af23c', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '97373c90315fdc27b23948d2b13f4e288a330de1', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '8defcc8a710ae8f0521424acd8de8274c456d086', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
+        return (h("div", { key: '67b85207ddadf7acc368f95982b0fb3b8e28b5b2', class: "gux-pagination-container" }, this.getPaginationInfoElement(this.layout), h("div", { key: '6c412cafcc3051685b3b2d5593cd01bb7014668f', class: "gux-pagination-change" }, h("gux-pagination-buttons-legacy", { key: '947f72612e62d306ed501832b8875f4962a7d4d5', layout: this.layout, "current-page": this.currentPage, "total-pages": this.totalPages, onInternalcurrentpagechange: this.handleInternalcurrentpagechange.bind(this) }))));
     }
     static get is() { return "gux-pagination-legacy"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/legacy/gux-simple-toast-legacy/gux-simple-toast.js

@@ -15,7 +15,7 @@ export class GuxSimpleToast {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h(Host, { key: '67c7d078fb861762bbefdfedad791dba24e6482f' }, h("div", { key: 'b0d52a8e36280ec7c0b4c0503a267ffe784ed852', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '2b407a147e03fd42844bcfafc6365f3a5837b2d1', name: "icon" })), h("gux-truncate", { key: 'f998cb246f3b64b8904a4130206644ebf9a616b2', class: "gux-message", "max-lines": 2 }, h("slot", { key: '1ebbdf028bea4b330bb155816fbc0347bd85fb0b', name: "message" })), h("gux-dismiss-button", { key: '850572432df47405d3e9654b8a3d3ab7c15c89bf', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
+        return (h(Host, { key: '6e5d6b0ada417ba744c37b1f83d1983493742f3c' }, h("div", { key: '30f01cc352b326edefd1c18d10943dd1c2d69e53', class: `gux-icon gux-${this.accent}` }, h("slot", { key: '04c0fb6606edf3b01d0b3c0c5af462cb38ff235a', name: "icon" })), h("gux-truncate", { key: '3b7554d2062f82f24db5b9dfe067927160a42459', class: "gux-message", "max-lines": 2 }, h("slot", { key: 'b03eb29e6ef246fbf8161293c78500ab6040f189', name: "message" })), h("gux-dismiss-button", { key: '516ed174c5faec1483333f31974b3b818d40ffaa', class: "gux-dismiss", position: "inherit", onClick: this.onDismissClickHandler.bind(this) })));
     }
     onDismissClickHandler(event) {
         event.stopPropagation();

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch-item/gux-switch-item.js

@@ -13,7 +13,7 @@ export class GuxSwitchItem {
         }
     }
     render() {
-        return (h(Host, { key: '8b72df2f9868e4b2c20460af0a3ff1aff10a697c', class: { 'gux-selected': this.selected } }, h("button", { key: '539de63e8aa217c9556749e81809faed61e2a55d', "aria-current": this.selected.toString(), type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: 'b432beda91516d20edcd6d5c833cbebb8639dafe' }))));
+        return (h(Host, { key: 'b8aeaabdcc56dc2c2dd88e48ea66e74e73fd9a36', class: { 'gux-selected': this.selected } }, h("button", { key: '1442e755144c081e2993111b01bf45519719c61d', "aria-current": this.selected.toString(), type: "button", class: "gux-switch-item", disabled: this.disabled }, h("slot", { key: 'd4febff316d2eeae51b2226c479b79fdb3d4bb19' }))));
     }
     static get is() { return "gux-switch-item"; }
     static get originalStyleUrls() {

package/dist/collection/components/legacy/gux-switch-legacy/gux-switch.js

@@ -30,7 +30,7 @@ export class GuxSwitch {
         });
     }
     render() {
-        return (h(Host, { key: 'fb01250fbd91cd4004e5885af79ddfb164b6f2b4', role: "group", class: `gux-${this.layout}` }, h("slot", { key: 'c3b650e13c270d34416ef5e44865d9302a8bd6d0', onSlotchange: this.slotChanged.bind(this) })));
+        return (h(Host, { key: '4259e3aa5e18a54b8c5923b6d98ae70814127859', role: "group", class: `gux-${this.layout}` }, h("slot", { key: 'a2efc869fd19aa1f6b316965afa158ac46c51219', onSlotchange: this.slotChanged.bind(this) })));
     }
     static get is() { return "gux-switch-legacy"; }
     static get encapsulation() { return "shadow"; }

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

@@ -50,20 +50,20 @@ export class GuxAccordionSection {
         this.hasIconSlot = !!this.root.querySelector('[slot="icon"]');
     }
     render() {
-        return (h("section", { key: '5f6fbfed6b1749839798955d3ff9b47b1540cc7f', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'e4279506105630d808901c7eb638d3e97c2442d9', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: '5d1a5ef4a257f581a2267767f92d6f5390ec2254', class: {
+        return (h("section", { key: '7a36dda42c5665bfb90062f5c9a7779d2ece2f1f', class: { 'gux-disabled': this.disabled } }, h("div", { key: 'a57a616a608c4d798e2e922e1e90068f81c6083f', id: this.headerId, role: "heading", "aria-level": this.headingLevel }, h("button", { key: 'f5c0bcde76bf3d876a3524b692ea597ad164a622', class: {
                 'gux-header': true,
                 'gux-reverse-headings': this.reverseHeadings
-            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: '7b6c53f3a7d869e461434ab41e3e0daaac42f329', name: "icon" }), h("div", { key: 'ab82e1c8c6d17d99f93da0347ffcf3b50aadffe6', class: {
+            }, type: "button", "aria-expanded": this.open.toString(), "aria-controls": this.sectionId, disabled: this.disabled, onClick: this.toggle.bind(this) }, this.hasIconSlot && h("slot", { key: '1e871497259e9cfd12e961a4e4e5e7ba39fab54e', name: "icon" }), h("div", { key: '4c37679e609366454aed59007ee834bcf9713289', class: {
                 'gux-header-text': true
-            } }, h("slot", { key: '9851b6acac5b60c2378b71d2409051e69da5ca2e', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '4b761c850e50ef9b73daba6043b78b22ae89f743', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '72834a00027374ab2cccdda2e89af435e801f54f', class: {
+            } }, h("slot", { key: 'a64c30daec40a93cd84a345edaf4f6a0c7c8d8da', onSlotchange: () => this.handleSlotChange('header'), name: "header" }), h("slot", { key: '5d50e96774908737d166861ca7306222cef9ca36', onSlotchange: () => this.handleSlotChange('subheader'), name: "subheader" })), h("div", { key: '16d5f3c48a7896d8df83be98706edd821b1a8d9f', class: {
                 'gux-header-icon': true,
                 'gux-expanded': this.open,
                 'gux-arrow-position-start': this.isArrowPositionBeforeText()
-            } }, h("gux-icon", { key: '67b4447d2cbe2678ea172250b3c387f69eb0811b', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: 'd40e94866149954a8e664c3aec588b74e6b89ed6', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
+            } }, h("gux-icon", { key: '6329579c186313c2a09be2f8e7c165db0e19de05', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: 'b2473f6247c55baf2029f3726e3ee27a3374090a', id: this.sectionId, role: "region", "aria-labelledby": this.headerId, class: {
                 'gux-content': true,
                 'gux-expanded': this.open,
                 'gux-text-content-layout': this.contentLayout === 'text'
-            } }, h("slot", { key: 'd39cbee9166f563135c04e3cb52ae467f077d563', name: "content" }))));
+            } }, h("slot", { key: 'f44baa77198ef6007b84cdece15855ac5eb542d7', name: "content" }))));
     }
     static get is() { return "gux-accordion-section"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,7 +36,7 @@ export class GuxAccordion {
         }
     }
     render() {
-        return (h("slot", { key: '32ee82840ce880c41184207782dfeffab71c83bd' }));
+        return (h("slot", { key: '62afe840282269949f2f85a70733fc80240cd41d' }));
     }
     static get is() { return "gux-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -138,7 +138,7 @@ export class GuxActionButton {
         this.i18n = await buildI18nForComponent(this.root, defaultResources);
     }
     render() {
-        return (h("div", { key: 'ab6651632d8c2c2053edded32302773689fbae3b', class: "gux-action-button-container" }, h("gux-popup", { key: '3a4f2a3ee0e74a29891a75b9b54980d902fb18ef', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: 'ab21d19adc79227f6cd77025941ef257a3ad8202', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: '5daeb543bcd4bd4b5fee0f4834c3d7030cd9841d', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'a34e7510d3d05b51c7a17f5e65e4d1a381c22974', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick(), "data-testid": "action-button" }, h("slot", { key: '60ff4588b12a00f89f8aacfcf599031108ba5b76', name: "title" }))), h("gux-button-slot", { key: '0295bb3572c175166668f51c9d61b3b7136db617', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: 'ffe8eb7d4ea57866c01002f6219c0ea0e9bb9745', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions'), "data-testid": "dropdown-button" }, h("gux-icon", { key: '0d4286835f820099d577f2b7461937c2263b4e1c', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: 'f5ab23c3e725a03b0629292b20d0ad5f63ae7262', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '75d5285b1c6f0841bf455cd72da14b00388d4e9e', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '42af4c5512d8e9e519321081c0e4bc9a6d0e3c70' }))))));
+        return (h("div", { key: '9fb75bfefeb4a11e607cfc238ba44a7d614f6aec', class: "gux-action-button-container" }, h("gux-popup", { key: '2c389c1470836be61de4527f775371ca96948c0c', expanded: this.isOpen, disabled: this.disabled, placement: "bottom-end", "exceed-target-width": true }, h("div", { key: '716b671dfe9ba9e0e6e17eb891a066f621ec5904', slot: "target", class: "gux-action-button-container" }, h("gux-button-slot", { key: 'd66da2901a1b7d6627a60d65834adf2e838614b0', class: "gux-action-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '442b1a98bc77f3ffd60c8a7caee6d18412c894de', type: this.type, disabled: this.disabled, onClick: () => this.onActionClick(), "data-testid": "action-button" }, h("slot", { key: '25441105f217180fe3ba4e714122894c4682251a', name: "title" }))), h("gux-button-slot", { key: 'cb6c2d6911075b2bc84a6beea752eb89e4ace912', class: "gux-dropdown-button", accent: getGuxActionButtonAccent(this.accent) }, h("button", { key: '7c61e2bb65f8ef3f299d934f0e14fc24b56a2377', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.i18n('moreOptions'), "data-testid": "dropdown-button" }, h("gux-icon", { key: 'da09cbac51f95be1a106ab1dc80254285b0c3e37', decorative: true, "icon-name": "custom/chevron-down-small-regular", size: "small" })))), h("div", { key: 'ea3a0980df79e10065f648406cdc2e44b43aba89', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '8a5d0207687eecd2355c4aecdd46ba8ed265e327', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '7624cda20a147dc6f4508aa2efb59deda6ca441f' }))))));
     }
     static get is() { return "gux-action-button"; }
     static get encapsulation() { return "shadow"; }

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

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

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

@@ -43,7 +43,7 @@ export class GuxBlankState {
         this.hasGuidance = hasSlot(this.root, 'additional-guidance');
     }
     render() {
-        return (h("div", { key: '7b2a305d3f96bc2ee89f0abb95e612f1d6cf63ad', class: "gux-container" }, h("div", { key: '1eb9e116c0ed3878c791f168b135fb1407b4b6f0', class: "gux-image" }, h("slot", { key: '2b42ea2ffd57b17045dc4b3144b17c1ee8db0866', name: "image" })), h("div", { key: '7eea5000800e7b2f21c8a065fec8ab0dc1258a2d', class: "gux-message" }, h("slot", { key: '7938cbcb0d2e37c8fc19113cdd81a47956916bda', name: "primary-message" })), this.renderGuidanceSlot(), this.renderCallToActionSlot()));
+        return (h("div", { key: '0a02b112b77744f869aca6dad69f9c3557aec550', class: "gux-container" }, h("div", { key: '5420c1ffa848a76c8bc5564ce46877d8dd506020', class: "gux-image" }, h("slot", { key: 'c79a013df93656c195b0a02f342d52ff88cf6d1e', name: "image" })), h("div", { key: 'cdab0c7570e102e7af161ae20973b27e50470a41', class: "gux-message" }, h("slot", { key: '587f0bb85fff1c5ed585e4e30494e8578788b16c', name: "primary-message" })), this.renderGuidanceSlot(), this.renderCallToActionSlot()));
     }
     static get is() { return "gux-blank-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,7 +35,7 @@ export class GuxBreadcrumbItem {
     }
     render() {
         const accent = this.getAccent();
-        return (h(Host, { key: 'da70ca582d1e1643780fa1f1f35cce1381459d65', role: "listitem" }, h("span", { key: 'eab47a10ad0666b7013b961668ff36fe71cbabe1', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(accent), this.getSeparatorIcon())));
+        return (h(Host, { key: '57b4ece742278d8cfaa8807ca87d91d43c4990a8', role: "listitem" }, h("span", { key: '26d8eed82048367a36dae7582820d4c41306aec7', class: `gux-breadcrumb-generation gux-${accent}` }, this.getBreadcrumb(accent), this.getSeparatorIcon())));
     }
     static get is() { return "gux-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,7 +19,7 @@ export class GuxBreadcrumbs {
         Array.from(this.root.children).forEach(child => forceUpdate(child));
     }
     render() {
-        return (h("nav", { key: '82732dd5fcdd18158bcee8b8bdf9fd35652cb712', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: '57711a2233a7b7a77b5f88f9f6a812102a9e7ece' }, h("slot", { key: '19753c53e76e74c6fb83cf33bca8ba0a80b5b872', onSlotchange: this.onSlotChange.bind(this) }))));
+        return (h("nav", { key: 'a013e943aa3ac16f108f54a2cfc34add1cca65a3', "aria-label": this.i18n('breadcrumbs') }, h("ol", { key: 'a9d910293665b785f3a511c526f007481dce2408' }, h("slot", { key: 'fef8837cb85c9d4efadb8a41d2576be4f274d3ba', onSlotchange: this.onSlotChange.bind(this) }))));
     }
     static get is() { return "gux-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -26,10 +26,10 @@ export class GuxButton {
     }
     render() {
         return [
-            h("button", { key: '5dd72d4f34446bc522c5627ed1799d17adacbed1', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
+            h("button", { key: 'e28c1a67ace4de6fef7cb98e203a49118fd2033e', id: this.buttonId, type: this.type, disabled: this.disabled, class: {
                     [`gux-${this.accent}`]: true,
                     'gux-icon-only': this.iconOnly
-                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: '15e82ba7e44507807c4db0a0635abc72fb4d7185', onSlotchange: this.slotChanged.bind(this) })),
+                }, "aria-label": this.guxTitle, autofocus: this.autofocus }, h("slot", { key: '45020b966f76c9ad44524da5c7f13fdec6788475', onSlotchange: this.slotChanged.bind(this) })),
             this.renderTooltip()
         ];
     }

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

@@ -126,7 +126,7 @@ export class GuxButtonMulti {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("gux-popup", { key: 'ba05fdc3f9a8f0ca73acfeb8f28a710a3ab4e984', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: '5272ebe9d1a123e90980e8de8b410a02b8e25c2f', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '6cea1c008395653142b45e34587f0c627cc297ca', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '27d9e8e9077aa02d1f6e07829d6602ae3555a848', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.guxAriaLabel }, h("slot", { key: 'b43987ca80023b12d7c6748cbd4a7772dd9ba1ec', name: "title" }), h("gux-icon", { key: '3d6595a0e6549f7abbb707b3047c433d866edeee', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '316fd58cf88dafb1e358d9cbc8d084af22670886', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: '938f1fb7bba1d82d3e559b7468a1515d9fe2beaf', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '90daa2a1c2d3945ced077c659555bbe2d6dc080b' })))));
+        return (h("gux-popup", { key: 'fdc223e8b845669f25dee4767f7b3e55d7be8f46', expanded: this.isOpen, "exceed-target-width": true, placement: "bottom-end" }, h("div", { key: 'e4448fb450b3ef6b5b606d648e410786963687a4', slot: "target", class: "gux-button-multi-container" }, h("gux-button-slot", { key: '5510f77ee06e42f70445d28ab4000c828fd99066', class: "gux-dropdown-button", accent: getGuxButtonMultiAccent(this.accent) }, h("button", { key: '186011c13f9ae63b7bc30ae4f9e5e5dd4c6375f3', type: "button", disabled: this.disabled, ref: el => (this.dropdownButton = el), onMouseUp: () => this.toggle(), "aria-haspopup": "true", "aria-expanded": this.isOpen.toString(), "aria-label": this.guxAriaLabel }, h("slot", { key: '7d012b95871cff16168048aaa5612427f24c847d', name: "title" }), h("gux-icon", { key: 'f222b55fe03b763fe1cb7fb3328eeed18c1f08cd', size: "small", decorative: true, "icon-name": "custom/chevron-down-small-regular" })))), h("div", { key: '78eb53fce33db4b8c7788c3d422cc9d4bb18e35e', class: "gux-list-container", slot: "popup" }, h("gux-list", { key: 'f73bb9a97ecdb8ffcdb0846be121f735d37da83f', onClick: (e) => this.onListClick(e), ref: el => (this.listElement = el) }, h("slot", { key: '75bf49c2c67fc0a767f1325d400ce36a76dc18ac' })))));
     }
     static get is() { return "gux-button-multi"; }
     static get encapsulation() { return "shadow"; }

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

@@ -31,7 +31,7 @@ export class GuxButtonSlot {
         this.validateSlotContent();
     }
     render() {
-        return (h(Host, { key: '012a2b88a20562e85b4714d987f7d54d541cd4a7', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '59a9dfb5a068b0fd3922b6a2739a212f8839c9c3' })));
+        return (h(Host, { key: '99df51793447c80e05a7e5bc0af1efac6a6aaa67', accent: this.accent, "icon-only": this.iconOnly }, h("slot", { key: '55fa33db37c115a75614bdf69b805fb65777310d' })));
     }
     static get is() { return "gux-button-slot"; }
     static get encapsulation() { return "shadow"; }

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

@@ -344,7 +344,7 @@ export class GuxCalendar {
         return (h("table", null, h("tr", null, getWeekdays(this.locale, this.startDayOfWeek).map(day => (h("th", null, day)))), this.getMonthDays(index).map(week => (h("tr", null, week.map(day => (h("td", { tabindex: this.isFocusableDate(day) ? '0' : '-1', class: day.class, "aria-hidden": day.hidden ? 'true' : 'false', "aria-disabled": day.disabled ? 'true' : 'false', "data-date": day.date.getTime(), onClick: () => void this.onDateClick(day.date), onMouseEnter: () => this.onDateMouseEnter(day.date), onKeyDown: e => void this.onKeyDown(e) }, h("div", { class: "gux-date" }, day.date.getDate(), h("gux-screen-reader-beta", null, getDateMonthAndYearString(day.date, this.locale)))))))))));
     }
     render() {
-        return (h("div", { key: 'c49e026383fdaa7336ddb1108752e0d04647bd1d', class: "gux-calendar" }, h("div", { key: '09605bb71ea5864b3c971a571db18898aa72280d', class: "gux-header" }, h("button", { key: '9f04a6723891ae93f0ada14fdd524c776e2facb7', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '8d25e532e0778ee93998fea97a753dea8a3c515f', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '0d0b85170e5053128a991da371fd5b0ff29fe0a6', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '36f7a2c49e54c56ff68244b18bac61840308cc35', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: '9d135c3f15c968f16abe7b1a3d032a041cbe91ac', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
+        return (h("div", { key: 'c9b9ccdf18efa3ea27e3a636401b512c4389a89c', class: "gux-calendar" }, h("div", { key: '1afaafa4bcbf2b7dd9d99c3795665a1971f8720b', class: "gux-header" }, h("button", { key: 'e3da9e5a0335040fb3bb1bafdafb450119dc5eb1', type: "button", class: "gux-left", "aria-label": this.i18n('previousMonth'), onClick: () => this.incrementPreviewDateByMonth(-1) }, h("gux-icon", { key: '7390b76dc18e618b08e1865a9cf48fbc639607f0', size: "small", decorative: true, "icon-name": "custom/chevron-left-small-regular" })), this.renderMonthHeader(), h("button", { key: '8d06a9b0bc59c714068ece8c37aa328a81f0c8cd', type: "button", class: "gux-right", "aria-label": this.i18n('nextMonth'), onClick: () => this.incrementPreviewDateByMonth(1) }, h("gux-icon", { key: '757c5f1bbdbfbd67f72315158a7aa525237b834a', size: "small", decorative: true, "icon-name": "custom/chevron-right-small-regular" }))), h("div", { key: 'd73926384152948cc0dd9e63cc0ba6dc2653ae33', class: "gux-content" }, Array.from(Array(this.numberOfMonths).keys()).map(index => this.renderCalendarTable(index)))));
     }
     static get is() { return "gux-calendar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -14,10 +14,10 @@ export class GuxCard {
         trackComponent(this.root, { variant: this.accent });
     }
     render() {
-        return (h("div", { key: 'b19df85238b29f2e108993a054d94f4be9fb4e62', class: {
+        return (h("div", { key: 'ac1982d547b7bc12a24055b66e87157f6e63ffe3', class: {
                 'gux-card': true,
                 [`gux-${this.accent}`]: true
-            } }, h("slot", { key: '67b57a5f325665ed97c19f92b23bfaccb7390a75' })));
+            } }, h("slot", { key: 'ffbe39af10ce841ceceb1b80093f9e891cd1e799' })));
     }
     static get is() { return "gux-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/stable/gux-column-manager/gux-column-manager-item/gux-column-manager-item.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;