@patternfly/patternfly 6.5.0-prerelease.76 → 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 (24) 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/Table/table-scrollable.css +1 -1
  12. package/components/Table/table-scrollable.scss +1 -1
  13. package/components/Toolbar/toolbar.css +48 -1
  14. package/components/Toolbar/toolbar.scss +53 -1
  15. package/components/_index.css +206 -15
  16. package/docs/components/Compass/examples/Compass.md +4 -1
  17. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  18. package/docs/components/Toolbar/examples/Toolbar.md +44 -0
  19. package/docs/demos/Compass/examples/Compass.md +1915 -266
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +206 -15
  22. package/patternfly.css +206 -15
  23. package/patternfly.min.css +1 -1
  24. 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.76",
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
 
@@ -29132,7 +29276,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29132
29276
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
29133
29277
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
29134
29278
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
29135
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29279
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29136
29280
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
29137
29281
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
29138
29282
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -31598,10 +31742,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31598
31742
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
31599
31743
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
31600
31744
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31745
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
31746
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
31601
31747
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
31602
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31748
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
31603
31749
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
31604
31750
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
31751
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
31752
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
31753
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
31754
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
31755
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
31756
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
31757
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
31758
+ }
31759
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
31760
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
31761
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
31762
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
31763
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
31764
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
31765
+ }
31766
+ .pf-v6-c-toolbar {
31605
31767
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
31606
31768
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
31607
31769
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -31878,6 +32040,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31878
32040
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
31879
32041
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
31880
32042
  }
32043
+ .pf-v6-c-toolbar.pf-m-sticky-base {
32044
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
32045
+ position: sticky;
32046
+ inset-block-start: 0;
32047
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
32048
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
32049
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
32050
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
32051
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
32052
+ background: transparent;
32053
+ border-radius: inherit;
32054
+ }
32055
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
32056
+ position: absolute;
32057
+ inset: 0;
32058
+ z-index: -1;
32059
+ content: "";
32060
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
32061
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32062
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
32063
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32064
+ opacity: 0;
32065
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
32066
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
32067
+ transition-property: opacity;
32068
+ }
32069
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
32070
+ opacity: 1;
32071
+ }
31881
32072
  .pf-v6-c-toolbar.pf-m-static,
31882
32073
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
31883
32074
  position: static;
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
 
@@ -29279,7 +29423,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29279
29423
  --pf-v6-c-table__sticky-cell--ZIndex: var(--pf-t--global--z-index--xs);
29280
29424
  --pf-v6-c-table__sticky-cell--InsetInlineEnd: auto;
29281
29425
  --pf-v6-c-table__sticky-cell--InsetInlineStart: auto;
29282
- --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--primary--default);
29426
+ --pf-v6-c-table__sticky-cell--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
29283
29427
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
29284
29428
  --pf-v6-c-table__sticky-cell--m-border-right--before--BorderInlineEndColor: var(--pf-t--global--border--color--default);
29285
29429
  --pf-v6-c-table__sticky-cell--m-border-left--before--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
@@ -31745,10 +31889,28 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
31745
31889
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
31746
31890
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
31747
31891
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31892
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
31893
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
31748
31894
  --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
31749
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31895
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
31750
31896
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
31751
31897
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
31898
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
31899
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
31900
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
31901
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
31902
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
31903
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
31904
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
31905
+ }
31906
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
31907
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
31908
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
31909
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
31910
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
31911
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
31912
+ }
31913
+ .pf-v6-c-toolbar {
31752
31914
  --pf-v6-c-toolbar--m-vertical--Width: fit-content;
31753
31915
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
31754
31916
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -32025,6 +32187,35 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
32025
32187
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32026
32188
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32027
32189
  }
32190
+ .pf-v6-c-toolbar.pf-m-sticky-base {
32191
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
32192
+ position: sticky;
32193
+ inset-block-start: 0;
32194
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
32195
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
32196
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
32197
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
32198
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
32199
+ background: transparent;
32200
+ border-radius: inherit;
32201
+ }
32202
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
32203
+ position: absolute;
32204
+ inset: 0;
32205
+ z-index: -1;
32206
+ content: "";
32207
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
32208
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
32209
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
32210
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
32211
+ opacity: 0;
32212
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
32213
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
32214
+ transition-property: opacity;
32215
+ }
32216
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
32217
+ opacity: 1;
32218
+ }
32028
32219
  .pf-v6-c-toolbar.pf-m-static,
32029
32220
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
32030
32221
  position: static;