genesys-spark-components 4.96.1 → 4.96.3

package/dist/collection/components/stable/gux-blank-state/gux-blank-state.css

@@ -15,17 +15,17 @@
   color: var(--gse-ui-blankState-foregroundColor);
 }
 .gux-container .gux-image {
-  padding-bottom: var(--gse-ui-blankState-gapMain);
+  padding-block-end: var(--gse-ui-blankState-gapMain);
 }
 .gux-container .gux-message {
-  padding-bottom: var(--gse-ui-blankState-gapMessage);
+  padding-block-end: var(--gse-ui-blankState-gapMessage);
 }
 .gux-container .gux-guidance {
-  padding-bottom: var(--gse-ui-blankState-gapContent);
+  padding-block-end: var(--gse-ui-blankState-gapContent);
 }
 .gux-container ::slotted(gux-icon) {
-  width: var(--gse-ui-blankState-icon-size-lg);
-  height: var(--gse-ui-blankState-icon-size-lg);
+  inline-size: var(--gse-ui-blankState-icon-size-lg);
+  block-size: var(--gse-ui-blankState-icon-size-lg);
   color: var(--gse-ui-blankState-iconColor);
 }
 .gux-container slot[name=primary-message] {
@@ -47,8 +47,8 @@
 
 @container (width < 570px) {
   .gux-container ::slotted(gux-icon) {
-    width: var(--gse-ui-blankState-icon-size-sm);
-    height: var(--gse-ui-blankState-icon-size-sm);
+    inline-size: var(--gse-ui-blankState-icon-size-sm);
+    block-size: var(--gse-ui-blankState-icon-size-sm);
   }
   .gux-container slot[name=primary-message] {
     font-family: var(--gse-ui-progressAndLoading-blankState-small-header-fontFamily);

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

@@ -9,13 +9,13 @@
   align-items: center;
 }
 .gux-button-multi-container .gux-dropdown-button button gux-icon {
-  width: var(--gse-ui-button-icon-size);
-  height: var(--gse-ui-button-icon-size);
-  margin-left: var(--gse-ui-button-gap);
+  inline-size: var(--gse-ui-button-icon-size);
+  block-size: var(--gse-ui-button-icon-size);
+  margin-inline-start: var(--gse-ui-button-gap);
 }
 
 .gux-list-container {
-  max-width: 220px;
+  max-inline-size: 220px;
   margin: 0;
   overflow-y: auto;
   background: var(--gse-ui-menu-backgroundColor);

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

@@ -46,7 +46,7 @@
 }
 
 .gux-calendar {
-  margin-top: 2px;
+  margin-block-start: 2px;
   border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
   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);
 }
@@ -56,7 +56,7 @@
   gap: var(--gse-ui-calendarMenu-header-gap);
   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-weight: var(--gse-ui-calendarMenu-month-currentText-fontWeight);
   color: var(--gse-ui-calendarMenu-header-foregroundColor);
@@ -75,58 +75,58 @@
   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);
 }
 .gux-calendar .gux-header button.gux-left {
-  left: 18px;
+  inset-inline-start: 18px;
 }
 .gux-calendar .gux-header button.gux-right {
-  right: 18px;
+  inset-inline-end: 18px;
 }
 .gux-calendar .gux-header 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);
   pointer-events: none;
 }
 .gux-calendar .gux-header .gux-month-list {
   display: flex;
   justify-content: space-between;
-  width: 100%;
+  inline-size: 100%;
   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);
 }
 .gux-calendar .gux-header .gux-month-list label {
-  width: 100%;
+  inline-size: 100%;
   text-align: center;
 }
 .gux-calendar .gux-content {
   display: flex;
   align-items: flex-start;
-  height: var(--gse-ui-calendarMenu-height);
+  block-size: var(--gse-ui-calendarMenu-height);
   padding: var(--gse-ui-calendarMenu-dateBody-padding);
   color: var(--gse-ui-calendarMenu-month-default-foregroundColor);
   background-color: var(--gse-ui-calendarMenu-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-single-body-borderRadius);
 }
 .gux-calendar .gux-content table {
-  width: var(--gse-ui-calendarMenu-day-input-width);
-  text-align: left;
+  inline-size: var(--gse-ui-calendarMenu-day-input-width);
+  text-align: start;
   table-layout: fixed;
   border-spacing: 0;
   -ms-user-select: none;
   user-select: none;
 }
 .gux-calendar .gux-content table:not(:last-child) {
-  padding-right: 24px;
+  padding-inline-end: 24px;
 }
 .gux-calendar .gux-content table tr {
-  height: var(--gse-ui-calendarMenu-day-input-height);
+  block-size: var(--gse-ui-calendarMenu-day-input-height);
 }
 .gux-calendar .gux-content table tr:empty {
   display: none;
 }
 .gux-calendar .gux-content table tr th,
 .gux-calendar .gux-content table tr td {
-  width: var(--gse-ui-calendarMenu-day-date-size);
-  height: var(--gse-ui-calendarMenu-day-date-size);
+  inline-size: var(--gse-ui-calendarMenu-day-date-size);
+  block-size: var(--gse-ui-calendarMenu-day-date-size);
   padding: 0;
   margin: 0;
   text-align: center;
@@ -163,8 +163,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--gse-ui-calendarMenu-day-date-size);
-  height: var(--gse-ui-calendarMenu-day-date-size);
+  inline-size: var(--gse-ui-calendarMenu-day-date-size);
+  block-size: var(--gse-ui-calendarMenu-day-date-size);
   background-color: var(--gse-ui-calendarMenu-date-selected-backgroundColor);
   border-radius: var(--gse-ui-calendarMenu-month-borderRadius);
 }

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

