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

package/components/HelperText/helper-text.css

@@ -12,6 +12,8 @@
   --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
   --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -56,6 +58,17 @@
   --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
   --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
+  animation-name: --pf-v6-c-helper-text-item-fade-in;
+  animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
+}
+@keyframes --pf-v6-c-helper-text-item-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 .pf-v6-c-helper-text__item.pf-m-dynamic {
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);

package/components/HelperText/helper-text.scss

@@ -16,6 +16,8 @@
   --#{$helper-text}__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$helper-text}__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
   --#{$helper-text}__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --#{$helper-text}__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --#{$helper-text}__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
 
   // dynamic
   --#{$helper-text}--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -71,6 +73,20 @@
     --#{$helper-text}__item-text--FontWeight: var(--#{$helper-text}__item-text--m-error--FontWeight);
     --#{$helper-text}__item-icon--Color: var(--#{$helper-text}__item-icon--m-error--Color);
     --#{$helper-text}--m-dynamic__item-icon--Color: var(--#{$helper-text}--m-dynamic--m-error__item-icon--Color);
+
+    animation-name: --#{$helper-text}-item-fade-in;
+    animation-duration: var(--#{$helper-text}__item--m-error--TransitionDuration--Opacity);
+    animation-timing-function: var(--#{$helper-text}__item--m-error--TransitionTimingFunction--Opacity); 
+    
+    @keyframes --#{$helper-text}-item-fade-in {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
   }
 
   &.pf-m-dynamic {

package/components/MenuToggle/menu-toggle.css

@@ -118,12 +118,16 @@
   --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
   --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
   --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
   --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
 }
@@ -272,6 +276,28 @@
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu-toggle.pf-m-danger {
+    transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
+    animation-name: pf-v6-c-menu-toggle-m-danger-motion;
+    animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
+  animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
+  animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
+}
+@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .pf-v6-c-menu-toggle.pf-m-placeholder {
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
 }
@@ -287,6 +313,21 @@
   pointer-events: none;
 }
 
+@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes pf-v6-c-menu-toggle-m-danger-motion {
+    33% {
+      --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
+    }
+    66% {
+      --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
+    }
+  }
+}
 .pf-v6-c-menu-toggle.pf-m-split-button {
   --pf-v6-c-menu-toggle--Gap: 0;
   --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);

package/components/MenuToggle/menu-toggle.scss

@@ -152,6 +152,8 @@
 
   // Status icon
   --#{$menu-toggle}__status-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$menu-toggle}__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
+  --#{$menu-toggle}__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
 
   // Success
   --#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
@@ -164,6 +166,8 @@
   // Danger
   --#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --#{$menu-toggle}--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --#{$menu-toggle}--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
 
   // Placeholder
   --#{$menu-toggle}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -337,6 +341,32 @@
   &.pf-m-danger {
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
     --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
+
+    @media screen and (prefers-reduced-motion: no-preference) {
+      transform: translateX(var(--#{$menu-toggle}--m-danger--TranslateX, 0));
+      animation-name: #{$menu-toggle}-m-danger-motion;
+      animation-duration: var(--#{$menu-toggle}--m-danger--AnimationDuration--Transform);
+      animation-timing-function: var(--#{$menu-toggle}--m-danger--AnimationTimingFunction--Transform);
+      animation-fill-mode: both;
+    }
+
+    .#{$menu-toggle}__status-icon {
+      animation-name: #{$menu-toggle}-status-icon-fade-in;
+      animation-duration: var(--#{$menu-toggle}__status-icon--m-danger--TransitionDuration--Opacity);
+      animation-timing-function: var(--#{$menu-toggle}__status-icon--m-danger--TransitionTimingFunction--Opacity);
+      
+      // stylelint-disable max-nesting-depth
+      @keyframes #{$menu-toggle}-status-icon-fade-in {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+      // stylelint-enable
+    }
   }
 
   &.pf-m-placeholder {
@@ -357,6 +387,25 @@
   }
 }
 
+// Register the property type for the custom property to be animatable
+@property --#{$menu-toggle}--m-danger--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes #{$menu-toggle}-m-danger-motion {
+    33% {
+      --#{$menu-toggle}--m-danger--TranslateX: -2px;
+    }
+    
+    66% {
+      --#{$menu-toggle}--m-danger--TranslateX: 3px;
+    }
+  }
+}
+
 // - Menu toggle split button
 .#{$menu-toggle}.pf-m-split-button {
   --#{$menu-toggle}--Gap: 0;

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

@@ -7240,6 +7240,8 @@ select ~ .pf-v6-c-form-control__utilities {
   --pf-v6-c-helper-text__item-text--m-success--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-helper-text__item-icon--m-error--Color: var(--pf-t--global--icon--color--status--danger--default);
   --pf-v6-c-helper-text__item-text--m-error--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-helper-text--m-dynamic--m-indeterminate__item-text--Color: var(--pf-t--global--text--color--subtle);
@@ -7284,6 +7286,17 @@ select ~ .pf-v6-c-form-control__utilities {
   --pf-v6-c-helper-text__item-text--FontWeight: var(--pf-v6-c-helper-text__item-text--m-error--FontWeight);
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text__item-icon--m-error--Color);
   --pf-v6-c-helper-text--m-dynamic__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic--m-error__item-icon--Color);
+  animation-name: --pf-v6-c-helper-text-item-fade-in;
+  animation-duration: var(--pf-v6-c-helper-text__item--m-error--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-helper-text__item--m-error--TransitionTimingFunction--Opacity);
+}
+@keyframes --pf-v6-c-helper-text-item-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 .pf-v6-c-helper-text__item.pf-m-dynamic {
   --pf-v6-c-helper-text__item-icon--Color: var(--pf-v6-c-helper-text--m-dynamic__item-icon--Color);
@@ -10174,12 +10187,16 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
   --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-menu-toggle--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
   --pf-v6-c-menu-toggle--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
   --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
   --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
 }
@@ -10328,6 +10345,28 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-danger--BorderColor);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-danger__status-icon--Color);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu-toggle.pf-m-danger {
+    transform: translateX(var(--pf-v6-c-menu-toggle--m-danger--TranslateX, 0));
+    animation-name: pf-v6-c-menu-toggle-m-danger-motion;
+    animation-duration: var(--pf-v6-c-menu-toggle--m-danger--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-c-menu-toggle--m-danger--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-menu-toggle.pf-m-danger .pf-v6-c-menu-toggle__status-icon {
+  animation-name: pf-v6-c-menu-toggle-status-icon-fade-in;
+  animation-duration: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-menu-toggle__status-icon--m-danger--TransitionTimingFunction--Opacity);
+}
+@keyframes pf-v6-c-menu-toggle-status-icon-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
 .pf-v6-c-menu-toggle.pf-m-placeholder {
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-placeholder--Color);
 }
@@ -10343,6 +10382,21 @@ ul.pf-v6-c-list {
   pointer-events: none;
 }
 
+@property --pf-v6-c-menu-toggle--m-danger--TranslateX {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@media (prefers-reduced-motion: no-preference) {
+  @keyframes pf-v6-c-menu-toggle-m-danger-motion {
+    33% {
+      --pf-v6-c-menu-toggle--m-danger--TranslateX: -2px;
+    }
+    66% {
+      --pf-v6-c-menu-toggle--m-danger--TranslateX: 3px;
+    }
+  }
+}
 .pf-v6-c-menu-toggle.pf-m-split-button {
   --pf-v6-c-menu-toggle--Gap: 0;
   --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
@@ -19712,13 +19766,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/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. |