@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
package/patternfly.css CHANGED
@@ -11264,6 +11264,7 @@ button.pf-v6-c-breadcrumb__link {
11264
11264
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
11265
11265
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
11266
11266
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
11267
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: 1;
11267
11268
  --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
11268
11269
  }
11269
11270
 
@@ -11659,6 +11660,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11659
11660
  --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
11660
11661
  --pf-v6-c-button--hover__icon--TransitionProperty: scale;
11661
11662
  }
11663
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-button.pf-m-hamburger {
11664
+ --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: 1;
11665
+ --pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX: -1;
11666
+ }
11667
+
11662
11668
  .pf-v6-c-button.pf-m-hamburger.pf-m-expand {
11663
11669
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
11664
11670
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -11673,9 +11679,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11673
11679
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
11674
11680
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
11675
11681
  --pf-v6-c-button__icon--TransitionDelay: 0s;
11676
- --pf-v6-c-button__icon--ScaleX: 1;
11682
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
11677
11683
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
11678
- --pf-v6-c-button--hover__icon--ScaleX: 1;
11684
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
11679
11685
  }
11680
11686
  .pf-v6-c-button.pf-m-circle {
11681
11687
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
@@ -11771,11 +11777,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
11771
11777
  display: none;
11772
11778
  }
11773
11779
  }
11774
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
11780
+ :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 {
11775
11781
  justify-content: flex-start;
11776
11782
  width: 100%;
11777
11783
  }
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 {
11784
+ :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 {
11779
11785
  display: revert;
11780
11786
  }
11781
11787
 
@@ -12990,6 +12996,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12990
12996
  --pf-v6-c-compass__message-bar--Width: 450px;
12991
12997
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12992
12998
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12999
+ --pf-v6-c-compass--m-docked__masthead--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12993
13000
  --pf-v6-c-compass--section--slide--length--header: 100%;
12994
13001
  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
12995
13002
  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
@@ -13002,6 +13009,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13002
13009
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
13003
13010
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
13004
13011
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
13012
+ --pf-v6-c-compass__dock--Width: 15.625rem;
13013
+ --pf-v6-c-compass__dock--desktop--Width: auto;
13014
+ --pf-v6-c-compass__dock--ZIndex: var(--pf-t--global--z-index--md);
13015
+ --pf-v6-c-compass__dock--TransitionDuration--slide: 0s;
13016
+ --pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide: 0s;
13017
+ --pf-v6-c-compass__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
13018
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13019
+ --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));
13020
+ --pf-v6-c-compass__dock-main--BoxShadow: none;
13021
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13022
+ --pf-v6-c-compass__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13023
+ --pf-v6-c-compass__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13024
+ --pf-v6-c-compass__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13025
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: transparent;
13026
+ --pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13027
+ --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));
13028
+ --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
13029
  }
13006
13030
  @media screen and (prefers-reduced-motion: no-preference) {
13007
13031
  .pf-v6-c-compass {
@@ -13037,18 +13061,90 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13037
13061
  background-size: cover;
13038
13062
  }
13039
13063
  .pf-v6-c-compass.pf-m-docked {
13040
- grid-template-areas: "dock main";
13041
- grid-template-rows: auto;
13042
- grid-template-columns: auto 1fr;
13064
+ grid-template-areas: "header" "main";
13065
+ grid-template-rows: max-content 1fr;
13066
+ grid-template-columns: 1fr;
13043
13067
  align-items: stretch;
13044
13068
  padding: 0;
13045
13069
  }
13046
13070
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
13047
13071
  padding: var(--pf-v6-c-compass--Padding);
13048
13072
  }
13073
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
13074
+ --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
13075
+ grid-area: header;
13076
+ }
13049
13077
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
13050
13078
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
13051
13079
  }
13080
+ @media (min-width: 62rem) {
13081
+ .pf-v6-c-compass.pf-m-docked {
13082
+ grid-template-areas: "dock main";
13083
+ grid-template-rows: auto;
13084
+ grid-template-columns: auto 1fr;
13085
+ row-gap: var(--pf-v6-c-compass__main--RowGap);
13086
+ align-items: stretch;
13087
+ padding: 0;
13088
+ }
13089
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
13090
+ display: none;
13091
+ }
13092
+ }
13093
+ .pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
13094
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13095
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13096
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13097
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13098
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13099
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13100
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13101
+ }
13102
+ .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) {
13103
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13104
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13105
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13106
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13107
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13108
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13109
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13110
+ }
13111
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
13112
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13113
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13114
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13115
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13116
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13117
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13118
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13119
+ }
13120
+ @media (min-width: 62rem) {
13121
+ .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
13122
+ .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
13123
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
13124
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
13125
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
13126
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
13127
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
13128
+ }
13129
+ .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) {
13130
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13131
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13132
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13133
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13134
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13135
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13136
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
13137
+ }
13138
+ .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) {
13139
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
13140
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
13141
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
13142
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
13143
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13144
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
13145
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
13146
+ }
13147
+ }
13052
13148
 
13053
13149
  .pf-v6-c-compass__header,
13054
13150
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -13166,6 +13262,60 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
13166
13262
  margin-inline-start: var(--pf-v6-c-compass--Gap);
13167
13263
  }
13168
13264
 
13265
+ .pf-v6-c-compass__dock {
13266
+ position: fixed;
13267
+ inset-block-start: 0;
13268
+ inset-block-end: 0;
13269
+ inset-inline-start: 0;
13270
+ z-index: var(--pf-v6-c-compass__dock--ZIndex);
13271
+ display: flex;
13272
+ flex-direction: column;
13273
+ grid-area: dock;
13274
+ width: var(--pf-v6-c-compass__dock--Width);
13275
+ transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide);
13276
+ translate: -100% 0;
13277
+ }
13278
+ .pf-v6-c-compass__dock.pf-m-expanded {
13279
+ --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
13280
+ translate: 0;
13281
+ }
13282
+ @media (min-width: 62rem) {
13283
+ .pf-v6-c-compass__dock {
13284
+ --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
13285
+ --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13286
+ position: revert;
13287
+ inset: revert;
13288
+ width: auto;
13289
+ translate: 0;
13290
+ }
13291
+ }
13292
+ .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) {
13293
+ align-items: stretch;
13294
+ }
13295
+ .pf-v6-c-compass__dock.pf-m-text-expanded {
13296
+ width: var(--pf-v6-c-compass__dock--Width);
13297
+ }
13298
+
13299
+ .pf-v6-c-compass__dock-main {
13300
+ flex-grow: 1;
13301
+ background-color: var(--pf-v6-c-compass__dock-main--BackgroundColor);
13302
+ backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
13303
+ border-inline-end: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock-main--BorderInlineEndColor);
13304
+ box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
13305
+ }
13306
+ .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
13307
+ 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);
13308
+ box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
13309
+ }
13310
+ @media (min-width: 62rem) {
13311
+ .pf-v6-c-compass__dock-main {
13312
+ --pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13313
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
13314
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);
13315
+ --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
13316
+ }
13317
+ }
13318
+
13169
13319
  .pf-v6-c-compass__main {
13170
13320
  display: flex;
13171
13321
  flex-direction: column;
@@ -19936,13 +20086,13 @@ ul.pf-v6-c-list {
19936
20086
  display: revert;
19937
20087
  }
19938
20088
  }
19939
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
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__logo {
19940
20090
  display: revert;
19941
20091
  }
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 {
20092
+ :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
20093
  display: none;
19944
20094
  }
19945
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
20095
+ :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
20096
  align-items: flex-start;
19947
20097
  }
19948
20098
 
@@ -21413,12 +21563,12 @@ ul.pf-v6-c-list {
21413
21563
  display: none;
21414
21564
  }
21415
21565
  }
21416
- .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
21566
+ :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 {
21417
21567
  justify-content: flex-start;
21418
21568
  width: 100%;
21419
21569
  }
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,
21570
+ :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,
21571
+ :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,
21422
21572
  .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
21423
21573
  display: revert;
21424
21574
  }
@@ -22185,10 +22335,10 @@ ul.pf-v6-c-list {
22185
22335
  display: none;
22186
22336
  }
22187
22337
  }
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 {
22338
+ :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
22339
  width: 100%;
22190
22340
  }
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 {
22341
+ :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
22342
  display: revert;
22193
22343
  }
22194
22344
 
@@ -23094,9 +23244,9 @@ ul.pf-v6-c-list {
23094
23244
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23095
23245
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23096
23246
  --pf-v6-c-button__icon--TransitionDelay: 0s;
23097
- --pf-v6-c-button__icon--ScaleX: 1;
23247
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23098
23248
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23099
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23249
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23100
23250
  }
23101
23251
  @media (min-width: 75rem) {
23102
23252
  .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) {
@@ -23111,9 +23261,9 @@ ul.pf-v6-c-list {
23111
23261
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23112
23262
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23113
23263
  --pf-v6-c-button__icon--TransitionDelay: 0s;
23114
- --pf-v6-c-button__icon--ScaleX: 1;
23264
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23115
23265
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23116
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23266
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23117
23267
  }
23118
23268
  .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) {
23119
23269
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -23130,9 +23280,9 @@ ul.pf-v6-c-list {
23130
23280
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23131
23281
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23132
23282
  --pf-v6-c-button__icon--TransitionDelay: 0s;
23133
- --pf-v6-c-button__icon--ScaleX: 1;
23283
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23134
23284
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23135
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23285
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23136
23286
  }
23137
23287
  @media (min-width: 62rem) {
23138
23288
  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
@@ -23157,9 +23307,9 @@ ul.pf-v6-c-list {
23157
23307
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
23158
23308
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
23159
23309
  --pf-v6-c-button__icon--TransitionDelay: 0s;
23160
- --pf-v6-c-button__icon--ScaleX: 1;
23310
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23161
23311
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
23162
- --pf-v6-c-button--hover__icon--ScaleX: 1;
23312
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
23163
23313
  }
23164
23314
  }
23165
23315
 
@@ -23189,6 +23339,10 @@ ul.pf-v6-c-list {
23189
23339
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
23190
23340
  translate: -100% 0;
23191
23341
  }
23342
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
23343
+ translate: 100% 0;
23344
+ }
23345
+
23192
23346
  .pf-v6-c-page__dock.pf-m-expanded {
23193
23347
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
23194
23348
  translate: 0;
@@ -23843,7 +23997,7 @@ ul.pf-v6-c-list {
23843
23997
  --pf-v6-c-pagination__total-items--Display: block;
23844
23998
  --pf-v6-c-pagination--m-display-summary__total-items--Display: block;
23845
23999
  --pf-v6-c-pagination--m-display-full__total-items--Display: none;
23846
- --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
24000
+ --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
23847
24001
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
23848
24002
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
23849
24003
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -23852,6 +24006,12 @@ ul.pf-v6-c-list {
23852
24006
  --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
23853
24007
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
23854
24008
  --pf-v6-c-pagination--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
24009
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
24010
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: 0;
24011
+ --pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
24012
+ --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
24013
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24014
+ --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
23855
24015
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
23856
24016
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
23857
24017
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -23866,6 +24026,15 @@ ul.pf-v6-c-list {
23866
24026
  --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
23867
24027
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
23868
24028
  --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
24029
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
24030
+ }
24031
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
24032
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
24033
+ --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
24034
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
24035
+ --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
24036
+ }
24037
+ .pf-v6-c-pagination {
23869
24038
  --pf-v6-c-pagination__page-menu--Display--base: block;
23870
24039
  --pf-v6-c-pagination__page-menu--Display: none;
23871
24040
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -23900,6 +24069,9 @@ ul.pf-v6-c-list {
23900
24069
  border-block-start-width: var(--pf-v6-c-pagination--BorderBlockStartWidth);
23901
24070
  border-block-end-width: var(--pf-v6-c-pagination--BorderBlockEndWidth);
23902
24071
  }
24072
+ :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) {
24073
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24074
+ }
23903
24075
  .pf-v6-c-pagination .pf-v6-c-pagination__page-menu {
23904
24076
  display: var(--pf-v6-c-pagination__page-menu--Display);
23905
24077
  }
@@ -23917,6 +24089,9 @@ ul.pf-v6-c-list {
23917
24089
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
23918
24090
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
23919
24091
  }
24092
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination.pf-m-bottom.pf-m-sticky-base:not(.pf-m-sticky-stuck) {
24093
+ --pf-v6-c-pagination--m-bottom--BackgroundColor: transparent;
24094
+ }
23920
24095
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
23921
24096
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
23922
24097
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -23971,15 +24146,46 @@ ul.pf-v6-c-list {
23971
24146
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
23972
24147
  --pf-v6-c-pagination--BorderBlockEndWidth: var(--pf-v6-c-pagination--m-sticky--BorderBlockEndWidth);
23973
24148
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
23974
- position: sticky;
23975
24149
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
24150
+ background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
24151
+ box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24152
+ }
24153
+ .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
24154
+ position: sticky;
23976
24155
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
23977
24156
  padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
23978
24157
  padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
23979
24158
  padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
23980
24159
  padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
23981
- background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
23982
- box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
24160
+ }
24161
+ .pf-v6-c-pagination.pf-m-sticky-base {
24162
+ inset-block-start: var(--pf-v6-c-pagination--m-sticky-base--InsetBlockStart);
24163
+ border-radius: var(--pf-v6-c-pagination--m-sticky-base--BorderRadius, 0);
24164
+ }
24165
+ .pf-v6-c-pagination.pf-m-sticky-base.pf-m-bottom {
24166
+ --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: 0;
24167
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: var(--pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd);
24168
+ }
24169
+ .pf-v6-c-pagination.pf-m-sticky-base::before {
24170
+ position: absolute;
24171
+ inset: 0;
24172
+ z-index: -1;
24173
+ content: "";
24174
+ background-color: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
24175
+ border-radius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
24176
+ box-shadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
24177
+ opacity: 0;
24178
+ transition-timing-function: var(--pf-v6-c-pagination--m-sticky-base--TransitionTimingFunction);
24179
+ transition-duration: var(--pf-v6-c-pagination--m-sticky-base--TransitionDuration);
24180
+ transition-property: opacity;
24181
+ }
24182
+ .pf-v6-c-pagination.pf-m-sticky-stuck {
24183
+ --pf-v6-c-pagination--m-sticky-base--BoxShadow: var(--pf-v6-c-pagination--m-sticky-stuck--BoxShadow);
24184
+ --pf-v6-c-pagination--m-sticky-base--BorderRadius: var(--pf-v6-c-pagination--m-sticky-stuck--BorderRadius);
24185
+ --pf-v6-c-pagination--m-sticky-base--BackgroundColor: var(--pf-v6-c-pagination--m-sticky-stuck--BackgroundColor);
24186
+ }
24187
+ .pf-v6-c-pagination.pf-m-sticky-stuck::before {
24188
+ opacity: 1;
23983
24189
  }
23984
24190
  .pf-v6-c-pagination.pf-m-page-insets {
23985
24191
  --pf-v6-c-pagination--inset: var(--pf-v6-c-pagination--m-page-insets--inset);