@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/Toolbar/toolbar.scss

@@ -1,95 +1,153 @@
-$pf-v5-c-toolbar--spacer-map: build-spacer-map();
-$pf-v5-c-toolbar--inset-map: build-spacer-map();
-$pf-v5-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
-$pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base');
-$pf-v5--include-toolbar-breakpoints: true !default;
-
-@if $pf-v5--include-toolbar-breakpoints {
-  $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
+@use '../../sass-utilities' as *;
+
+$pf-v6-c-toolbar--spacer-map: build-spacer-map();
+$pf-v6-c-toolbar--inset-map: build-spacer-map();
+$pf-v6-c-toolbar--align-items--alignments: ('stretch', 'baseline', 'start', 'center', 'end');
+$pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map('base');
+$pf-v6--include-toolbar-breakpoints: true !default;
+
+@if $pf-v6--include-toolbar-breakpoints {
+  $pf-v6-c-toolbar--breakpoint-map: build-breakpoint-map();
 }
 
-:where(:root),
-:where(.#{$toolbar}) {
-  --#{$toolbar}--RowGap: var(--pf-t--global--spacer--sm);
-  --#{$toolbar}--ColumnGap: var(--pf-t--global--spacer--md);
-  --#{$toolbar}--PaddingBlock: var(--pf-t--global--spacer--md);
-  --#{$toolbar}--PaddingInline: var(--pf-t--global--spacer--md);
+@include pf-root($toolbar) {
+  --#{$toolbar}--RowGap: var(--pf-t--global--spacer--md);
+  --#{$toolbar}--PaddingBlockStart: 0;
+  --#{$toolbar}--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$toolbar}--PaddingInlineStart: 0;
+  --#{$toolbar}--PaddingInlineEnd: 0;
   --#{$toolbar}--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$toolbar}--FontSize: var(--pf-t--global--font--size--body--default);
+  --#{$toolbar}--BackgroundColor: transparent;
+
+  // * Toolbar background modifiers
+  --#{$toolbar}--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$toolbar}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$toolbar}--m-no-background--BackgroundColor: transparent;
 
   // * Toolbar item
   --#{$toolbar}__item--Width: auto;
   --#{$toolbar}__item--MinWidth: auto;
-  --#{$toolbar}__item--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$toolbar}__item--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$toolbar}__item--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
   --#{$toolbar}__item--m-overflow-container--MinWidth: 0;
 
   // * Toolbar group
+  --#{$toolbar}__group--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$toolbar}__group--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
+
+  // * Toolbar group overflow container
   --#{$toolbar}__group--m-overflow-container--MinWidth: 0;
 
-  // * Toolbar content * Toolbar expandable content
-  --#{$toolbar}__content--RowGap: var(--pf-t--global--spacer--sm);
-  --#{$toolbar}__content--PaddingBlock: var(--pf-t--global--spacer--md);
-  --#{$toolbar}__content--PaddingInline: var(--#{$toolbar}--PaddingInline);
+  // * Toolbar content
+  --#{$toolbar}__content--RowGap: var(--pf-t--global--spacer--md);
+  --#{$toolbar}__content--PaddingInlineStart: 0;
+  --#{$toolbar}__content--PaddingInlineEnd: 0;
+
+  // * Toolbar content section
+  --#{$toolbar}__content-section--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$toolbar}__content-section--ColumnGap: var(--pf-t--global--spacer--gap--group--horizontal);
 
   // * Toolbar expandable content
-  --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toolbar}__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
+  --#{$toolbar}__expandable-content--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --#{$toolbar}__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$toolbar}__expandable-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$toolbar}__expandable-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$toolbar}__expandable-content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$toolbar}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$toolbar}__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
-  // * Toolbar chip group
   // * Toolbar sticky
-  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$toolbar}--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
+  --#{$toolbar}--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$toolbar}--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$toolbar}--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
-
-  // * Toolbar insets
-  --#{$toolbar}--m-page-insets--inset: var(--#{$page}--inset);
+  --#{$toolbar}--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 
   // * Toolbar expand all
   --#{$toolbar}__expand-all-icon--Rotate: 0;
-  --#{$toolbar}__expand-all-icon--Transition: var(--#{$pf-global}--Transition); // TODO: update when transition is tokenized
+  --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$toolbar}__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
 
   // * Toolbar filter group
-  --#{$toolbar}__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$toolbar}__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
 
   // * Toolbar label
   --#{$toolbar}__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
