@patternfly/patternfly 6.0.0-alpha.7 → 6.0.0-alpha.9

package/base/patternfly-pf-icons.css

@@ -2,7 +2,7 @@
   font-family: "pf-v5-pficon";
   src: url("./assets/pficon/pf-v5-pficon.woff2") format("woff2");
 }
-.pf-v5-pficon-zone:before, .pf-v5-pficon-warning-triangle:before, .pf-v5-pficon-volume:before, .pf-v5-pficon-virtual-machine:before, .pf-v5-pficon-users:before, .pf-v5-pficon-user:before, .pf-v5-pficon-unplugged:before, .pf-v5-pficon-unlocked:before, .pf-v5-pficon-unknown:before, .pf-v5-pficon-trend-up:before, .pf-v5-pficon-trend-down:before, .pf-v5-pficon-topology:before, .pf-v5-pficon-thumb-tack:before, .pf-v5-pficon-tenant:before, .pf-v5-pficon-task:before, .pf-v5-pficon-storage-domain:before, .pf-v5-pficon-spinner2:before, .pf-v5-pficon-spinner:before, .pf-v5-pficon-services:before, .pf-v5-pficon-service:before, .pf-v5-pficon-service-catalog:before, .pf-v5-pficon-server:before, .pf-v5-pficon-server-group:before, .pf-v5-pficon-security:before, .pf-v5-pficon-screen:before, .pf-v5-pficon-save:before, .pf-v5-pficon-running:before, .pf-v5-pficon-resources-full:before, .pf-v5-pficon-resources-empty:before, .pf-v5-pficon-resources-almost-full:before, .pf-v5-pficon-resources-almost-empty:before, .pf-v5-pficon-resource-pool:before, .pf-v5-pficon-repository:before, .pf-v5-pficon-replicator:before, .pf-v5-pficon-remove2:before, .pf-v5-pficon-registry:before, .pf-v5-pficon-regions:before, .pf-v5-pficon-rebooting:before, .pf-v5-pficon-rebalance:before, .pf-v5-pficon-project:before, .pf-v5-pficon-process-automation:before, .pf-v5-pficon-private:before, .pf-v5-pficon-print:before, .pf-v5-pficon-port:before, .pf-v5-pficon-plugged:before, .pf-v5-pficon-pficon-vcenter:before, .pf-v5-pficon-pficon-template:before, .pf-v5-pficon-pficon-sort-common-desc:before, .pf-v5-pficon-pficon-sort-common-asc:before, .pf-v5-pficon-pficon-satellite:before, .pf-v5-pficon-pficon-network-range:before, .pf-v5-pficon-pficon-history:before, .pf-v5-pficon-pficon-dragdrop:before, .pf-v5-pficon-pending:before, .pf-v5-pficon-paused:before, .pf-v5-pficon-panel-open:before, .pf-v5-pficon-panel-close:before, .pf-v5-pficon-package:before, .pf-v5-pficon-os-image:before, .pf-v5-pficon-orders:before, .pf-v5-pficon-optimize:before, .pf-v5-pficon-openstack:before, .pf-v5-pficon-openshift:before, .pf-v5-pficon-open-drawer-right:before, .pf-v5-pficon-on:before, .pf-v5-pficon-on-running:before, .pf-v5-pficon-ok:before, .pf-v5-pficon-off:before, .pf-v5-pficon-not-started:before, .pf-v5-pficon-new-process:before, .pf-v5-pficon-network:before, .pf-v5-pficon-namespaces:before, .pf-v5-pficon-multicluster:before, .pf-v5-pficon-monitoring:before, .pf-v5-pficon-module:before, .pf-v5-pficon-migration:before, .pf-v5-pficon-middleware:before, .pf-v5-pficon-messages:before, .pf-v5-pficon-memory:before, .pf-v5-pficon-maintenance:before, .pf-v5-pficon-locked:before, .pf-v5-pficon-key:before, .pf-v5-pficon-integration:before, .pf-v5-pficon-infrastructure:before, .pf-v5-pficon-info:before, .pf-v5-pficon-in-progress:before, .pf-v5-pficon-import:before, .pf-v5-pficon-home:before, .pf-v5-pficon-history:before, .pf-v5-pficon-help:before, .pf-v5-pficon-globe-route:before, .pf-v5-pficon-folder-open:before, .pf-v5-pficon-folder-close:before, .pf-v5-pficon-flavor:before, .pf-v5-pficon-filter:before, .pf-v5-pficon-export:before, .pf-v5-pficon-error-circle-o:before, .pf-v5-pficon-equalizer:before, .pf-v5-pficon-enterprise:before, .pf-v5-pficon-enhancement:before, .pf-v5-pficon-edit:before, .pf-v5-pficon-domain:before, .pf-v5-pficon-disconnected:before, .pf-v5-pficon-degraded:before, .pf-v5-pficon-data-source:before, .pf-v5-pficon-data-sink:before, .pf-v5-pficon-data-processor:before, .pf-v5-pficon-critical-risk:before, .pf-v5-pficon-cpu:before, .pf-v5-pficon-container-node:before, .pf-v5-pficon-connected:before, .pf-v5-pficon-cluster:before, .pf-v5-pficon-cloud-tenant:before, .pf-v5-pficon-cloud-security:before, .pf-v5-pficon-close:before, .pf-v5-pficon-chat:before, .pf-v5-pficon-catalog:before, .pf-v5-pficon-bundle:before, .pf-v5-pficon-builder-image:before, .pf-v5-pficon-build:before, .pf-v5-pficon-blueprint:before, .pf-v5-pficon-bell:before, .pf-v5-pficon-automation:before, .pf-v5-pficon-attention-bell:before, .pf-v5-pficon-asleep:before, .pf-v5-pficon-arrow:before, .pf-v5-pficon-applications:before, .pf-v5-pficon-ansible-tower:before, .pf-v5-pficon-add-circle-o:before {
+.pf-v5-pficon-zone:before, .pf-v5-pficon-warning-triangle:before, .pf-v5-pficon-volume:before, .pf-v5-pficon-virtual-machine:before, .pf-v5-pficon-users:before, .pf-v5-pficon-user:before, .pf-v5-pficon-unplugged:before, .pf-v5-pficon-unlocked:before, .pf-v5-pficon-unknown:before, .pf-v5-pficon-trend-up:before, .pf-v5-pficon-trend-down:before, .pf-v5-pficon-treeview:before, .pf-v5-pficon-topology:before, .pf-v5-pficon-thumb-tack:before, .pf-v5-pficon-tenant:before, .pf-v5-pficon-task:before, .pf-v5-pficon-storage-domain:before, .pf-v5-pficon-spinner2:before, .pf-v5-pficon-spinner:before, .pf-v5-pficon-services:before, .pf-v5-pficon-service:before, .pf-v5-pficon-service-catalog:before, .pf-v5-pficon-server:before, .pf-v5-pficon-server-group:before, .pf-v5-pficon-security:before, .pf-v5-pficon-screen:before, .pf-v5-pficon-save:before, .pf-v5-pficon-running:before, .pf-v5-pficon-resources-full:before, .pf-v5-pficon-resources-empty:before, .pf-v5-pficon-resources-almost-full:before, .pf-v5-pficon-resources-almost-empty:before, .pf-v5-pficon-resource-pool:before, .pf-v5-pficon-repository:before, .pf-v5-pficon-replicator:before, .pf-v5-pficon-remove2:before, .pf-v5-pficon-registry:before, .pf-v5-pficon-regions:before, .pf-v5-pficon-rebooting:before, .pf-v5-pficon-rebalance:before, .pf-v5-pficon-project:before, .pf-v5-pficon-process-automation:before, .pf-v5-pficon-private:before, .pf-v5-pficon-print:before, .pf-v5-pficon-port:before, .pf-v5-pficon-plugged:before, .pf-v5-pficon-pficon-vcenter:before, .pf-v5-pficon-pficon-template:before, .pf-v5-pficon-pficon-sort-common-desc:before, .pf-v5-pficon-pficon-sort-common-asc:before, .pf-v5-pficon-pficon-satellite:before, .pf-v5-pficon-pficon-network-range:before, .pf-v5-pficon-pficon-history:before, .pf-v5-pficon-pficon-dragdrop:before, .pf-v5-pficon-pending:before, .pf-v5-pficon-paused:before, .pf-v5-pficon-panel-open:before, .pf-v5-pficon-panel-close:before, .pf-v5-pficon-package:before, .pf-v5-pficon-os-image:before, .pf-v5-pficon-orders:before, .pf-v5-pficon-optimize:before, .pf-v5-pficon-openstack:before, .pf-v5-pficon-openshift:before, .pf-v5-pficon-open-drawer-right:before, .pf-v5-pficon-on:before, .pf-v5-pficon-on-running:before, .pf-v5-pficon-ok:before, .pf-v5-pficon-off:before, .pf-v5-pficon-not-started:before, .pf-v5-pficon-new-process:before, .pf-v5-pficon-network:before, .pf-v5-pficon-namespaces:before, .pf-v5-pficon-multicluster:before, .pf-v5-pficon-monitoring:before, .pf-v5-pficon-module:before, .pf-v5-pficon-migration:before, .pf-v5-pficon-middleware:before, .pf-v5-pficon-messages:before, .pf-v5-pficon-memory:before, .pf-v5-pficon-maintenance:before, .pf-v5-pficon-locked:before, .pf-v5-pficon-key:before, .pf-v5-pficon-integration:before, .pf-v5-pficon-infrastructure:before, .pf-v5-pficon-info:before, .pf-v5-pficon-in-progress:before, .pf-v5-pficon-import:before, .pf-v5-pficon-home:before, .pf-v5-pficon-history:before, .pf-v5-pficon-help:before, .pf-v5-pficon-globe-route:before, .pf-v5-pficon-folder-open:before, .pf-v5-pficon-folder-close:before, .pf-v5-pficon-flavor:before, .pf-v5-pficon-filter:before, .pf-v5-pficon-export:before, .pf-v5-pficon-error-circle-o:before, .pf-v5-pficon-equalizer:before, .pf-v5-pficon-enterprise:before, .pf-v5-pficon-enhancement:before, .pf-v5-pficon-edit:before, .pf-v5-pficon-domain:before, .pf-v5-pficon-disconnected:before, .pf-v5-pficon-degraded:before, .pf-v5-pficon-data-source:before, .pf-v5-pficon-data-sink:before, .pf-v5-pficon-data-processor:before, .pf-v5-pficon-critical-risk:before, .pf-v5-pficon-cpu:before, .pf-v5-pficon-container-node:before, .pf-v5-pficon-connected:before, .pf-v5-pficon-cluster:before, .pf-v5-pficon-cloud-tenant:before, .pf-v5-pficon-cloud-security:before, .pf-v5-pficon-close:before, .pf-v5-pficon-chat:before, .pf-v5-pficon-catalog:before, .pf-v5-pficon-bundle:before, .pf-v5-pficon-builder-image:before, .pf-v5-pficon-build:before, .pf-v5-pficon-blueprint:before, .pf-v5-pficon-bell:before, .pf-v5-pficon-automation:before, .pf-v5-pficon-attention-bell:before, .pf-v5-pficon-asleep:before, .pf-v5-pficon-arrow:before, .pf-v5-pficon-applications:before, .pf-v5-pficon-ansible-tower:before, .pf-v5-pficon-add-circle-o:before {
   font-family: "pf-v5-pficon";
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -485,6 +485,10 @@
   content: "\e608";
 }
 
+.pf-v5-pficon-treeview:before {
+  content: "\e97d";
+}
+
 .pf-v5-pficon-trend-down:before {
   content: "\e900";
 }

package/base/patternfly-variables.css

@@ -232,6 +232,11 @@
   --pf-v5-global--arrow--width-lg: 1.5625rem;
   --pf-v5-global--target-size--MinWidth: 44px;
   --pf-v5-global--target-size--MinHeight: 44px;
+  --pf-v5-global--inverse--multiplier: 1;
+}
+
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) {
+  --pf-v5-global--inverse--multiplier: -1;
 }
 
 :where(.pf-v5-theme-dark) {
@@ -821,6 +826,7 @@
   --pf-t--global--link--text-decoration: var(--pf-t--global--text-decoration--200);
   --pf-t--global--link--text-decoration--hover: var(--pf-t--global--text-decoration--200);
   --pf-t--global--mix-blend-mode--100: multiply;
+  --pf-t--global--mix-blend-mode--200: screen;
   --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
   --pf-t--global--border--width--control--default: var(--pf-t--global--border--width--100);
   --pf-t--global--border--width--control--hover: var(--pf-t--global--border--width--100);
@@ -841,6 +847,16 @@
   --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
   --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
 }
+:root:where(.pf-v5-theme-dark) {
+  --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
+  --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
+  --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
+}
 
 /**
  * Do not edit directly

package/base/tokens/_tokens-font.scss

@@ -4,7 +4,7 @@
 // The ability to make font variables is reportedly coming by the end of the year
 
 :root {
-// Base tokens for fonts
+  // Base tokens for fonts
   --pf-t--global--font--family--100: redhattext;
   --pf-t--global--font--family--200: redhatdisplay;
   --pf-t--global--font--family--300: redhatmono;
@@ -24,7 +24,7 @@
   --pf-t--global--font--size--heading--500: 28px;
   --pf-t--global--font--size--heading--600: 36px;
 
-// Semantic tokens for fonts
+  // Semantic tokens for fonts
   --pf-t--global--font--family--body: var(--pf-t--global--font--family--100);
   --pf-t--global--font--family--heading: var(--pf-t--global--font--family--200);
   --pf-t--global--font--family--mono: var(--pf-t--global--font--family--300);
@@ -54,8 +54,7 @@
 
   // blend modes 
   --pf-t--global--mix-blend-mode--100: multiply;
-
-  // --pf-t--global--mix-blend-mode--100: screen; For dark mode, use screen
+  --pf-t--global--mix-blend-mode--200: screen;
   --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--100);
 
   // semantic border width
@@ -80,15 +79,18 @@
   --pf-t--global--box-shadow--lg--left: -8px 0px 24px 0px rgb(0 0 0 / 12%);
   --pf-t--global--box-shadow--lg--right: 8px 0px 24px 0px rgb(0 0 0 / 12%);
 
-  // DARK shadows
-  // TODO: move into a dark token file
-  // shadows
-  // --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
-  // --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
-  // --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
-  // --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
-  // --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
-  // --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
-  // --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
+  &:where(.pf-v5-theme-dark) {
+    // blend mode
+    --pf-t--global--background--color--action--plain--hover--blend: var(--pf-t--global--mix-blend-mode--200);
 
+    // box shadow
+    --pf-t--global--box-shadow--sm: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-top: 0px -1px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-right: 1px 0px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-bottom: 0px 1px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--sm-left: -1px 0px 2px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--md: 0px 4px 8px 0px rgb(0 0 0 / 50%);
+    --pf-t--global--box-shadow--lg: 0px 8px 24px 0px rgb(0 0 0 / 50%);
+  }
 }
+

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

@@ -26,6 +26,7 @@
   --pf-v5-c-about-modal-box--Width: 100%;
   --pf-v5-c-about-modal-box--sm--GridTemplateColumns: 5fr 1fr;
   --pf-v5-c-about-modal-box--lg--GridTemplateColumns: 1fr .6fr;
+  --pf-v5-c-about-modal-box--BackgroundPosition: bottom right;
   --pf-v5-c-about-modal-box__brand--PaddingTop: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-global--spacer--xl);
   --pf-v5-c-about-modal-box__brand--PaddingLeft: var(--pf-v5-global--spacer--xl);
@@ -78,6 +79,10 @@
   background-position: var(--pf-v5-c-about-modal-box--BackgroundPosition);
   background-size: var(--pf-v5-c-about-modal-box--BackgroundSize);
 }
+:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-about-modal-box {
+  --pf-v5-c-about-modal-box--BackgroundPosition: bottom left;
+}
+
 @media screen and (min-width: 576px) {
   .pf-v5-c-about-modal-box {
     --pf-v5-c-about-modal-box__brand--PaddingRight: var(--pf-v5-c-about-modal-box__brand--sm--PaddingRight);
@@ -132,7 +137,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 {
@@ -143,14 +151,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);
 }
 
@@ -158,12 +166,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 {
@@ -174,14 +185,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/components/AboutModalBox/about-modal-box.scss

@@ -15,6 +15,13 @@
   --#{$about-modal-box}--sm--GridTemplateColumns: 5fr 1fr;
   --#{$about-modal-box}--lg--GridTemplateColumns: 1fr .6fr;
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$about-modal-box}--BackgroundPosition,
+    $ltr-val: bottom right,
+    $rtl-val: bottom left
+  );
+
+
   // Brand
   --#{$about-modal-box}__brand--PaddingTop: var(--#{$pf-global}--spacer--2xl);
   --#{$about-modal-box}__brand--PaddingRight: var(--#{$pf-global}--spacer--xl);
@@ -137,7 +144,10 @@
 .#{$about-modal-box}__brand {
   display: flex;
   grid-area: brand;
-  padding: var(--#{$about-modal-box}__brand--PaddingTop) var(--#{$about-modal-box}__brand--PaddingRight) var(--#{$about-modal-box}__brand--PaddingBottom) var(--#{$about-modal-box}__brand--PaddingLeft);
+  padding-block-start: var(--#{$about-modal-box}__brand--PaddingTop);
+  padding-block-end: var(--#{$about-modal-box}__brand--PaddingBottom);
+  padding-inline-start: var(--#{$about-modal-box}__brand--PaddingLeft);
+  padding-inline-end: var(--#{$about-modal-box}__brand--PaddingRight);
 }
 
 .#{$about-modal-box}__brand-image {
@@ -149,15 +159,15 @@
   display: flex;
   flex-direction: column;
   grid-area: header;
-  padding-right: var(--#{$about-modal-box}__header--PaddingRight);
-  padding-bottom: var(--#{$about-modal-box}__header--PaddingBottom);
-  padding-left: var(--#{$about-modal-box}__header--PaddingLeft);
+  padding-block-end: var(--#{$about-modal-box}__header--PaddingBottom);
+  padding-inline-start: var(--#{$about-modal-box}__header--PaddingLeft);
+  padding-inline-end: var(--#{$about-modal-box}__header--PaddingRight);
 }
 
 // Strapline
 .#{$about-modal-box}__strapline {
-  padding-top: var(--#{$about-modal-box}__strapline--PaddingTop);
-  margin-top: auto;
+  padding-block-start: var(--#{$about-modal-box}__strapline--PaddingTop);
+  margin-block-start: auto;
   font-size: var(--#{$about-modal-box}__strapline--FontSize);
 }
 
@@ -166,12 +176,15 @@
   display: flex;
   flex-direction: column;
   grid-area: content;
-  margin: var(--#{$about-modal-box}__content--MarginTop) var(--#{$about-modal-box}__content--MarginRight) var(--#{$about-modal-box}__content--MarginBottom) var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-block-start: var(--#{$about-modal-box}__content--MarginTop);
+  margin-block-end: var(--#{$about-modal-box}__content--MarginBottom);
+  margin-inline-start: var(--#{$about-modal-box}__content--MarginLeft); // Using margin instead of padding to prevent scrollbar extending to top of content block
+  margin-inline-end: var(--#{$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: $pf-v5-global--breakpoint--sm) {
     overflow: visible;
@@ -182,14 +195,14 @@
 // Close
 .#{$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(--#{$about-modal-box}__close--PaddingTop);
-  padding-right: var(--#{$about-modal-box}__close--PaddingRight);
-  padding-bottom: var(--#{$about-modal-box}__close--PaddingBottom);
+  padding-block-start: var(--#{$about-modal-box}__close--PaddingTop);
+  padding-block-end: var(--#{$about-modal-box}__close--PaddingBottom);
+  padding-inline-end: var(--#{$about-modal-box}__close--PaddingRight);
 
   @media only screen and (min-width: $pf-v5-global--breakpoint--sm) {
     grid-area: 1 / 2;

package/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(.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/components/Accordion/accordion.scss

@@ -114,18 +114,22 @@
   &.pf-m-bordered {
     --#{$accordion}__toggle--after--Top: var(--#{$accordion}--m-bordered__toggle--after--Top);
 
-    border-top: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
+    border-block-start: var(--#{$accordion}--m-bordered--BorderTopWidth) solid var(--#{$accordion}--m-bordered--BorderTopColor);
 
     .#{$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(--#{$accordion}--m-bordered__toggle--before--BorderColor);
-        border-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth) 0 var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
+        border-color: var(--#{$accordion}--m-bordered__toggle--before--BorderColor);
+        border-style: solid;
+        border-block-start-width: var(--#{$accordion}--m-bordered__toggle--before--BorderTopWidth);
+        border-block-end-width: var(--#{$accordion}--m-bordered__toggle--before--BorderBottomWidth);
+        border-inline-start-width: 0;
+        border-inline-end-width: 0;
       }
 
       &.pf-m-expanded {
@@ -139,13 +143,13 @@
         .#{$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(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
+            border-block-end: var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomWidth) solid var(--#{$accordion}--m-bordered__expandable-content--m-expanded__expandable-content-body--last-child--before--BorderBottomColor);
           }
         }
       }
@@ -160,7 +164,10 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: var(--#{$accordion}__toggle--PaddingTop) var(--#{$accordion}__toggle--PaddingRight) var(--#{$accordion}__toggle--PaddingBottom) var(--#{$accordion}__toggle--PaddingLeft);
+  padding-block-start: var(--#{$accordion}__toggle--PaddingTop);
+  padding-block-end: var(--#{$accordion}__toggle--PaddingBottom);
+  padding-inline-start: var(--#{$accordion}__toggle--PaddingLeft);
+  padding-inline-end: var(--#{$accordion}__toggle--PaddingRight);
   font-family: var(--#{$accordion}__toggle--FontFamily, inherit);
   font-size: var(--#{$accordion}__toggle--FontSize, inherit);
   background-color: var(--#{$accordion}__toggle--BackgroundColor);
@@ -168,9 +175,9 @@
 
   &::after {
     position: absolute;
-    top: var(--#{$accordion}__toggle--after--Top);
-    bottom: 0;
-    left: 0;
+    inset-block-start: var(--#{$accordion}__toggle--after--Top);
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$accordion}__toggle--after--Width);
     content: "";
     background-color: var(--#{$accordion}__toggle--after--BackgroundColor);
@@ -223,6 +230,8 @@
 }
 
 .#{$accordion}__toggle-icon {
+  @include pf-v5-mirror-inline-on-rtl;
+
   transition: var(--#{$accordion}__toggle-icon--Transition);
 }
 
@@ -242,13 +251,16 @@
 
 .#{$accordion}__expandable-content-body {
   position: relative;
-  padding: var(--#{$accordion}__expandable-content-body--PaddingTop) var(--#{$accordion}__expandable-content-body--PaddingRight) var(--#{$accordion}__expandable-content-body--PaddingBottom) var(--#{$accordion}__expandable-content-body--PaddingLeft);
+  padding-block-start: var(--#{$accordion}__expandable-content-body--PaddingTop);
+  padding-block-end: var(--#{$accordion}__expandable-content-body--PaddingBottom);
+  padding-inline-start: var(--#{$accordion}__expandable-content-body--PaddingLeft);
+  padding-inline-end: var(--#{$accordion}__expandable-content-body--PaddingRight);
 
   &::after {
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: 0;
     width: var(--#{$accordion}__expandable-content-body--after--Width);
     content: "";
     background-color: var(--#{$accordion}__expandable-content-body--after--BackgroundColor);

package/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/components/ActionList/action-list.scss

@@ -15,12 +15,12 @@
   align-items: center;
 
   > * + * {
-    margin-left: var(--#{$action-list}--child--spacer);
+    margin-inline-start: var(--#{$action-list}--child--spacer);
   }
 
   > * + .#{$action-list}__group,
   .#{$action-list}__group + * {
-    margin-left: var(--#{$action-list}--group--spacer);
+    margin-inline-start: var(--#{$action-list}--group--spacer);
   }
 
   &.pf-m-icons {

package/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/components/Alert/alert-group.scss

@@ -29,14 +29,14 @@
 
   // Spacing between alerts
   > * + * {
-    margin-top: var(--#{$alert-group}__item--MarginTop);
+    margin-block-start: var(--#{$alert-group}__item--MarginTop);
   }
 
   // Toast positioning modifier
   &.pf-m-toast {
     position: fixed;
-    top: var(--#{$alert-group}--m-toast--Top);
-    right: var(--#{$alert-group}--m-toast--Right);
+    inset-block-start: var(--#{$alert-group}--m-toast--Top);
+    inset-inline-end: var(--#{$alert-group}--m-toast--Right);
     z-index: var(--#{$alert-group}--m-toast--ZIndex);
     width: calc(100% - calc(var(--#{$alert-group}--m-toast--Right) * 2));
     max-width: var(--#{$alert-group}--m-toast--MaxWidth);
@@ -46,7 +46,10 @@
 .#{$alert-group}__overflow-button {
   position: relative;
   width: 100%;
-  padding: var(--#{$alert-group}__overflow-button--PaddingTop) var(--#{$alert-group}__overflow-button--PaddingRight) var(--#{$alert-group}__overflow-button--PaddingBottom) var(--#{$alert-group}__overflow-button--PaddingLeft);
+  padding-block-start: var(--#{$alert-group}__overflow-button--PaddingTop);
+  padding-block-end: var(--#{$alert-group}__overflow-button--PaddingBottom);
+  padding-inline-start: var(--#{$alert-group}__overflow-button--PaddingLeft);
+  padding-inline-end: var(--#{$alert-group}__overflow-button--PaddingRight);
   color: var(--#{$alert-group}__overflow-button--Color);
   background-color: var(--#{$alert-group}__overflow-button--BackgroundColor);
   border-width: var(--#{$alert-group}__overflow-button--BorderWidth);