@patternfly/react-styles 5.1.0 → 5.1.1-prerelease.2

package/CHANGELOG.md

@@ -3,11 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# 5.1.0 (2023-07-27)
+## 5.1.1-prerelease.2 (2023-08-31)
 
 **Note:** Version bump only for package @patternfly/react-styles
 
-# 5.1.0-prerelease.0 (2023-07-27)
+## 5.1.1-prerelease.1 (2023-08-29)
+
+# 5.0.0 (2023-07-27)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [5.1.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@5.0.0...@patternfly/react-styles@5.1.0-prerelease.0) (2023-07-27)
 
 **Note:** Version bump only for package @patternfly/react-styles
 

package/css/components/AboutModalBox/about-modal-box.css

@@ -14,6 +14,7 @@
 }
 
 .pf-v5-c-about-modal-box {
+  --pf-v5-c-about-modal-box--BackgroundImage: none;
   --pf-v5-c-about-modal-box--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box--BackgroundSize--min-width: 200px;
@@ -72,7 +73,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   background-color: var(--pf-v5-c-about-modal-box--BackgroundColor);
-  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage, none);
+  background-image: var(--pf-v5-c-about-modal-box--BackgroundImage);
   background-repeat: no-repeat;
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
@@ -131,7 +132,10 @@
 .pf-v5-c-about-modal-box__brand {
   display: flex;
   grid-area: brand;
-  padding: var(--pf-v5-c-about-modal-box__brand--PaddingTop) var(--pf-v5-c-about-modal-box__brand--PaddingRight) var(--pf-v5-c-about-modal-box__brand--PaddingBottom) var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-about-modal-box__brand--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__brand--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-about-modal-box__brand--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__brand--PaddingRight);
 }
 
 .pf-v5-c-about-modal-box__brand-image {
@@ -142,14 +146,14 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-right: var(--pf-v5-c-about-modal-box__header--PaddingRight);
-  padding-bottom: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
-  padding-left: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
+  padding-block-end: var(--pf-v5-c-about-modal-box__header--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-about-modal-box__header--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__header--PaddingRight);
 }
 
 .pf-v5-c-about-modal-box__strapline {
-  padding-top: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
-  margin-top: auto;
+  padding-block-start: var(--pf-v5-c-about-modal-box__strapline--PaddingTop);
+  margin-block-start: auto;
   font-size: var(--pf-v5-c-about-modal-box__strapline--FontSize);
 }
 
@@ -157,12 +161,15 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin: var(--pf-v5-c-about-modal-box__content--MarginTop) var(--pf-v5-c-about-modal-box__content--MarginRight) var(--pf-v5-c-about-modal-box__content--MarginBottom) var(--pf-v5-c-about-modal-box__content--MarginLeft);
+  margin-block-start: var(--pf-v5-c-about-modal-box__content--MarginTop);
+  margin-block-end: var(--pf-v5-c-about-modal-box__content--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-about-modal-box__content--MarginLeft);
+  margin-inline-end: var(--pf-v5-c-about-modal-box__content--MarginRight);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
   word-break: break-word;
+  -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box__content {
@@ -173,14 +180,14 @@
 
 .pf-v5-c-about-modal-box__close {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   display: flex;
   grid-area: close;
   align-items: flex-start;
   justify-content: flex-end;
-  padding-top: var(--pf-v5-c-about-modal-box__close--PaddingTop);
-  padding-right: var(--pf-v5-c-about-modal-box__close--PaddingRight);
-  padding-bottom: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-about-modal-box__close--PaddingTop);
+  padding-block-end: var(--pf-v5-c-about-modal-box__close--PaddingBottom);
+  padding-inline-end: var(--pf-v5-c-about-modal-box__close--PaddingRight);
 }
 @media only screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box__close {

package/css/components/Accordion/accordion.css

@@ -105,30 +105,34 @@
 }
 .pf-v5-c-accordion.pf-m-bordered {
   --pf-v5-c-accordion__toggle--after--Top: var(--pf-v5-c-accordion--m-bordered__toggle--after--Top);
-  border-top: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
+  border-block-start: var(--pf-v5-c-accordion--m-bordered--BorderTopWidth) solid var(--pf-v5-c-accordion--m-bordered--BorderTopColor);
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   content: "";
-  border: solid var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
-  border-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth) 0 var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border-color: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderColor);
+  border-style: solid;
+  border-block-start-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderTopWidth);
+  border-block-end-width: var(--pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth);
+  border-inline-start-width: 0;
+  border-inline-end-width: 0;
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__toggle.pf-m-expanded {
   --pf-v5-c-accordion--m-bordered__toggle--before--BorderBottomWidth: 0;
 }
 .pf-v5-c-accordion.pf-m-bordered .pf-v5-c-accordion__expandable-content.pf-m-expanded .pf-v5-c-accordion__expandable-content-body:last-child::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
   pointer-events: none;
   content: "";
-  border-bottom: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+  border-block-end: var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--pf-v5-c-accordion--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
 }
 
 .pf-v5-c-accordion__toggle {
@@ -137,7 +141,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--pf-v5-c-accordion__toggle--PaddingTop) var(--pf-v5-c-accordion__toggle--PaddingRight) var(--pf-v5-c-accordion__toggle--PaddingBottom) var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-accordion__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-accordion__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-accordion__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-accordion__toggle--PaddingRight);
   font-family: var(--pf-v5-c-accordion__toggle--FontFamily, inherit);
   font-size: var(--pf-v5-c-accordion__toggle--FontSize, inherit);
   background-color: var(--pf-v5-c-accordion__toggle--BackgroundColor);
@@ -145,9 +152,9 @@
 }
 .pf-v5-c-accordion__toggle::after {
   position: absolute;
-  top: var(--pf-v5-c-accordion__toggle--after--Top);
-  bottom: 0;
-  left: 0;
+  inset-block-start: var(--pf-v5-c-accordion__toggle--after--Top);
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-accordion__toggle--after--Width);
   content: "";
   background-color: var(--pf-v5-c-accordion__toggle--after--BackgroundColor);
@@ -193,6 +200,9 @@
 .pf-v5-c-accordion__toggle-icon {
   transition: var(--pf-v5-c-accordion__toggle-icon--Transition);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-accordion__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-accordion__expandable-content {
   font-size: var(--pf-v5-c-accordion__expandable-content--FontSize);
@@ -208,13 +218,16 @@
 
 .pf-v5-c-accordion__expandable-content-body {
   position: relative;
-  padding: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop) var(--pf-v5-c-accordion__expandable-content-body--PaddingRight) var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom) var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingTop);
+  padding-block-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-accordion__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-accordion__expandable-content-body--PaddingRight);
 }
 .pf-v5-c-accordion__expandable-content-body::after {
   position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   width: var(--pf-v5-c-accordion__expandable-content-body--after--Width);
   content: "";
   background-color: var(--pf-v5-c-accordion__expandable-content-body--after--BackgroundColor);

package/css/components/Accordion/accordion.d.ts

@@ -6,12 +6,14 @@ declare const _default: {
   "accordionToggle": "pf-v5-c-accordion__toggle",
   "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
   "accordionToggleText": "pf-v5-c-accordion__toggle-text",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Accordion/accordion.js

@@ -8,11 +8,13 @@ exports.default = {
   "accordionToggle": "pf-v5-c-accordion__toggle",
   "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
   "accordionToggleText": "pf-v5-c-accordion__toggle-text",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Accordion/accordion.mjs

@@ -6,11 +6,13 @@ export default {
   "accordionToggle": "pf-v5-c-accordion__toggle",
   "accordionToggleIcon": "pf-v5-c-accordion__toggle-icon",
   "accordionToggleText": "pf-v5-c-accordion__toggle-text",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "displayLg": "pf-m-display-lg",
     "bordered": "pf-m-bordered",
     "expanded": "pf-m-expanded",
     "fixed": "pf-m-fixed"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/ActionList/action-list.css

@@ -13,13 +13,13 @@
 }
 .pf-v5-c-action-list > * + *,
 .pf-v5-c-action-list__group > * + * {
-  margin-left: var(--pf-v5-c-action-list--child--spacer);
+  margin-inline-start: var(--pf-v5-c-action-list--child--spacer);
 }
 .pf-v5-c-action-list > * + .pf-v5-c-action-list__group,
 .pf-v5-c-action-list .pf-v5-c-action-list__group + *,
 .pf-v5-c-action-list__group > * + .pf-v5-c-action-list__group,
 .pf-v5-c-action-list__group .pf-v5-c-action-list__group + * {
-  margin-left: var(--pf-v5-c-action-list--group--spacer);
+  margin-inline-start: var(--pf-v5-c-action-list--group--spacer);
 }
 .pf-v5-c-action-list.pf-m-icons,
 .pf-v5-c-action-list__group.pf-m-icons {

package/css/components/Alert/alert-group.css

@@ -20,12 +20,12 @@
   --pf-v5-c-alert-group__overflow-button--active--BoxShadow: var(--pf-v5-global--BoxShadow--lg), var(--pf-v5-global--BoxShadow--lg-bottom);
 }
 .pf-v5-c-alert-group > * + * {
-  margin-top: var(--pf-v5-c-alert-group__item--MarginTop);
+  margin-block-start: var(--pf-v5-c-alert-group__item--MarginTop);
 }
 .pf-v5-c-alert-group.pf-m-toast {
   position: fixed;
-  top: var(--pf-v5-c-alert-group--m-toast--Top);
-  right: var(--pf-v5-c-alert-group--m-toast--Right);
+  inset-block-start: var(--pf-v5-c-alert-group--m-toast--Top);
+  inset-inline-end: var(--pf-v5-c-alert-group--m-toast--Right);
   z-index: var(--pf-v5-c-alert-group--m-toast--ZIndex);
   width: calc(100% - var(--pf-v5-c-alert-group--m-toast--Right) * 2);
   max-width: var(--pf-v5-c-alert-group--m-toast--MaxWidth);
@@ -34,7 +34,10 @@
 .pf-v5-c-alert-group__overflow-button {
   position: relative;
   width: 100%;
-  padding: var(--pf-v5-c-alert-group__overflow-button--PaddingTop) var(--pf-v5-c-alert-group__overflow-button--PaddingRight) var(--pf-v5-c-alert-group__overflow-button--PaddingBottom) var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-alert-group__overflow-button--PaddingTop);
+  padding-block-end: var(--pf-v5-c-alert-group__overflow-button--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-alert-group__overflow-button--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-alert-group__overflow-button--PaddingRight);
   color: var(--pf-v5-c-alert-group__overflow-button--Color);
   background-color: var(--pf-v5-c-alert-group__overflow-button--BackgroundColor);
   border-width: var(--pf-v5-c-alert-group__overflow-button--BorderWidth);

package/css/components/Alert/alert.css

@@ -87,10 +87,13 @@
   display: grid;
   grid-template-areas: var(--pf-v5-c-alert--GridTemplateAreas);
   grid-template-columns: var(--pf-v5-c-alert--GridTemplateColumns);
-  padding: var(--pf-v5-c-alert--PaddingTop) var(--pf-v5-c-alert--PaddingRight) var(--pf-v5-c-alert--PaddingBottom) var(--pf-v5-c-alert--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-alert--PaddingTop);
+  padding-block-end: var(--pf-v5-c-alert--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-alert--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-alert--PaddingRight);
   font-size: var(--pf-v5-c-alert__FontSize);
   background-color: var(--pf-v5-c-alert--BackgroundColor);
-  border-top: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
+  border-block-start: var(--pf-v5-c-alert--BorderTopWidth) solid var(--pf-v5-c-alert--BorderTopColor);
   box-shadow: var(--pf-v5-c-alert--BoxShadow);
 }
 .pf-v5-c-alert.pf-m-custom {
@@ -146,9 +149,9 @@
 }
 
 .pf-v5-c-alert__toggle {
-  margin-top: var(--pf-v5-c-alert__toggle--MarginTop);
-  margin-bottom: var(--pf-v5-c-alert__toggle--MarginBottom);
-  margin-left: var(--pf-v5-c-alert__toggle--MarginLeft);
+  margin-block-start: var(--pf-v5-c-alert__toggle--MarginTop);
+  margin-block-end: var(--pf-v5-c-alert__toggle--MarginBottom);
+  margin-inline-start: var(--pf-v5-c-alert__toggle--MarginLeft);
 }
 
 .pf-v5-c-alert__toggle-icon {
@@ -156,12 +159,15 @@
   transition: var(--pf-v5-c-alert__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-alert__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-alert__toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-alert__icon {
   display: flex;
   grid-area: icon;
-  margin-top: var(--pf-v5-c-alert__icon--MarginTop);
-  margin-right: var(--pf-v5-c-alert__icon--MarginRight);
+  margin-block-start: var(--pf-v5-c-alert__icon--MarginTop);
+  margin-inline-end: var(--pf-v5-c-alert__icon--MarginRight);
   font-size: var(--pf-v5-c-alert__icon--FontSize);
   color: var(--pf-v5-c-alert__icon--Color);
 }
@@ -181,7 +187,7 @@
 
 .pf-v5-c-alert__description {
   grid-area: description;
-  padding-top: var(--pf-v5-c-alert__description--PaddingTop);
+  padding-block-start: var(--pf-v5-c-alert__description--PaddingTop);
   word-break: break-word;
 }
 .pf-v5-c-alert__description + .pf-v5-c-alert__action-group {
@@ -190,9 +196,9 @@
 
 .pf-v5-c-alert__action {
   grid-area: action;
-  margin-top: var(--pf-v5-c-alert__action--MarginTop);
-  margin-right: var(--pf-v5-c-alert__action--MarginRight);
-  margin-bottom: var(--pf-v5-c-alert__action--MarginBottom);
+  margin-block-start: var(--pf-v5-c-alert__action--MarginTop);
+  margin-block-end: var(--pf-v5-c-alert__action--MarginBottom);
+  margin-inline-end: var(--pf-v5-c-alert__action--MarginRight);
   transform: translateY(var(--pf-v5-c-alert__action--TranslateY));
 }
 .pf-v5-c-alert__action > .pf-v5-c-button {
@@ -201,13 +207,13 @@
 
 .pf-v5-c-alert__action-group {
   grid-area: actiongroup;
-  padding-top: var(--pf-v5-c-alert__action-group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-alert__action-group--PaddingTop);
 }
 .pf-v5-c-alert__action-group > .pf-v5-c-button {
   --pf-v5-c-button--m-link--m-inline--hover--TextDecoration: none;
 }
 .pf-v5-c-alert__action-group > .pf-v5-c-button:not(:last-child) {
-  margin-right: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
+  margin-inline-end: var(--pf-v5-c-alert__action-group__c-button--not-last-child--MarginRight);
 }
 
 :where(.pf-v5-theme-dark) .pf-v5-c-alert {

package/css/components/Alert/alert.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
   "alertToggle": "pf-v5-c-alert__toggle",
   "alertToggleIcon": "pf-v5-c-alert__toggle-icon",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "custom": "pf-m-custom",
     "success": "pf-m-success",
@@ -21,6 +22,7 @@ declare const _default: {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Alert/alert.js

@@ -11,6 +11,7 @@ exports.default = {
   "alertToggle": "pf-v5-c-alert__toggle",
   "alertToggleIcon": "pf-v5-c-alert__toggle-icon",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "custom": "pf-m-custom",
     "success": "pf-m-success",
@@ -23,5 +24,6 @@ exports.default = {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Alert/alert.mjs

@@ -9,6 +9,7 @@ export default {
   "alertToggle": "pf-v5-c-alert__toggle",
   "alertToggleIcon": "pf-v5-c-alert__toggle-icon",
   "button": "pf-v5-c-button",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "custom": "pf-m-custom",
     "success": "pf-m-success",
@@ -21,5 +22,6 @@ export default {
     "expanded": "pf-m-expanded",
     "truncate": "pf-m-truncate"
   },
-  "themeDark": "pf-v5-theme-dark"
+  "themeDark": "pf-v5-theme-dark",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/AppLauncher/app-launcher.css

@@ -70,15 +70,18 @@
   color: var(--pf-v5-c-app-launcher__toggle--m-expanded--Color);
 }
 .pf-v5-c-app-launcher .pf-v5-c-divider {
-  margin-top: var(--pf-v5-c-app-launcher--c-divider--MarginTop);
-  margin-bottom: var(--pf-v5-c-app-launcher--c-divider--MarginBottom);
+  margin-block-start: var(--pf-v5-c-app-launcher--c-divider--MarginTop);
+  margin-block-end: var(--pf-v5-c-app-launcher--c-divider--MarginBottom);
 }
 .pf-v5-c-app-launcher .pf-v5-c-divider:last-child {
   --pf-v5-c-app-launcher--c-divider--MarginBottom: 0;
 }
 
 .pf-v5-c-app-launcher__toggle {
-  padding: var(--pf-v5-c-app-launcher__toggle--PaddingTop) var(--pf-v5-c-app-launcher__toggle--PaddingRight) var(--pf-v5-c-app-launcher__toggle--PaddingBottom) var(--pf-v5-c-app-launcher__toggle--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__toggle--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__toggle--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__toggle--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__toggle--PaddingRight);
   color: var(--pf-v5-c-app-launcher__toggle--Color);
   background-color: var(--pf-v5-c-app-launcher__toggle--BackgroundColor);
   border: none;
@@ -99,17 +102,17 @@
 
 .pf-v5-c-app-launcher__menu {
   position: absolute;
-  top: var(--pf-v5-c-app-launcher__menu--Top);
+  inset-block-start: var(--pf-v5-c-app-launcher__menu--Top);
   z-index: var(--pf-v5-c-app-launcher__menu--ZIndex);
   min-width: 100%;
-  padding-top: var(--pf-v5-c-app-launcher__menu--PaddingTop);
-  padding-bottom: var(--pf-v5-c-app-launcher__menu--PaddingBottom);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu--PaddingBottom);
   background-color: var(--pf-v5-c-app-launcher__menu--BackgroundColor);
   background-clip: padding-box;
   box-shadow: var(--pf-v5-c-app-launcher__menu--BoxShadow);
 }
 .pf-v5-c-app-launcher__menu.pf-m-align-right {
-  right: 0;
+  inset-inline-end: 0;
 }
 .pf-v5-c-app-launcher.pf-m-top .pf-v5-c-app-launcher__menu {
   --pf-v5-c-app-launcher__menu--Top: var(--pf-v5-c-app-launcher--m-top__menu--Top);
@@ -118,18 +121,21 @@
 .pf-v5-c-app-launcher__menu.pf-m-static {
   --pf-v5-c-app-launcher--m-top__menu--TranslateY: 0;
   position: static;
-  top: auto;
-  right: auto;
-  bottom: auto;
-  left: auto;
+  inset-block-start: auto;
+  inset-block-end: auto;
+  inset-inline-start: auto;
+  inset-inline-end: auto;
   z-index: auto;
   min-width: min-content;
 }
 
 .pf-v5-c-app-launcher__menu-search {
-  padding: var(--pf-v5-c-app-launcher__menu-search--PaddingTop) var(--pf-v5-c-app-launcher__menu-search--PaddingRight) var(--pf-v5-c-app-launcher__menu-search--PaddingBottom) var(--pf-v5-c-app-launcher__menu-search--PaddingLeft);
-  margin-bottom: var(--pf-v5-c-app-launcher__menu-search--MarginBottom);
-  border-bottom: var(--pf-v5-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-v5-c-app-launcher__menu-search--BottomBorderColor);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu-search--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu-search--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-search--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__menu-search--PaddingRight);
+  margin-block-end: var(--pf-v5-c-app-launcher__menu-search--MarginBottom);
+  border-block-end: var(--pf-v5-c-app-launcher__menu-search--BottomBorderWidth) solid var(--pf-v5-c-app-launcher__menu-search--BottomBorderColor);
 }
 
 .pf-v5-c-app-launcher__menu-wrapper {
@@ -144,7 +150,10 @@
   display: flex;
   align-items: center;
   width: var(--pf-v5-c-app-launcher__menu-item--Width);
-  padding: var(--pf-v5-c-app-launcher__menu-item--PaddingTop) var(--pf-v5-c-app-launcher__menu-item--PaddingRight) var(--pf-v5-c-app-launcher__menu-item--PaddingBottom) var(--pf-v5-c-app-launcher__menu-item--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__menu-item--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__menu-item--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-item--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__menu-item--PaddingRight);
   font-weight: var(--pf-v5-c-app-launcher__menu-item--FontWeight);
   color: var(--pf-v5-c-app-launcher__menu-item--Color);
   white-space: nowrap;
@@ -194,7 +203,7 @@
   justify-content: center;
   width: var(--pf-v5-c-app-launcher__menu-item-icon--Width);
   height: var(--pf-v5-c-app-launcher__menu-item-icon--Height);
-  margin-right: var(--pf-v5-c-app-launcher__menu-item-icon--MarginRight);
+  margin-inline-end: var(--pf-v5-c-app-launcher__menu-item-icon--MarginRight);
 }
 .pf-v5-c-app-launcher__menu-item-icon > * {
   max-width: 100%;
@@ -202,8 +211,8 @@
 }
 
 .pf-v5-c-app-launcher__menu-item-external-icon {
-  padding-left: var(--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft);
-  margin-left: auto;
+  padding-inline-start: var(--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft);
+  margin-inline-start: auto;
   font-size: var(--pf-v5-c-app-launcher__menu-item-external-icon--FontSize);
   color: var(--pf-v5-c-app-launcher__menu-item-external-icon--Color);
   opacity: 0;
@@ -211,14 +220,14 @@
 }
 
 .pf-v5-c-app-launcher__group + .pf-v5-c-app-launcher__group {
-  padding-top: var(--pf-v5-c-app-launcher__group--group--PaddingTop);
+  padding-block-start: var(--pf-v5-c-app-launcher__group--group--PaddingTop);
 }
 
 .pf-v5-c-app-launcher__group-title {
-  padding-top: var(--pf-v5-c-app-launcher__group-title--PaddingTop);
-  padding-right: var(--pf-v5-c-app-launcher__group-title--PaddingRight);
-  padding-bottom: var(--pf-v5-c-app-launcher__group-title--PaddingBottom);
-  padding-left: var(--pf-v5-c-app-launcher__group-title--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-app-launcher__group-title--PaddingTop);
+  padding-block-end: var(--pf-v5-c-app-launcher__group-title--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-app-launcher__group-title--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-app-launcher__group-title--PaddingRight);
   font-size: var(--pf-v5-c-app-launcher__group-title--FontSize);
   font-weight: var(--pf-v5-c-app-launcher__group-title--FontWeight);
   color: var(--pf-v5-c-app-launcher__group-title--Color);

package/css/components/BackToTop/back-to-top.css

@@ -10,8 +10,8 @@
   --pf-v5-c-back-to-top--c-button--PaddingLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-back-to-top--c-button--BoxShadow: var(--pf-v5-global--BoxShadow--lg-bottom);
   position: absolute;
-  right: var(--pf-v5-c-back-to-top--Right);
-  bottom: var(--pf-v5-c-back-to-top--Bottom);
+  inset-block-end: var(--pf-v5-c-back-to-top--Bottom);
+  inset-inline-end: var(--pf-v5-c-back-to-top--Right);
 }
 @media (min-width: 768px) {
   .pf-v5-c-back-to-top {

package/css/components/Backdrop/backdrop.css

@@ -3,8 +3,8 @@
   --pf-v5-c-backdrop--ZIndex: var(--pf-v5-global--ZIndex--lg);
   --pf-v5-c-backdrop--BackgroundColor: var(--pf-v5-global--BackgroundColor--dark-transparent-100);
   position: var(--pf-v5-c-backdrop--Position);
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v5-c-backdrop--ZIndex);
   width: 100%;
   height: 100%;

package/css/components/BackgroundImage/background-image.css

@@ -7,8 +7,8 @@
   --pf-v5-c-background-image--BackgroundSize--max-width: 600px;
   --pf-v5-c-background-image--BackgroundSize: clamp(var(--pf-v5-c-background-image--BackgroundSize--min-width), var(--pf-v5-c-background-image--BackgroundSize--width), var(--pf-v5-c-background-image--BackgroundSize--max-width));
   position: fixed;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   z-index: -1;
   width: 100%;
   height: 100%;

package/css/components/Badge/badge.css

@@ -12,8 +12,8 @@
   --pf-v5-c-badge--m-unread--Color: var(--pf-v5-global--Color--light-100);
   display: inline-block;
   min-width: var(--pf-v5-c-badge--MinWidth);
-  padding-right: var(--pf-v5-c-badge--PaddingRight);
-  padding-left: var(--pf-v5-c-badge--PaddingLeft);
+  padding-inline-start: var(--pf-v5-c-badge--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-badge--PaddingRight);
   font-size: var(--pf-v5-c-badge--FontSize);
   font-weight: var(--pf-v5-c-badge--FontWeight);
   color: var(--pf-v5-c-badge--Color);

package/css/components/Banner/banner.css

@@ -52,7 +52,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   flex-shrink: 0;
-  padding: var(--pf-v5-c-banner--PaddingTop) var(--pf-v5-c-banner--PaddingRight) var(--pf-v5-c-banner--PaddingBottom) var(--pf-v5-c-banner--PaddingLeft);
+  padding-block-start: var(--pf-v5-c-banner--PaddingTop);
+  padding-block-end: var(--pf-v5-c-banner--PaddingBottom);
+  padding-inline-start: var(--pf-v5-c-banner--PaddingLeft);
+  padding-inline-end: var(--pf-v5-c-banner--PaddingRight);
   font-size: var(--pf-v5-c-banner--FontSize);
   color: var(--pf-v5-c-banner--Color);
   white-space: nowrap;
@@ -78,7 +81,7 @@
 }
 .pf-v5-c-banner.pf-m-sticky {
   position: sticky;
-  top: 0;
+  inset-block-start: 0;
   z-index: var(--pf-v5-c-banner--m-sticky--ZIndex);
   box-shadow: var(--pf-v5-c-banner--m-sticky--BoxShadow);
 }