@patternfly/patternfly 6.5.0-prerelease.77 → 6.5.0-prerelease.78

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 (18) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +1 -1
  3. package/components/Compass/compass.css +147 -3
  4. package/components/Compass/compass.scss +142 -3
  5. package/components/Masthead/masthead.css +3 -3
  6. package/components/Masthead/masthead.scss +1 -1
  7. package/components/MenuToggle/menu-toggle.css +3 -3
  8. package/components/MenuToggle/menu-toggle.scss +1 -1
  9. package/components/Nav/nav.css +2 -2
  10. package/components/Nav/nav.scss +1 -1
  11. package/components/_index.css +157 -13
  12. package/docs/components/Compass/examples/Compass.md +4 -1
  13. package/docs/demos/Compass/examples/Compass.md +1915 -266
  14. package/package.json +1 -1
  15. package/patternfly-no-globals.css +157 -13
  16. package/patternfly.css +157 -13
  17. package/patternfly.min.css +1 -1
  18. package/patternfly.min.css.map +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.77",
4
+ "version": "6.5.0-prerelease.78",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -11624,11 +11624,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11624
11624
  display: none;
11625
11625
  }
11626
11626
  }
11627
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
11627
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
11628
11628
  justify-content: flex-start;
11629
11629
  width: 100%;
11630
11630
  }
11631
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
11631
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
11632
11632
  display: revert;
11633
11633
  }
11634
11634
 
@@ -12843,6 +12843,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12843
12843
  --pf-v6-c-compass__message-bar--Width: 450px;
12844
12844
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12845
12845
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12846
+ --pf-v6-c-compass--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12846
12847
  --pf-v6-c-compass--section--slide--length--header: 100%;
12847
12848
  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
12848
12849
  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
@@ -12855,6 +12856,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12855
12856
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
12856
12857
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
12857
12858
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
12859
+ --pf-v6-c-compass__dock--Width: 15.625rem;
12860
+ --pf-v6-c-compass__dock--desktop--Width: auto;
12861
+ --pf-v6-c-compass__dock--ZIndex: var(--pf-t--global--z-index--md);
12862
+ --pf-v6-c-compass__dock--TransitionDuration--slide: 0s;
12863
+ --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: 0s;
12864
+ --pf-v6-c-compass__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
12865
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12866
+ --pf-v6-c-compass__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
12867
+ --pf-v6-c-compass__dock-main--BoxShadow: none;
12868
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
12869
+ --pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
12870
+ --pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
12871
+ --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
12872
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
12873
+ --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
12874
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
12875
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
12858
12876
  }
12859
12877
  @media screen and (prefers-reduced-motion: no-preference) {
12860
12878
  .pf-v6-c-compass {
@@ -12890,18 +12908,90 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12890
12908
  background-size: cover;
12891
12909
  }
12892
12910
  .pf-v6-c-compass.pf-m-docked {
12893
- grid-template-areas: "dock main";
12894
- grid-template-rows: auto;
12895
- grid-template-columns: auto 1fr;
12911
+ grid-template-areas: "header" "main";
12912
+ grid-template-rows: max-content 1fr;
12913
+ grid-template-columns: 1fr;
12896
12914
  align-items: stretch;
12897
12915
  padding: 0;
12898
12916
  }
12899
12917
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
12900
12918
  padding: var(--pf-v6-c-compass--Padding);
12901
12919
  }
12920
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
12921
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
12922
+ grid-area: header;
12923
+ }
12902
12924
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12903
12925
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12904
12926
  }
12927
+ @media (min-width: 62rem) {
12928
+ .pf-v6-c-compass.pf-m-docked {
12929
+ grid-template-areas: "dock main";
12930
+ grid-template-rows: auto;
12931
+ grid-template-columns: auto 1fr;
12932
+ row-gap: var(--pf-v6-c-compass__main--RowGap);
12933
+ align-items: stretch;
12934
+ padding: 0;
12935
+ }
12936
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
12937
+ display: none;
12938
+ }
12939
+ }
12940
+ .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12941
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12942
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12943
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12944
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12945
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12946
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12947
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12948
+ }
12949
+ .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
12950
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12951
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12952
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12953
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12954
+ --pf-v6-c-button__icon--ScaleX: 1;
12955
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12956
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
12957
+ }
12958
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
12959
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12960
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12961
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12962
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12963
+ --pf-v6-c-button__icon--ScaleX: 1;
12964
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12965
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
12966
+ }
12967
+ @media (min-width: 62rem) {
12968
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
12969
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
12970
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
12971
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
12972
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
12973
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12974
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12975
+ }
12976
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12977
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12978
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12979
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12980
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12981
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12982
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12983
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12984
+ }
12985
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12986
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12987
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12988
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12989
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12990
+ --pf-v6-c-button__icon--ScaleX: 1;
12991
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12992
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
12993
+ }
12994
+ }
12905
12995
 
12906
12996
  .pf-v6-c-compass__header,
12907
12997
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -13019,6 +13109,60 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13019
13109
  margin-inline-start: var(--pf-v6-c-compass--Gap);
13020
13110
  }
13021
13111
 
13112
+ .pf-v6-c-compass__dock {
13113
+ position: fixed;
13114
+ inset-block-start: 0;
13115
+ inset-block-end: 0;
13116
+ inset-inline-start: 0;
13117
+ z-index: var(--pf-v6-c-compass__dock--ZIndex);
13118
+ display: flex;
13119
+ flex-direction: column;
13120
+ grid-area: dock;
13121
+ width: var(--pf-v6-c-compass__dock--Width);
13122
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
13123
+ translate: -100% 0;
13124
+ }
13125
+ .pf-v6-c-compass__dock.pf-m-expanded {
13126
+ --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
13127
+ translate: 0;
13128
+ }
13129
+ @media (min-width: 62rem) {
13130
+ .pf-v6-c-compass__dock {
13131
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
13132
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13133
+ position: revert;
13134
+ inset: revert;
13135
+ width: auto;
13136
+ translate: 0;
13137
+ }
13138
+ }
13139
+ .pf-v6-c-compass__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
13140
+ align-items: stretch;
13141
+ }
13142
+ .pf-v6-c-compass__dock.pf-m-text-expanded {
13143
+ width: var(--pf-v6-c-compass__dock--Width);
13144
+ }
13145
+
13146
+ .pf-v6-c-compass__dock-main {
13147
+ flex-grow: 1;
13148
+ background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
13149
+ backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
13150
+ border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
13151
+ box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
13152
+ }
13153
+ .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
13154
+ border-inline-end: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor);
13155
+ box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
13156
+ }
13157
+ @media (min-width: 62rem) {
13158
+ .pf-v6-c-compass__dock-main {
13159
+ --pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13160
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13161
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);
13162
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13163
+ }
13164
+ }
13165
+
13022
13166
  .pf-v6-c-compass__main {
13023
13167
  display: flex;
13024
13168
  flex-direction: column;
@@ -19789,13 +19933,13 @@ ul.pf-v6-c-list {
19789
19933
  display: revert;
19790
19934
  }
19791
19935
  }
19792
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
19936
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
19793
19937
  display: revert;
19794
19938
  }
19795
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
19939
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
19796
19940
  display: none;
19797
19941
  }
19798
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
19942
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
19799
19943
  align-items: flex-start;
19800
19944
  }
19801
19945
 
@@ -21266,12 +21410,12 @@ ul.pf-v6-c-list {
21266
21410
  display: none;
21267
21411
  }
21268
21412
  }
21269
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21413
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21270
21414
  justify-content: flex-start;
21271
21415
  width: 100%;
21272
21416
  }
21273
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
21274
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
21417
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
21418
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
21275
21419
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
21276
21420
  display: revert;
21277
21421
  }
@@ -22038,10 +22182,10 @@ ul.pf-v6-c-list {
22038
22182
  display: none;
22039
22183
  }
22040
22184
  }
22041
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
22185
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
22042
22186
  width: 100%;
22043
22187
  }
22044
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
22188
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
22045
22189
  display: revert;
22046
22190
  }
22047
22191
 
package/patternfly.css CHANGED
@@ -11771,11 +11771,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11771
11771
  display: none;
11772
11772
  }
11773
11773
  }
11774
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
11774
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
11775
11775
  justify-content: flex-start;
11776
11776
  width: 100%;
11777
11777
  }
11778
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
11778
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
11779
11779
  display: revert;
11780
11780
  }
11781
11781
 
@@ -12990,6 +12990,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12990
12990
  --pf-v6-c-compass__message-bar--Width: 450px;
12991
12991
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12992
12992
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12993
+ --pf-v6-c-compass--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12993
12994
  --pf-v6-c-compass--section--slide--length--header: 100%;
12994
12995
  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
12995
12996
  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
@@ -13002,6 +13003,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13002
13003
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
13003
13004
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
13004
13005
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
13006
+ --pf-v6-c-compass__dock--Width: 15.625rem;
13007
+ --pf-v6-c-compass__dock--desktop--Width: auto;
13008
+ --pf-v6-c-compass__dock--ZIndex: var(--pf-t--global--z-index--md);
13009
+ --pf-v6-c-compass__dock--TransitionDuration--slide: 0s;
13010
+ --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: 0s;
13011
+ --pf-v6-c-compass__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
13012
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13013
+ --pf-v6-c-compass__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
13014
+ --pf-v6-c-compass__dock-main--BoxShadow: none;
13015
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13016
+ --pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13017
+ --pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13018
+ --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13019
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
13020
+ --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13021
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
13022
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13005
13023
  }
13006
13024
  @media screen and (prefers-reduced-motion: no-preference) {
13007
13025
  .pf-v6-c-compass {
@@ -13037,18 +13055,90 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13037
13055
  background-size: cover;
13038
13056
  }
13039
13057
  .pf-v6-c-compass.pf-m-docked {
13040
- grid-template-areas: "dock main";
13041
- grid-template-rows: auto;
13042
- grid-template-columns: auto 1fr;
13058
+ grid-template-areas: "header" "main";
13059
+ grid-template-rows: max-content 1fr;
13060
+ grid-template-columns: 1fr;
13043
13061
  align-items: stretch;
13044
13062
  padding: 0;
13045
13063
  }
13046
13064
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
13047
13065
  padding: var(--pf-v6-c-compass--Padding);
13048
13066
  }
13067
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
13068
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
13069
+ grid-area: header;
13070
+ }
13049
13071
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
13050
13072
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
13051
13073
  }
13074
+ @media (min-width: 62rem) {
13075
+ .pf-v6-c-compass.pf-m-docked {
13076
+ grid-template-areas: "dock main";
13077
+ grid-template-rows: auto;
13078
+ grid-template-columns: auto 1fr;
13079
+ row-gap: var(--pf-v6-c-compass__main--RowGap);
13080
+ align-items: stretch;
13081
+ padding: 0;
13082
+ }
13083
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
13084
+ display: none;
13085
+ }
13086
+ }
13087
+ .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
13088
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13089
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13090
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13091
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13092
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13093
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13094
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13095
+ }
13096
+ .pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
13097
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13098
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13099
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13100
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13101
+ --pf-v6-c-button__icon--ScaleX: 1;
13102
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13103
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
13104
+ }
13105
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
13106
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13107
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13108
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13109
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13110
+ --pf-v6-c-button__icon--ScaleX: 1;
13111
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13112
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
13113
+ }
13114
+ @media (min-width: 62rem) {
13115
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
13116
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
13117
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
13118
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
13119
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
13120
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
13121
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
13122
+ }
13123
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
13124
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13125
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13126
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13127
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13128
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13129
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13130
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13131
+ }
13132
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
13133
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13134
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13135
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13136
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13137
+ --pf-v6-c-button__icon--ScaleX: 1;
13138
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13139
+ --pf-v6-c-button--hover__icon--ScaleX: 1;
13140
+ }
13141
+ }
13052
13142
 
13053
13143
  .pf-v6-c-compass__header,
13054
13144
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -13166,6 +13256,60 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13166
13256
  margin-inline-start: var(--pf-v6-c-compass--Gap);
13167
13257
  }
13168
13258
 
13259
+ .pf-v6-c-compass__dock {
13260
+ position: fixed;
13261
+ inset-block-start: 0;
13262
+ inset-block-end: 0;
13263
+ inset-inline-start: 0;
13264
+ z-index: var(--pf-v6-c-compass__dock--ZIndex);
13265
+ display: flex;
13266
+ flex-direction: column;
13267
+ grid-area: dock;
13268
+ width: var(--pf-v6-c-compass__dock--Width);
13269
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
13270
+ translate: -100% 0;
13271
+ }
13272
+ .pf-v6-c-compass__dock.pf-m-expanded {
13273
+ --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
13274
+ translate: 0;
13275
+ }
13276
+ @media (min-width: 62rem) {
13277
+ .pf-v6-c-compass__dock {
13278
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
13279
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13280
+ position: revert;
13281
+ inset: revert;
13282
+ width: auto;
13283
+ translate: 0;
13284
+ }
13285
+ }
13286
+ .pf-v6-c-compass__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
13287
+ align-items: stretch;
13288
+ }
13289
+ .pf-v6-c-compass__dock.pf-m-text-expanded {
13290
+ width: var(--pf-v6-c-compass__dock--Width);
13291
+ }
13292
+
13293
+ .pf-v6-c-compass__dock-main {
13294
+ flex-grow: 1;
13295
+ background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
13296
+ backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
13297
+ border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
13298
+ box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
13299
+ }
13300
+ .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
13301
+ border-inline-end: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor);
13302
+ box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
13303
+ }
13304
+ @media (min-width: 62rem) {
13305
+ .pf-v6-c-compass__dock-main {
13306
+ --pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13307
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13308
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);
13309
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13310
+ }
13311
+ }
13312
+
13169
13313
  .pf-v6-c-compass__main {
13170
13314
  display: flex;
13171
13315
  flex-direction: column;
@@ -19936,13 +20080,13 @@ ul.pf-v6-c-list {
19936
20080
  display: revert;
19937
20081
  }
19938
20082
  }
19939
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
20083
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
19940
20084
  display: revert;
19941
20085
  }
19942
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
20086
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
19943
20087
  display: none;
19944
20088
  }
19945
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
20089
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
19946
20090
  align-items: flex-start;
19947
20091
  }
19948
20092
 
@@ -21413,12 +21557,12 @@ ul.pf-v6-c-list {
21413
21557
  display: none;
21414
21558
  }
21415
21559
  }
21416
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21560
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21417
21561
  justify-content: flex-start;
21418
21562
  width: 100%;
21419
21563
  }
21420
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
21421
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
21564
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
21565
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
21422
21566
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
21423
21567
  display: revert;
21424
21568
  }
@@ -22185,10 +22329,10 @@ ul.pf-v6-c-list {
22185
22329
  display: none;
22186
22330
  }
22187
22331
  }
22188
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
22332
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
22189
22333
  width: 100%;
22190
22334
  }
22191
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
22335
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
22192
22336
  display: revert;
22193
22337
  }
22194
22338