@patternfly/patternfly 6.5.0-prerelease.30 → 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 (46) hide show
  1. package/components/Compass/compass.css +14 -4
  2. package/components/Compass/compass.scss +16 -4
  3. package/components/Drawer/drawer.css +30 -26
  4. package/components/Drawer/drawer.scss +7 -3
  5. package/components/Masthead/masthead.css +40 -0
  6. package/components/Masthead/masthead.scss +47 -0
  7. package/components/Nav/nav.css +55 -0
  8. package/components/Nav/nav.scss +70 -3
  9. package/components/Page/page.css +20 -0
  10. package/components/Page/page.scss +27 -0
  11. package/components/Toolbar/toolbar.css +32 -6
  12. package/components/Toolbar/toolbar.scss +28 -4
  13. package/components/_index.css +191 -36
  14. package/docs/components/Compass/examples/Compass.css +8 -2
  15. package/docs/components/Compass/examples/Compass.md +22 -1
  16. package/docs/components/Masthead/examples/masthead.md +67 -0
  17. package/docs/components/Nav/examples/Navigation.md +44 -0
  18. package/docs/components/Page/examples/Page.md +37 -0
  19. package/docs/components/Toolbar/examples/Toolbar.md +28 -0
  20. package/docs/demos/AboutModal/examples/AboutModal.md +5 -5
  21. package/docs/demos/Alert/examples/Alert.md +15 -15
  22. package/docs/demos/BackToTop/examples/BackToTop.md +5 -5
  23. package/docs/demos/Banner/examples/Banner.md +10 -10
  24. package/docs/demos/CardView/examples/CardView.md +5 -5
  25. package/docs/demos/Compass/examples/Compass.md +208 -0
  26. package/docs/demos/Dashboard/examples/Dashboard.md +5 -5
  27. package/docs/demos/DataList/examples/DataList.md +20 -23
  28. package/docs/demos/DescriptionList/examples/DescriptionList.md +15 -15
  29. package/docs/demos/Drawer/examples/Drawer.md +25 -25
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +30 -30
  31. package/docs/demos/Masthead/examples/Masthead.md +55 -58
  32. package/docs/demos/Modal/examples/Modal.md +30 -33
  33. package/docs/demos/Nav/examples/Nav.md +299 -62
  34. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +25 -25
  35. package/docs/demos/Page/examples/Page.md +70 -79
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +35 -35
  37. package/docs/demos/Skeleton/examples/Skeleton.md +5 -5
  38. package/docs/demos/Table/examples/Table.md +75 -78
  39. package/docs/demos/Tabs/examples/Tabs.md +30 -30
  40. package/docs/demos/Toolbar/examples/Toolbar.md +10 -10
  41. package/docs/demos/Wizard/examples/Wizard.md +45 -48
  42. package/package.json +2 -2
  43. package/patternfly-no-globals.css +191 -36
  44. package/patternfly.css +191 -36
  45. package/patternfly.min.css +1 -1
  46. 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
  }
@@ -15149,7 +15159,7 @@ ul) {
15149
15159
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
15150
15160
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
15151
15161
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
15152
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
15162
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
15153
15163
  }
15154
15164
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
15155
15165
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -15178,7 +15188,7 @@ ul) {
15178
15188
  visibility: visible;
15179
15189
  }
15180
15190
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
15181
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
15191
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
15182
15192
  }
15183
15193
 
15184
15194
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -15527,82 +15537,86 @@ ul) {
15527
15537
  }
15528
15538
  @media (min-width: 48rem) {
15529
15539
  .pf-v6-c-drawer__panel.pf-m-width-25 {
15530
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15540
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15531
15541
  }
15532
15542
  .pf-v6-c-drawer__panel.pf-m-width-33 {
15533
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15543
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15534
15544
  }
15535
15545
  .pf-v6-c-drawer__panel.pf-m-width-50 {
15536
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15546
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15537
15547
  }
15538
15548
  .pf-v6-c-drawer__panel.pf-m-width-66 {
15539
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15549
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15540
15550
  }
15541
15551
  .pf-v6-c-drawer__panel.pf-m-width-75 {
15542
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15552
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15543
15553
  }
15544
15554
  .pf-v6-c-drawer__panel.pf-m-width-100 {
15545
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15555
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15556
+ --pf-v6-c-drawer__main--Gap: 0;
15546
15557
  }
15547
15558
  }
15548
15559
  @media (min-width: 62rem) {
15549
15560
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
15550
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15561
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15551
15562
  }
15552
15563
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
15553
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15564
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15554
15565
  }
15555
15566
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
15556
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15567
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15557
15568
  }
15558
15569
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
15559
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15570
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15560
15571
  }
15561
15572
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
15562
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15573
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15563
15574
  }
15564
15575
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
15565
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15576
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15577
+ --pf-v6-c-drawer__main--Gap: 0;
15566
15578
  }
15567
15579
  }
15568
15580
  @media (min-width: 75rem) {
15569
15581
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
15570
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15582
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15571
15583
  }
15572
15584
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
15573
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15585
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15574
15586
  }
15575
15587
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
15576
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15588
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15577
15589
  }
15578
15590
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
15579
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15591
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15580
15592
  }
15581
15593
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
15582
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15594
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15583
15595
  }
15584
15596
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
15585
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15597
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15598
+ --pf-v6-c-drawer__main--Gap: 0;
15586
15599
  }
15587
15600
  }
15588
15601
  @media (min-width: 90.625rem) {
15589
15602
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
15590
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
15603
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15591
15604
  }
15592
15605
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
15593
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
15606
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15594
15607
  }
15595
15608
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
15596
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
15609
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15597
15610
  }
15598
15611
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
15599
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
15612
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15600
15613
  }
15601
15614
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
15602
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
15615
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15603
15616
  }
15604
15617
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
15605
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
15618
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
15619
+ --pf-v6-c-drawer__main--Gap: 0;
15606
15620
  }
15607
15621
  }
