@patternfly/patternfly 6.0.0-alpha.3 → 6.0.0-alpha.30

package/components/Toolbar/toolbar.css

@@ -47,9 +47,8 @@
   }
 }
 
-.pf-v5-c-toolbar {
+:root {
   --pf-v5-c-toolbar--AlignItems--base: flex-start;
-  --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-toolbar--RowGap--base: var(--pf-v5-global--spacer--lg);
   --pf-v5-c-toolbar--RowGap: var(--pf-v5-c-toolbar--RowGap--base);
   --pf-v5-c-toolbar--PaddingTop: var(--pf-v5-global--spacer--md);
@@ -115,6 +114,9 @@
   --pf-v5-c-toolbar__item--m-label--spacer: var(--pf-v5-c-toolbar__item--spacer);
   --pf-v5-c-toolbar__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__item--m-label--FontWeight: var(--pf-v5-global--FontWeight--bold);
+  --pf-v5-c-toolbar__item--m-form-element--spacer: var(--pf-v5-c-toolbar__item--spacer);
+  --pf-v5-c-toolbar__item--m-form-element--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --pf-v5-c-toolbar__item--m-form-element--FontWeight: var(--pf-v5-global--FontWeight--bold);
   --pf-v5-c-toolbar__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
   --pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap) + var(--pf-v5-global--spacer--sm));
   --pf-v5-c-toolbar__expandable-content__item--m-label--FontSize: var(--pf-v5-global--FontSize--sm);
@@ -124,11 +126,14 @@
   --pf-v5-c-toolbar--m-full-height--PaddingBottom: 0;
   --pf-v5-c-toolbar--m-full-height__item--Display: flex;
   --pf-v5-c-toolbar--m-full-height__item--AlignItems: center;
+}
+
+.pf-v5-c-toolbar {
   position: relative;
   display: grid;
   row-gap: var(--pf-v5-c-toolbar--RowGap);
-  padding-top: var(--pf-v5-c-toolbar--PaddingTop);
-  padding-bottom: var(--pf-v5-c-toolbar--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-toolbar--PaddingTop);
+  padding-block-end: var(--pf-v5-c-toolbar--PaddingBottom);
   background-color: var(--pf-v5-c-toolbar--BackgroundColor);
 }
 @media screen and (min-width: 992px) {
@@ -149,7 +154,7 @@
 }
 .pf-v5-c-toolbar.pf-m-sticky {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: var(--pf-v5-c-toolbar--m-sticky--ZIndex);
   box-shadow: var(--pf-v5-c-toolbar--m-sticky--BoxShadow);
 }
@@ -190,7 +195,7 @@
 }
 .pf-v5-c-toolbar__content-section > .pf-v5-c-divider.pf-m-vertical,
 .pf-v5-c-toolbar__group > .pf-v5-c-divider.pf-m-vertical {
-  margin-right: var(--pf-v5-c-toolbar--spacer);
+  margin-inline-end: var(--pf-v5-c-toolbar--spacer);
 }
 .pf-v5-c-toolbar__content-section > .pf-v5-c-divider.pf-m-vertical:last-child,
 .pf-v5-c-toolbar__group > .pf-v5-c-divider.pf-m-vertical:last-child {
@@ -227,7 +232,7 @@
   row-gap: var(--pf-v5-c-toolbar__group--RowGap);
   align-items: var(--pf-v5-c-toolbar__group--AlignItems);
   align-self: var(--pf-v5-c-toolbar__group--AlignSelf);
-  margin-right: var(--pf-v5-c-toolbar--spacer);
+  margin-inline-end: var(--pf-v5-c-toolbar--spacer);
 }
 .pf-v5-c-toolbar__group.pf-m-button-group {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-button-group--spacer);
@@ -248,7 +253,7 @@
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-filter-group--space-items);
 }
 .pf-v5-c-toolbar__group.pf-m-filter-group > * + * {
-  margin-left: -1px;
+  margin-inline-start: -1px;
 }
 .pf-v5-c-toolbar__group.pf-m-toggle-group {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__group--m-toggle-group--spacer);
@@ -273,7 +278,7 @@
   align-self: var(--pf-v5-c-toolbar__item--AlignSelf);
   width: var(--pf-v5-c-toolbar__item--Width--base);
   min-width: var(--pf-v5-c-toolbar__item--MinWidth--base);
-  margin-right: var(--pf-v5-c-toolbar--spacer);
+  margin-inline-end: var(--pf-v5-c-toolbar--spacer);
 }
 @media (min-width: 576px) {
   .pf-v5-c-toolbar__item {
@@ -361,10 +366,15 @@
 .pf-v5-c-toolbar__item.pf-m-label {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-label--spacer);
   font-weight: var(--pf-v5-c-toolbar__item--m-label--FontWeight);
-  transform: translateY(var(--pf-v5-global--spacer--form-element));
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-label--TranslateY));
+}
+.pf-v5-c-toolbar__item.pf-m-form-element {
+  --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--m-form-element--spacer);
+  font-weight: var(--pf-v5-c-toolbar__item--m-form-element--FontWeight);
+  transform: translateY(var(--pf-v5-c-toolbar__item--m-form-element--TranslateY));
 }
 .pf-v5-c-toolbar__item.pf-m-pagination {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .pf-v5-c-toolbar__item.pf-m-pagination .pf-v5-c-pagination {
   flex-wrap: nowrap;
@@ -395,8 +405,8 @@
   position: relative;
   row-gap: var(--pf-v5-c-toolbar__content--RowGap);
   align-items: var(--pf-v5-c-toolbar__content--AlignItems);
-  padding-right: var(--pf-v5-c-toolbar__content--PaddingRight);
-  padding-left: var(--pf-v5-c-toolbar__content--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-toolbar__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-toolbar__content--PaddingRight);
 }
 
 .pf-v5-c-toolbar__content-section {
@@ -417,13 +427,16 @@
 
 .pf-v5-c-toolbar__expandable-content {
   position: absolute;
-  top: calc(100% + var(--pf-v5-c-toolbar__content--RowGap));
-  right: 0;
-  left: 0;
+  inset-block-start: calc(100% + var(--pf-v5-c-toolbar__content--RowGap));
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--pf-v5-c-toolbar__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--pf-v5-c-toolbar__expandable-content--PaddingTop) var(--pf-v5-c-toolbar__expandable-content--PaddingRight) var(--pf-v5-c-toolbar__expandable-content--PaddingBottom) var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-toolbar__expandable-content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-toolbar__expandable-content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-toolbar__expandable-content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-toolbar__expandable-content--PaddingRight);
   background-color: var(--pf-v5-c-toolbar__expandable-content--BackgroundColor);
   box-shadow: var(--pf-v5-c-toolbar__expandable-content--BoxShadow);
 }
@@ -446,7 +459,7 @@
   grid-row-gap: var(--pf-v5-c-toolbar__expandable-content--m-expanded--GridRowGap);
 }
 .pf-v5-c-toolbar__expandable-content .pf-v5-c-toolbar__item.pf-m-label {
-  margin-bottom: var(--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom);
+  margin-block-end: var(--pf-v5-c-toolbar__expandable-content__item--m-label--MarginBottom);
   font-size: var(--pf-v5-c-toolbar__expandable-content__item--m-label--FontSize);
 }
 
@@ -456,13 +469,13 @@
   flex-wrap: wrap;
   grid-row-gap: 0;
   align-items: baseline;
-  margin-top: var(--pf-v5-c-toolbar__group--m-chip-container--MarginTop);
+  margin-block-start: var(--pf-v5-c-toolbar__group--m-chip-container--MarginTop);
 }
 .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__item,
 .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__item {
   --pf-v5-c-toolbar--spacer: var(--pf-v5-c-toolbar__item--spacer);
   --pf-v5-c-toolbar__item--AlignSelf: auto;
-  margin-top: var(--pf-v5-c-toolbar__group--m-chip-container__item--MarginTop);
+  margin-block-start: var(--pf-v5-c-toolbar__group--m-chip-container__item--MarginTop);
 }
 .pf-v5-c-toolbar__content.pf-m-chip-container .pf-v5-c-toolbar__group,
 .pf-v5-c-toolbar__group.pf-m-chip-container .pf-v5-c-toolbar__group {
@@ -570,19 +583,19 @@
 }
 .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right,
 .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right ~ .pf-m-pagination,
 .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right ~ .pf-m-pagination {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left,
 .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left ~ .pf-m-pagination,
 .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left ~ .pf-m-pagination {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section.pf-m-nowrap,
 .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-nowrap {
@@ -595,19 +608,19 @@
 @media (min-width: 576px) {
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-sm,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-sm {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-sm ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-sm ~ .pf-m-pagination {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-sm,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-sm {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-sm ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-sm ~ .pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section.pf-m-nowrap-on-sm,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-nowrap-on-sm {
@@ -621,19 +634,19 @@
 @media (min-width: 768px) {
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-md,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-md {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-md ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-md ~ .pf-m-pagination {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-md,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-md {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-md ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-md ~ .pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section.pf-m-nowrap-on-md,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-nowrap-on-md {
@@ -647,19 +660,19 @@
 @media (min-width: 992px) {
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-lg,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-lg {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-lg ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-lg ~ .pf-m-pagination {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-lg,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-lg {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-lg ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-lg ~ .pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section.pf-m-nowrap-on-lg,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-nowrap-on-lg {
@@ -673,19 +686,19 @@
 @media (min-width: 1200px) {
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-xl,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-xl ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-xl ~ .pf-m-pagination {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-xl,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-xl ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-xl ~ .pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section.pf-m-nowrap-on-xl,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-nowrap-on-xl {
@@ -699,19 +712,19 @@
 @media (min-width: 1450px) {
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-2xl,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-2xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-right-on-2xl ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-right-on-2xl ~ .pf-m-pagination {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-2xl,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-2xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__item.pf-m-align-left-on-2xl ~ .pf-m-pagination,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-align-left-on-2xl ~ .pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-c-toolbar .pf-v5-c-toolbar__content-section.pf-m-nowrap-on-2xl,
   .pf-v5-c-toolbar .pf-v5-c-toolbar__group.pf-m-nowrap-on-2xl {

package/components/Toolbar/toolbar.scss

@@ -5,9 +5,8 @@ $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg",
 $pf-v5-c-toolbar--spacer-map: build-spacer-map("none", "sm", "md", "lg");
 $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
 
-.#{$toolbar} {
+:root {
   --#{$toolbar}--AlignItems--base: flex-start;
-  --#{$toolbar}--BackgroundColor: var(--#{$pf-global}--BackgroundColor--100);
   --#{$toolbar}--RowGap--base: var(--#{$pf-global}--spacer--lg); // row-gap between toolbar content elements
   --#{$toolbar}--RowGap: var(--#{$toolbar}--RowGap--base);
   --#{$toolbar}--PaddingTop: var(--#{$pf-global}--spacer--md);
@@ -117,11 +116,16 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   // Label
   --#{$toolbar}__item--m-label--spacer: var(--#{$toolbar}__item--spacer);
-  --#{$toolbar}__item--m-label--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --#{$toolbar}__item--m-label--TranslateY: var(--#{$pf-global}--spacer--form-element);
   --#{$toolbar}__item--m-label--FontWeight: var(--#{$pf-global}--FontWeight--bold);
 
+  // Form control inline
+  --#{$toolbar}__item--m-form-element--spacer: var(--#{$toolbar}__item--spacer);
+  --#{$toolbar}__item--m-form-element--TranslateY: var(--#{$pf-global}--spacer--form-element);
+  --#{$toolbar}__item--m-form-element--FontWeight: var(--#{$pf-global}--FontWeight--bold);
+
   // Input
-  --#{$toolbar}__item--m-form-control--TranslateY: var(--pf-v5-global--spacer--form-element);
+  --#{$toolbar}__item--m-form-control--TranslateY: var(--#{$pf-global}--spacer--form-element);
 
   // Label in expanded content
   --#{$toolbar}__expandable-content__item--m-label--MarginBottom: calc(-1 * var(--#{$toolbar}__expandable-content--m-expanded--GridRowGap) + var(--#{$pf-global}--spacer--sm));
@@ -138,7 +142,9 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   --#{$toolbar}--m-full-height--PaddingBottom: 0;
   --#{$toolbar}--m-full-height__item--Display: flex;
   --#{$toolbar}--m-full-height__item--AlignItems: center;
+}
 
+.#{$toolbar} {
   @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
     --#{$toolbar}__expandable-content--PaddingRight: var(--#{$toolbar}__expandable-content--lg--PaddingRight);
     --#{$toolbar}__expandable-content--PaddingBottom: var(--#{$toolbar}__expandable-content--lg--PaddingBottom);
@@ -152,8 +158,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   position: relative;
   display: grid;
   row-gap: var(--#{$toolbar}--RowGap);
-  padding-top: var(--#{$toolbar}--PaddingTop);
-  padding-bottom: var(--#{$toolbar}--PaddingBottom);
+  padding-block-start: var(--#{$toolbar}--PaddingTop);
+  padding-block-end: var(--#{$toolbar}--PaddingBottom);
   background-color: var(--#{$toolbar}--BackgroundColor);
 
   &.pf-m-page-insets {
@@ -163,7 +169,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 
   &.pf-m-sticky {
     position: sticky;
-    top: 0;
+    inset-block-start: 0;
     z-index: var(--#{$toolbar}--m-sticky--ZIndex);
     box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
   }
@@ -217,7 +223,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   > .#{$divider}.pf-m-vertical {
-    margin-right: var(--#{$toolbar}--spacer);
+    margin-inline-end: var(--#{$toolbar}--spacer);
 
     &:last-child {
       --#{$toolbar}--spacer: 0;
@@ -258,7 +264,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   row-gap: var(--#{$toolbar}__group--RowGap);
   align-items: var(--#{$toolbar}__group--AlignItems);
   align-self: var(--#{$toolbar}__group--AlignSelf);
-  margin-right: var(--#{$toolbar}--spacer);
+  margin-inline-end: var(--#{$toolbar}--spacer);
 
   // Button group
   &.pf-m-button-group {
@@ -287,7 +293,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     }
 
     > * + * {
-      margin-left: -1px;
+      margin-inline-start: -1px;
     }
   }
 
@@ -323,7 +329,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   align-self: var(--#{$toolbar}__item--AlignSelf);
   width: var(--#{$toolbar}__item--Width--base);
   min-width: var(--#{$toolbar}__item--MinWidth--base);
-  margin-right: var(--#{$toolbar}--spacer);
+  margin-inline-end: var(--#{$toolbar}--spacer);
 
   &.pf-m-align-items-start {
     align-items: flex-start;
@@ -379,12 +385,20 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-label--spacer);
 
     font-weight: var(--#{$toolbar}__item--m-label--FontWeight);
-    transform: translateY(var(--#{$pf-global}--spacer--form-element));
+    transform: translateY(var(--#{$toolbar}__item--m-label--TranslateY));
+  }
+
+  // Form element
+  &.pf-m-form-element {
+    --#{$toolbar}--spacer: var(--#{$toolbar}__item--m-form-element--spacer);
+
+    font-weight: var(--#{$toolbar}__item--m-form-element--FontWeight);
+    transform: translateY(var(--#{$toolbar}__item--m-form-element--TranslateY));
   }
 
   // Total items
   &.pf-m-pagination {
-    margin-left: auto;
+    margin-inline-start: auto;
 
     .#{$pagination} {
       flex-wrap: nowrap;
@@ -409,6 +423,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   display: inline-block;
   transition: var(--#{$toolbar}__expand-all-icon--Transition);
   transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
+
+  // @include pf-v5-mirror-inline-on-rtl; - TODO: mirror this icon in breaking change
 }
 
 .#{$toolbar}__content,
@@ -423,8 +439,8 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   position: relative;
   row-gap: var(--#{$toolbar}__content--RowGap);
   align-items: var(--#{$toolbar}__content--AlignItems);
-  padding-right: var(--#{$toolbar}__content--PaddingRight);
-  padding-left: var(--#{$toolbar}__content--PaddingLeft);
+  padding-inline-start: var(--#{$toolbar}__content--PaddingLeft);
+  padding-inline-end: var(--#{$toolbar}__content--PaddingRight);
 }
 
 // Content section
@@ -451,13 +467,16 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
 // Expandable content
 .#{$toolbar}__expandable-content {
   position: absolute;
-  top: calc(100% + var(--#{$toolbar}__content--RowGap));
-  right: 0;
-  left: 0;
+  inset-block-start: calc(100% + var(--#{$toolbar}__content--RowGap));
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   z-index: var(--#{$toolbar}__expandable-content--ZIndex);
   display: none;
   width: 100%;
-  padding: var(--#{$toolbar}__expandable-content--PaddingTop) var(--#{$toolbar}__expandable-content--PaddingRight) var(--#{$toolbar}__expandable-content--PaddingBottom) var(--#{$toolbar}__expandable-content--PaddingLeft);
+  padding-block-start: var(--#{$toolbar}__expandable-content--PaddingTop);
+  padding-block-end: var(--#{$toolbar}__expandable-content--PaddingBottom);
+  padding-inline-start: var(--#{$toolbar}__expandable-content--PaddingLeft);
+  padding-inline-end: var(--#{$toolbar}__expandable-content--PaddingRight);
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 
@@ -482,7 +501,7 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   }
 
   .#{$toolbar}__item.pf-m-label {
-    margin-bottom: var(--#{$toolbar}__expandable-content__item--m-label--MarginBottom);
+    margin-block-end: var(--#{$toolbar}__expandable-content__item--m-label--MarginBottom);
     font-size: var(--#{$toolbar}__expandable-content__item--m-label--FontSize);
   }
 }
@@ -495,13 +514,13 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
   flex-wrap: wrap;
   grid-row-gap: 0;
   align-items: baseline;
-  margin-top: var(--#{$toolbar}__group--m-chip-container--MarginTop);
+  margin-block-start: var(--#{$toolbar}__group--m-chip-container--MarginTop);
 
   .#{$toolbar}__item {
     --#{$toolbar}--spacer: var(--#{$toolbar}__item--spacer);
     --#{$toolbar}__item--AlignSelf: auto;
 
-    margin-top: var(--#{$toolbar}__group--m-chip-container__item--MarginTop);
+    margin-block-start: var(--#{$toolbar}__group--m-chip-container__item--MarginTop);
   }
 
   .#{$toolbar}__group {
@@ -562,20 +581,20 @@ $pf-v5-c-toolbar--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2
       // Align right
       .#{$toolbar}__item.pf-m-align-right#{$breakpoint-name},
       .#{$toolbar}__group.pf-m-align-right#{$breakpoint-name} {
-        margin-left: auto;
+        margin-inline-start: auto;
 
         & ~ .pf-m-pagination {
-          margin-left: 0;
+          margin-inline-start: 0;
         }
       }
 
       // Align left
       .#{$toolbar}__item.pf-m-align-left#{$breakpoint-name},
       .#{$toolbar}__group.pf-m-align-left#{$breakpoint-name} {
-        margin-left: 0;
+        margin-inline-start: 0;
 
         & ~ .pf-m-pagination {
-          margin-left: auto;
+          margin-inline-start: auto;
         }
       }
 

package/components/Tooltip/tooltip.css

@@ -1,17 +1,18 @@
-.pf-v5-c-tooltip {
+:root {
   --pf-v5-c-tooltip--MaxWidth: 18.75rem;
-  --pf-v5-c-tooltip--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-tooltip__content--Color: var(--pf-v5-global--Color--light-100);
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__content--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
+  --pf-v5-c-tooltip__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-tooltip__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-tooltip__content--Color: var(--pf-t--global--text--color--inverse);
+  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__content--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v5-c-tooltip__content--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v5-c-tooltip__arrow--Width: 0.9375rem;
   --pf-v5-c-tooltip__arrow--Height: 0.9375rem;
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-100);
-  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-t--global--background--color--inverse--default);
+  --pf-v5-c-tooltip__arrow--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v5-c-tooltip__arrow--m-top--TranslateX: -50%;
   --pf-v5-c-tooltip__arrow--m-top--TranslateY: 50%;
   --pf-v5-c-tooltip__arrow--m-top--Rotate: 45deg;
@@ -24,68 +25,99 @@
   --pf-v5-c-tooltip__arrow--m-left--TranslateX: 50%;
   --pf-v5-c-tooltip__arrow--m-left--TranslateY: -50%;
   --pf-v5-c-tooltip__arrow--m-left--Rotate: 45deg;
+}
+
+.pf-v5-c-tooltip {
   position: relative;
   max-width: var(--pf-v5-c-tooltip--MaxWidth);
   box-shadow: var(--pf-v5-c-tooltip--BoxShadow);
 }
-.pf-v5-c-tooltip.pf-m-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow {
-  bottom: 0;
-  left: 50%;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-top--Rotate));
+.pf-v5-c-tooltip:is(.pf-m-top,
+.pf-m-top-left,
+.pf-m-top-right) {
+  --pf-v5-c-tooltip__arrow--Bottom: var(--pf-v5-c-tooltip--m-top--Bottom, 0);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-top--Left, 50%);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-top--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-top--Rotate);
 }
-.pf-v5-c-tooltip.pf-m-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
-  top: 0;
-  left: 50%;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate));
+.pf-v5-c-tooltip:is(.pf-m-bottom,
+.pf-m-bottom-left,
+.pf-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-bottom--Top, 0);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-bottom--Left, 50%);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-bottom--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-bottom--Rotate);
 }
-.pf-v5-c-tooltip.pf-m-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow {
-  top: 50%;
-  right: 0;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-left--Rotate));
+.pf-v5-c-tooltip:is(.pf-m-left,
+.pf-m-left-top,
+.pf-m-left-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-left--Top, 50%);
+  --pf-v5-c-tooltip__arrow--Right: var(--pf-v5-c-tooltip--m-left--Right, 0);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-left--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-left--Rotate);
 }
-.pf-v5-c-tooltip.pf-m-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
-  top: 50%;
-  left: 0;
-  transform: translateX(var(--pf-v5-c-tooltip__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-tooltip__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-tooltip__arrow--m-right--Rotate));
+.pf-v5-c-tooltip:is(.pf-m-right,
+.pf-m-right-top,
+.pf-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: var(--pf-v5-c-tooltip--m-right--Top, 50%);
+  --pf-v5-c-tooltip__arrow--Left: var(--pf-v5-c-tooltip--m-right--Left, 0);
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-right--TranslateX);
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-right--TranslateY);
+  --pf-v5-c-tooltip__arrow--Rotate: var(--pf-v5-c-tooltip__arrow--m-right--Rotate);
 }
-.pf-v5-c-tooltip.pf-m-left-top .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-top .pf-v5-c-tooltip__arrow {
-  top: var(--pf-v5-c-tooltip__arrow--Height);
+.pf-v5-c-tooltip:is(.pf-m-left-top,
+.pf-m-right-top) {
+  --pf-v5-c-tooltip__arrow--Top: 0;
+  --pf-v5-c-tooltip__arrow--TranslateY: var(--pf-v5-c-tooltip__arrow--m-top--TranslateY);
 }
-.pf-v5-c-tooltip.pf-m-left-bottom .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-right-bottom .pf-v5-c-tooltip__arrow {
-  top: auto;
-  bottom: 0;
+.pf-v5-c-tooltip:is(.pf-m-left-bottom,
+.pf-m-right-bottom) {
+  --pf-v5-c-tooltip__arrow--Top: auto;
+  --pf-v5-c-tooltip__arrow--Bottom: 0;
 }
-.pf-v5-c-tooltip.pf-m-top-left .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-left .pf-v5-c-tooltip__arrow {
-  left: var(--pf-v5-c-tooltip__arrow--Width);
+.pf-v5-c-tooltip:is(.pf-m-top-left,
+.pf-m-bottom-left) {
+  --pf-v5-c-tooltip__arrow--Left: 0;
+  --pf-v5-c-tooltip__arrow--TranslateX: var(--pf-v5-c-tooltip__arrow--m-left--TranslateX);
 }
-.pf-v5-c-tooltip.pf-m-top-right .pf-v5-c-tooltip__arrow, .pf-v5-c-tooltip.pf-m-bottom-right .pf-v5-c-tooltip__arrow {
-  right: 0;
-  left: auto;
+.pf-v5-c-tooltip:is(.pf-m-top-right,
+.pf-m-bottom-right) {
+  --pf-v5-c-tooltip__arrow--Right: 0;
+  --pf-v5-c-tooltip__arrow--Left: auto;
 }
 
 .pf-v5-c-tooltip__content {
   position: relative;
-  padding: var(--pf-v5-c-tooltip__content--PaddingTop) var(--pf-v5-c-tooltip__content--PaddingRight) var(--pf-v5-c-tooltip__content--PaddingBottom) var(--pf-v5-c-tooltip__content--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-tooltip__content--PaddingTop);
+  padding-block-end: var(--pf-v5-c-tooltip__content--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-tooltip__content--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-tooltip__content--PaddingRight);
   font-size: var(--pf-v5-c-tooltip__content--FontSize);
   color: var(--pf-v5-c-tooltip__content--Color);
   text-align: center;
   word-break: break-word;
   background-color: var(--pf-v5-c-tooltip__content--BackgroundColor);
+  border-radius: var(--pf-v5-c-tooltip__content--BorderRadius);
 }
 .pf-v5-c-tooltip__content.pf-m-text-align-left {
-  text-align: left;
+  text-align: start;
 }
 
 .pf-v5-c-tooltip__arrow {
   position: absolute;
+  /* stylelint-disable liberty/use-logical-spec */
+  top: var(--pf-v5-c-tooltip__arrow--Top, auto);
+  right: var(--pf-v5-c-tooltip__arrow--Right, auto);
+  bottom: var(--pf-v5-c-tooltip__arrow--Bottom, auto);
+  left: var(--pf-v5-c-tooltip__arrow--Left, auto);
+  /* stylelint-enable */
   width: var(--pf-v5-c-tooltip__arrow--Width);
   height: var(--pf-v5-c-tooltip__arrow--Height);
   pointer-events: none;
   background-color: var(--pf-v5-c-tooltip__arrow--BackgroundColor);
   box-shadow: var(--pf-v5-c-tooltip__arrow--BoxShadow);
-}
-
-:where(.pf-v5-theme-dark) .pf-v5-c-tooltip {
-  --pf-v5-c-tooltip__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
-  --pf-v5-c-tooltip__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  transform: translateX(var(--pf-v5-c-tooltip__arrow--TranslateX, 0)) translateY(var(--pf-v5-c-tooltip__arrow--TranslateY, 0)) rotate(var(--pf-v5-c-tooltip__arrow--Rotate, 0));
 }