@patternfly/patternfly 5.1.0-prerelease.1 → 5.1.0-prerelease.11

package/components/Table/table-tree-view.scss

@@ -60,14 +60,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   display: flex;
   align-items: baseline;
   min-width: 0;
-  padding-left: var(--#{$table}__tree-view-main--PaddingLeft);
-  margin-left: var(--#{$table}__tree-view-main--MarginLeft);
-  text-align: left;
+  padding-inline-start: var(--#{$table}__tree-view-main--PaddingLeft);
+  margin-inline-start: var(--#{$table}__tree-view-main--MarginLeft);
+  text-align: start;
   cursor: pointer;
 
   > .#{$table}__toggle {
     position: var(--#{$table}--m-tree-view__toggle--Position);
-    left: var(--#{$table}--m-tree-view__toggle--Left);
+   inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
     transform: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX));
 
     .#{$table}__toggle-icon {
@@ -76,13 +76,16 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   }
 
   > .#{$table}__check {
-    margin-right: var(--#{$table}__tree-view-main--c-table__check--MarginRight);
+    margin-inline-end: var(--#{$table}__tree-view-main--c-table__check--MarginRight);
   }
 
   > .#{$table}__check label {
-    padding-right: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
-    padding-left: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
-    margin: 0 calc(var(--#{$table}__tree-view-main--c-table__check--MarginRight) * -1) 0 0;
+    padding-inline-start: var(--#{$table}__tree-view-main--c-table__check--PaddingLeft);
+    padding-inline-end: var(--#{$table}__tree-view-main--c-table__check--PaddingRight);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: calc(var(--#{$table}__tree-view-main--c-table__check--MarginRight) * -1);
   }
 }
 
@@ -92,14 +95,13 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
 .#{$table}__tree-view-icon {
   min-width: var(--#{$table}__tree-view-icon--MinWidth);
-  margin-right: var(--#{$table}__tree-view-icon--MarginRight);
+  margin-inline-end: var(--#{$table}__tree-view-icon--MarginRight);
 }
 
 .#{$table}__tree-view-details-toggle {
   display: none;
 }
 
-// stylelint-disable
 @mixin pf-tree-view-grid {
   .pf-m-tree-view-grid.#{$table} {
     @content;
@@ -150,7 +152,7 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
   // node cells
   --#{$table}--m-tree-view-grid__tr--expanded__tree-view-title-cell--PaddingTop: var(--#{$pf-global}--spacer--xl);
-  --#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr));
+  --#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns: repeat(auto-fit, minmax(150px, 1fr)); // use minmax func to contain possible text modifier width
   --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--#{$pf-global}--spacer--xs);
   --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--#{$pf-global}--spacer--xs);
 
@@ -175,17 +177,17 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
   tbody:where(.#{$table}__tbody) tr:where(.#{$table}__tr) {
     position: relative;
-    outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
     border: none;
+    outline-offset: var(--#{$table}--m-tree-view-grid--tr--OutlineOffset);
 
     &::before {
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
-      border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+      inset-block-start: 0;
+      inset-block-end: 0;
+      inset-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
+      inset-inline-end: 0;
       content: '';
+      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
     }
   }
 
@@ -209,11 +211,11 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     --#{$table}--cell--PaddingTop: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop);
     --#{$table}--cell--PaddingBottom: var(--#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom);
 
-    padding-left: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
+    padding-inline-start: var(--#{$table}--m-tree-view-grid__tbody--cell--PaddingLeft);
   }
 
   .#{$table}__tree-view-text {
-    padding-right: var(--#{$table}__tree-view-text--PaddingRight);
+    padding-inline-end: var(--#{$table}__tree-view-text--PaddingRight);
   }
 
   thead:where(.#{$table}__thead) th:where(.#{$table}__th) {
@@ -226,11 +228,9 @@ $pf-v5-c-tree-view--MaxDepth: 10;
 
   // Standard td, in standard row (non-expandable)
   td:where(.#{$table}__td)[data-label] {
+    grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
     grid-column: 1;
     grid-column-gap: var(--#{$table}--m-tree-view-grid__tbody--cell--GridColumnGap);
-
-    // use minmax func to contain possible text modifier width
-    grid-template-columns: var(--#{$table}--m-tree-view-grid__td--data-label--GridTemplateColumns);
     align-items: start;
 
     // set contents of td to start at column two of td grid
@@ -239,14 +239,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     }
 
     &::before {
-      font-weight: bold;
-      text-align: left;
+      font-weight: var(--#{$pf-global}--FontWeight--bold);;
+      text-align: start;
       content: attr(data-label);
     }
   }
 
   tr:where(.#{$table}__tr).pf-m-tree-view-details-expanded {
-    padding-bottom: var(--#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
+    padding-block-end: var(--#{$table}--m-tree-view-grid--m-tree-view-details-expanded--PaddingBottom);
 
     td:where(.#{$table}__td)[data-label] {
       display: grid;
@@ -268,24 +268,24 @@ $pf-v5-c-tree-view--MaxDepth: 10;
     --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingTop: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingTop);
     --#{$table}--m-tree-view-grid__td--not--c-table__tree-view-title-cell--PaddingBottom: var(--#{$table}--m-tree-view-grid--c-table__action--PaddingBottom);
 
-    grid-column: 2;
     grid-row: 1;
+    grid-column: 2;
 
     > .#{$dropdown} {
-      margin-top: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginTop);
-      margin-bottom: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginBottom);
+      margin-block-start: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginTop);
+      margin-block-end: var(--#{$table}--m-tree-view-grid--c-dropdown--MarginBottom);
     }
   }
 
   .#{$table}__tree-view-main > .#{$table}__check {
-    margin-right: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
-    margin-left: auto;
     order: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--Order);
+    margin-inline-start: auto;
+    margin-inline-end: var(--#{$table}--m-tree-view-mobile__tree-view-main--c-table__check--MarginRight);
   }
 
   .#{$table}__tree-view-details-toggle {
-    margin-top: var(--#{$table}__tree-view-details-toggle--MarginTop);
-    margin-bottom: var(--#{$table}__tree-view-details-toggle--MarginBottom);
+    margin-block-start: var(--#{$table}__tree-view-details-toggle--MarginTop);
+    margin-block-end: var(--#{$table}__tree-view-details-toggle--MarginBottom);
   }
 
   @for $i from 2 through $pf-v5-c-tree-view--MaxDepth {

package/components/Table/table.css

@@ -289,27 +289,27 @@
   position: relative;
 }
 .pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .pf-v5-c-table.pf-m-sticky-header thead:where(.pf-v5-c-table__thead) tr:where(.pf-v5-c-table__tr) > * {
   z-index: var(--pf-v5-c-table--m-sticky-header--cell--ZIndex);
 }
 .pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > * {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   background: var(--pf-v5-c-table--BackgroundColor);
 }
 .pf-v5-c-table.pf-m-sticky-header > thead:where(.pf-v5-c-table__thead):not(.pf-m-nested-column-header) > tr:where(.pf-v5-c-table__tr) > *::after {
   position: absolute;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
-  border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
+  border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
 }
 .pf-v5-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: var(--pf-v5-global--ZIndex--xs);
   background: var(--pf-v5-c-table--BackgroundColor);
 }
@@ -322,7 +322,7 @@
   --pf-v5-c-table--cell--PaddingBottom: var(--pf-v5-c-table__thead--m-nested-column-header__tr--PaddingBottom);
 }
 .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) th:where(.pf-v5-c-table__th):not([rowspan]),
 .pf-v5-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v5-c-table__tr):not(:last-child) td:where(.pf-v5-c-table__td):not([rowspan]) {
@@ -336,7 +336,7 @@
   background: var(--pf-v5-c-table--m-striped__tr--BackgroundColor);
 }
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
-  border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
+  border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
 }
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row).pf-m-ghost-row {
   background-color: var(--pf-v5-c-table__tr--m-ghost-row--BackgroundColor);
@@ -348,7 +348,10 @@
   width: var(--pf-v5-c-table--cell--Width);
   min-width: var(--pf-v5-c-table--cell--MinWidth);
   max-width: var(--pf-v5-c-table--cell--MaxWidth);
-  padding: var(--pf-v5-c-table--cell--PaddingTop) var(--pf-v5-c-table--cell--PaddingRight) var(--pf-v5-c-table--cell--PaddingBottom) var(--pf-v5-c-table--cell--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
+  padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
   overflow: var(--pf-v5-c-table--cell--Overflow);
   font-size: var(--pf-v5-c-table--cell--FontSize);
   font-weight: var(--pf-v5-c-table--cell--FontWeight);
@@ -382,26 +385,26 @@
 }
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before, .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
 }
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-right::before {
-  border-right: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
+  border-inline-end: var(--pf-v5-c-table--cell--m-border-right--before--BorderRightWidth) solid var(--pf-v5-c-table--cell--m-border-right--before--BorderRightColor);
 }
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr) > *.pf-m-border-left::before {
-  border-left: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
+  border-inline-start: var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth) solid var(--pf-v5-c-table--cell--m-border-left--before--BorderLeftColor);
 }
 .pf-v5-c-table caption:where(.pf-v5-c-table__caption) {
-  padding-top: var(--pf-v5-c-table__caption--PaddingTop);
-  padding-bottom: var(--pf-v5-c-table__caption--PaddingBottom);
-  padding-left: var(--pf-v5-c-table__caption--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-table__caption--PaddingTop);
+  padding-block-end: var(--pf-v5-c-table__caption--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-table__caption--PaddingLeft);
   font-size: var(--pf-v5-c-table__caption--FontSize);
   color: var(--pf-v5-c-table__caption--Color);
-  text-align: left;
+  text-align: start;
   background-color: var(--pf-v5-c-table--BackgroundColor);
 }
 .pf-v5-c-table thead:where(.pf-v5-c-table__thead) {
@@ -439,19 +442,19 @@
 }
 .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
   position: absolute;
-  top: var(--pf-v5-c-table__expandable-row--after--Top);
-  bottom: var(--pf-v5-c-table__expandable-row--after--Bottom);
-  left: 0;
+  inset-block-start: var(--pf-v5-c-table__expandable-row--after--Top);
+  inset-block-end: var(--pf-v5-c-table__expandable-row--after--Bottom);
+  inset-inline-start: 0;
   content: "";
   background-color: transparent;
-  border-left: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
+  border-inline-start: var(--pf-v5-c-table__expandable-row--after--BorderLeftWidth) solid var(--pf-v5-c-table__expandable-row--after--BorderColor);
 }
 .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__check input:where(.pf-v5-c-check__input) {
-  margin-top: var(--pf-v5-c-table__check--input--MarginTop);
+  margin-block-start: var(--pf-v5-c-table__check--input--MarginTop);
   vertical-align: top;
 }
 .pf-v5-c-table tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > :first-child:not(.pf-v5-c-table__control-row) {
-  border-bottom-width: 0;
+  border-block-end-width: 0;
 }
 .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:first-child, .pf-v5-c-table .pf-v5-c-table__compound-expansion-toggle:last-child {
   padding: 0;
@@ -497,19 +500,19 @@
   --pf-v5-c-table--cell--WhiteSpace: normal;
 }
 .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) {
-  border-bottom: 0;
+  border-block-end: 0;
 }
 .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) > tr:where(.pf-v5-c-table__tr) > :first-child::after {
-  border-left: 0;
+  border-inline-start: 0;
 }
 .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody):not(.pf-m-expanded) .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
   display: none;
 }
 .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody).pf-m-expanded > .pf-v5-c-table__control-row {
-  border-bottom: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
+  border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
 }
 .pf-v5-c-table.pf-m-no-border-rows > tbody:where(.pf-v5-c-table__tbody) .pf-v5-c-table__control-row > .pf-v5-c-table__compound-expansion-toggle:first-child > ::before {
-  border-left-width: 0;
+  border-inline-start-width: 0;
 }
 .pf-v5-c-table tr:where(.pf-v5-c-table__tr).pf-m-clickable {
   cursor: pointer;
@@ -620,11 +623,14 @@
 .pf-v5-c-table__button {
   position: static;
   width: 100%;
-  padding: var(--pf-v5-c-table--cell--PaddingTop) var(--pf-v5-c-table--cell--PaddingRight) var(--pf-v5-c-table--cell--PaddingBottom) var(--pf-v5-c-table--cell--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-table--cell--PaddingTop);
+  padding-block-end: var(--pf-v5-c-table--cell--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-table--cell--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-table--cell--PaddingRight);
   font-size: inherit;
   font-weight: inherit;
   color: var(--pf-v5-c-table__button--Color);
-  text-align: left;
+  text-align: start;
   white-space: inherit;
   user-select: text;
   background-color: var(--pf-v5-c-table__button--BackgroundColor);
@@ -632,10 +638,10 @@
 }
 .pf-v5-c-table__button::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   cursor: pointer;
   content: "";
 }
@@ -718,8 +724,8 @@
   vertical-align: top;
 }
 .pf-v5-c-table__toggle .pf-v5-c-button {
-  margin-top: var(--pf-v5-c-table__toggle--c-button--MarginTop);
-  margin-bottom: var(--pf-v5-c-table__toggle--c-button--MarginBottom);
+  margin-block-start: var(--pf-v5-c-table__toggle--c-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-table__toggle--c-button--MarginBottom);
 }
 .pf-v5-c-table__toggle .pf-v5-c-button.pf-m-expanded .pf-v5-c-table__toggle-icon {
   transform: rotate(var(--pf-v5-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
@@ -742,20 +748,29 @@
 .pf-v5-c-table__check label {
   display: block;
   padding: inherit;
-  margin: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1) calc(var(--pf-v5-c-table--cell--PaddingRight) * -1) calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1) calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
+  margin-block-start: calc(var(--pf-v5-c-table--cell--PaddingTop) * -1);
+  margin-block-end: calc(var(--pf-v5-c-table--cell--PaddingBottom) * -1);
+  margin-inline-start: calc(var(--pf-v5-c-table--cell--PaddingLeft) * -1);
+  margin-inline-end: calc(var(--pf-v5-c-table--cell--PaddingRight) * -1);
 }
 
 .pf-v5-c-table__favorite .pf-v5-c-button {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--c-button--Color);
   --pf-v5-c-button--FontSize: var(--pf-v5-c-table__favorite--c-button--FontSize);
-  margin: var(--pf-v5-c-table__favorite--c-button--MarginTop) var(--pf-v5-c-table__favorite--c-button--MarginRight) var(--pf-v5-c-table__favorite--c-button--MarginBottom) var(--pf-v5-c-table__favorite--c-button--MarginLeft);
+  margin-block-start: var(--pf-v5-c-table__favorite--c-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-table__favorite--c-button--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-table__favorite--c-button--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-table__favorite--c-button--MarginRight);
 }
 .pf-m-favorited.pf-v5-c-table__favorite .pf-v5-c-button {
   --pf-v5-c-button--m-plain--Color: var(--pf-v5-c-table__favorite--m-favorited--c-button--Color);
 }
 
 .pf-v5-c-table__draggable .pf-v5-c-button {
-  margin: var(--pf-v5-c-table__draggable--c-button--MarginTop) var(--pf-v5-c-table__draggable--c-button--MarginRight) var(--pf-v5-c-table__draggable--c-button--MarginBottom) var(--pf-v5-c-table__draggable--c-button--MarginLeft);
+  margin-block-start: var(--pf-v5-c-table__draggable--c-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-table__draggable--c-button--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-table__draggable--c-button--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-table__draggable--c-button--MarginRight);
   cursor: grab;
 }
 .pf-v5-c-table__draggable .pf-v5-c-button:active {
@@ -768,19 +783,19 @@
   --pf-v5-c-table--cell--PaddingRight: var(--pf-v5-c-table__action--PaddingRight);
   --pf-v5-c-table--cell--PaddingBottom: 0;
   --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__action--PaddingLeft);
-  padding-top: 0;
-  padding-bottom: 0;
+  padding-block-start: 0;
+  padding-block-end: 0;
   vertical-align: middle;
 }
 
 .pf-v5-c-table__action {
-  text-align: right;
+  text-align: end;
 }
 
 .pf-v5-c-table__inline-edit-action {
   --pf-v5-c-table--cell--PaddingLeft: 0;
   --pf-v5-c-table--cell--PaddingRight: 0;
-  text-align: right;
+  text-align: end;
 }
 
 .pf-v5-c-table__compound-expansion-toggle {
@@ -803,25 +818,25 @@
 .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before,
 .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
   position: absolute;
-  right: 0;
+  inset-inline-end: 0;
   content: "";
   border-style: solid;
   border-width: 0;
 }
 .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::before {
-  top: 0;
-  bottom: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Bottom);
-  left: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Left);
+  inset-block-start: 0;
+  inset-block-end: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Bottom);
+  inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--before--Left);
   border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderColor);
-  border-right-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
-  border-left-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
+  border-inline-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth);
+  border-inline-end-width: var(--pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth);
 }
 .pf-v5-c-table__compound-expansion-toggle .pf-v5-c-table__button::after {
-  top: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Top);
-  left: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Left);
+  inset-block-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Top);
+  inset-inline-start: var(--pf-v5-c-table__compound-expansion-toggle__button--after--Left);
   pointer-events: none;
   border-color: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderColor);
-  border-top-width: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
+  border-block-start-width: var(--pf-v5-c-table__compound-expansion-toggle__button--after--BorderTopWidth);
 }
 .pf-v5-c-table__compound-expansion-toggle:hover, .pf-v5-c-table__compound-expansion-toggle:focus-within, .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded {
   --pf-v5-c-table__compound-expansion-toggle__button--before--BorderRightWidth: var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
@@ -833,7 +848,7 @@
   --pf-v5-c-table__compound-expansion-toggle__button--after--Left: 0;
 }
 .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded .pf-v5-c-table__button::before {
-  border-bottom: var(--pf-v5-c-table--BackgroundColor) solid var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
+  border-block-end: var(--pf-v5-c-table--BackgroundColor) solid var(--pf-v5-c-table__compound-expansion-toggle__button--before--border-width--base);
 }
 .pf-v5-c-table__compound-expansion-toggle.pf-m-expanded:first-child {
   --pf-v5-c-table__compound-expansion-toggle__button--before--BorderLeftWidth: 0;
@@ -849,14 +864,14 @@
 }
 
 .pf-v5-c-table__column-help-action {
-  margin-left: var(--pf-v5-c-table__column-help--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-table__column-help--MarginLeft);
   transform: translateY(var(--pf-v5-c-table__column-help--TranslateY));
 }
 .pf-v5-c-table__column-help-action .pf-v5-c-button {
   --pf-v5-c-button--PaddingRight: var(--pf-v5-c-table__column-help--c-button--PaddingRight);
   --pf-v5-c-button--PaddingLeft: var(--pf-v5-c-table__column-help--c-button--PaddingLeft);
-  margin-top: var(--pf-v5-c-table__column-help--c-button--MarginTop);
-  margin-bottom: var(--pf-v5-c-table__column-help--c-button--MarginBottom);
+  margin-block-start: var(--pf-v5-c-table__column-help--c-button--MarginTop);
+  margin-block-end: var(--pf-v5-c-table__column-help--c-button--MarginBottom);
   font-size: inherit;
   line-height: 1;
 }
@@ -868,9 +883,9 @@
   --pf-v5-c-table--cell--PaddingLeft: var(--pf-v5-c-table__sort__button--PaddingLeft);
   display: flex;
   width: auto;
-  margin-top: var(--pf-v5-c-table__sort__button--MarginTop);
-  margin-bottom: var(--pf-v5-c-table__sort__button--MarginBottom);
-  margin-left: var(--pf-v5-c-table__sort__button--MarginLeft);
+  margin-block-start: var(--pf-v5-c-table__sort__button--MarginTop);
+  margin-block-end: var(--pf-v5-c-table__sort__button--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-table__sort__button--MarginLeft);
 }
 .pf-v5-c-table__sort .pf-v5-c-table__button:hover {
   --pf-v5-c-table__sort-indicator--Color: var(--pf-v5-c-table__sort__button--hover__sort-indicator--Color);
@@ -905,7 +920,7 @@
 
 .pf-v5-c-table__sort-indicator {
   grid-column: 2;
-  margin-left: var(--pf-v5-c-table__sort-indicator--MarginLeft);
+  margin-inline-start: var(--pf-v5-c-table__sort-indicator--MarginLeft);
   color: var(--pf-v5-c-table__sort-indicator--Color);
   pointer-events: none;
 }
@@ -914,7 +929,7 @@
   --pf-v5-c-table--cell--PaddingTop: 0;
   --pf-v5-c-table--cell--PaddingBottom: 0;
   position: relative;
-  border-bottom: 0 solid transparent;
+  border-block-end: 0 solid transparent;
   box-shadow: 0 0 0 0 transparent;
 }
 .pf-v5-c-table__expandable-row,
@@ -923,19 +938,22 @@
 }
 .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding,
 .pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding {
-  padding: 0 0 0 var(--pf-v5-c-table__expandable-row--after--border-width--base);
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-block-end: 0;
+  padding-inline-start: var(--pf-v5-c-table__expandable-row--after--border-width--base);
 }
 .pf-v5-c-table__expandable-row td:where(.pf-v5-c-table__td).pf-m-no-padding .pf-v5-c-table__expandable-row-content,
 .pf-v5-c-table__expandable-row th:where(.pf-v5-c-table__th).pf-m-no-padding .pf-v5-c-table__expandable-row-content {
   padding: 0;
 }
 .pf-v5-c-table__expandable-row .pf-v5-c-table__expandable-row-content {
-  padding-top: var(--pf-v5-c-table__expandable-row-content--PaddingTop);
-  padding-bottom: var(--pf-v5-c-table__expandable-row-content--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-table__expandable-row-content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-table__expandable-row-content--PaddingBottom);
 }
 .pf-v5-c-table__expandable-row.pf-m-expanded {
-  border-bottom-color: var(--pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor);
-  border-bottom-width: var(--pf-v5-c-table--border-width--base);
+  border-block-end-color: var(--pf-v5-c-table__expandable-row--m-expanded--BorderBottomColor);
+  border-block-end-width: var(--pf-v5-c-table--border-width--base);
   box-shadow: var(--pf-v5-c-table__expandable-row--m-expanded--BoxShadow);
 }
 .pf-v5-c-table__expandable-row:not(.pf-m-expanded) {
@@ -1005,7 +1023,7 @@
   align-items: center;
 }
 .pf-v5-c-table__icon-inline > :not(:last-child) {
-  margin-right: var(--pf-v5-c-table__icon-inline--MarginRight);
+  margin-inline-end: var(--pf-v5-c-table__icon-inline--MarginRight);
 }
 
 .pf-v5-c-table .pf-m-width-10 {