@patternfly/patternfly 6.2.0-prerelease.16 → 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/Toolbar/toolbar.css

@@ -217,13 +217,18 @@
 }
 .pf-v6-c-toolbar.pf-m-full-height {
   --pf-v6-c-toolbar--PaddingBlockStart: 0;
-  --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
 }
 .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
 .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
   align-items: stretch;
   align-self: stretch;
 }
+.pf-v6-c-toolbar.pf-m-no-padding {
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
+  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
+}
 .pf-v6-c-toolbar.pf-m-primary {
   --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
 }

package/components/Toolbar/toolbar.scss

@@ -160,7 +160,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
   // - Toolbar full height
   &.pf-m-full-height {
     --#{$toolbar}--PaddingBlockStart: 0;
-    --#{$toolbar}--PaddinkBlockEnd: 0;
+    --#{$toolbar}--PaddingBlockEnd: 0;
 
     .#{$toolbar}__group,
     .#{$toolbar}__item {
@@ -169,6 +169,12 @@ $pf-v6--include-toolbar-breakpoints: true !default;
     }
   }
 
+  &.pf-m-no-padding {
+    --#{$toolbar}--PaddingBlockEnd: 0;
+    --#{$toolbar}--m-sticky--PaddingBlockStart: 0;
+    --#{$toolbar}--m-sticky--PaddingBlockEnd: 0;
+  }
+
   // - Toolbar background modifiers
   &.pf-m-primary {
     --#{$toolbar}--BackgroundColor: var(--#{$toolbar}--m-primary--BackgroundColor);

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;
@@ -19766,13 +19783,18 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 .pf-v6-c-toolbar.pf-m-full-height {
   --pf-v6-c-toolbar--PaddingBlockStart: 0;
-  --pf-v6-c-toolbar--PaddinkBlockEnd: 0;
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
 }
 .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__group,
 .pf-v6-c-toolbar.pf-m-full-height .pf-v6-c-toolbar__item {
   align-items: stretch;
   align-self: stretch;
 }
+.pf-v6-c-toolbar.pf-m-no-padding {
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: 0;
+  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: 0;
+}
 .pf-v6-c-toolbar.pf-m-primary {
   --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-primary--BackgroundColor);
 }

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/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -1461,8 +1461,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
+| `.pf-v6-c-text-input-group` | `<div>` | Creates a text input group. *Required* |
+| `.pf-v6-c-text-input-group__main` | `<div>` | Creates a wrapper for the main content. *Required* |
+| `.pf-v6-c-text-input-group__text` | `<span>` | Creates the text container. *Required*|
+| `.pf-v6-c-text-input-group__icon` | `<span>` | Creates a container for an icon. |
+| `.pf-v6-c-text-input-group__text-input` | `<input>` | Creates a text input. *Required* |
+| `.pf-v6-c-text-input-group__utilities` | `<div>` | Creates text input utilities container. |
+| `.pf-v6-c-text-input-group__group` | `<div>` | Creates text input prev/next nav group. |
+| `.pf-m-plain` | `.pf-v6-c-text-input-group` | Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling. |
+| `.pf-m-disabled` | `.pf-v6-c-text-input-group` | Applies disabled styling. The `<input>` should also be `disabled`. |
 | `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
 | `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
 | `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
 | `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
 | `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |
+| `.pf-m-hint` | `.pf-v6-c-text-input-group__text-input` | Applies styling when hints are included in the container. |

package/docs/components/Toolbar/examples/Toolbar.css

@@ -28,6 +28,7 @@
 #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar__group,
 #ws-core-e-toolbar-simple .pf-v6-c-toolbar,
 #ws-core-e-toolbar-simple .pf-v6-c-toolbar__group,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar,
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar,
@@ -50,6 +51,7 @@
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,
@@ -64,6 +66,7 @@
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,

package/docs/components/Toolbar/examples/Toolbar.md

@@ -75,6 +75,33 @@ Several components in the following examples do not include functional and/or ac
 | `.pf-v6-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
 | `.pf-v6-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
 
+### No padding
+
+```html
+<div class="pf-v6-c-toolbar pf-m-no-padding" id="toolbar-simple-example">
+  <div class="pf-v6-c-toolbar__content">
+    <div class="pf-v6-c-toolbar__content-section">
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <hr class="pf-v6-c-divider pf-m-vertical" />
+
+      <div class="pf-v6-c-toolbar__group">
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+      </div>
+
+      <hr class="pf-v6-c-divider pf-m-vertical" />
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Adjusted group column gap
 
 ```html
@@ -2607,6 +2634,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-static` | `.pf-v6-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
 | `.pf-m-primary` | `.pf-v6-c-toolbar` | Modifies toolbar to have primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
+| `.pf-m-no-padding` | `.pf-v6-c-toolbar` | Modifies toolbar to have no padding. |
 | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |