@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
@@ -12283,16 +12283,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12283
12283
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12284
12284
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12285
12285
  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
12286
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12287
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12288
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12289
12286
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
12290
12287
  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
12291
12288
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
12292
12289
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
12293
12290
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
12294
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12291
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12292
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12295
12293
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
12294
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
12295
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
12296
12296
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
12297
12297
  --pf-v6-c-compass__message-bar--Width: 450px;
12298
12298
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
@@ -12343,6 +12343,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12343
12343
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12344
12344
  background-size: cover;
12345
12345
  }
12346
+ .pf-v6-c-compass.pf-m-dock {
12347
+ grid-template-areas: "dock main";
12348
+ grid-template-rows: auto;
12349
+ grid-template-columns: auto 1fr;
12350
+ align-items: stretch;
12351
+ padding: 0;
12352
+ }
12353
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
12354
+ padding: var(--pf-v6-c-compass--Padding);
12355
+ }
12346
12356
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12347
12357
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12348
12358
  }
@@ -18997,6 +19007,15 @@ ul.pf-v6-c-list {
18997
19007
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
18998
19008
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
18999
19009
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
19010
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
19011
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
19012
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
19013
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
19014
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
19015
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
19016
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
19017
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
19018
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
19000
19019
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19001
19020
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
19002
19021
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -19017,6 +19036,7 @@ ul.pf-v6-c-list {
19017
19036
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
19018
19037
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
19019
19038
  display: grid;
19039
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
19020
19040
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
19021
19041
  row-gap: var(--pf-v6-c-masthead--RowGap);
19022
19042
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -19049,6 +19069,36 @@ ul.pf-v6-c-list {
19049
19069
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
19050
19070
  }
19051
19071
  }
19072
+ .pf-v6-c-masthead.pf-m-docked {
19073
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
19074
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
19075
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
19076
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
19077
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
19078
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
19079
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
19080
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
19081
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
19082
+ --pf-v6-c-masthead__main--GridColumn: auto;
19083
+ --pf-v6-c-masthead__content--GridColumn: auto;
19084
+ --pf-v6-c-masthead__logo--Width: auto;
19085
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
19086
+ display: flex;
19087
+ flex-direction: column;
19088
+ align-items: center;
19089
+ width: fit-content;
19090
+ height: 100%;
19091
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
19092
+ }
19093
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
19094
+ flex-direction: column;
19095
+ flex-grow: 1;
19096
+ align-self: revert;
19097
+ }
19098
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
19099
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
19100
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
19101
+ }
19052
19102
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
19053
19103
  flex-wrap: nowrap;
19054
19104
  min-width: 0;
@@ -21097,6 +21147,15 @@ ul.pf-v6-c-list {
21097
21147
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
21098
21148
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
21099
21149
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
21150
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
21151
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
21152
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
21153
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
21154
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
21155
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
21156
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
21157
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
21158
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
21100
21159
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
21101
21160
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
21102
21161
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -21121,6 +21180,7 @@ ul.pf-v6-c-list {
21121
21180
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
21122
21181
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
21123
21182
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
21183
+ --pf-v6-c-nav__link-text--FontSize: initial;
21124
21184
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
21125
21185
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
21126
21186
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -21161,6 +21221,11 @@ ul.pf-v6-c-list {
21161
21221
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21162
21222
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
21163
21223
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21224
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
21225
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21226
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21227
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21228
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
21164
21229
  }
21165
21230
  @media screen and (prefers-reduced-motion: no-preference) {
21166
21231
  .pf-v6-c-nav {
@@ -21202,6 +21267,21 @@ ul.pf-v6-c-list {
21202
21267
  .pf-v6-c-nav.pf-m-fill {
21203
21268
  flex-grow: 1;
21204
21269
  }
21270
+ .pf-v6-c-nav.pf-m-docked {
21271
+ --pf-v6-c-nav--PaddingBlockStart: 0;
21272
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
21273
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
21274
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
21275
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
21276
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
21277
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
21278
+ width: fit-content;
21279
+ }
21280
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
21281
+ position: relative;
21282
+ align-self: center;
21283
+ min-width: 1lh;
21284
+ }
21205
21285
  .pf-v6-c-nav .pf-v6-c-menu {
21206
21286
  --pf-v6-c-menu--MinWidth: 100%;
21207
21287
  }
@@ -21265,14 +21345,34 @@ ul.pf-v6-c-list {
21265
21345
  }
21266
21346
 
21267
21347
  .pf-v6-c-nav__item {
21348
+ position: relative;
21268
21349
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
21269
21350
  }
21351
+ .pf-v6-c-nav__item::before {
21352
+ position: absolute;
21353
+ inset-block-start: 0;
21354
+ inset-block-end: 0;
21355
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
21356
+ width: var(--pf-v6-c-nav__item--accent--size);
21357
+ pointer-events: none;
21358
+ content: var(--pf-v6-c-nav__item--accent--content, "");
21359
+ background-color: var(--pf-v6-c-nav__item--accent--color);
21360
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
21361
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
21362
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
21363
+ transition-property: scale;
21364
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
21365
+ }
21270
21366
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
21271
21367
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
21272
21368
  }
21273
21369
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
21274
21370
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
21275
21371
  }
21372
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
21373
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
21374
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
21375
+ }
21276
21376
 
21277
21377
  .pf-v6-c-nav__section {
21278
21378
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -21334,6 +21434,10 @@ ul.pf-v6-c-list {
21334
21434
  color: var(--pf-v6-c-nav__link-icon--Color);
21335
21435
  }
21336
21436
 
21437
+ .pf-v6-c-nav__link-text {
21438
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
21439
+ }
21440
+
21337
21441
  .pf-v6-c-nav__toggle {
21338
21442
  flex: none;
21339
21443
  align-self: start;
@@ -21389,6 +21493,7 @@ ul.pf-v6-c-list {
21389
21493
  }
21390
21494
 
21391
21495
  .pf-v6-c-nav:where(.pf-m-horizontal) {
21496
+ --pf-v6-c-nav__item--accent--content: none;
21392
21497
  padding: 0;
21393
21498
  overflow: hidden;
21394
21499
  }
@@ -21754,6 +21859,7 @@ ul.pf-v6-c-list {
21754
21859
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21755
21860
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
21756
21861
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
21862
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
21757
21863
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21758
21864
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
21759
21865
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -21861,6 +21967,9 @@ ul.pf-v6-c-list {
21861
21967
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
21862
21968
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21863
21969
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21970
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
21971
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
21972
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
21864
21973
  }
21865
21974
  @media screen and (prefers-reduced-motion: no-preference) {
21866
21975
  .pf-v6-c-page {
@@ -21903,6 +22012,16 @@ ul.pf-v6-c-list {
21903
22012
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
21904
22013
  }
21905
22014
  }
22015
+ .pf-v6-c-page.pf-m-dock {
22016
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
22017
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
22018
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
22019
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
22020
+ grid-template-areas: "dock main";
22021
+ grid-template-rows: auto;
22022
+ grid-template-columns: auto 1fr;
22023
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
22024
+ }
21906
22025
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
21907
22026
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
21908
22027
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -21959,6 +22078,11 @@ ul.pf-v6-c-list {
21959
22078
  }
21960
22079
  }
21961
22080
 
22081
+ .pf-v6-c-page__dock {
22082
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
22083
+ grid-area: dock;
22084
+ }
22085
+
21962
22086
  .pf-v6-c-page__sidebar {
21963
22087
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
21964
22088
  display: flex;
@@ -22262,6 +22386,7 @@ ul.pf-v6-c-list {
22262
22386
  flex-direction: column;
22263
22387
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
22264
22388
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22389
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
22265
22390
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22266
22391
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22267
22392
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -30295,6 +30420,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30295
30420
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30296
30421
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
30297
30422
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
30423
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
30298
30424
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
30299
30425
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
30300
30426
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -30498,6 +30624,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30498
30624
  .pf-v6-c-toolbar.pf-m-no-background {
30499
30625
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
30500
30626
  }
30627
+ .pf-v6-c-toolbar.pf-m-vertical {
30628
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
30629
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
30630
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
30631
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
30632
+ }
30633
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
30634
+ flex-direction: column;
30635
+ align-items: center;
30636
+ }
30501
30637
 
30502
30638
  .pf-v6-c-toolbar__item {
30503
30639
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -30577,6 +30713,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30577
30713
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
30578
30714
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30579
30715
  }
30716
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
30717
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30718
+ }
30580
30719
  .pf-v6-c-toolbar__group.pf-m-filter-group {
30581
30720
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
30582
30721
  }
@@ -30588,9 +30727,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30588
30727
  .pf-v6-c-toolbar__group.pf-m-action-group {
30589
30728
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30590
30729
  }
30730
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
30731
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30732
+ }
30591
30733
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30592
30734
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30593
30735
  }
30736
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30737
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30738
+ }
30594
30739
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
30595
30740
  flex-wrap: wrap;
30596
30741
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -30667,7 +30812,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30667
30812
  }
30668
30813
  .pf-v6-c-toolbar__group.pf-m-align-end,
30669
30814
  .pf-v6-c-toolbar__item.pf-m-align-end {
30670
- margin-inline-start: auto;
30815
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
30816
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30671
30817
  }
30672
30818
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
30673
30819
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -30922,7 +31068,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30922
31068
  }
30923
31069
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
30924
31070
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
30925
- margin-inline-start: auto;
31071
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31072
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30926
31073
  }
30927
31074
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
30928
31075
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -31174,7 +31321,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31174
31321
  }
31175
31322
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
31176
31323
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
31177
- margin-inline-start: auto;
31324
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31325
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31178
31326
  }
31179
31327
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
31180
31328
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -31426,7 +31574,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31426
31574
  }
31427
31575
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
31428
31576
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
31429
- margin-inline-start: auto;
31577
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31578
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31430
31579
  }
31431
31580
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
31432
31581
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -31678,7 +31827,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31678
31827
  }
31679
31828
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
31680
31829
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
31681
- margin-inline-start: auto;
31830
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31831
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31682
31832
  }
31683
31833
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
31684
31834
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -31930,7 +32080,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31930
32080
  }
31931
32081
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
31932
32082
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
31933
- margin-inline-start: auto;
32083
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
32084
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31934
32085
  }
31935
32086
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
31936
32087
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {