@patternfly/react-styles 6.5.0-prerelease.6 → 6.5.0-prerelease.9

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 (84) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Compass/compass.css +68 -29
  3. package/css/components/Compass/compass.d.ts +2 -0
  4. package/css/components/Compass/compass.js +2 -0
  5. package/css/components/Compass/compass.mjs +2 -0
  6. package/css/components/Drawer/drawer.css +30 -26
  7. package/css/components/ExpandableSection/expandable-section.css +3 -0
  8. package/css/components/Masthead/masthead.css +52 -0
  9. package/css/components/Masthead/masthead.d.ts +1 -0
  10. package/css/components/Masthead/masthead.js +1 -0
  11. package/css/components/Masthead/masthead.mjs +1 -0
  12. package/css/components/Nav/nav.css +59 -0
  13. package/css/components/Nav/nav.d.ts +3 -1
  14. package/css/components/Nav/nav.js +3 -1
  15. package/css/components/Nav/nav.mjs +3 -1
  16. package/css/components/Page/page.css +20 -0
  17. package/css/components/Page/page.d.ts +2 -0
  18. package/css/components/Page/page.js +2 -0
  19. package/css/components/Page/page.mjs +2 -0
  20. package/css/components/Toolbar/toolbar.css +32 -6
  21. package/css/components/Toolbar/toolbar.d.ts +1 -0
  22. package/css/components/Toolbar/toolbar.js +1 -0
  23. package/css/components/Toolbar/toolbar.mjs +1 -0
  24. package/css/components/_index.css +264 -61
  25. package/css/components/_index.d.ts +5 -0
  26. package/css/components/_index.js +5 -0
  27. package/css/components/_index.mjs +5 -0
  28. package/css/docs/components/Compass/examples/Compass.css +8 -2
  29. package/css/docs/components/Compass/examples/Compass.d.ts +4 -1
  30. package/css/docs/components/Compass/examples/Compass.js +4 -1
  31. package/css/docs/components/Compass/examples/Compass.mjs +4 -1
  32. package/css/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  33. package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +1 -1
  34. package/css/docs/layouts/Bullseye/examples/Bullseye.js +1 -1
  35. package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +1 -1
  36. package/css/docs/layouts/Flex/examples/Flex.css +3 -3
  37. package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
  38. package/css/docs/layouts/Flex/examples/Flex.js +2 -2
  39. package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
  40. package/css/docs/layouts/Gallery/examples/Gallery.css +2 -2
  41. package/css/docs/layouts/Gallery/examples/Gallery.d.ts +1 -1
  42. package/css/docs/layouts/Gallery/examples/Gallery.js +1 -1
  43. package/css/docs/layouts/Gallery/examples/Gallery.mjs +1 -1
  44. package/css/docs/layouts/Grid/examples/Grid.css +1 -1
  45. package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
  46. package/css/docs/layouts/Grid/examples/Grid.js +1 -1
  47. package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
  48. package/css/docs/layouts/Level/examples/Level.css +3 -3
  49. package/css/docs/layouts/Level/examples/Level.d.ts +1 -1
  50. package/css/docs/layouts/Level/examples/Level.js +1 -1
  51. package/css/docs/layouts/Level/examples/Level.mjs +1 -1
  52. package/css/docs/layouts/Split/examples/Split.css +1 -1
  53. package/css/docs/layouts/Split/examples/Split.d.ts +1 -1
  54. package/css/docs/layouts/Split/examples/Split.js +1 -1
  55. package/css/docs/layouts/Split/examples/Split.mjs +1 -1
  56. package/css/docs/layouts/Stack/examples/Stack.css +3 -3
  57. package/css/docs/layouts/Stack/examples/Stack.d.ts +1 -1
  58. package/css/docs/layouts/Stack/examples/Stack.js +1 -1
  59. package/css/docs/layouts/Stack/examples/Stack.mjs +1 -1
  60. package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
  61. package/css/docs/utilities/Alignment/examples/Alignment.d.ts +1 -1
  62. package/css/docs/utilities/Alignment/examples/Alignment.js +1 -1
  63. package/css/docs/utilities/Alignment/examples/Alignment.mjs +1 -1
  64. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  65. package/css/docs/utilities/BoxShadow/examples/box-shadow.d.ts +1 -1
  66. package/css/docs/utilities/BoxShadow/examples/box-shadow.js +1 -1
  67. package/css/docs/utilities/BoxShadow/examples/box-shadow.mjs +1 -1
  68. package/css/docs/utilities/Display/examples/Display.css +1 -1
  69. package/css/docs/utilities/Display/examples/Display.d.ts +1 -1
  70. package/css/docs/utilities/Display/examples/Display.js +1 -1
  71. package/css/docs/utilities/Display/examples/Display.mjs +1 -1
  72. package/css/docs/utilities/Flex/examples/Flex.css +7 -7
  73. package/css/docs/utilities/Flex/examples/Flex.d.ts +1 -1
  74. package/css/docs/utilities/Flex/examples/Flex.js +1 -1
  75. package/css/docs/utilities/Flex/examples/Flex.mjs +1 -1
  76. package/css/docs/utilities/Float/examples/Float.css +2 -2
  77. package/css/docs/utilities/Float/examples/Float.d.ts +1 -1
  78. package/css/docs/utilities/Float/examples/Float.js +1 -1
  79. package/css/docs/utilities/Float/examples/Float.mjs +1 -1
  80. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  81. package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
  82. package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
  83. package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
  84. package/package.json +3 -3
@@ -3512,8 +3512,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3512
3512
  --pf-v6-c-compass--BackgroundImage--light: none;
3513
3513
  --pf-v6-c-compass--BackgroundImage--dark: none;
3514
3514
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3515
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
3516
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
3515
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3517
3516
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
3517
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3519
3518
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -3528,47 +3527,59 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3528
3527
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3529
3528
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3530
3529
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3531
- --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
3532
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3533
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3534
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3530
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3535
3531
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3536
3532
  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3537
3533
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3538
3534
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3539
3535
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3540
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3536
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3537
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3541
3538
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3539
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3540
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3542
3541
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3543
3542
  --pf-v6-c-compass__message-bar--Width: 450px;
3544
3543
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3545
3544
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3546
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
3545
+ --pf-v6-c-compass--section--slide--length--header: 100%;
3546
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
3547
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
3548
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
3549
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
3547
3550
  --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3548
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
3549
- --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
3550
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3551
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
3552
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3553
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3551
3554
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3552
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
3555
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3553
3556
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3554
3557
  }
3555
3558
  @media screen and (prefers-reduced-motion: no-preference) {
3556
3559
  .pf-v6-c-compass {
3557
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
3558
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
3559
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3560
- --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
3561
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
3560
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3561
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3562
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
3563
+ }
3564
+ .pf-v6-c-compass.pf-m-animate-smoothly {
3565
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3566
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
3567
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
3568
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
3569
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
3570
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3571
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3572
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
3562
3573
  }
3563
3574
  }
3564
3575
 
3565
3576
  .pf-v6-c-compass {
3577
+ interpolate-size: allow-keywords;
3566
3578
  display: grid;
3567
3579
  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3568
3580
  grid-template-rows: auto 1fr;
3569
3581
  grid-template-columns: auto 1fr auto;
3570
3582
  grid-auto-rows: auto;
3571
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3572
3583
  align-items: center;
3573
3584
  justify-content: center;
3574
3585
  height: 100dvh;
@@ -3577,6 +3588,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3577
3588
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3578
3589
  background-size: cover;
3579
3590
  }
3591
+ .pf-v6-c-compass.pf-m-dock {
3592
+ grid-template-areas: "dock main";
3593
+ grid-template-rows: auto;
3594
+ grid-template-columns: auto 1fr;
3595
+ align-items: stretch;
3596
+ padding: 0;
3597
+ }
3598
+ .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
3599
+ padding: var(--pf-v6-c-compass--Padding);
3600
+ }
3580
3601
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3581
3602
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3582
3603
  }
@@ -3588,6 +3609,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3588
3609
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3589
3610
  .pf-v6-c-compass__main-footer,
3590
3611
  .pf-v6-c-compass__footer {
3612
+ margin: 0;
3591
3613
  visibility: hidden;
3592
3614
  opacity: 0;
3593
3615
  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -3609,12 +3631,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3609
3631
  .pf-v6-c-compass__header,
3610
3632
  .pf-v6-c-compass__main-footer,
3611
3633
  .pf-v6-c-compass__footer {
3612
- max-height: 0;
3634
+ height: 0;
3613
3635
  }
3614
3636
  .pf-v6-c-compass__header.pf-m-expanded,
3615
3637
  .pf-v6-c-compass__main-footer.pf-m-expanded,
3616
3638
  .pf-v6-c-compass__footer.pf-m-expanded {
3617
- max-height: 9999px;
3639
+ height: auto;
3618
3640
  }
3619
3641
 
3620
3642
  .pf-v6-c-compass__header {
@@ -3622,7 +3644,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3622
3644
  grid-area: header;
3623
3645
  grid-template-columns: 1fr auto 1fr;
3624
3646
  align-items: start;
3625
- translate: 0 -100%;
3647
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
3648
+ }
3649
+ .pf-v6-c-compass__header.pf-m-expanded {
3650
+ margin-block-end: var(--pf-v6-c-compass--Gap);
3626
3651
  }
3627
3652
 
3628
3653
  .pf-v6-c-compass__profile {
@@ -3659,25 +3684,33 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3659
3684
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3660
3685
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3661
3686
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3662
- max-width: 0;
3687
+ display: flex;
3688
+ width: 0;
3663
3689
  }
3664
3690
  .pf-v6-c-compass__sidebar.pf-m-expanded {
3665
- max-width: 9999px;
3691
+ width: auto;
3666
3692
  }
3667
3693
  .pf-v6-c-compass__sidebar.pf-m-start {
3668
- translate: -100%;
3694
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3669
3695
  grid-area: sidebar-start;
3670
3696
  }
3671
3697
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3672
- translate: 100%;
3698
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3673
3699
  }
3674
3700
 
3701
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3702
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3703
+ }
3675
3704
  .pf-v6-c-compass__sidebar.pf-m-end {
3676
- translate: 100%;
3705
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3677
3706
  grid-area: sidebar-end;
3678
3707
  }
3679
3708
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3680
- translate: -100%;
3709
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3710
+ }
3711
+
3712
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
3713
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
3681
3714
  }
3682
3715
 
3683
3716
  .pf-v6-c-compass__main {
@@ -3713,15 +3746,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3713
3746
  .pf-v6-c-compass__main-footer {
3714
3747
  display: flex;
3715
3748
  justify-content: center;
3749
+ min-height: 0;
3750
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3751
+ }
3752
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
3716
3753
  margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3717
- translate: 0 100%;
3718
3754
  }
3719
3755
 
3720
3756
  .pf-v6-c-compass__footer {
3721
3757
  display: flex;
3722
3758
  grid-column: 1/-1;
3723
3759
  justify-content: center;
3724
- translate: 0 100%;
3760
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3761
+ }
3762
+ .pf-v6-c-compass__footer.pf-m-expanded {
3763
+ margin-block-start: var(--pf-v6-c-compass--Gap);
3725
3764
  }
3726
3765
 
3727
3766
  .pf-v6-c-compass__message-bar {
@@ -6218,7 +6257,7 @@ ul) {
6218
6257
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
6219
6258
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6220
6259
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6221
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
6260
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
6222
6261
  }
6223
6262
  .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) {
6224
6263
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -6247,7 +6286,7 @@ ul) {
6247
6286
  visibility: visible;
6248
6287
  }
6249
6288
  :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 {
6250
- transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
6289
+ transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
6251
6290
  }
6252
6291
 
6253
6292
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -6596,82 +6635,86 @@ ul) {
6596
6635
  }
6597
6636
  @media (min-width: 48rem) {
6598
6637
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6599
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6638
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6600
6639
  }
6601
6640
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6602
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6641
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6603
6642
  }
6604
6643
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6605
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6644
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6606
6645
  }
6607
6646
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6608
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6647
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6609
6648
  }
6610
6649
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6611
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6650
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6612
6651
  }
6613
6652
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6614
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6653
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6654
+ --pf-v6-c-drawer__main--Gap: 0;
6615
6655
  }
6616
6656
  }
6617
6657
  @media (min-width: 62rem) {
6618
6658
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6619
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6659
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6620
6660
  }
6621
6661
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6622
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6662
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6623
6663
  }
6624
6664
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6625
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6665
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6626
6666
  }
6627
6667
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6628
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6668
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6629
6669
  }
6630
6670
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6631
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6671
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6632
6672
  }
6633
6673
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6634
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6674
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6675
+ --pf-v6-c-drawer__main--Gap: 0;
6635
6676
  }
6636
6677
  }
6637
6678
  @media (min-width: 75rem) {
6638
6679
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6639
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6680
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6640
6681
  }
6641
6682
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6642
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6683
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6643
6684
  }
6644
6685
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6645
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6686
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6646
6687
  }
6647
6688
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6648
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6689
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6649
6690
  }
6650
6691
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6651
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6692
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6652
6693
  }
6653
6694
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6654
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6695
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6696
+ --pf-v6-c-drawer__main--Gap: 0;
6655
6697
  }
6656
6698
  }
6657
6699
  @media (min-width: 90.625rem) {
6658
6700
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6659
- --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
6701
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6660
6702
  }
6661
6703
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6662
- --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
6704
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6663
6705
  }
6664
6706
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6665
- --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6707
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6666
6708
  }
6667
6709
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6668
- --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
6710
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6669
6711
  }
6670
6712
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6671
- --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
6713
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6672
6714
  }
6673
6715
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6674
- --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
6716
+ --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
6717
+ --pf-v6-c-drawer__main--Gap: 0;
6675
6718
  }
6676
6719
  }
6677
6720
  @media (min-width: 48rem) {
@@ -7103,6 +7146,9 @@ ul) {
7103
7146
  --pf-v6-c-expandable-section__content--Opacity: 0;
7104
7147
  --pf-v6-c-expandable-section__content--TranslateY: 0;
7105
7148
  --pf-v6-c-expandable-section__content--PaddingInlineStart: 0;
7149
+ --pf-v6-c-expandable-section__content--MaxHeight: 0px;
7150
+ --pf-v6-c-expandable-section__content--Visibility: hidden;
7151
+ --pf-v6-c-expandable-section__content--Opacity: 0;
7106
7152
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
7107
7153
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
7108
7154
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -10206,6 +10252,15 @@ ul.pf-v6-c-list {
10206
10252
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
10207
10253
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
10208
10254
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
10255
+ --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
10256
+ --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
10257
+ --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10258
+ --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10259
+ --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10260
+ --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10261
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
10262
+ --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
10263
+ --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
10209
10264
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
10210
10265
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
10211
10266
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -10226,6 +10281,7 @@ ul.pf-v6-c-list {
10226
10281
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
10227
10282
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
10228
10283
  display: grid;
10284
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
10229
10285
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
10230
10286
  row-gap: var(--pf-v6-c-masthead--RowGap);
10231
10287
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -10258,6 +10314,48 @@ ul.pf-v6-c-list {
10258
10314
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10259
10315
  }
10260
10316
  }
10317
+ .pf-v6-c-masthead.pf-m-docked {
10318
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
10319
+ --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
10320
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
10321
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
10322
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
10323
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
10324
+ --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
10325
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
10326
+ --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
10327
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10328
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10329
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10330
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
10331
+ --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
10332
+ --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
10333
+ --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
10334
+ --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
10335
+ --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
10336
+ --pf-v6-c-masthead--GridTemplateColumns: auto;
10337
+ --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
10338
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
10339
+ --pf-v6-c-masthead__main--GridColumn: auto;
10340
+ --pf-v6-c-masthead__content--GridColumn: auto;
10341
+ --pf-v6-c-masthead__logo--Width: auto;
10342
+ --pf-v6-c-masthead__main--MarginInlineEnd: 0;
10343
+ display: flex;
10344
+ flex-direction: column;
10345
+ align-items: center;
10346
+ width: fit-content;
10347
+ height: 100%;
10348
+ backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
10349
+ }
10350
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
10351
+ flex-direction: column;
10352
+ flex-grow: 1;
10353
+ align-self: revert;
10354
+ }
10355
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
10356
+ --pf-v6-c-masthead--c-toolbar--Width: fit-content;
10357
+ height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
10358
+ }
10261
10359
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
10262
10360
  flex-wrap: nowrap;
10263
10361
  min-width: 0;
@@ -12306,6 +12404,15 @@ ul.pf-v6-c-list {
12306
12404
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
12307
12405
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
12308
12406
  --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
12407
+ --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
12408
+ --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
12409
+ --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
12410
+ --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
12411
+ --pf-v6-c-nav__item--accent--ScaleY: 0;
12412
+ --pf-v6-c-nav__item--current--accent--ScaleY: 1;
12413
+ --pf-v6-c-nav__item--accent--TransitionDuration: 0;
12414
+ --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
12415
+ --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
12309
12416
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
12310
12417
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
12311
12418
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -12330,6 +12437,7 @@ ul.pf-v6-c-list {
12330
12437
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
12331
12438
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
12332
12439
  --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
12440
+ --pf-v6-c-nav__link-text--FontSize: initial;
12333
12441
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
12334
12442
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
12335
12443
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -12370,6 +12478,11 @@ ul.pf-v6-c-list {
12370
12478
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
12371
12479
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
12372
12480
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
12481
+ --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
12482
+ --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12483
+ --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12484
+ --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
12485
+ --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
12373
12486
  }
12374
12487
  @media screen and (prefers-reduced-motion: no-preference) {
12375
12488
  .pf-v6-c-nav {
@@ -12411,6 +12524,25 @@ ul.pf-v6-c-list {
12411
12524
  .pf-v6-c-nav.pf-m-fill {
12412
12525
  flex-grow: 1;
12413
12526
  }
12527
+ .pf-v6-c-nav.pf-m-docked {
12528
+ --pf-v6-c-nav--PaddingBlockStart: 0;
12529
+ --pf-v6-c-nav--PaddingBlockEnd: 0;
12530
+ --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
12531
+ --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
12532
+ --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
12533
+ --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
12534
+ --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
12535
+ width: fit-content;
12536
+ }
12537
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
12538
+ position: relative;
12539
+ align-self: center;
12540
+ min-width: 1lh;
12541
+ text-align: center;
12542
+ }
12543
+ .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
12544
+ display: none;
12545
+ }
12414
12546
  .pf-v6-c-nav .pf-v6-c-menu {
12415
12547
  --pf-v6-c-menu--MinWidth: 100%;
12416
12548
  }
@@ -12474,14 +12606,34 @@ ul.pf-v6-c-list {
12474
12606
  }
12475
12607
 
12476
12608
  .pf-v6-c-nav__item {
12609
+ position: relative;
12477
12610
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
12478
12611
  }
12612
+ .pf-v6-c-nav__item::before {
12613
+ position: absolute;
12614
+ inset-block-start: 0;
12615
+ inset-block-end: 0;
12616
+ inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
12617
+ width: var(--pf-v6-c-nav__item--accent--size);
12618
+ pointer-events: none;
12619
+ content: var(--pf-v6-c-nav__item--accent--content, "");
12620
+ background-color: var(--pf-v6-c-nav__item--accent--color);
12621
+ border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
12622
+ transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
12623
+ transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
12624
+ transition-property: scale;
12625
+ scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
12626
+ }
12479
12627
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
12480
12628
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
12481
12629
  }
12482
12630
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
12483
12631
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
12484
12632
  }
12633
+ .pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
12634
+ --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
12635
+ --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
12636
+ }
12485
12637
 
12486
12638
  .pf-v6-c-nav__section {
12487
12639
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -12543,6 +12695,10 @@ ul.pf-v6-c-list {
12543
12695
  color: var(--pf-v6-c-nav__link-icon--Color);
12544
12696
  }
12545
12697
 
12698
+ .pf-v6-c-nav__link-text {
12699
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
12700
+ }
12701
+
12546
12702
  .pf-v6-c-nav__toggle {
12547
12703
  flex: none;
12548
12704
  align-self: start;
@@ -12598,6 +12754,7 @@ ul.pf-v6-c-list {
12598
12754
  }
12599
12755
 
12600
12756
  .pf-v6-c-nav:where(.pf-m-horizontal) {
12757
+ --pf-v6-c-nav__item--accent--content: none;
12601
12758
  padding: 0;
12602
12759
  overflow: hidden;
12603
12760
  }
@@ -12963,6 +13120,7 @@ ul.pf-v6-c-list {
12963
13120
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12964
13121
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
12965
13122
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13123
+ --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
12966
13124
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
12967
13125
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
12968
13126
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -13070,6 +13228,9 @@ ul.pf-v6-c-list {
13070
13228
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
13071
13229
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13072
13230
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13231
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13232
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13233
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13073
13234
  }
13074
13235
  @media screen and (prefers-reduced-motion: no-preference) {
13075
13236
  .pf-v6-c-page {
@@ -13112,6 +13273,16 @@ ul.pf-v6-c-list {
13112
13273
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
13113
13274
  }
13114
13275
  }
13276
+ .pf-v6-c-page.pf-m-dock {
13277
+ --pf-v6-c-page--masthead--main-container--GridArea: main;
13278
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
13279
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
13280
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
13281
+ grid-template-areas: "dock main";
13282
+ grid-template-rows: auto;
13283
+ grid-template-columns: auto 1fr;
13284
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
13285
+ }
13115
13286
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
13116
13287
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13117
13288
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -13168,6 +13339,11 @@ ul.pf-v6-c-list {
13168
13339
  }
13169
13340
  }
13170
13341
 
13342
+ .pf-v6-c-page__dock {
13343
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
13344
+ grid-area: dock;
13345
+ }
13346
+
13171
13347
  .pf-v6-c-page__sidebar {
13172
13348
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
13173
13349
  display: flex;
@@ -13471,6 +13647,7 @@ ul.pf-v6-c-list {
13471
13647
  flex-direction: column;
13472
13648
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
13473
13649
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
13650
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
13474
13651
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13475
13652
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13476
13653
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -21504,6 +21681,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21504
21681
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21505
21682
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21506
21683
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
21684
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
21507
21685
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21508
21686
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21509
21687
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -21707,6 +21885,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21707
21885
  .pf-v6-c-toolbar.pf-m-no-background {
21708
21886
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
21709
21887
  }
21888
+ .pf-v6-c-toolbar.pf-m-vertical {
21889
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
21890
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
21891
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
21892
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
21893
+ }
21894
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
21895
+ flex-direction: column;
21896
+ align-items: center;
21897
+ }
21710
21898
 
21711
21899
  .pf-v6-c-toolbar__item {
21712
21900
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -21786,6 +21974,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21786
21974
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
21787
21975
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21788
21976
  }
21977
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
21978
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21979
+ }
21789
21980
  .pf-v6-c-toolbar__group.pf-m-filter-group {
21790
21981
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
21791
21982
  }
@@ -21797,9 +21988,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21797
21988
  .pf-v6-c-toolbar__group.pf-m-action-group {
21798
21989
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21799
21990
  }
21991
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
21992
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21993
+ }
21800
21994
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21801
21995
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21802
21996
  }
21997
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21998
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21999
+ }
21803
22000
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
21804
22001
  flex-wrap: wrap;
21805
22002
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -21876,7 +22073,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21876
22073
  }
21877
22074
  .pf-v6-c-toolbar__group.pf-m-align-end,
21878
22075
  .pf-v6-c-toolbar__item.pf-m-align-end {
21879
- margin-inline-start: auto;
22076
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22077
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
21880
22078
  }
21881
22079
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
21882
22080
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -22131,7 +22329,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22131
22329
  }
22132
22330
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
22133
22331
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
22134
- margin-inline-start: auto;
22332
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22333
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22135
22334
  }
22136
22335
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
22137
22336
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -22383,7 +22582,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22383
22582
  }
22384
22583
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
22385
22584
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
22386
- margin-inline-start: auto;
22585
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22586
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22387
22587
  }
22388
22588
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
22389
22589
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -22635,7 +22835,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22635
22835
  }
22636
22836
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
22637
22837
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
22638
- margin-inline-start: auto;
22838
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
22839
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22639
22840
  }
22640
22841
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
22641
22842
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -22887,7 +23088,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22887
23088
  }
22888
23089
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
22889
23090
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
22890
- margin-inline-start: auto;
23091
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23092
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
22891
23093
  }
22892
23094
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
22893
23095
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -23139,7 +23341,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23139
23341
  }
23140
23342
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
23141
23343
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
23142
- margin-inline-start: auto;
23344
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
23345
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
23143
23346
  }
23144
23347
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
23145
23348
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {