@patternfly/patternfly 6.2.0-prerelease.17 → 6.2.0-prerelease.19

package/components/Card/card.css

@@ -23,6 +23,8 @@
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -186,6 +188,21 @@
 .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
   order: 2;
 }
+.pf-v6-c-card__header.pf-m-wrap {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
+}
+.pf-v6-c-card__header.pf-m-wrap,
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  flex-wrap: wrap;
+  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+  margin-inline-end: auto;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;

package/components/Card/card.scss

@@ -25,6 +25,8 @@
   --#{$card}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$card}__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
 
   // Expandable
   --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -265,6 +267,26 @@
       order: 2;
     }
   }
+
+  &.pf-m-wrap {
+    --pf-v6-c-card__actions--PaddingInlineStart: 0;
+
+    gap: var(--#{$card}__header--m-wrap--RowGap) var(--#{$card}__header--m-wrap--ColumnGap);
+
+    &,
+    .#{$card}__actions {
+      flex-wrap: wrap;
+      row-gap: var(--#{$card}__header--m-wrap--RowGap);
+    }
+
+    .#{$card}__actions {
+      + * {
+        margin-inline-end: auto;
+      }
+
+      margin-inline-start: 0
+    }
+  }
 }
 
 .#{$card}__header-main {

package/components/Page/page.css

@@ -36,12 +36,18 @@
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --pf-v6-c-page__main-container--AlignSelf: start;
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
+  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
+  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
+  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
+  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
+  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -399,7 +405,7 @@
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
-  align-self: start;
+  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -407,6 +413,15 @@
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page__main-container {
+    --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
+    --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
+  }
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {

package/components/Page/page.scss

@@ -60,12 +60,18 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-container--GridArea: main;
   --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
   --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --#{$page}__main-container--AlignSelf: start;
   --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset); 
+  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
   --#{$page}__main-container--MarginInlineEnd: var(--#{$page}--inset);
   --#{$page}__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
   --#{$page}__main-container--BorderWidth: #{pf-size-prem(4px)}; // TODO Change to be a page outline token
   --#{$page}__main-container--BorderColor: var(--#{$page}__main-container--BackgroundColor); // TODO Border should match the background to blend in - change to be a page outline token
+  --#{$page}__main-container--xs--AlignSelf: stretch;
+  --#{$page}__main-container--xs--BorderRadius: 0;
+  --#{$page}__main-container--xs--MarginInlineStart: 0;
+  --#{$page}__main-container--xs--MaxHeight: 100%;
+  --#{$page}__main-container--xs--MarginInlineEnd: 0;
 
   // Main section
   --#{$page}__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -80,7 +86,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Limit width
   --#{$page}--section--m-limit-width--MaxWidth: calc(#{pf-size-prem(2000px)} - var(--#{$page}__sidebar--Width));
-  
+
   // Sticky
   --#{$page}--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
   --#{$page}--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -320,13 +326,21 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-container {
   display: flex;
   flex-direction: column;
-  align-self: start;
+  align-self: var(--#{$page}__main-container--AlignSelf);
   max-height: var(--#{$page}__main-container--MaxHeight);
   margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
   margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
   background: var(--#{$page}__main-container--BackgroundColor);
   border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
   border-radius: var(--#{$page}__main-container--BorderRadius);
+
+  @media screen and (max-width: pf-v6-max-width-bp($pf-v6-global--breakpoint--md)) {
+    --#{$page}__main-container--AlignSelf: var(--#{$page}__main-container--xs--AlignSelf);
+    --#{$page}__main-container--MarginInlineStart: var(--#{$page}__main-container--xs--MarginInlineStart);
+    --#{$page}__main-container--MarginInlineEnd: var(--#{$page}__main-container--xs--MarginInlineEnd);
+    --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--xs--MaxHeight);
+    --#{$page}__main-container--BorderRadius: var(--#{$page}__main-container--xs--BorderRadius);
+  }
 }
 
 .#{$page}__main-container,

package/components/_index.css

@@ -2310,6 +2310,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -2473,6 +2475,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
   order: 2;
 }
+.pf-v6-c-card__header.pf-m-wrap {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
+}
+.pf-v6-c-card__header.pf-m-wrap,
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  flex-wrap: wrap;
+  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+  margin-inline-end: auto;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -11652,12 +11669,18 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --pf-v6-c-page__main-container--AlignSelf: start;
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
+  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
+  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
+  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
+  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
+  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -12015,7 +12038,7 @@ ul.pf-v6-c-list {
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
-  align-self: start;
+  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -12023,6 +12046,15 @@ ul.pf-v6-c-list {
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page__main-container {
+    --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
+    --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
+  }
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {

package/docs/components/Card/examples/Card.md

@@ -212,6 +212,35 @@ cssPrefix: pf-v6-c-card
 
 ```
 
+### Card with header that wraps
+
+```html
+<div class="pf-v6-c-card">
+  <div class="pf-v6-c-card__header pf-m-wrap">
+    <div class="pf-v6-c-card__actions pf-m-no-offset">
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Primary action</span>
+      </button>
+
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Secondary action</span>
+      </button>
+
+      <button class="pf-v6-c-button pf-m-tertiary" type="button">
+        <span class="pf-v6-c-button__text">Tertiary action</span>
+      </button>
+    </div>
+    <div class="pf-v6-c-card__title">
+      <h2
+        class="pf-v6-c-card__title-text"
+      >This is a longer card title that takes up more space</h2>
+    </div>
+  </div>
+  <div class="pf-v6-c-card__body">This is the card body</div>
+</div>
+
+```
+
 ### Actions with no offset
 
 ```html
@@ -1690,6 +1719,7 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-v6-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused. |
 | `.pf-m-compact` | `.pf-v6-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
 | `.pf-m-display-lg` | `.pf-v6-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-wrap` | `.pf-v6-c-card__header` | Modifies the card header to wrap its children. |
 | `.pf-m-no-fill` | `.pf-v6-c-card__body` | Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
 | `.pf-m-selectable` | `.pf-v6-c-card` | Modifies a card to be selectable.  |
 | `.pf-m-clickable` | `.pf-v6-c-card` | Modifies a card to be clickable. |

package/docs/components/Tabs/examples/Tabs.md

@@ -9099,14 +9099,137 @@ cssPrefix: pf-v6-c-tabs
 
 ```
 
+## Tab content
+
+### Default tab content example
+
+```html
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab1-panel"
+  role="tabpanel"
+  tabindex="0"
+>
+  <div class="pf-v6-c-tab-content__body">Panel 1</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab2-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 2</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab3-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 3</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab4-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 4</div>
+</section>
+
+```
+
+### Padding
+
+```html
+<section
+  class="pf-v6-c-tab-content"
+  id="tab1-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 1</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="tab2-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 2</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="tab3-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 3</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="tab4-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 4</div>
+</section>
+
+```
+
+### Secondary
+
+```html
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab1-panel"
+  role="tabpanel"
+  tabindex="0"
+>
+  <div class="pf-v6-c-tab-content__body">Panel 1</div>
+</section>
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab2-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 2</div>
+</section>
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab3-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 3</div>
+</section>
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab4-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 4</div>
+</section>
+
+```
+
 ## Documentation
 
-### Overview
+### Tabs overview
 
 The tabs component should only be used to change content views within a page. The similar-looking but semantically different [horizontal nav component](/components/navigation/#horizontal) is available for general navigation use cases.
 
-Tabs should be used with the [tab content component](/components/tab-content).
-
 Whenever a list of tabs is unique on the current page, it can be used in a `<nav>` element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the `<nav>` element.
 
 ### Usage
@@ -9144,3 +9267,22 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-m-expanded` | `.pf-v6-c-tabs` | Modifies the expandable tabs component for the expanded state. |
 | `.pf-m-disabled` | `a.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles. |
 | `.pf-m-aria-disabled` | `.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
+
+### Tab content accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `role="tabpanel"` | `.pf-v6-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
+| `aria-labelledby=[ID of tab element]` | `.pf-v6-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**
+| `id=[ID of tab panel]` | `.pf-v6-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required**
+| `hidden` | `.pf-v6-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
+| `tabindex="0"` | `.pf-v6-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**
+
+### Tab content usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-tab-content` | `<section>` |  Initiates the tab content component. **Required** |
+| `.pf-v6-c-tab-content__body` | `<div>` |  Initiates the tab content body component. |
+| `.pf-m-padding` | `.pf-v6-c-tab-content__body` | Modifies the tab content body component padding. |
+| `.pf-m-secondary` | `.pf-v6-c-tab-content` |  Modifies the tab content component for secondary styles. |

package/package.json

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

package/patternfly-no-globals.css

@@ -9772,6 +9772,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -9935,6 +9937,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
   order: 2;
 }
+.pf-v6-c-card__header.pf-m-wrap {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
+}
+.pf-v6-c-card__header.pf-m-wrap,
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  flex-wrap: wrap;
+  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+  margin-inline-end: auto;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -19114,12 +19131,18 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --pf-v6-c-page__main-container--AlignSelf: start;
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
+  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
+  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
+  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
+  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
+  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19477,7 +19500,7 @@ ul.pf-v6-c-list {
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
-  align-self: start;
+  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -19485,6 +19508,15 @@ ul.pf-v6-c-list {
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page__main-container {
+    --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
+    --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
+  }
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {

package/patternfly.css

@@ -9908,6 +9908,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -10071,6 +10073,21 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
   order: 2;
 }
+.pf-v6-c-card__header.pf-m-wrap {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
+}
+.pf-v6-c-card__header.pf-m-wrap,
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  flex-wrap: wrap;
+  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+  margin-inline-end: auto;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -19250,12 +19267,18 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
   --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
+  --pf-v6-c-page__main-container--AlignSelf: start;
   --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
   --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
+  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
+  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
+  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
+  --pf-v6-c-page__main-container--xs--MaxHeight: 100%;
+  --pf-v6-c-page__main-container--xs--MarginInlineEnd: 0;
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19613,7 +19636,7 @@ ul.pf-v6-c-list {
 .pf-v6-c-page__main-container {
   display: flex;
   flex-direction: column;
-  align-self: start;
+  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
@@ -19621,6 +19644,15 @@ ul.pf-v6-c-list {
   border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
   border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
 }
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page__main-container {
+    --pf-v6-c-page__main-container--AlignSelf: var(--pf-v6-c-page__main-container--xs--AlignSelf);
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--xs--MaxHeight);
+    --pf-v6-c-page__main-container--BorderRadius: var(--pf-v6-c-page__main-container--xs--BorderRadius);
+  }
+}
 
 .pf-v6-c-page__main-container,
 .pf-v6-c-page__drawer {