+
+  // * Toolbar group label group
+  --#{$toolbar}__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
+
+  // * Toolbar group action group
+  --#{$toolbar}__group--m-action-group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+
+  // * Toolbar group action group plain
+  --#{$toolbar}__group--m-action-group-plain--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+
+  // * Toolbar group action group inline
+  --#{$toolbar}__group--m-action-group-inline--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
 }
 
-// - Toolbar content - Toolbar group - Toolbar item - Toolbar group chip container - Toolbar group chip group
+// - Toolbar content section - Toolbar group - Toolbar item
 .#{$toolbar}__content-section,
 .#{$toolbar}__group,
-.#{$toolbar}__item,
-.#{$toolbar}__group.pf-m-chip-group-container,
-.#{$toolbar}__group.pf-m-chip-group {
-  @include pf-v5-hidden-visible(flex);
-
-  flex-wrap: wrap;
+.#{$toolbar}__item {
+  @include pf-v6-hidden-visible(flex);
 }
 
 // - Toolbar - Toolbar content
 .#{$toolbar},
 .#{$toolbar}__content {
   position: relative;
-  display: grid;
+}
+
+// - Toolbar content - Toolbar content section - Toolbar expandable content
+.#{$toolbar}__content {
+  @include pf-v6-hidden-visible(grid);
+
+  row-gap: var(--#{$toolbar}__content--RowGap);
+  padding-inline-start: var(--#{$toolbar}__content--PaddingInlineStart);
+  padding-inline-end: var(--#{$toolbar}__content--PaddingInlineEnd);
+}
+
+// Toolbar content section
+.#{$toolbar}__content-section {
+  flex-wrap: wrap;
+  row-gap: var(--#{$toolbar}__content-section--RowGap);
+  column-gap: var(--#{$toolbar}__content-section--ColumnGap);
+  align-items: start;
 }
 
 // - Toolbar
 .#{$toolbar} {
+  display: grid;
+  row-gap: var(--#{$toolbar}--RowGap);
   width: var(--#{$toolbar}--Width, auto);
+  padding-block-start: var(--#{$toolbar}--PaddingBlockStart);
+  padding-block-end: var(--#{$toolbar}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$toolbar}--PaddingInlineStart);
+  padding-inline-end: var(--#{$toolbar}--PaddingInlineEnd);
   font-size: var(--#{$toolbar}--FontSize);
   line-height: var(--#{$toolbar}--LineHeight);
+  background-color: var(--#{$toolbar}--BackgroundColor);
 
   // - Toolbar sticky
   &.pf-m-sticky {
+    --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-sticky--BackgroundColor);
+
     position: sticky;
     inset-block-start: 0;
     z-index: var(--#{$toolbar}--m-sticky--ZIndex);
+    padding-block-start: var(--#{$toolbar}--m-sticky--PaddingBlockStart);
+    padding-block-end: var(--#{$toolbar}--m-sticky--PaddingBlockEnd);
     box-shadow: var(--#{$toolbar}--m-sticky--BoxShadow);
   }
 
   //  - Toolbar static
   &.pf-m-static {
+    &,
     .#{$toolbar}__content {
       position: static;
     }
@@ -111,10 +169,17 @@ $pf-v5--include-toolbar-breakpoints: true !default;
     }
   }
 
-  // - Toolbar page insets
-  &.pf-m-page-insets {
-    --#{$toolbar}--PaddingInlineStart: var(--#{$toolbar}--m-page-insets--inset);
-    --#{$toolbar}--PaddingInlineEnd: var(--#{$toolbar}--m-page-insets--inset);
+  // - Toolbar background modifiers
+  &.pf-m-primary {
+    --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-primary--BackgroundColor);
+  }
+
+  &.pf-m-secondary {
+    --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-secondary--BackgroundColor);
+  }
+
+  &.pf-m-no-background {
+    --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-no-background--BackgroundColor);
   }
 
   // @include resize-observer-placeholder('md') {
@@ -122,48 +187,12 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   // }
 }
 
-// - Toolbar content - Toolbar content section - Toolbar expandable content
-.#{$toolbar}__content,
-.#{$toolbar}__content-section,
-.#{$toolbar}__expandable-content {
-  row-gap: var(--#{$toolbar}__content--RowGap);
-  column-gap: var(--#{$toolbar}--ColumnGap);
-}
-
-// - Toolbar content expandable content
-.#{$toolbar}__content,
-.#{$toolbar}__expandable-content {
-  padding-block-start: var(--#{$toolbar}__content--PaddingBlockStart, var(--#{$toolbar}__content--PaddingBlock));
-  padding-block-end: var(--#{$toolbar}__content--PaddingBlockEnd, var(--#{$toolbar}__content--PaddingBlock));
-  padding-inline-start: var(--#{$toolbar}__content--PaddingInlineStart, var(--#{$toolbar}__content--PaddingInline));
-  padding-inline-end: var(--#{$toolbar}__content--PaddingInlineEnd, var(--#{$toolbar}__content--PaddingInline));
-}
-
-// - Toolbar content section
-.#{$toolbar}__content-section {
-  align-items: start;
-
-  // push pagination to inline-end when flex items are not wrapped
-  &:has(.#{$toolbar}__item.pf-m-pagination:not(:only-child):last-child) {
-    .#{$toolbar}__item.pf-m-pagination {
-      margin-inline-start: revert;
-    }
-
-    > .#{$toolbar}__group,
-    > .#{$toolbar}__item {
-      &:nth-last-child(2) {
-        flex: 1;
-      }
-    }
-  }
-}
-
 // - Toolbar item
 .#{$toolbar}__item {
-  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v5-c-toolbar--breakpoint-map);
-  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v5-c-toolbar--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v6-c-toolbar--breakpoint-map);
+  @include pf-v6-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v6-c-toolbar--breakpoint-map);
 
-  row-gap: var(--#{$toolbar}__item--RowGap, var(--#{$toolbar}--RowGap));
+  row-gap: var(--#{$toolbar}__item--RowGap);
   column-gap: var(--#{$toolbar}__item--ColumnGap);
   width: var(--#{$toolbar}__item--Width--base);
   min-width: var(--#{$toolbar}__item--MinWidth--base);
@@ -194,30 +223,38 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 
 // - Toolbar group
 .#{$toolbar}__group {
-  row-gap: var(--#{$toolbar}__group--RowGap, var(--#{$toolbar}--RowGap));
-  column-gap: var(--#{$toolbar}__group--ColumnGap, var(--#{$toolbar}--ColumnGap));
-  align-items: baseline;
-
-  // - Toolbar icon button group - Toolbar filter group
-  &.pf-m-icon-button-group {
-    column-gap: var(--#{$toolbar}__group--m-icon-button-group--ColumnGap, 0);
-  }
+  row-gap: var(--#{$toolbar}__group--RowGap);
+  column-gap: var(--#{$toolbar}__group--ColumnGap);
 
+  // - Toolbar filter group
   &.pf-m-filter-group {
     column-gap: var(--#{$toolbar}__group--m-filter-group--ColumnGap);
   }
 
-  // - Toolbar filter group - Toolbar chip container
-  &.pf-m-filter-group,
-  &.pf-m-chip-group-container {
-    flex-wrap: nowrap;
+  // - Toolbar label group
+  &.pf-m-label-group {
+    flex: 1;
+    flex-wrap: wrap;
+    column-gap: var(--#{$toolbar}__group--m-label-group--ColumnGap);
   }
 
-  // - Toolbar chip group
-  &.pf-m-chip-group {
-    flex: 1;
+  // - Toolbar action group
+  &.pf-m-action-group {
+    column-gap: var(--#{$toolbar}__group--m-action-group--ColumnGap);
   }
 
+  // - Toolbar action group plain
+  &.pf-m-action-group-plain {
+    column-gap: var(--#{$toolbar}__group--m-action-group-plain--ColumnGap);
+  }
+
+  // - Toolbar action group inline
+  &.pf-m-action-group-inline {
+    flex-wrap: wrap;
+    column-gap: var(--#{$toolbar}__group--m-action-group-inline--ColumnGap);
+  }
+
+  // - Toolbar overflow container
   &.pf-m-overflow-container {
     min-width: var(--#{$toolbar}__group--m-overflow-container--MinWidth);
   }
@@ -227,13 +264,19 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 .#{$toolbar}__expandable-content {
   position: absolute;
   inset-block-start: 100%;
+  inset-inline-start: 0;
   z-index: var(--#{$toolbar}__expandable-content--ZIndex);
   display: none;
+  row-gap: var(--#{$toolbar}__expandable-content--RowGap);
   width: 100%;
+  padding-block-start: var(--#{$toolbar}__expandable-content--PaddingBlockStart);
+  padding-block-end: var(--#{$toolbar}__expandable-content--PaddingBlockEnd);
+  padding-inline-start: var(--#{$toolbar}__expandable-content--PaddingInlineStart);
+  padding-inline-end: var(--#{$toolbar}__expandable-content--PaddingInlineEnd);
   background-color: var(--#{$toolbar}__expandable-content--BackgroundColor);
   box-shadow: var(--#{$toolbar}__expandable-content--BoxShadow);
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--lg) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
     position: static;
     padding: 0;
     box-shadow: none;
@@ -247,21 +290,26 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   .#{$toolbar}__item > * {
     flex-basis: 100%;
   }
+
+  .#{$toolbar}__group.pf-m-action-group-inline {
+    display: flex;
+    justify-content: center;
+  }
 }
 
 // - Toolbar expand all
 .#{$toolbar}__expand-all-icon {
-  display: inline-block;
-  transition: var(--#{$toolbar}__expand-all-icon--Transition);
+  display: inline-flex;
+  transition: transform var(--#{$toolbar}__expand-all-icon--TransitionDuration) var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
+  @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change
 }
 
 // - Toolbar group - Toolbar item
 .#{$toolbar}__group,
 .#{$toolbar}__item {
-  align-self: baseline;
+  align-items: baseline;
 
   &.pf-m-overflow-container {
     flex: 1;
@@ -269,10 +317,10 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   }
 }
 
-@each $breakpoint, $breakpoint-value in $pf-v5-c-toolbar--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-toolbar--breakpoint-map {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
+  @include pf-v6-apply-breakpoint($breakpoint) {
     .#{$toolbar}__group,
     .#{$toolbar}__item {
       &.pf-m-align-start#{$breakpoint-name} {
@@ -292,21 +340,18 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         flex-grow: 1;
       }
 
-      @each $alignment in $pf-v5-c-toolbar--align-items--alignments {
+      @each $alignment in $pf-v6-c-toolbar--align-items--alignments {
         &.pf-m-align-self-#{$alignment}#{$breakpoint-name} {
           align-self: #{$alignment};
         }
       }
     }
 
-    // - Toolbar - Toolbar content - Toolbar content section
-    .#{$toolbar},
-    .#{$toolbar}__content,
-    .#{$toolbar}__content-section {
-      // Inset modifiers
-      @each $inset, $inset-value in $pf-v5-c-toolbar--inset-map {
+    // - Toolbar inset
+    .#{$toolbar} {
+      @each $inset, $inset-value in $pf-v6-c-toolbar--inset-map {
         &.pf-m-inset-#{$inset}#{$breakpoint-name} {
-          --#{$toolbar}__content--PaddingInline: #{$inset-value};
+          padding-inline: #{$inset-value};
         }
       }
     }
@@ -314,7 +359,6 @@ $pf-v5--include-toolbar-breakpoints: true !default;
     // - Toolbar group - Toolbar item - Toolbar content - Toolbar content section
     .#{$toolbar}__group,
     .#{$toolbar}__item,
-    .#{$toolbar}__content,
     .#{$toolbar}__content-section {
       &.pf-m-wrap#{$breakpoint-name} {
         flex-wrap: wrap;
@@ -324,34 +368,26 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         flex-wrap: nowrap;
       }
 
-      @each $alignment in $pf-v5-c-toolbar--align-items--alignments {
+      @each $alignment in $pf-v6-c-toolbar--align-items--alignments {
         &.pf-m-align-items-#{$alignment}#{$breakpoint-name} {
           align-items: #{$alignment};
         }
       }
 
-      @each $gap, $gap-value in $pf-v5-c-toolbar--spacer-map {
+      @each $gap, $gap-value in $pf-v6-c-toolbar--spacer-map {
         &.pf-m-gap-#{$gap}#{$breakpoint-name} {
-          column-gap: #{$gap-value};
+          gap: #{$gap-value};
         }
       }
 
       // Row and column gap modifiers
-      @each $spacer, $spacer-value in $pf-v5-c-toolbar--spacer-map {
+      @each $spacer, $spacer-value in $pf-v6-c-toolbar--spacer-map {
         &.pf-m-column-gap-#{$spacer}#{$breakpoint-name} {
           column-gap: #{$spacer-value};
         }
 
         &.pf-m-row-gap-#{$spacer}#{$breakpoint-name} {
-          column-gap: #{$spacer-value};
-        }
-
-        &.pf-m-margin-inline-start#{$spacer}#{$breakpoint-name} {
-          margin-inline-start: #{$spacer-value};
-        }
-
-        &.pf-m-margin-inline-end#{$spacer}#{$breakpoint-name} {
-          margin-inline-end: #{$spacer-value};
+          row-gap: #{$spacer-value};
         }
       }
     }
@@ -378,7 +414,7 @@ $pf-v5--include-toolbar-breakpoints: true !default;
         }
 
         .#{$toolbar}__toggle {
-          display: inline-block;
+          display: inline-flex;
         }
       }
     }

package/components/Tooltip/tooltip.css

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