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

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 (32) hide show
  1. package/README.md +1 -1
  2. package/components/Button/button.css +10 -4
  3. package/components/Button/button.scss +7 -1
  4. package/components/Compass/compass.css +147 -3
  5. package/components/Compass/compass.scss +142 -3
  6. package/components/Masthead/masthead.css +3 -3
  7. package/components/Masthead/masthead.scss +1 -1
  8. package/components/MenuToggle/menu-toggle.css +3 -3
  9. package/components/MenuToggle/menu-toggle.scss +1 -1
  10. package/components/Nav/nav.css +2 -2
  11. package/components/Nav/nav.scss +1 -1
  12. package/components/Page/page.css +12 -8
  13. package/components/Page/page.scss +6 -1
  14. package/components/Pagination/pagination.css +56 -4
  15. package/components/Pagination/pagination.scss +66 -5
  16. package/components/_index.css +233 -27
  17. package/docs/components/Compass/examples/Compass.css +2 -11
  18. package/docs/components/Compass/examples/Compass.md +8 -1
  19. package/docs/components/Nav/examples/Navigation.md +105 -9
  20. package/docs/components/Pagination/examples/Pagination.md +495 -3
  21. package/docs/demos/CardView/examples/CardView.md +1 -1
  22. package/docs/demos/Compass/examples/Compass.md +2108 -267
  23. package/docs/demos/DataList/examples/DataList.md +1 -1
  24. package/docs/demos/Nav/examples/Nav.md +272 -90
  25. package/docs/demos/Table/examples/Table.md +1 -1
  26. package/docs/demos/Toolbar/examples/Toolbar.md +7 -7
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +233 -27
  29. package/patternfly.css +233 -27
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
  32. package/sass-utilities/mixins.scss +2 -2
@@ -12247,7 +12247,7 @@ wrapperTag: div
12247
12247
  </tr>
12248
12248
  </tbody>
12249
12249
  </table>
12250
- <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
12250
+ <div class="pf-v6-c-pagination pf-m-static pf-m-bottom">
12251
12251
  <div class="pf-v6-c-pagination__page-menu">
12252
12252
  <button
12253
12253
  class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
@@ -146,7 +146,7 @@ section: components
146
146
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
147
147
  >
148
148
  <div
149
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
149
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
150
150
  >
151
151
  <div class="pf-v6-c-pagination__page-menu">
152
152
  <button
@@ -1747,7 +1747,7 @@ section: components
1747
1747
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
1748
1748
  >
1749
1749
  <div
1750
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
1750
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
1751
1751
  >
1752
1752
  <div class="pf-v6-c-pagination__page-menu">
1753
1753
  <button
@@ -2013,7 +2013,7 @@ section: components
2013
2013
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
2014
2014
  >
2015
2015
  <div
2016
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2016
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
2017
2017
  >
2018
2018
  <div class="pf-v6-c-pagination__page-menu">
2019
2019
  <button
@@ -2293,7 +2293,7 @@ section: components
2293
2293
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
2294
2294
  >
2295
2295
  <div
2296
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2296
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
2297
2297
  >
2298
2298
  <div class="pf-v6-c-pagination__page-menu">
2299
2299
  <button
@@ -2562,7 +2562,7 @@ section: components
2562
2562
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
2563
2563
  >
2564
2564
  <div
2565
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
2565
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
2566
2566
  >
2567
2567
  <div class="pf-v6-c-pagination__page-menu">
2568
2568
  <button
@@ -3118,7 +3118,7 @@ section: components
3118
3118
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
3119
3119
  >
3120
3120
  <div
3121
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
3121
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
3122
3122
  >
3123
3123
  <div class="pf-v6-c-pagination__page-menu">
3124
3124
  <button
@@ -4048,7 +4048,7 @@ section: components
4048
4048
  class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md"
4049
4049
  >
4050
4050
  <div
4051
- class="pf-v6-c-pagination pf-m-compact pf-m-compact pf-m-hidden pf-m-visible-on-md"
4051
+ class="pf-v6-c-pagination pf-m-compact pf-m-hidden pf-m-visible-on-md pf-m-compact"
4052
4052
  >
4053
4053
  <div class="pf-v6-c-pagination__page-menu">
4054
4054
  <button
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.79",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -11117,6 +11117,7 @@ button.pf-v6-c-breadcrumb__link {
11117
11117
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
11118
11118
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
11119
11119
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
11120
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: 1;
11120
11121
  --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
11121
11122
  }
11122
11123
 
@@ -11512,6 +11513,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11512
11513
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
11513
11514
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
11514
11515
  }
11516
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger {
11517
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1;
11518
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1;
11519
+ }
11520
+
11515
11521
  .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
11516
11522
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
11517
11523
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -11526,9 +11532,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11526
11532
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
11527
11533
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
11528
11534
  --pf-v6-c-button__icon--TransitionDelay: 0s;
11529
- --pf-v6-c-button__icon--ScaleX: 1;
11535
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
11530
11536
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
11531
- --pf-v6-c-button--hover__icon--ScaleX: 1;
11537
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
11532
11538
  }
11533
11539
  .pf-v6-c-button.pf-m-circle {
11534
11540
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
@@ -11624,11 +11630,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11624
11630
  display: none;
11625
11631
  }
11626
11632
  }
11627
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
11633
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
11628
11634
  justify-content: flex-start;
11629
11635
  width: 100%;
11630
11636
  }
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 {
11637
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
11632
11638
  display: revert;
11633
11639
  }
11634
11640
 
@@ -12843,6 +12849,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12843
12849
  --pf-v6-c-compass__message-bar--Width: 450px;
12844
12850
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12845
12851
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12852
+ --pf-v6-c-compass--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12846
12853
  --pf-v6-c-compass--section--slide--length--header: 100%;
12847
12854
  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
12848
12855
  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
@@ -12855,6 +12862,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12855
12862
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
12856
12863
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
12857
12864
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
12865
+ --pf-v6-c-compass__dock--Width: 15.625rem;
12866
+ --pf-v6-c-compass__dock--desktop--Width: auto;
12867
+ --pf-v6-c-compass__dock--ZIndex: var(--pf-t--global--z-index--md);
12868
+ --pf-v6-c-compass__dock--TransitionDuration--slide: 0s;
12869
+ --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: 0s;
12870
+ --pf-v6-c-compass__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
12871
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
12872
+ --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));
12873
+ --pf-v6-c-compass__dock-main--BoxShadow: none;
12874
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
12875
+ --pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
12876
+ --pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
12877
+ --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
12878
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
12879
+ --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
12880
+ --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));
12881
+ --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
12882
  }
12859
12883
  @media screen and (prefers-reduced-motion: no-preference) {
12860
12884
  .pf-v6-c-compass {
@@ -12890,18 +12914,90 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12890
12914
  background-size: cover;
12891
12915
  }
12892
12916
  .pf-v6-c-compass.pf-m-docked {
12893
- grid-template-areas: "dock main";
12894
- grid-template-rows: auto;
12895
- grid-template-columns: auto 1fr;
12917
+ grid-template-areas: "header" "main";
12918
+ grid-template-rows: max-content 1fr;
12919
+ grid-template-columns: 1fr;
12896
12920
  align-items: stretch;
12897
12921
  padding: 0;
12898
12922
  }
12899
12923
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
12900
12924
  padding: var(--pf-v6-c-compass--Padding);
12901
12925
  }
12926
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
12927
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
12928
+ grid-area: header;
12929
+ }
12902
12930
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
12903
12931
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
12904
12932
  }
12933
+ @media (min-width: 62rem) {
12934
+ .pf-v6-c-compass.pf-m-docked {
12935
+ grid-template-areas: "dock main";
12936
+ grid-template-rows: auto;
12937
+ grid-template-columns: auto 1fr;
12938
+ row-gap: var(--pf-v6-c-compass__main--RowGap);
12939
+ align-items: stretch;
12940
+ padding: 0;
12941
+ }
12942
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
12943
+ display: none;
12944
+ }
12945
+ }
12946
+ .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
12947
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12948
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12949
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12950
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12951
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12952
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12953
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12954
+ }
12955
+ .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) {
12956
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12957
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12958
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12959
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12960
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
12961
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12962
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
12963
+ }
12964
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
12965
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12966
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12967
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12968
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12969
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
12970
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12971
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
12972
+ }
12973
+ @media (min-width: 62rem) {
12974
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
12975
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
12976
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
12977
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
12978
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
12979
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12980
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
12981
+ }
12982
+ .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) {
12983
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12984
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12985
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12986
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12987
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12988
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12989
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
12990
+ }
12991
+ .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) {
12992
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
12993
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
12994
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
12995
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
12996
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
12997
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
12998
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
12999
+ }
13000
+ }
12905
13001
 
12906
13002
  .pf-v6-c-compass__header,
12907
13003
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -13019,6 +13115,60 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13019
13115
  margin-inline-start: var(--pf-v6-c-compass--Gap);
13020
13116
  }
13021
13117
 
13118
+ .pf-v6-c-compass__dock {
13119
+ position: fixed;
13120
+ inset-block-start: 0;
13121
+ inset-block-end: 0;
13122
+ inset-inline-start: 0;
13123
+ z-index: var(--pf-v6-c-compass__dock--ZIndex);
13124
+ display: flex;
13125
+ flex-direction: column;
13126
+ grid-area: dock;
13127
+ width: var(--pf-v6-c-compass__dock--Width);
13128
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
13129
+ translate: -100% 0;
13130
+ }
13131
+ .pf-v6-c-compass__dock.pf-m-expanded {
13132
+ --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
13133
+ translate: 0;
13134
+ }
13135
+ @media (min-width: 62rem) {
13136
+ .pf-v6-c-compass__dock {
13137
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
13138
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13139
+ position: revert;
13140
+ inset: revert;
13141
+ width: auto;
13142
+ translate: 0;
13143
+ }
13144
+ }
13145
+ .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) {
13146
+ align-items: stretch;
13147
+ }
13148
+ .pf-v6-c-compass__dock.pf-m-text-expanded {
13149
+ width: var(--pf-v6-c-compass__dock--Width);
13150
+ }
13151
+
13152
+ .pf-v6-c-compass__dock-main {
13153
+ flex-grow: 1;
13154
+ background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
13155
+ backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
13156
+ border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
13157
+ box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
13158
+ }
13159
+ .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
13160
+ 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);
13161
+ box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
13162
+ }
13163
+ @media (min-width: 62rem) {
13164
+ .pf-v6-c-compass__dock-main {
13165
+ --pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13166
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13167
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);
13168
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13169
+ }
13170
+ }
13171
+
13022
13172
  .pf-v6-c-compass__main {
13023
13173
  display: flex;
13024
13174
  flex-direction: column;
@@ -19789,13 +19939,13 @@ ul.pf-v6-c-list {
19789
19939
  display: revert;
19790
19940
  }
19791
19941
  }
19792
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
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__logo {
19793
19943
  display: revert;
19794
19944
  }
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 {
19945
+ :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
19946
  display: none;
19797
19947
  }
19798
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
19948
+ :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
19949
  align-items: flex-start;
19800
19950
  }
19801
19951
 
@@ -21266,12 +21416,12 @@ ul.pf-v6-c-list {
21266
21416
  display: none;
21267
21417
  }
21268
21418
  }
21269
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21419
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21270
21420
  justify-content: flex-start;
21271
21421
  width: 100%;
21272
21422
  }
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,
21423
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
21424
+ :is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
21275
21425
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
21276
21426
  display: revert;
21277
21427
  }
@@ -22038,10 +22188,10 @@ ul.pf-v6-c-list {
22038
22188
  display: none;
22039
22189
  }
22040
22190
  }
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 {
22191
+ :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
22192
  width: 100%;
22043
22193
  }
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 {
22194
+ :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
22195
  display: revert;
22046
22196
  }
22047
22197
 
@@ -22947,9 +23097,9 @@ ul.pf-v6-c-list {
22947
23097
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
22948
23098
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
22949
23099
  --pf-v6-c-button__icon--TransitionDelay: 0s;
22950
- --pf-v6-c-button__icon--ScaleX: 1;
23100
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
22951
23101
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
22952
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23102
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
22953
23103
  }
