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

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 +52 -0
  4. package/components/Masthead/masthead.scss +49 -0
  5. package/components/Nav/nav.css +59 -0
  6. package/components/Nav/nav.scss +75 -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 +177 -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 +177 -10
  42. package/patternfly.css +177 -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,48 @@ 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--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
19221
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
19222
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
19223
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
19224
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
19225
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
19226
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
19227
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
19228
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
19229
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
19230
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
19231
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
19232
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
19233
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
19234
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
19235
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
19236
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
19237
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
19238
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
19239
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
19240
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
19241
+ --pf-v6-c-masthead__main--GridColumn: auto;
19242
+ --pf-v6-c-masthead__content--GridColumn: auto;
19243
+ --pf-v6-c-masthead__logo--Width: auto;
19244
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
19245
+ display: flex;
19246
+ flex-direction: column;
19247
+ align-items: center;
19248
+ width: fit-content;
19249
+ height: 100%;
19250
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
19251
+ }
19252
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
19253
+ flex-direction: column;
19254
+ flex-grow: 1;
19255
+ align-self: revert;
19256
+ }
19257
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
19258
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
19259
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
19260
+ }
19199
19261
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
19200
19262
  flex-wrap: nowrap;
19201
19263
  min-width: 0;
@@ -21244,6 +21306,15 @@ ul.pf-v6-c-list {
21244
21306
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
21245
21307
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
21246
21308
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
21309
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
21310
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
21311
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
21312
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
21313
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
21314
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
21315
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
21316
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
21317
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
21247
21318
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
21248
21319
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
21249
21320
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -21268,6 +21339,7 @@ ul.pf-v6-c-list {
21268
21339
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
21269
21340
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
21270
21341
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
21342
+ --pf-v6-c-nav__link-text--FontSize: initial;
21271
21343
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
21272
21344
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
21273
21345
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -21308,6 +21380,11 @@ ul.pf-v6-c-list {
21308
21380
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21309
21381
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
21310
21382
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21383
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
21384
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21385
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21386
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21387
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
21311
21388
  }
21312
21389
  @media screen and (prefers-reduced-motion: no-preference) {
21313
21390
  .pf-v6-c-nav {
@@ -21349,6 +21426,25 @@ ul.pf-v6-c-list {
21349
21426
  .pf-v6-c-nav.pf-m-fill {
21350
21427
  flex-grow: 1;
21351
21428
  }
21429
+ .pf-v6-c-nav.pf-m-docked {
21430
+ --pf-v6-c-nav--PaddingBlockStart: 0;
21431
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
21432
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
21433
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
21434
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
21435
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
21436
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
21437
+ width: fit-content;
21438
+ }
21439
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
21440
+ position: relative;
21441
+ align-self: center;
21442
+ min-width: 1lh;
21443
+ text-align: center;
21444
+ }
21445
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
21446
+ display: none;
21447
+ }
21352
21448
  .pf-v6-c-nav .pf-v6-c-menu {
21353
21449
  --pf-v6-c-menu--MinWidth: 100%;
21354
21450
  }
@@ -21412,14 +21508,34 @@ ul.pf-v6-c-list {
21412
21508
  }
21413
21509
 
21414
21510
  .pf-v6-c-nav__item {
21511
+ position: relative;
21415
21512
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
21416
21513
  }
21514
+ .pf-v6-c-nav__item::before {
21515
+ position: absolute;
21516
+ inset-block-start: 0;
21517
+ inset-block-end: 0;
21518
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
21519
+ width: var(--pf-v6-c-nav__item--accent--size);
21520
+ pointer-events: none;
21521
+ content: var(--pf-v6-c-nav__item--accent--content, "");
21522
+ background-color: var(--pf-v6-c-nav__item--accent--color);
21523
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
21524
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
21525
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
21526
+ transition-property: scale;
21527
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
21528
+ }
21417
21529
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
21418
21530
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
21419
21531
  }
21420
21532
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
21421
21533
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
21422
21534
  }
21535
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
21536
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
21537
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
21538
+ }
21423
21539
 
21424
21540
  .pf-v6-c-nav__section {
21425
21541
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -21481,6 +21597,10 @@ ul.pf-v6-c-list {
21481
21597
  color: var(--pf-v6-c-nav__link-icon--Color);
21482
21598
  }
21483
21599
 
21600
+ .pf-v6-c-nav__link-text {
21601
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
21602
+ }
21603
+
21484
21604
  .pf-v6-c-nav__toggle {
21485
21605
  flex: none;
21486
21606
  align-self: start;
@@ -21536,6 +21656,7 @@ ul.pf-v6-c-list {
21536
21656
  }
21537
21657
 
21538
21658
  .pf-v6-c-nav:where(.pf-m-horizontal) {
21659
+ --pf-v6-c-nav__item--accent--content: none;
21539
21660
  padding: 0;
21540
21661
  overflow: hidden;
21541
21662
  }
@@ -21901,6 +22022,7 @@ ul.pf-v6-c-list {
21901
22022
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21902
22023
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
21903
22024
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
22025
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
21904
22026
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21905
22027
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
21906
22028
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -22008,6 +22130,9 @@ ul.pf-v6-c-list {
22008
22130
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
22009
22131
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
22010
22132
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
22133
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
22134
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
22135
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
22011
22136
  }
22012
22137
  @media screen and (prefers-reduced-motion: no-preference) {
22013
22138
  .pf-v6-c-page {
@@ -22050,6 +22175,16 @@ ul.pf-v6-c-list {
22050
22175
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
22051
22176
  }
22052
22177
  }
22178
+ .pf-v6-c-page.pf-m-dock {
22179
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
22180
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
22181
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
22182
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
22183
+ grid-template-areas: "dock main";
22184
+ grid-template-rows: auto;
22185
+ grid-template-columns: auto 1fr;
22186
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
22187
+ }
22053
22188
  .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
22189
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
22055
22190
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -22106,6 +22241,11 @@ ul.pf-v6-c-list {
22106
22241
  }
22107
22242
  }
22108
22243
 
22244
+ .pf-v6-c-page__dock {
22245
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
22246
+ grid-area: dock;
22247
+ }
22248
+
22109
22249
  .pf-v6-c-page__sidebar {
22110
22250
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22111
22251
  display: flex;
@@ -22409,6 +22549,7 @@ ul.pf-v6-c-list {
22409
22549
  flex-direction: column;
22410
22550
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
22411
22551
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22552
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
22412
22553
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22413
22554
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22414
22555
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -30442,6 +30583,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30442
30583
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30443
30584
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
30444
30585
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
30586
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
30445
30587
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
30446
30588
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
30447
30589
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -30645,6 +30787,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30645
30787
  .pf-v6-c-toolbar.pf-m-no-background {
30646
30788
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
30647
30789
  }
30790
+ .pf-v6-c-toolbar.pf-m-vertical {
30791
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
30792
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
30793
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
30794
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
30795
+ }
30796
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
30797
+ flex-direction: column;
30798
+ align-items: center;
30799
+ }
30648
30800
 
30649
30801
  .pf-v6-c-toolbar__item {
30650
30802
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -30724,6 +30876,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30724
30876
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
30725
30877
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30726
30878
  }
30879
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
30880
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30881
+ }
30727
30882
  .pf-v6-c-toolbar__group.pf-m-filter-group {
30728
30883
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
30729
30884
  }
@@ -30735,9 +30890,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30735
30890
  .pf-v6-c-toolbar__group.pf-m-action-group {
30736
30891
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30737
30892
  }
30893
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
30894
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30895
+ }
30738
30896
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30739
30897
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30740
30898
  }
30899
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30900
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30901
+ }
30741
30902
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
30742
30903
  flex-wrap: wrap;
30743
30904
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -30814,7 +30975,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30814
30975
  }
30815
30976
  .pf-v6-c-toolbar__group.pf-m-align-end,
30816
30977
  .pf-v6-c-toolbar__item.pf-m-align-end {
30817
- margin-inline-start: auto;
30978
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
30979
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30818
30980
  }
30819
30981
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
30820
30982
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -31069,7 +31231,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31069
31231
  }
31070
31232
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
31071
31233
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
31072
- margin-inline-start: auto;
31234
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31235
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31073
31236
  }
31074
31237
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
31075
31238
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -31321,7 +31484,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31321
31484
  }
31322
31485
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
31323
31486
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
31324
- margin-inline-start: auto;
31487
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31488
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31325
31489
  }
31326
31490
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
31327
31491
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -31573,7 +31737,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31573
31737
  }
31574
31738
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
31575
31739
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
31576
- margin-inline-start: auto;
31740
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31741
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31577
31742
  }
31578
31743
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
31579
31744
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -31825,7 +31990,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31825
31990
  }
31826
31991
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
31827
31992
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
31828
- margin-inline-start: auto;
31993
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31994
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31829
31995
  }
31830
31996
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
31831
31997
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -32077,7 +32243,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
32077
32243
  }
32078
32244
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
32079
32245
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
32080
- margin-inline-start: auto;
32246
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
32247
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
32081
32248
  }
32082
32249
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
32083
32250
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {