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

genesys-spark-components 4.0.0-beta.52 → 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 (407) hide show

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

@@ -22,22 +22,23 @@
   border-bottom-right-radius: 0;
 }
 .gux-action-button-container .gux-dropdown-button button {
-  width: 32px;
+  width: var(--gse-ui-button-iconOnly-width);
   padding: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 .gux-action-button-container .gux-dropdown-button button gux-icon {
-  width: 16px;
-  height: 16px;
+  width: var(--gse-ui-button-icon-size);
+  height: var(--gse-ui-button-icon-size);
 }
 .gux-action-button-container .gux-list-container {
   max-width: 220px;
-  padding: var(--gux-spacing-xs) 0;
   margin: 0;
-  list-style: none;
-  background-color: var(--gse-ui-menu-wrapper-backgroundColor);
-  border: 1px solid var(--gse-ui-menu-wrapper-border);
-  border-radius: 4px;
-  box-shadow: 0 4px 6px 1px rgba(35, 57, 92, 0.12);
+  overflow-y: auto;
+  background: var(--gse-ui-menu-backgroundColor);
+  border-color: var(--gse-ui-menu-border-color);
+  border-style: var(--gse-ui-menu-border-style);
+  border-width: var(--gse-ui-menu-border-width);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

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

@@ -40,8 +40,9 @@
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  place-content: flex-start flex-start;
+  align-content: flex-start;
   align-items: center;
+  justify-content: flex-start;
   min-height: var(--gse-ui-breadcrumbs-secondary-height);
 }
 .gux-breadcrumb-generation .gux-breadcrumb-content {

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

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

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

@@ -16,11 +16,12 @@
 .gux-list-container {
   max-width: 220px;
-  padding: var(--gux-spacing-xs) 0;
   margin: 0;
-  list-style: none;
-  background-color: var(--gse-ui-menu-wrapper-backgroundColor);
-  border: 1px solid var(--gse-ui-menu-wrapper-border);
-  border-radius: 4px;
-  box-shadow: 0 4px 6px 1px rgba(35, 57, 92, 0.12);
+  overflow-y: auto;
+  background: var(--gse-ui-menu-backgroundColor);
+  border-color: var(--gse-ui-menu-border-color);
+  border-style: var(--gse-ui-menu-border-style);
+  border-width: var(--gse-ui-menu-border-width);
+  border-radius: var(--gse-ui-menu-borderRadius);
+  box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

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

@@ -14,8 +14,9 @@
   flex-direction: row;
   flex-wrap: nowrap;
   gap: var(--gse-ui-dataTableItems-editColumn-editColumnItem-gap);
-  place-content: stretch flex-start;
+  align-content: stretch;
   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 CHANGED Viewed

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

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

@@ -42,13 +42,12 @@ button[disabled] {
 .gux-list-container {
   width: 220px;
   max-height: 330px;
-  padding: var(--gse-ui-menu-padding);
   margin: 0;
   overflow-y: auto;
-  text-align: left;
-  list-style: none;
-  background-color: var(--gse-ui-menu-backgroundColor);
-  border: var(--gse-ui-menu-border-width) var(--gse-ui-menu-border-style) var(--gse-ui-menu-border-color);
+  background: var(--gse-ui-menu-backgroundColor);
+  border-color: var(--gse-ui-menu-border-color);
+  border-style: var(--gse-ui-menu-border-style);
+  border-width: var(--gse-ui-menu-border-width);
   border-radius: var(--gse-ui-menu-borderRadius);
   box-shadow: var(--gse-ui-menu-boxShadow-x) var(--gse-ui-menu-boxShadow-y) var(--gse-ui-menu-boxShadow-blur) var(--gse-ui-menu-boxShadow-spread) var(--gse-ui-menu-boxShadow-color);
 }

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-menu-option/gux-menu-option.css CHANGED Viewed

@@ -7,7 +7,7 @@
   all: unset;
   width: var(--gse-ui-flyoutMenu-width);
   height: var(--gse-ui-menu-option-height);
-  padding: 4px 12px;
+  padding: var(--gse-ui-menu-option-padding);
   line-height: var(--gse-ui-menu-option-label-default-text-lineHeight);
   color: var(--gse-ui-menu-option-label-foregroundColor);
   background-color: var(--gse-ui-menu-option-default-backgroundColor);

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