@patternfly/react-styles 6.5.0-prerelease.5 → 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 +16 -0
  2. package/css/components/Compass/compass.css +170 -15
  3. package/css/components/Compass/compass.d.ts +10 -1
  4. package/css/components/Compass/compass.js +10 -1
  5. package/css/components/Compass/compass.mjs +10 -1
  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 +366 -47
  25. package/css/components/_index.d.ts +10 -0
  26. package/css/components/_index.js +10 -0
  27. package/css/components/_index.mjs +10 -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,37 +3512,92 @@ 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--xl);
3516
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
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
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3517
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3518
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3519
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3520
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3521
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3522
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3523
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3524
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3525
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3526
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3519
3527
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3528
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3529
+ --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3530
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3531
+ --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3532
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3533
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3534
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3535
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3520
3536
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3521
3537
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3538
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3522
3539
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3523
- --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3524
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3525
3540
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3526
- --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3527
3541
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3528
3542
  --pf-v6-c-compass__message-bar--Width: 450px;
3529
3543
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3530
3544
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
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);
3550
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
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);
3554
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3555
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3556
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3557
+ }
3558
+ @media screen and (prefers-reduced-motion: no-preference) {
3559
+ .pf-v6-c-compass {
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);
3573
+ }
3531
3574
  }
3532
3575
 
3533
3576
  .pf-v6-c-compass {
3577
+ interpolate-size: allow-keywords;
3534
3578
  display: grid;
3535
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
3536
- grid-template-rows: auto 1fr auto;
3579
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3580
+ grid-template-rows: auto 1fr;
3537
3581
  grid-template-columns: auto 1fr auto;
3538
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3582
+ grid-auto-rows: auto;
3539
3583
  align-items: center;
3540
3584
  justify-content: center;
3541
3585
  height: 100dvh;
3542
3586
  padding: var(--pf-v6-c-compass--Padding);
3587
+ overflow: hidden;
3543
3588
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3544
3589
  background-size: cover;
3545
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
+ }
3546
3601
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3547
3602
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3548
3603
  }
@@ -3550,11 +3605,49 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3550
3605
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3551
3606
  }
3552
3607
 
3608
+ .pf-v6-c-compass__header,
3609
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3610
+ .pf-v6-c-compass__main-footer,
3611
+ .pf-v6-c-compass__footer {
3612
+ margin: 0;
3613
+ visibility: hidden;
3614
+ opacity: 0;
3615
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
3616
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
3617
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
3618
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
3619
+ }
3620
+ .pf-v6-c-compass__header.pf-m-expanded,
3621
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
3622
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3623
+ .pf-v6-c-compass__footer.pf-m-expanded {
3624
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
3625
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
3626
+ visibility: visible;
3627
+ opacity: 1;
3628
+ translate: 0;
3629
+ }
3630
+
3631
+ .pf-v6-c-compass__header,
3632
+ .pf-v6-c-compass__main-footer,
3633
+ .pf-v6-c-compass__footer {
3634
+ height: 0;
3635
+ }
3636
+ .pf-v6-c-compass__header.pf-m-expanded,
3637
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3638
+ .pf-v6-c-compass__footer.pf-m-expanded {
3639
+ height: auto;
3640
+ }
3641
+
3553
3642
  .pf-v6-c-compass__header {
3554
3643
  display: grid;
3555
3644
  grid-area: header;
3556
3645
  grid-template-columns: 1fr auto 1fr;
3557
3646
  align-items: start;
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);
3558
3651
  }
3559
3652
 
3560
3653
  .pf-v6-c-compass__profile {
@@ -3565,6 +3658,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3565
3658
  }
3566
3659
 
3567
3660
  .pf-v6-c-compass__nav {
3661
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3662
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3663
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3664
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3568
3665
  display: flex;
3569
3666
  flex-direction: column;
3570
3667
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3572,12 +3669,49 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3572
3669
  justify-self: stretch;
3573
3670
  }
3574
3671
 
3672
+ .pf-v6-c-compass__nav-content {
3673
+ display: flex;
3674
+ align-items: center;
3675
+ }
3676
+
3677
+ .pf-v6-c-compass__nav-main {
3678
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3679
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3680
+ }
3681
+
3575
3682
  .pf-v6-c-compass__sidebar {
3576
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
3683
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3684
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3685
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3686
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3687
+ display: flex;
3688
+ width: 0;
3689
+ }
3690
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
3691
+ width: auto;
3577
3692
  }
3578
3693
  .pf-v6-c-compass__sidebar.pf-m-start {
3694
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3579
3695
  grid-area: sidebar-start;
3580
3696
  }
3697
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3698
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3699
+ }
3700
+
3701
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3702
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3703
+ }
3704
+ .pf-v6-c-compass__sidebar.pf-m-end {
3705
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3706
+ grid-area: sidebar-end;
3707
+ }
3708
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
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);
3714
+ }
3581
3715
 
3582
3716
  .pf-v6-c-compass__main {
3583
3717
  display: flex;
@@ -3588,6 +3722,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3588
3722
  min-height: 0;
3589
3723
  }
3590
3724
 
3725
+ .pf-v6-c-compass__main-header-content {
3726
+ display: flex;
3727
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3728
+ }
3729
+
3730
+ .pf-v6-c-compass__main-header-title {
3731
+ flex-grow: 1;
3732
+ }
3733
+
3591
3734
  .pf-v6-c-compass__content {
3592
3735
  display: flex;
3593
3736
  flex: 1 0 0;
@@ -3600,15 +3743,24 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3600
3743
  max-height: 100%;
3601
3744
  }
3602
3745
 
3603
- .pf-v6-c-compass__sidebar.pf-m-end {
3604
- grid-area: sidebar-end;
3605
- padding: var(--pf-t--global--spacer--sm);
3746
+ .pf-v6-c-compass__main-footer {
3747
+ display: flex;
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 {
3753
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3606
3754
  }
3607
3755
 
3608
3756
  .pf-v6-c-compass__footer {
3609
3757
  display: flex;
3610
- grid-area: footer;
3758
+ grid-column: 1/-1;
3611
3759
  justify-content: center;
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);
3612
3764
  }
3613
3765
 
3614
3766
  .pf-v6-c-compass__message-bar {
@@ -3618,7 +3770,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3618
3770
  }
3619
3771
 
3620
3772
  .pf-v6-c-compass__panel {
3621
- padding: var(--pf-v6-c-compass__panel--Padding);
3773
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3774
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3775
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3776
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3622
3777
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3623
3778
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3624
3779
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
@@ -6102,7 +6257,7 @@ ul) {
6102
6257
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
6103
6258
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
6104
6259
  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
6105
- --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
6260
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
6106
6261
  }
6107
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) {
6108
6263
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -6131,7 +6286,7 @@ ul) {
6131
6286
  visibility: visible;
6132
6287
  }
6133
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 {
6134
- 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)));
6135
6290
  }
6136
6291
 
6137
6292
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -6480,82 +6635,86 @@ ul) {
6480
6635
  }
6481
6636
  @media (min-width: 48rem) {
6482
6637
  .pf-v6-c-drawer__panel.pf-m-width-25 {
6483
- --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)));
6484
6639
  }
6485
6640
  .pf-v6-c-drawer__panel.pf-m-width-33 {
6486
- --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)));
6487
6642
  }
6488
6643
  .pf-v6-c-drawer__panel.pf-m-width-50 {
6489
- --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)));
6490
6645
  }
6491
6646
  .pf-v6-c-drawer__panel.pf-m-width-66 {
6492
- --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)));
6493
6648
  }
6494
6649
  .pf-v6-c-drawer__panel.pf-m-width-75 {
6495
- --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)));
6496
6651
  }
6497
6652
  .pf-v6-c-drawer__panel.pf-m-width-100 {
6498
- --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;
6499
6655
  }
6500
6656
  }
6501
6657
  @media (min-width: 62rem) {
6502
6658
  .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
6503
- --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)));
6504
6660
  }
6505
6661
  .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
6506
- --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)));
6507
6663
  }
6508
6664
  .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
6509
- --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)));
6510
6666
  }
6511
6667
  .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
6512
- --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)));
6513
6669
  }
6514
6670
  .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
6515
- --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)));
6516
6672
  }
6517
6673
  .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
6518
- --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;
6519
6676
  }
6520
6677
  }
6521
6678
  @media (min-width: 75rem) {
6522
6679
  .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
6523
- --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)));
6524
6681
  }
6525
6682
  .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
6526
- --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)));
6527
6684
  }
6528
6685
  .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
6529
- --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)));
6530
6687
  }
6531
6688
  .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
6532
- --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)));
6533
6690
  }
6534
6691
  .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
6535
- --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)));
6536
6693
  }
6537
6694
  .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
6538
- --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;
6539
6697
  }
6540
6698
  }
6541
6699
  @media (min-width: 90.625rem) {
6542
6700
  .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
6543
- --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)));
6544
6702
  }
6545
6703
  .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
6546
- --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)));
6547
6705
  }
6548
6706
  .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
6549
- --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)));
6550
6708
  }
6551
6709
  .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
6552
- --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)));
6553
6711
  }
6554
6712
  .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
6555
- --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)));
6556
6714
  }
6557
6715
  .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
6558
- --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;
6559
6718
  }
6560
6719
  }
6561
6720
  @media (min-width: 48rem) {
@@ -6987,6 +7146,9 @@ ul) {
6987
7146
  --pf-v6-c-expandable-section__content--Opacity: 0;
6988
7147
  --pf-v6-c-expandable-section__content--TranslateY: 0;
6989
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;
6990
7152
  --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: 0;
6991
7153
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
6992
7154
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
@@ -10090,6 +10252,15 @@ ul.pf-v6-c-list {
10090
10252
  --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
10091
10253
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
10092
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%;
10093
10264
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
10094
10265
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
10095
10266
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -10110,6 +10281,7 @@ ul.pf-v6-c-list {
10110
10281
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
10111
10282
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
10112
10283
  display: grid;
10284
+ grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
10113
10285
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
10114
10286
  row-gap: var(--pf-v6-c-masthead--RowGap);
10115
10287
  column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -10142,6 +10314,48 @@ ul.pf-v6-c-list {
10142
10314
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10143
10315
  }
10144
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
+ }
10145
10359
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
10146
10360
  flex-wrap: nowrap;
10147
10361
  min-width: 0;
@@ -12190,6 +12404,15 @@ ul.pf-v6-c-list {
12190
12404
  --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
12191
12405
  --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
12192
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);
12193
12416
  --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
12194
12417
  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
12195
12418
  --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -12214,6 +12437,7 @@ ul.pf-v6-c-list {
12214
12437
  --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
12215
12438
  --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
12216
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;
12217
12441
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
12218
12442
  --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
12219
12443
  --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -12254,6 +12478,11 @@ ul.pf-v6-c-list {
12254
12478
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
12255
12479
  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
12256
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);
12257
12486
  }
12258
12487
  @media screen and (prefers-reduced-motion: no-preference) {
12259
12488
  .pf-v6-c-nav {
@@ -12295,6 +12524,25 @@ ul.pf-v6-c-list {
12295
12524
  .pf-v6-c-nav.pf-m-fill {
12296
12525
  flex-grow: 1;
12297
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
+ }
12298
12546
  .pf-v6-c-nav .pf-v6-c-menu {
12299
12547
  --pf-v6-c-menu--MinWidth: 100%;
12300
12548
  }
@@ -12358,14 +12606,34 @@ ul.pf-v6-c-list {
12358
12606
  }
12359
12607
 
12360
12608
  .pf-v6-c-nav__item {
12609
+ position: relative;
12361
12610
  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
12362
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
+ }
12363
12627
  .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
12364
12628
  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
12365
12629
  }
12366
12630
  .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
12367
12631
  margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
12368
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
+ }
12369
12637
 
12370
12638
  .pf-v6-c-nav__section {
12371
12639
  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -12427,6 +12695,10 @@ ul.pf-v6-c-list {
12427
12695
  color: var(--pf-v6-c-nav__link-icon--Color);
12428
12696
  }
12429
12697
 
12698
+ .pf-v6-c-nav__link-text {
12699
+ font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
12700
+ }
12701
+
12430
12702
  .pf-v6-c-nav__toggle {
12431
12703
  flex: none;
12432
12704
  align-self: start;
@@ -12482,6 +12754,7 @@ ul.pf-v6-c-list {
12482
12754
  }
12483
12755
 
12484
12756
  .pf-v6-c-nav:where(.pf-m-horizontal) {
12757
+ --pf-v6-c-nav__item--accent--content: none;
12485
12758
  padding: 0;
12486
12759
  overflow: hidden;
12487
12760
  }
@@ -12847,6 +13120,7 @@ ul.pf-v6-c-list {
12847
13120
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
12848
13121
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
12849
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);
12850
13124
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
12851
13125
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
12852
13126
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -12954,6 +13228,9 @@ ul.pf-v6-c-list {
12954
13228
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
12955
13229
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
12956
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);
12957
13234
  }
12958
13235
  @media screen and (prefers-reduced-motion: no-preference) {
12959
13236
  .pf-v6-c-page {
@@ -12996,6 +13273,16 @@ ul.pf-v6-c-list {
12996
13273
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
12997
13274
  }
12998
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
+ }
12999
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) {
13000
13287
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13001
13288
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -13052,6 +13339,11 @@ ul.pf-v6-c-list {
13052
13339
  }
13053
13340
  }
13054
13341
 
13342
+ .pf-v6-c-page__dock {
13343
+ z-index: var(--pf-v6-c-page__dock--ZIndex);
13344
+ grid-area: dock;
13345
+ }
13346
+
13055
13347
  .pf-v6-c-page__sidebar {
13056
13348
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
13057
13349
  display: flex;
@@ -13355,6 +13647,7 @@ ul.pf-v6-c-list {
13355
13647
  flex-direction: column;
13356
13648
  align-self: var(--pf-v6-c-page__main-container--AlignSelf);
13357
13649
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
13650
+ margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
13358
13651
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13359
13652
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13360
13653
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -21388,6 +21681,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21388
21681
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
21389
21682
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
21390
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;
21391
21685
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
21392
21686
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
21393
21687
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -21591,6 +21885,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21591
21885
  .pf-v6-c-toolbar.pf-m-no-background {
21592
21886
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
21593
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
+ }
21594
21898
 
21595
21899
  .pf-v6-c-toolbar__item {
21596
21900
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
@@ -21670,6 +21974,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21670
21974
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
21671
21975
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
21672
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
+ }
21673
21980
  .pf-v6-c-toolbar__group.pf-m-filter-group {
21674
21981
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
21675
21982
  }
@@ -21681,9 +21988,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21681
21988
  .pf-v6-c-toolbar__group.pf-m-action-group {
21682
21989
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
21683
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
+ }
21684
21994
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
21685
21995
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
21686
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
+ }
21687
22000
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
21688
22001
  flex-wrap: wrap;
21689
22002
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -21760,7 +22073,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
21760
22073
  }
21761
22074
  .pf-v6-c-toolbar__group.pf-m-align-end,
21762
22075
  .pf-v6-c-toolbar__item.pf-m-align-end {
21763
- 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);
21764
22078
  }
21765
22079
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
21766
22080
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -22015,7 +22329,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22015
22329
  }
22016
22330
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
22017
22331
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
22018
- 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);
22019
22334
  }
22020
22335
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
22021
22336
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -22267,7 +22582,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22267
22582
  }
22268
22583
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
22269
22584
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
22270
- 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);
22271
22587
  }
22272
22588
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
22273
22589
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -22519,7 +22835,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22519
22835
  }
22520
22836
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
22521
22837
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
22522
- 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);
22523
22840
  }
22524
22841
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
22525
22842
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -22771,7 +23088,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22771
23088
  }
22772
23089
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
22773
23090
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
22774
- 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);
22775
23093
  }
22776
23094
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
22777
23095
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -23023,7 +23341,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23023
23341
  }
23024
23342
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
23025
23343
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
23026
- 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);
23027
23346
  }
23028
23347
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
23029
23348
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {