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

package/components/Check/check.scss

@@ -15,7 +15,7 @@
   --#{$check}__description--Color: var(--pf-t--global--text--color--subtle);
 
   // Required checkbox
-  --#{$check}__label-required--MarginLeft: var(--pf-t--global--spacer--xs);
+  --#{$check}__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --#{$check}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$check}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
@@ -87,7 +87,7 @@
 }
 
 .#{$check}__label-required {
-  margin-inline-start: var(--#{$check}__label-required--MarginLeft);
+  margin-inline-start: var(--#{$check}__label-required--MarginInlineStart);
   font-size: var(--#{$check}__label-required--FontSize);
   color: var(--#{$check}__label-required--Color);
 }

package/components/Chip/chip-group.css

@@ -1,37 +1,37 @@
 .pf-v6-c-chip-group {
-  --pf-v6-c-chip-group--PaddingTop: 0;
-  --pf-v6-c-chip-group--PaddingRight: 0;
-  --pf-v6-c-chip-group--PaddingBottom: 0;
-  --pf-v6-c-chip-group--PaddingLeft: 0;
+  --pf-v6-c-chip-group--PaddingBlockStart: 0;
+  --pf-v6-c-chip-group--PaddingInlineEnd: 0;
+  --pf-v6-c-chip-group--PaddingBlockEnd: 0;
+  --pf-v6-c-chip-group--PaddingInlineStart: 0;
   --pf-v6-c-chip-group--RowGap: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-chip-group--ColumnGap: 0;
   --pf-v6-c-chip-group__main--RowGap: var(--pf-v6-global--spacer--xs);
   --pf-v6-c-chip-group__main--ColumnGap: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-chip-group__list--RowGap: var(--pf-v6-global--spacer--xs);
   --pf-v6-c-chip-group__list--ColumnGap: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingTop: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingRight: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingBottom: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip-group--m-category--PaddingLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-chip-group--m-category--PaddingBlockStart: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip-group--m-category--PaddingInlineEnd: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip-group--m-category--PaddingBlockEnd: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip-group--m-category--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-chip-group--m-category--BorderRadius: var(--pf-v6-global--BorderRadius--sm);
   --pf-v6-c-chip-group--m-category--BackgroundColor: var(--pf-v6-global--BackgroundColor--200);
   --pf-v6-c-chip-group__label--FontSize: var(--pf-v6-global--FontSize--sm);
   --pf-v6-c-chip-group__label--MaxWidth: 18ch;
-  --pf-v6-c-chip-group__close--MarginTop: calc(var(--pf-v6-global--spacer--xs) * -1);
-  --pf-v6-c-chip-group__close--MarginBottom: calc(var(--pf-v6-global--spacer--xs) * -1);
+  --pf-v6-c-chip-group__close--MarginBlockStart: calc(var(--pf-v6-global--spacer--xs) * -1);
+  --pf-v6-c-chip-group__close--MarginBlockEnd: calc(var(--pf-v6-global--spacer--xs) * -1);
   row-gap: var(--pf-v6-c-chip-group--RowGap);
   column-gap: var(--pf-v6-c-chip-group--ColumnGap);
   max-width: 100%;
-  padding-block-start: var(--pf-v6-c-chip-group--PaddingTop);
-  padding-block-end: var(--pf-v6-c-chip-group--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-chip-group--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-chip-group--PaddingRight);
+  padding-block-start: var(--pf-v6-c-chip-group--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-chip-group--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-chip-group--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-chip-group--PaddingInlineEnd);
 }
 .pf-v6-c-chip-group.pf-m-category {
-  --pf-v6-c-chip-group--PaddingTop: var(--pf-v6-c-chip-group--m-category--PaddingTop);
-  --pf-v6-c-chip-group--PaddingRight: var(--pf-v6-c-chip-group--m-category--PaddingRight);
-  --pf-v6-c-chip-group--PaddingBottom: var(--pf-v6-c-chip-group--m-category--PaddingBottom);
-  --pf-v6-c-chip-group--PaddingLeft: var(--pf-v6-c-chip-group--m-category--PaddingLeft);
+  --pf-v6-c-chip-group--PaddingBlockStart: var(--pf-v6-c-chip-group--m-category--PaddingBlockStart);
+  --pf-v6-c-chip-group--PaddingInlineEnd: var(--pf-v6-c-chip-group--m-category--PaddingInlineEnd);
+  --pf-v6-c-chip-group--PaddingBlockEnd: var(--pf-v6-c-chip-group--m-category--PaddingBlockEnd);
+  --pf-v6-c-chip-group--PaddingInlineStart: var(--pf-v6-c-chip-group--m-category--PaddingInlineStart);
   background-color: var(--pf-v6-c-chip-group--m-category--BackgroundColor);
   border-radius: var(--pf-v6-c-chip-group--m-category--BorderRadius);
 }
@@ -75,6 +75,6 @@
 .pf-v6-c-chip-group__close {
   display: flex;
   align-self: flex-start;
-  margin-block-start: var(--pf-v6-c-chip-group__close--MarginTop);
-  margin-block-end: var(--pf-v6-c-chip-group__close--MarginBottom);
+  margin-block-start: var(--pf-v6-c-chip-group__close--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-chip-group__close--MarginBlockEnd);
 }

package/components/Chip/chip-group.scss

@@ -3,10 +3,10 @@
 .#{$chip}-group {
   // Chip group - spaces main and close
   // column-gap spacer supports legacy chip group
-  --#{$chip}-group--PaddingTop: 0;
-  --#{$chip}-group--PaddingRight: 0;
-  --#{$chip}-group--PaddingBottom: 0;
-  --#{$chip}-group--PaddingLeft: 0;
+  --#{$chip}-group--PaddingBlockStart: 0;
+  --#{$chip}-group--PaddingInlineEnd: 0;
+  --#{$chip}-group--PaddingBlockEnd: 0;
+  --#{$chip}-group--PaddingInlineStart: 0;
   --#{$chip}-group--RowGap: var(--#{$pf-global}--spacer--sm);
   --#{$chip}-group--ColumnGap: 0;
 
@@ -19,10 +19,10 @@
   --#{$chip}-group__list--ColumnGap: var(--#{$pf-global}--spacer--xs);
 
   // Category modifier
-  --#{$chip}-group--m-category--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group--m-category--PaddingRight: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group--m-category--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}-group--m-category--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$chip}-group--m-category--PaddingBlockStart: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}-group--m-category--PaddingInlineEnd: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}-group--m-category--PaddingBlockEnd: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}-group--m-category--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
   --#{$chip}-group--m-category--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
   --#{$chip}-group--m-category--BackgroundColor: var(--#{$pf-global}--BackgroundColor--200);
 
@@ -31,22 +31,22 @@
   --#{$chip}-group__label--MaxWidth: 18ch;
 
   // Chip group close - negative margin stretches height for click area
-  --#{$chip}-group__close--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
-  --#{$chip}-group__close--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
+  --#{$chip}-group__close--MarginBlockStart: calc(var(--#{$pf-global}--spacer--xs) * -1);
+  --#{$chip}-group__close--MarginBlockEnd: calc(var(--#{$pf-global}--spacer--xs) * -1);
 
   row-gap: var(--#{$chip}-group--RowGap);
   column-gap: var(--#{$chip}-group--ColumnGap);
   max-width: 100%;
-  padding-block-start: var(--#{$chip}-group--PaddingTop);
-  padding-block-end: var(--#{$chip}-group--PaddingBottom);
-  padding-inline-start: var(--#{$chip}-group--PaddingLeft);
-  padding-inline-end: var(--#{$chip}-group--PaddingRight);
+  padding-block-start: var(--#{$chip}-group--PaddingBlockStart);
+  padding-block-end: var(--#{$chip}-group--PaddingBlockEnd);
+  padding-inline-start: var(--#{$chip}-group--PaddingInlineStart);
+  padding-inline-end: var(--#{$chip}-group--PaddingInlineEnd);
 
   &.pf-m-category {
-    --#{$chip}-group--PaddingTop: var(--#{$chip}-group--m-category--PaddingTop);
-    --#{$chip}-group--PaddingRight: var(--#{$chip}-group--m-category--PaddingRight);
-    --#{$chip}-group--PaddingBottom: var(--#{$chip}-group--m-category--PaddingBottom);
-    --#{$chip}-group--PaddingLeft: var(--#{$chip}-group--m-category--PaddingLeft);
+    --#{$chip}-group--PaddingBlockStart: var(--#{$chip}-group--m-category--PaddingBlockStart);
+    --#{$chip}-group--PaddingInlineEnd: var(--#{$chip}-group--m-category--PaddingInlineEnd);
+    --#{$chip}-group--PaddingBlockEnd: var(--#{$chip}-group--m-category--PaddingBlockEnd);
+    --#{$chip}-group--PaddingInlineStart: var(--#{$chip}-group--m-category--PaddingInlineStart);
 
     background-color: var(--#{$chip}-group--m-category--BackgroundColor);
     border-radius: var(--#{$chip}-group--m-category--BorderRadius);
@@ -91,6 +91,6 @@
 .#{$chip}-group__close {
   display: flex;
   align-self: flex-start;
-  margin-block-start: var(--#{$chip}-group__close--MarginTop);
-  margin-block-end: var(--#{$chip}-group__close--MarginBottom);
+  margin-block-start: var(--#{$chip}-group__close--MarginBlockStart);
+  margin-block-end: var(--#{$chip}-group__close--MarginBlockEnd);
 }

package/components/Chip/chip.css

@@ -1,8 +1,8 @@
 .pf-v6-c-chip {
-  --pf-v6-c-chip--PaddingTop: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip--PaddingBottom: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip--PaddingLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-chip--PaddingBlockStart: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-chip--PaddingBlockEnd: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
   --pf-v6-c-chip--BackgroundColor: var(--pf-v6-global--Color--light-100);
   --pf-v6-c-chip--BorderRadius: var(--pf-v6-global--BorderRadius--sm);
   --pf-v6-c-chip--before--BorderColor: var(--pf-v6-global--BorderColor--300);
@@ -16,25 +16,25 @@
   --pf-v6-c-chip__content--ColumnGap: var(--pf-v6-global--spacer--xs);
   --pf-v6-c-chip__text--Color: var(--pf-v6-global--Color--100);
   --pf-v6-c-chip__text--MaxWidth: 16ch;
-  --pf-v6-c-chip__c-badge--MarginLeft: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip__c-badge--MarginInlineStart: var(--pf-v6-global--spacer--xs);
   --pf-v6-c-chip__actions--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-chip__actions--c-button--PaddingTop: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip__actions--c-button--PaddingRight: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip__actions--c-button--PaddingBottom: var(--pf-v6-global--spacer--xs);
-  --pf-v6-c-chip__actions--c-button--PaddingLeft: var(--pf-v6-global--spacer--sm);
-  --pf-v6-c-chip__actions--c-button--MarginTop: calc(var(--pf-v6-c-chip--PaddingTop) * -1);
-  --pf-v6-c-chip__actions--c-button--MarginRight: calc(var(--pf-v6-c-chip--PaddingRight) / 2 * -1);
-  --pf-v6-c-chip__actions--c-button--MarginBottom: calc(var(--pf-v6-c-chip--PaddingBottom) * -1);
+  --pf-v6-c-chip__actions--c-button--PaddingBlockStart: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip__actions--c-button--PaddingInlineEnd: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-chip__actions--c-button--PaddingBlockEnd: var(--pf-v6-global--spacer--xs);
+  --pf-v6-c-chip__actions--c-button--PaddingInlineStart: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-chip__actions--c-button--MarginBlockStart: calc(var(--pf-v6-c-chip--PaddingBlockStart) * -1);
+  --pf-v6-c-chip__actions--c-button--MarginInlineEnd: calc(var(--pf-v6-c-chip--PaddingInlineEnd) / 2 * -1);
+  --pf-v6-c-chip__actions--c-button--MarginBlockEnd: calc(var(--pf-v6-c-chip--PaddingBlockEnd) * -1);
   --pf-v6-c-chip__actions--c-button--FontSize: var(--pf-v6-global--FontSize--xs);
-  --pf-v6-c-chip__icon--MarginLeft: var(--pf-v6-global--spacer--sm);
+  --pf-v6-c-chip__icon--MarginInlineStart: var(--pf-v6-global--spacer--sm);
   position: relative;
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding-block-start: var(--pf-v6-c-chip--PaddingTop);
-  padding-block-end: var(--pf-v6-c-chip--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-chip--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-chip--PaddingRight);
+  padding-block-start: var(--pf-v6-c-chip--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-chip--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-chip--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-chip--PaddingInlineEnd);
   list-style: none;
   background-color: var(--pf-v6-c-chip--BackgroundColor);
   border-radius: var(--pf-v6-c-chip--BorderRadius);
@@ -72,12 +72,12 @@
   color: var(--pf-v6-c-chip__text--Color);
 }
 .pf-v6-c-chip__text .pf-v6-c-badge {
-  margin-inline-start: var(--pf-v6-c-chip__c-badge--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-chip__c-badge--MarginInlineStart);
 }
 
 .pf-v6-c-chip__icon + .pf-v6-c-chip__text,
 .pf-v6-c-chip__text + .pf-v6-c-chip__icon {
-  margin-inline-start: var(--pf-v6-c-chip__icon--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-chip__icon--MarginInlineStart);
 }
 
 .pf-v6-c-chip__content {
@@ -91,13 +91,13 @@
   font-size: var(--pf-v6-c-chip__actions--FontSize);
 }
 .pf-v6-c-chip__actions .pf-v6-c-button {
-  --pf-v6-c-button--PaddingTop: var(--pf-v6-c-chip__actions--c-button--PaddingTop);
-  --pf-v6-c-button--PaddingRight: var(--pf-v6-c-chip__actions--c-button--PaddingRight);
-  --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-chip__actions--c-button--PaddingBottom);
-  --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-chip__actions--c-button--PaddingLeft);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-chip__actions--c-button--PaddingBlockStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-chip__actions--c-button--PaddingInlineEnd);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-chip__actions--c-button--PaddingBlockEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-chip__actions--c-button--PaddingInlineStart);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-chip__actions--c-button--FontSize);
-  margin-block-start: var(--pf-v6-c-chip__actions--c-button--MarginTop);
-  margin-block-end: var(--pf-v6-c-chip__actions--c-button--MarginBottom);
-  margin-inline-end: var(--pf-v6-c-chip__actions--c-button--MarginRight);
+  margin-block-start: var(--pf-v6-c-chip__actions--c-button--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-chip__actions--c-button--MarginBlockEnd);
+  margin-inline-end: var(--pf-v6-c-chip__actions--c-button--MarginInlineEnd);
   line-height: 1;
 }

package/components/Chip/chip.scss

@@ -1,10 +1,10 @@
 @use '../../sass-utilities' as *;
 
 .#{$chip} {
-  --#{$chip}--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$chip}--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}--PaddingLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$chip}--PaddingBlockStart: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
+  --#{$chip}--PaddingBlockEnd: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
   --#{$chip}--BackgroundColor: var(--#{$pf-global}--Color--light-100);
   --#{$chip}--BorderRadius: var(--#{$pf-global}--BorderRadius--sm);
   --#{$chip}--before--BorderColor: var(--#{$pf-global}--BorderColor--300);
@@ -26,32 +26,32 @@
   // chip text
   --#{$chip}__text--Color: var(--#{$pf-global}--Color--100);
   --#{$chip}__text--MaxWidth: 16ch;
-  --#{$chip}__c-badge--MarginLeft: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}__c-badge--MarginInlineStart: var(--#{$pf-global}--spacer--xs);
 
   // chip actions
   --#{$chip}__actions--FontSize: var(--#{$pf-global}--FontSize--xs);
 
   // buttons within chip actions
-  --#{$chip}__actions--c-button--PaddingTop: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}__actions--c-button--PaddingRight: var(--#{$pf-global}--spacer--sm);
-  --#{$chip}__actions--c-button--PaddingBottom: var(--#{$pf-global}--spacer--xs);
-  --#{$chip}__actions--c-button--PaddingLeft: var(--#{$pf-global}--spacer--sm);
-  --#{$chip}__actions--c-button--MarginTop: calc(var(--#{$chip}--PaddingTop) * -1);
-  --#{$chip}__actions--c-button--MarginRight: calc(var(--#{$chip}--PaddingRight) / 2 * -1);
-  --#{$chip}__actions--c-button--MarginBottom: calc(var(--#{$chip}--PaddingBottom) * -1);
+  --#{$chip}__actions--c-button--PaddingBlockStart: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}__actions--c-button--PaddingInlineEnd: var(--#{$pf-global}--spacer--sm);
+  --#{$chip}__actions--c-button--PaddingBlockEnd: var(--#{$pf-global}--spacer--xs);
+  --#{$chip}__actions--c-button--PaddingInlineStart: var(--#{$pf-global}--spacer--sm);
+  --#{$chip}__actions--c-button--MarginBlockStart: calc(var(--#{$chip}--PaddingBlockStart) * -1);
+  --#{$chip}__actions--c-button--MarginInlineEnd: calc(var(--#{$chip}--PaddingInlineEnd) / 2 * -1);
+  --#{$chip}__actions--c-button--MarginBlockEnd: calc(var(--#{$chip}--PaddingBlockEnd) * -1);
   --#{$chip}__actions--c-button--FontSize: var(--#{$pf-global}--FontSize--xs);
 
   // icon
-  --#{$chip}__icon--MarginLeft: var(--#{$pf-global}--spacer--sm);
+  --#{$chip}__icon--MarginInlineStart: var(--#{$pf-global}--spacer--sm);
 
   position: relative;
   display: inline-flex;
   align-items: center;
   min-width: 0;
-  padding-block-start: var(--#{$chip}--PaddingTop);
-  padding-block-end: var(--#{$chip}--PaddingBottom);
-  padding-inline-start: var(--#{$chip}--PaddingLeft);
-  padding-inline-end: var(--#{$chip}--PaddingRight);
+  padding-block-start: var(--#{$chip}--PaddingBlockStart);
+  padding-block-end: var(--#{$chip}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$chip}--PaddingInlineStart);
+  padding-inline-end: var(--#{$chip}--PaddingInlineEnd);
   list-style: none;
   background-color: var(--#{$chip}--BackgroundColor);
   border-radius: var(--#{$chip}--BorderRadius);
@@ -96,13 +96,13 @@
   color: var(--#{$chip}__text--Color);
 
   .#{$badge} {
-    margin-inline-start: var(--#{$chip}__c-badge--MarginLeft); // remove in breaking change
+    margin-inline-start: var(--#{$chip}__c-badge--MarginInlineStart); // remove in breaking change
   }
 }
 
 .#{$chip}__icon + .#{$chip}__text,
 .#{$chip}__text + .#{$chip}__icon {
-  margin-inline-start: var(--#{$chip}__icon--MarginLeft);
+  margin-inline-start: var(--#{$chip}__icon--MarginInlineStart);
 }
 
 .#{$chip}__content {
@@ -117,15 +117,15 @@
 
   // Actions Button
   .#{$button} {
-    --#{$button}--PaddingTop: var(--#{$chip}__actions--c-button--PaddingTop);
-    --#{$button}--PaddingRight: var(--#{$chip}__actions--c-button--PaddingRight);
-    --#{$button}--PaddingBottom: var(--#{$chip}__actions--c-button--PaddingBottom);
-    --#{$button}--PaddingLeft: var(--#{$chip}__actions--c-button--PaddingLeft);
+    --#{$button}--PaddingBlockStart: var(--#{$chip}__actions--c-button--PaddingBlockStart);
+    --#{$button}--PaddingInlineEnd: var(--#{$chip}__actions--c-button--PaddingInlineEnd);
+    --#{$button}--PaddingBlockEnd: var(--#{$chip}__actions--c-button--PaddingBlockEnd);
+    --#{$button}--PaddingInlineStart: var(--#{$chip}__actions--c-button--PaddingInlineStart);
     --#{$button}--FontSize: var(--#{$chip}__actions--c-button--FontSize);
 
-    margin-block-start: var(--#{$chip}__actions--c-button--MarginTop);
-    margin-block-end: var(--#{$chip}__actions--c-button--MarginBottom);
-    margin-inline-end: var(--#{$chip}__actions--c-button--MarginRight);
+    margin-block-start: var(--#{$chip}__actions--c-button--MarginBlockStart);
+    margin-block-end: var(--#{$chip}__actions--c-button--MarginBlockEnd);
+    margin-inline-end: var(--#{$chip}__actions--c-button--MarginInlineEnd);
     line-height: 1;
   }
 }

package/components/ClipboardCopy/clipboard-copy.css

@@ -1,32 +1,32 @@
 :where(:root, .pf-v6-c-clipboard-copy) {
   --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v6-c-clipboard-copy__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-clipboard-copy__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-clipboard-copy__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-clipboard-copy__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-clipboard-copy__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-clipboard-copy__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy__group--Gap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy--m-inline--PaddingTop: 0;
-  --pf-v6-c-clipboard-copy--m-inline--PaddingBottom: 0;
-  --pf-v6-c-clipboard-copy--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart: 0;
+  --pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd: 0;
+  --pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-clipboard-copy__text--m-code--FontFamily: var(--pf-t--global--font--family--mono);
   --pf-v6-c-clipboard-copy__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-clipboard-copy__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
-  --pf-v6-c-clipboard-copy__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-clipboard-copy__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v6-c-clipboard-copy__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-clipboard-copy.pf-m-expanded .pf-v6-c-clipboard-copy__toggle-icon {
@@ -34,9 +34,9 @@
 }
 .pf-v6-c-clipboard-copy.pf-m-inline {
   display: inline;
-  padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingTop);
-  padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingLeft);
+  padding-block-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-clipboard-copy--m-inline--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-clipboard-copy--m-inline--PaddingInlineStart);
   white-space: nowrap;
   background-color: var(--pf-v6-c-clipboard-copy--m-inline--BackgroundColor);
 }
@@ -60,19 +60,19 @@
 }
 
 .pf-v6-c-clipboard-copy__expandable-content {
-  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingTop);
-  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingRight);
-  margin-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--MarginTop);
+  padding-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-clipboard-copy__expandable-content--PaddingInlineEnd);
+  margin-block-start: var(--pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart);
   word-wrap: break-word;
   background-color: var(--pf-v6-c-clipboard-copy__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--pf-v6-c-clipboard-copy__expandable-content--BorderColor);
-  border-block-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderTopWidth);
-  border-block-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBottomWidth);
-  border-inline-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderLeftWidth);
-  border-inline-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderRightWidth);
+  border-block-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBlockStartWidth);
+  border-block-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderBlockEndWidth);
+  border-inline-start-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderInlineStartWidth);
+  border-inline-end-width: var(--pf-v6-c-clipboard-copy__expandable-content--BorderInlineEndWidth);
   border-radius: var(--pf-v6-c-clipboard-copy__expandable-content--BorderRadius);
   box-shadow: var(--pf-v6-c-clipboard-copy__expandable-content--BoxShadow);
 }
@@ -94,12 +94,12 @@
 }
 
 .pf-v6-c-clipboard-copy__actions-item {
-  margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingTop));
-  margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBottom));
+  margin-block-start: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart));
+  margin-block-end: calc(-1 * var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd));
 }
 .pf-v6-c-clipboard-copy__actions-item .pf-v6-c-button {
-  --pf-v6-c-button--PaddingTop: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingTop);
-  --pf-v6-c-button--PaddingRight: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingRight);
-  --pf-v6-c-button--PaddingBottom: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBottom);
-  --pf-v6-c-button--PaddingLeft: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingLeft);
+  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineEnd);
+  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingBlockEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-clipboard-copy__actions-item--button--PaddingInlineStart);
 }

package/components/ClipboardCopy/clipboard-copy.scss

@@ -6,16 +6,16 @@
   --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
 
   // Clipboard copy expanded content
-  --#{$clipboard-copy}__expandable-content--MarginTop: var(--pf-t--global--spacer--xs);
-  --#{$clipboard-copy}__expandable-content--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$clipboard-copy}__expandable-content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$clipboard-copy}__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$clipboard-copy}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$clipboard-copy}__expandable-content--BorderTopWidth: var(--pf-t--global--border--width--control--default);
-  --#{$clipboard-copy}__expandable-content--BorderRightWidth: var(--pf-t--global--border--width--control--default);
-  --#{$clipboard-copy}__expandable-content--BorderBottomWidth: var(--pf-t--global--border--width--control--default);
-  --#{$clipboard-copy}__expandable-content--BorderLeftWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderBlockStartWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderInlineEndWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderBlockEndWidth: var(--pf-t--global--border--width--control--default);
+  --#{$clipboard-copy}__expandable-content--BorderInlineStartWidth: var(--pf-t--global--border--width--control--default);
   --#{$clipboard-copy}__expandable-content--BorderColor: var(--pf-t--global--border--color--default);
   --#{$clipboard-copy}__expandable-content--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$clipboard-copy}__expandable-content--OutlineOffset: var(--pf-t--global--spacer--xs);
@@ -24,9 +24,9 @@
   --#{$clipboard-copy}__group--Gap: var(--pf-t--global--spacer--xs);
 
   // Inline
-  --#{$clipboard-copy}--m-inline--PaddingTop: 0; // remove at breaking change
-  --#{$clipboard-copy}--m-inline--PaddingBottom: 0; // remove at breaking change
-  --#{$clipboard-copy}--m-inline--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}--m-inline--PaddingBlockStart: 0; // remove at breaking change
+  --#{$clipboard-copy}--m-inline--PaddingBlockEnd: 0; // remove at breaking change
+  --#{$clipboard-copy}--m-inline--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --#{$clipboard-copy}--m-inline--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Text
@@ -34,12 +34,12 @@
   --#{$clipboard-copy}__text--m-code--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Actions
-  --#{$clipboard-copy}__actions-item--MarginTop: calc(-1 * var(--pf-t--global--spacer--xs));
-  --#{$clipboard-copy}__actions-item--MarginBottom: calc(-1 * var(--pf-t--global--spacer--xs));
-  --#{$clipboard-copy}__actions-item--button--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingRight: var(--pf-t--global--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$clipboard-copy}__actions-item--button--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--xs));
+  --#{$clipboard-copy}__actions-item--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--xs));
+  --#{$clipboard-copy}__actions-item--button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$clipboard-copy}__actions-item--button--PaddingInlineStart: var(--pf-t--global--spacer--xs);
 }
 
 .#{$clipboard-copy} {
@@ -52,9 +52,9 @@
 
   &.pf-m-inline {
     display: inline;
-    padding-block-start: var(--#{$clipboard-copy}--m-inline--PaddingTop);
-    padding-block-end: var(--#{$clipboard-copy}--m-inline--PaddingBottom);
-    padding-inline-start: var(--#{$clipboard-copy}--m-inline--PaddingLeft);
+    padding-block-start: var(--#{$clipboard-copy}--m-inline--PaddingBlockStart);
+    padding-block-end: var(--#{$clipboard-copy}--m-inline--PaddingBlockEnd);
+    padding-inline-start: var(--#{$clipboard-copy}--m-inline--PaddingInlineStart);
     white-space: nowrap;
     background-color: var(--#{$clipboard-copy}--m-inline--BackgroundColor);
 
@@ -81,19 +81,19 @@
 }
 
 .#{$clipboard-copy}__expandable-content {
-  padding-block-start: var(--#{$clipboard-copy}__expandable-content--PaddingTop);
-  padding-block-end: var(--#{$clipboard-copy}__expandable-content--PaddingBottom);
-  padding-inline-start: var(--#{$clipboard-copy}__expandable-content--PaddingLeft);
-  padding-inline-end: var(--#{$clipboard-copy}__expandable-content--PaddingRight);
-  margin-block-start: var(--#{$clipboard-copy}__expandable-content--MarginTop);
+  padding-block-start: var(--#{$clipboard-copy}__expandable-content--PaddingBlockStart);
+  padding-block-end: var(--#{$clipboard-copy}__expandable-content--PaddingBlockEnd);
+  padding-inline-start: var(--#{$clipboard-copy}__expandable-content--PaddingInlineStart);
+  padding-inline-end: var(--#{$clipboard-copy}__expandable-content--PaddingInlineEnd);
+  margin-block-start: var(--#{$clipboard-copy}__expandable-content--MarginBlockStart);
   word-wrap: break-word;
   background-color: var(--#{$clipboard-copy}__expandable-content--BackgroundColor);
   background-clip: padding-box;
   border: solid var(--#{$clipboard-copy}__expandable-content--BorderColor);
-  border-block-start-width: var(--#{$clipboard-copy}__expandable-content--BorderTopWidth);
-  border-block-end-width: var(--#{$clipboard-copy}__expandable-content--BorderBottomWidth);
-  border-inline-start-width: var(--#{$clipboard-copy}__expandable-content--BorderLeftWidth);
-  border-inline-end-width: var(--#{$clipboard-copy}__expandable-content--BorderRightWidth);
+  border-block-start-width: var(--#{$clipboard-copy}__expandable-content--BorderBlockStartWidth);
+  border-block-end-width: var(--#{$clipboard-copy}__expandable-content--BorderBlockEndWidth);
+  border-inline-start-width: var(--#{$clipboard-copy}__expandable-content--BorderInlineStartWidth);
+  border-inline-end-width: var(--#{$clipboard-copy}__expandable-content--BorderInlineEndWidth);
   border-radius: var(--#{$clipboard-copy}__expandable-content--BorderRadius);
   box-shadow: var(--#{$clipboard-copy}__expandable-content--BoxShadow);
 
@@ -117,14 +117,14 @@
 }
 
 .#{$clipboard-copy}__actions-item {
-  margin-block-start: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingTop));
-  margin-block-end: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBottom));
+  margin-block-start: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart));
+  margin-block-end: calc(-1 * var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd));
 
   .#{$button} {
-    --#{$button}--PaddingTop: var(--#{$clipboard-copy}__actions-item--button--PaddingTop);
-    --#{$button}--PaddingRight: var(--#{$clipboard-copy}__actions-item--button--PaddingRight);
-    --#{$button}--PaddingBottom: var(--#{$clipboard-copy}__actions-item--button--PaddingBottom);
-    --#{$button}--PaddingLeft: var(--#{$clipboard-copy}__actions-item--button--PaddingLeft);
+    --#{$button}--PaddingBlockStart: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockStart);
+    --#{$button}--PaddingInlineEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineEnd);
+    --#{$button}--PaddingBlockEnd: var(--#{$clipboard-copy}__actions-item--button--PaddingBlockEnd);
+    --#{$button}--PaddingInlineStart: var(--#{$clipboard-copy}__actions-item--button--PaddingInlineStart);
   }
 }