@patternfly/patternfly 6.2.0-prerelease.8 → 6.2.0

package/docs/components/Alert/examples/Alert.md

@@ -727,6 +727,12 @@ For sighted users, interactive elements can be included in this message in one o
         <span class="pf-v6-screen-reader">Success alert:</span>
         Success toast alert title
       </p>
+      <div class="pf-v6-c-alert__description">
+        <p>
+          Info toast alert description. From the settings tab, click
+          <a href="#">View logs</a>&nbsp;to review the details.
+        </p>
+      </div>
       <div class="pf-v6-c-alert__action">
         <button
           class="pf-v6-c-button pf-m-plain"

package/docs/components/Button/examples/Button.md

@@ -1999,6 +1999,32 @@ For when a plain/icon button is placed inline with text
 
 ```
 
+### Favorite
+
+A favorite button should use a plain button with the star icon. Applying `.pf-m-favorited` to the button initiates a microanimation and indicates that the item is favorited.
+
+```html
+<button
+  class="pf-v6-c-button pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="not starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2052,3 +2078,6 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
+| `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
+| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |

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/ClipboardCopy/examples/ClipboardCopy.md

@@ -503,6 +503,34 @@ cssPrefix: pf-v6-c-clipboard-copy
 
 ```
 
+### Inline compact with truncation
+
+```html
+<div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-truncate">
+  <span class="pf-v6-c-clipboard-copy__text">
+    <span class="pf-v6-c-truncate">
+      <span
+        class="pf-v6-c-truncate__start"
+      >This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to true. This is useful for quickly applying truncation without needing to worry about any other properties to set.</span>
+    </span>
+  </span>
+  <span class="pf-v6-c-clipboard-copy__actions">
+    <span class="pf-v6-c-clipboard-copy__actions-item">
+      <button
+        class="pf-v6-c-button pf-m-no-padding pf-m-plain"
+        type="button"
+        aria-label="Copy to clipboard"
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-copy" aria-hidden="true"></i>
+        </span>
+      </button>
+    </span>
+  </span>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -529,6 +557,7 @@ cssPrefix: pf-v6-c-clipboard-copy
 | `.pf-v6-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
 | `.pf-m-inline` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
 | `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
+| `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
 | `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
 | `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |

package/docs/components/DataList/examples/DataList.md

@@ -1757,7 +1757,7 @@ When a list item includes more than one block of content, it can be difficult fo
   id="draggable-help"
 >Activate the reorder button and use the arrow keys to reorder the list or use your mouse to drag/reorder. Press escape to cancel the reordering.</div>
 <ul
-  class="pf-v6-c-data-list"
+  class="pf-v6-c-data-list pf-m-compact"
   role="list"
   aria-label="Draggable data list rows"
   id="data-list-draggable"

package/docs/components/Menu/examples/Menu.md

@@ -5640,9 +5640,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5666,9 +5666,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5699,7 +5699,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"
@@ -5728,7 +5728,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"

package/docs/components/Nav/examples/Navigation.md

@@ -230,6 +230,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="expandable-example3"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">
@@ -376,6 +377,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="nav-mixed-link4"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">
@@ -442,6 +444,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="expandable-third-level-example-example-1"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">

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

@@ -20222,12 +20222,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button1"
@@ -20284,7 +20281,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button2"
@@ -20337,12 +20334,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button3"
@@ -20397,7 +20391,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button4"
@@ -20459,7 +20453,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-v6-c-action-list pf-m-icons">
           <div class="pf-v6-c-action-list__item">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               aria-label="Favorite all"
             >
@@ -20502,12 +20496,9 @@ For sticky columns to function correctly, the parent table's width must be contr
 
   <tbody class="pf-v6-c-table__tbody" role="rowgroup">
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button1"
@@ -20534,12 +20525,9 @@ For sticky columns to function correctly, the parent table's width must be contr
     </tr>
 
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button3"
@@ -20566,7 +20554,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button2"
@@ -20593,7 +20581,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button4"
@@ -20620,7 +20608,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button5"

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. |