@@ -1,6 +1,6 @@
 :host {
   display: block;
-  width: fit-content;
+  inline-size: fit-content;
 }
 
 .gux-card {

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

@@ -1,10 +1,10 @@
 .gux-container {
-  width: 320px;
-  min-width: 320px;
+  inline-size: 320px;
+  min-inline-size: 320px;
   padding: var(--gse-ui-dataTableItems-editColumn-editColumnContent-padding);
 }
 .gux-container .gux-search gux-content-search {
-  width: 100%;
+  inline-size: 100%;
 }
 .gux-container .gux-search gux-content-search input[type=search]::-webkit-search-decoration,
 .gux-container .gux-search gux-content-search input[type=search]::-webkit-search-cancel-button,
@@ -15,7 +15,7 @@
 }
 .gux-container .gux-select {
   padding: var(--gse-ui-dataTableItems-editColumn-editColumnContent-padding);
-  margin-left: 24px;
+  margin-inline-start: 24px;
 }
 
 .gux-sr-only:not(:focus):not(:active) {

package/dist/collection/components/stable/gux-content-search/gux-content-search.css

@@ -1,7 +1,7 @@
 :host {
   display: inline-block;
-  width: 300px;
-  min-width: 300px;
+  inline-size: 300px;
+  min-inline-size: 300px;
 }
 
 ::slotted(input[disabled]) {
@@ -12,8 +12,8 @@
   box-sizing: border-box;
   flex-shrink: 1;
   flex-basis: 100%;
-  width: 100%;
-  min-width: 20px;
+  inline-size: 100%;
+  min-inline-size: 20px;
   overflow: hidden;
   font-family: var(--gse-ui-search-counter-text-fontFamily);
   font-size: var(--gse-ui-search-counter-text-fontSize);
@@ -42,8 +42,8 @@
   display: flex;
   flex-direction: row;
   gap: var(--gse-ui-formControl-input-gap);
-  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-textarea-padding);
   cursor: text;
   background-color: var(--gse-ui-formControl-input-backgroundColor);
@@ -80,8 +80,8 @@
   opacity: var(--gse-ui-formControl-input-disabled-opacity);
 }
 .gux-content-search .gux-search-icon gux-icon {
-  width: var(--gse-ui-search-counter-icon-width);
-  height: var(--gse-ui-search-counter-icon-height);
+  inline-size: var(--gse-ui-search-counter-icon-width);
+  block-size: var(--gse-ui-search-counter-icon-height);
   color: var(--gse-ui-formControl-input-inputIcon-defaultColor);
 }
 .gux-content-search .gux-content-control-panel {
@@ -95,13 +95,13 @@
   padding: 0;
 }
 .gux-content-search .gux-content-control-panel 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);
 }
 .gux-content-search .gux-content-control-panel button {
   display: block;
   align-items: center;
-  height: var(--gse-ui-search-counter-icon-height);
+  block-size: var(--gse-ui-search-counter-icon-height);
   padding: 0;
   overflow: hidden;
   color: var(--gse-ui-search-counter-default-foregroundColor);
@@ -128,8 +128,8 @@
   align-items: center;
 }
 .gux-content-search .gux-content-control-panel button.gux-clear-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);
 }
 .gux-content-search .gux-content-control-panel .gux-navigation-disabled {
   pointer-events: auto;
@@ -144,7 +144,7 @@
 .gux-content-search .gux-content-control-panel .gux-navigation-panel .gux-navigation-divider {
   box-sizing: border-box;
   align-self: center;
-  height: 16px;
+  block-size: 16px;
   color: var(--gse-ui-search-counter-default-foregroundColor);
   border: 1px var(--gse-ui-search-counter-divider-border-style) var(--gse-ui-search-counter-divider-border-color);
 }

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

@@ -1,23 +1,23 @@
 :host {
   display: block;
-  max-width: fit-content;
+  max-inline-size: fit-content;
   white-space: normal;
 }
 
 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);
   color: var(--gse-ui-button-ghost-default-foregroundColor);
 }
 
 button {
-  height: var(--gse-ui-button-default-height);
+  block-size: var(--gse-ui-button-default-height);
   padding: var(--gse-ui-button-default-paddingIconOnly);
   border-radius: var(--gse-ui-button-borderRadius);
 }
 
 button.gux-compact {
-  height: var(--gse-ui-button-compact-height);
+  block-size: var(--gse-ui-button-compact-height);
   padding: var(--gse-ui-button-compact-paddingIconOnly);
 }
 
@@ -40,8 +40,8 @@ button[disabled] {
 }
 
 .gux-list-container {
-  width: var(--gse-ui-contextMenu-menu-width);
-  max-height: var(--gse-ui-contextMenu-menu-maxHeight);
+  inline-size: var(--gse-ui-contextMenu-menu-width);
+  max-block-size: var(--gse-ui-contextMenu-menu-maxHeight);
   margin: 0;
   overflow-y: auto;
   background: var(--gse-ui-menu-backgroundColor);

package/dist/collection/components/stable/gux-copy-to-clipboard/gux-copy-to-clipboard.css

@@ -5,13 +5,13 @@ button {
 .gux-copy-to-clipboard-wrapper {
   display: inline-flex;
   align-items: center;
-  max-width: 100%;
+  max-inline-size: 100%;
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content {
   display: inherit;
   gap: var(--gse-ui-copyToClipboard-contentContainer-gap);
   align-items: inherit;
-  max-width: 100%;
+  max-inline-size: 100%;
   cursor: pointer;
 }
 .gux-copy-to-clipboard-wrapper .gux-copy-content ::slotted(*) {

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

@@ -26,7 +26,7 @@
 */
 :host {
   display: block;
-  width: fit-content;
+  inline-size: fit-content;
 }
 
 .gux-datepicker {
@@ -45,26 +45,26 @@
   flex-wrap: nowrap;
   place-content: flex-start flex-start;
   align-items: center;
-  width: 100%;
+  inline-size: 100%;
 }
 .gux-datepicker .gux-datepicker-field ~ .gux-datepicker-field {
-  margin-left: 20px;
+  margin-inline-start: 20px;
 }
 .gux-datepicker .gux-datepicker-field.gux-above {
   flex-direction: column;
   align-items: self-start;
 }
 .gux-datepicker .gux-datepicker-field.gux-above .gux-datepicker-field-input {
-  margin-top: 0;
+  margin-block-start: 0;
 }
 .gux-datepicker .gux-datepicker-field.gux-above .gux-datepicker-field-label {
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-label {
   flex: 0 1 auto;
   align-self: auto;
   order: 0;
-  margin-right: var(--gse-ui-formControl-helper-gap);
+  margin-inline-end: var(--gse-ui-formControl-helper-gap);
   font-family: var(--gse-ui-formControl-label-textBold-fontFamily);
   font-size: var(--gse-ui-formControl-label-textBold-fontSize);
   font-weight: var(--gse-ui-formControl-label-textBold-fontWeight);
@@ -79,8 +79,8 @@
   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);
   color: var(--gse-ui-formControl-input-populatedColor);
   white-space: nowrap;
@@ -114,7 +114,7 @@
   flex: 1 1 auto;
   align-self: auto;
   order: 0;
-  width: calc(var(--gse-ui-calendarMenu-day-input-width) - var(--gse-ui-icon-small-size));
+  inline-size: calc(var(--gse-ui-calendarMenu-day-input-width) - var(--gse-ui-icon-small-size));
   padding: 0;
   overflow: hidden;
   font-family: var(--gse-ui-formControl-input-contentText-fontFamily);
@@ -160,8 +160,8 @@
   cursor: pointer;
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input .gux-datepicker-field-text-input 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);
 }
 .gux-datepicker .gux-datepicker-field .gux-datepicker-field-input gux-calendar {
   position: fixed;

package/dist/collection/components/stable/gux-dismiss-button/gux-dismiss-button.css

@@ -7,18 +7,18 @@
 
 gux-button-slot {
   position: absolute;
-  top: var(--gse-ui-modal-dismissButton-paddingTop);
-  right: var(--gse-ui-modal-dismissButton-paddingRight);
-  width: var(--gse-ui-button-dismiss-medium-width);
-  height: var(--gse-ui-button-dismiss-medium-height);
+  inset-block-start: var(--gse-ui-modal-dismissButton-paddingTop);
+  inset-inline-end: var(--gse-ui-modal-dismissButton-paddingRight);
+  inline-size: var(--gse-ui-button-dismiss-medium-width);
+  block-size: var(--gse-ui-button-dismiss-medium-height);
 }
 gux-button-slot.gux-dismiss-small {
-  width: var(--gse-ui-button-dismiss-small-width);
-  height: var(--gse-ui-button-dismiss-small-height);
+  inline-size: var(--gse-ui-button-dismiss-small-width);
+  block-size: var(--gse-ui-button-dismiss-small-height);
 }
 gux-button-slot.gux-dismiss-small button {
-  width: var(--gse-ui-button-dismiss-small-width);
-  height: var(--gse-ui-button-dismiss-small-height);
+  inline-size: var(--gse-ui-button-dismiss-small-width);
+  block-size: var(--gse-ui-button-dismiss-small-height);
   padding: 0;
 }
 gux-button-slot.gux-inherit {
@@ -35,7 +35,7 @@ gux-button-slot .gux-icon-container gux-icon {
   flex: 0 0 auto;
   align-self: auto;
   order: 0;
-  width: 16px;
-  height: 16px;
+  inline-size: 16px;
+  block-size: 16px;
   color: var(--gse-ui-dismissButton-foregroundColor);
 }

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

@@ -12,8 +12,8 @@
   flex-wrap: nowrap;
   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);
   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);
@@ -42,7 +42,7 @@
 }
 
 .gux-field.gux-input-field {
-  height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content {
   --gux-zindex-tooltip: 3;
@@ -52,8 +52,8 @@
   flex-wrap: nowrap;
   place-content: stretch flex-start;
   align-items: flex-start;
-  min-width: 0;
-  height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  min-inline-size: 0;
+  block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content .gux-filter,
 .gux-field .gux-field-content .gux-selected-option,
@@ -68,11 +68,11 @@
 }
 .gux-field .gux-field-content .gux-filter {
   position: relative;
-  height: 100%;
+  block-size: 100%;
 }
 .gux-field .gux-field-content .gux-filter .gux-filter-input {
   all: unset;
-  width: 100%;
+  inline-size: 100%;
   color: transparent;
   caret-color: var(--gse-ui-formControl-input-populatedColor);
 }
@@ -96,9 +96,9 @@
   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);
-  padding-left: var(--gse-ui-dropdown-gap);
+  inline-size: var(--gse-ui-formControl-input-inputIcon-size);
+  block-size: var(--gse-ui-formControl-input-inputIcon-size);
+  padding-inline-start: var(--gse-ui-dropdown-gap);
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
 }
 
@@ -123,8 +123,8 @@
   outline: none;
 }
 .gux-target-container-expanded .gux-field-button {
-  width: auto;
-  height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  inline-size: auto;
+  block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
   background: inherit;
   border: none;
@@ -158,7 +158,7 @@
   align-items: center;
 }
 .gux-selected-icon gux-icon {
-  width: var(--gse-ui-formControl-input-inputIcon-size);
-  height: var(--gse-ui-formControl-input-inputIcon-size);
-  padding-right: var(--gse-ui-dropdown-gap);
+  inline-size: var(--gse-ui-formControl-input-inputIcon-size);
+  block-size: var(--gse-ui-formControl-input-inputIcon-size);
+  padding-inline-end: var(--gse-ui-dropdown-gap);
 }

