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

package/components/TextInputGroup/text-input-group.scss

@@ -10,21 +10,21 @@
   --#{$text-input-group}--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
 
   // Main
-  --#{$text-input-group}__main--first-child--not--text-input--MarginLeft: var(--pf-t--global--spacer--xs);
-  --#{$text-input-group}__main--m-icon__text-input--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
   --#{$text-input-group}__main--RowGap: var(--pf-t--global--spacer--xs);
   --#{$text-input-group}__main--ColumnGap: var(--pf-t--global--spacer--xs);
 
   // Chip group
-  --#{$text-input-group}--c-chip-group__main--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$text-input-group}--c-chip-group__main--PaddingRight: var(--pf-t--global--spacer--xs);
-  --#{$text-input-group}--c-chip-group__main--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
 
   // Text input
-  --#{$text-input-group}__text-input--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$text-input-group}__text-input--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$text-input-group}__text-input--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$text-input-group}__text-input--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$text-input-group}__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$text-input-group}__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$text-input-group}__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$text-input-group}__text-input--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$text-input-group}__text-input--MinWidth: 12ch;
   --#{$text-input-group}__text-input--m-hint--Color: var(--pf-t--global--text--color--placeholder);
   --#{$text-input-group}__text-input--placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -32,14 +32,14 @@
   --#{$text-input-group}__text-input--OutlineOffset: -6px;
 
   // Icon
-  --#{$text-input-group}__icon--Left: var(--pf-t--global--spacer--sm);
+  --#{$text-input-group}__icon--InsetInlineStart: var(--pf-t--global--spacer--sm);
   --#{$text-input-group}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$text-input-group}__icon--TranslateY: -50%;
 
   // Utilities
-  --#{$text-input-group}__utilities--child--MarginLeft: var(--pf-t--global--spacer--xs);
-  --#{$text-input-group}__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--xs);
-  --#{$text-input-group}__utilities--c-button--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}__utilities--child--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --#{$text-input-group}__utilities--c-button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
 
   // input disabled style
   --#{$text-input-group}--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -95,17 +95,17 @@
   min-width: 0;
 
   &.pf-m-icon {
-    --#{$text-input-group}__text-input--PaddingLeft: var(--#{$text-input-group}__main--m-icon__text-input--PaddingLeft);
+    --#{$text-input-group}__text-input--PaddingInlineStart: var(--#{$text-input-group}__main--m-icon__text-input--PaddingInlineStart);
   }
 
   > :first-child:not(.#{$text-input-group}__text) {
-    margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginLeft);
+    margin-inline-start: var(--#{$text-input-group}__main--first-child--not--text-input--MarginInlineStart);
   }
 
   .#{$chip-group}__main {
-    padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingTop);
-    padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBottom);
-    padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingRight);
+    padding-block-start: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockStart);
+    padding-block-end: var(--#{$text-input-group}--c-chip-group__main--PaddingBlockEnd);
+    padding-inline-end: var(--#{$text-input-group}--c-chip-group__main--PaddingInlineEnd);
   }
 }
 
@@ -127,7 +127,7 @@
 .#{$text-input-group}__icon {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: var(--#{$text-input-group}__icon--Left);
+  inset-inline-start: var(--#{$text-input-group}__icon--InsetInlineStart);
   color: var(--#{$text-input-group}__icon--Color);
   transform: translateY(var(--#{$text-input-group}__icon--TranslateY));
 }
@@ -138,10 +138,10 @@
   position: relative;
   width: 100%;
   min-width: var(--#{$text-input-group}__text-input--MinWidth);
-  padding-block-start: var(--#{$text-input-group}__text-input--PaddingTop);
-  padding-block-end: var(--#{$text-input-group}__text-input--PaddingBottom);
-  padding-inline-start: var(--#{$text-input-group}__text-input--PaddingLeft);
-  padding-inline-end: var(--#{$text-input-group}__text-input--PaddingRight);
+  padding-block-start: var(--#{$text-input-group}__text-input--PaddingBlockStart);
+  padding-block-end: var(--#{$text-input-group}__text-input--PaddingBlockEnd);
+  padding-inline-start: var(--#{$text-input-group}__text-input--PaddingInlineStart);
+  padding-inline-end: var(--#{$text-input-group}__text-input--PaddingInlineEnd);
   background-color: var(--#{$text-input-group}__text-input--BackgroundColor);
   border: 0;
   outline-offset: var(--#{$text-input-group}__text-input--OutlineOffset);
@@ -164,11 +164,11 @@
 .#{$text-input-group}__utilities {
   display: flex;
   align-items: center;
-  margin-inline-start: var(--#{$text-input-group}__utilities--MarginLeft);
-  margin-inline-end: var(--#{$text-input-group}__utilities--MarginRight);
+  margin-inline-start: var(--#{$text-input-group}__utilities--MarginInlineStart);
+  margin-inline-end: var(--#{$text-input-group}__utilities--MarginInlineEnd);
 
   > * + * {
-    margin-inline-start: var(--#{$text-input-group}__utilities--child--MarginLeft);
+    margin-inline-start: var(--#{$text-input-group}__utilities--child--MarginInlineStart);
   }
 }
 

package/components/Tile/tile.css

@@ -1,15 +1,15 @@
 :where(:root, .pf-v6-c-tile) {
-  --pf-v6-c-tile--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tile--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tile--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-tile--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-tile--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-tile--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-tile--before--BorderRadius: var(--pf-v6-c-tile--BorderRadius);
   --pf-v6-c-tile--after--BackgroundColor: transparent;
-  --pf-v6-c-tile__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-tile__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tile__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-tile__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-tile__title--Color: var(--pf-t--global--text--color--regular);
@@ -23,7 +23,7 @@
   --pf-v6-c-tile--m-disabled__title--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-tile--m-disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-tile--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-tile__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
   --pf-v6-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--2xl);
 }
@@ -32,10 +32,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding-block-start: var(--pf-v6-c-tile--PaddingTop);
-  padding-block-end: var(--pf-v6-c-tile--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-tile--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-tile--PaddingRight);
+  padding-block-start: var(--pf-v6-c-tile--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-tile--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-tile--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-tile--PaddingInlineEnd);
   cursor: pointer;
   background-color: var(--pf-v6-c-tile--BackgroundColor);
   border-radius: var(--pf-v6-c-tile--BorderRadius);
@@ -74,7 +74,7 @@
   align-items: center;
 }
 .pf-v6-c-tile__header.pf-m-stacked {
-  --pf-v6-c-tile__icon--MarginRight: 0;
+  --pf-v6-c-tile__icon--MarginInlineEnd: 0;
   --pf-v6-c-tile__icon--FontSize: var(--pf-v6-c-tile__header--m-stacked__icon--FontSize);
   flex-direction: column;
   align-items: flex-start;
@@ -82,7 +82,7 @@
 .pf-v6-c-tile__header.pf-m-stacked .pf-v6-c-tile__icon {
   display: flex;
   align-items: center;
-  margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBottom);
+  margin-block-end: var(--pf-v6-c-tile__header--m-stacked__icon--MarginBlockEnd);
 }
 
 .pf-v6-c-tile__title {
@@ -96,7 +96,7 @@
 }
 
 .pf-v6-c-tile__icon {
-  margin-inline-end: var(--pf-v6-c-tile__icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-tile__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-tile__icon--FontSize);
   color: var(--pf-v6-c-tile__icon--Color);
 }

package/components/Tile/tile.scss

@@ -1,10 +1,10 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$tile}) {
-  --#{$tile}--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$tile}--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$tile}--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --#{$tile}--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$tile}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$tile}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$tile}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
@@ -15,7 +15,7 @@
   --#{$tile}--after--BackgroundColor: transparent;
 
   // icon
-  --#{$tile}__icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$tile}__icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$tile}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --#{$tile}__icon--Color: var(--pf-t--global--icon--color--regular);
 
@@ -41,7 +41,7 @@
   --#{$tile}--m-disabled__body--Color: var(--pf-t--global--text--color--on-disabled);
 
   // Stacked variatiion
-  --#{$tile}__header--m-stacked__icon--MarginBottom: var(--pf-t--global--spacer--md);
+  --#{$tile}__header--m-stacked__icon--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --#{$tile}__header--m-stacked__icon--FontSize: var(--pf-t--global--icon--size--xl);
 
   // large variation
@@ -52,10 +52,10 @@
   position: relative;
   display: inline-grid;
   grid-template-rows: min-content;
-  padding-block-start: var(--#{$tile}--PaddingTop);
-  padding-block-end: var(--#{$tile}--PaddingBottom);
-  padding-inline-start: var(--#{$tile}--PaddingLeft);
-  padding-inline-end: var(--#{$tile}--PaddingRight);
+  padding-block-start: var(--#{$tile}--PaddingBlockStart);
+  padding-block-end: var(--#{$tile}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tile}--PaddingInlineStart);
+  padding-inline-end: var(--#{$tile}--PaddingInlineEnd);
   cursor: pointer;
   background-color: var(--#{$tile}--BackgroundColor);
   border-radius: var(--#{$tile}--BorderRadius);
@@ -104,7 +104,7 @@
   align-items: center;
 
   &.pf-m-stacked {
-    --#{$tile}__icon--MarginRight: 0;
+    --#{$tile}__icon--MarginInlineEnd: 0;
     --#{$tile}__icon--FontSize: var(--#{$tile}__header--m-stacked__icon--FontSize);
 
     flex-direction: column;
@@ -113,7 +113,7 @@
     .#{$tile}__icon {
       display: flex;
       align-items: center;
-      margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBottom);
+      margin-block-end: var(--#{$tile}__header--m-stacked__icon--MarginBlockEnd);
     }
   }
 }
@@ -129,7 +129,7 @@
 }
 
 .#{$tile}__icon {
-  margin-inline-end: var(--#{$tile}__icon--MarginRight);
+  margin-inline-end: var(--#{$tile}__icon--MarginInlineEnd);
   font-size: var(--#{$tile}__icon--FontSize);
   color: var(--#{$tile}__icon--Color);
 }

package/components/ToggleGroup/toggle-group.css

@@ -1,8 +1,8 @@
 :where(:root, .pf-v6-c-toggle-group) {
-  --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
@@ -13,12 +13,12 @@
   --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-toggle-group__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
-  --pf-v6-c-toggle-group__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -29,10 +29,10 @@
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
   --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingTop: 0;
-  --pf-v6-c-toggle-group--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBottom: 0;
-  --pf-v6-c-toggle-group--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
 
@@ -40,33 +40,33 @@
   display: flex;
 }
 .pf-v6-c-toggle-group.pf-m-compact {
-  --pf-v6-c-toggle-group__button--PaddingTop: var(--pf-v6-c-toggle-group--m-compact__button--PaddingTop);
-  --pf-v6-c-toggle-group__button--PaddingRight: var(--pf-v6-c-toggle-group--m-compact__button--PaddingRight);
-  --pf-v6-c-toggle-group__button--PaddingBottom: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBottom);
-  --pf-v6-c-toggle-group__button--PaddingLeft: var(--pf-v6-c-toggle-group--m-compact__button--PaddingLeft);
+  --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart);
+  --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd);
+  --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd);
+  --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
 }
 
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
-  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
 }
 .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:first-child .pf-v6-c-toggle-group__button::before {
-  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderTopLeftRadius);
-  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderBottomLeftRadius);
+  border-start-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius);
+  border-end-start-radius: var(--pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius);
 }
 .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button, .pf-v6-c-toggle-group__item:last-child .pf-v6-c-toggle-group__button::before {
-  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderTopRightRadius);
-  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderBottomRightRadius);
+  border-start-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius);
+  border-end-end-radius: var(--pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius);
 }
 
 .pf-v6-c-toggle-group__button {
   position: relative;
   z-index: var(--pf-v6-c-toggle-group__button--ZIndex);
   display: inline-flex;
-  padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingTop);
-  padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingRight);
+  padding-block-start: var(--pf-v6-c-toggle-group__button--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-toggle-group__button--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-toggle-group__button--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-toggle-group__button--PaddingInlineEnd);
   font-size: var(--pf-v6-c-toggle-group__button--FontSize);
   line-height: var(--pf-v6-c-toggle-group__button--LineHeight);
   color: var(--pf-v6-c-toggle-group__button--Color);
@@ -118,5 +118,5 @@
 
 .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
 .pf-v6-c-toggle-group__text + .pf-v6-c-toggle-group__icon {
-  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-toggle-group__icon--text--MarginInlineStart);
 }

package/components/ToggleGroup/toggle-group.scss

@@ -2,10 +2,10 @@
 
 :where(:root, .#{$toggle-group}) {
   // button
-  --#{$toggle-group}__button--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$toggle-group}__button--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$toggle-group}__button--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$toggle-group}__button--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$toggle-group}__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$toggle-group}__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$toggle-group}__button--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$toggle-group}__button--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$toggle-group}__button--Color: var(--pf-t--global--text--color--regular);
@@ -18,14 +18,14 @@
   --#{$toggle-group}__button--before--BorderColor: var(--pf-t--global--border--color--default);
 
   // item
-  --#{$toggle-group}__item--item--MarginLeft: calc(-1 * var(--pf-t--global--border--width--control--default));
-  --#{$toggle-group}__item--first-child__button--BorderTopLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius: var(--pf-t--global--border--radius--tiny);
-  --#{$toggle-group}__item--last-child__button--BorderTopRightRadius: var(--pf-t--global--border--radius--tiny);
-  --#{$toggle-group}__item--last-child__button--BorderBottomRightRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
+  --#{$toggle-group}__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
+  --#{$toggle-group}__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
 
   // icon
-  --#{$toggle-group}__icon--text--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 
   // Selected
   --#{$toggle-group}__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
@@ -42,10 +42,10 @@
   --#{$toggle-group}__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Compact
-  --#{$toggle-group}--m-compact__button--PaddingTop: 0;
-  --#{$toggle-group}--m-compact__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$toggle-group}--m-compact__button--PaddingBottom: 0;
-  --#{$toggle-group}--m-compact__button--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}--m-compact__button--PaddingBlockStart: 0;
+  --#{$toggle-group}--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$toggle-group}--m-compact__button--PaddingBlockEnd: 0;
+  --#{$toggle-group}--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$toggle-group}--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
 
@@ -53,25 +53,25 @@
   display: flex;
 
   &.pf-m-compact {
-    --#{$toggle-group}__button--PaddingTop: var(--#{$toggle-group}--m-compact__button--PaddingTop);
-    --#{$toggle-group}__button--PaddingRight: var(--#{$toggle-group}--m-compact__button--PaddingRight);
-    --#{$toggle-group}__button--PaddingBottom: var(--#{$toggle-group}--m-compact__button--PaddingBottom);
-    --#{$toggle-group}__button--PaddingLeft: var(--#{$toggle-group}--m-compact__button--PaddingLeft);
+    --#{$toggle-group}__button--PaddingBlockStart: var(--#{$toggle-group}--m-compact__button--PaddingBlockStart);
+    --#{$toggle-group}__button--PaddingInlineEnd: var(--#{$toggle-group}--m-compact__button--PaddingInlineEnd);
+    --#{$toggle-group}__button--PaddingBlockEnd: var(--#{$toggle-group}--m-compact__button--PaddingBlockEnd);
+    --#{$toggle-group}__button--PaddingInlineStart: var(--#{$toggle-group}--m-compact__button--PaddingInlineStart);
     --#{$toggle-group}__button--FontSize: var(--#{$toggle-group}--m-compact__button--FontSize);
   }
 }
 
 .#{$toggle-group}__item {
   & + & {
-    margin-inline-start: var(--#{$toggle-group}__item--item--MarginLeft);
+    margin-inline-start: var(--#{$toggle-group}__item--item--MarginInlineStart);
   }
 
   &:first-child {
     .#{$toggle-group}__button {
       &,
       &::before {
-        border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderTopLeftRadius);
-        border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderBottomLeftRadius);
+        border-start-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderStartStartRadius);
+        border-end-start-radius: var(--#{$toggle-group}__item--first-child__button--BorderEndStartRadius);
       }
     }
   }
@@ -80,8 +80,8 @@
     .#{$toggle-group}__button {
       &,
       &::before {
-        border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderTopRightRadius);
-        border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderBottomRightRadius);
+        border-start-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderStartEndRadius);
+        border-end-end-radius: var(--#{$toggle-group}__item--last-child__button--BorderEndEndRadius);
       }
     }
   }
@@ -91,10 +91,10 @@
   position: relative;
   z-index: var(--#{$toggle-group}__button--ZIndex);
   display: inline-flex;
-  padding-block-start: var(--#{$toggle-group}__button--PaddingTop);
-  padding-block-end: var(--#{$toggle-group}__button--PaddingBottom);
-  padding-inline-start: var(--#{$toggle-group}__button--PaddingLeft);
-  padding-inline-end: var(--#{$toggle-group}__button--PaddingRight);
+  padding-block-start: var(--#{$toggle-group}__button--PaddingBlockStart);
+  padding-block-end: var(--#{$toggle-group}__button--PaddingBlockEnd);
+  padding-inline-start: var(--#{$toggle-group}__button--PaddingInlineStart);
+  padding-inline-end: var(--#{$toggle-group}__button--PaddingInlineEnd);
   font-size: var(--#{$toggle-group}__button--FontSize);
   line-height: var(--#{$toggle-group}__button--LineHeight);
   color: var(--#{$toggle-group}__button--Color);
@@ -156,6 +156,6 @@
 
 .#{$toggle-group}__icon + .#{$toggle-group}__text,
 .#{$toggle-group}__text + .#{$toggle-group}__icon {
-  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginLeft);
+  margin-inline-start: var(--#{$toggle-group}__icon--text--MarginInlineStart);
 }
 

package/components/Tooltip/tooltip.css

@@ -1,10 +1,10 @@
 :where(:root, .pf-v6-c-tooltip) {
   --pf-v6-c-tooltip--MaxWidth: 18.75rem;
   --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-tooltip__content--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tooltip__content--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-tooltip__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-tooltip__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tooltip__content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-tooltip__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
   --pf-v6-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
   --pf-v6-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -35,8 +35,8 @@
 .pf-v6-c-tooltip:is(.pf-m-top,
 .pf-m-top-left,
 .pf-m-top-right) {
-  --pf-v6-c-tooltip__arrow--Bottom: var(--pf-v6-c-tooltip--m-top--Bottom, 0);
-  --pf-v6-c-tooltip__arrow--Left: var(--pf-v6-c-tooltip--m-top--Left, 50%);
+  --pf-v6-c-tooltip__arrow--InsetBlockEnd: var(--pf-v6-c-tooltip--m-top--InsetBlockEnd, 0);
+  --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-top--InsetInlineStart, 50%);
   --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-top--TranslateX);
   --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
   --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-top--Rotate);
@@ -44,8 +44,8 @@
 .pf-v6-c-tooltip:is(.pf-m-bottom,
 .pf-m-bottom-left,
 .pf-m-bottom-right) {
-  --pf-v6-c-tooltip__arrow--Top: var(--pf-v6-c-tooltip--m-bottom--Top, 0);
-  --pf-v6-c-tooltip__arrow--Left: var(--pf-v6-c-tooltip--m-bottom--Left, 50%);
+  --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-bottom--InsetBlockStart, 0);
+  --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-bottom--InsetInlineStart, 50%);
   --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateX);
   --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-bottom--TranslateY);
   --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-bottom--Rotate);
@@ -53,8 +53,8 @@
 .pf-v6-c-tooltip:is(.pf-m-left,
 .pf-m-left-top,
 .pf-m-left-bottom) {
-  --pf-v6-c-tooltip__arrow--Top: var(--pf-v6-c-tooltip--m-left--Top, 50%);
-  --pf-v6-c-tooltip__arrow--Right: var(--pf-v6-c-tooltip--m-left--Right, 0);
+  --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-left--InsetBlockStart, 50%);
+  --pf-v6-c-tooltip__arrow--InsetInlineEnd: var(--pf-v6-c-tooltip--m-left--InsetInlineEnd, 0);
   --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
   --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-left--TranslateY);
   --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-left--Rotate);
@@ -62,39 +62,39 @@
 .pf-v6-c-tooltip:is(.pf-m-right,
 .pf-m-right-top,
 .pf-m-right-bottom) {
-  --pf-v6-c-tooltip__arrow--Top: var(--pf-v6-c-tooltip--m-right--Top, 50%);
-  --pf-v6-c-tooltip__arrow--Left: var(--pf-v6-c-tooltip--m-right--Left, 0);
+  --pf-v6-c-tooltip__arrow--InsetBlockStart: var(--pf-v6-c-tooltip--m-right--InsetBlockStart, 50%);
+  --pf-v6-c-tooltip__arrow--InsetInlineStart: var(--pf-v6-c-tooltip--m-right--InsetInlineStart, 0);
   --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-right--TranslateX);
   --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-right--TranslateY);
   --pf-v6-c-tooltip__arrow--Rotate: var(--pf-v6-c-tooltip__arrow--m-right--Rotate);
 }
 .pf-v6-c-tooltip:is(.pf-m-left-top,
 .pf-m-right-top) {
-  --pf-v6-c-tooltip__arrow--Top: 0;
+  --pf-v6-c-tooltip__arrow--InsetBlockStart: 0;
   --pf-v6-c-tooltip__arrow--TranslateY: var(--pf-v6-c-tooltip__arrow--m-top--TranslateY);
 }
 .pf-v6-c-tooltip:is(.pf-m-left-bottom,
 .pf-m-right-bottom) {
-  --pf-v6-c-tooltip__arrow--Top: auto;
-  --pf-v6-c-tooltip__arrow--Bottom: 0;
+  --pf-v6-c-tooltip__arrow--InsetBlockStart: auto;
+  --pf-v6-c-tooltip__arrow--InsetBlockEnd: 0;
 }
 .pf-v6-c-tooltip:is(.pf-m-top-left,
 .pf-m-bottom-left) {
-  --pf-v6-c-tooltip__arrow--Left: 0;
+  --pf-v6-c-tooltip__arrow--InsetInlineStart: 0;
   --pf-v6-c-tooltip__arrow--TranslateX: var(--pf-v6-c-tooltip__arrow--m-left--TranslateX);
 }
 .pf-v6-c-tooltip:is(.pf-m-top-right,
 .pf-m-bottom-right) {
-  --pf-v6-c-tooltip__arrow--Right: 0;
-  --pf-v6-c-tooltip__arrow--Left: auto;
+  --pf-v6-c-tooltip__arrow--InsetInlineEnd: 0;
+  --pf-v6-c-tooltip__arrow--InsetInlineStart: auto;
 }
 
 .pf-v6-c-tooltip__content {
   position: relative;
-  padding-block-start: var(--pf-v6-c-tooltip__content--PaddingTop);
-  padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingRight);
+  padding-block-start: var(--pf-v6-c-tooltip__content--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-tooltip__content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-tooltip__content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-tooltip__content--PaddingInlineEnd);
   font-size: var(--pf-v6-c-tooltip__content--FontSize);
   color: var(--pf-v6-c-tooltip__content--Color);
   text-align: center;
@@ -108,10 +108,10 @@
 
 .pf-v6-c-tooltip__arrow {
   position: absolute;
-  top: var(--pf-v6-c-tooltip__arrow--Top, auto);
-  right: var(--pf-v6-c-tooltip__arrow--Right, auto);
-  bottom: var(--pf-v6-c-tooltip__arrow--Bottom, auto);
-  left: var(--pf-v6-c-tooltip__arrow--Left, auto);
+  top: var(--pf-v6-c-tooltip__arrow--InsetBlockStart, auto);
+  right: var(--pf-v6-c-tooltip__arrow--InsetInlineEnd, auto);
+  bottom: var(--pf-v6-c-tooltip__arrow--InsetBlockEnd, auto);
+  left: var(--pf-v6-c-tooltip__arrow--InsetInlineStart, auto);
   width: var(--pf-v6-c-tooltip__arrow--Width);
   height: var(--pf-v6-c-tooltip__arrow--Height);
   pointer-events: none;