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

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/_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;

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.18",
   "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;

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;