@patternfly/patternfly 6.5.0-prerelease.31 → 6.5.0-prerelease.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/components/Compass/compass.css +14 -4
  2. package/components/Compass/compass.scss +16 -4
  3. package/components/Masthead/masthead.css +40 -0
  4. package/components/Masthead/masthead.scss +47 -0
  5. package/components/Nav/nav.css +55 -0
  6. package/components/Nav/nav.scss +70 -3
  7. package/components/Page/page.css +20 -0
  8. package/components/Page/page.scss +27 -0
  9. package/components/Toolbar/toolbar.css +32 -6
  10. package/components/Toolbar/toolbar.scss +28 -4
  11. package/components/_index.css +161 -10
  12. package/docs/components/Compass/examples/Compass.css +8 -2
  13. package/docs/components/Compass/examples/Compass.md +22 -1
  14. package/docs/components/Masthead/examples/masthead.md +67 -0
  15. package/docs/components/Nav/examples/Navigation.md +44 -0
  16. package/docs/components/Page/examples/Page.md +37 -0
  17. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  18. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  19. package/docs/demos/Alert/examples/Alert.md +15 -15
  20. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  21. package/docs/demos/Banner/examples/Banner.md +10 -10
  22. package/docs/demos/CardView/examples/CardView.md +5 -5
  23. package/docs/demos/Compass/examples/Compass.md +208 -0
  24. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  25. package/docs/demos/DataList/examples/DataList.md +20 -23
  26. package/docs/demos/DescriptionList/examples/DescriptionList.md +15 -15
  27. package/docs/demos/Drawer/examples/Drawer.md +25 -25
  28. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  29. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  30. package/docs/demos/Modal/examples/Modal.md +30 -33
  31. package/docs/demos/Nav/examples/Nav.md +299 -62
  32. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  33. package/docs/demos/Page/examples/Page.md +70 -79
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  35. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  36. package/docs/demos/Table/examples/Table.md +75 -78
  37. package/docs/demos/Tabs/examples/Tabs.md +30 -30
  38. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  39. package/docs/demos/Wizard/examples/Wizard.md +45 -48
  40. package/package.json +1 -1
  41. package/patternfly-no-globals.css +161 -10
  42. package/patternfly.css +161 -10
  43. package/patternfly.min.css +1 -1
  44. package/patternfly.min.css.map +1 -1
package/patternfly.css CHANGED
@@ -12430,16 +12430,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12430
12430
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12431
12431
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12432
12432
  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
12433
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12434
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12435
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12436
12433
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12437
12434
  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
12438
12435
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12439
12436
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12440
12437
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12441
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12438
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12439
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12442
12440
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12441
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12442
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12443
12443
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
12444
12444
  --pf-v6-c-compass__message-bar--Width: 450px;
12445
12445
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
@@ -12490,6 +12490,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12490
12490
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12491
12491
  background-size: cover;
12492
12492
  }
12493
+ .pf-v6-c-compass.pf-m-dock {
12494
+ grid-template-areas: "dock main";
12495
+ grid-template-rows: auto;
12496
+ grid-template-columns: auto 1fr;
12497
+ align-items: stretch;
12498
+ padding: 0;
12499
+ }
12500
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
12501
+ padding: var(--pf-v6-c-compass--Padding);
12502
+ }
12493
12503
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12494
12504
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12495
12505
  }
@@ -19144,6 +19154,15 @@ ul.pf-v6-c-list {
19144
19154
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
19145
19155
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
19146
19156
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
19157
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
19158
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
19159
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
19160
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
19161
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19162
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19163
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
19164
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
19165
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
19147
19166
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19148
19167
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
19149
19168
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -19164,6 +19183,7 @@ ul.pf-v6-c-list {
19164
19183
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
19165
19184
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
19166
19185
  display: grid;
19186
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
19167
19187
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
19168
19188
  row-gap: var(--pf-v6-c-masthead--RowGap);
19169
19189
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -19196,6 +19216,36 @@ ul.pf-v6-c-list {
19196
19216
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
19197
19217
  }
19198
19218
  }
19219
+ .pf-v6-c-masthead.pf-m-docked {
19220
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
19221
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
19222
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
19223
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
19224
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
19225
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
19226
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
19227
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
19228
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
19229
+ --pf-v6-c-masthead__main--GridColumn: auto;
19230
+ --pf-v6-c-masthead__content--GridColumn: auto;
19231
+ --pf-v6-c-masthead__logo--Width: auto;
19232
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
19233
+ display: flex;
19234
+ flex-direction: column;
19235
+ align-items: center;
19236
+ width: fit-content;
19237
+ height: 100%;
19238
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
19239
+ }
19240
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
19241
+ flex-direction: column;
19242
+ flex-grow: 1;
19243
+ align-self: revert;
19244
+ }
19245
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
19246
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
19247
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
19248
+ }
19199
19249
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
19200
19250
  flex-wrap: nowrap;
19201
19251
  min-width: 0;
@@ -21244,6 +21294,15 @@ ul.pf-v6-c-list {
21244
21294
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
21245
21295
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
21246
21296
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
21297
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
21298
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
21299
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
21300
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
21301
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
21302
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
21303
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
21304
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
21305
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
21247
21306
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
21248
21307
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
21249
21308
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -21268,6 +21327,7 @@ ul.pf-v6-c-list {
21268
21327
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
21269
21328
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
21270
21329
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
21330
+ --pf-v6-c-nav__link-text--FontSize: initial;
21271
21331
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
21272
21332
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
21273
21333
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -21308,6 +21368,11 @@ ul.pf-v6-c-list {
21308
21368
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21309
21369
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
21310
21370
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21371
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
21372
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21373
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21374
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21375
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
21311
21376
  }
21312
21377
  @media screen and (prefers-reduced-motion: no-preference) {
21313
21378
  .pf-v6-c-nav {
@@ -21349,6 +21414,21 @@ ul.pf-v6-c-list {
21349
21414
  .pf-v6-c-nav.pf-m-fill {
21350
21415
  flex-grow: 1;
21351
21416
  }
21417
+ .pf-v6-c-nav.pf-m-docked {
21418
+ --pf-v6-c-nav--PaddingBlockStart: 0;
21419
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
21420
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
21421
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
21422
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
21423
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
21424
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
21425
+ width: fit-content;
21426
+ }
21427
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
21428
+ position: relative;
21429
+ align-self: center;
21430
+ min-width: 1lh;
21431
+ }
21352
21432
  .pf-v6-c-nav .pf-v6-c-menu {
21353
21433
  --pf-v6-c-menu--MinWidth: 100%;
21354
21434
  }
@@ -21412,14 +21492,34 @@ ul.pf-v6-c-list {
21412
21492
  }
21413
21493
 
21414
21494
  .pf-v6-c-nav__item {
21495
+ position: relative;
21415
21496
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
21416
21497
  }
21498
+ .pf-v6-c-nav__item::before {
21499
+ position: absolute;
21500
+ inset-block-start: 0;
21501
+ inset-block-end: 0;
21502
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
21503
+ width: var(--pf-v6-c-nav__item--accent--size);
21504
+ pointer-events: none;
21505
+ content: var(--pf-v6-c-nav__item--accent--content, "");
21506
+ background-color: var(--pf-v6-c-nav__item--accent--color);
21507
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
21508
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
21509
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
21510
+ transition-property: scale;
21511
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
21512
+ }
21417
21513
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
21418
21514
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
21419
21515
  }
21420
21516
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
21421
21517
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
21422
21518
  }
21519
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
21520
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
21521
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
21522
+ }
21423
21523
 
21424
21524
  .pf-v6-c-nav__section {
21425
21525
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -21481,6 +21581,10 @@ ul.pf-v6-c-list {
21481
21581
  color: var(--pf-v6-c-nav__link-icon--Color);
21482
21582
  }
21483
21583
 
21584
+ .pf-v6-c-nav__link-text {
21585
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
21586
+ }
21587
+
21484
21588
  .pf-v6-c-nav__toggle {
21485
21589
  flex: none;
21486
21590
  align-self: start;
@@ -21536,6 +21640,7 @@ ul.pf-v6-c-list {
21536
21640
  }
21537
21641
 
21538
21642
  .pf-v6-c-nav:where(.pf-m-horizontal) {
21643
+ --pf-v6-c-nav__item--accent--content: none;
21539
21644
  padding: 0;
21540
21645
  overflow: hidden;
21541
21646
  }
@@ -21901,6 +22006,7 @@ ul.pf-v6-c-list {
21901
22006
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21902
22007
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
21903
22008
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
22009
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
21904
22010
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21905
22011
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
21906
22012
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -22008,6 +22114,9 @@ ul.pf-v6-c-list {
22008
22114
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
22009
22115
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
22010
22116
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
22117
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
22118
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
22119
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22011
22120
  }
22012
22121
  @media screen and (prefers-reduced-motion: no-preference) {
22013
22122
  .pf-v6-c-page {
@@ -22050,6 +22159,16 @@ ul.pf-v6-c-list {
22050
22159
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
22051
22160
  }
22052
22161
  }
22162
+ .pf-v6-c-page.pf-m-dock {
22163
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
22164
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
22165
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
22166
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
22167
+ grid-template-areas: "dock main";
22168
+ grid-template-rows: auto;
22169
+ grid-template-columns: auto 1fr;
22170
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
22171
+ }
22053
22172
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
22054
22173
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
22055
22174
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -22106,6 +22225,11 @@ ul.pf-v6-c-list {
22106
22225
  }
22107
22226
  }
22108
22227
 
22228
+ .pf-v6-c-page__dock {
22229
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
22230
+ grid-area: dock;
22231
+ }
22232
+
22109
22233
  .pf-v6-c-page__sidebar {
22110
22234
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22111
22235
  display: flex;
@@ -22409,6 +22533,7 @@ ul.pf-v6-c-list {
22409
22533
  flex-direction: column;
22410
22534
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
22411
22535
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22536
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
22412
22537
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22413
22538
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22414
22539
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -30442,6 +30567,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30442
30567
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30443
30568
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
30444
30569
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
30570
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
30445
30571
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
30446
30572
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
30447
30573
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -30645,6 +30771,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30645
30771
  .pf-v6-c-toolbar.pf-m-no-background {
30646
30772
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
30647
30773
  }
30774
+ .pf-v6-c-toolbar.pf-m-vertical {
30775
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
30776
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
30777
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
30778
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
30779
+ }
30780
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
30781
+ flex-direction: column;
30782
+ align-items: center;
30783
+ }
30648
30784
 
30649
30785
  .pf-v6-c-toolbar__item {
30650
30786
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -30724,6 +30860,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30724
30860
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
30725
30861
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30726
30862
  }
30863
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
30864
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30865
+ }
30727
30866
  .pf-v6-c-toolbar__group.pf-m-filter-group {
30728
30867
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
30729
30868
  }
@@ -30735,9 +30874,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30735
30874
  .pf-v6-c-toolbar__group.pf-m-action-group {
30736
30875
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30737
30876
  }
30877
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
30878
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30879
+ }
30738
30880
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30739
30881
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30740
30882
  }
30883
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30884
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30885
+ }
30741
30886
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
30742
30887
  flex-wrap: wrap;
30743
30888
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -30814,7 +30959,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30814
30959
  }
30815
30960
  .pf-v6-c-toolbar__group.pf-m-align-end,
30816
30961
  .pf-v6-c-toolbar__item.pf-m-align-end {
30817
- margin-inline-start: auto;
30962
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
30963
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30818
30964
  }
30819
30965
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
30820
30966
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -31069,7 +31215,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31069
31215
  }
31070
31216
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
31071
31217
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
31072
- margin-inline-start: auto;
31218
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31219
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31073
31220
  }
31074
31221
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
31075
31222
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -31321,7 +31468,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31321
31468
  }
31322
31469
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
31323
31470
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
31324
- margin-inline-start: auto;
31471
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31472
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31325
31473
  }
31326
31474
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
31327
31475
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -31573,7 +31721,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31573
31721
  }
31574
31722
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
31575
31723
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
31576
- margin-inline-start: auto;
31724
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31725
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31577
31726
  }
31578
31727
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
31579
31728
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -31825,7 +31974,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31825
31974
  }
31826
31975
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
31827
31976
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
31828
- margin-inline-start: auto;
31977
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31978
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31829
31979
  }
31830
31980
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
31831
31981
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -32077,7 +32227,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
32077
32227
  }
32078
32228
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
32079
32229
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
32080
- margin-inline-start: auto;
32230
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
32231
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
32081
32232
  }
32082
32233
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
32083
32234
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {