@patternfly/patternfly 6.0.0-alpha.120 → 6.0.0-alpha.122

package/components/NotificationDrawer/notification-drawer.scss

@@ -4,17 +4,17 @@
   --#{$notification-drawer}--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // Header
-  --#{$notification-drawer}__header--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__header--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$notification-drawer}__header--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$notification-drawer}__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$notification-drawer}__header--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$notification-drawer}__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
   --#{$notification-drawer}__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --#{$notification-drawer}__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --#{$notification-drawer}__header-title--FontFamily: var(--pf-t--global--font--family--heading);
-  --#{$notification-drawer}__header-status--MarginLeft: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__header-status--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$notification-drawer}__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$notification-drawer}__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
@@ -30,10 +30,10 @@
   --#{$notification-drawer}__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
 
   // List item
-  --#{$notification-drawer}__list-item--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__list-item--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__list-item--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__list-item--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__list-item--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$notification-drawer}__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$notification-drawer}__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --#{$notification-drawer}__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -55,11 +55,11 @@
   --#{$notification-drawer}__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
 
   // List item header
-  --#{$notification-drawer}__list-item-header--MarginBottom: var(--pf-t--global--spacer--xs);
+  --#{$notification-drawer}__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
 
   // List item header icon
   --#{$notification-drawer}__list-item-header-icon--Color: inherit;
-  --#{$notification-drawer}__list-item-header-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$notification-drawer}__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // List item header title
   --#{$notification-drawer}__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
@@ -69,37 +69,37 @@
   --#{$notification-drawer}__list-item-header-title--max-lines: 1;
 
   // List item description
-  --#{$notification-drawer}__list-item-description--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$notification-drawer}__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
 
   // List item timestamp
   --#{$notification-drawer}__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
   --#{$notification-drawer}__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Group
-  --#{$notification-drawer}__group--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$notification-drawer}__group--m-expanded--group--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --#{$notification-drawer}__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$notification-drawer}__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --#{$notification-drawer}__group--m-expanded--MinHeight: 0; // remove at breaking change
   --#{$notification-drawer}__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 
 
   // Group toggle
-  --#{$notification-drawer}__group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__group-toggle--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$notification-drawer}__group-toggle--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$notification-drawer}__group-toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$notification-drawer}__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$notification-drawer}__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$notification-drawer}__group-toggle--OutlineOffset: #{pf-size-prem(-4px)};
 
   // Group toggle title
-  --#{$notification-drawer}__group-toggle-title--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --#{$notification-drawer}__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
   --#{$notification-drawer}__group-toggle-title--max-lines: 1;
 
   // Group toggle count
-  --#{$notification-drawer}__group-toggle-count--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
 
   // Group toggle icon
-  --#{$notification-drawer}__group-toggle-icon--MarginRight: var(--pf-t--global--spacer--md);
+  --#{$notification-drawer}__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --#{$notification-drawer}__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$notification-drawer}__group-toggle-icon--Transition: .2s ease-in 0s;
   --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
@@ -118,10 +118,10 @@
   display: flex;
   flex-shrink: 0;
   align-items: baseline;
-  padding-block-start: var(--#{$notification-drawer}__header--PaddingTop);
-  padding-block-end: var(--#{$notification-drawer}__header--PaddingBottom);
-  padding-inline-start: var(--#{$notification-drawer}__header--PaddingLeft);
-  padding-inline-end: var(--#{$notification-drawer}__header--PaddingRight);
+  padding-block-start: var(--#{$notification-drawer}__header--PaddingBlockStart);
+  padding-block-end: var(--#{$notification-drawer}__header--PaddingBlockEnd);
+  padding-inline-start: var(--#{$notification-drawer}__header--PaddingInlineStart);
+  padding-inline-end: var(--#{$notification-drawer}__header--PaddingInlineEnd);
   background-color: var(--#{$notification-drawer}__header--BackgroundColor);
 }
 
@@ -133,7 +133,7 @@
 }
 
 .#{$notification-drawer}__header-status {
-  margin-inline-start: var(--#{$notification-drawer}__header-status--MarginLeft);
+  margin-inline-start: var(--#{$notification-drawer}__header-status--MarginInlineStart);
   font-size: var(--#{$notification-drawer}__header-status--FontSize);
   font-weight: var(--#{$notification-drawer}__header-status--FontWeight);
   color: var(--#{$notification-drawer}__header-status--Color);
@@ -164,10 +164,10 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
-  padding-block-start: var(--#{$notification-drawer}__list-item--PaddingTop);
-  padding-block-end: var(--#{$notification-drawer}__list-item--PaddingBottom);
-  padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingLeft);
-  padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingRight);
+  padding-block-start: var(--#{$notification-drawer}__list-item--PaddingBlockStart);
+  padding-block-end: var(--#{$notification-drawer}__list-item--PaddingBlockEnd);
+  padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingInlineStart);
+  padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingInlineEnd);
   background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
   border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
   border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
@@ -220,11 +220,11 @@
   grid-row: 1 / 2;
   grid-column: 1 / 2;
   align-items: baseline;
-  margin-block-end: var(--#{$notification-drawer}__list-item-header--MarginBottom);
+  margin-block-end: var(--#{$notification-drawer}__list-item-header--MarginBlockEnd);
 }
 
 .#{$notification-drawer}__list-item-header-icon {
-  margin-inline-end: var(--#{$notification-drawer}__list-item-header-icon--MarginRight);
+  margin-inline-end: var(--#{$notification-drawer}__list-item-header-icon--MarginInlineEnd);
   color: var(--#{$notification-drawer}__list-item-header-icon--Color);
 }
 
@@ -248,7 +248,7 @@
 .#{$notification-drawer}__list-item-description {
   grid-row: 2 / 3;
   grid-column: 1 / 2;
-  margin-block-end: var(--#{$notification-drawer}__list-item-description--MarginBottom);
+  margin-block-end: var(--#{$notification-drawer}__list-item-description--MarginBlockEnd);
   word-break: break-word;
 }
 
@@ -265,7 +265,7 @@
 }
 
 .#{$notification-drawer}__group {
-  border-block-end: var(--#{$notification-drawer}__group--BorderBottomWidth) solid var(--#{$notification-drawer}__group--m-expanded--group--BorderBottomColor);
+  border-block-end: var(--#{$notification-drawer}__group--BorderBlockEndWidth) solid var(--#{$notification-drawer}__group--m-expanded--group--BorderBlockEndColor);
 
   &.pf-m-expanded {
     min-height: var(--#{$notification-drawer}__group--m-expanded--MinHeight);
@@ -277,10 +277,10 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding-block-start: var(--#{$notification-drawer}__group-toggle--PaddingTop);
-  padding-block-end: var(--#{$notification-drawer}__group-toggle--PaddingBottom);
-  padding-inline-start: var(--#{$notification-drawer}__group-toggle--PaddingLeft);
-  padding-inline-end: var(--#{$notification-drawer}__group-toggle--PaddingRight);
+  padding-block-start: var(--#{$notification-drawer}__group-toggle--PaddingBlockStart);
+  padding-block-end: var(--#{$notification-drawer}__group-toggle--PaddingBlockEnd);
+  padding-inline-start: var(--#{$notification-drawer}__group-toggle--PaddingInlineStart);
+  padding-inline-end: var(--#{$notification-drawer}__group-toggle--PaddingInlineEnd);
   background-color: var(--#{$notification-drawer}__group-toggle--BackgroundColor);
   border: none;
   outline-offset: var(--#{$notification-drawer}__group-toggle--OutlineOffset);
@@ -290,7 +290,7 @@
   @include pf-v6-line-clamp("var(--#{$notification-drawer}__group-toggle-title--max-lines)");
 
   flex: 1;
-  margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginRight);
+  margin-inline-end: var(--#{$notification-drawer}__group-toggle-title--MarginInlineEnd);
   font-size: var(--#{$notification-drawer}__group-toggle-title--FontSize);
   text-align: start;
   word-break: break-word;
@@ -298,13 +298,13 @@
 
 .#{$notification-drawer}__group-toggle-count {
   margin-inline-start: auto;
-  margin-inline-end: var(--#{$notification-drawer}__group-toggle-count--MarginRight);
+  margin-inline-end: var(--#{$notification-drawer}__group-toggle-count--MarginInlineEnd);
 }
 
 .#{$notification-drawer}__group-toggle-icon {
   @include pf-v6-mirror-inline-on-rtl;
 
-  margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginRight);
+  margin-inline-end: var(--#{$notification-drawer}__group-toggle-icon--MarginInlineEnd);
   color: var(--#{$notification-drawer}__group-toggle-icon--Color);
   transition: var(--#{$notification-drawer}__group-toggle-icon--Transition);
 

package/components/NumberInput/number-input.css

@@ -1,5 +1,5 @@
 :where(:root, .pf-v6-c-number-input) {
-  --pf-v6-c-number-input__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);
   --pf-v6-c-number-input--c-form-control--width-base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-t--global--border--width--box--default) * 2);
   --pf-v6-c-number-input--c-form-control--width-icon: var(--pf-t--global--spacer--xl);
@@ -30,7 +30,7 @@
 
 .pf-v6-c-input-group + .pf-v6-c-number-input__unit,
 .pf-v6-c-number-input__unit + .pf-v6-c-input-group {
-  margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-number-input__unit--c-input-group--MarginInlineStart);
 }
 
 .pf-v6-c-number-input__icon {

package/components/NumberInput/number-input.scss

@@ -2,7 +2,7 @@
 
 :where(:root, .#{$number-input}) {
   // unit
-  --#{$number-input}__unit--c-input-group--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$number-input}__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
 
   // icon
   --#{$number-input}__icon--FontSize: var(--pf-t--global--font--size--xs);
@@ -36,7 +36,7 @@
 
 .#{$input-group} + .#{$number-input}__unit,
 .#{$number-input}__unit + .#{$input-group} {
-  margin-inline-start: var(--#{$number-input}__unit--c-input-group--MarginLeft);
+  margin-inline-start: var(--#{$number-input}__unit--c-input-group--MarginInlineStart);
 }
 
 .#{$number-input}__icon {

package/components/OptionsMenu/options-menu.css

@@ -1,81 +1,81 @@
 .pf-v6-c-options-menu {
   --pf-v6-c-options-menu__toggle--BackgroundColor: transparent;
-  --pf-v6-c-options-menu__toggle--PaddingTop: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle--PaddingBottom: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle--PaddingLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__toggle--PaddingBlockStart: var(--pf-v6-global--spacer--form-element);
+  --pf-v6-c-options-menu__toggle--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__toggle--PaddingBlockEnd: var(--pf-v6-global--spacer--form-element);
+  --pf-v6-c-options-menu__toggle--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-options-menu__toggle--ColumnGap: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-options-menu__toggle--MinWidth: 0;
   --pf-v6-c-options-menu__toggle--BorderWidth: var(--pf-v6-global--BorderWidth--sm);
-  --pf-v6-c-options-menu__toggle--BorderTopColor: var(--pf-v6-global--BorderColor--300);
-  --pf-v6-c-options-menu__toggle--BorderRightColor: var(--pf-v6-global--BorderColor--300);
-  --pf-v6-c-options-menu__toggle--BorderBottomColor: var(--pf-v6-global--BorderColor--200);
-  --pf-v6-c-options-menu__toggle--BorderLeftColor: var(--pf-v6-global--BorderColor--300);
+  --pf-v6-c-options-menu__toggle--BorderBlockStartColor: var(--pf-v6-global--BorderColor--300);
+  --pf-v6-c-options-menu__toggle--BorderInlineEndColor: var(--pf-v6-global--BorderColor--300);
+  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-global--BorderColor--200);
+  --pf-v6-c-options-menu__toggle--BorderInlineStartColor: var(--pf-v6-global--BorderColor--300);
   --pf-v6-c-options-menu__toggle--Color: var(--pf-v6-global--Color--100);
-  --pf-v6-c-options-menu__toggle--hover--BorderBottomColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--active--BorderBottomWidth: var(--pf-v6-global--BorderWidth--md);
-  --pf-v6-c-options-menu__toggle--active--BorderBottomColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--focus--BorderBottomWidth: var(--pf-v6-global--BorderWidth--md);
-  --pf-v6-c-options-menu__toggle--focus--BorderBottomColor: var(--pf-v6-global--active-color--100);
-  --pf-v6-c-options-menu__toggle--expanded--BorderBottomWidth: var(--pf-v6-global--BorderWidth--md);
-  --pf-v6-c-options-menu__toggle--expanded--BorderBottomColor: var(--pf-v6-global--active-color--100);
+  --pf-v6-c-options-menu__toggle--hover--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
+  --pf-v6-c-options-menu__toggle--active--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--md);
+  --pf-v6-c-options-menu__toggle--active--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
+  --pf-v6-c-options-menu__toggle--focus--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--md);
+  --pf-v6-c-options-menu__toggle--focus--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
+  --pf-v6-c-options-menu__toggle--expanded--BorderBlockEndWidth: var(--pf-v6-global--BorderWidth--md);
+  --pf-v6-c-options-menu__toggle--expanded--BorderBlockEndColor: var(--pf-v6-global--active-color--100);
   --pf-v6-c-options-menu__toggle--disabled--BackgroundColor: var(--pf-v6-global--disabled-color--300);
   --pf-v6-c-options-menu__toggle--m-plain--Color: var(--pf-v6-global--Color--200);
   --pf-v6-c-options-menu__toggle--m-plain--hover--Color: var(--pf-v6-global--Color--100);
   --pf-v6-c-options-menu__toggle--m-plain--disabled--Color: var(--pf-v6-global--disabled-color--200);
-  --pf-v6-c-options-menu__toggle--m-plain--PaddingRight: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__toggle--m-plain--PaddingLeft: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__toggle-icon--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle-icon--PaddingLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__toggle--m-plain--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
+  --pf-v6-c-options-menu__toggle--m-plain--PaddingInlineStart: var(--pf-v6-global--spacer--md);
+  --pf-v6-c-options-menu__toggle-icon--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__toggle-icon--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-options-menu--m-top--m-expanded__toggle-icon--Rotate: 180deg;
   --pf-v6-c-options-menu--m-plain__toggle-icon--Color: var(--pf-v6-global--Color--200);
   --pf-v6-c-options-menu--m-plain--hover__toggle-icon--Color: var(--pf-v6-global--Color--100);
   --pf-v6-c-options-menu__toggle-button--BackgroundColor: transparent;
-  --pf-v6-c-options-menu__toggle-button--PaddingTop: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle-button--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__toggle-button--PaddingBottom: var(--pf-v6-global--spacer--form-element);
-  --pf-v6-c-options-menu__toggle-button--PaddingLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__toggle-button--PaddingBlockStart: var(--pf-v6-global--spacer--form-element);
+  --pf-v6-c-options-menu__toggle-button--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__toggle-button--PaddingBlockEnd: var(--pf-v6-global--spacer--form-element);
+  --pf-v6-c-options-menu__toggle-button--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-options-menu__menu--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-100);
   --pf-v6-c-options-menu__menu--BoxShadow: var(--pf-v6-global--BoxShadow--md);
-  --pf-v6-c-options-menu__menu--PaddingTop: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu--PaddingBottom: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu--Top: calc(100% + var(--pf-v6-global--spacer--xs));
+  --pf-v6-c-options-menu__menu--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__menu--PaddingBlockEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__menu--InsetBlockStart: calc(100% + var(--pf-v6-global--spacer--xs));
   --pf-v6-c-options-menu__menu--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-options-menu--m-top__menu--Top: 0;
+  --pf-v6-c-options-menu--m-top__menu--InsetBlockStart: 0;
   --pf-v6-c-options-menu--m-top__menu--TranslateY: calc(-100% - var(--pf-v6-global--spacer--xs));
   --pf-v6-c-options-menu__menu-item--BackgroundColor: transparent;
   --pf-v6-c-options-menu__menu-item--Color: var(--pf-v6-global--Color--100);
   --pf-v6-c-options-menu__menu-item--FontSize: var(--pf-v6-global--FontSize--md);
-  --pf-v6-c-options-menu__menu-item--PaddingTop: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu-item--PaddingRight: var(--pf-v6-global--spacer--md);
-  --pf-v6-c-options-menu__menu-item--PaddingBottom: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__menu-item--PaddingLeft: var(--pf-v6-global--spacer--md);
+  --pf-v6-c-options-menu__menu-item--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__menu-item--PaddingInlineEnd: var(--pf-v6-global--spacer--md);
+  --pf-v6-c-options-menu__menu-item--PaddingBlockEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__menu-item--PaddingInlineStart: var(--pf-v6-global--spacer--md);
   --pf-v6-c-options-menu__menu-item--disabled--Color: var(--pf-v6-global--Color--dark-200);
   --pf-v6-c-options-menu__menu-item--hover--BackgroundColor: var(--pf-v6-global--BackgroundColor--light-300);
   --pf-v6-c-options-menu__menu-item--disabled--BackgroundColor: transparent;
   --pf-v6-c-options-menu__menu-item-icon--Color: var(--pf-v6-global--active-color--100);
   --pf-v6-c-options-menu__menu-item-icon--FontSize: var(--pf-v6-global--icon--FontSize--sm);
-  --pf-v6-c-options-menu__menu-item-icon--PaddingLeft: var(--pf-v6-global--spacer--lg);
-  --pf-v6-c-options-menu__group--group--PaddingTop: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__group-title--PaddingTop: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu__group-title--PaddingRight: var(--pf-v6-c-options-menu__menu-item--PaddingRight);
-  --pf-v6-c-options-menu__group-title--PaddingBottom: var(--pf-v6-c-options-menu__menu-item--PaddingBottom);
-  --pf-v6-c-options-menu__group-title--PaddingLeft: var(--pf-v6-c-options-menu__menu-item--PaddingLeft);
+  --pf-v6-c-options-menu__menu-item-icon--PaddingInlineStart: var(--pf-v6-global--spacer--lg);
+  --pf-v6-c-options-menu__group--group--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__group-title--PaddingBlockStart: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu__group-title--PaddingInlineEnd: var(--pf-v6-c-options-menu__menu-item--PaddingInlineEnd);
+  --pf-v6-c-options-menu__group-title--PaddingBlockEnd: var(--pf-v6-c-options-menu__menu-item--PaddingBlockEnd);
+  --pf-v6-c-options-menu__group-title--PaddingInlineStart: var(--pf-v6-c-options-menu__menu-item--PaddingInlineStart);
   --pf-v6-c-options-menu__group-title--FontSize: var(--pf-v6-global--FontSize--xs);
   --pf-v6-c-options-menu__group-title--FontWeight: var(--pf-v6-global--FontWeight--normal);
   --pf-v6-c-options-menu__group-title--Color: var(--pf-v6-global--Color--dark-200);
-  --pf-v6-c-options-menu--c-divider--MarginTop: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-options-menu--c-divider--MarginBottom: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu--c-divider--MarginBlockStart: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-options-menu--c-divider--MarginBlockEnd: var(--pf-v6-global--spacer--sm);
   position: relative;
   display: inline-block;
   max-width: 100%;
 }
 .pf-v6-c-options-menu .pf-v6-c-divider {
-  margin-block-start: var(--pf-v6-c-options-menu--c-divider--MarginTop);
-  margin-block-end: var(--pf-v6-c-options-menu--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v6-c-options-menu--c-divider--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-options-menu--c-divider--MarginBlockEnd);
 }
 .pf-v6-c-options-menu .pf-v6-c-divider:last-child {
-  --pf-v6-c-options-menu--c-divider--MarginBottom: 0;
+  --pf-v6-c-options-menu--c-divider--MarginBlockEnd: 0;
 }
 
 .pf-v6-c-options-menu__toggle:not(.pf-m-plain)::before,
@@ -87,25 +87,25 @@
   inset-inline-end: 0;
   content: "";
   border: var(--pf-v6-c-options-menu__toggle--BorderWidth) solid;
-  border-block-start-color: var(--pf-v6-c-options-menu__toggle--BorderTopColor);
-  border-block-end-color: var(--pf-v6-c-options-menu__toggle--BorderBottomColor);
-  border-inline-start-color: var(--pf-v6-c-options-menu__toggle--BorderLeftColor);
-  border-inline-end-color: var(--pf-v6-c-options-menu__toggle--BorderRightColor);
+  border-block-start-color: var(--pf-v6-c-options-menu__toggle--BorderBlockStartColor);
+  border-block-end-color: var(--pf-v6-c-options-menu__toggle--BorderBlockEndColor);
+  border-inline-start-color: var(--pf-v6-c-options-menu__toggle--BorderInlineStartColor);
+  border-inline-end-color: var(--pf-v6-c-options-menu__toggle--BorderInlineEndColor);
 }
 .pf-v6-c-options-menu__toggle:not(.pf-m-plain):hover::before,
 .pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button:hover::before {
-  --pf-v6-c-options-menu__toggle--BorderBottomColor: var(--pf-v6-c-options-menu__toggle--hover--BorderBottomColor);
+  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--hover--BorderBlockEndColor);
 }
 .pf-v6-c-options-menu__toggle:not(.pf-m-plain):active::before, .pf-v6-c-options-menu__toggle:not(.pf-m-plain).pf-m-active::before,
 .pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button:active::before,
 .pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button.pf-m-active::before {
-  --pf-v6-c-options-menu__toggle--BorderBottomColor: var(--pf-v6-c-options-menu__toggle--active--BorderBottomColor);
-  border-block-end-width: var(--pf-v6-c-options-menu__toggle--active--BorderBottomWidth);
+  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--active--BorderBlockEndColor);
+  border-block-end-width: var(--pf-v6-c-options-menu__toggle--active--BorderBlockEndWidth);
 }
 .pf-v6-c-options-menu__toggle:not(.pf-m-plain):focus::before,
 .pf-v6-c-options-menu.pf-m-text:not(.pf-m-plain) .pf-v6-c-options-menu__toggle-button:focus::before {
-  --pf-v6-c-options-menu__toggle--BorderBottomColor: var(--pf-v6-c-options-menu__toggle--focus--BorderBottomColor);
-  border-block-end-width: var(--pf-v6-c-options-menu__toggle--focus--BorderBottomWidth);
+  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--focus--BorderBlockEndColor);
+  border-block-end-width: var(--pf-v6-c-options-menu__toggle--focus--BorderBlockEndWidth);
 }
 
 .pf-v6-c-options-menu__toggle {
@@ -115,24 +115,24 @@
   align-items: center;
   min-width: var(--pf-v6-c-options-menu__toggle--MinWidth);
   max-width: 100%;
-  padding-block-start: var(--pf-v6-c-options-menu__toggle--PaddingTop);
-  padding-block-end: var(--pf-v6-c-options-menu__toggle--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-options-menu__toggle--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-options-menu__toggle--PaddingRight);
+  padding-block-start: var(--pf-v6-c-options-menu__toggle--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-options-menu__toggle--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-options-menu__toggle--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-options-menu__toggle--PaddingInlineEnd);
   color: var(--pf-v6-c-options-menu__toggle--Color);
   background-color: var(--pf-v6-c-options-menu__toggle--BackgroundColor);
   border: none;
 }
 .pf-v6-c-options-menu.pf-m-expanded > .pf-v6-c-options-menu__toggle::before {
-  --pf-v6-c-options-menu__toggle--BorderBottomColor: var(--pf-v6-c-options-menu__toggle--expanded--BorderBottomColor);
-  border-block-end-width: var(--pf-v6-c-options-menu__toggle--expanded--BorderBottomWidth);
+  --pf-v6-c-options-menu__toggle--BorderBlockEndColor: var(--pf-v6-c-options-menu__toggle--expanded--BorderBlockEndColor);
+  border-block-end-width: var(--pf-v6-c-options-menu__toggle--expanded--BorderBlockEndWidth);
 }
 .pf-v6-c-options-menu__toggle.pf-m-plain {
   --pf-v6-c-options-menu__toggle-icon--Color: var(--pf-v6-c-options-menu--m-plain__toggle-icon--Color);
 }
 .pf-v6-c-options-menu__toggle.pf-m-plain:not(.pf-m-text) {
-  --pf-v6-c-options-menu__toggle--PaddingRight: var(--pf-v6-c-options-menu__toggle--m-plain--PaddingRight);
-  --pf-v6-c-options-menu__toggle--PaddingLeft: var(--pf-v6-c-options-menu__toggle--m-plain--PaddingLeft);
+  --pf-v6-c-options-menu__toggle--PaddingInlineEnd: var(--pf-v6-c-options-menu__toggle--m-plain--PaddingInlineEnd);
+  --pf-v6-c-options-menu__toggle--PaddingInlineStart: var(--pf-v6-c-options-menu__toggle--m-plain--PaddingInlineStart);
   display: inline-block;
   color: var(--pf-v6-c-options-menu__toggle--m-plain--Color);
 }
@@ -158,10 +158,10 @@
 }
 
 .pf-v6-c-options-menu__toggle-button {
-  padding-block-start: var(--pf-v6-c-options-menu__toggle-button--PaddingTop);
-  padding-block-end: var(--pf-v6-c-options-menu__toggle-button--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-options-menu__toggle-button--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-options-menu__toggle-button--PaddingRight);
+  padding-block-start: var(--pf-v6-c-options-menu__toggle-button--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-options-menu__toggle-button--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-options-menu__toggle-button--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-options-menu__toggle-button--PaddingInlineEnd);
   background-color: var(--pf-v6-c-options-menu__toggle-button--BackgroundColor);
   border: 0;
 }
@@ -180,8 +180,8 @@
 }
 
 .pf-v6-c-options-menu__toggle-icon {
-  padding-inline-start: var(--pf-v6-c-options-menu__toggle-icon--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-options-menu__toggle-icon--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-options-menu__toggle-icon--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-options-menu__toggle-icon--PaddingInlineEnd);
 }
 .pf-v6-c-options-menu.pf-m-top.pf-m-expanded .pf-v6-c-options-menu__toggle-icon {
   transform: rotate(var(--pf-v6-c-options-menu--m-top--m-expanded__toggle-icon--Rotate));
@@ -189,11 +189,11 @@
 
 .pf-v6-c-options-menu__menu {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-options-menu__menu--Top);
+  inset-block-start: var(--pf-v6-c-options-menu__menu--InsetBlockStart);
   z-index: var(--pf-v6-c-options-menu__menu--ZIndex);
   min-width: 100%;
-  padding-block-start: var(--pf-v6-c-options-menu__menu--PaddingTop);
-  padding-block-end: var(--pf-v6-c-options-menu__menu--PaddingBottom);
+  padding-block-start: var(--pf-v6-c-options-menu__menu--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-options-menu__menu--PaddingBlockEnd);
   background-color: var(--pf-v6-c-options-menu__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v6-c-options-menu__menu--BoxShadow);
@@ -202,7 +202,7 @@
   inset-inline-end: 0;
 }
 .pf-v6-c-options-menu.pf-m-top .pf-v6-c-options-menu__menu {
-  --pf-v6-c-options-menu__menu--Top: var(--pf-v6-c-options-menu--m-top__menu--Top);
+  --pf-v6-c-options-menu__menu--InsetBlockStart: var(--pf-v6-c-options-menu--m-top__menu--InsetBlockStart);
   transform: translateY(var(--pf-v6-c-options-menu--m-top__menu--TranslateY));
 }
 .pf-v6-c-options-menu__menu.pf-m-static {
@@ -220,10 +220,10 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding-block-start: var(--pf-v6-c-options-menu__menu-item--PaddingTop);
-  padding-block-end: var(--pf-v6-c-options-menu__menu-item--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-options-menu__menu-item--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-options-menu__menu-item--PaddingRight);
+  padding-block-start: var(--pf-v6-c-options-menu__menu-item--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-options-menu__menu-item--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-options-menu__menu-item--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-options-menu__menu-item--PaddingInlineEnd);
   font-size: var(--pf-v6-c-options-menu__menu-item--FontSize);
   color: var(--pf-v6-c-options-menu__menu-item--Color);
   white-space: nowrap;
@@ -243,21 +243,21 @@
 .pf-v6-c-options-menu__menu-item-icon {
   align-self: center;
   width: auto;
-  padding-inline-start: var(--pf-v6-c-options-menu__menu-item-icon--PaddingLeft);
+  padding-inline-start: var(--pf-v6-c-options-menu__menu-item-icon--PaddingInlineStart);
   margin-inline-start: auto;
   font-size: var(--pf-v6-c-options-menu__menu-item-icon--FontSize);
   color: var(--pf-v6-c-options-menu__menu-item-icon--Color);
 }
 
 .pf-v6-c-options-menu__group + .pf-v6-c-options-menu__group {
-  padding-block-start: var(--pf-v6-c-options-menu__group--group--PaddingTop);
+  padding-block-start: var(--pf-v6-c-options-menu__group--group--PaddingBlockStart);
 }
 
 .pf-v6-c-options-menu__group-title {
-  padding-block-start: var(--pf-v6-c-options-menu__group-title--PaddingTop);
-  padding-block-end: var(--pf-v6-c-options-menu__group-title--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-options-menu__group-title--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-options-menu__group-title--PaddingRight);
+  padding-block-start: var(--pf-v6-c-options-menu__group-title--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-options-menu__group-title--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-options-menu__group-title--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-options-menu__group-title--PaddingInlineEnd);
   font-size: var(--pf-v6-c-options-menu__group-title--FontSize);
   font-weight: var(--pf-v6-c-options-menu__group-title--FontWeight);
   color: var(--pf-v6-c-options-menu__group-title--Color);