diff --git a/packages/genesys-spark-components/.stylelintrc.json b/packages/genesys-spark-components/.stylelintrc.json
index 30efc0eb4..285da05b5 100644
--- a/packages/genesys-spark-components/.stylelintrc.json
+++ b/packages/genesys-spark-components/.stylelintrc.json
@@ -4,7 +4,8 @@
     {
       "files": [
         "src/components/stable/gux-button/**/*.{scss,html}",
-        "src/components/stable/gux-button-slot/**/*.{scss,html}"
+        "src/components/stable/gux-button-slot/**/*.{scss,html}",
+        "src/components/beta/**/*.scss"
       ],
       "plugins": ["stylelint-use-logical-spec"],
       "rules": {
diff --git a/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar-change-photo/gux-avatar-change-photo.scss b/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar-change-photo/gux-avatar-change-photo.scss
index 8a08ae2f2..61c54d123 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar-change-photo/gux-avatar-change-photo.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar-change-photo/gux-avatar-change-photo.scss
@@ -20,8 +20,8 @@
 
     .gux-change-photo-icon {
       position: absolute;
-      top: 50%;
-      left: 50%;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
       z-index: var(--gse-semantic-zIndex-showFocus);
       display: inline-block;
       color: var(--gse-ui-avatar-hoverModal-foregroundColor);
@@ -30,10 +30,10 @@
 
     &::after {
       position: absolute;
-      top: var(--gse-ui-avatar-large-presenceRing-width);
-      left: var(--gse-ui-avatar-large-presenceRing-width);
-      width: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
-      height: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
+      inset-block-start: var(--gse-ui-avatar-large-presenceRing-width);
+      inset-inline-start: var(--gse-ui-avatar-large-presenceRing-width);
+      inline-size: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
+      block-size: var(--gse-ui-avatar-addChangeImage-hoverModal-shroudSize);
       content: '';
       background-color: var(--gse-ui-avatar-hoverModal-shroudColor);
       border: var(--gse-ui-avatar-content-large-border-width)
diff --git a/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar.scss b/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar.scss
index ea8532805..0a7c2b8eb 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-avatar/gux-avatar.scss
@@ -10,15 +10,15 @@
 }
 
 ::slotted(img) {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   object-fit: cover;
 }
 
 .gux-avatar {
   position: relative;
-  width: var(--gse-ui-avatar-large-size);
-  height: var(--gse-ui-avatar-large-size);
+  inline-size: var(--gse-ui-avatar-large-size);
+  block-size: var(--gse-ui-avatar-large-size);
   overflow: hidden;
   border-radius: 50%;
 
@@ -27,8 +27,8 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    width: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
-    height: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
+    inline-size: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
+    block-size: calc(100% - var(--gse-ui-avatar-large-presenceRing-width) * 2);
     margin: var(--gse-ui-avatar-large-presenceRing-width);
     overflow: hidden;
     font-family: var(--gse-ui-avatar-large-initials-fontFamily);
@@ -45,12 +45,16 @@
   }
 
   &.gux-medium {
-    width: var(--gse-ui-avatar-medium-size);
-    height: var(--gse-ui-avatar-medium-size);
+    inline-size: var(--gse-ui-avatar-medium-size);
+    block-size: var(--gse-ui-avatar-medium-size);
 
     & .gux-content {
-      width: calc(100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2);
-      height: calc(100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2);
+      inline-size: calc(
+        100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2
+      );
+      block-size: calc(
+        100% - var(--gse-ui-avatar-medium-presenceRing-width) * 2
+      );
       margin: var(--gse-ui-avatar-medium-presenceRing-width);
       font-size: var(--gse-ui-avatar-medium-initials-fontSize);
       font-weight: var(--gse-ui-avatar-medium-initials-fontWeight);
@@ -66,12 +70,16 @@
   }
 
   &.gux-small {
-    width: var(--gse-ui-avatar-small-size);
-    height: var(--gse-ui-avatar-small-size);
+    inline-size: var(--gse-ui-avatar-small-size);
+    block-size: var(--gse-ui-avatar-small-size);
 
     & .gux-content {
-      width: calc(100% - var(--gse-ui-avatar-small-presenceRing-width) * 2);
-      height: calc(100% - var(--gse-ui-avatar-small-presenceRing-width) * 2);
+      inline-size: calc(
+        100% - var(--gse-ui-avatar-small-presenceRing-width) * 2
+      );
+      block-size: calc(
+        100% - var(--gse-ui-avatar-small-presenceRing-width) * 2
+      );
       margin: var(--gse-ui-avatar-small-presenceRing-width);
       font-size: var(--gse-ui-avatar-small-initials-fontSize);
       font-weight: var(--gse-ui-avatar-small-initials-fontWeight);
@@ -79,12 +87,16 @@
   }
 
   &.gux-xsmall {
-    width: var(--gse-ui-avatar-xsmall-size);
-    height: var(--gse-ui-avatar-xsmall-size);
+    inline-size: var(--gse-ui-avatar-xsmall-size);
+    block-size: var(--gse-ui-avatar-xsmall-size);
 
     & .gux-content {
-      width: calc(100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2);
-      height: calc(100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2);
+      inline-size: calc(
+        100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2
+      );
+      block-size: calc(
+        100% - var(--gse-ui-avatar-xsmall-presenceRing-width) * 2
+      );
       margin: var(--gse-ui-avatar-xsmall-presenceRing-width);
       font-size: var(--gse-ui-avatar-xsmall-initials-fontSize);
       font-weight: var(--gse-ui-avatar-xsmall-initials-fontWeight);
@@ -225,33 +237,41 @@
 
 .gux-avatar-badge {
   position: absolute;
-  top: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
-  right: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
+  inset-block-start: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
+  inset-inline-end: calc(var(--gse-ui-avatar-content-large-border-width) * -1);
   z-index: var(--gse-semantic-zIndex-showFocus);
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--gse-ui-avatar-large-badge-size);
-  height: var(--gse-ui-avatar-large-badge-size);
+  inline-size: var(--gse-ui-avatar-large-badge-size);
+  block-size: var(--gse-ui-avatar-large-badge-size);
   border-color: var(--gse-ui-avatar-content-default-border-color);
   border-style: var(--gse-ui-avatar-content-default-border-style);
   border-width: var(--gse-ui-avatar-content-large-border-width);
   border-radius: 50%;
 
   &.gux-medium {
-    top: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
-    right: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
-    width: var(--gse-ui-avatar-medium-badge-size);
-    height: var(--gse-ui-avatar-medium-badge-size);
+    inset-block-start: calc(
+      var(--gse-ui-avatar-content-default-border-width) * -1
+    );
+    inset-inline-end: calc(
+      var(--gse-ui-avatar-content-default-border-width) * -1
+    );
+    inline-size: var(--gse-ui-avatar-medium-badge-size);
+    block-size: var(--gse-ui-avatar-medium-badge-size);
     border-width: var(--gse-ui-avatar-content-default-border-width);
   }
 
   &.gux-small,
   &.gux-xsmall {
-    top: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
-    right: calc(var(--gse-ui-avatar-content-default-border-width) * -1);
-    width: var(--gse-ui-avatar-small-badge-size);
-    height: var(--gse-ui-avatar-small-badge-size);
+    inset-block-start: calc(
+      var(--gse-ui-avatar-content-default-border-width) * -1
+    );
+    inset-inline-end: calc(
+      var(--gse-ui-avatar-content-default-border-width) * -1
+    );
+    inline-size: var(--gse-ui-avatar-small-badge-size);
+    block-size: var(--gse-ui-avatar-small-badge-size);
     border-width: var(--gse-ui-avatar-content-default-border-width);
 
     & gux-icon {
@@ -342,7 +362,7 @@
   }
 
   & gux-icon {
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
   }
 }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-calendar-beta/components/single/gux-calendar.scss b/packages/genesys-spark-components/src/components/beta/gux-calendar-beta/components/single/gux-calendar.scss
index b2c5583ac..61d0c0021 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-calendar-beta/components/single/gux-calendar.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-calendar-beta/components/single/gux-calendar.scss
@@ -16,7 +16,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: var(--gse-ui-calendarMenu-month-single-header-height);
+    block-size: var(--gse-ui-calendarMenu-month-single-header-height);
     padding: var(--gse-ui-calendarMenu-header-padding);
     font-style: normal;
     font-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
@@ -26,7 +26,7 @@
     border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
 
     .gux-header-month-and-year {
-      width: var(--gse-ui-calendarMenu-month-single-header-textWidth);
+      inline-size: var(--gse-ui-calendarMenu-month-single-header-textWidth);
       font-family: var(--gse-ui-calendarMenu-month-headerText-fontFamily);
       font-size: var(--gse-ui-calendarMenu-month-headerText-fontSize);
       line-height: var(--gse-ui-calendarMenu-month-headerText-lineHeight);
@@ -47,16 +47,15 @@
       }
 
       gux-icon {
-        width: 16px;
-        height: 16px;
+        inline-size: 16px;
+        block-size: 16px;
       }
     }
   }
 
   .gux-week-days {
-    padding-top: 24px;
-    padding-right: 24px;
-    padding-left: 24px;
+    padding-block-start: 24px;
+    padding-inline: 24px;
     font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
     font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
     font-weight: var(--gse-ui-calendarMenu-day-headerText-fontWeight);
@@ -65,8 +64,8 @@
 
     .gux-week-day {
       display: inline-block;
-      width: var(--gse-ui-calendarMenu-day-date-size);
-      height: 16px;
+      inline-size: var(--gse-ui-calendarMenu-day-date-size);
+      block-size: 16px;
     }
   }
 
@@ -80,8 +79,8 @@
   .gux-content-week {
     .gux-content-date {
       display: inline-block;
-      width: var(--gse-ui-calendarMenu-day-date-size);
-      height: var(--gse-ui-calendarMenu-day-input-height);
+      inline-size: var(--gse-ui-calendarMenu-day-date-size);
+      block-size: var(--gse-ui-calendarMenu-day-input-height);
       font-family: var(--gse-ui-calendarMenu-date-currentText-fontFamily);
       font-size: var(--gse-ui-calendarMenu-date-defaultText-fontSize);
       font-style: normal;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-cta-group/gux-cta-group.scss b/packages/genesys-spark-components/src/components/beta/gux-cta-group/gux-cta-group.scss
index 52acaf984..e4a94680a 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-cta-group/gux-cta-group.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-cta-group/gux-cta-group.scss
@@ -16,6 +16,6 @@
 
   ::slotted(gux-button) {
     flex: 0 1 auto;
-    min-width: 0;
+    min-inline-size: 0;
   }
 }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-flag-icon/gux-flag-icon.scss b/packages/genesys-spark-components/src/components/beta/gux-flag-icon/gux-flag-icon.scss
index c646cafc6..f7edadcf6 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-flag-icon/gux-flag-icon.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-flag-icon/gux-flag-icon.scss
@@ -22,8 +22,8 @@
 
 :host {
   display: inline-block;
-  width: fit-content;
-  height: fit-content;
+  inline-size: fit-content;
+  block-size: fit-content;
   line-height: 0;
   vertical-align: bottom;
   transform: scale(calc(2 / 3));
diff --git a/packages/genesys-spark-components/src/components/beta/gux-form/gux-form-footer/gux-form-footer.scss b/packages/genesys-spark-components/src/components/beta/gux-form/gux-form-footer/gux-form-footer.scss
index 67ab7e03d..d503f52e7 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-form/gux-form-footer/gux-form-footer.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-form/gux-form-footer/gux-form-footer.scss
@@ -3,11 +3,11 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    margin-top: var(
+    margin-block-start: var(
       --gse-semantic-forms-formBody-paddingBottom,
       var(--gse-semantic-formControl-formBody-paddingBottom)
     );
-    border-top: var(--gse-ui-formFooter-separator-width)
+    border-block-start: var(--gse-ui-formFooter-separator-width)
       var(--gse-ui-formFooter-separator-style)
       var(--gse-ui-formFooter-separator-color);
   }
@@ -15,9 +15,9 @@
 
 :host(.gux-form-footer-page-desktop) ::slotted(footer) {
   gap: var(--gse-ui-formFooter-page-desktop-gap);
-  padding: var(--gse-ui-formFooter-page-desktop-topPadding)
-    var(--gse-ui-formFooter-page-desktop-horizontalPadding)
-    var(--gse-ui-formFooter-page-desktop-bottomPadding)
+  padding-block: var(--gse-ui-formFooter-page-desktop-topPadding)
+    var(--gse-ui-formFooter-page-desktop-bottomPadding);
+  padding-inline: var(--gse-ui-formFooter-page-desktop-horizontalPadding)
     var(--gse-ui-formFooter-page-desktop-horizontalPadding);
 }
 
@@ -26,25 +26,25 @@
   gap: var(--gse-ui-formFooter-page-mobile-gap);
   align-items: stretch;
   justify-content: center;
-  padding: var(--gse-ui-formFooter-page-mobile-topPadding)
-    var(--gse-ui-formFooter-page-mobile-horizontalPadding)
-    var(--gse-ui-formFooter-page-mobile-bottomPadding)
+  padding-block: var(--gse-ui-formFooter-page-mobile-topPadding)
+    var(--gse-ui-formFooter-page-mobile-bottomPadding);
+  padding-inline: var(--gse-ui-formFooter-page-mobile-horizontalPadding)
     var(--gse-ui-formFooter-page-mobile-horizontalPadding);
 }
 
 :host(.gux-form-footer-side-sheet-desktop) ::slotted(footer) {
   gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
-  padding: var(--gse-ui-formFooter-sideSheet-desktop-topPadding)
-    var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding)
-    var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding)
+  padding-block: var(--gse-ui-formFooter-sideSheet-desktop-topPadding)
+    var(--gse-ui-formFooter-sideSheet-desktop-bottomPadding);
+  padding-inline: var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding)
     var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding);
 }
 
 :host(.gux-form-footer-modal-desktop) ::slotted(footer) {
   gap: var(--gse-ui-formFooter-sideSheet-desktop-gap);
   justify-content: flex-end;
-  padding: var(--gse-ui-formFooter-modal-desktop-topPadding)
-    var(--gse-ui-formFooter-modal-desktop-horizontalPadding)
-    var(--gse-ui-formFooter-modal-desktop-bottomPadding)
+  padding-block: var(--gse-ui-formFooter-modal-desktop-topPadding)
+    var(--gse-ui-formFooter-modal-desktop-bottomPadding);
+  padding-inline: var(--gse-ui-formFooter-modal-desktop-horizontalPadding)
     var(--gse-ui-formFooter-modal-desktop-horizontalPadding);
 }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-form/gux-form.light.scss b/packages/genesys-spark-components/src/components/beta/gux-form/gux-form.light.scss
index 59295433c..9854e9886 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-form/gux-form.light.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-form/gux-form.light.scss
@@ -1,6 +1,6 @@
 gux-form-beta {
   form {
-    max-width: var(
+    max-inline-size: var(
       --gse-semantic-forms-maxWidth,
       var(--gse-semantic-formControl-form-maxWidth)
     );
@@ -12,11 +12,11 @@ gux-form-beta {
         --gse-semantic-forms-formHeader-gap,
         var(--gse-semantic-formControl-formHeader-gap)
       );
-      padding-bottom: var(
+      padding-block-end: var(
         --gse-semantic-forms-formHeader-paddingBottom,
         var(--gse-semantic-formControl-fieldset-header-paddingBottom)
       );
-      text-align: left;
+      text-align: start;
 
       gux-form-heading {
         margin: 0;
@@ -83,13 +83,12 @@ gux-form-beta {
           --gse-semantic-forms-fieldset-header-gap,
           var(--gse-semantic-formControl-fieldset-header-gap)
         );
-        padding-right: 0;
-        padding-bottom: var(
+        padding-block-end: var(
           --gse-semantic-forms-fieldset-header-paddingBottom,
           var(--gse-semantic-formControl-fieldset-paddingBottom)
         );
-        padding-left: 0;
-        text-align: left;
+        padding-inline: 0;
+        text-align: start;
 
         gux-form-fieldset-heading {
           margin: 0;
@@ -119,7 +118,7 @@ gux-form-beta {
 
     /* Applies a 48px padding-bottom to any <fieldset> that is not immediately followed by a <gux-form-footer>. */
     fieldset:not(:has(+ gux-form-footer)) {
-      padding-bottom: var(
+      padding-block-end: var(
         --gse-semantic-forms-fieldset-paddingBottom,
         var(--gse-semantic-formControl-fieldset-paddingBottom)
       );
@@ -127,7 +126,7 @@ gux-form-beta {
 
     /* Apply a margin-top of 16px to all other children within the form, except fieldset, gux-form-footer, and the first element after header or fieldset */
     > *:not(fieldset):not(gux-form-footer):not(header + *):not(fieldset + *) {
-      margin-top: var(
+      margin-block-start: var(
         --gse-semantic-forms-formControl-gap,
         var(--gse-semantic-formControl-formBody-gap)
       );
@@ -136,11 +135,7 @@ gux-form-beta {
 
   /* Apply padding to all elements except the gux-form-footer where it is not needed */
   form > *:not(gux-form-footer) {
-    padding-right: var(
-      --gse-semantic-forms-margin,
-      var(--gse-semantic-formControl-form-margin)
-    );
-    padding-left: var(
+    padding-inline: var(
       --gse-semantic-forms-margin,
       var(--gse-semantic-formControl-form-margin)
     );
diff --git a/packages/genesys-spark-components/src/components/beta/gux-icon-tooltip/gux-icon-tooltip.scss b/packages/genesys-spark-components/src/components/beta/gux-icon-tooltip/gux-icon-tooltip.scss
index 2b8f1612b..52ae56ca9 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-icon-tooltip/gux-icon-tooltip.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-icon-tooltip/gux-icon-tooltip.scss
@@ -1,5 +1,5 @@
 .gux-icon-tooltip {
-  width: fit-content;
+  inline-size: fit-content;
   padding: 0;
   line-height: 0;
   background-color: transparent;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-label-info/gux-label-info.scss b/packages/genesys-spark-components/src/components/beta/gux-label-info/gux-label-info.scss
index 4bc0a4dc2..050801a70 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-label-info/gux-label-info.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-label-info/gux-label-info.scss
@@ -1,5 +1,5 @@
 .gux-label-info {
-  width: fit-content;
+  inline-size: fit-content;
   padding: 0;
   line-height: 0;
   background-color: transparent;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.scss b/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.scss
index a7afdcc87..0f8559083 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.scss
@@ -1,6 +1,6 @@
 .gux-month-calendar {
   flex-wrap: wrap;
-  width: var(--gse-ui-calendarMenu-width);
+  inline-size: var(--gse-ui-calendarMenu-width);
   box-shadow: var(
       --gse-ui-calendarMenu-boxShadow-x,
       var(--gse-ui-calendarMenu-boxShadow-offsetX)
@@ -30,7 +30,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: var(--gse-ui-calendarMenu-month-single-header-height);
+    block-size: var(--gse-ui-calendarMenu-month-single-header-height);
     padding: var(--gse-ui-calendarMenu-header-padding);
     font-family: var(--gse-ui-calendarMenu-day-headerText-fontFamily);
     font-size: var(--gse-ui-calendarMenu-day-headerText-fontSize);
@@ -77,8 +77,8 @@
       }
 
       gux-icon {
-        width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-        height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+        inline-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+        block-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
         pointer-events: none;
       }
     }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.scss b/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.scss
index dc637ba71..c311ee4ae 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.scss
@@ -8,15 +8,16 @@
 
 .gux-container {
   box-sizing: border-box;
-  width: var(--gse-ui-calendarMenu-month-monthCell-width);
-  height: var(--gse-ui-calendarMenu-month-monthCell-height);
-  padding: 10px 5px 9px; //TODO COMUI-2256
+  inline-size: var(--gse-ui-calendarMenu-month-monthCell-width);
+  block-size: var(--gse-ui-calendarMenu-month-monthCell-height);
+  padding-block: 10px 9px;
+  padding-inline: 5px; //TODO COMUI-2256
 
   button {
     all: unset;
     box-sizing: border-box;
-    width: 100%;
-    height: 100%;
+    inline-size: 100%;
+    block-size: 100%;
     text-align: center;
     word-wrap: break-word;
     cursor: pointer;
diff --git a/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-picker.scss b/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-picker.scss
index c1da63659..a5a4a4e06 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-picker.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-month-picker/gux-month-picker.scss
@@ -30,8 +30,8 @@
   .gux-display {
     display: inline-flex;
     align-items: center;
-    min-width: 100px;
-    padding-right: var(--gse-ui-formControl-input-gap);
+    min-inline-size: 100px;
+    padding-inline-end: var(--gse-ui-formControl-input-gap);
     font-family: var(--gse-ui-formControl-label-text-fontFamily);
     font-size: var(--gse-ui-formControl-label-text-fontSize);
     font-weight: var(--gse-ui-formControl-label-text-fontWeight);
@@ -42,7 +42,7 @@
       outline: none;
 
       &:not(:first-child) {
-        margin-left: 4px;
+        margin-inline-start: 4px;
       }
 
       &:focus-visible {
@@ -85,8 +85,8 @@
     }
 
     gux-icon {
-      width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-      height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+      inline-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+      block-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
     }
 
     &.gux-expanded {
diff --git a/packages/genesys-spark-components/src/components/beta/gux-phone-input/gux-phone-input.scss b/packages/genesys-spark-components/src/components/beta/gux-phone-input/gux-phone-input.scss
index dc2c79c83..2d1086df9 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-phone-input/gux-phone-input.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-phone-input/gux-phone-input.scss
@@ -9,7 +9,7 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: 100%;
+  inline-size: 100%;
   margin-inline-start: 4px;
   overflow: hidden;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
@@ -31,9 +31,10 @@
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
-  width: 100%;
-  height: var(--gse-ui-phoneInput-dropdown-height);
-  padding: 0 8px 0 0;
+  inline-size: 100%;
+  block-size: var(--gse-ui-phoneInput-dropdown-height);
+  padding-block: 0;
+  padding-inline: 0 8px;
   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);
@@ -49,7 +50,7 @@
   .gux-input {
     flex: 1;
     align-content: center;
-    height: 100%;
+    block-size: 100%;
     cursor: text;
   }
 
@@ -70,8 +71,8 @@
   flex-wrap: nowrap;
   gap: var(--gse-ui-phoneInput-dropdown-gap);
   align-items: center;
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
   padding: var(--gse-ui-phoneInput-dropdown-padding);
   font-family: inherit;
   font-size: var(--gse-ui-formControl-input-contentText-fontSize);
@@ -92,12 +93,12 @@
     flex-wrap: nowrap;
     place-content: stretch flex-start;
     align-items: flex-start;
-    min-width: 0;
+    min-inline-size: 0;
 
     .gux-selected-option {
       display: flex;
       justify-content: center;
-      width: var(--gse-ui-phoneInput-dropdown-flag-width);
+      inline-size: var(--gse-ui-phoneInput-dropdown-flag-width);
       overflow: hidden;
 
       gux-icon {
@@ -115,8 +116,8 @@
     flex: 0 0 auto;
     align-self: auto;
     order: 0;
-    width: var(--gse-ui-phoneInput-dropdown-icon-width);
-    height: var(--gse-ui-phoneInput-dropdown-icon-height);
+    inline-size: var(--gse-ui-phoneInput-dropdown-icon-width);
+    block-size: var(--gse-ui-phoneInput-dropdown-icon-height);
     color: var(--gse-ui-phoneInput-dropdown-foregroundColor);
   }
 }
@@ -144,8 +145,8 @@
 
 .gux-listbox-container {
   box-sizing: border-box;
-  width: fit-content;
-  min-width: var(--gse-ui-phoneInput-dropdown-menu-minWidth);
+  inline-size: fit-content;
+  min-inline-size: var(--gse-ui-phoneInput-dropdown-menu-minWidth);
   margin: 0;
 }
 
@@ -153,23 +154,23 @@
   display: grid;
   grid-template-columns: 36px 1fr;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 
   .gux-country-code {
-    text-align: right;
+    text-align: end;
   }
 
   gux-icon {
     position: relative;
     inset-inline-start: 4px;
-    width: var(--gse-ui-phoneInput-dropdown-icon-width);
-    height: var(--gse-ui-phoneInput-dropdown-icon-height);
+    inline-size: var(--gse-ui-phoneInput-dropdown-icon-width);
+    block-size: var(--gse-ui-phoneInput-dropdown-icon-height);
     color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
   }
 }
 
 .gux-region-select {
-  height: 100%;
+  block-size: 100%;
   border-radius: var(--gse-ui-formControl-input-borderRadius);
 
   &:focus-within {
diff --git a/packages/genesys-spark-components/src/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.scss b/packages/genesys-spark-components/src/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.scss
index 90aeeac4d..97ad8d6f2 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.scss
@@ -6,23 +6,23 @@ button {
 }
 
 .gux-container {
-  height: var(--gse-ui-segmentedControl-height);
+  block-size: var(--gse-ui-segmentedControl-height);
   cursor: pointer;
   border-color: var(--gse-ui-segmentedControl-divider-color);
   border-style: var(--gse-ui-segmentedControl-divider-style);
   border-width: var(--gse-ui-segmentedControl-divider-width);
-  border-right: none;
+  border-inline-end: none;
   border-radius: var(--gse-ui-segmentedControl-button-middle-borderRadius);
 
   &.gux-start {
-    border-left-color: var(--gse-ui-segmentedControl-divider-color);
+    border-inline-start-color: var(--gse-ui-segmentedControl-divider-color);
     border-radius: var(--gse-ui-segmentedControl-button-start-borderRadius);
   }
 
   &.gux-end {
     border-style: var(--gse-ui-segmentedControl-divider-style);
     border-width: var(--gse-ui-segmentedControl-divider-width);
-    border-right-color: var(--gse-ui-segmentedControl-divider-color);
+    border-inline-end-color: var(--gse-ui-segmentedControl-divider-color);
     border-radius: var(--gse-ui-segmentedControl-button-end-borderRadius);
   }
 
@@ -37,7 +37,7 @@ button {
     gap: var(--gse-ui-segmentedControl-button-gap);
     place-content: stretch flex-start;
     align-items: center;
-    height: 100%;
+    block-size: 100%;
     padding: var(--gse-ui-segmentedControl-button-padding);
     line-height: 0;
     color: var(--gse-ui-segmentedControl-button-default-foregroundColor);
@@ -90,8 +90,8 @@ button {
 
     .gux-icon {
       slot[name='icon']::slotted(gux-icon) {
-        width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-        height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+        inline-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+        block-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
       }
     }
   }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss
index 6f4c40871..8d301b99c 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-selector-cards/gux-selector-card/gux-selector-card.scss
@@ -8,13 +8,13 @@
 }
 
 ::slotted(gux-icon) {
-  width: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
-  height: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
+  inline-size: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
+  block-size: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
   color: var(--gse-ui-selectorCard-ilustrativeIcon-foregroundColor);
 }
 
 ::slotted(label) {
-  width: 100%;
+  inline-size: 100%;
   font-family: var(--gse-ui-selectorCard-simple-label-fontFamily);
   font-size: var(--gse-ui-selectorCard-simple-label-fontSize);
   font-weight: var(--gse-ui-selectorCard-simple-label-fontWeight);
@@ -25,9 +25,9 @@
 ::slotted(input[type='radio']),
 ::slotted(input[type='checkbox']) {
   position: absolute;
-  top: 0;
-  width: 100%;
-  height: 100%;
+  inset-block-start: 0;
+  inline-size: 100%;
+  block-size: 100%;
   margin: 0;
   color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
   -webkit-appearance: none;
@@ -44,8 +44,8 @@
     inset-inline-end: var(--gse-ui-selectorCard-descriptive-text-gap);
     display: inline-grid;
     grid-area: 1/1;
-    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);
     color: var(--gse-ui-radioButton-icon-default-unselectedForegroundColor);
     text-align: center;
     vertical-align: middle;
@@ -101,7 +101,7 @@
 }
 
 .gux-selector-card {
-  width: fit-content;
+  inline-size: fit-content;
 
   .gux-content {
     position: relative;
@@ -110,12 +110,12 @@
     flex-direction: column;
     gap: var(--gse-ui-selectorCard-descriptive-text-gap);
     align-items: center;
-    width: var(--gse-ui-selectorCard-simple-minWidth);
-    min-width: var(--gse-ui-selectorCard-simple-minWidth);
-    max-width: var(--gse-ui-selectorCard-simple-maxWidth);
-    height: fit-content;
-    min-height: var(--gse-ui-selectorCard-simple-minHeight);
-    max-height: var(--gse-ui-selectorCard-simple-maxHeight);
+    inline-size: var(--gse-ui-selectorCard-simple-minWidth);
+    min-inline-size: var(--gse-ui-selectorCard-simple-minWidth);
+    max-inline-size: var(--gse-ui-selectorCard-simple-maxWidth);
+    block-size: fit-content;
+    min-block-size: var(--gse-ui-selectorCard-simple-minHeight);
+    max-block-size: var(--gse-ui-selectorCard-simple-maxHeight);
     padding: var(--gse-ui-selectorCard-simple-padding);
     text-align: center;
     background-color: var(--gse-ui-selectorCard-default-backgroundColor);
@@ -140,11 +140,11 @@
   &.gux-descriptive {
     .gux-content {
       align-items: flex-start;
-      width: var(--gse-ui-selectorCard-descriptive-minWidth);
-      min-width: var(--gse-ui-selectorCard-descriptive-minWidth);
-      max-width: var(--gse-ui-selectorCard-descriptive-maxWidth);
-      min-height: var(--gse-ui-selectorCard-descriptive-minHeight);
-      max-height: var(--gse-ui-selectorCard-descriptive-maxHeight);
+      inline-size: var(--gse-ui-selectorCard-descriptive-minWidth);
+      min-inline-size: var(--gse-ui-selectorCard-descriptive-minWidth);
+      max-inline-size: var(--gse-ui-selectorCard-descriptive-maxWidth);
+      min-block-size: var(--gse-ui-selectorCard-descriptive-minHeight);
+      max-block-size: var(--gse-ui-selectorCard-descriptive-maxHeight);
       padding: var(--gse-ui-selectorCard-descriptive-padding);
       text-align: start;
       white-space: normal;
@@ -158,25 +158,33 @@
       }
 
       ::slotted(gux-badge) {
-        margin-top: var(--gse-ui-selectorCard-descriptive-badge-marginTop);
+        margin-block-start: var(
+          --gse-ui-selectorCard-descriptive-badge-marginTop
+        );
       }
 
       ::slotted(input[type='radio']),
       ::slotted(input[type='checkbox']) {
-        left: 0;
+        inset-inline-start: 0;
         border-radius: var(--gse-ui-selectorCard-descriptive-borderRadius);
 
         &::before {
           inset-block-start: var(--gse-ui-selectorCard-descriptive-gap);
           inset-inline-end: var(--gse-ui-selectorCard-descriptive-gap);
-          width: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
-          height: var(--gse-ui-icon-size-md, var(--gse-ui-icon-medium-size));
+          inline-size: var(
+            --gse-ui-icon-size-md,
+            var(--gse-ui-icon-medium-size)
+          );
+          block-size: var(
+            --gse-ui-icon-size-md,
+            var(--gse-ui-icon-medium-size)
+          );
         }
       }
 
       ::slotted(label) {
         display: block;
-        margin-bottom: var(--gse-ui-selectorCard-descriptive-text-gap);
+        margin-block-end: var(--gse-ui-selectorCard-descriptive-text-gap);
         font-family: var(--gse-ui-selectorCard-descriptive-label-fontFamily);
         font-size: var(--gse-ui-selectorCard-descriptive-label-fontSize);
         font-weight: var(--gse-ui-selectorCard-descriptive-label-fontWeight);
@@ -184,9 +192,9 @@
       }
 
       ::slotted(gux-icon) {
-        width: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
-        height: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
-        margin-bottom: var(--gse-ui-selectorCard-descriptive-gap);
+        inline-size: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
+        block-size: var(--gse-ui-icon-size-lg, var(--gse-ui-icon-large-size));
+        margin-block-end: var(--gse-ui-selectorCard-descriptive-gap);
       }
     }
   }
diff --git a/packages/genesys-spark-components/src/components/beta/gux-time-zone-picker/gux-time-zone-picker.scss b/packages/genesys-spark-components/src/components/beta/gux-time-zone-picker/gux-time-zone-picker.scss
index 8c8f3893a..078de7bff 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-time-zone-picker/gux-time-zone-picker.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-time-zone-picker/gux-time-zone-picker.scss
@@ -1,6 +1,7 @@
 gux-dropdown {
   .zone-header {
-    padding: 8px 12px 4px; //TODO: COMUI-2478 token needed for padding
+    padding-block: 8px 4px;
+    padding-inline: 12px; //TODO: COMUI-2478 token needed for padding
     color: #6b7585; //TODO: COMUI-2478 need tp clarify token for zone header.
     text-transform: uppercase;
   }
@@ -9,7 +10,7 @@ gux-dropdown {
     padding: var(--gse-ui-menu-option-padding);
 
     &.gux-has-defaults {
-      height: auto;
+      block-size: auto;
     }
 
     .gux-option-wrapper {
diff --git a/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.scss b/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.scss
index 7412245f7..18f58efcb 100644
--- a/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.scss
+++ b/packages/genesys-spark-components/src/components/beta/gux-tooltip-base/gux-tooltip-base.scss
@@ -2,8 +2,8 @@
   position: fixed;
   z-index: var(--gse-semantic-zIndex-tooltip);
   display: none;
-  width: max-content;
-  max-width: 250px;
+  inline-size: max-content;
+  max-inline-size: 250px;
   pointer-events: none;
   border-radius: var(--gse-ui-tooltip-borderRadius);
   box-shadow: var(
@@ -44,13 +44,13 @@
 
   ::slotted(gux-icon) {
     align-self: center;
-    width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-    height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+    inline-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+    block-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
     color: var(--gse-ui-tooltip-light-foregroundColor);
   }
 
   ::slotted(*) {
-    width: 100%;
+    inline-size: 100%;
     overflow-wrap: break-word;
     white-space: normal;
   }
@@ -62,8 +62,8 @@
 
     ::slotted(gux-icon) {
       align-self: center;
-      width: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
-      height: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+      inline-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
+      block-size: var(--gse-ui-icon-size-sm, var(--gse-ui-icon-small-size));
       color: var(--gse-ui-tooltip-dark-iconColor);
     }
   }