npm - genesys-spark-components - Versions diffs - 4.0.0-beta.53 → 4.0.0-beta.54 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (398) hide show

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

@@ -1,6 +1,6 @@
 /**
-  * @prop --gse-ui-copyToClipboard-contentContainer-gap : https://inindca.atlassian.net/browse/COMUI-2153
-  * @prop --gse-ui-copyToClipboard-gap : https://inindca.atlassian.net/browse/COMUI-2153
+  * @prop --gse-ui-copyToClipboard-contentContainer-gap
+  * @prop --gse-ui-tooltip-targetOffset - not using this token because the target offset is hardcoded to 16 within gux-tooltip
   * @prop --gse-ui-copyToClipboard-iconContainer-padding
   * @prop --gse-ui-copyToClipboard-label-active-backgroundColor
   * @prop --gse-ui-copyToClipboard-label-borderRadius
@@ -25,6 +25,7 @@ button {
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content {
   display: inherit;
+  gap: var(--gse-ui-copyToClipboard-contentContainer-gap);
   align-items: inherit;
   cursor: pointer;
 }
@@ -48,7 +49,6 @@ button {
   width: var(--gse-ui-icon-size-sm);
   height: var(--gse-ui-icon-size-sm);
   padding: var(--gse-ui-copyToClipboard-iconContainer-padding);
-  margin-left: var(--gse-ui-copyToClipboard-contentContainer-gap);
   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 CHANGED Viewed

@@ -42,8 +42,9 @@
   display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: flex-start flex-start;
+  align-content: flex-start;
   align-items: center;
+  justify-content: flex-start;
 }
 .gux-datepicker .gux-datepicker-field ~ .gux-datepicker-field {
   margin-left: 20px;
@@ -72,8 +73,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  place-content: stretch center;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@ gux-button-slot .gux-icon-container {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch center;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch center;
+  align-content: stretch;
   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);
@@ -49,8 +50,9 @@
   flex: 1 1 0;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -6,8 +6,9 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -29,8 +30,9 @@
 .gux-tag .gux-tag-remove-button {
   all: unset;
   display: flex;
-  place-content: center center;
+  align-content: 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 CHANGED Viewed

@@ -22,8 +22,9 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch center;
+  align-content: stretch;
   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);
@@ -53,8 +54,9 @@
   flex: 1 1 0;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -8,8 +8,9 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -23,8 +23,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -53,8 +54,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -63,8 +64,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -96,8 +98,8 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 32px;
-  height: var(--gse-ui-formControl-input-textfield-height);
+  width: var(--gse-ui-formControl-input-colorPicker-size);
+  height: var(--gse-ui-formControl-input-colorPicker-size);
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   color: var(--gse-ui-formControl-input-populatedColor);
@@ -129,9 +131,10 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  place-content: stretch center;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -13,8 +13,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -67,8 +68,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -63,8 +64,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -128,9 +130,10 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  place-content: stretch center;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -12,8 +12,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);

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

@@ -24,8 +24,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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,8 +55,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -84,12 +86,12 @@
 }
 :host(.gux-input-error) input[type=radio]:checked::before {
-  background: #e22245;
+  background: var(--gse-ui-radioButton-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }
 :host(.gux-input-error) ::slotted(input[type=radio]:not(:checked))::before {
-  background: #e22245;
+  background: var(--gse-ui-radioButton-icon-error-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }
@@ -137,25 +139,25 @@
 }
 ::slotted(input[type=radio]:not(:checked))::before {
-  background: #767c8d;
+  background: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%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='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
 }
 ::slotted(input[type=radio]:not(:checked):not(:disabled):hover)::before {
-  background: #3742a2;
+  background: var(--gse-ui-radioButton-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%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='M16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40937 1.5 1.5 4.40937 1.5 8C1.5 11.5906 4.40937 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40937 11.5906 1.5 8 1.5Z' fill-rule='evenodd' clip-rule='evenodd' /%3E%3C/svg%3E");
 }
 ::slotted(input[type=radio]:checked:not(:disabled):hover)::before {
-  background: #3742a2;
+  background: var(--gse-ui-radioButton-icon-hover-foregroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }
 ::slotted(input[type=radio]:checked)::before {
-  background: #4856cb;
+  background: var(--gse-ui-radioButton-icon-default-selectedForegroundColor);
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 8C5 6.31563 6.31563 5 8 5C9.65625 5 11 6.31563 11 8C11 9.65625 9.65625 11 8 11C6.31563 11 5 9.65625 5 8ZM16 8C16 12.4187 12.4187 16 8 16C3.58125 16 0 12.4187 0 8C0 3.58125 3.58125 0 8 0C12.4187 0 16 3.58125 16 8ZM8 1.5C4.40938 1.5 1.5 4.40938 1.5 8C1.5 11.5906 4.40938 14.5 8 14.5C11.5906 14.5 14.5 11.5906 14.5 8C14.5 4.40938 11.5906 1.5 8 1.5Z' /%3E%3C/svg%3E");
 }

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

@@ -35,8 +35,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -88,8 +89,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -136,8 +138,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-slider-gap);
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -63,8 +64,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -127,9 +129,10 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  place-content: stretch center;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -63,8 +64,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -122,8 +124,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  place-content: stretch center;
+  align-content: stretch;
   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 CHANGED Viewed

@@ -10,8 +10,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -63,8 +64,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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,8 +131,9 @@ slot[name=suffix] {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-formControl-input-gap);
-  place-content: stretch center;
+  align-content: stretch;
   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-form-field/components/gux-form-field-textarea/gux-form-field-textarea.css CHANGED Viewed

@@ -10,8 +10,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -63,8 +64,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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-time-picker/gux-form-field-time-picker.css CHANGED Viewed

@@ -13,8 +13,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -67,8 +68,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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-time-zone-picker/gux-form-field-time-zone-picker.css CHANGED Viewed

@@ -13,8 +13,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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);
@@ -67,8 +68,9 @@
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   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-list/gux-list.css CHANGED Viewed

@@ -2,7 +2,8 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  place-content: stretch flex-start;
+  align-content: stretch;
   align-items: flex-start;
+  justify-content: flex-start;
   padding: var(--gse-ui-menu-padding);
 }

package/dist/collection/components/stable/gux-listbox/gux-listbox.css CHANGED Viewed

@@ -4,7 +4,8 @@
   max-height: 20rem;
   padding: var(--gse-ui-menu-padding);
   margin: 0;
-  overflow: visible auto;
+  overflow-x: visible;
+  overflow-y: auto;
   background: var(--gse-ui-menu-backgroundColor);
   border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
   border-radius: var(--gse-ui-menu-borderRadius);
@@ -21,8 +22,9 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  place-content: stretch center;
+  align-content: stretch;
   align-items: center;
+  justify-content: center;
   text-align: center;
 }
 .gux-message-container .gux-no-matches {

package/dist/collection/components/stable/gux-listbox/options/gux-option/gux-option.css CHANGED Viewed

@@ -4,8 +4,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-menu-option-gap);
-  place-content: stretch center;
+  align-content: stretch;
   align-items: center;
+  justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);

package/dist/collection/components/stable/gux-listbox/options/gux-option-icon/gux-option-icon.css CHANGED Viewed

@@ -4,8 +4,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-menu-option-gap);
-  place-content: stretch center;
+  align-content: stretch;
   align-items: center;
+  justify-content: center;
   height: var(--gse-ui-menu-option-height);
   padding: var(--gse-ui-menu-option-padding);
   font-family: var(--gse-ui-menu-option-label-default-text-fontFamily);

package/dist/collection/components/stable/gux-listbox-multi/gux-listbox-multi.css CHANGED Viewed

@@ -16,8 +16,9 @@
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
-  place-content: stretch center;
+  align-content: stretch;
   align-items: center;
+  justify-content: center;
 }
 .gux-message-container .gux-no-matches {
   box-sizing: border-box;

package/dist/collection/components/stable/gux-pagination/gux-pagination-buttons/gux-pagination-buttons.css CHANGED Viewed

@@ -3,8 +3,9 @@ gux-pagination-buttons .gux-pagination-buttons-container {
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  place-content: stretch flex-end;
+  align-content: stretch;
   align-items: center;
+  justify-content: flex-end;
   margin-left: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
 }
 gux-pagination-buttons .gux-pagination-buttons-container > div {
@@ -24,8 +25,9 @@ gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons
   flex-shrink: 0;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-tablePagination-recordsetControls-gap);
-  place-content: stretch center;
+  align-content: stretch;
   align-items: center;
+  justify-content: center;
 }
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-current,
 gux-pagination-buttons .gux-pagination-buttons-container .gux-pagination-buttons-list-container .gux-pagination-buttons-list-target {

package/dist/collection/components/stable/gux-pagination/gux-pagination-items-per-page/gux-pagination-items-per-page.css CHANGED Viewed

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