genesys-spark-components 4.0.0-beta.54 → 4.0.0-beta.56

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

@@ -8,9 +8,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: stretch;
-  justify-content: flex-start;
   width: 270px;
   padding: 20px 24px;
   margin-bottom: 4px;
@@ -26,10 +25,9 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   align-self: auto;
-  justify-content: flex-start;
   order: 0;
   font-family: var(--gse-core-typography-heading-lg-fontFamily), var(--gse-core-fontFamily-heading), sans-serif;
   font-size: var(--gse-core-typography-heading-lg-fontSize);
@@ -67,9 +65,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   margin: 0;
 }
 
@@ -78,10 +75,9 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: flex-start;
   align-self: auto;
-  justify-content: space-between;
   order: 0;
 }
 .gux-action-buttons .gux-negative-button {
@@ -100,10 +96,9 @@
   flex: 0 1 auto;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: flex-start;
   align-self: auto;
-  justify-content: space-between;
   order: 0;
 }
 .gux-action-buttons .gux-negative-button {

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

@@ -9,9 +9,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   width: 294px;
   padding: 16px 8px 16px 16px;
   margin-bottom: 4px;
@@ -51,10 +50,9 @@
   flex: 1 1 auto;
   flex-direction: column;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
   align-self: auto;
-  justify-content: flex-start;
   order: 0;
   margin: 0 12px 0 8px;
   color: #2e394c;

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

@@ -3,9 +3,8 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch flex-end;
   align-items: center;
-  justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container.gux-expanded {
@@ -24,9 +23,8 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-input-container > div {
   flex: 0 1 auto;
@@ -46,9 +44,8 @@ gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 gux-pagination-buttons-legacy .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-button {
   height: 32px;

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

@@ -3,9 +3,8 @@ gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
 }
 gux-pagination-items-per-page-legacy .gux-pagination-items-per-page-container > div {
   flex: 0 1 auto;

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

@@ -7,9 +7,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch space-between;
   align-items: center;
-  justify-content: space-between;
   height: var(--gse-ui-dataTableItems-cell-tablePagination-height);
   padding: var(--gse-ui-dataTableItems-tablePagination-padding);
   background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
@@ -20,10 +19,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
   align-self: auto;
-  justify-content: flex-start;
   order: 0;
 }
 .gux-pagination-container .gux-pagination-info > * {

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

@@ -3,9 +3,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   width: 286px;
   margin-bottom: 4px;
   color: #2e394c;

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

@@ -20,9 +20,8 @@ section.gux-disabled > * {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: center;
+  place-content: center flex-start;
   align-items: center;
-  justify-content: flex-start;
   width: 100%;
   padding: var(--gse-ui-accordion-header-padding);
   margin: 0;

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

@@ -1,5 +1,9 @@
 /**
-  * @prop --gse-semantic-color-focus : //TODO https://inindca.atlassian.net/browse/COMUI-2115
+  * @prop --gse-semantic-focusRing-cornerRadius
+  * @prop --gse-semantic-focusRing-default-border-color
+  * @prop --gse-semantic-focusRing-default-border-style
+  * @prop --gse-semantic-focusRing-default-border-width
+  * @prop --gse-semantic-focusRing-offset
   * @prop --gse-ui-breadcrumbs-primary-height
   * @prop --gse-ui-breadcrumbs-primary-separator-padding
   * @prop --gse-ui-breadcrumbs-primary-separator-typography-fontFamily
@@ -40,9 +44,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: flex-start;
+  place-content: flex-start flex-start;
   align-items: center;
-  justify-content: flex-start;
   min-height: var(--gse-ui-breadcrumbs-secondary-height);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content {
@@ -76,9 +79,9 @@
   color: var(--gse-ui-link-active-foregroundColor);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content.gux-link:focus-visible {
-  border-radius: 1px;
-  outline: 2px solid var(--gse-semantic-color-focus);
-  outline-offset: 3px;
+  outline: var(--gse-semantic-focusRing-default-border-color) var(--gse-semantic-focusRing-default-border-style) var(--gse-semantic-focusRing-default-border-width);
+  outline-offset: var(--gse-semantic-focusRing-offset);
+  border-radius: var(--gse-semantic-focusRing-cornerRadius);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-separator {
   padding: var(--gse-ui-breadcrumbs-secondary-separator-padding);

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

@@ -2,9 +2,8 @@ ol {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  align-content: flex-start;
+  place-content: flex-start flex-start;
   align-items: center;
-  justify-content: flex-start;
   padding: 0;
   margin: 0;
   list-style: none;

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

@@ -14,9 +14,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-editColumn-editColumnItem-gap);
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   margin-bottom: -2px;
   border-top: 2px solid transparent;
   border-bottom: 2px solid transparent;

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

@@ -86,9 +86,8 @@
   flex-grow: 1;
   flex-shrink: 0;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: center;
+  place-content: center flex-end;
   align-items: center;
-  justify-content: flex-end;
   padding: 0;
 }
 .gux-content-search .gux-content-control-panel gux-icon {

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

@@ -46,6 +46,7 @@ button {
   visibility: visible;
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content gux-icon[icon-name=copy] {
+  flex-shrink: 0;
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);
   padding: var(--gse-ui-copyToClipboard-iconContainer-padding);

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

@@ -42,9 +42,8 @@
   display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: flex-start;
+  place-content: flex-start flex-start;
   align-items: center;
-  justify-content: flex-start;
 }
 .gux-datepicker .gux-datepicker-field ~ .gux-datepicker-field {
   margin-left: 20px;
@@ -73,9 +72,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-input-padding);

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

@@ -10,9 +10,8 @@ gux-button-slot .gux-icon-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 8px;
 }
 gux-button-slot .gux-icon-container gux-icon {

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

@@ -10,9 +10,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
@@ -50,9 +49,8 @@
   flex: 1 1 0;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   min-width: 0;
   height: var(--gse-ui-formControl-input-contentText-lineHeight);
 }

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

@@ -6,9 +6,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   height: var(--gse-ui-tag-height);
   padding: var(--gse-ui-tag-removable-padding);
   font-family: var(--gse-ui-tag-text-fontFamily);
@@ -30,9 +29,8 @@
 .gux-tag .gux-tag-remove-button {
   all: unset;
   display: flex;
-  align-content: center;
+  place-content: center center;
   align-items: center;
-  justify-content: center;
   margin-left: var(--gse-ui-tag-removable-gap);
 }
 .gux-tag .gux-tag-remove-button:not(:disabled):hover {

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

@@ -22,9 +22,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
@@ -54,9 +53,8 @@
   flex: 1 1 0;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   min-width: 0;
   height: var(--gse-ui-formControl-input-contentText-lineHeight);
 }

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

@@ -8,9 +8,8 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   width: var(--gse-ui-flyoutMenu-width);
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);

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

@@ -23,9 +23,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -54,9 +53,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -131,10 +129,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
   align-self: auto;
-  justify-content: center;
   order: 0;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);

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

@@ -13,9 +13,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -46,7 +45,7 @@
 }
 .gux-form-field-legend-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   float: left;
   width: fit-content;
   min-width: 45px;
@@ -68,9 +67,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -130,10 +128,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
   align-self: auto;
-  justify-content: center;
   order: 0;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);

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

@@ -12,9 +12,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -45,7 +44,7 @@
 }
 .gux-form-field-legend-label.gux-beside {
   position: relative;
-  top: 8px;
+  top: var(--gse-ui-formControl-input-top);
   float: left;
   width: fit-content;
   min-width: 45px;

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

@@ -24,9 +24,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -55,9 +54,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);

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

@@ -35,9 +35,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -89,9 +88,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -138,9 +136,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-slider-gap);
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: center;
-  justify-content: flex-start;
   height: 32px;
   font-size: var(--gse-ui-slider-label-text-fontSize);
 }

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -129,10 +127,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
   align-self: auto;
-  justify-content: center;
   order: 0;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -124,9 +122,8 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);

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

@@ -10,9 +10,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-errorPadding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -64,9 +63,8 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  align-content: stretch;
+  place-content: stretch flex-start;
   align-items: flex-start;
-  justify-content: flex-start;
   padding: var(--gse-ui-formControl-helper-padding);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
@@ -131,9 +129,8 @@ slot[name=suffix] {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  align-content: stretch;
+  place-content: stretch center;
   align-items: center;
-  justify-content: center;
   width: 100%;
   height: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-input-padding);