genesys-spark-components 4.97.0 → 4.98.0

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;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-search/gux-form-field-search.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,7 +100,7 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   color: var(--gse-ui-formControl-input-populatedColor);
@@ -135,8 +135,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);
@@ -157,8 +157,8 @@
   flex: 0 0 auto;
   align-self: auto;
   order: 0;
-  width: var(--gse-ui-formControl-input-inputIcon-size);
-  height: var(--gse-ui-formControl-input-inputIcon-size);
+  inline-size: var(--gse-ui-formControl-input-inputIcon-size);
+  block-size: var(--gse-ui-formControl-input-inputIcon-size);
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 .gux-input-and-error-container .gux-input .gux-input-container:focus-within {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-select/gux-form-field-select.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,9 +100,9 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100%;
-  height: var(--gse-ui-formControl-input-textfield-height);
-  padding-left: var(--gse-ui-formControl-input-gap);
+  inline-size: 100%;
+  block-size: var(--gse-ui-formControl-input-textfield-height);
+  padding-inline-start: var(--gse-ui-formControl-input-gap);
   color: var(--gse-ui-formControl-input-populatedColor);
   -moz-appearance: none;
   -webkit-appearance: none;
@@ -129,7 +129,7 @@
   gap: var(--gse-ui-formControl-input-gap);
   place-content: stretch center;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   font-weight: var(--gse-ui-formControl-input-contentText-fontWeight);
@@ -149,10 +149,10 @@
 }
 .gux-input-and-error-container .gux-input .gux-input-container gux-icon {
   position: absolute;
-  top: 0;
-  right: 0;
-  width: var(--gse-ui-formControl-input-inputIcon-size);
-  height: var(--gse-ui-formControl-input-inputIcon-size);
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  inline-size: var(--gse-ui-formControl-input-inputIcon-size);
+  block-size: var(--gse-ui-formControl-input-inputIcon-size);
   margin: var(--gse-ui-formControl-input-padding);
   pointer-events: none;
 }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.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,7 +100,7 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100%;
+  inline-size: 100%;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
   text-overflow: ellipsis;
@@ -135,8 +135,8 @@ slot[name=suffix] {
   gap: var(--gse-ui-formControl-input-gap);
   place-content: stretch center;
   align-items: center;
-  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);
@@ -150,7 +150,7 @@ slot[name=suffix] {
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-has-suffix:not(.gux-input-and-error-container .gux-input .gux-input-container.gux-has-prefix) ::slotted(input) {
-  text-align: right;
+  text-align: end;
 }
 .gux-input-and-error-container .gux-input .gux-input-container.gux-disabled {
   cursor: default;

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.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-time-picker/gux-form-field-time-picker.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-time-zone-picker/gux-form-field-time-zone-picker.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/helper-components/gux-form-field-input-clear-button/gux-form-field-input-clear-button.css

@@ -11,8 +11,8 @@ button:not(:disabled):focus-visible, button:not(:disabled):hover {
   cursor: pointer;
 }
 button gux-icon {
-  width: var(--gse-ui-icon-small-size);
-  height: var(--gse-ui-icon-small-size);
+  inline-size: var(--gse-ui-icon-small-size);
+  block-size: var(--gse-ui-icon-small-size);
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 }
 button:focus {

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

@@ -1,7 +1,7 @@
 :host {
   display: block;
-  height: var(--gse-ui-dataTableItems-cell-tablePagination-height);
-  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
+  block-size: var(--gse-ui-dataTableItems-cell-tablePagination-height);
+  border-block-start: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
 
 .gux-pagination-container {
@@ -40,5 +40,5 @@
   order: 0;
 }
 .gux-pagination-container .gux-pagination-change:first-child {
-  margin-left: 0;
+  margin-inline-start: 0;
 }

package/dist/collection/components/stable/gux-pagination-cursor/gux-pagination-cursor.css

@@ -11,7 +11,7 @@
   line-height: var(--gse-ui-dataTableItems-tablePagination-defaultText-lineHeight);
   color: var(--gse-ui-dataTableItems-tablePagination-foregroundColor);
   background-color: var(--gse-ui-dataTableItems-tablePagination-defaultBackgroundColor);
-  border-top: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
+  border-block-start: var(--gse-ui-dataTableItems-tablePagination-divider-width) var(--gse-ui-dataTableItems-tablePagination-divider-style) var(--gse-ui-dataTableItems-tablePagination-divider-color);
 }
 :host .gux-pagination-button-container {
   display: flex;
@@ -33,6 +33,6 @@
   order: 0;
 }
 :host gux-icon {
-  width: var(--gse-ui-button-icon-size);
-  height: var(--gse-ui-button-icon-size);
+  inline-size: var(--gse-ui-button-icon-size);
+  block-size: var(--gse-ui-button-icon-size);
 }

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

@@ -1,10 +1,10 @@
 .gux-popover-wrapper {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--gse-semantic-zIndex-popover);
   display: inline-block;
-  min-width: 280px;
+  min-inline-size: 280px;
   padding: var(--gse-ui-popover-gap);
   background-color: var(--gse-ui-popover-backgroundColor);
   border-radius: var(--gse-ui-popover-borderRadius);
@@ -15,26 +15,26 @@
 }
 .gux-popover-wrapper .gux-arrow {
   position: absolute;
-  width: var(--gse-ui-popover-anchor-width);
-  height: var(--gse-ui-popover-anchor-height);
+  inline-size: var(--gse-ui-popover-anchor-width);
+  block-size: var(--gse-ui-popover-anchor-height);
   /* 4px padding leaves some space for the shadow to bleed into */
-  padding-bottom: 4px;
+  padding-block-end: 4px;
   overflow: hidden;
 }
 .gux-popover-wrapper .gux-arrow-caret {
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   filter: drop-shadow(var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) calc(var(--gse-ui-popover-boxShadow-blur) / 2) var(--gse-ui-popover-boxShadow-color));
-  border-top: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
-  border-right: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
-  border-left: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  border-block-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid var(--gse-ui-popover-backgroundColor);
+  border-inline-start: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
+  border-inline-end: calc(var(--gse-ui-popover-anchor-width) / 2) solid transparent;
 }
 .gux-popover-wrapper .gux-popover-header {
   display: flex;
   flex-direction: row;
   place-content: center space-between;
   align-items: center;
-  padding-bottom: var(--gse-ui-popover-gap);
+  padding-block-end: var(--gse-ui-popover-gap);
   font-family: var(--gse-ui-popover-title-text-fontFamily);
   font-size: var(--gse-ui-popover-title-text-fontSize);
   font-weight: var(--gse-ui-popover-title-text-fontWeight);
@@ -42,5 +42,5 @@
   color: var(--gse-ui-popover-headerColor);
 }
 .gux-popover-wrapper gux-dismiss-button {
-  float: right;
+  float: inline-end;
 }

package/dist/collection/components/stable/gux-popover-list/gux-popover-list.css

@@ -1,10 +1,11 @@
 .gux-popover-wrapper {
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--gse-semantic-zIndex-popover);
   display: inline-block;
-  padding: 8px 0;
+  padding-block: 8px;
+  padding-inline: 0;
   background-color: var(--gse-ui-popover-backgroundColor);
   border-radius: var(--gse-ui-popover-borderRadius);
   box-shadow: var(--gse-ui-popover-boxShadow-offsetX) var(--gse-ui-popover-boxShadow-offsetY) var(--gse-ui-popover-boxShadow-blur) var(--gse-ui-popover-boxShadow-spread) var(--gse-ui-popover-boxShadow-color);
@@ -14,7 +15,7 @@
 }
 .gux-popover-wrapper .gux-arrow {
   position: absolute;
-  width: var(--gse-ui-popover-anchor-width);
-  height: var(--gse-ui-popover-anchor-width);
+  inline-size: var(--gse-ui-popover-anchor-width);
+  block-size: var(--gse-ui-popover-anchor-width);
   background: var(--gse-ui-popover-backgroundColor);
 }

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

