@patternfly/patternfly 6.0.0-alpha.6 → 6.0.0-alpha.61

package/docs/layouts/Flex/examples/Flex.md

@@ -12,11 +12,11 @@ The flex layout is based on the CSS Flex properties where the layout determines
 
 The flex layout provides two ways of spacing its direct children.
 
-*   [Spacing system](#spacing-system)
-    *   The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
-*   [Gap spacing](#gap-spacing)
-    *   Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
-    *   **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
+* [Spacing system](#spacing-system)
+  * The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
+* [Gap spacing](#gap-spacing)
+  * Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
+  * **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
 
 ### Breakpoints
 
@@ -24,15 +24,15 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Usefulness
 
-*   Use when content dictates layout and elements wrap when necessary.
-*   Use when a rigid grid is not necessary/wanted.
+* Use when content dictates layout and elements wrap when necessary.
+* Use when a rigid grid is not necessary/wanted.
 
 ### Differences from utility class
 
-*   It contains multiple css declarations and does not use the `!important` tag.
-*   It does not require wrapping elements in columns or rows.
-*   It breaks the dependency upon adding utility classes to each child.
-*   It can be applied to container elements or components.
+* It contains multiple css declarations and does not use the `!important` tag.
+* It does not require wrapping elements in columns or rows.
+* It breaks the dependency upon adding utility classes to each child.
+* It can be applied to container elements or components.
 
 # Examples
 
@@ -494,7 +494,7 @@ Adjusting width with `.pf-m-flex-1`. In this example, all groups are set to `.pf
 
 ### Basic align right example
 
-Aligning right with `.pf-m-align-right`. This solution will always align element right by setting margin-left: auto, including when wrapped.
+Aligning right with `.pf-m-align-right`. This solution will always align element right by setting margin-inline-start: auto, including when wrapped.
 
 ```html
 <div class="pf-v5-l-flex ws-example-flex-border">
@@ -627,8 +627,8 @@ Aligning right with `.pf-m-align-right`. This solution will always align element
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies margin-left property to auto. |
-| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Resets margin-left property 0. |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies margin-inline-start property to auto. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Resets margin-inline-start property 0. |
 | `.pf-m-align-self-flex-start{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies align-self property to flex-start. |
 | `.pf-m-align-self-flex-end{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies align-self property to flex-end. |
 | `.pf-m-align-self-flex-center{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies align-self property to center. |
@@ -863,8 +863,8 @@ Ordering - Ordering can be applied to nested `.pf-v5-l-flex` and `.pf-v5-l-flex_
 | `.pf-m-align-content-stretch{-on-[breakpoint]}` | `.pf-v5-l-flex` | Modifies the flex layout align-content property to stretch. |
 | `.pf-m-align-content-space-between{-on-[breakpoint]}` | `.pf-v5-l-flex` | Modifies the flex layout align-content property to space-between. |
 | `.pf-m-align-content-space-around{-on-[breakpoint]}` | `.pf-v5-l-flex` | Modifies the flex layout align-content property to space-around. |
-| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Resets the flex layout element margin-left property to 0. |
-| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies the flex layout element margin-left property to auto. |
+| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Resets the flex layout element margin-inline-start property to 0. |
+| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies the flex layout element margin-inline-start property to auto. |
 | `--pf-v5-l-flex--item--Order{-on-[breakpoint]}: {order}` | `.pf-v5-l-flex > .pf-v5-l-flex`, `.pf-v5-l-flex__item` | Modifies the flex layout element order property. |
 
 ### Spacer system usage

package/docs/utilities/BoxShadow/examples/box-shadow.css

@@ -1,20 +1,20 @@
 .ws-core-u-box-shadow [class*="pf-v5-u-box-shadow"] {
   padding: var(--pf-v5-global--spacer--lg);
-  margin-bottom: var(--pf-v5-global--spacer--md);
+  margin-block-end: var(--pf-v5-global--spacer--md);
 }
 
 #ws-core-u-box-shadow-small [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--lg);
+  margin-block-end: var(--pf-v5-global--spacer--lg);
 }
 
 #ws-core-u-box-shadow-medium [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--xl);
+  margin-block-end: var(--pf-v5-global--spacer--xl);
 }
 
 #ws-core-u-box-shadow-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--2xl);
+  margin-block-end: var(--pf-v5-global--spacer--2xl);
 }
 
 #ws-core-u-box-shadow-extra-large [class*="pf-v5-u-box-shadow"]:not(:last-child) {
-  margin-bottom: var(--pf-v5-global--spacer--3xl);
+  margin-block-end: var(--pf-v5-global--spacer--3xl);
 }

package/icons/pficons.mjs

@@ -117,6 +117,7 @@ export const pfIcons = {
   "tenant": { "width": 1024, "height": 1024, "svgPathData": "M512.1,0 C229.7,0 0,229.8 0,512 C0,794.3 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0 Z M512,960 C264.9,960 64,759.2 64,512 C64,265 264.9,64 512,64 C759,64 960,264.9 960,512 C960,759.1 759,960 512,960 Z M672,544 C601.3,544 544,601.3 544,672 C544,742.7 601.3,800 672,800 C742.7,800 800,742.7 800,672 C800,601.3 742.7,544 672,544 Z M672,752 C627.9,752 592,716.1 592,672 C592,627.9 627.9,592 672,592 C716.1,592 752,627.9 752,672 C752,716.1 716.1,752 672,752 Z M352,544 C281.3,544 224,601.3 224,672 C224,742.7 281.3,800 352,800 C422.7,800 480,742.7 480,672 C480,601.3 422.7,544 352,544 Z M352,752 C307.9,752 272,716.1 272,672 C272,627.9 307.9,592 352,592 C396.1,592 432,627.9 432,672 C432,716.1 396.1,752 352,752 Z M672,224 C601.3,224 544,281.3 544,352 C544,422.7 601.3,480 672,480 C742.7,480 800,422.7 800,352 C800,281.3 742.7,224 672,224 Z M672,432 C627.9,432 592,396.1 592,352 C592,307.9 627.9,272 672,272 C716.1,272 752,307.9 752,352 C752,396.1 716.1,432 672,432 Z M480,352 C480,422.7 422.7,480 352,480 C281.3,480 224,422.7 224,352 C224,281.3 281.3,224 352,224 C422.7,224 480,281.3 480,352" },
   "thumb-tack": { "width": 640, "height": 1024, "svgPathData": "M640,670.7 C640,543 602.7,480.2 512,448 L512,192 C549.3,178.8 575.4,137.8 575.4,96 C575.4,43 532.4,0 479.4,0 L159.4,0 C106.4,0 63.4,43 63.4,96 C63.4,137.8 90.7,178.8 128,192 L128,448 C37.3,480.2 0,543 0,670.7 C0,688.9 13.8,704 32,704 L256,704 L284.7,995 C286.2,1011.5 301,1024 320,1024 C339,1024 352.6,1011.4 354.1,995 L384,704 L606.9,704 C625.1,704 640,688.9 640,670.7" },
   "topology": { "width": 1088, "height": 1024, "svgPathData": "M877.8,0 C797.1,0 731.5,65.6 731.5,146.3 C731.5,175.1 739.7,201.8 754.1,224.5 L670,310.5 C626.5,276.4 571.7,256 512,256 C477.8,256 445.1,262.7 415.3,274.9 L388.6,239.6 C375.1,221.3 350.9,216.1 334.9,228.2 C318.7,240.1 316.4,264.8 329.6,283.1 L351.9,312.3 C293.4,359.2 256,431.2 256,512 C256,534.7 259,556.7 264.5,577.7 L239,590.9 C219.8,600.3 210.7,622.9 218.4,641.2 C226.1,659.5 248.3,666.8 267.3,657.7 L292.9,644.4 C329.1,704.2 389.1,748 459.8,762.6 L453.8,835.6 C413.5,847.1 384,884.1 384,928 C384,981 427,1024 480,1024 C533,1024 576,981 576,928 C576,888.3 551.9,854.3 517.6,839.7 L523.5,767.8 C605.3,764.2 677.2,722.1 721.4,659.2 L789.8,705.8 C808.1,718.4 832.1,714.9 842.8,698 C853.5,680.9 847.3,656.9 828.8,644.6 L754.6,594.1 C763.3,568.3 768,540.7 768,512 C768,456.6 750.4,405.3 720.5,363.5 L807.4,274.8 C828.2,286.2 852.2,292.9 877.8,292.9 C958.5,292.9 1024.1,227.3 1024.1,146.6 C1024.1,65.9 958.5,0 877.8,0 Z M528,928 C528,954.5 506.5,976 480,976 C453.5,976 432,954.5 432,928 C432,901.5 453.5,880 480,880 C506.5,880 528,901.5 528,928 Z M512,640 C441.3,640 384,582.7 384,512 C384,441.3 441.3,384 512,384 C582.7,384 640,441.3 640,512 C640,582.7 582.8,640 512,640 Z M877.8,224 C834.8,224 800.1,189.3 800.1,146.3 C800.1,103.3 834.8,68.6 877.8,68.6 C920.8,68.6 955.5,103.3 955.5,146.3 C955.5,189.3 920.8,224 877.8,224 Z M900.8,712.3 C943.6,669.5 1013.1,669.5 1055.9,712.3 C1077.3,733.7 1088,761.8 1088,789.9 C1088,818 1077.3,846 1055.9,867.5 C1013.1,910.3 943.6,910.3 900.8,867.5 C858,824.6 858,755.2 900.8,712.3 M256,2.3 C316.6,2.3 365.7,51.4 365.7,112 C365.7,172.6 316.6,221.7 256,221.7 C195.4,221.7 146.3,172.6 146.3,112 C146.3,51.4 195.4,2.3 256,2.3 M96,608 C149,608 192,651 192,704 C192,757 149,800 96,800 C43,800 0,757 0,704 C0,651 43,608 96,608" },
+  "treeview": { "width": 1024, "height": 1024, "svgPathData": "M1110.73911,0 L41.1428663,0 C18.4204327,0 0,19.1026667 0,42.6666667 L0,127.877333 C0,151.509333 18.473147,170.666667 41.2611521,170.666667 L1110.73911,170.666667 C1133.52711,170.666667 1152.00026,151.509333 1152.00026,127.877333 L1152.00026,42.7893333 C1152.00026,19.1573333 1133.52711,0 1110.73911,0 M1110.73911,426.666667 L452.57153,426.666667 C429.849096,426.666667 411.428663,445.769333 411.428663,469.333333 L411.428663,554.544 C411.428663,578.176 429.90181,597.333333 452.689815,597.333333 L1110.73911,597.333333 C1133.52711,597.333333 1152.00026,578.176 1152.00026,554.544 L1152.00026,469.456 C1152.00026,445.824 1133.52711,426.666667 1110.73911,426.666667 M308.571497,469.333333 L82.2857327,469.333333 L82.2857327,277.333333 C82.2857327,265.550667 73.0748735,256 61.7142995,256 L20.5714332,256 C9.20957348,256 0,265.550667 0,277.333333 L0,490.666667 L0,533.333333 L0,896 L0,960 C0,971.782667 9.20957348,981.333333 20.5714332,981.333333 L61.7142995,981.333333 L308.571497,981.333333 C319.932071,981.333333 329.142931,971.782667 329.142931,960 L329.142931,917.333333 C329.142931,905.550667 319.932071,896 308.571497,896 L82.2857327,896 L82.2857327,554.666667 L308.571497,554.666667 C319.932071,554.666667 329.142931,545.116 329.142931,533.333333 L329.142931,490.666667 C329.142931,478.884 319.932071,469.333333 308.571497,469.333333 M1152.00026,896.122667 L1152.00026,981.210667 C1152.00026,1004.84267 1133.52711,1024 1110.73911,1024 L452.689815,1024 C429.90181,1024 411.428663,1004.84267 411.428663,981.210667 L411.428663,896 C411.428663,872.436 429.849096,853.333333 452.57153,853.333333 L1110.73911,853.333333 C1133.52711,853.333333 1152.00026,872.490667 1152.00026,896.122667" },
   "trend-down": { "width": 960, "height": 1024, "svgPathData": "M960,864 C960,881.7 945.7,896 928,896 L480,896 C462.3,896 448,881.7 448,864 L448,800 C448,782.3 462.3,768 480,768 L741.5,768 L450.3,473.8 L343.7,580.8 C331.2,593.3 310.9,593.4 298.4,580.8 L9.4,291.8 C3.1,285.6 0,277.4 0,269.3 C0,261.1 3.1,252.9 9.4,246.7 L54.6,201.4 C60.9,195.1 69.1,192 77.3,192 C85.5,192 93.7,195.1 99.9,201.4 L320.9,422.4 L427.5,315.4 C440,302.9 460.3,302.8 472.8,315.4 L832,677.5 L831,416 C831,398.3 844.3,384 862,384 L926,384 C943.7,384 960,398.3 960,416 L960,864 Z" },
   "trend-up": { "width": 960, "height": 1024, "svgPathData": "M960,224 C960,206.3 945.7,192 928,192 L480,192 C462.3,192 448,206.3 448,224 L448,288 C448,305.7 462.3,320 480,320 L741.5,320 L450.3,614.2 L343.7,507.2 C331.2,494.7 310.9,494.6 298.4,507.2 L9.4,796.2 C3.1,802.4 0,810.6 0,818.7 C0,826.9 3.1,835.1 9.4,841.3 L54.7,886.6 C60.9,892.8 69.1,896 77.3,896 C85.5,896 93.7,892.9 99.9,886.6 L320.9,665.6 L427.5,772.6 C440,785.1 460.3,785.2 472.8,772.6 L832,410.5 L831,672 C831,689.7 844.3,704 862,704 L926,704 C943.7,704 960,689.7 960,672 L960,224 Z" },
   "unknown": { "width": 1024, "height": 1024, "svgPathData": "M943.3,317.2 L706.9,80.7 C653,26.9 582.5,0 512,0 C441.5,0 371,26.9 317.1,80.7 L80.7,317.1 C-26.9,424.7 -26.9,599.2 80.7,706.8 L317.1,943.2 C371,997.1 441.5,1024 512,1024 C582.5,1024 653,997.1 706.9,943.3 L943.3,706.9 C1050.9,599.3 1050.9,424.8 943.3,317.2 Z M866.4,602.2 L602.8,866.1 C552.8,916.1 471.8,916.2 421.7,866.2 L157.7,602.2 C107.8,552.2 107.8,471.2 157.8,421.3 L421.4,158.4 C471.3,108.6 552.1,108.6 602.1,158.3 L866.3,421.3 C916.3,471.3 916.3,552.2 866.4,602.2 Z M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C488,576.1 521.3,576 521.3,576 L521.3,576 Z M575.3,751.3 L575.3,655.3 C575.3,650.9 573.7,647.3 570.6,644 C567.5,640.9 563.7,639.3 559.3,639.3 L463.3,639.3 C458.9,639.3 455.3,640.9 452,644 C448.9,647.1 447.3,650.9 447.3,655.3 L447.3,751.3 C447.3,755.7 448.9,759.3 452,762.6 C455.1,765.7 458.9,767.3 463.3,767.3 L559.3,767.3 C563.7,767.3 567.3,765.7 570.6,762.6 C573.8,759.4 575.3,755.6 575.3,751.3 L575.3,751.3 Z" },

package/layouts/Flex/flex.css

@@ -34,7 +34,7 @@
   --pf-v5-l-flex--spacer--row: var(--pf-v5-l-flex--spacer, var(--pf-v5-l-flex--spacer--row--base));
   order: var(--pf-v5-l-flex--item--Order);
   max-width: 100%;
-  margin-right: var(--pf-v5-l-flex--spacer--column);
+  margin-inline-end: var(--pf-v5-l-flex--spacer--column);
 }
 @media screen and (min-width: 576px) {
   .pf-v5-l-flex > * {
@@ -78,28 +78,40 @@
   align-items: normal;
 }
 .pf-v5-l-flex.pf-m-column > * {
-  margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+  margin-block-start: 0;
+  margin-block-end: var(--pf-v5-l-flex--spacer--row);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-column-reverse {
   flex-direction: column-reverse;
   align-items: normal;
 }
 .pf-v5-l-flex.pf-m-column-reverse > * {
-  margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+  margin-block-start: var(--pf-v5-l-flex--spacer--row);
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-row {
   flex-direction: row;
   align-items: var(--pf-v5-l-flex--m-row--AlignItems);
 }
 .pf-v5-l-flex.pf-m-row > * {
-  margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: var(--pf-v5-l-flex--spacer--column);
 }
 .pf-v5-l-flex.pf-m-row-reverse {
   flex-direction: row-reverse;
   align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
 }
 .pf-v5-l-flex.pf-m-row-reverse > * {
-  margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex.pf-m-wrap {
   flex-wrap: wrap;
@@ -162,10 +174,10 @@
   align-content: space-around;
 }
 .pf-v5-l-flex > .pf-m-align-right {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 .pf-v5-l-flex > .pf-m-align-left {
-  margin-left: 0;
+  margin-inline-start: 0;
 }
 .pf-v5-l-flex > .pf-m-grow {
   flex-grow: 1;
@@ -175,7 +187,7 @@
 }
 .pf-v5-l-flex > .pf-m-full-width {
   width: 100%;
-  margin-right: 0;
+  margin-inline-end: 0;
 }
 .pf-v5-l-flex > .pf-m-flex-1 {
   flex: 1 0 0;
@@ -224,28 +236,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-sm > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-sm {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-sm > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-sm {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-sm > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-sm {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-sm > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-sm {
     flex-wrap: wrap;
@@ -308,10 +332,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-sm {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-sm {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-sm {
     flex-grow: 1;
@@ -321,7 +345,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-sm {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-sm {
     flex: 1 0 0;
@@ -371,28 +395,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-md > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-md {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-md > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-md {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-md > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-md {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-md > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-md {
     flex-wrap: wrap;
@@ -455,10 +491,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-md {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-md {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-md {
     flex-grow: 1;
@@ -468,7 +504,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-md {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-md {
     flex: 1 0 0;
@@ -518,28 +554,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-lg > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-lg {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-lg > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-lg {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-lg > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-lg {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-lg > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-lg {
     flex-wrap: wrap;
@@ -602,10 +650,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-lg {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-lg {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-lg {
     flex-grow: 1;
@@ -615,7 +663,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-lg {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-lg {
     flex: 1 0 0;
@@ -665,28 +713,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-xl > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-xl {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-xl > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-xl {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-xl > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-xl {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-xl > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-xl {
     flex-wrap: wrap;
@@ -749,10 +809,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-xl {
     flex-grow: 1;
@@ -762,7 +822,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-xl {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-xl {
     flex: 1 0 0;
@@ -812,28 +872,40 @@
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-on-2xl > * {
-    margin: 0 0 var(--pf-v5-l-flex--spacer--row) 0;
+    margin-block-start: 0;
+    margin-block-end: var(--pf-v5-l-flex--spacer--row);
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-2xl {
     flex-direction: column-reverse;
     align-items: normal;
   }
   .pf-v5-l-flex.pf-m-column-reverse-on-2xl > * {
-    margin: var(--pf-v5-l-flex--spacer--row) 0 0 0;
+    margin-block-start: var(--pf-v5-l-flex--spacer--row);
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-row-on-2xl {
     flex-direction: row;
     align-items: var(--pf-v5-l-flex--m-row--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-on-2xl > * {
-    margin: 0 var(--pf-v5-l-flex--spacer--column) 0 0;
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: 0;
+    margin-inline-end: var(--pf-v5-l-flex--spacer--column);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-2xl {
     flex-direction: row-reverse;
     align-items: var(--pf-v5-l-flex--m-row-reverse--AlignItems);
   }
   .pf-v5-l-flex.pf-m-row-reverse-on-2xl > * {
-    margin: 0 0 0 var(--pf-v5-l-flex--spacer--column);
+    margin-block-start: 0;
+    margin-block-end: 0;
+    margin-inline-start: var(--pf-v5-l-flex--spacer--column);
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex.pf-m-wrap-on-2xl {
     flex-wrap: wrap;
@@ -896,10 +968,10 @@
     align-content: space-around;
   }
   .pf-v5-l-flex > .pf-m-align-right-on-2xl {
-    margin-left: auto;
+    margin-inline-start: auto;
   }
   .pf-v5-l-flex > .pf-m-align-left-on-2xl {
-    margin-left: 0;
+    margin-inline-start: 0;
   }
   .pf-v5-l-flex > .pf-m-grow-on-2xl {
     flex-grow: 1;
@@ -909,7 +981,7 @@
   }
   .pf-v5-l-flex > .pf-m-full-width-on-2xl {
     width: 100%;
-    margin-right: 0;
+    margin-inline-end: 0;
   }
   .pf-v5-l-flex > .pf-m-flex-1-on-2xl {
     flex: 1 0 0;

package/layouts/Flex/flex.scss

@@ -40,7 +40,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   order: var(--#{$flex}--item--Order);
   max-width: 100%;
-  margin-right: var(--#{$flex}--spacer--column);
+  margin-inline-end: var(--#{$flex}--spacer--column);
 
   // don't set base value for --#{$flex}--item--Order as it defaults to 0
   @media screen and (min-width: $pf-v5-global--breakpoint--sm) {
@@ -92,7 +92,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
         align-items: normal;
 
         > * {
-          margin: 0 0 var(--#{$flex}--spacer--row) 0;
+          margin-block-start: 0;
+          margin-block-end: var(--#{$flex}--spacer--row);
+          margin-inline-start: 0;
+          margin-inline-end: 0;
         }
       }
 
@@ -102,7 +105,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
         align-items: normal;
 
         > * {
-          margin: var(--#{$flex}--spacer--row) 0 0 0;
+          margin-block-start: var(--#{$flex}--spacer--row);
+          margin-block-end: 0;
+          margin-inline-start: 0;
+          margin-inline-end: 0;
         }
       }
 
@@ -113,7 +119,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
         // unset styling set for .pf-m-column
         > * {
-          margin: 0 var(--#{$flex}--spacer--column) 0 0;
+          margin-block-start: 0;
+          margin-block-end: 0;
+          margin-inline-start: 0;
+          margin-inline-end: var(--#{$flex}--spacer--column);
         }
       }
 
@@ -124,7 +133,10 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
         // unset styling set for .pf-m-column
         > * {
-          margin: 0 0 0 var(--#{$flex}--spacer--column);
+          margin-block-start: 0;
+          margin-block-end: 0;
+          margin-inline-start: var(--#{$flex}--spacer--column);
+          margin-inline-end: 0;
         }
       }
 
@@ -215,11 +227,11 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       // alignment
       > .pf-m-align-right#{$breakpoint-name} {
-        margin-left: auto;
+        margin-inline-start: auto;
       }
 
       > .pf-m-align-left#{$breakpoint-name} {
-        margin-left: 0;
+        margin-inline-start: 0;
       }
 
       // item properties
@@ -233,7 +245,7 @@ $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       > .pf-m-full-width#{$breakpoint-name} {
         width: 100%;
-        margin-right: 0;
+        margin-inline-end: 0;
       }
 
       > .pf-m-flex-1#{$breakpoint-name} {