package/dist/collection/components/stable/gux-dropdown-multi/gux-dropdown-multi.css

@@ -25,8 +25,8 @@
   flex-wrap: nowrap;
   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);
   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);
@@ -46,7 +46,7 @@
 }
 
 .gux-field.gux-input-field {
-  height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content {
   position: relative;
@@ -56,8 +56,8 @@
   flex-wrap: nowrap;
   place-content: stretch flex-start;
   align-items: flex-start;
-  min-width: 0;
-  height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  min-inline-size: 0;
+  block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
 }
 .gux-field .gux-field-content .gux-filter,
 .gux-field .gux-field-content .gux-selected-option,
@@ -82,12 +82,12 @@
 }
 .gux-field .gux-field-content .gux-filter {
   position: relative;
-  height: 100%;
-  padding-left: 0;
+  block-size: 100%;
+  padding-inline-start: 0;
 }
 .gux-field .gux-field-content .gux-filter .gux-filter-input {
   all: unset;
-  width: 100%;
+  inline-size: 100%;
   color: transparent;
   caret-color: var(--gse-ui-formControl-input-populatedColor);
 }
@@ -111,9 +111,9 @@
   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);
-  padding-left: var(--gse-ui-dropdown-gap);
+  inline-size: var(--gse-ui-formControl-input-inputIcon-size);
+  block-size: var(--gse-ui-formControl-input-inputIcon-size);
+  padding-inline-start: var(--gse-ui-dropdown-gap);
   color: var(--gse-ui-formControl-input-inputIcon-iconEndColor);
 }
 
@@ -138,8 +138,8 @@
   outline: none;
 }
 .gux-target-container-expanded .gux-field-button {
-  width: auto;
-  height: var(--gse-ui-formControl-input-contentText-lineHeight);
+  inline-size: auto;
+  block-size: var(--gse-ui-formControl-input-contentText-lineHeight);
   margin: 0;
   background: inherit;
   border: none;

package/dist/collection/components/stable/gux-flyout-menu/gux-flyout-menu.css

@@ -24,17 +24,17 @@
 }
 .gux-flyout-menu-content .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-flyout-menu-content .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;
 }

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

@@ -1,34 +1,34 @@
 :host {
   display: inline-flex;
-  width: 1em;
-  height: 1em;
+  inline-size: 1em;
+  block-size: 1em;
 }
 
 :host([size=small]) {
-  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);
 }
 
 :host([size=medium]) {
-  width: var(--gse-ui-icon-medium-size);
-  height: var(--gse-ui-icon-medium-size);
+  inline-size: var(--gse-ui-icon-medium-size);
+  block-size: var(--gse-ui-icon-medium-size);
 }
 
 :host([size=large]) {
-  width: var(--gse-ui-icon-large-size);
-  height: var(--gse-ui-icon-large-size);
+  inline-size: var(--gse-ui-icon-large-size);
+  block-size: var(--gse-ui-icon-large-size);
 }
 
 .gux-icon-container {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
+  inline-size: 100%;
 }
 .gux-icon-container svg {
-  width: 100%;
-  max-width: 100%;
-  height: 100%;
-  max-height: 100%;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  block-size: 100%;
+  max-block-size: 100%;
   fill: currentcolor;
 }

package/dist/collection/components/stable/gux-inline-alert/gux-inline-alert.css

@@ -1,6 +1,6 @@
 :host {
   display: flex;
-  width: fit-content;
+  inline-size: fit-content;
 }
 
 .gux-inline-alert {
@@ -17,9 +17,9 @@
 .gux-inline-alert gux-icon {
   flex-shrink: 0;
   align-self: flex-start;
-  width: var(--gse-ui-icon-small-size);
-  height: var(--gse-ui-icon-small-size);
-  margin-top: 1px;
+  inline-size: var(--gse-ui-icon-small-size);
+  block-size: var(--gse-ui-icon-small-size);
+  margin-block-start: 1px;
 }
 .gux-inline-alert gux-tooltip-title {
   white-space: nowrap;