@patternfly/react-styles 5.0.0-alpha.8 → 5.0.0-prerelease.1

package/css/components/Pagination/pagination.d.ts

@@ -1,7 +1,8 @@
 import './pagination.css';
 declare const _default: {
-  "button": "pf-c-button",
-  "formControl": "pf-c-form-control",
+  "button": "pf-v5-c-button",
+  "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -59,13 +60,11 @@ declare const _default: {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-c-options-menu",
-  "optionsMenuToggle": "pf-c-options-menu__toggle",
-  "pagination": "pf-c-pagination",
-  "paginationNav": "pf-c-pagination__nav",
-  "paginationNavControl": "pf-c-pagination__nav-control",
-  "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-c-pagination__total-items",
-  "themeDark": "pf-theme-dark"
+  "pagination": "pf-v5-c-pagination",
+  "paginationNav": "pf-v5-c-pagination__nav",
+  "paginationNavControl": "pf-v5-c-pagination__nav-control",
+  "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
+  "paginationTotalItems": "pf-v5-c-pagination__total-items",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Pagination/pagination.js

@@ -2,8 +2,9 @@
 exports.__esModule = true;
 require('./pagination.css');
 exports.default = {
-  "button": "pf-c-button",
-  "formControl": "pf-c-form-control",
+  "button": "pf-v5-c-button",
+  "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -61,12 +62,10 @@ exports.default = {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-c-options-menu",
-  "optionsMenuToggle": "pf-c-options-menu__toggle",
-  "pagination": "pf-c-pagination",
-  "paginationNav": "pf-c-pagination__nav",
-  "paginationNavControl": "pf-c-pagination__nav-control",
-  "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-c-pagination__total-items",
-  "themeDark": "pf-theme-dark"
+  "pagination": "pf-v5-c-pagination",
+  "paginationNav": "pf-v5-c-pagination__nav",
+  "paginationNavControl": "pf-v5-c-pagination__nav-control",
+  "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
+  "paginationTotalItems": "pf-v5-c-pagination__total-items",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Pagination/pagination.mjs

@@ -1,7 +1,8 @@
 import './pagination.css';
 export default {
-  "button": "pf-c-button",
-  "formControl": "pf-c-form-control",
+  "button": "pf-v5-c-button",
+  "formControl": "pf-v5-c-form-control",
+  "menuToggle": "pf-v5-c-menu-toggle",
   "modifiers": {
     "bottom": "pf-m-bottom",
     "static": "pf-m-static",
@@ -59,12 +60,10 @@ export default {
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl"
   },
-  "optionsMenu": "pf-c-options-menu",
-  "optionsMenuToggle": "pf-c-options-menu__toggle",
-  "pagination": "pf-c-pagination",
-  "paginationNav": "pf-c-pagination__nav",
-  "paginationNavControl": "pf-c-pagination__nav-control",
-  "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-  "paginationTotalItems": "pf-c-pagination__total-items",
-  "themeDark": "pf-theme-dark"
+  "pagination": "pf-v5-c-pagination",
+  "paginationNav": "pf-v5-c-pagination__nav",
+  "paginationNavControl": "pf-v5-c-pagination__nav-control",
+  "paginationNavPageSelect": "pf-v5-c-pagination__nav-page-select",
+  "paginationTotalItems": "pf-v5-c-pagination__total-items",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Panel/panel.css

@@ -1,42 +1,43 @@
-.pf-c-panel {
-  --pf-c-panel--Width: auto;
-  --pf-c-panel--MinWidth: auto;
-  --pf-c-panel--MaxWidth: none;
-  --pf-c-panel--ZIndex: auto;
-  --pf-c-panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-panel--BoxShadow: none;
-  --pf-c-panel--before--BorderWidth: 0;
-  --pf-c-panel--before--BorderColor: var(--pf-global--BorderColor--100);
-  --pf-c-panel--m-bordered--before--BorderWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-panel--m-raised--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-panel--m-raised--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-panel__header--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__header--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__main--MaxHeight: none;
-  --pf-c-panel__main--Overflow: visible;
-  --pf-c-panel__main-body--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__main-body--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-panel__footer--BoxShadow: none;
-  --pf-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
-  --pf-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
+.pf-v5-c-panel {
+  --pf-v5-c-panel--Width: auto;
+  --pf-v5-c-panel--MinWidth: auto;
+  --pf-v5-c-panel--MaxWidth: none;
+  --pf-v5-c-panel--ZIndex: auto;
+  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-panel--BoxShadow: none;
+  --pf-v5-c-panel--before--BorderWidth: 0;
+  --pf-v5-c-panel--before--BorderColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-panel--m-bordered--before--BorderWidth: var(--pf-v5-global--BorderWidth--sm);
+  --pf-v5-c-panel--m-raised--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-panel--m-raised--ZIndex: var(--pf-v5-global--ZIndex--sm);
+  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-panel__header--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__header--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__header--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__header--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__main--MaxHeight: none;
+  --pf-v5-c-panel__main--Overflow: visible;
+  --pf-v5-c-panel__main-body--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__main-body--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__footer--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-panel__footer--BoxShadow: none;
+  --pf-v5-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
+  --pf-v5-c-panel--m-scrollable__main--Overflow: auto;
+  --pf-v5-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16);
   position: relative;
-  z-index: var(--pf-c-panel--ZIndex);
-  width: var(--pf-c-panel--Width);
-  min-width: var(--pf-c-panel--MinWidth);
-  max-width: var(--pf-c-panel--MaxWidth);
-  background-color: var(--pf-c-panel--BackgroundColor);
-  box-shadow: var(--pf-c-panel--BoxShadow);
+  z-index: var(--pf-v5-c-panel--ZIndex);
+  width: var(--pf-v5-c-panel--Width);
+  min-width: var(--pf-v5-c-panel--MinWidth);
+  max-width: var(--pf-v5-c-panel--MaxWidth);
+  background-color: var(--pf-v5-c-panel--BackgroundColor);
+  box-shadow: var(--pf-v5-c-panel--BoxShadow);
 }
-.pf-c-panel::before {
+.pf-v5-c-panel::before {
   position: absolute;
   top: 0;
   right: 0;
@@ -44,35 +45,40 @@
   left: 0;
   pointer-events: none;
   content: "";
-  border: var(--pf-c-panel--before--BorderWidth) solid var(--pf-c-panel--before--BorderColor);
+  border: var(--pf-v5-c-panel--before--BorderWidth) solid var(--pf-v5-c-panel--before--BorderColor);
 }
-.pf-c-panel.pf-m-bordered {
-  --pf-c-panel--before--BorderWidth: var(--pf-c-panel--m-bordered--before--BorderWidth);
+.pf-v5-c-panel.pf-m-bordered {
+  --pf-v5-c-panel--before--BorderWidth: var(--pf-v5-c-panel--m-bordered--before--BorderWidth);
 }
-.pf-c-panel.pf-m-raised {
-  --pf-c-panel--BoxShadow: var(--pf-c-panel--m-raised--BoxShadow);
-  --pf-c-panel--ZIndex: var(--pf-c-panel--m-raised--ZIndex);
+.pf-v5-c-panel.pf-m-raised {
+  --pf-v5-c-panel--BackgroundColor: var(--pf-v5-c-panel--m-raised--BackgroundColor);
+  --pf-v5-c-panel--BoxShadow: var(--pf-v5-c-panel--m-raised--BoxShadow);
+  --pf-v5-c-panel--ZIndex: var(--pf-v5-c-panel--m-raised--ZIndex);
 }
-.pf-c-panel.pf-m-scrollable {
-  --pf-c-panel__main--MaxHeight: var(--pf-c-panel--m-scrollable__main--MaxHeight);
-  --pf-c-panel__main--Overflow: var(--pf-c-panel--m-scrollable__main--Overflow);
-  --pf-c-panel__footer--BoxShadow: var(--pf-c-panel--m-scrollable__footer--BoxShadow);
+.pf-v5-c-panel.pf-m-scrollable {
+  --pf-v5-c-panel__main--MaxHeight: var(--pf-v5-c-panel--m-scrollable__main--MaxHeight);
+  --pf-v5-c-panel__main--Overflow: var(--pf-v5-c-panel--m-scrollable__main--Overflow);
+  --pf-v5-c-panel__footer--BoxShadow: var(--pf-v5-c-panel--m-scrollable__footer--BoxShadow);
 }
 
-.pf-c-panel__header {
-  padding: var(--pf-c-panel__header--PaddingTop) var(--pf-c-panel__header--PaddingRight) var(--pf-c-panel__header--PaddingBottom) var(--pf-c-panel__header--PaddingLeft);
+.pf-v5-c-panel__header {
+  padding: var(--pf-v5-c-panel__header--PaddingTop) var(--pf-v5-c-panel__header--PaddingRight) var(--pf-v5-c-panel__header--PaddingBottom) var(--pf-v5-c-panel__header--PaddingLeft);
 }
 
-.pf-c-panel__main {
-  max-height: var(--pf-c-panel__main--MaxHeight);
-  overflow: var(--pf-c-panel__main--Overflow);
+.pf-v5-c-panel__main {
+  max-height: var(--pf-v5-c-panel__main--MaxHeight);
+  overflow: var(--pf-v5-c-panel__main--Overflow);
 }
 
-.pf-c-panel__main-body {
-  padding: var(--pf-c-panel__main-body--PaddingTop) var(--pf-c-panel__main-body--PaddingRight) var(--pf-c-panel__main-body--PaddingBottom) var(--pf-c-panel__main-body--PaddingLeft);
+.pf-v5-c-panel__main-body {
+  padding: var(--pf-v5-c-panel__main-body--PaddingTop) var(--pf-v5-c-panel__main-body--PaddingRight) var(--pf-v5-c-panel__main-body--PaddingBottom) var(--pf-v5-c-panel__main-body--PaddingLeft);
 }
 
-.pf-c-panel__footer {
-  padding: var(--pf-c-panel__footer--PaddingTop) var(--pf-c-panel__footer--PaddingRight) var(--pf-c-panel__footer--PaddingBottom) var(--pf-c-panel__footer--PaddingLeft);
-  box-shadow: var(--pf-c-panel__footer--BoxShadow);
+.pf-v5-c-panel__footer {
+  padding: var(--pf-v5-c-panel__footer--PaddingTop) var(--pf-v5-c-panel__footer--PaddingRight) var(--pf-v5-c-panel__footer--PaddingBottom) var(--pf-v5-c-panel__footer--PaddingLeft);
+  box-shadow: var(--pf-v5-c-panel__footer--BoxShadow);
+}
+
+:where(.pf-v5-theme-dark) .pf-v5-c-panel {
+  --pf-v5-c-panel--m-raised--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
 }

package/css/components/Panel/panel.d.ts

@@ -5,10 +5,11 @@ declare const _default: {
     "raised": "pf-m-raised",
     "scrollable": "pf-m-scrollable"
   },
-  "panel": "pf-c-panel",
-  "panelFooter": "pf-c-panel__footer",
-  "panelHeader": "pf-c-panel__header",
-  "panelMain": "pf-c-panel__main",
-  "panelMainBody": "pf-c-panel__main-body"
+  "panel": "pf-v5-c-panel",
+  "panelFooter": "pf-v5-c-panel__footer",
+  "panelHeader": "pf-v5-c-panel__header",
+  "panelMain": "pf-v5-c-panel__main",
+  "panelMainBody": "pf-v5-c-panel__main-body",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Panel/panel.js

@@ -7,9 +7,10 @@ exports.default = {
     "raised": "pf-m-raised",
     "scrollable": "pf-m-scrollable"
   },
-  "panel": "pf-c-panel",
-  "panelFooter": "pf-c-panel__footer",
-  "panelHeader": "pf-c-panel__header",
-  "panelMain": "pf-c-panel__main",
-  "panelMainBody": "pf-c-panel__main-body"
+  "panel": "pf-v5-c-panel",
+  "panelFooter": "pf-v5-c-panel__footer",
+  "panelHeader": "pf-v5-c-panel__header",
+  "panelMain": "pf-v5-c-panel__main",
+  "panelMainBody": "pf-v5-c-panel__main-body",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Panel/panel.mjs

@@ -5,9 +5,10 @@ export default {
     "raised": "pf-m-raised",
     "scrollable": "pf-m-scrollable"
   },
-  "panel": "pf-c-panel",
-  "panelFooter": "pf-c-panel__footer",
-  "panelHeader": "pf-c-panel__header",
-  "panelMain": "pf-c-panel__main",
-  "panelMainBody": "pf-c-panel__main-body"
+  "panel": "pf-v5-c-panel",
+  "panelFooter": "pf-v5-c-panel__footer",
+  "panelHeader": "pf-v5-c-panel__header",
+  "panelMain": "pf-v5-c-panel__main",
+  "panelMainBody": "pf-v5-c-panel__main-body",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Popover/popover.css

@@ -1,179 +1,179 @@
-.pf-c-popover {
-  --pf-c-popover--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-popover--MinWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-c-popover--MaxWidth: calc(var(--pf-c-popover__content--PaddingLeft) + var(--pf-c-popover__content--PaddingRight) + 18.75rem);
-  --pf-c-popover--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-popover--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
-  --pf-c-popover--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
-  --pf-c-popover--m-success__title-icon--Color: var(--pf-global--success-color--100);
-  --pf-c-popover--m-info__title-icon--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-custom__title-icon--Color: var(--pf-global--custom-color--200);
-  --pf-c-popover--m-danger__title-text--Color: var(--pf-global--danger-color--200);
-  --pf-c-popover--m-warning__title-text--Color: var(--pf-global--warning-color--200);
-  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--200);
-  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--200);
-  --pf-c-popover--m-custom__title-text--Color: var(--pf-global--custom-color--300);
-  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-popover__content--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-popover__content--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-popover__content--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-popover__content--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-popover__arrow--Width: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--Height: var(--pf-global--arrow--width-lg);
-  --pf-c-popover__arrow--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-popover__arrow--m-top--TranslateX: -50%;
-  --pf-c-popover__arrow--m-top--TranslateY: 50%;
-  --pf-c-popover__arrow--m-top--Rotate: 45deg;
-  --pf-c-popover__arrow--m-right--TranslateX: -50%;
-  --pf-c-popover__arrow--m-right--TranslateY: -50%;
-  --pf-c-popover__arrow--m-right--Rotate: 45deg;
-  --pf-c-popover__arrow--m-bottom--TranslateX: -50%;
-  --pf-c-popover__arrow--m-bottom--TranslateY: -50%;
-  --pf-c-popover__arrow--m-bottom--Rotate: 45deg;
-  --pf-c-popover__arrow--m-left--TranslateX: 50%;
-  --pf-c-popover__arrow--m-left--TranslateY: -50%;
-  --pf-c-popover__arrow--m-left--Rotate: 45deg;
-  --pf-c-popover__close--Top: calc(var(--pf-c-popover__content--PaddingTop) - var(--pf-global--spacer--form-element));
-  --pf-c-popover__close--Right: calc(var(--pf-c-popover__content--PaddingRight) - var(--pf-global--spacer--md));
-  --pf-c-popover__close--sibling--PaddingRight: var(--pf-global--spacer--2xl);
-  --pf-c-popover__header--MarginBottom: var(--pf-global--spacer--sm);
-  --pf-c-popover__title-text--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-popover__title-text--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-popover__title-text--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-popover__title-icon--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-popover__title-icon--Color: var(--pf-global--Color--100);
-  --pf-c-popover__title-icon--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-popover__footer--MarginTop: var(--pf-global--spacer--md);
+.pf-v5-c-popover {
+  --pf-v5-c-popover--FontSize: var(--pf-v5-global--FontSize--sm);
+  --pf-v5-c-popover--MinWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
+  --pf-v5-c-popover--MaxWidth: calc(var(--pf-v5-c-popover__content--PaddingLeft) + var(--pf-v5-c-popover__content--PaddingRight) + 18.75rem);
+  --pf-v5-c-popover--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
+  --pf-v5-c-popover--m-danger__title-icon--Color: var(--pf-v5-global--danger-color--100);
+  --pf-v5-c-popover--m-warning__title-icon--Color: var(--pf-v5-global--warning-color--100);
+  --pf-v5-c-popover--m-success__title-icon--Color: var(--pf-v5-global--success-color--100);
+  --pf-v5-c-popover--m-info__title-icon--Color: var(--pf-v5-global--info-color--100);
+  --pf-v5-c-popover--m-custom__title-icon--Color: var(--pf-v5-global--custom-color--200);
+  --pf-v5-c-popover--m-danger__title-text--Color: var(--pf-v5-global--danger-color--200);
+  --pf-v5-c-popover--m-warning__title-text--Color: var(--pf-v5-global--warning-color--200);
+  --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--200);
+  --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--200);
+  --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--300);
+  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-popover__content--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-popover__content--PaddingRight: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-popover__content--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-popover__content--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-popover__arrow--Width: var(--pf-v5-global--arrow--width-lg);
+  --pf-v5-c-popover__arrow--Height: var(--pf-v5-global--arrow--width-lg);
+  --pf-v5-c-popover__arrow--BoxShadow: var(--pf-v5-global--BoxShadow--lg);
+  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-popover__arrow--m-top--TranslateX: -50%;
+  --pf-v5-c-popover__arrow--m-top--TranslateY: 50%;
+  --pf-v5-c-popover__arrow--m-top--Rotate: 45deg;
+  --pf-v5-c-popover__arrow--m-right--TranslateX: -50%;
+  --pf-v5-c-popover__arrow--m-right--TranslateY: -50%;
+  --pf-v5-c-popover__arrow--m-right--Rotate: 45deg;
+  --pf-v5-c-popover__arrow--m-bottom--TranslateX: -50%;
+  --pf-v5-c-popover__arrow--m-bottom--TranslateY: -50%;
+  --pf-v5-c-popover__arrow--m-bottom--Rotate: 45deg;
+  --pf-v5-c-popover__arrow--m-left--TranslateX: 50%;
+  --pf-v5-c-popover__arrow--m-left--TranslateY: -50%;
+  --pf-v5-c-popover__arrow--m-left--Rotate: 45deg;
+  --pf-v5-c-popover__close--Top: calc(var(--pf-v5-c-popover__content--PaddingTop) - var(--pf-v5-global--spacer--form-element));
+  --pf-v5-c-popover__close--Right: calc(var(--pf-v5-c-popover__content--PaddingRight) - var(--pf-v5-global--spacer--md));
+  --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
+  --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
+  --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
+  --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-popover__title-icon--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-popover__footer--MarginTop: var(--pf-v5-global--spacer--md);
   position: relative;
-  min-width: var(--pf-c-popover--MinWidth);
-  max-width: var(--pf-c-popover--MaxWidth);
-  font-size: var(--pf-c-popover--FontSize);
-  box-shadow: var(--pf-c-popover--BoxShadow);
-}
-.pf-c-popover.pf-m-no-padding {
-  --pf-c-popover__content--PaddingTop: 0px;
-  --pf-c-popover__content--PaddingRight: 0px;
-  --pf-c-popover__content--PaddingBottom: 0px;
-  --pf-c-popover__content--PaddingLeft: 0px;
-}
-.pf-c-popover.pf-m-width-auto {
-  --pf-c-popover--MinWidth: auto;
-  --pf-c-popover--MaxWidth: none;
-}
-.pf-c-popover.pf-m-top .pf-c-popover__arrow, .pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-top-right .pf-c-popover__arrow {
+  min-width: var(--pf-v5-c-popover--MinWidth);
+  max-width: var(--pf-v5-c-popover--MaxWidth);
+  font-size: var(--pf-v5-c-popover--FontSize);
+  box-shadow: var(--pf-v5-c-popover--BoxShadow);
+}
+.pf-v5-c-popover.pf-m-no-padding {
+  --pf-v5-c-popover__content--PaddingTop: 0px;
+  --pf-v5-c-popover__content--PaddingRight: 0px;
+  --pf-v5-c-popover__content--PaddingBottom: 0px;
+  --pf-v5-c-popover__content--PaddingLeft: 0px;
+}
+.pf-v5-c-popover.pf-m-width-auto {
+  --pf-v5-c-popover--MinWidth: auto;
+  --pf-v5-c-popover--MaxWidth: none;
+}
+.pf-v5-c-popover.pf-m-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow {
   bottom: 0;
   left: 50%;
-  transform: translateX(var(--pf-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-c-popover__arrow--m-top--Rotate));
+  transform: translateX(var(--pf-v5-c-popover__arrow--m-top--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-top--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-top--Rotate));
 }
-.pf-c-popover.pf-m-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
+.pf-v5-c-popover.pf-m-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
   top: 0;
   left: 50%;
-  transform: translateX(var(--pf-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-c-popover__arrow--m-bottom--Rotate));
+  transform: translateX(var(--pf-v5-c-popover__arrow--m-bottom--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-bottom--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-bottom--Rotate));
 }
-.pf-c-popover.pf-m-left .pf-c-popover__arrow, .pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow {
+.pf-v5-c-popover.pf-m-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow {
   top: 50%;
   right: 0;
-  transform: translateX(var(--pf-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-c-popover__arrow--m-left--Rotate));
+  transform: translateX(var(--pf-v5-c-popover__arrow--m-left--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-left--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-left--Rotate));
 }
-.pf-c-popover.pf-m-right .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
+.pf-v5-c-popover.pf-m-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
   top: 50%;
   left: 0;
-  transform: translateX(var(--pf-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-c-popover__arrow--m-right--Rotate));
+  transform: translateX(var(--pf-v5-c-popover__arrow--m-right--TranslateX)) translateY(var(--pf-v5-c-popover__arrow--m-right--TranslateY)) rotate(var(--pf-v5-c-popover__arrow--m-right--Rotate));
 }
-.pf-c-popover.pf-m-left-top .pf-c-popover__arrow, .pf-c-popover.pf-m-right-top .pf-c-popover__arrow {
-  top: var(--pf-c-popover__arrow--Height);
+.pf-v5-c-popover.pf-m-left-top .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-top .pf-v5-c-popover__arrow {
+  top: var(--pf-v5-c-popover__arrow--Height);
 }
-.pf-c-popover.pf-m-left-bottom .pf-c-popover__arrow, .pf-c-popover.pf-m-right-bottom .pf-c-popover__arrow {
+.pf-v5-c-popover.pf-m-left-bottom .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-right-bottom .pf-v5-c-popover__arrow {
   top: auto;
   bottom: 0;
 }
-.pf-c-popover.pf-m-top-left .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-left .pf-c-popover__arrow {
-  left: var(--pf-c-popover__arrow--Width);
+.pf-v5-c-popover.pf-m-top-left .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-left .pf-v5-c-popover__arrow {
+  left: var(--pf-v5-c-popover__arrow--Width);
 }
-.pf-c-popover.pf-m-top-right .pf-c-popover__arrow, .pf-c-popover.pf-m-bottom-right .pf-c-popover__arrow {
+.pf-v5-c-popover.pf-m-top-right .pf-v5-c-popover__arrow, .pf-v5-c-popover.pf-m-bottom-right .pf-v5-c-popover__arrow {
   right: 0;
   left: auto;
 }
-.pf-c-popover.pf-m-danger {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-danger__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-danger__title-text--Color);
+.pf-v5-c-popover.pf-m-danger {
+  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-danger__title-icon--Color);
+  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-danger__title-text--Color);
 }
-.pf-c-popover.pf-m-warning {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-warning__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-warning__title-text--Color);
+.pf-v5-c-popover.pf-m-warning {
+  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-warning__title-icon--Color);
+  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-warning__title-text--Color);
 }
-.pf-c-popover.pf-m-success {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-success__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-success__title-text--Color);
+.pf-v5-c-popover.pf-m-success {
+  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-success__title-icon--Color);
+  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-success__title-text--Color);
 }
-.pf-c-popover.pf-m-custom {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-custom__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-custom__title-text--Color);
+.pf-v5-c-popover.pf-m-custom {
+  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-custom__title-icon--Color);
+  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-custom__title-text--Color);
 }
-.pf-c-popover.pf-m-info {
-  --pf-c-popover__title-icon--Color: var(--pf-c-popover--m-info__title-icon--Color);
-  --pf-c-popover__title-text--Color: var(--pf-c-popover--m-info__title-text--Color);
+.pf-v5-c-popover.pf-m-info {
+  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-c-popover--m-info__title-icon--Color);
+  --pf-v5-c-popover__title-text--Color: var(--pf-v5-c-popover--m-info__title-text--Color);
 }
 
-.pf-c-popover__content {
+.pf-v5-c-popover__content {
   position: relative;
-  padding: var(--pf-c-popover__content--PaddingTop) var(--pf-c-popover__content--PaddingRight) var(--pf-c-popover__content--PaddingBottom) var(--pf-c-popover__content--PaddingLeft);
-  background-color: var(--pf-c-popover__content--BackgroundColor);
+  padding: var(--pf-v5-c-popover__content--PaddingTop) var(--pf-v5-c-popover__content--PaddingRight) var(--pf-v5-c-popover__content--PaddingBottom) var(--pf-v5-c-popover__content--PaddingLeft);
+  background-color: var(--pf-v5-c-popover__content--BackgroundColor);
 }
 
-.pf-c-popover__close {
+.pf-v5-c-popover__close {
   position: absolute;
-  top: var(--pf-c-popover__close--Top);
-  right: var(--pf-c-popover__close--Right);
+  top: var(--pf-v5-c-popover__close--Top);
+  right: var(--pf-v5-c-popover__close--Right);
 }
-.pf-c-popover__close + * {
-  padding-right: var(--pf-c-popover__close--sibling--PaddingRight);
+.pf-v5-c-popover__close + * {
+  padding-right: var(--pf-v5-c-popover__close--sibling--PaddingRight);
 }
 
-.pf-c-popover__arrow {
+.pf-v5-c-popover__arrow {
   position: absolute;
-  width: var(--pf-c-popover__arrow--Width);
-  height: var(--pf-c-popover__arrow--Height);
+  width: var(--pf-v5-c-popover__arrow--Width);
+  height: var(--pf-v5-c-popover__arrow--Height);
   pointer-events: none;
-  background-color: var(--pf-c-popover__arrow--BackgroundColor);
-  box-shadow: var(--pf-c-popover__arrow--BoxShadow);
+  background-color: var(--pf-v5-c-popover__arrow--BackgroundColor);
+  box-shadow: var(--pf-v5-c-popover__arrow--BoxShadow);
 }
 
-.pf-c-popover__header {
-  margin-bottom: var(--pf-c-popover__header--MarginBottom);
+.pf-v5-c-popover__header {
+  margin-bottom: var(--pf-v5-c-popover__header--MarginBottom);
 }
 
-.pf-c-popover__title {
+.pf-v5-c-popover__title {
   display: flex;
   flex: 0 0 auto;
 }
 
-.pf-c-popover__title-icon {
-  margin-right: var(--pf-c-popover__title-icon--MarginRight);
-  font-size: var(--pf-c-popover__title-icon--FontSize);
-  color: var(--pf-c-popover__title-icon--Color);
+.pf-v5-c-popover__title-icon {
+  margin-right: var(--pf-v5-c-popover__title-icon--MarginRight);
+  font-size: var(--pf-v5-c-popover__title-icon--FontSize);
+  color: var(--pf-v5-c-popover__title-icon--Color);
 }
 
-.pf-c-popover__title-text {
-  font-family: var(--pf-c-popover__title-text--FontFamily);
-  font-size: var(--pf-c-popover__title-text--FontSize);
-  line-height: var(--pf-c-popover__title-text--LineHeight);
-  color: var(--pf-c-popover__title-text--Color, inherit);
+.pf-v5-c-popover__title-text {
+  font-family: var(--pf-v5-c-popover__title-text--FontFamily);
+  font-size: var(--pf-v5-c-popover__title-text--FontSize);
+  line-height: var(--pf-v5-c-popover__title-text--LineHeight);
+  color: var(--pf-v5-c-popover__title-text--Color, inherit);
 }
 
-.pf-c-popover__body {
+.pf-v5-c-popover__body {
   word-wrap: break-word;
 }
 
-.pf-c-popover__footer {
-  margin-top: var(--pf-c-popover__footer--MarginTop);
+.pf-v5-c-popover__footer {
+  margin-top: var(--pf-v5-c-popover__footer--MarginTop);
 }
 
-:where(.pf-theme-dark) .pf-c-popover {
-  --pf-c-popover__content--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-popover__arrow--BackgroundColor: var(--pf-global--BackgroundColor--300);
-  --pf-c-popover--m-default__title-text--Color: var(--pf-global--custom-color--200);
-  --pf-c-popover--m-info__title-text--Color: var(--pf-global--info-color--100);
-  --pf-c-popover--m-success__title-text--Color: var(--pf-global--success-color--100);
+:where(.pf-v5-theme-dark) .pf-v5-c-popover {
+  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
+  --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
+  --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
+  --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
 }

package/css/components/Popover/popover.d.ts

@@ -21,16 +21,16 @@ declare const _default: {
     "custom": "pf-m-custom",
     "info": "pf-m-info"
   },
-  "popover": "pf-c-popover",
-  "popoverArrow": "pf-c-popover__arrow",
-  "popoverBody": "pf-c-popover__body",
-  "popoverClose": "pf-c-popover__close",
-  "popoverContent": "pf-c-popover__content",
-  "popoverFooter": "pf-c-popover__footer",
-  "popoverHeader": "pf-c-popover__header",
-  "popoverTitle": "pf-c-popover__title",
-  "popoverTitleIcon": "pf-c-popover__title-icon",
-  "popoverTitleText": "pf-c-popover__title-text",
-  "themeDark": "pf-theme-dark"
+  "popover": "pf-v5-c-popover",
+  "popoverArrow": "pf-v5-c-popover__arrow",
+  "popoverBody": "pf-v5-c-popover__body",
+  "popoverClose": "pf-v5-c-popover__close",
+  "popoverContent": "pf-v5-c-popover__content",
+  "popoverFooter": "pf-v5-c-popover__footer",
+  "popoverHeader": "pf-v5-c-popover__header",
+  "popoverTitle": "pf-v5-c-popover__title",
+  "popoverTitleIcon": "pf-v5-c-popover__title-icon",
+  "popoverTitleText": "pf-v5-c-popover__title-text",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;