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

package/components/Panel/panel.scss

@@ -1,13 +1,12 @@
-// @debug $panel; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$panel} {
+@include pf-root($panel) {
   --#{$panel}--Width: auto;
   --#{$panel}--MinWidth: auto;
   --#{$panel}--MaxWidth: none;
-  --#{$panel}--ZIndex: auto;
   --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$panel}--BoxShadow: none;
+  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
 
   // border
   --#{$panel}--before--BorderWidth: 0;
@@ -17,49 +16,50 @@
   --#{$panel}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // bordered
-  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
 
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --#{$panel}--m-raised--ZIndex: var(--pf-t--global--Zindex--sm);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
 
   // header
-  --#{$panel}__header--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$panel}__header--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$panel}__header--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$panel}__header--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$panel}__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // main
   --#{$panel}__main--MaxHeight: none;
   --#{$panel}__main--Overflow: visible;
 
   // body
-  --#{$panel}__main-body--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$panel}__main-body--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$panel}__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$panel}__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // footer
-  --#{$panel}__footer--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$panel}__footer--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$panel}__footer--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$panel}__footer--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$panel}__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$panel}__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$panel}__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$panel}__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$panel}__footer--BoxShadow: none;
 
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
   --#{$panel}--m-scrollable__main--Overflow: auto;
-  --#{$panel}--m-scrollable__footer--BoxShadow: 0 #{pf-size-prem(-5px)} #{pf-size-prem(4px)} #{pf-size-prem(-4px)} rgba(0 0 0 / 16%); // insets the shadow so it doesn't show on left/right sides
+  --#{$panel}--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --#{$panel}--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$panel}--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 }
 
 .#{$panel} {
   position: relative;
-  z-index: var(--#{$panel}--ZIndex);
   width: var(--#{$panel}--Width);
   min-width: var(--#{$panel}--MinWidth);
   max-width: var(--#{$panel}--MaxWidth);
   background-color: var(--#{$panel}--BackgroundColor);
+  border-radius: var(--#{$panel}--BorderRadius);
   box-shadow: var(--#{$panel}--BoxShadow);
 
   &::before {
@@ -68,6 +68,7 @@
     pointer-events: none;
     content: "";
     border: var(--#{$panel}--before--BorderWidth) solid var(--#{$panel}--before--BorderColor);
+    border-radius: var(--#{$panel}--BorderRadius);
   }
 
   &.pf-m-bordered {
@@ -81,21 +82,22 @@
   &.pf-m-raised {
     --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
     --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
-    --#{$panel}--ZIndex: var(--#{$panel}--m-raised--ZIndex);
   }
 
   &.pf-m-scrollable {
     --#{$panel}__main--MaxHeight: var(--#{$panel}--m-scrollable__main--MaxHeight);
     --#{$panel}__main--Overflow: var(--#{$panel}--m-scrollable__main--Overflow);
     --#{$panel}__footer--BoxShadow: var(--#{$panel}--m-scrollable__footer--BoxShadow);
+    --#{$panel}__footer--PaddingBlockStart: var(--#{$panel}--m-scrollable__footer--PaddingBlockStart);
+    --#{$panel}__footer--PaddingBlockEnd: var(--#{$panel}--m-scrollable__footer--PaddingBlockEnd);
   }
 }
 
 .#{$panel}__header {
-  padding-block-start: var(--#{$panel}__header--PaddingTop);
-  padding-block-end: var(--#{$panel}__header--PaddingBottom);
-  padding-inline-start: var(--#{$panel}__header--PaddingLeft);
-  padding-inline-end: var(--#{$panel}__header--PaddingRight);
+  padding-block-start: var(--#{$panel}__header--PaddingBlockStart);
+  padding-block-end: var(--#{$panel}__header--PaddingBlockEnd);
+  padding-inline-start: var(--#{$panel}__header--PaddingInlineStart);
+  padding-inline-end: var(--#{$panel}__header--PaddingInlineEnd);
 }
 
 .#{$panel}__main {
@@ -104,16 +106,16 @@
 }
 
 .#{$panel}__main-body {
-  padding-block-start: var(--#{$panel}__main-body--PaddingTop);
-  padding-block-end: var(--#{$panel}__main-body--PaddingBottom);
-  padding-inline-start: var(--#{$panel}__main-body--PaddingLeft);
-  padding-inline-end: var(--#{$panel}__main-body--PaddingRight);
+  padding-block-start: var(--#{$panel}__main-body--PaddingBlockStart);
+  padding-block-end: var(--#{$panel}__main-body--PaddingBlockEnd);
+  padding-inline-start: var(--#{$panel}__main-body--PaddingInlineStart);
+  padding-inline-end: var(--#{$panel}__main-body--PaddingInlineEnd);
 }
 
 .#{$panel}__footer {
-  padding-block-start: var(--#{$panel}__footer--PaddingTop);
-  padding-block-end: var(--#{$panel}__footer--PaddingBottom);
-  padding-inline-start: var(--#{$panel}__footer--PaddingLeft);
-  padding-inline-end: var(--#{$panel}__footer--PaddingRight);
+  padding-block-start: var(--#{$panel}__footer--PaddingBlockStart);
+  padding-block-end: var(--#{$panel}__footer--PaddingBlockEnd);
+  padding-inline-start: var(--#{$panel}__footer--PaddingInlineStart);
+  padding-inline-end: var(--#{$panel}__footer--PaddingInlineEnd);
   box-shadow: var(--#{$panel}__footer--BoxShadow);
 }

package/components/Popover/popover.css

@@ -1,7 +1,8 @@
+:root,
 .pf-v6-c-popover {
   --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
-  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingLeft) + var(--pf-v6-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingLeft) + var(--pf-v6-c-popover__content--PaddingRight) + 18.75rem);
+  --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
+  --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
   --pf-v6-c-popover--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-popover--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-popover--m-danger__title-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
@@ -10,10 +11,10 @@
   --pf-v6-c-popover--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-popover--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
   --pf-v6-c-popover__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-popover__content--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-popover__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-popover__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-popover__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-popover__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-popover__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-popover__content--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-popover__arrow--Width: 0.9375rem;
   --pf-v6-c-popover__arrow--Height: 0.9375rem;
@@ -31,22 +32,24 @@
   --pf-v6-c-popover__arrow--m-left--TranslateX: 50%;
   --pf-v6-c-popover__arrow--m-left--TranslateY: -50%;
   --pf-v6-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-v6-c-popover__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
-  --pf-v6-c-popover__close--Top: calc(var(--pf-v6-c-popover__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5));
-  --pf-v6-c-popover__close--Right: var(--pf-v6-c-popover__content--PaddingRight);
-  --pf-v6-c-popover__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-popover__header--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
+  --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
+  --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
+  --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-popover__title-text--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-popover__title-text--FontFamily: var(--pf-t--global--font--family--body);
-  --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-popover__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-popover__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-popover__title-text--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-popover__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-popover__footer--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
+  --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
+}
+
+.pf-v6-c-popover {
   position: relative;
   min-width: var(--pf-v6-c-popover--MinWidth);
   max-width: var(--pf-v6-c-popover--MaxWidth);
@@ -55,10 +58,10 @@
   box-shadow: var(--pf-v6-c-popover--BoxShadow);
 }
 .pf-v6-c-popover.pf-m-no-padding {
-  --pf-v6-c-popover__content--PaddingTop: 0px;
-  --pf-v6-c-popover__content--PaddingRight: 0px;
-  --pf-v6-c-popover__content--PaddingBottom: 0px;
-  --pf-v6-c-popover__content--PaddingLeft: 0px;
+  --pf-v6-c-popover__content--PaddingBlockStart: 0px;
+  --pf-v6-c-popover__content--PaddingInlineEnd: 0px;
+  --pf-v6-c-popover__content--PaddingBlockEnd: 0px;
+  --pf-v6-c-popover__content--PaddingInlineStart: 0px;
 }
 .pf-v6-c-popover.pf-m-width-auto {
   --pf-v6-c-popover--MinWidth: auto;
@@ -67,8 +70,8 @@
 .pf-v6-c-popover:is(.pf-m-top,
 .pf-m-top-left,
 .pf-m-top-right) {
-  --pf-v6-c-popover__arrow--Bottom: var(--pf-v6-c-popover--m-top--Bottom, 0);
-  --pf-v6-c-popover__arrow--Left: var(--pf-v6-c-popover--m-top--Left, 50%);
+  --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover--m-top--InsetBlockEnd, 0);
+  --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-top--InsetInlineStart, 50%);
   --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-top--TranslateX);
   --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
   --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-top--Rotate);
@@ -76,8 +79,8 @@
 .pf-v6-c-popover:is(.pf-m-bottom,
 .pf-m-bottom-left,
 .pf-m-bottom-right) {
-  --pf-v6-c-popover__arrow--Top: var(--pf-v6-c-popover--m-bottom--Top, 0);
-  --pf-v6-c-popover__arrow--Left: var(--pf-v6-c-popover--m-bottom--Left, 50%);
+  --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-bottom--InsetBlockStart, 0);
+  --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-bottom--InsetInlineStart, 50%);
   --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-bottom--TranslateX);
   --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-bottom--TranslateY);
   --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-bottom--Rotate);
@@ -85,8 +88,8 @@
 .pf-v6-c-popover:is(.pf-m-left,
 .pf-m-left-top,
 .pf-m-left-bottom) {
-  --pf-v6-c-popover__arrow--Top: var(--pf-v6-c-popover--m-left--Top, 50%);
-  --pf-v6-c-popover__arrow--Right: var(--pf-v6-c-popover--m-left--Right, 0);
+  --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-left--InsetBlockStart, 50%);
+  --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover--m-left--InsetInlineEnd, 0);
   --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
   --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-left--TranslateY);
   --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-left--Rotate);
@@ -94,31 +97,31 @@
 .pf-v6-c-popover:is(.pf-m-right,
 .pf-m-right-top,
 .pf-m-right-bottom) {
-  --pf-v6-c-popover__arrow--Top: var(--pf-v6-c-popover--m-right--Top, 50%);
-  --pf-v6-c-popover__arrow--Left: var(--pf-v6-c-popover--m-right--Left, 0);
+  --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover--m-right--InsetBlockStart, 50%);
+  --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover--m-right--InsetInlineStart, 0);
   --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-right--TranslateX);
   --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-right--TranslateY);
   --pf-v6-c-popover__arrow--Rotate: var(--pf-v6-c-popover__arrow--m-right--Rotate);
 }
 .pf-v6-c-popover:is(.pf-m-left-top,
 .pf-m-right-top) {
-  --pf-v6-c-popover__arrow--Top: var(--pf-v6-c-popover__arrow--m-inline-top--Top);
+  --pf-v6-c-popover__arrow--InsetBlockStart: var(--pf-v6-c-popover__arrow--m-inline-top--InsetBlockStart);
   --pf-v6-c-popover__arrow--TranslateY: var(--pf-v6-c-popover__arrow--m-top--TranslateY);
 }
 .pf-v6-c-popover:is(.pf-m-left-bottom,
 .pf-m-right-bottom) {
-  --pf-v6-c-popover__arrow--Top: auto;
-  --pf-v6-c-popover__arrow--Bottom: var(--pf-v6-c-popover__arrow--m-inline-bottom--Bottom);
+  --pf-v6-c-popover__arrow--InsetBlockStart: auto;
+  --pf-v6-c-popover__arrow--InsetBlockEnd: var(--pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd);
 }
 .pf-v6-c-popover:is(.pf-m-top-left,
 .pf-m-bottom-left) {
-  --pf-v6-c-popover__arrow--Left: var(--pf-v6-c-popover__arrow--m-block-left--Left);
+  --pf-v6-c-popover__arrow--InsetInlineStart: var(--pf-v6-c-popover__arrow--m-block-left--InsetInlineStart);
   --pf-v6-c-popover__arrow--TranslateX: var(--pf-v6-c-popover__arrow--m-left--TranslateX);
 }
 .pf-v6-c-popover:is(.pf-m-top-right,
 .pf-m-bottom-right) {
-  --pf-v6-c-popover__arrow--Right: var(--pf-v6-c-popover__arrow--m-block-right--Right);
-  --pf-v6-c-popover__arrow--Left: auto;
+  --pf-v6-c-popover__arrow--InsetInlineEnd: var(--pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd);
+  --pf-v6-c-popover__arrow--InsetInlineStart: auto;
 }
 .pf-v6-c-popover.pf-m-danger {
   --pf-v6-c-popover__title-icon--Color: var(--pf-v6-c-popover--m-danger__title-icon--Color);
@@ -138,29 +141,29 @@
 
 .pf-v6-c-popover__content {
   position: relative;
-  padding-block-start: var(--pf-v6-c-popover__content--PaddingTop);
-  padding-block-end: var(--pf-v6-c-popover__content--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-popover__content--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-popover__content--PaddingRight);
+  padding-block-start: var(--pf-v6-c-popover__content--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-popover__content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-popover__content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-popover__content--PaddingInlineEnd);
   background-color: var(--pf-v6-c-popover__content--BackgroundColor);
   border-radius: var(--pf-v6-c-popover__content--BorderRadius);
 }
 
 .pf-v6-c-popover__close {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-popover__close--Top);
-  inset-inline-end: var(--pf-v6-c-popover__close--Right);
+  inset-block-start: var(--pf-v6-c-popover__close--InsetBlockStart);
+  inset-inline-end: var(--pf-v6-c-popover__close--InsetInlineEnd);
 }
 .pf-v6-c-popover__close + * {
-  padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingRight);
+  padding-inline-end: var(--pf-v6-c-popover__close--sibling--PaddingInlineEnd);
 }
 
 .pf-v6-c-popover__arrow {
   position: absolute;
-  top: var(--pf-v6-c-popover__arrow--Top, auto);
-  right: var(--pf-v6-c-popover__arrow--Right, auto);
-  bottom: var(--pf-v6-c-popover__arrow--Bottom, auto);
-  left: var(--pf-v6-c-popover__arrow--Left, auto);
+  top: var(--pf-v6-c-popover__arrow--InsetBlockStart, auto);
+  right: var(--pf-v6-c-popover__arrow--InsetInlineEnd, auto);
+  bottom: var(--pf-v6-c-popover__arrow--InsetBlockEnd, auto);
+  left: var(--pf-v6-c-popover__arrow--InsetInlineStart, auto);
   width: var(--pf-v6-c-popover__arrow--Width);
   height: var(--pf-v6-c-popover__arrow--Height);
   pointer-events: none;
@@ -170,7 +173,7 @@
 }
 
 .pf-v6-c-popover__header {
-  margin-block-end: var(--pf-v6-c-popover__header--MarginBottom);
+  margin-block-end: var(--pf-v6-c-popover__header--MarginBlockEnd);
 }
 
 .pf-v6-c-popover__title {
@@ -179,13 +182,12 @@
 }
 
 .pf-v6-c-popover__title-icon {
-  margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-popover__title-icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-popover__title-icon--FontSize);
   color: var(--pf-v6-c-popover__title-icon--Color);
 }
 
 .pf-v6-c-popover__title-text {
-  font-family: var(--pf-v6-c-popover__title-text--FontFamily);
   font-size: var(--pf-v6-c-popover__title-text--FontSize);
   font-weight: var(--pf-v6-c-popover__title-text--FontWeight);
   color: var(--pf-v6-c-popover__title-text--Color);
@@ -196,5 +198,5 @@
 }
 
 .pf-v6-c-popover__footer {
-  margin-block-start: var(--pf-v6-c-popover__footer--MarginTop);
+  margin-block-start: var(--pf-v6-c-popover__footer--MarginBlockStart);
 }

package/components/Popover/popover.scss

@@ -1,10 +1,10 @@
-// @debug $popover; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-.#{$popover} {
+@include pf-root($popover) {
   // Component
   --#{$popover}--FontSize: var(--pf-t--global--font--size--body--sm);
-  --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
-  --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingLeft) + var(--#{$popover}__content--PaddingRight) + #{pf-size-prem(300px)});
+  --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
+  --#{$popover}--MaxWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
   --#{$popover}--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$popover}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
@@ -18,10 +18,10 @@
 
   // Content
   --#{$popover}__content--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --#{$popover}__content--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$popover}__content--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$popover}__content--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$popover}__content--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$popover}__content--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$popover}__content--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // Arrow
@@ -41,33 +41,34 @@
   --#{$popover}__arrow--m-left--TranslateX: 50%;
   --#{$popover}__arrow--m-left--TranslateY: -50%;
   --#{$popover}__arrow--m-left--Rotate: 45deg;
-  --#{$popover}__arrow--m-inline-top--Top: var(--pf-t--global--border--radius--medium);
-  --#{$popover}__arrow--m-inline-bottom--Bottom: var(--pf-t--global--border--radius--medium);
-  --#{$popover}__arrow--m-block-left--Left: var(--pf-t--global--border--radius--medium);
-  --#{$popover}__arrow--m-block-right--Right: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-inline-top--InsetBlockStart: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
+  --#{$popover}__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
 
   // Close
-  --#{$popover}__close--Top: calc(var(--#{$popover}__content--PaddingTop) - (var(--pf-t--global--spacer--xs) * 1.5)); // align top of button with top of text - TODO: replace with form element token
-  --#{$popover}__close--Right: var(--#{$popover}__content--PaddingRight); // align right of content
-  --#{$popover}__close--sibling--PaddingRight: var(--pf-t--global--spacer--2xl);
+  --#{$popover}__close--InsetBlockStart: calc(var(--#{$popover}__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default)); // align top of button with top of text 
+  --#{$popover}__close--InsetInlineEnd: var(--#{$popover}__content--PaddingInlineEnd); // align right of content
+  --#{$popover}__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
 
   // Header
-  --#{$popover}__header--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$popover}__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
 
   // Title text
   --#{$popover}__title-text--Color: var(--pf-t--global--text--color--regular);
-  --#{$popover}__title-text--FontFamily: var(--pf-t--global--font--family--body);
-  --#{$popover}__title-text--FontSize: var(--pf-t--global--font--size--body--lg);
   --#{$popover}__title-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$popover}__title-text--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Title icon
-  --#{$popover}__title-icon--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$popover}__title-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$popover}__title-icon--Color: var(--pf-t--global--icon--color--regular);
-  --#{$popover}__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --#{$popover}__title-icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
 
   // Footer
-  --#{$popover}__footer--MarginTop: var(--pf-t--global--spacer--md);
+  --#{$popover}__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
+}
 
+.#{$popover} {
   position: relative;
   min-width: var(--#{$popover}--MinWidth);
   max-width: var(--#{$popover}--MaxWidth);
@@ -78,10 +79,10 @@
   &.pf-m-no-padding {
     // Use px values below so the min/max-width calc() doesn't break
     // stylelint-disable length-zero-no-unit
-    --#{$popover}__content--PaddingTop: 0px;
-    --#{$popover}__content--PaddingRight: 0px;
-    --#{$popover}__content--PaddingBottom: 0px;
-    --#{$popover}__content--PaddingLeft: 0px;
+    --#{$popover}__content--PaddingBlockStart: 0px;
+    --#{$popover}__content--PaddingInlineEnd: 0px;
+    --#{$popover}__content--PaddingBlockEnd: 0px;
+    --#{$popover}__content--PaddingInlineStart: 0px;
     // stylelint-enable
   }
 
@@ -95,8 +96,8 @@
     .pf-m-top-left,
     .pf-m-top-right
   ) {
-    --#{$popover}__arrow--Bottom: var(--#{$popover}--m-top--Bottom, 0);
-    --#{$popover}__arrow--Left: var(--#{$popover}--m-top--Left, 50%);
+    --#{$popover}__arrow--InsetBlockEnd: var(--#{$popover}--m-top--InsetBlockEnd, 0);
+    --#{$popover}__arrow--InsetInlineStart: var(--#{$popover}--m-top--InsetInlineStart, 50%);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-top--TranslateX);
     --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
     --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-top--Rotate);
@@ -107,8 +108,8 @@
     .pf-m-bottom-left,
     .pf-m-bottom-right
   ) {
-    --#{$popover}__arrow--Top: var(--#{$popover}--m-bottom--Top, 0);
-    --#{$popover}__arrow--Left: var(--#{$popover}--m-bottom--Left, 50%);
+    --#{$popover}__arrow--InsetBlockStart: var(--#{$popover}--m-bottom--InsetBlockStart, 0);
+    --#{$popover}__arrow--InsetInlineStart: var(--#{$popover}--m-bottom--InsetInlineStart, 50%);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-bottom--TranslateX);
     --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-bottom--TranslateY);
     --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-bottom--Rotate);
@@ -119,8 +120,8 @@
     .pf-m-left-top,
     .pf-m-left-bottom
   ) {
-    --#{$popover}__arrow--Top: var(--#{$popover}--m-left--Top, 50%);
-    --#{$popover}__arrow--Right: var(--#{$popover}--m-left--Right, 0);
+    --#{$popover}__arrow--InsetBlockStart: var(--#{$popover}--m-left--InsetBlockStart, 50%);
+    --#{$popover}__arrow--InsetInlineEnd: var(--#{$popover}--m-left--InsetInlineEnd, 0);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
     --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-left--TranslateY);
     --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-left--Rotate);
@@ -131,8 +132,8 @@
     .pf-m-right-top,
     .pf-m-right-bottom
   ) {
-    --#{$popover}__arrow--Top: var(--#{$popover}--m-right--Top, 50%);
-    --#{$popover}__arrow--Left: var(--#{$popover}--m-right--Left, 0);
+    --#{$popover}__arrow--InsetBlockStart: var(--#{$popover}--m-right--InsetBlockStart, 50%);
+    --#{$popover}__arrow--InsetInlineStart: var(--#{$popover}--m-right--InsetInlineStart, 0);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-right--TranslateX);
     --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-right--TranslateY);
     --#{$popover}__arrow--Rotate: var(--#{$popover}__arrow--m-right--Rotate);
@@ -142,7 +143,7 @@
     .pf-m-left-top,
     .pf-m-right-top
   ) {
-    --#{$popover}__arrow--Top: var(--#{$popover}__arrow--m-inline-top--Top);
+    --#{$popover}__arrow--InsetBlockStart: var(--#{$popover}__arrow--m-inline-top--InsetBlockStart);
     --#{$popover}__arrow--TranslateY: var(--#{$popover}__arrow--m-top--TranslateY);
   }
 
@@ -150,15 +151,15 @@
     .pf-m-left-bottom,
     .pf-m-right-bottom
   ) {
-    --#{$popover}__arrow--Top: auto;
-    --#{$popover}__arrow--Bottom: var(--#{$popover}__arrow--m-inline-bottom--Bottom);
+    --#{$popover}__arrow--InsetBlockStart: auto;
+    --#{$popover}__arrow--InsetBlockEnd: var(--#{$popover}__arrow--m-inline-bottom--InsetBlockEnd);
   }
 
   &:is(
     .pf-m-top-left,
     .pf-m-bottom-left
   ) {
-    --#{$popover}__arrow--Left: var(--#{$popover}__arrow--m-block-left--Left);
+    --#{$popover}__arrow--InsetInlineStart: var(--#{$popover}__arrow--m-block-left--InsetInlineStart);
     --#{$popover}__arrow--TranslateX: var(--#{$popover}__arrow--m-left--TranslateX);
   }
 
@@ -166,8 +167,8 @@
     .pf-m-top-right,
     .pf-m-bottom-right
   ) {
-    --#{$popover}__arrow--Right: var(--#{$popover}__arrow--m-block-right--Right);
-    --#{$popover}__arrow--Left: auto;
+    --#{$popover}__arrow--InsetInlineEnd: var(--#{$popover}__arrow--m-block-right--InsetInlineEnd);
+    --#{$popover}__arrow--InsetInlineStart: auto;
   }
 
   &.pf-m-danger {
@@ -193,10 +194,10 @@
 
 .#{$popover}__content {
   position: relative;
-  padding-block-start: var(--#{$popover}__content--PaddingTop);
-  padding-block-end: var(--#{$popover}__content--PaddingBottom);
-  padding-inline-start: var(--#{$popover}__content--PaddingLeft);
-  padding-inline-end: var(--#{$popover}__content--PaddingRight);
+  padding-block-start: var(--#{$popover}__content--PaddingBlockStart);
+  padding-block-end: var(--#{$popover}__content--PaddingBlockEnd);
+  padding-inline-start: var(--#{$popover}__content--PaddingInlineStart);
+  padding-inline-end: var(--#{$popover}__content--PaddingInlineEnd);
   background-color: var(--#{$popover}__content--BackgroundColor);
   border-radius: var(--#{$popover}__content--BorderRadius);
 }
@@ -204,22 +205,22 @@
 // Close button
 .#{$popover}__close {
   position: absolute;
-  inset-block-start: var(--#{$popover}__close--Top);
-  inset-inline-end: var(--#{$popover}__close--Right);
+  inset-block-start: var(--#{$popover}__close--InsetBlockStart);
+  inset-inline-end: var(--#{$popover}__close--InsetInlineEnd);
 
   // Create room for the close button
   + * {
-    padding-inline-end: var(--#{$popover}__close--sibling--PaddingRight);
+    padding-inline-end: var(--#{$popover}__close--sibling--PaddingInlineEnd);
   }
 }
 
 .#{$popover}__arrow {
   position: absolute;
   // stylelint-disable liberty/use-logical-spec
-  top: var(--#{$popover}__arrow--Top, auto);
-  right: var(--#{$popover}__arrow--Right, auto);
-  bottom: var(--#{$popover}__arrow--Bottom, auto);
-  left: var(--#{$popover}__arrow--Left, auto);
+  top: var(--#{$popover}__arrow--InsetBlockStart, auto);
+  right: var(--#{$popover}__arrow--InsetInlineEnd, auto);
+  bottom: var(--#{$popover}__arrow--InsetBlockEnd, auto);
+  left: var(--#{$popover}__arrow--InsetInlineStart, auto);
   // stylelint-enable
   width: var(--#{$popover}__arrow--Width);
   height: var(--#{$popover}__arrow--Height);
@@ -230,22 +231,22 @@
 }
 
 .#{$popover}__header {
-  margin-block-end: var(--#{$popover}__header--MarginBottom);
+  margin-block-end: var(--#{$popover}__header--MarginBlockEnd);
 }
 
 .#{$popover}__title {
   display: flex;
   flex: 0 0 auto;
+
 }
 
 .#{$popover}__title-icon {
-  margin-inline-end: var(--#{$popover}__title-icon--MarginRight);
+  margin-inline-end: var(--#{$popover}__title-icon--MarginInlineEnd);
   font-size: var(--#{$popover}__title-icon--FontSize);
   color: var(--#{$popover}__title-icon--Color);
 }
 
 .#{$popover}__title-text {
-  font-family: var(--#{$popover}__title-text--FontFamily);
   font-size: var(--#{$popover}__title-text--FontSize);
   font-weight: var(--#{$popover}__title-text--FontWeight);
   color: var(--#{$popover}__title-text--Color);
@@ -257,5 +258,5 @@
 }
 
 .#{$popover}__footer {
-  margin-block-start: var(--#{$popover}__footer--MarginTop);
+  margin-block-start: var(--#{$popover}__footer--MarginBlockStart);
 }

package/components/Progress/progress.css

@@ -8,7 +8,7 @@
   --pf-v6-c-progress__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-progress__indicator--Height: var(--pf-v6-c-progress__bar--Height);
   --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-progress__helper-text--MarginTop: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
+  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
   --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
   --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
   --pf-v6-c-progress--m-danger__indicator--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -134,8 +134,8 @@
 
 .pf-v6-c-progress__bar::before,
 .pf-v6-c-progress__indicator {
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
 .pf-v6-c-progress__bar {
@@ -156,5 +156,9 @@
 .pf-v6-c-progress__helper-text {
   grid-row: 3/4;
   grid-column: 1/3;
-  margin-block-start: var(--pf-v6-c-progress__helper-text--MarginTop);
+  margin-block-start: var(--pf-v6-c-progress__helper-text--MarginBlockStart);
+}
+
+.pf-v6-c-progress__measure {
+  font-variant-numeric: tabular-nums;
 }