15608
15622
  @media (min-width: 48rem) {
@@ -19140,6 +19154,15 @@ ul.pf-v6-c-list {
19140
19154
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
19141
19155
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
19142
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%;
19143
19166
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
19144
19167
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
19145
19168
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -19160,6 +19183,7 @@ ul.pf-v6-c-list {
19160
19183
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
19161
19184
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
19162
19185
  display: grid;
19186
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
19163
19187
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
19164
19188
  row-gap: var(--pf-v6-c-masthead--RowGap);
19165
19189
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -19192,6 +19216,36 @@ ul.pf-v6-c-list {
19192
19216
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
19193
19217
  }
19194
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
+ }
19195
19249
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
19196
19250
  flex-wrap: nowrap;
19197
19251
  min-width: 0;
@@ -21240,6 +21294,15 @@ ul.pf-v6-c-list {
21240
21294
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
21241
21295
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
21242
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);
21243
21306
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
21244
21307
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
21245
21308
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -21264,6 +21327,7 @@ ul.pf-v6-c-list {
21264
21327
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
21265
21328
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
21266
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;
21267
21331
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
21268
21332
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
21269
21333
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -21304,6 +21368,11 @@ ul.pf-v6-c-list {
21304
21368
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
21305
21369
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
21306
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);
21307
21376
  }
21308
21377
  @media screen and (prefers-reduced-motion: no-preference) {
21309
21378
  .pf-v6-c-nav {
@@ -21345,6 +21414,21 @@ ul.pf-v6-c-list {
21345
21414
  .pf-v6-c-nav.pf-m-fill {
21346
21415
  flex-grow: 1;
21347
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
+ }
21348
21432
  .pf-v6-c-nav .pf-v6-c-menu {
21349
21433
  --pf-v6-c-menu--MinWidth: 100%;
21350
21434
  }
@@ -21408,14 +21492,34 @@ ul.pf-v6-c-list {
21408
21492
  }
21409
21493
 
21410
21494
  .pf-v6-c-nav__item {
21495
+ position: relative;
21411
21496
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
21412
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
+ }
21413
21513
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
21414
21514
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
21415
21515
  }
21416
21516
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
21417
21517
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
21418
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
+ }
21419
21523
 
21420
21524
  .pf-v6-c-nav__section {
21421
21525
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -21477,6 +21581,10 @@ ul.pf-v6-c-list {
21477
21581
  color: var(--pf-v6-c-nav__link-icon--Color);
21478
21582
  }
21479
21583
 
21584
+ .pf-v6-c-nav__link-text {
21585
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
21586
+ }
21587
+
21480
21588
  .pf-v6-c-nav__toggle {
21481
21589
  flex: none;
21482
21590
  align-self: start;
@@ -21532,6 +21640,7 @@ ul.pf-v6-c-list {
21532
21640
  }
21533
21641
 
21534
21642
  .pf-v6-c-nav:where(.pf-m-horizontal) {
21643
+ --pf-v6-c-nav__item--accent--content: none;
21535
21644
  padding: 0;
21536
21645
  overflow: hidden;
21537
21646
  }
@@ -21897,6 +22006,7 @@ ul.pf-v6-c-list {
21897
22006
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21898
22007
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
21899
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);
21900
22010
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21901
22011
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
21902
22012
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -22004,6 +22114,9 @@ ul.pf-v6-c-list {
22004
22114
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
22005
22115
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
22006
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);
22007
22120
  }
22008
22121
  @media screen and (prefers-reduced-motion: no-preference) {
22009
22122
  .pf-v6-c-page {
@@ -22046,6 +22159,16 @@ ul.pf-v6-c-list {
22046
22159
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
22047
22160
  }
22048
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
+ }
22049
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) {
22050
22173
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
22051
22174
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -22102,6 +22225,11 @@ ul.pf-v6-c-list {
22102
22225
  }
22103
22226
  }
22104
22227
 
22228
+ .pf-v6-c-page__dock {
22229
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
22230
+ grid-area: dock;
22231
+ }
22232
+
22105
22233
  .pf-v6-c-page__sidebar {
22106
22234
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22107
22235
  display: flex;
@@ -22405,6 +22533,7 @@ ul.pf-v6-c-list {
22405
22533
  flex-direction: column;
22406
22534
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
22407
22535
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
22536
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
22408
22537
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
22409
22538
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
22410
22539
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -30438,6 +30567,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30438
30567
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
30439
30568
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
30440
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;
30441
30571
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
30442
30572
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
30443
30573
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -30641,6 +30771,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30641
30771
  .pf-v6-c-toolbar.pf-m-no-background {
30642
30772
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
30643
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
+ }
30644
30784
 
30645
30785
  .pf-v6-c-toolbar__item {
30646
30786
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -30720,6 +30860,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30720
30860
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
30721
30861
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
30722
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
+ }
30723
30866
  .pf-v6-c-toolbar__group.pf-m-filter-group {
30724
30867
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
30725
30868
  }
@@ -30731,9 +30874,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30731
30874
  .pf-v6-c-toolbar__group.pf-m-action-group {
30732
30875
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
30733
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
+ }
30734
30880
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
30735
30881
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
30736
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
+ }
30737
30886
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
30738
30887
  flex-wrap: wrap;
30739
30888
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -30810,7 +30959,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
30810
30959
  }
30811
30960
  .pf-v6-c-toolbar__group.pf-m-align-end,
30812
30961
  .pf-v6-c-toolbar__item.pf-m-align-end {
30813
- 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);
30814
30964
  }
30815
30965
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
30816
30966
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -31065,7 +31215,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31065
31215
  }
31066
31216
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
31067
31217
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
31068
- 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);
31069
31220
  }
31070
31221
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
31071
31222
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -31317,7 +31468,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31317
31468
  }
31318
31469
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
31319
31470
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
31320
- 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);
31321
31473
  }
31322
31474
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
31323
31475
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -31569,7 +31721,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31569
31721
  }
31570
31722
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
31571
31723
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
31572
- 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);
31573
31726
  }
31574
31727
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
31575
31728
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -31821,7 +31974,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31821
31974
  }
31822
31975
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
31823
31976
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
31824
- 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);
31825
31979
  }
31826
31980
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
31827
31981
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -32073,7 +32227,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
32073
32227
  }
32074
32228
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
32075
32229
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
32076
- 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);
32077
32232
  }
32078
32233
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
32079
32234
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {