genesys-spark-components 4.92.0 → 4.93.1

package/dist/collection/components/beta/gux-avatar/gux-avatar.css

@@ -7,15 +7,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%;
 }
@@ -24,8 +24,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);
@@ -39,12 +39,12 @@
   border-radius: 50%;
 }
 .gux-avatar.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-avatar.gux-medium .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);
@@ -53,23 +53,23 @@
   border-width: var(--gse-ui-avatar-content-default-border-width);
 }
 .gux-avatar.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-avatar.gux-small .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);
 }
 .gux-avatar.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-avatar.gux-xsmall .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);
@@ -157,31 +157,31 @@
 
 .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-avatar-badge.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-avatar-badge.gux-small, .gux-avatar-badge.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-avatar-badge.gux-small gux-icon, .gux-avatar-badge.gux-xsmall gux-icon {
@@ -197,7 +197,7 @@
   color: var(--gse-ui-avatar-badge-available-color);
 }
 .gux-avatar-badge.gux-away, .gux-avatar-badge.gux-break, .gux-avatar-badge.gux-meal, .gux-avatar-badge.gux-training {
-  background-color: var(--gse-ui-avatar-badge-away, var(--gse-ui-avatar-badge-away-color));
+  background-color: var(--gse-ui-avatar-badge-away-color);
 }
 .gux-avatar-badge.gux-away gux-icon, .gux-avatar-badge.gux-break gux-icon, .gux-avatar-badge.gux-meal gux-icon, .gux-avatar-badge.gux-training gux-icon {
   margin: var(--gse-ui-avatar-badge-away-icon-margin);
@@ -243,6 +243,6 @@
   color: var(--gse-ui-avatar-badge-foregroundDefault-color);
 }
 .gux-avatar-badge gux-icon {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 }

package/dist/collection/components/beta/gux-calendar-beta/components/single/gux-calendar.css

@@ -12,7 +12,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);
@@ -22,7 +22,7 @@
   border-radius: var(--gse-ui-calendarMenu-single-header-borderRadius);
 }
 .gux-calendar-beta .gux-header .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);
@@ -43,13 +43,12 @@
 }
 .gux-calendar-beta .gux-header .gux-left gux-icon,
 .gux-calendar-beta .gux-header .gux-right gux-icon {
-  width: 16px;
-  height: 16px;
+  inline-size: 16px;
+  block-size: 16px;
 }
 .gux-calendar-beta .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);
@@ -58,8 +57,8 @@
 }
 .gux-calendar-beta .gux-week-days .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;
 }
 .gux-calendar-beta .gux-content {
   padding: var(--gse-ui-calendarMenu-dateBody-padding);
@@ -69,8 +68,8 @@
 }
 .gux-calendar-beta .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;
@@ -110,7 +109,7 @@
 }
 .gux-calendar-beta .gux-content-week .gux-content-date:focus-visible {
   border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
-  outline: var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth)) solid var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus));
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-semantic-border-focus);
 }
 .gux-calendar-beta .gux-content-week .gux-content-date .gux-sr-only:not(:focus):not(:active) {
   position: absolute;

package/dist/collection/components/beta/gux-cta-group/gux-cta-group.css

@@ -15,5 +15,5 @@
 }
 .gux-cta-group ::slotted(gux-button) {
   flex: 0 1 auto;
-  min-width: 0;
+  min-inline-size: 0;
 }

package/dist/collection/components/beta/gux-flag-icon/gux-flag-icon.css

@@ -1722,8 +1722,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(0.6666666667);

package/dist/collection/components/beta/gux-form/gux-form-description/gux-form-description.css

@@ -1,8 +1,8 @@
 ::slotted(*) {
   margin: 0 !important;
-  font-family: var(--gse-semantic-forms-paragraph-text-fontFamily, var(--gse-semantic-body-sm-regular-fontFamily)) !important;
-  font-size: var(--gse-semantic-forms-paragraph-text-fontSize, var(--gse-semantic-body-sm-regular-fontSize)) !important;
-  font-weight: var(--gse-semantic-forms-paragraph-text-fontWeight, var(--gse-semantic-body-sm-regular-fontWeight)) !important;
-  line-height: var(--gse-semantic-forms-paragraph-text-lineHeight, var(--gse-semantic-body-sm-regular-lineHeight)) !important;
-  color: var(--gse-semantic-forms-paragraph-foregroundColor, var(--gse-semantic-foreground-container-midEmphasis)) !important;
+  font-family: var(--gse-semantic-body-sm-regular-fontFamily) !important;
+  font-size: var(--gse-semantic-body-sm-regular-fontSize) !important;
+  font-weight: var(--gse-semantic-body-sm-regular-fontWeight) !important;
+  line-height: var(--gse-semantic-body-sm-regular-lineHeight) !important;
+  color: var(--gse-semantic-foreground-container-midEmphasis) !important;
 }

package/dist/collection/components/beta/gux-form/gux-form-fieldset-heading/gux-form-fieldset-heading.css

@@ -1,8 +1,8 @@
 ::slotted(*) {
   margin: 0;
-  font-family: var(--gse-semantic-forms-fieldset-header-text-fontFamily, var(--gse-semantic-heading-md-bold-fontFamily)) !important;
-  font-size: var(--gse-semantic-forms-fieldset-header-text-fontSize, var(--gse-semantic-heading-md-bold-fontSize)) !important;
-  font-weight: var(--gse-semantic-forms-fieldset-header-text-fontWeight, var(--gse-semantic-heading-md-bold-fontWeight)) !important;
-  line-height: var(--gse-semantic-forms-fieldset-header-text-lineHeight, var(--gse-semantic-heading-md-bold-lineHeight)) !important;
-  color: var(--gse-semantic-forms-fieldset-header-foregroundColor, var(--gse-semantic-foreground-container-highEmphasis)) !important;
+  font-family: var(--gse-semantic-heading-md-bold-fontFamily) !important;
+  font-size: var(--gse-semantic-heading-md-bold-fontSize) !important;
+  font-weight: var(--gse-semantic-heading-md-bold-fontWeight) !important;
+  line-height: var(--gse-semantic-heading-md-bold-lineHeight) !important;
+  color: var(--gse-semantic-foreground-container-highEmphasis) !important;
 }

package/dist/collection/components/beta/gux-form/gux-form-footer/gux-form-footer.css

@@ -2,13 +2,14 @@
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  margin-top: var(--gse-semantic-forms-formBody-paddingBottom, var(--gse-semantic-formControl-formBody-paddingBottom));
-  border-top: var(--gse-ui-formFooter-separator-width) var(--gse-ui-formFooter-separator-style) var(--gse-ui-formFooter-separator-color);
+  margin-block-start: var(--gse-semantic-formControl-formBody-paddingBottom);
+  border-block-start: var(--gse-ui-formFooter-separator-width) var(--gse-ui-formFooter-separator-style) var(--gse-ui-formFooter-separator-color);
 }
 
 :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) var(--gse-ui-formFooter-page-desktop-horizontalPadding);
+  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);
 }
 
 :host(.gux-form-footer-page-mobile) ::slotted(footer) {
@@ -16,16 +17,19 @@
   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) var(--gse-ui-formFooter-page-mobile-horizontalPadding);
+  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) var(--gse-ui-formFooter-sideSheet-desktop-horizontalPadding);
+  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) var(--gse-ui-formFooter-modal-desktop-horizontalPadding);
+  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);
 }

package/dist/collection/components/beta/gux-form/gux-form-heading/gux-form-heading.css

@@ -1,8 +1,8 @@
 ::slotted(*) {
   margin: 0;
-  font-family: var(--gse-semantic-forms-formHeader-text-fontFamily, var(--gse-semantic-heading-lg-semiBold-fontFamily)) !important;
-  font-size: var(--gse-semantic-forms-formHeader-text-fontSize, var(--gse-semantic-heading-lg-semiBold-fontSize)) !important;
-  font-weight: var(--gse-semantic-forms-formHeader-text-fontWeight, var(--gse-semantic-heading-lg-semiBold-fontWeight)) !important;
-  line-height: var(--gse-semantic-forms-formHeader-text-lineHeight, var(--gse-semantic-heading-lg-semiBold-lineHeight)) !important;
-  color: var(--gse-semantic-forms-formHeader-foregroundColor, var(--gse-semantic-foreground-container-highEmphasis)) !important;
+  font-family: var(--gse-semantic-body-lg-semiBold-fontFamily) !important;
+  font-size: var(--gse-semantic-body-lg-semiBold-fontSize) !important;
+  font-weight: var(--gse-semantic-body-lg-semiBold-fontWeight) !important;
+  line-height: var(--gse-semantic-body-lg-semiBold-lineHeight) !important;
+  color: var(--gse-semantic-foreground-container-highEmphasis) !important;
 }

package/dist/collection/components/beta/gux-icon-tooltip/gux-icon-tooltip.css

@@ -1,5 +1,5 @@
 .gux-icon-tooltip {
-  width: fit-content;
+  inline-size: fit-content;
   padding: 0;
   line-height: 0;
   background-color: transparent;
@@ -10,6 +10,6 @@
   padding-inline-start: 0;
 }
 .gux-icon-tooltip gux-icon {
-  color: var(--gse-ui-formControl-label-tooltipTrigger-optionalColor, var(--gse-ui-formControl-label-tooltipTrigger-color));
+  color: var(--gse-ui-formControl-label-tooltipTrigger-color);
   vertical-align: bottom;
 }

package/dist/collection/components/beta/gux-label-info/gux-label-info.css

@@ -1,5 +1,5 @@
 .gux-label-info {
-  width: fit-content;
+  inline-size: fit-content;
   padding: 0;
   line-height: 0;
   background-color: transparent;
@@ -10,6 +10,6 @@
   padding-inline-start: 0;
 }
 .gux-label-info gux-icon {
-  color: var(--gse-ui-formControl-label-tooltipTrigger-optionalColor, var(--gse-ui-formControl-label-tooltipTrigger-color));
+  color: var(--gse-ui-formControl-label-tooltipTrigger-color);
   vertical-align: bottom;
 }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-calendar.css

@@ -1,7 +1,7 @@
 .gux-month-calendar {
   flex-wrap: wrap;
-  width: var(--gse-ui-calendarMenu-width);
-  box-shadow: var(--gse-ui-calendarMenu-boxShadow-x, var(--gse-ui-calendarMenu-boxShadow-offsetX)) var(--gse-ui-calendarMenu-boxShadow-y, var(--gse-ui-calendarMenu-boxShadow-offsetY)) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
+  inline-size: var(--gse-ui-calendarMenu-width);
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-offsetX) var(--gse-ui-calendarMenu-boxShadow-offsetY) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }
 .gux-month-calendar.gux-hidden {
   display: none;
@@ -18,7 +18,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);
@@ -37,16 +37,16 @@
   outline: none;
 }
 .gux-month-calendar .gux-year-header button:focus-visible {
-  border-radius: calc(var(--gse-semantic-focusRing-cornerRadius, var(--gse-semantic-focusOutline-sm-borderRadius)) - var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset)));
-  outline: var(--gse-semantic-focusRing-width, var(--gse-semantic-focusOutline-md-borderWidth)) solid var(--gse-semantic-color-focus, var(--gse-ui-color-focus));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  border-radius: calc(var(--gse-semantic-focusOutline-sm-borderRadius) - var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-focusOutline-md-borderWidth) solid var(--gse-ui-color-focus);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 .gux-month-calendar .gux-year-header button.gux-year-change:disabled {
   cursor: default;
   opacity: var(--gse-ui-calendarMenu-disabled-opacity);
 }
 .gux-month-calendar .gux-year-header button 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-small-size);
+  block-size: var(--gse-ui-icon-small-size);
   pointer-events: none;
 }

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list-item/gux-month-list-item.css

@@ -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;
+  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;
 }
 .gux-container 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;
@@ -31,7 +32,7 @@
 .gux-container button:focus-visible:not(:disabled) {
   border-radius: var(--gse-ui-calendarMenu-month-focusBorderRadius);
   outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 .gux-container button:hover:not(:disabled) {
   color: var(--gse-ui-calendarMenu-month-default-foregroundColor);

package/dist/collection/components/beta/gux-month-picker/gux-month-calendar/gux-month-list/gux-month-list.css

@@ -5,5 +5,5 @@
   padding: var(--gse-ui-calendarMenu-monthBody-padding);
   background-color: var(--gse-ui-calendarMenu-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
-  box-shadow: var(--gse-ui-calendarMenu-boxShadow-x, var(--gse-ui-calendarMenu-boxShadow-offsetX)) var(--gse-ui-calendarMenu-boxShadow-y, var(--gse-ui-calendarMenu-boxShadow-offsetY)) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
+  box-shadow: var(--gse-ui-calendarMenu-boxShadow-offsetX) var(--gse-ui-calendarMenu-boxShadow-offsetY) var(--gse-ui-calendarMenu-boxShadow-blur) var(--gse-ui-calendarMenu-boxShadow-spread) var(--gse-ui-calendarMenu-boxShadow-color);
 }

package/dist/collection/components/beta/gux-month-picker/gux-month-picker.css

@@ -15,13 +15,13 @@
   border: var(--gse-ui-formControl-input-active-border-width) var(--gse-ui-formControl-input-active-border-style) var(--gse-ui-formControl-input-active-border-color);
   border-radius: var(--gse-ui-formControl-focusRing-borderRadius);
   outline: var(--gse-ui-formControl-input-focus-border-width) var(--gse-ui-formControl-input-focus-border-style) var(--gse-ui-formControl-input-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 .gux-target .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);
@@ -32,7 +32,7 @@
   outline: none;
 }
 .gux-target .gux-display .gux-spinner:not(:first-child) {
-  margin-left: 4px;
+  margin-inline-start: 4px;
 }
 .gux-target .gux-display .gux-spinner:focus-visible {
   background: var(--gse-ui-calendarMenu-month-hover-backgroundColor);
@@ -46,7 +46,7 @@
 .gux-target .gux-popup-toggle:focus-visible {
   border-radius: var(--gse-ui-calendarMenu-month-calendarButton-focusBorderRadius);
   outline: var(--gse-ui-monthPicker-calendarStates-focus-border-width) var(--gse-ui-monthPicker-calendarStates-focus-border-style) var(--gse-ui-monthPicker-calendarStates-focus-border-color);
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 .gux-target .gux-popup-toggle:not(:disabled):hover {
   color: var(--gse-ui-monthPicker-calendarStates-hoverColor);
@@ -60,8 +60,8 @@
   color: var(--gse-ui-monthPicker-calendarStates-disabledColor);
 }
 .gux-target .gux-popup-toggle 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-small-size);
+  block-size: var(--gse-ui-icon-small-size);
 }
 .gux-target .gux-popup-toggle.gux-expanded {
   color: var(--gse-ui-monthPicker-calendarStates-activeColor);

package/dist/collection/components/beta/gux-phone-input/gux-phone-input.css

@@ -7,7 +7,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);
@@ -28,9 +28,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);
@@ -44,15 +45,15 @@
 .target-container .gux-input {
   flex: 1;
   align-content: center;
-  height: 100%;
+  block-size: 100%;
   cursor: text;
 }
 .target-container.gux-error {
   border: var(--gse-ui-formControl-input-error-border-width) var(--gse-ui-formControl-input-error-border-style) var(--gse-ui-formControl-input-error-border-color);
 }
 .target-container:focus-within {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }
 
 .gux-field {
@@ -61,8 +62,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);
@@ -80,12 +81,12 @@
   flex-wrap: nowrap;
   place-content: stretch flex-start;
   align-items: flex-start;
-  min-width: 0;
+  min-inline-size: 0;
 }
 .gux-field .gux-field-content .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-field .gux-field-content .gux-selected-option gux-icon {
@@ -99,8 +100,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);
 }
 
@@ -123,8 +124,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;
 }
 
@@ -132,24 +133,24 @@
   display: grid;
   grid-template-columns: 36px 1fr;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 }
 .gux-option-content .gux-country-code {
-  text-align: right;
+  text-align: end;
 }
 .gux-option-content 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);
 }
 .gux-region-select:focus-within {
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
 }

package/dist/collection/components/beta/gux-segmented-control/gux-segmented-control-item/gux-segmented-control-item.css

@@ -3,22 +3,22 @@ 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-container.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-container.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);
 }
 .gux-container.gux-start.gux-end {
@@ -31,7 +31,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);
@@ -67,11 +67,11 @@ button {
   position: relative;
   z-index: var(--gse-semantic-zIndex-showFocus);
   border-radius: var(--gse-ui-segmentedControl-borderRadius);
-  outline: var(--gse-semantic-focusRing-default-border-color, var(--gse-semantic-border-focus)) solid var(--gse-semantic-focusRing-default-border-width, var(--gse-semantic-focusOutline-md-borderWidth));
-  outline-offset: var(--gse-semantic-focusRing-offset, var(--gse-semantic-focusOutline-offset));
+  outline: var(--gse-semantic-border-focus) solid var(--gse-semantic-focusOutline-md-borderWidth);
+  outline-offset: var(--gse-semantic-focusOutline-offset);
   outline-offset: var(--gse-ui-segmentedControl-focus-offset);
 }
 .gux-container .gux-segmented-control-item .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-small-size);
+  block-size: var(--gse-ui-icon-small-size);
 }