@patternfly/react-styles 6.5.0-prerelease.2 → 6.5.0-prerelease.21

package/css/components/ToggleGroup/toggle-group.css

@@ -6,34 +6,41 @@
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-toggle-group__button--ZIndex: auto;
-  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
+  --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
+  --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
   --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
   --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
-  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
+  --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
+  --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
+  --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
   --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
-  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
-  --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
+  --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
+  --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
+  --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
+  --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
+  --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
+  --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
+  --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
+  --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
   --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
   --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
-  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
-  --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
+  --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
+  --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
@@ -48,6 +55,14 @@
   --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
 }
+.pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
+  display: flex;
+  flex-grow: 1;
+}
+.pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
+  flex-basis: 100%;
+  justify-content: center;
+}
 
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
   margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
@@ -97,9 +112,11 @@
 }
 .pf-v6-c-toggle-group__button:is(:hover, :focus) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
+  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
   --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
+  --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
   text-decoration-line: none;
 }
 .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -107,22 +124,30 @@
   --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
+  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
+  --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
   --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
+  --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
 }
 .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
   --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
   --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
   --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
   --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
+  --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
   pointer-events: none;
 }
 
 .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
-  --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
+  --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
 }
 
 .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
-  --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
+  --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
+}
+
+.pf-v6-c-toggle-group__icon {
+  color: var(--pf-v6-c-toggle-group__icon--Color);
 }
 
 .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,

package/css/components/ToggleGroup/toggle-group.d.ts

@@ -2,6 +2,7 @@ import './toggle-group.css';
 declare const _default: {
   "modifiers": {
     "compact": "pf-m-compact",
+    "fill": "pf-m-fill",
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },

package/css/components/ToggleGroup/toggle-group.js

@@ -4,6 +4,7 @@ require('./toggle-group.css');
 exports.default = {
   "modifiers": {
     "compact": "pf-m-compact",
+    "fill": "pf-m-fill",
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },

package/css/components/ToggleGroup/toggle-group.mjs

@@ -2,6 +2,7 @@ import './toggle-group.css';
 export default {
   "modifiers": {
     "compact": "pf-m-compact",
+    "fill": "pf-m-fill",
     "selected": "pf-m-selected",
     "disabled": "pf-m-disabled"
   },

package/css/components/Toolbar/toolbar.css

@@ -36,14 +36,33 @@
   --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
+  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
   --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
-  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
+  --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
+  --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
+  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
+  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
+  --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
+  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
+  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
+}
+.pf-v6-c-toolbar {
+  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
   --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
   --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
+  --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
   --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -65,6 +84,66 @@
 .pf-v6-c-toolbar__item.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
+@media screen and (min-height: 0) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 40rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 48rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 60rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 80rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
 @media screen and (min-width: 36rem) {
   .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
   .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
@@ -136,13 +215,50 @@
   --pf-v6-hidden-visible--hidden--Display: none;
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   display: var(--pf-v6-hidden-visible--Display);
-  row-gap: var(--pf-v6-c-toolbar__content--RowGap);
-  padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
 }
 .pf-v6-c-toolbar__content.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
+@media screen and (min-height: 0) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 40rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 48rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 60rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 80rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
 @media screen and (min-width: 36rem) {
   .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -183,6 +299,11 @@
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
   }
 }
+.pf-v6-c-toolbar__content {
+  row-gap: var(--pf-v6-c-toolbar__content--RowGap);
+  padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
+}
 
 .pf-v6-c-toolbar__content-section {
   flex-wrap: wrap;
@@ -213,6 +334,35 @@
   border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
   box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
 }
+.pf-v6-c-toolbar.pf-m-sticky-base {
+  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
+  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
+  background: transparent;
+  border-radius: inherit;
+}
+.pf-v6-c-toolbar.pf-m-sticky-base::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: "";
+  background: var(--pf-v6-c-toolbar--BackgroundColor);
+  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
+  border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
+  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
+  opacity: 0;
+  transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
+  transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
+  transition-property: opacity;
+}
+.pf-v6-c-toolbar.pf-m-sticky-stuck::before {
+  opacity: 1;
+}
 .pf-v6-c-toolbar.pf-m-static,
 .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
   position: static;
@@ -243,14 +393,19 @@
 .pf-v6-c-toolbar.pf-m-no-background {
   --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
 }
+.pf-v6-c-toolbar.pf-m-vertical {
+  --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
+  --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
+}
+.pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
+  flex-direction: column;
+  align-items: center;
+}
 
 .pf-v6-c-toolbar__item {
   --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
-  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
-  row-gap: var(--pf-v6-c-toolbar__item--RowGap);
-  column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
-  width: var(--pf-v6-c-toolbar__item--Width--base);
-  min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
 }
 @media (min-width: 36rem) {
   .pf-v6-c-toolbar__item {
@@ -277,6 +432,9 @@
     --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
   }
 }
+.pf-v6-c-toolbar__item {
+  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
+}
 @media (min-width: 36rem) {
   .pf-v6-c-toolbar__item {
     --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
@@ -302,6 +460,12 @@
     --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
   }
 }
+.pf-v6-c-toolbar__item {
+  row-gap: var(--pf-v6-c-toolbar__item--RowGap);
+  column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
+  width: var(--pf-v6-c-toolbar__item--Width--base);
+  min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
+}
 .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
   --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
 }
@@ -322,6 +486,9 @@
   row-gap: var(--pf-v6-c-toolbar__group--RowGap);
   column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
 }
+.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
+  row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
+}
 .pf-v6-c-toolbar__group.pf-m-filter-group {
   column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
 }
@@ -333,9 +500,15 @@
 .pf-v6-c-toolbar__group.pf-m-action-group {
   column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
 }
+.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
+  row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
+}
 .pf-v6-c-toolbar__group.pf-m-action-group-plain {
   column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
 }
+.pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
+  row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
+}
 .pf-v6-c-toolbar__group.pf-m-action-group-inline {
   flex-wrap: wrap;
   column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -412,7 +585,8 @@
 }
 .pf-v6-c-toolbar__group.pf-m-align-end,
 .pf-v6-c-toolbar__item.pf-m-align-end {
-  margin-inline-start: auto;
+  margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+  margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
 }
 .pf-v6-c-toolbar__group.pf-m-flex-grow,
 .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -667,7 +841,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -919,7 +1094,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -1171,7 +1347,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -1423,7 +1600,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -1675,7 +1853,8 @@
   }
   .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
   .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
-    margin-inline-start: auto;
+    margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
+    margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
   }
   .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
   .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {

package/css/components/Toolbar/toolbar.d.ts

@@ -3,6 +3,16 @@ declare const _default: {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
+    "hiddenOnSmHeight": "pf-m-hidden-on-sm-height",
+    "visibleOnSmHeight": "pf-m-visible-on-sm-height",
+    "hiddenOnMdHeight": "pf-m-hidden-on-md-height",
+    "visibleOnMdHeight": "pf-m-visible-on-md-height",
+    "hiddenOnLgHeight": "pf-m-hidden-on-lg-height",
+    "visibleOnLgHeight": "pf-m-visible-on-lg-height",
+    "hiddenOnXlHeight": "pf-m-hidden-on-xl-height",
+    "visibleOnXlHeight": "pf-m-visible-on-xl-height",
+    "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
+    "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",
     "hiddenOnMd": "pf-m-hidden-on-md",
@@ -14,12 +24,15 @@ declare const _default: {
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
     "sticky": "pf-m-sticky",
+    "stickyBase": "pf-m-sticky-base",
+    "stickyStuck": "pf-m-sticky-stuck",
     "static": "pf-m-static",
     "fullHeight": "pf-m-full-height",
     "noPadding": "pf-m-no-padding",
     "primary": "pf-m-primary",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
+    "vertical": "pf-m-vertical",
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
@@ -357,6 +370,7 @@ declare const _default: {
     "hideOn_2xl": "pf-m-hide-on-2xl"
   },
   "pagination": "pf-v6-c-pagination",
+  "themeGlass": "pf-v6-theme-glass",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContent": "pf-v6-c-toolbar__content",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section",

package/css/components/Toolbar/toolbar.js

@@ -5,6 +5,16 @@ exports.default = {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
+    "hiddenOnSmHeight": "pf-m-hidden-on-sm-height",
+    "visibleOnSmHeight": "pf-m-visible-on-sm-height",
+    "hiddenOnMdHeight": "pf-m-hidden-on-md-height",
+    "visibleOnMdHeight": "pf-m-visible-on-md-height",
+    "hiddenOnLgHeight": "pf-m-hidden-on-lg-height",
+    "visibleOnLgHeight": "pf-m-visible-on-lg-height",
+    "hiddenOnXlHeight": "pf-m-hidden-on-xl-height",
+    "visibleOnXlHeight": "pf-m-visible-on-xl-height",
+    "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
+    "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",
     "hiddenOnMd": "pf-m-hidden-on-md",
@@ -16,12 +26,15 @@ exports.default = {
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
     "sticky": "pf-m-sticky",
+    "stickyBase": "pf-m-sticky-base",
+    "stickyStuck": "pf-m-sticky-stuck",
     "static": "pf-m-static",
     "fullHeight": "pf-m-full-height",
     "noPadding": "pf-m-no-padding",
     "primary": "pf-m-primary",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
+    "vertical": "pf-m-vertical",
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
@@ -359,6 +372,7 @@ exports.default = {
     "hideOn_2xl": "pf-m-hide-on-2xl"
   },
   "pagination": "pf-v6-c-pagination",
+  "themeGlass": "pf-v6-theme-glass",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContent": "pf-v6-c-toolbar__content",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section",

package/css/components/Toolbar/toolbar.mjs

@@ -3,6 +3,16 @@ export default {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
     "hidden": "pf-m-hidden",
+    "hiddenOnSmHeight": "pf-m-hidden-on-sm-height",
+    "visibleOnSmHeight": "pf-m-visible-on-sm-height",
+    "hiddenOnMdHeight": "pf-m-hidden-on-md-height",
+    "visibleOnMdHeight": "pf-m-visible-on-md-height",
+    "hiddenOnLgHeight": "pf-m-hidden-on-lg-height",
+    "visibleOnLgHeight": "pf-m-visible-on-lg-height",
+    "hiddenOnXlHeight": "pf-m-hidden-on-xl-height",
+    "visibleOnXlHeight": "pf-m-visible-on-xl-height",
+    "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
+    "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",
     "hiddenOnMd": "pf-m-hidden-on-md",
@@ -14,12 +24,15 @@ export default {
     "hiddenOn_2xl": "pf-m-hidden-on-2xl",
     "visibleOn_2xl": "pf-m-visible-on-2xl",
     "sticky": "pf-m-sticky",
+    "stickyBase": "pf-m-sticky-base",
+    "stickyStuck": "pf-m-sticky-stuck",
     "static": "pf-m-static",
     "fullHeight": "pf-m-full-height",
     "noPadding": "pf-m-no-padding",
     "primary": "pf-m-primary",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
+    "vertical": "pf-m-vertical",
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
@@ -357,6 +370,7 @@ export default {
     "hideOn_2xl": "pf-m-hide-on-2xl"
   },
   "pagination": "pf-v6-c-pagination",
+  "themeGlass": "pf-v6-theme-glass",
   "toolbar": "pf-v6-c-toolbar",
   "toolbarContent": "pf-v6-c-toolbar__content",
   "toolbarContentSection": "pf-v6-c-toolbar__content-section",