@patternfly/patternfly 5.1.0-prerelease.16 → 5.1.0-prerelease.18

package/components/Drawer/drawer.css

@@ -92,9 +92,9 @@
   --pf-v5-c-drawer__actions--MarginTop: calc(var(--pf-v5-global--spacer--form-element) * -1);
   --pf-v5-c-drawer__actions--MarginRight: calc(var(--pf-v5-global--spacer--form-element) * -1);
   --pf-v5-c-drawer__panel--BoxShadow: none;
+  --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
   --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
   --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
-  --pf-v5-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-top);
   --pf-v5-c-drawer__panel--after--Width: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-drawer--m-panel-bottom__panel--after--Height: var(--pf-v5-global--BorderWidth--sm);
   --pf-v5-c-drawer__panel--after--BackgroundColor: transparent;
@@ -128,6 +128,14 @@
     --pf-v5-c-drawer__panel--MinHeight: var(--pf-v5-c-drawer--m-panel-bottom__panel--xl--MinHeight);
   }
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
+  --pf-v5-c-drawer--m-expanded__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-right);
+}
+
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer {
+  --pf-v5-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-v5-global--BoxShadow--lg-left);
+}
+
 .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v5-c-drawer.pf-m-static > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v5-c-drawer--m-inline__panel--PaddingLeft);
 }
@@ -136,6 +144,10 @@
   margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-drawer.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__content {
   order: 1;
 }
@@ -145,6 +157,10 @@
 .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
   transform: translateX(-100%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+  transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
   transform: translateX(0);
 }
@@ -359,6 +375,10 @@
   inset-inline-start: var(--pf-v5-c-drawer__splitter-handle--Left);
   transform: translate(-50%, -50%);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer__splitter-handle {
+  transform: translate(calc(-50% * var(--pf-v5-global--inverse--multiplier)), -50%);
+}
+
 .pf-v5-c-drawer__splitter-handle::after {
   display: block;
   width: var(--pf-v5-c-drawer__splitter-handle--after--Width);
@@ -564,6 +584,9 @@
     margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-start: 0;
     transform: translateX(0);
@@ -576,6 +599,9 @@
     margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-end: 0;
     transform: translateX(0);
@@ -625,6 +651,9 @@
     margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-start: 0;
     transform: translateX(0);
@@ -637,6 +666,9 @@
     margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-lg.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-end: 0;
     transform: translateX(0);
@@ -686,6 +718,9 @@
     margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-start: 0;
     transform: translateX(0);
@@ -698,6 +733,9 @@
     margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-end: 0;
     transform: translateX(0);
@@ -747,6 +785,9 @@
     margin-inline-start: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-start: 0;
     transform: translateX(0);
@@ -759,6 +800,9 @@
     margin-inline-end: calc(var(--pf-v5-c-drawer__panel--FlexBasis) * -1);
     transform: translateX(-100%);
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
+    transform: translateX(calc(-100% * var(--pf-v5-global--inverse--multiplier)));
+  }
   .pf-v5-c-drawer.pf-m-inline-on-2xl.pf-m-panel-left.pf-m-expanded > .pf-v5-c-drawer__main > .pf-v5-c-drawer__panel {
     margin-inline-end: 0;
     transform: translateX(0);

package/components/Drawer/drawer.scss

@@ -147,10 +147,19 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   // Box shadow
   --#{$drawer}__panel--BoxShadow: none;
-  --#{$drawer}--m-expanded__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-left);
-  --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-right);
   --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--#{$pf-global}--BoxShadow--lg-top);
 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
+    $ltr-val: var(--#{$pf-global}--BoxShadow--lg-left),
+    $rtl-val: var(--#{$pf-global}--BoxShadow--lg-right)
+  ); 
+  @include pf-v5-bidirectional-style(
+    $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
+    $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
+    $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
+  ); 
+
   // Divider
   --#{$drawer}__panel--after--Width: var(--#{$pf-global}--BorderWidth--sm);
   --#{$drawer}--m-panel-bottom__panel--after--Height: var(--#{$pf-global}--BorderWidth--sm);
@@ -176,7 +185,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     > .#{$drawer}__panel {
       order: 0;
       margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-      transform: translateX(-100%);
+
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(-100%),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+      ); 
     }
 
     > .#{$drawer}__content {
@@ -192,7 +206,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // stylelint-disable selector-max-class
   &.pf-m-expanded {
     > .#{$drawer}__main > .#{$drawer}__panel {
-      transform: translateX(-100%);
+      @include pf-v5-bidirectional-style(
+        $prop: transform,
+        $ltr-val: translateX(-100%),
+        $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+      ); 
     }
 
     &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -432,9 +450,15 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 .#{$drawer}__splitter-handle {
   position: absolute;
- inset-block-start: var(--#{$drawer}__splitter-handle--Top);
- inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
-  transform: translate(-50%, -50%);
+  inset-block-start: var(--#{$drawer}__splitter-handle--Top);
+  inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
+
+  @include pf-v5-bidirectional-style(
+    $prop: transform,
+    $ltr-val: translate(-50%, -50%),
+    $rtl-val: translate(#{pf-v5-calc-inverse(-50%)}, -50%),
+  ); 
+
 
   &::after {
     display: block;
@@ -642,7 +666,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
       > .#{$drawer}__main > .#{$drawer}__panel {
         margin-inline-start: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-        transform: translateX(100%);
+
+        @include pf-v5-bidirectional-style(
+          $prop: transform,
+          $ltr-val: translateX(100%),
+          $rtl-val: translateX(#{pf-v5-calc-inverse(100%)}),
+        ); 
       }
 
       // stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors
@@ -661,7 +690,12 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
         > .#{$drawer}__main > .#{$drawer}__panel {
           margin-inline-start: 0;
           margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
-          transform: translateX(-100%);
+
+          @include pf-v5-bidirectional-style(
+            $prop: transform,
+            $ltr-val: translateX(-100%),
+            $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
+          ); 
         }
 
         // Inline, expanded, panel left

package/components/Form/form.css

@@ -453,6 +453,9 @@
   transition: var(--pf-v5-c-form__field-group-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-form__field-group-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-form__field-group-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-form__field-group-header {
   display: flex;

package/components/Form/form.scss

@@ -465,6 +465,8 @@ $pf-v5-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   text-align: center;
   transition: var(--#{$form}__field-group-toggle-icon--Transition);
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
+
+  @include pf-v5-mirror-inline-on-rtl;
 }
 
 .#{$form}__field-group-header {

package/components/Skeleton/skeleton.css

@@ -66,6 +66,10 @@
   transform: translate3d(var(--pf-v5-c-skeleton--after--TranslateX), 0, 0);
   animation: var(--pf-v5-c-skeleton--after--AnimationName) var(--pf-v5-c-skeleton--after--AnimationDuration) var(--pf-v5-c-skeleton--after--AnimationTimingFunction) var(--pf-v5-c-skeleton--after--AnimationDelay) var(--pf-v5-c-skeleton--after--AnimationIterationCount);
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-skeleton::after {
+  scale: -1 1;
+}
+
 .pf-v5-c-skeleton.pf-m-circle {
   --pf-v5-c-skeleton--BorderRadius: var(--pf-v5-c-skeleton--m-circle--BorderRadius);
 }

package/components/Skeleton/skeleton.scss

@@ -73,6 +73,8 @@
   }
 
   &::after {
+    @include pf-v5-mirror-inline-on-rtl;
+
     position: absolute;
     inset: 0;
     display: block;

package/components/Table/table-scrollable.css

@@ -32,10 +32,10 @@
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftWidth: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftWidth);
   --pf-v5-c-table--cell--m-border-left--before--BorderLeftColor: var(--pf-v5-c-table__sticky-cell--m-border-left--before--BorderLeftColor);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-right, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-end {
   --pf-v5-c-table__sticky-cell--Right: var(--pf-v5-c-table__sticky-cell--m-right--Right);
 }
-.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left {
+.pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-left, .pf-v5-c-table .pf-v5-c-table__sticky-cell.pf-m-inline-start {
   --pf-v5-c-table__sticky-cell--Left: var(--pf-v5-c-table__sticky-cell--m-left--Left);
 }
 

package/components/Table/table-scrollable.scss

@@ -35,11 +35,13 @@
       --#{$table}--cell--m-border-left--before--BorderLeftColor: var(--#{$table}__sticky-cell--m-border-left--before--BorderLeftColor);
     }
 
-    &.pf-m-right {
+    &.pf-m-right, 
+    &.pf-m-inline-end {
       --#{$table}__sticky-cell--Right: var(--#{$table}__sticky-cell--m-right--Right);
     }
 
-    &.pf-m-left {
+    &.pf-m-left, 
+    &.pf-m-inline-start {
       --#{$table}__sticky-cell--Left: var(--#{$table}__sticky-cell--m-left--Left);
     }
 

package/components/Table/table-tree-view.css

@@ -65,10 +65,14 @@
   cursor: pointer;
 }
 .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
+  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
   position: var(--pf-v5-c-table--m-tree-view__toggle--Position);
   inset-inline-start: var(--pf-v5-c-table--m-tree-view__toggle--Left);
-  transform: translateX(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle {
+  transform: translateX(calc(var(--pf-v5-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
+
 .pf-v5-c-table__tree-view-main > .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
   min-width: var(--pf-v5-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
 }

package/components/Table/table-tree-view.scss

@@ -66,9 +66,14 @@ $pf-v5-c-tree-view--MaxDepth: 10;
   cursor: pointer;
 
   > .#{$table}__toggle {
+    @include pf-v5-bidirectional-style (
+      $prop: 'transform',
+      $ltr-val: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX)),
+      $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$table}--m-tree-view__toggle--TranslateX))})
+    );
+
     position: var(--#{$table}--m-tree-view__toggle--Position);
-   inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
-    transform: translateX(var(--#{$table}--m-tree-view__toggle--TranslateX));
+    inset-inline-start: var(--#{$table}--m-tree-view__toggle--Left);
 
     .#{$table}__toggle-icon {
       min-width: var(--#{$table}--m-tree-view__toggle__toggle-icon--MinWidth);

package/components/Table/table.css

@@ -734,6 +734,10 @@
   transition: var(--pf-v5-c-table__toggle--c-button__toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-table__toggle--c-button__toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-table__toggle .pf-v5-c-table__toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v5-c-table__toggle svg {
   pointer-events: none;
 }

package/components/Table/table.scss

@@ -971,6 +971,8 @@
   }
 
   .#{$table}__toggle-icon {
+    @include pf-v5-mirror-inline-on-rtl;
+
     transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }

package/docs/components/Table/examples/Table.md

@@ -27051,8 +27051,8 @@ For sticky columns to function correctly, the parent table's width must be contr
 | `.pf-v5-c-scroll-outer-wrapper` | `<div>` | Initiates a table container sticky columns outer wrapper. |
 | `.pf-v5-c-scroll-inner-wrapper` | `<div>` | Initiates a table container sticky columns inner wrapper. |
 | `.pf-v5-c-table__sticky-cell` | `<th>`, `<td>` | Initiates a sticky table cell. |
-| `.pf-m-right` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand table cell. |
-| `.pf-m-left` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand table cell. |
+| `.pf-m-right`, `.pf-m-inline-end` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, right-hand (in LTR) or left-hand (in RTL) table cell. |
+| `.pf-m-left`, `.pf-m-inline-start` | `.pf-v5-c-table__sticky-cell` | Initiates a sticky, left-hand (in LTR) or right-hand (in RTL) table cell. |
 
 ## Nested column headers
 

package/docs/demos/Skeleton/examples/Skeleton.md

@@ -206,11 +206,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -231,11 +227,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -256,11 +248,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -281,11 +269,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -306,11 +290,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -331,11 +311,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
@@ -356,11 +332,7 @@ section: components
             </div>
           </div>
           <div class="pf-v5-c-card__body">
-            <div class="pf-v5-c-skeleton">
-              <div class="pf-v5-l-bullseye">
-                <div class="pf-v5-c-skeleton pf-m-circle pf-m-width-md"></div>
-              </div>
-            </div>
+            <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
           </div>
           <div class="pf-v5-c-card__body">
             <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.1.0-prerelease.16",
+  "version": "5.1.0-prerelease.18",
   "keywords": [],
   "license": "MIT",
   "scripts": {