@patternfly/react-styles 6.0.0-alpha.20 → 6.0.0-alpha.21

package/css/components/Page/page.d.ts

@@ -1,25 +1,9 @@
 import './page.css';
 declare const _default: {
-  "avatar": "pf-v6-c-avatar",
-  "brand": "pf-v6-c-brand",
-  "button": "pf-v6-c-button",
-  "contextSelector": "pf-v6-c-context-selector",
   "dirRtl": "pf-v6-m-dir-rtl",
   "drawer": "pf-v6-c-drawer",
   "masthead": "pf-v6-c-masthead",
   "modifiers": {
-    "menu": "pf-m-menu",
-    "hidden": "pf-m-hidden",
-    "hiddenOnSm": "pf-m-hidden-on-sm",
-    "visibleOnSm": "pf-m-visible-on-sm",
-    "hiddenOnMd": "pf-m-hidden-on-md",
-    "visibleOnMd": "pf-m-visible-on-md",
-    "hiddenOnLg": "pf-m-hidden-on-lg",
-    "visibleOnLg": "pf-m-visible-on-lg",
-    "hiddenOnXl": "pf-m-hidden-on-xl",
-    "visibleOnXl": "pf-m-visible-on-xl",
-    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
-    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",
@@ -57,17 +41,8 @@ declare const _default: {
     "paddingOn_2xl": "pf-m-padding-on-2xl",
     "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
-  "nav": "pf-v6-c-nav",
   "page": "pf-v6-c-page",
   "pageDrawer": "pf-v6-c-page__drawer",
-  "pageHeader": "pf-v6-c-page__header",
-  "pageHeaderBrand": "pf-v6-c-page__header-brand",
-  "pageHeaderBrandLink": "pf-v6-c-page__header-brand-link",
-  "pageHeaderBrandToggle": "pf-v6-c-page__header-brand-toggle",
-  "pageHeaderNav": "pf-v6-c-page__header-nav",
-  "pageHeaderTools": "pf-v6-c-page__header-tools",
-  "pageHeaderToolsGroup": "pf-v6-c-page__header-tools-group",
-  "pageHeaderToolsItem": "pf-v6-c-page__header-tools-item",
   "pageMain": "pf-v6-c-page__main",
   "pageMainBody": "pf-v6-c-page__main-body",
   "pageMainBreadcrumb": "pf-v6-c-page__main-breadcrumb",

package/css/components/Page/page.js

@@ -2,26 +2,10 @@
 exports.__esModule = true;
 require('./page.css');
 exports.default = {
-  "avatar": "pf-v6-c-avatar",
-  "brand": "pf-v6-c-brand",
-  "button": "pf-v6-c-button",
-  "contextSelector": "pf-v6-c-context-selector",
   "dirRtl": "pf-v6-m-dir-rtl",
   "drawer": "pf-v6-c-drawer",
   "masthead": "pf-v6-c-masthead",
   "modifiers": {
-    "menu": "pf-m-menu",
-    "hidden": "pf-m-hidden",
-    "hiddenOnSm": "pf-m-hidden-on-sm",
-    "visibleOnSm": "pf-m-visible-on-sm",
-    "hiddenOnMd": "pf-m-hidden-on-md",
-    "visibleOnMd": "pf-m-visible-on-md",
-    "hiddenOnLg": "pf-m-hidden-on-lg",
-    "visibleOnLg": "pf-m-visible-on-lg",
-    "hiddenOnXl": "pf-m-hidden-on-xl",
-    "visibleOnXl": "pf-m-visible-on-xl",
-    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
-    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",
@@ -59,17 +43,8 @@ exports.default = {
     "paddingOn_2xl": "pf-m-padding-on-2xl",
     "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
-  "nav": "pf-v6-c-nav",
   "page": "pf-v6-c-page",
   "pageDrawer": "pf-v6-c-page__drawer",
-  "pageHeader": "pf-v6-c-page__header",
-  "pageHeaderBrand": "pf-v6-c-page__header-brand",
-  "pageHeaderBrandLink": "pf-v6-c-page__header-brand-link",
-  "pageHeaderBrandToggle": "pf-v6-c-page__header-brand-toggle",
-  "pageHeaderNav": "pf-v6-c-page__header-nav",
-  "pageHeaderTools": "pf-v6-c-page__header-tools",
-  "pageHeaderToolsGroup": "pf-v6-c-page__header-tools-group",
-  "pageHeaderToolsItem": "pf-v6-c-page__header-tools-item",
   "pageMain": "pf-v6-c-page__main",
   "pageMainBody": "pf-v6-c-page__main-body",
   "pageMainBreadcrumb": "pf-v6-c-page__main-breadcrumb",

package/css/components/Page/page.mjs

@@ -1,25 +1,9 @@
 import './page.css';
 export default {
-  "avatar": "pf-v6-c-avatar",
-  "brand": "pf-v6-c-brand",
-  "button": "pf-v6-c-button",
-  "contextSelector": "pf-v6-c-context-selector",
   "dirRtl": "pf-v6-m-dir-rtl",
   "drawer": "pf-v6-c-drawer",
   "masthead": "pf-v6-c-masthead",
   "modifiers": {
-    "menu": "pf-m-menu",
-    "hidden": "pf-m-hidden",
-    "hiddenOnSm": "pf-m-hidden-on-sm",
-    "visibleOnSm": "pf-m-visible-on-sm",
-    "hiddenOnMd": "pf-m-hidden-on-md",
-    "visibleOnMd": "pf-m-visible-on-md",
-    "hiddenOnLg": "pf-m-hidden-on-lg",
-    "visibleOnLg": "pf-m-visible-on-lg",
-    "hiddenOnXl": "pf-m-hidden-on-xl",
-    "visibleOnXl": "pf-m-visible-on-xl",
-    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
-    "visibleOn_2xl": "pf-m-visible-on-2xl",
     "expanded": "pf-m-expanded",
     "collapsed": "pf-m-collapsed",
     "pageInsets": "pf-m-page-insets",
@@ -57,17 +41,8 @@ export default {
     "paddingOn_2xl": "pf-m-padding-on-2xl",
     "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
   },
-  "nav": "pf-v6-c-nav",
   "page": "pf-v6-c-page",
   "pageDrawer": "pf-v6-c-page__drawer",
-  "pageHeader": "pf-v6-c-page__header",
-  "pageHeaderBrand": "pf-v6-c-page__header-brand",
-  "pageHeaderBrandLink": "pf-v6-c-page__header-brand-link",
-  "pageHeaderBrandToggle": "pf-v6-c-page__header-brand-toggle",
-  "pageHeaderNav": "pf-v6-c-page__header-nav",
-  "pageHeaderTools": "pf-v6-c-page__header-tools",
-  "pageHeaderToolsGroup": "pf-v6-c-page__header-tools-group",
-  "pageHeaderToolsItem": "pf-v6-c-page__header-tools-item",
   "pageMain": "pf-v6-c-page__main",
   "pageMainBody": "pf-v6-c-page__main-body",
   "pageMainBreadcrumb": "pf-v6-c-page__main-breadcrumb",

package/css/components/Pagination/pagination.css

@@ -1,13 +1,4 @@
-.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
-  appearance: textfield;
-}
-.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
-  margin: 0;
-  appearance: none;
-}
-
-:where(:root),
-:where(.pf-v6-c-pagination) {
+:where(:root, .pf-v6-c-pagination) {
   --pf-v6-c-pagination--inset: 0;
   --pf-v6-c-pagination--ColumnGap: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-page-insets--inset: var(--pf-t--global--spacer--lg);
@@ -17,7 +8,7 @@
   --pf-v6-c-pagination__nav--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-pagination__nav-page-select--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-pagination__nav-page-select--ColumnGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingRight) + var(--pf-v6-c-form-control--PaddingLeft)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
+  --pf-v6-c-pagination__nav-page-select--c-form-control--width-base: calc((var(--pf-v6-c-form-control--PaddingInlineEnd) + var(--pf-v6-c-form-control--PaddingInlineStart)) + (var(--pf-v6-c-form-control--before--BorderWidth) * 2));
   --pf-v6-c-pagination__nav-page-select--c-form-control--width-chars: 2;
   --pf-v6-c-pagination__nav-page-select--c-form-control--Width: calc(var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-base) + (var(--pf-v6-c-pagination__nav-page-select--c-form-control--width-chars) * 1ch));
   --pf-v6-c-pagination__total-items--Display: block;
@@ -25,25 +16,24 @@
   --pf-v6-c-pagination--m-display-full__total-items--Display: none;
   --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
-  --pf-v6-c-pagination--m-sticky--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-pagination--m-sticky--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-pagination--m-sticky--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-pagination--m-sticky--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-pagination--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-sticky--ZIndex: 100;
-  --pf-v6-c-pagination--m-sticky--Top: 0;
+  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
   --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
-  --pf-v6-c-pagination--m-bottom--Bottom: 0;
-  --pf-v6-c-pagination--m-bottom--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-pagination--m-bottom--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
+  --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
   --pf-v6-c-pagination__page-menu--Display: none;
   --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
   --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
 }
 @media screen and (min-width: 768px) {
-  :where(:root),
-  :where(.pf-v6-c-pagination) {
+  :where(:root, .pf-v6-c-pagination) {
     --pf-v6-c-pagination--m-bottom--BoxShadow: none;
     --pf-v6-c-pagination__page-menu--Display: inline-flex;
     --pf-v6-c-pagination__nav--Display: inline-flex;
@@ -51,8 +41,7 @@
   }
 }
 @media screen and (min-width: 1200px) {
-  :where(:root),
-  :where(.pf-v6-c-pagination) {
+  :where(:root, .pf-v6-c-pagination) {
     --pf-v6-c-pagination__scroll-button--Width: var(--pf-v6-c-pagination__scroll-button--xl--Width);
   }
 }
@@ -71,18 +60,18 @@
 }
 .pf-v6-c-pagination.pf-m-bottom {
   --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow);
-  --pf-v6-c-pagination--m-sticky--Top: auto;
+  --pf-v6-c-pagination--m-sticky--InsetBlockStart: auto;
   position: sticky;
-  inset-block-end: var(--pf-v6-c-pagination--m-bottom--Bottom);
+  inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
   justify-content: center;
-  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--PaddingInlineEnd);
   background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
   box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
 }
 .pf-v6-c-pagination.pf-m-bottom.pf-m-static {
-  --pf-v6-c-pagination--m-bottom--MarginTop: 0;
-  --pf-v6-c-pagination--m-bottom--BorderTopWidth: 0;
+  --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
+  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
   position: relative;
   box-shadow: none;
 }
@@ -102,9 +91,9 @@
 }
 @media screen and (min-width: 768px) {
   .pf-v6-c-pagination.pf-m-bottom {
-    --pf-v6-c-pagination--m-bottom--BorderTopWidth: 0;
-    --pf-v6-c-pagination--m-bottom--MarginTop: 0;
-    --pf-v6-c-pagination--m-bottom--Bottom: auto;
+    --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
+    --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
+    --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
     position: relative;
     justify-content: flex-end;
   }
@@ -125,14 +114,14 @@
   }
 }
 .pf-v6-c-pagination.pf-m-sticky {
-  --pf-v6-c-pagination--m-bottom--Bottom: 0;
+  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
   position: sticky;
-  inset-block-start: var(--pf-v6-c-pagination--m-sticky--Top);
+  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
   z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
-  padding-block-start: var(--pf-v6-c-pagination--m-sticky--PaddingTop);
-  padding-block-end: var(--pf-v6-c-pagination--m-sticky--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-pagination--m-sticky--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-pagination--m-sticky--PaddingRight);
+  padding-block-start: var(--pf-v6-c-pagination--m-sticky--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-pagination--m-sticky--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-pagination--m-sticky--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-pagination--m-sticky--PaddingInlineEnd);
   background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
   box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
 }
@@ -162,6 +151,14 @@
 .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control {
   width: var(--pf-v6-c-pagination__nav-page-select--c-form-control--Width);
 }
+.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input) {
+  appearance: textfield;
+}
+.pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-inner-spin-button, .pf-v6-c-pagination__nav-page-select .pf-v6-c-form-control > :is(input)::-webkit-outer-spin-button {
+  margin: 0;
+  appearance: none;
+}
+
 .pf-v6-c-pagination__total-items {
   display: var(--pf-v6-c-pagination__total-items--Display);
 }

package/css/components/Panel/panel.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-panel {
+:where(:root, .pf-v6-c-panel) {
   --pf-v6-c-panel--Width: auto;
   --pf-v6-c-panel--MinWidth: auto;
   --pf-v6-c-panel--MaxWidth: none;
@@ -13,20 +12,20 @@
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-panel__header--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__main--MaxHeight: none;
   --pf-v6-c-panel__main--Overflow: visible;
-  --pf-v6-c-panel__main-body--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__footer--BoxShadow: none;
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
@@ -67,10 +66,10 @@
 }
 
 .pf-v6-c-panel__header {
-  padding-block-start: var(--pf-v6-c-panel__header--PaddingTop);
-  padding-block-end: var(--pf-v6-c-panel__header--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-panel__header--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-panel__header--PaddingRight);
+  padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-panel__header--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-panel__header--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-panel__header--PaddingInlineEnd);
 }
 
 .pf-v6-c-panel__main {
@@ -79,16 +78,16 @@
 }
 
 .pf-v6-c-panel__main-body {
-  padding-block-start: var(--pf-v6-c-panel__main-body--PaddingTop);
-  padding-block-end: var(--pf-v6-c-panel__main-body--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-panel__main-body--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-panel__main-body--PaddingRight);
+  padding-block-start: var(--pf-v6-c-panel__main-body--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-panel__main-body--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-panel__main-body--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-panel__main-body--PaddingInlineEnd);
 }
 
 .pf-v6-c-panel__footer {
-  padding-block-start: var(--pf-v6-c-panel__footer--PaddingTop);
-  padding-block-end: var(--pf-v6-c-panel__footer--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-panel__footer--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-panel__footer--PaddingRight);
+  padding-block-start: var(--pf-v6-c-panel__footer--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-panel__footer--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-panel__footer--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-panel__footer--PaddingInlineEnd);
   box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
 }

package/css/components/Popover/popover.css

@@ -1,7 +1,7 @@
 .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 +10,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 +31,22 @@
   --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--control--vertical--compact) * 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--compact) * 1.5));
+  --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-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__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
   position: relative;
   min-width: var(--pf-v6-c-popover--MinWidth);
   max-width: var(--pf-v6-c-popover--MaxWidth);
@@ -55,10 +55,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 +67,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 +76,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 +85,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 +94,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 +138,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 +170,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,7 +179,7 @@
 }
 
 .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);
 }
@@ -196,5 +196,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/css/components/Progress/progress.css

@@ -1,5 +1,4 @@
-:root,
-.pf-v6-c-progress {
+:where(:root, .pf-v6-c-progress) {
   --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
   --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
@@ -8,7 +7,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 +133,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 +155,5 @@
 .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);
 }