genesys-spark-components 4.118.0 → 4.119.0

package/dist/collection/components/beta/gux-tooltip-base/gux-tooltip-base.js

@@ -34,6 +34,12 @@ export class GuxTooltipBase {
             this.hide();
         }
     }
+    handlePointerenter() {
+        this.show();
+    }
+    handlePointerleave() {
+        this.hide();
+    }
     /*
      * Show tooltip
      */
@@ -80,16 +86,19 @@ export class GuxTooltipBase {
         });
     }
     show() {
+        clearTimeout(this.hideDelayTimeout);
         this.isShown = true;
         afterNextRender(() => {
             this.runUpdatePosition();
         });
     }
     hide() {
-        if (this.cleanupUpdatePosition) {
-            this.cleanupUpdatePosition();
-        }
-        this.isShown = false;
+        this.hideDelayTimeout = setTimeout(() => {
+            this.isShown = false;
+            if (this.cleanupUpdatePosition) {
+                this.cleanupUpdatePosition();
+            }
+        }, 350);
     }
     setForElement() {
         if (this.forElement) {
@@ -123,10 +132,10 @@ export class GuxTooltipBase {
         this.disconnectForElement();
     }
     render() {
-        return (h(Host, { key: '268001423213ce578dffcff3311505f6fb3de012', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '574b792c9ff1668b32fad2fdf9314eb64e1e57ba', class: {
+        return (h(Host, { key: 'bd1de270635ad0b5a20313f821d28c86020ec7ca', id: this.tooltipId ? undefined : this.id, role: this.tooltipId && !this.isShown ? undefined : 'tooltip', class: { 'gux-show': this.isShown }, "aria-hidden": this.visualOnly }, h("div", { key: '925d6d504101a29991630ac8f02b9c179c258079', class: {
                 'gux-container': true,
                 [`gux-${this.accent}`]: true
-            }, "data-placement": this.placement }, h("slot", { key: 'c3d4cf2c5879e2ab1b845327b31fc274414219f6', name: "content" }))));
+            }, "data-placement": this.placement }, h("slot", { key: '14ce53ff67fe39be22f8a0d042657ee864d5be76', name: "content" }))));
     }
     static get is() { return "gux-tooltip-base-beta"; }
     static get encapsulation() { return "shadow"; }
@@ -346,6 +355,18 @@ export class GuxTooltipBase {
                 "target": "window",
                 "capture": false,
                 "passive": true
+            }, {
+                "name": "pointerenter",
+                "method": "handlePointerenter",
+                "target": undefined,
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "pointerleave",
+                "method": "handlePointerleave",
+                "target": undefined,
+                "capture": false,
+                "passive": true
             }];
     }
 }

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

@@ -16,10 +16,10 @@ gux-popup .gux-select-field a.gux-select-input {
   inset: 0;
   padding: 6px 24px 6px 12px;
   overflow: hidden;
-  color: #2e394c;
-  text-decoration: none;
   text-overflow: ellipsis;
+  color: #2e394c;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
   background-color: #f6f7f9;
   background-image: none;

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

@@ -58,9 +58,9 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   border: none;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button:focus-visible {
-  border-radius: calc(var(--gse-semantic-focusOutline-sm-borderRadius) - var(--gse-semantic-focusOutline-offset));
   outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-ui-color-focus);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: calc(var(--gse-semantic-focusOutline-sm-borderRadius) - var(--gse-semantic-focusOutline-offset));
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button.gux-current {
   padding-right: var(--gse-ui-dataTableItems-tablePagination-padding);

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

@@ -12,9 +12,9 @@ gux-switch-item > .gux-switch-item {
   font: unset;
   color: #2e394c;
   text-align: center;
+  outline: none;
   background: none;
   border: none;
-  outline: none;
 }
 gux-switch-item > .gux-switch-item > gux-icon svg {
   fill: #99a4b8;

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

@@ -76,8 +76,8 @@ section.gux-disabled > * {
   margin-inline-start: var(--gse-ui-accordion-header-gap);
   line-height: 0;
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-closed);
-  transition: transform 0.5s ease;
   transform-origin: center;
+  transition: transform 0.5s ease;
 }
 .gux-header .gux-header-icon.gux-arrow-position-start {
   order: -1;
@@ -88,9 +88,9 @@ section.gux-disabled > * {
   transform: rotate(-180deg);
 }
 .gux-header:focus-visible {
-  border-radius: var(--gse-ui-accordion-menuItem-focus-borderRadius);
   outline: var(--gse-ui-accordion-focusBorder-width) var(--gse-ui-accordion-focusBorder-style) var(--gse-ui-accordion-focusBorder-color);
   outline-offset: var(--gse-ui-accordion-focus-offset-gap);
+  border-radius: var(--gse-ui-accordion-menuItem-focus-borderRadius);
 }
 .gux-header:hover .gux-header-icon {
   color: var(--gse-ui-accordion-header-default-foreground-chevronIcon-hover);

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

@@ -26,9 +26,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-badge.gux-info {
   color: var(--gse-ui-badge-info-regular-foregroundColor);

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

@@ -41,8 +41,8 @@ button {
   block-size: var(--gse-ui-button-default-height);
   padding: var(--gse-ui-button-default-padding);
   overflow: hidden;
-  color: var(--gse-ui-button-secondary-default-foregroundColor);
   text-overflow: ellipsis;
+  color: var(--gse-ui-button-secondary-default-foregroundColor);
   white-space: nowrap;
   pointer-events: auto;
   cursor: pointer;

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

@@ -15,8 +15,8 @@
   block-size: var(--gse-ui-button-default-height);
   padding: var(--gse-ui-button-default-padding);
   overflow: hidden;
-  color: var(--gse-ui-button-secondary-default-foregroundColor);
   text-overflow: ellipsis;
+  color: var(--gse-ui-button-secondary-default-foregroundColor);
   white-space: nowrap;
   pointer-events: auto;
   cursor: pointer;

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

@@ -24,9 +24,9 @@
   position: absolute;
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
   cursor: pointer;
+  outline: none;
   background: none;
   border: none;
-  outline: none;
 }
 .gux-calendar .gux-header button:focus-visible {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
@@ -64,10 +64,10 @@
 .gux-calendar .gux-content table {
   inline-size: var(--gse-ui-calendarMenu-day-input-width);
   text-align: start;
-  table-layout: fixed;
-  border-spacing: 0;
   -ms-user-select: none;
   user-select: none;
+  table-layout: fixed;
+  border-spacing: 0;
 }
 .gux-calendar .gux-content table:not(:last-child) {
   padding-inline-end: 24px;

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

@@ -70,7 +70,7 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }

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

@@ -23,7 +23,7 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -14,25 +14,25 @@
   flex-basis: 100%;
   inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-search-counter-text-fontFamily);
   font-size: var(--gse-ui-search-counter-text-fontSize);
   font-weight: var(--gse-ui-search-counter-text-fontWeight);
   line-height: var(--gse-ui-search-counter-text-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
-  text-overflow: ellipsis;
   white-space: nowrap;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   background-image: none;
   border: 0;
   border-radius: 0;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-populatedColor);
 }
 ::slotted(input).gux-focused, ::slotted(input):focus, ::slotted(input):focus-visible {
-  border: 0;
   outline: none;
+  border: 0;
   box-shadow: none;
 }
 
@@ -60,10 +60,10 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-content-search:focus-visible, .gux-content-search:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-content-search:not(:disabled):not(.gux-disabled):hover {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
@@ -99,10 +99,10 @@
   overflow: hidden;
   color: var(--gse-ui-search-counter-default-foregroundColor);
   cursor: pointer;
+  outline: none;
   background: none;
   border: none;
   border-radius: var(--gse-ui-button-borderRadius);
-  outline: none;
 }
 .gux-content-search .gux-content-control-panel button:disabled {
   pointer-events: none;

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.css

@@ -31,9 +31,9 @@ button {
   visibility: visible;
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content gux-icon[icon-name="fa/copy-regular"] {
+  visibility: hidden;
   flex-shrink: 0;
   padding: var(--gse-ui-copyToClipboard-iconContainer-padding);
-  visibility: hidden;
   background-color: var(--gse-ui-copyToClipboard-label-active-backgroundColor);
   border-radius: var(--gse-ui-copyToClipboard-label-borderRadius);
 }

package/dist/collection/components/stable/gux-datepicker/gux-datepicker.css

@@ -67,16 +67,16 @@
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
-}
-.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input.gux-active {
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+}
+.gux-datepicker .gux-datepicker-field .gux-datepicker-field-input.gux-active {
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input {
   box-sizing: border-box;
@@ -97,9 +97,9 @@
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
+  outline: none;
   background-color: transparent;
   border: none;
-  outline: none;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input input::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -118,19 +118,19 @@
   order: 0;
   padding: 0;
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
+  outline: none;
   background: transparent;
   border: none;
   border-radius: var(--gse-ui-actionButton-borderRadius);
-  outline: none;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
+  outline-offset: var(--gse-ui-datePicker-focusCalendar-gap);
   border: none;
   border-radius: var(--gse-ui-calendarMenu-month-calendarButton-focusBorderRadius);
-  outline-offset: var(--gse-ui-datePicker-focusCalendar-gap);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):focus-visible, .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input button:not(:disabled):hover {
   color: var(--gse-ui-datePicker-iconHover);

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

@@ -117,16 +117,16 @@
   border: none;
 }
 .gux-target-container-expanded .gux-filter-input:focus {
-  border: none;
   outline: none;
+  border: none;
 }
 .gux-target-container-expanded .gux-field-button {
   inline-size: auto;
   block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
+  outline: none;
   background: inherit;
   border: none;
-  outline: none;
   box-shadow: none;
 }
 .gux-target-container-expanded .gux-field-button:focus {

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

@@ -23,9 +23,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-tag .gux-tag-remove-button {
   all: unset;

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.css

@@ -76,9 +76,9 @@
   width: 1px;
   height: 1px;
   overflow: hidden;
+  white-space: nowrap;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
-  white-space: nowrap;
 }
 .gux-field .gux-field-content .gux-filter {
   position: relative;
@@ -135,16 +135,16 @@
   border: none;
 }
 .gux-target-container-expanded .gux-filter-input:focus {
-  border: none;
   outline: none;
+  border: none;
 }
 .gux-target-container-expanded .gux-field-button {
   inline-size: auto;
   block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
+  outline: none;
   background: inherit;
   border: none;
-  outline: none;
   box-shadow: none;
 }
 .gux-target-container-expanded .gux-field-button:focus {

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

@@ -33,8 +33,8 @@
 .gux-flyout-menu-content .gux-arrow-caret {
   inline-size: 0;
   block-size: 0;
-  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
   border-block-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
   border-inline-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
   border-inline-end: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  filter: drop-shadow(0 0 4px var(--gse-semantic-effects-boxShadow));
 }

package/dist/collection/components/stable/gux-flyout-menu/gux-menu/gux-submenu/gux-submenu.css

@@ -46,10 +46,10 @@
   position: fixed;
   inset-block-start: 0;
   inset-inline-start: 0;
+  visibility: hidden;
   flex-direction: column;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
-  visibility: hidden;
   background-color: var(--gse-ui-menu-backgroundColor);
   border: none;
   border-radius: var(--gse-ui-menu-borderRadius);

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

@@ -101,13 +101,13 @@
   inline-size: var(--gse-ui-checkbox-icon-width);
   block-size: var(--gse-ui-checkbox-icon-height);
   margin: 0;
-  text-align: center;
   vertical-align: middle;
+  text-align: center;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
-  border: 0;
   outline: none;
+  border: 0;
 }
 
 ::slotted(input[type=checkbox])::before {
@@ -117,9 +117,9 @@
 }
 
 ::slotted(input[type=checkbox]:focus-visible) {
-  border-radius: var(--gse-ui-checkbox-focus-borderRadiusSmall);
   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);
 }
 
 ::slotted(input[type=checkbox]:not(:checked))::before {
@@ -169,6 +169,6 @@
   font-size: 12px;
   font-weight: var(--gse-ui-checkbox-label-text-fontWeight);
   line-height: var(--gse-ui-checkbox-label-text-lineHeight);
-  color: var(--gse-ui-checkbox-label-foregroundColor);
   vertical-align: middle;
+  color: var(--gse-ui-checkbox-label-foregroundColor);
 }

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

@@ -104,16 +104,16 @@
   block-size: var(--gse-ui-colorPicker-input-swatchSizing);
   padding: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
   text-align: end;
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -155,10 +155,10 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:hover {
   cursor: pointer;

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

@@ -102,16 +102,16 @@
   inline-size: 100%;
   padding-block-end: 0;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
   text-align: end;
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -158,10 +158,10 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

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

@@ -117,14 +117,14 @@
   inline-size: var(--gse-ui-radioButton-icon-width);
   block-size: var(--gse-ui-radioButton-icon-height);
   margin: 0;
+  vertical-align: middle;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   text-align: center;
-  vertical-align: middle;
   -webkit-appearance: none;
   appearance: none;
   cursor: pointer;
-  border: 0;
   outline: none;
+  border: 0;
 }
 
 ::slotted(input[type=radio])::before {
@@ -134,9 +134,9 @@
 }
 
 ::slotted(input[type=radio]:focus-visible) {
-  border-radius: var(--gse-ui-radioButton-focus-borderRadius);
   outline: var(--gse-ui-radioButton-focus-border-width) var(--gse-ui-radioButton-focus-border-style) var(--gse-ui-radioButton-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border-radius: var(--gse-ui-radioButton-focus-borderRadius);
 }
 
 ::slotted(input[type=radio]:not(:checked))::before {
@@ -174,6 +174,6 @@
   font-size: var(--gse-ui-formControl-label-text-fontSize);
   font-weight: var(--gse-ui-radioButton-label-text-fontWeight);
   line-height: var(--gse-ui-radioButton-label-text-lineHeight);
-  color: var(--gse-ui-radioButton-label-foregroundColor);
   vertical-align: middle;
+  color: var(--gse-ui-radioButton-label-foregroundColor);
 }

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

@@ -101,15 +101,15 @@
   order: 0;
   inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -164,10 +164,10 @@
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);

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

@@ -106,10 +106,10 @@
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
   border-radius: var(--gse-ui-formControl-input-borderRadius);
-  outline: none;
 }
 ::slotted(select)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -156,10 +156,10 @@
   pointer-events: none;
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input.gux-input-error .gux-input-container {
   border-color: var(--gse-ui-formControl-input-error-border-color);

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.css

@@ -101,15 +101,15 @@
   order: 0;
   inline-size: 100%;
   overflow: hidden;
+  text-overflow: ellipsis;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);
   color: var(--gse-ui-formControl-input-populatedColor);
-  text-overflow: ellipsis;
+  outline: none;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
-  outline: none;
 }
 ::slotted(input)::placeholder {
   color: var(--gse-ui-formControl-input-placeholderColor);
@@ -123,8 +123,8 @@ slot[name=suffix] {
   line-height: var(--gse-ui-formControl-input-prefixSufix-text-lineHeight);
   color: var(--gse-ui-formControl-input-prefixSufix-defaultColor);
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 
 .gux-input-and-error-container {
@@ -160,10 +160,10 @@ slot[name=suffix] {
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {
-  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
-  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
   outline-offset: var(--gse-semantic-focusOutline-offset);
+  border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
+  border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:hover:not(.gux-disabled) {
   border: var(--gse-ui-formControl-input-hover-border-width) var(--gse-ui-formControl-input-hover-border-style) var(--gse-ui-formControl-input-hover-border-color);