@@ -7,7 +7,7 @@
 .gux-popup-container {
   position: fixed;
   z-index: var(--gse-semantic-zIndex-popup);
-  width: max-content;
+  inline-size: max-content;
   visibility: hidden;
   background-color: var(--gse-ui-menu-backgroundColor);
 }

package/dist/collection/components/stable/gux-radial-loading/gux-radial-loading.css

@@ -136,8 +136,8 @@
 
 div[role=progressbar] .gux-svg-container {
   display: block;
-  width: var(--gse-ui-progressAndLoading-spinner-large);
-  height: var(--gse-ui-progressAndLoading-spinner-large);
+  inline-size: var(--gse-ui-progressAndLoading-spinner-large);
+  block-size: var(--gse-ui-progressAndLoading-spinner-large);
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle,
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle-mask {
@@ -167,8 +167,8 @@ div[role=progressbar].gux-full-page .gux-svg-container .gux-static-circle {
   display: none;
 }
 div[role=progressbar].gux-input .gux-svg-container {
-  width: var(--gse-ui-progressAndLoading-spinner-small);
-  height: var(--gse-ui-progressAndLoading-spinner-small);
+  inline-size: var(--gse-ui-progressAndLoading-spinner-small);
+  block-size: var(--gse-ui-progressAndLoading-spinner-small);
 }
 div[role=progressbar].gux-input .gux-svg-container .gux-dynamic-circle {
   fill: none;

package/dist/collection/components/stable/gux-radial-progress/gux-radial-progress.css

@@ -4,8 +4,8 @@
 
 div[role=progressbar] .gux-svg-container {
   display: block;
-  width: var(--gse-ui-progressAndLoading-spinner-large);
-  height: var(--gse-ui-progressAndLoading-spinner-large);
+  inline-size: var(--gse-ui-progressAndLoading-spinner-large);
+  block-size: var(--gse-ui-progressAndLoading-spinner-large);
 }
 div[role=progressbar] .gux-svg-container .gux-dynamic-circle {
   fill: none;

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

@@ -1,6 +1,6 @@
 :host {
   display: inline-block;
-  min-width: fit-content;
+  min-inline-size: fit-content;
   user-select: none;
 }
 
@@ -23,8 +23,8 @@
 }
 .gux-rating-star-container gux-icon {
   flex: 0 0 auto;
-  width: var(--gse-ui-rating-size);
-  height: var(--gse-ui-rating-size);
+  inline-size: var(--gse-ui-rating-size);
+  block-size: var(--gse-ui-rating-size);
   color: var(--gse-ui-rating-default-color);
 }
 .gux-rating-star-container gux-icon:hover:not(.gux-disabled) {