genesys-spark-components 4.97.0 → 4.98.1

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

@@ -3,7 +3,7 @@
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -34,8 +34,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -51,7 +51,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -85,8 +85,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -102,7 +102,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -126,14 +126,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;
@@ -157,18 +157,18 @@
 }
 
 ::slotted(gux-form-field-checkbox) {
-  padding-top: var(--gse-ui-formControl-group-gapItems);
+  padding-block-start: var(--gse-ui-formControl-group-gapItems);
 }
 
 ::slotted(gux-form-field-checkbox:first-of-type) {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 
 :host(.gux-group-checkbox) ::slotted(gux-form-field-checkbox) {
-  padding-left: 24px;
+  padding-inline-start: 24px;
 }
 :host(.gux-group-checkbox) slot[name=group-checkbox]::slotted(gux-form-field-checkbox) {
-  padding-left: 0;
+  padding-inline-start: 0;
 }
 
 .gux-form-field-legend-label {

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

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -44,14 +44,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -69,7 +69,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -100,14 +100,14 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  width: var(--gse-ui-colorPicker-input-swatchSizing);
-  min-width: var(--gse-ui-colorPicker-input-swatchSizing);
-  height: var(--gse-ui-colorPicker-input-swatchSizing);
+  inline-size: var(--gse-ui-colorPicker-input-swatchSizing);
+  min-inline-size: var(--gse-ui-colorPicker-input-swatchSizing);
+  block-size: var(--gse-ui-colorPicker-input-swatchSizing);
   padding: 0;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   color: var(--gse-ui-formControl-input-populatedColor);
-  text-align: right;
+  text-align: end;
   text-overflow: ellipsis;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
@@ -138,8 +138,8 @@
   align-items: center;
   align-self: auto;
   order: 0;
-  width: var(--gse-ui-formControl-input-colorPicker-size);
-  height: var(--gse-ui-formControl-input-colorPicker-size);
+  inline-size: var(--gse-ui-formControl-input-colorPicker-size);
+  block-size: var(--gse-ui-formControl-input-colorPicker-size);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   line-height: var(--gse-ui-formControl-input-contentText-lineHeight);

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

@@ -3,7 +3,7 @@
 /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -34,8 +34,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -51,7 +51,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -75,14 +75,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;
@@ -111,5 +111,5 @@
 
 .gux-input-and-error-container {
   flex-grow: 1;
-  width: 100%;
+  inline-size: 100%;
 }

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

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -44,14 +44,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -69,7 +69,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);

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

@@ -25,8 +25,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -44,14 +44,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -69,7 +69,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -100,11 +100,11 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100%;
-  padding-bottom: 0;
+  inline-size: 100%;
+  padding-block-end: 0;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
-  text-align: right;
+  text-align: end;
   text-overflow: ellipsis;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
   border: none;
@@ -124,7 +124,7 @@
   flex-wrap: nowrap;
   align-content: stretch;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 }
 .gux-input-and-error-container .gux-input .gux-input-container {
   box-sizing: border-box;
@@ -137,8 +137,8 @@
   align-items: center;
   align-self: auto;
   order: 0;
-  width: 100%;
-  height: var(--gse-ui-formControl-input-textfield-height);
+  inline-size: 100%;
+  block-size: var(--gse-ui-formControl-input-textfield-height);
   padding: var(--gse-ui-formControl-input-padding);
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
@@ -168,7 +168,7 @@
   flex: 0 1 14px;
   align-self: auto;
   order: 0;
-  margin-left: var(--gse-ui-formControl-spinButton-gap);
+  margin-inline-start: var(--gse-ui-formControl-spinButton-gap);
 }
 .gux-step-buttons-container .gux-step-button {
   display: flex;
@@ -188,6 +188,6 @@
 }
 .gux-step-buttons-container .gux-step-button gux-icon {
   flex: 0 0 auto;
-  width: 14px;
-  height: 14px;
+  inline-size: 14px;
+  block-size: 14px;
 }

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

@@ -2,7 +2,7 @@
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -50,7 +50,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -74,14 +74,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;

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

@@ -39,8 +39,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -56,7 +56,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -73,7 +73,7 @@
 
 :host {
   display: block;
-  padding-top: 4px;
+  padding-block-start: 4px;
 }
 
 :host(.gux-disabled) {
@@ -115,8 +115,8 @@
 
 ::slotted(input[type=radio]) {
   display: inline-grid;
-  width: var(--gse-ui-radioButton-icon-width);
-  height: var(--gse-ui-radioButton-icon-height);
+  inline-size: var(--gse-ui-radioButton-icon-width);
+  block-size: var(--gse-ui-radioButton-icon-height);
   margin: 0;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   text-align: center;

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

@@ -2,7 +2,7 @@
 /* stylelint-disable-next-line selector-class-pattern */ /* stylelint-disable-next-line selector-class-pattern */
 .gux-form-field-fieldset-container {
   display: flex;
-  min-width: 0;
+  min-inline-size: 0;
   padding: 0;
   margin: 0;
   border: none;
@@ -33,8 +33,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -50,7 +50,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -84,8 +84,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -101,7 +101,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -125,14 +125,14 @@
 }
 .gux-form-field-visual-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-visual-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-visual-label.gux-screenreader {
   display: none;
@@ -152,11 +152,11 @@
 }
 
 ::slotted(gux-form-field-radio) {
-  padding-top: var(--gse-ui-formControl-group-gapItems);
+  padding-block-start: var(--gse-ui-formControl-group-gapItems);
 }
 
 ::slotted(gux-form-field-radio:first-of-type) {
-  padding-top: 0;
+  padding-block-start: 0;
 }
 
 :host([disabled]) ::slotted(label) {

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

@@ -50,8 +50,8 @@
 .gux-form-field-error gux-icon {
   flex: 0 1 auto;
   order: 0;
-  min-width: var(--gse-ui-icon-small-size);
-  min-height: var(--gse-ui-icon-small-size);
+  min-inline-size: var(--gse-ui-icon-small-size);
+  min-block-size: var(--gse-ui-icon-small-size);
   color: var(--gse-ui-formControl-helper-errorColor);
 }
 .gux-form-field-error .gux-message {
@@ -69,14 +69,14 @@
 }
 .gux-form-field-label.gux-beside {
   position: relative;
-  top: var(--gse-ui-formControl-input-top);
-  width: fit-content;
-  min-width: var(--gse-ui-formControl-input-textfield-minWidth);
-  max-width: fit-content;
-  margin-right: var(--gse-ui-formControl-group-gapItems);
+  inset-block-start: var(--gse-ui-formControl-input-top);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-formControl-input-textfield-minWidth);
+  max-inline-size: fit-content;
+  margin-inline-end: var(--gse-ui-formControl-group-gapItems);
 }
 .gux-form-field-label.gux-above {
-  padding-bottom: var(--gse-ui-formControl-formField-gap);
+  padding-block-end: var(--gse-ui-formControl-formField-gap);
 }
 .gux-form-field-label.gux-screenreader {
   position: absolute;
@@ -94,7 +94,7 @@
   place-content: stretch flex-start;
   align-items: flex-start;
   justify-content: flex-start;
-  padding-top: var(--gse-ui-formControl-formField-gap);
+  padding-block-start: var(--gse-ui-formControl-formField-gap);
   font-family: var(--gse-ui-formControl-helper-helperText-fontFamily);
   font-size: var(--gse-ui-formControl-helper-helperText-fontSize);
   line-height: var(--gse-ui-formControl-helper-helperText-lineHeight);
@@ -123,11 +123,12 @@
 
 ::slotted(input[type=range]) {
   position: absolute;
-  width: 100%;
-  width: 100%;
-  height: var(--gse-ui-slider-bar-height);
-  margin: calc(var(--gse-ui-slider-handle-width) / 2) 0;
-  margin-top: calc(-1 * (var(--gse-ui-slider-handle-width) / 2 + var(--gse-ui-slider-bar-height)));
+  inline-size: 100%;
+  inline-size: 100%;
+  block-size: var(--gse-ui-slider-bar-height);
+  margin-block: calc(var(--gse-ui-slider-handle-width) / 2);
+  margin-block-start: calc(-1 * (var(--gse-ui-slider-handle-width) / 2 + var(--gse-ui-slider-bar-height)));
+  margin-inline: 0;
   -webkit-appearance: none;
   background: transparent;
 }
@@ -145,7 +146,7 @@
   gap: var(--gse-ui-slider-gap);
   place-content: stretch flex-start;
   align-items: center;
-  height: 32px;
+  block-size: 32px;
   font-size: var(--gse-ui-slider-label-text-fontSize);
 }
 .gux-input-and-error-container .gux-range-input-container.gux-disabled {
@@ -161,14 +162,15 @@
   visibility: visible;
 }
 .gux-input-and-error-container .gux-range-input-container .gux-range .gux-track {
-  width: 100%;
-  height: var(--gse-ui-slider-bar-height);
-  margin: 6px 0;
+  inline-size: 100%;
+  block-size: var(--gse-ui-slider-bar-height);
+  margin-block: 6px;
+  margin-inline: 0;
   background: var(--gse-ui-slider-bar-default-backgroundColor);
   border-radius: var(--gse-ui-slider-track-borderRadius);
 }
 .gux-input-and-error-container .gux-range-input-container .gux-range .gux-track .gux-progress {
-  height: var(--gse-ui-slider-bar-height);
+  block-size: var(--gse-ui-slider-bar-height);
   background-color: var(--gse-ui-slider-bar-selected-backgroundColor);
   border-radius: var(--gse-ui-slider-track-borderRadius);
 }
@@ -176,12 +178,13 @@
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  margin: 0 0 0 var(--gux-spacing-medium);
+  margin-block: 0;
+  margin-inline: var(--gux-spacing-medium) 0;
   font-family: var(--gse-ui-slider-label-text-fontFamily);
   font-size: var(--gse-ui-slider-label-text-fontSize);
   font-weight: var(--gse-ui-slider-label-text-fontWeight);
   line-height: var(--gse-ui-slider-label-text-lineHeight);
-  text-align: right;
+  text-align: end;
 }
 .gux-input-and-error-container .gux-range-input-container .gux-display.gux-hidden {
   display: none;