22954
23104
  @media (min-width: 75rem) {
22955
23105
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger, .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.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) {
@@ -22964,9 +23114,9 @@ ul.pf-v6-c-list {
22964
23114
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
22965
23115
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
22966
23116
  --pf-v6-c-button__icon--TransitionDelay: 0s;
22967
- --pf-v6-c-button__icon--ScaleX: 1;
23117
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
22968
23118
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
22969
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23119
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
22970
23120
  }
22971
23121
  .pf-v6-c-page:where(:has(> .pf-v6-c-page__sidebar.pf-m-collapsed)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
22972
23122
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -22983,9 +23133,9 @@ ul.pf-v6-c-list {
22983
23133
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
22984
23134
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
22985
23135
  --pf-v6-c-button__icon--TransitionDelay: 0s;
22986
- --pf-v6-c-button__icon--ScaleX: 1;
23136
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
22987
23137
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
22988
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23138
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
22989
23139
  }
22990
23140
  @media (min-width: 62rem) {
22991
23141
  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -23010,9 +23160,9 @@ ul.pf-v6-c-list {
23010
23160
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23011
23161
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23012
23162
  --pf-v6-c-button__icon--TransitionDelay: 0s;
23013
- --pf-v6-c-button__icon--ScaleX: 1;
23163
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23014
23164
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23015
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23165
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23016
23166
  }
23017
23167
  }
23018
23168
 
@@ -23042,6 +23192,10 @@ ul.pf-v6-c-list {
23042
23192
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
23043
23193
  translate: -100% 0;
23044
23194
  }
23195
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
23196
+ translate: 100% 0;
23197
+ }
23198
+
23045
23199
  .pf-v6-c-page__dock.pf-m-expanded {
23046
23200
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
23047
23201
  translate: 0;
@@ -23696,7 +23850,7 @@ ul.pf-v6-c-list {
23696
23850
  --pf-v6-c-pagination__total-items--Display: block;
23697
23851
  --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
23698
23852
  --pf-v6-c-pagination--m-display-full__total-items--Display: none;
23699
- --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
23853
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
23700
23854
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
23701
23855
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
23702
23856
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -23705,6 +23859,12 @@ ul.pf-v6-c-list {
23705
23859
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
23706
23860
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
23707
23861
  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
23862
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
23863
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
23864
+ --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23865
+ --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
23866
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
23867
+ --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
23708
23868
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
23709
23869
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
23710
23870
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -23719,6 +23879,15 @@ ul.pf-v6-c-list {
23719
23879
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
23720
23880
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
23721
23881
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
23882
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
23883
+ }
23884
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
23885
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
23886
+ --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
23887
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
23888
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
23889
+ }
23890
+ .pf-v6-c-pagination {
23722
23891
  --pf-v6-c-pagination__page-menu--Display--base: block;
23723
23892
  --pf-v6-c-pagination__page-menu--Display: none;
23724
23893
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -23753,6 +23922,9 @@ ul.pf-v6-c-list {
23753
23922
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
23754
23923
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
23755
23924
  }
23925
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-pagination.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination:not(.pf-m-no-plain-on-glass) {
23926
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
23927
+ }
23756
23928
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
23757
23929
  display: var(--pf-v6-c-pagination__page-menu--Display);
23758
23930
  }
@@ -23770,6 +23942,9 @@ ul.pf-v6-c-list {
23770
23942
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
23771
23943
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
23772
23944
  }
23945
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
23946
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
23947
+ }
23773
23948
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
23774
23949
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
23775
23950
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -23824,15 +23999,46 @@ ul.pf-v6-c-list {
23824
23999
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
23825
24000
  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
23826
24001
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
23827
- position: sticky;
23828
24002
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
24003
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
24004
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24005
+ }
24006
+ .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
24007
+ position: sticky;
23829
24008
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
23830
24009
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
23831
24010
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
23832
24011
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
23833
24012
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
23834
- background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
23835
- box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24013
+ }
24014
+ .pf-v6-c-pagination.pf-m-sticky-base {
24015
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
24016
+ border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
24017
+ }
24018
+ .pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
24019
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
24020
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
24021
+ }
24022
+ .pf-v6-c-pagination.pf-m-sticky-base::before {
24023
+ position: absolute;
24024
+ inset: 0;
24025
+ z-index: -1;
24026
+ content: "";
24027
+ background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
24028
+ border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
24029
+ box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
24030
+ opacity: 0;
24031
+ transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
24032
+ transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
24033
+ transition-property: opacity;
24034
+ }
24035
+ .pf-v6-c-pagination.pf-m-sticky-stuck {
24036
+ --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
24037
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
24038
+ --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
24039
+ }
24040
+ .pf-v6-c-pagination.pf-m-sticky-stuck::before {
24041
+ opacity: 1;
23836
24042
  }
23837
24043
  .pf-v6-c-pagination.pf-m-page-insets {
23838
24044
  --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);