@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
@@ -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,48 @@ 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--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
19074
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
19075
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
19076
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
19077
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
19078
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
19079
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
19080
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
19081
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
19082
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
19083
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
19084
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
19085
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
19086
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
19087
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
19088
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
19089
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
19090
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
19091
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
19092
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
19093
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
19094
+ --pf-v6-c-masthead__main--GridColumn: auto;
19095
+ --pf-v6-c-masthead__content--GridColumn: auto;
19096
+ --pf-v6-c-masthead__logo--Width: auto;
19097
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
19098
+ display: flex;
19099
+ flex-direction: column;
19100
+ align-items: center;
19101
+ width: fit-content;
19102
+ height: 100%;
19103
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
19104
+ }
19105
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
19106
+ flex-direction: column;
19107
+ flex-grow: 1;
19108
+ align-self: revert;
19109
+ }
19110
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
19111
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
19112
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
19113
+ }
19052
19114
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
19053
19115
  flex-wrap: nowrap;
19054
19116
  min-width: 0;
@@ -21097,6 +21159,15 @@ ul.pf-v6-c-list {
21097
21159
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
21098
21160
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
21099
21161
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
21162
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
21163
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
21164
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
21165
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
21166
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
21167
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
21168
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
21169
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
21170
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
21100
21171
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
21101
21172
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
21102
21173
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -21121,6 +21192,7 @@ ul.pf-v6-c-list {
21121
21192
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
21122
21193
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
21123
21194
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
21195
+ --pf-v6-c-nav__link-text--FontSize: initial;
21124
21196
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
21125
21197
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
21126
21198
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -21161,6 +21233,11 @@ ul.pf-v6-c-list {
21161
21233
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21162
21234
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
21163
21235
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
21236
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
21237
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21238
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21239
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
21240
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
21164
21241
  }
21165
21242
  @media screen and (prefers-reduced-motion: no-preference) {
21166
21243
  .pf-v6-c-nav {
@@ -21202,6 +21279,25 @@ ul.pf-v6-c-list {
21202
21279
  .pf-v6-c-nav.pf-m-fill {
21203
21280
  flex-grow: 1;
21204
21281
  }
21282
+ .pf-v6-c-nav.pf-m-docked {
21283
+ --pf-v6-c-nav--PaddingBlockStart: 0;
21284
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
21285
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
21286
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
21287
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
21288
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
21289
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
21290
+ width: fit-content;
21291
+ }
21292
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
21293
+ position: relative;
21294
+ align-self: center;
21295
+ min-width: 1lh;
21296
+ text-align: center;
21297
+ }
21298
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
21299
+ display: none;
21300
+ }
21205
21301
  .pf-v6-c-nav .pf-v6-c-menu {
21206
21302
  --pf-v6-c-menu--MinWidth: 100%;
21207
21303
  }
@@ -21265,14 +21361,34 @@ ul.pf-v6-c-list {
21265
21361
  }
21266
21362
 
21267
21363
  .pf-v6-c-nav__item {
21364
+ position: relative;
21268
21365
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
21269
21366
  }
21367
+ .pf-v6-c-nav__item::before {
21368
+ position: absolute;
21369
+ inset-block-start: 0;
21370
+ inset-block-end: 0;
21371
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
21372
+ width: var(--pf-v6-c-nav__item--accent--size);
21373
+ pointer-events: none;
21374
+ content: var(--pf-v6-c-nav__item--accent--content, "");
21375
+ background-color: var(--pf-v6-c-nav__item--accent--color);
21376
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
21377
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
21378
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
21379
+ transition-property: scale;
21380
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
21381
+ }
21270
21382
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
21271
21383
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
21272
21384
  }
21273
21385
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
21274
21386
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
21275
21387
  }
21388
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
21389
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
21390
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
21391
+ }
21276
21392
 
21277
21393
  .pf-v6-c-nav__section {
21278
21394
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -21334,6 +21450,10 @@ ul.pf-v6-c-list {
21334
21450
  color: var(--pf-v6-c-nav__link-icon--Color);
21335
21451
  }
21336
21452
 
21453
+ .pf-v6-c-nav__link-text {
21454
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
21455
+ }
21456
+
21337
21457
  .pf-v6-c-nav__toggle {
21338
21458
  flex: none;
21339
21459
  align-self: start;
@@ -21389,6 +21509,7 @@ ul.pf-v6-c-list {
21389
21509
  }
21390
21510
 
21391
21511
  .pf-v6-c-nav:where(.pf-m-horizontal) {
21512
+ --pf-v6-c-nav__item--accent--content: none;
21392
21513
  padding: 0;
21393
21514
  overflow: hidden;
21394
21515
  }
@@ -21754,6 +21875,7 @@ ul.pf-v6-c-list {
21754
21875
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21755
21876
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
21756
21877
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
21878
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
21757
21879
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21758
21880
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
21759
21881
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -21861,6 +21983,9 @@ ul.pf-v6-c-list {
21861
21983
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
21862
21984
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
21863
21985
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
21986
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
21987
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
21988
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
21864
21989
  }
21865
21990
  @media screen and (prefers-reduced-motion: no-preference) {
21866
21991
  .pf-v6-c-page {
@@ -21903,6 +22028,16 @@ ul.pf-v6-c-list {
21903
22028
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
21904
22029
  }
21905
22030
  }
22031
+ .pf-v6-c-page.pf-m-dock {
22032
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
22033
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
22034
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
22035
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
22036
+ grid-template-areas: "dock main";
22037
+ grid-template-rows: auto;
22038
+ grid-template-columns: auto 1fr;
22039
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
22040
+ }
21906
22041
  .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
22042
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
21908
22043
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -21959,6 +22094,11 @@ ul.pf-v6-c-list {
21959
22094
  }
21960
22095
  }
21961
22096
 
22097
+ .pf-v6-c-page__dock {
22098
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
22099
+ grid-area: dock;
22100
+ }
22101
+
21962
22102
  .pf-v6-c-page__sidebar {
21963
22103
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
21964
22104
  display: flex;
@@ -22262,6 +22402,7 @@ ul.pf-v6-c-list {
22262
22402
  flex-direction: column;
22263
22403
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
22264
22404
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22405
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
22265
22406
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22266
22407
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22267
22408
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -30295,6 +30436,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30295
30436
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30296
30437
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
30297
30438
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
30439
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
30298
30440
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
30299
30441
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
30300
30442
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -30498,6 +30640,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30498
30640
  .pf-v6-c-toolbar.pf-m-no-background {
30499
30641
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
30500
30642
  }
30643
+ .pf-v6-c-toolbar.pf-m-vertical {
30644
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
30645
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
30646
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
30647
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
30648
+ }
30649
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
30650
+ flex-direction: column;
30651
+ align-items: center;
30652
+ }
30501
30653
 
30502
30654
  .pf-v6-c-toolbar__item {
30503
30655
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -30577,6 +30729,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30577
30729
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
30578
30730
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30579
30731
  }
30732
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
30733
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30734
+ }
30580
30735
  .pf-v6-c-toolbar__group.pf-m-filter-group {
30581
30736
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
30582
30737
  }
@@ -30588,9 +30743,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30588
30743
  .pf-v6-c-toolbar__group.pf-m-action-group {
30589
30744
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30590
30745
  }
30746
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
30747
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30748
+ }
30591
30749
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30592
30750
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30593
30751
  }
30752
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30753
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30754
+ }
30594
30755
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
30595
30756
  flex-wrap: wrap;
30596
30757
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -30667,7 +30828,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30667
30828
  }
30668
30829
  .pf-v6-c-toolbar__group.pf-m-align-end,
30669
30830
  .pf-v6-c-toolbar__item.pf-m-align-end {
30670
- margin-inline-start: auto;
30831
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
30832
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30671
30833
  }
30672
30834
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
30673
30835
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -30922,7 +31084,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30922
31084
  }
30923
31085
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
30924
31086
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
30925
- margin-inline-start: auto;
31087
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31088
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
30926
31089
  }
30927
31090
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
30928
31091
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -31174,7 +31337,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31174
31337
  }
31175
31338
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
31176
31339
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
31177
- margin-inline-start: auto;
31340
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31341
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31178
31342
  }
31179
31343
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
31180
31344
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -31426,7 +31590,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31426
31590
  }
31427
31591
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
31428
31592
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
31429
- margin-inline-start: auto;
31593
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31594
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31430
31595
  }
31431
31596
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
31432
31597
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -31678,7 +31843,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31678
31843
  }
31679
31844
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
31680
31845
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
31681
- margin-inline-start: auto;
31846
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
31847
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31682
31848
  }
31683
31849
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
31684
31850
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -31930,7 +32096,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31930
32096
  }
31931
32097
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
31932
32098
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
31933
- margin-inline-start: auto;
32099
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
32100
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
31934
32101
  }
31935
32102
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
31936
32103
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {