@patternfly/react-styles 6.5.0-prerelease.9 → 6.5.1-prerelease.0

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 (150) hide show
  1. package/CHANGELOG.md +124 -0
  2. package/README.md +1 -1
  3. package/css/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/css/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/css/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/css/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/css/assets/images/compass--hero-bg.png +0 -0
  8. package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
  9. package/css/assets/images/compass--wallpaper-light.jpg +0 -0
  10. package/css/assets/images/glass-brand-dark.jpg +0 -0
  11. package/css/assets/images/glass-brand-dark.png +0 -0
  12. package/css/assets/images/glass-brand-light.jpg +0 -0
  13. package/css/assets/images/glass-brand-light.png +0 -0
  14. package/css/components/AboutModalBox/about-modal-box.css +36 -26
  15. package/css/components/Accordion/accordion.css +26 -14
  16. package/css/components/Accordion/accordion.d.ts +4 -1
  17. package/css/components/Accordion/accordion.js +4 -1
  18. package/css/components/Accordion/accordion.mjs +4 -1
  19. package/css/components/Alert/alert.css +7 -5
  20. package/css/components/Avatar/avatar.css +12 -4
  21. package/css/components/BackgroundImage/background-image.css +6 -3
  22. package/css/components/Banner/banner.css +12 -6
  23. package/css/components/Banner/banner.d.ts +1 -0
  24. package/css/components/Banner/banner.js +1 -0
  25. package/css/components/Banner/banner.mjs +1 -0
  26. package/css/components/Brand/brand.css +3 -1
  27. package/css/components/Breadcrumb/breadcrumb.css +10 -5
  28. package/css/components/Button/button.css +158 -68
  29. package/css/components/Button/button.d.ts +7 -2
  30. package/css/components/Button/button.js +7 -2
  31. package/css/components/Button/button.mjs +7 -2
  32. package/css/components/CalendarMonth/calendar-month.css +4 -3
  33. package/css/components/Card/card.css +45 -15
  34. package/css/components/Card/card.d.ts +3 -1
  35. package/css/components/Card/card.js +3 -1
  36. package/css/components/Card/card.mjs +3 -1
  37. package/css/components/ClipboardCopy/clipboard-copy.css +14 -7
  38. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  39. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  40. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  41. package/css/components/CodeEditor/code-editor.css +2 -2
  42. package/css/components/Compass/compass.css +211 -100
  43. package/css/components/Compass/compass.d.ts +17 -10
  44. package/css/components/Compass/compass.js +17 -10
  45. package/css/components/Compass/compass.mjs +17 -10
  46. package/css/components/DataList/data-list.css +30 -23
  47. package/css/components/DataList/data-list.d.ts +3 -1
  48. package/css/components/DataList/data-list.js +3 -1
  49. package/css/components/DataList/data-list.mjs +3 -1
  50. package/css/components/DescriptionList/description-list.css +7 -5
  51. package/css/components/Divider/divider.css +7 -5
  52. package/css/components/Drawer/drawer.css +167 -57
  53. package/css/components/Drawer/drawer.d.ts +5 -2
  54. package/css/components/Drawer/drawer.js +5 -2
  55. package/css/components/Drawer/drawer.mjs +5 -2
  56. package/css/components/DualListSelector/dual-list-selector.css +18 -12
  57. package/css/components/ExpandableSection/expandable-section.css +18 -16
  58. package/css/components/Form/form.css +2 -2
  59. package/css/components/FormControl/form-control.css +3 -3
  60. package/css/components/Hero/hero.css +19 -19
  61. package/css/components/Hero/hero.d.ts +1 -1
  62. package/css/components/Hero/hero.js +1 -1
  63. package/css/components/Hero/hero.mjs +1 -1
  64. package/css/components/JumpLinks/jump-links.css +16 -5
  65. package/css/components/Label/label-group.css +2 -2
  66. package/css/components/Label/label.css +4 -3
  67. package/css/components/Login/login.css +58 -40
  68. package/css/components/Masthead/masthead.css +69 -26
  69. package/css/components/Masthead/masthead.d.ts +5 -0
  70. package/css/components/Masthead/masthead.js +5 -0
  71. package/css/components/Masthead/masthead.mjs +5 -0
  72. package/css/components/Menu/menu.css +49 -33
  73. package/css/components/MenuToggle/menu-toggle.css +35 -8
  74. package/css/components/MenuToggle/menu-toggle.d.ts +5 -0
  75. package/css/components/MenuToggle/menu-toggle.js +5 -0
  76. package/css/components/MenuToggle/menu-toggle.mjs +5 -0
  77. package/css/components/ModalBox/modal-box.css +9 -7
  78. package/css/components/Nav/nav.css +32 -20
  79. package/css/components/Nav/nav.d.ts +4 -1
  80. package/css/components/Nav/nav.js +4 -1
  81. package/css/components/Nav/nav.mjs +4 -1
  82. package/css/components/NotificationDrawer/notification-drawer.css +19 -9
  83. package/css/components/OverflowMenu/overflow-menu.css +16 -0
  84. package/css/components/OverflowMenu/overflow-menu.d.ts +1 -0
  85. package/css/components/OverflowMenu/overflow-menu.js +1 -0
  86. package/css/components/OverflowMenu/overflow-menu.mjs +1 -0
  87. package/css/components/Page/page.css +409 -38
  88. package/css/components/Page/page.d.ts +17 -2
  89. package/css/components/Page/page.js +17 -2
  90. package/css/components/Page/page.mjs +17 -2
  91. package/css/components/Pagination/pagination.css +58 -4
  92. package/css/components/Pagination/pagination.d.ts +6 -1
  93. package/css/components/Pagination/pagination.js +6 -1
  94. package/css/components/Pagination/pagination.mjs +6 -1
  95. package/css/components/Panel/panel.css +41 -3
  96. package/css/components/Panel/panel.d.ts +8 -2
  97. package/css/components/Panel/panel.js +8 -2
  98. package/css/components/Panel/panel.mjs +8 -2
  99. package/css/components/Progress/progress.css +3 -1
  100. package/css/components/Sidebar/sidebar.css +1 -1
  101. package/css/components/Skeleton/skeleton.css +16 -15
  102. package/css/components/Slider/slider.css +32 -18
  103. package/css/components/Switch/switch.css +4 -2
  104. package/css/components/Table/table-grid.css +28 -36
  105. package/css/components/Table/table-scrollable.css +1 -1
  106. package/css/components/Table/table-tree-view.css +4 -2
  107. package/css/components/Table/table.css +104 -57
  108. package/css/components/Table/table.d.ts +6 -2
  109. package/css/components/Table/table.js +6 -2
  110. package/css/components/Table/table.mjs +6 -2
  111. package/css/components/Tabs/tabs.css +35 -32
  112. package/css/components/Tabs/tabs.d.ts +0 -1
  113. package/css/components/Tabs/tabs.js +0 -1
  114. package/css/components/Tabs/tabs.mjs +0 -1
  115. package/css/components/TextInputGroup/text-input-group.css +2 -2
  116. package/css/components/ToggleGroup/toggle-group.css +44 -19
  117. package/css/components/ToggleGroup/toggle-group.d.ts +1 -0
  118. package/css/components/ToggleGroup/toggle-group.js +1 -0
  119. package/css/components/ToggleGroup/toggle-group.mjs +1 -0
  120. package/css/components/Toolbar/toolbar.css +167 -11
  121. package/css/components/Toolbar/toolbar.d.ts +13 -0
  122. package/css/components/Toolbar/toolbar.js +13 -0
  123. package/css/components/Toolbar/toolbar.mjs +13 -0
  124. package/css/components/TreeView/tree-view.css +45 -14
  125. package/css/components/TreeView/tree-view.d.ts +1 -0
  126. package/css/components/TreeView/tree-view.js +1 -0
  127. package/css/components/TreeView/tree-view.mjs +1 -0
  128. package/css/components/Wizard/wizard.css +41 -19
  129. package/css/components/Wizard/wizard.d.ts +3 -0
  130. package/css/components/Wizard/wizard.js +3 -0
  131. package/css/components/Wizard/wizard.mjs +3 -0
  132. package/css/components/_index.css +2191 -858
  133. package/css/components/_index.d.ts +34 -10
  134. package/css/components/_index.js +34 -10
  135. package/css/components/_index.mjs +34 -10
  136. package/css/docs/components/Compass/examples/Compass.css +4 -13
  137. package/css/docs/components/Compass/examples/Compass.d.ts +1 -1
  138. package/css/docs/components/Compass/examples/Compass.js +1 -1
  139. package/css/docs/components/Compass/examples/Compass.mjs +1 -1
  140. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  141. package/css/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  142. package/css/docs/components/Panel/examples/Panel.css +3 -0
  143. package/css/docs/components/Panel/examples/Panel.d.ts +5 -0
  144. package/css/docs/components/Panel/examples/Panel.js +6 -0
  145. package/css/docs/components/Panel/examples/Panel.mjs +4 -0
  146. package/css/docs/components/Table/examples/Table.css +2 -1
  147. package/css/docs/components/Toolbar/examples/Toolbar.css +1 -1
  148. package/css/layouts/Gallery/gallery.css +6 -2
  149. package/css/layouts/_index.css +6 -2
  150. package/package.json +4 -4
@@ -1,13 +1,37 @@
1
1
  .pf-v6-c-page {
2
2
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3
3
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
4
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
5
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
6
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
7
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
8
+ --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
4
9
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
10
+ --pf-v6-c-page__dock--Width: 15.625rem;
11
+ --pf-v6-c-page__dock--desktop--Width: auto;
5
12
  --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
13
+ --pf-v6-c-page__dock--TransitionDuration--slide: 0s;
14
+ --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s;
15
+ --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
16
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
17
+ --pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
18
+ --pf-v6-c-page__dock-main--BoxShadow: none;
19
+ --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
20
+ --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
21
+ --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
22
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
23
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
24
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
25
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
26
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
6
27
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
7
28
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
8
29
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
9
30
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
10
- --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
31
+ --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
32
+ --pf-v6-c-page__sidebar--BackdropFilter: none;
33
+ --pf-v6-c-page__sidebar--xl--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
34
+ --pf-v6-c-page__sidebar--xl--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--secondary--default));
11
35
  --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
12
36
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
13
37
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
@@ -19,12 +43,38 @@
19
43
  --pf-v6-c-page__sidebar--TranslateZ: 0;
20
44
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
21
45
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
46
+ --pf-v6-c-page__sidebar--MarginBlockStart: 0;
22
47
  --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
23
48
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
24
49
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
25
50
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
26
51
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
27
52
  --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
53
+ }
54
+ @media screen and (prefers-reduced-motion: no-preference) {
55
+ .pf-v6-c-page {
56
+ --pf-v6-c-page__sidebar--Opacity: 1;
57
+ --pf-v6-c-page__sidebar--TransitionProperty: transform;
58
+ --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
59
+ --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-out--short);
60
+ --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
61
+ }
62
+ }
63
+ .pf-v6-c-page {
64
+ --pf-v6-c-page__sidebar-main--PaddingBlockStart: 0;
65
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0;
66
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: 0;
67
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0;
68
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: 0;
69
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: 0;
70
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: 0;
71
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: 0;
72
+ --pf-v6-c-page__sidebar-main--BackgroundColor: transparent;
73
+ --pf-v6-c-page__sidebar-main--BackdropFilter: none;
74
+ --pf-v6-c-page__sidebar-main--BorderWidth: 0;
75
+ --pf-v6-c-page__sidebar-main--BorderColor: transparent;
76
+ --pf-v6-c-page__sidebar-main--BorderRadius: 0;
77
+ --pf-v6-c-page__sidebar-main--BoxShadow: none;
28
78
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
29
79
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
30
80
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -40,12 +90,24 @@
40
90
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
41
91
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
42
92
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
93
+ }
94
+ @media screen and (min-width: 75rem) {
95
+ .pf-v6-c-page {
96
+ --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
97
+ --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
98
+ --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
99
+ --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-v6-c-page__sidebar--xl--BackgroundColor);
100
+ --pf-v6-c-page__sidebar--BackdropFilter: var(--pf-v6-c-page__sidebar--xl--BackdropFilter);
101
+ }
102
+ }
103
+ .pf-v6-c-page {
43
104
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
44
105
  --pf-v6-c-page__main-container--GridArea: main;
45
106
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
46
107
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
47
108
  --pf-v6-c-page__main-container--AlignSelf: start;
48
- --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
109
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
110
+ --pf-v6-c-page__main-container--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
49
111
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
50
112
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
51
113
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -54,6 +116,7 @@
54
116
  --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
55
117
  --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
56
118
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
119
+ --pf-v6-c-page__main-container--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
57
120
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
58
121
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
59
122
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
@@ -62,6 +125,17 @@
62
125
  --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
63
126
  --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
64
127
  --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
128
+ }
129
+ @media screen and (max-width: calc(48rem - 1px)) {
130
+ .pf-v6-c-page {
131
+ --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
132
+ --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
133
+ --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
134
+ --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
135
+ --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
136
+ }
137
+ }
138
+ .pf-v6-c-page {
65
139
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
66
140
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
67
141
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -71,15 +145,25 @@
71
145
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
72
146
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
73
147
  --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
148
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
149
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
150
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
151
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
74
152
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
75
153
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
76
154
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
77
155
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
78
156
  --pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
157
+ --pf-v6-c-page--section--m-sticky-top--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
79
158
  --pf-v6-c-page--section--m-sticky-bottom--ZIndex: var(--pf-t--global--z-index--md);
80
159
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
81
160
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
82
161
  --pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
162
+ --pf-v6-c-page--section--m-sticky-bottom--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
163
+ --pf-v6-c-page--section--m-sticky-top--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
164
+ --pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
165
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
166
+ --pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
83
167
  --pf-v6-c-page--section--m-shadow-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
84
168
  --pf-v6-c-page--section--m-shadow-bottom--ZIndex: var(--pf-t--global--z-index--xs);
85
169
  --pf-v6-c-page--section--m-shadow-bottom--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -113,28 +197,59 @@
113
197
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
114
198
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
115
199
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
200
+ --pf-v6-c-page--BackgroundColor--glass: transparent;
201
+ --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
202
+ --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
203
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
204
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
205
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
206
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
207
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
208
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
209
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
210
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
211
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
212
+ --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
213
+ --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
214
+ --pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
215
+ --pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
216
+ --pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
217
+ --pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
218
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
219
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
220
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
221
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
222
+ --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
223
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
224
+ }
225
+ :where(.pf-v6-theme-glass) .pf-v6-c-page {
226
+ --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
227
+ --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
228
+ --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
229
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
230
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
231
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
232
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass);
233
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass);
234
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass);
235
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass);
236
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass);
237
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass);
238
+ --pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass);
239
+ --pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass);
240
+ --pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass);
241
+ --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
242
+ --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
243
+ --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
244
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
245
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
116
246
  }
117
- @media screen and (prefers-reduced-motion: no-preference) {
118
- .pf-v6-c-page {
119
- --pf-v6-c-page__sidebar--Opacity: 1;
120
- --pf-v6-c-page__sidebar--TransitionProperty: transform;
121
- --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
122
- }
123
- }
124
- @media screen and (min-width: 75rem) {
125
- .pf-v6-c-page {
126
- --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
127
- --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
128
- --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
129
- }
130
- }
131
- @media screen and (max-width: calc(48rem - 1px)) {
247
+ @media (min-width: 75rem) {
132
248
  .pf-v6-c-page {
133
- --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
134
- --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
135
- --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
136
- --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
137
- --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
249
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass);
250
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass);
251
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass);
252
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass);
138
253
  }
139
254
  }
140
255
 
@@ -155,15 +270,26 @@
155
270
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
156
271
  }
157
272
  }
158
- .pf-v6-c-page.pf-m-dock {
273
+ .pf-v6-c-page.pf-m-docked {
159
274
  --pf-v6-c-page--masthead--main-container--GridArea: main;
160
275
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
161
276
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
162
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
163
- grid-template-areas: "dock main";
164
- grid-template-rows: auto;
277
+ grid-template-areas: "header header" "dock main";
278
+ grid-template-rows: max-content 1fr;
165
279
  grid-template-columns: auto 1fr;
166
- column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
280
+ }
281
+ @media (min-width: 62rem) {
282
+ .pf-v6-c-page.pf-m-docked {
283
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
284
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
285
+ grid-template-areas: "dock main";
286
+ grid-template-rows: auto;
287
+ grid-template-columns: auto 1fr;
288
+ column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
289
+ }
290
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
291
+ display: none;
292
+ }
167
293
  }
168
294
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
169
295
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -179,9 +305,9 @@
179
305
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
180
306
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
181
307
  --pf-v6-c-button__icon--TransitionDelay: 0s;
182
- --pf-v6-c-button__icon--ScaleX: 1;
308
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
183
309
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
184
- --pf-v6-c-button--hover__icon--ScaleX: 1;
310
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
185
311
  }
186
312
  @media (min-width: 75rem) {
187
313
  .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) {
@@ -196,9 +322,9 @@
196
322
  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
197
323
  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
198
324
  --pf-v6-c-button__icon--TransitionDelay: 0s;
199
- --pf-v6-c-button__icon--ScaleX: 1;
325
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
200
326
  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
201
- --pf-v6-c-button--hover__icon--ScaleX: 1;
327
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
202
328
  }
203
329
  .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) {
204
330
  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
@@ -210,20 +336,113 @@
210
336
  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
211
337
  }
212
338
  }
213
-
214
- .pf-v6-c-page > .pf-v6-c-masthead {
215
- z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
216
- grid-area: header;
339
+ .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
340
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
341
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
342
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
343
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
344
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
345
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
346
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
217
347
  }
348
+ @media (min-width: 62rem) {
349
+ .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
350
+ .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
351
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
352
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
353
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
354
+ --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
355
+ --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
356
+ }
357
+ .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
358
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
359
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
360
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
361
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
362
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
363
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
364
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
365
+ }
366
+ .pf-v6-c-page .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
367
+ --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
368
+ --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
369
+ --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
370
+ --pf-v6-c-button__icon--TransitionDelay: 0s;
371
+ --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
372
+ --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
373
+ --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
374
+ }
375
+ }
376
+
218
377
  @media (min-width: 75rem) {
219
378
  .pf-v6-c-page > .pf-v6-c-masthead {
220
379
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
221
380
  }
222
381
  }
382
+ .pf-v6-c-page > .pf-v6-c-masthead {
383
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
384
+ grid-area: header;
385
+ }
386
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
387
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
388
+ }
223
389
 
224
390
  .pf-v6-c-page__dock {
391
+ position: fixed;
392
+ inset-block-start: 0;
393
+ inset-block-end: 0;
394
+ inset-inline-start: 0;
225
395
  z-index: var(--pf-v6-c-page__dock--ZIndex);
396
+ display: flex;
397
+ flex-direction: column;
226
398
  grid-area: dock;
399
+ width: var(--pf-v6-c-page__dock--Width);
400
+ transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
401
+ translate: -100% 0;
402
+ }
403
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__dock {
404
+ translate: 100% 0;
405
+ }
406
+
407
+ .pf-v6-c-page__dock.pf-m-expanded {
408
+ --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
409
+ translate: 0;
410
+ }
411
+ @media (min-width: 62rem) {
412
+ .pf-v6-c-page__dock {
413
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
414
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
415
+ position: revert;
416
+ inset: revert;
417
+ width: auto;
418
+ translate: 0;
419
+ }
420
+ }
421
+ .pf-v6-c-page__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) {
422
+ align-items: stretch;
423
+ }
424
+ .pf-v6-c-page__dock.pf-m-text-expanded {
425
+ width: var(--pf-v6-c-page__dock--Width);
426
+ }
427
+
428
+ .pf-v6-c-page__dock-main {
429
+ flex-grow: 1;
430
+ background-color: var(--pf-v6-c-page__dock-main--BackgroundColor);
431
+ backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
432
+ border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor);
433
+ box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow);
434
+ }
435
+ .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
436
+ border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
437
+ box-shadow: var(--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow);
438
+ }
439
+ @media (min-width: 62rem) {
440
+ .pf-v6-c-page__dock-main {
441
+ --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
442
+ --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
443
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
444
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
445
+ }
227
446
  }
228
447
 
229
448
  .pf-v6-c-page__sidebar {
@@ -238,6 +457,7 @@
238
457
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
239
458
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
240
459
  padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
460
+ margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart);
241
461
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
242
462
  overflow-x: hidden;
243
463
  overflow-y: auto;
@@ -266,6 +486,37 @@
266
486
  max-width: 0;
267
487
  overflow: hidden;
268
488
  }
489
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
490
+ min-height: 0;
491
+ padding: 0;
492
+ overflow: revert;
493
+ background: transparent;
494
+ }
495
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
496
+ box-shadow: none;
497
+ }
498
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main {
499
+ overflow: auto;
500
+ }
501
+
502
+ .pf-v6-c-page__sidebar-main {
503
+ display: flex;
504
+ flex-grow: 1;
505
+ flex-direction: column;
506
+ padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart);
507
+ padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd);
508
+ padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart);
509
+ padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd);
510
+ margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart);
511
+ margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd);
512
+ margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
513
+ margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
514
+ background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
515
+ backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
516
+ border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
517
+ border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
518
+ box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
519
+ }
269
520
 
270
521
  .pf-v6-c-page__sidebar-header {
271
522
  padding-block-start: var(--pf-v6-c-page__sidebar-header--PaddingBlockStart);
@@ -336,8 +587,8 @@
336
587
  .pf-v6-c-page__main-group,
337
588
  .pf-v6-c-page__main-subnav {
338
589
  display: flex;
339
- flex-direction: column;
340
590
  flex-shrink: 0;
591
+ flex-direction: column;
341
592
  }
342
593
  .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
343
594
  .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -378,6 +629,7 @@
378
629
  position: sticky;
379
630
  inset-block-start: 0;
380
631
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
632
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
381
633
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
382
634
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
383
635
  }
@@ -390,6 +642,7 @@
390
642
  position: sticky;
391
643
  inset-block-end: 0;
392
644
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
645
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
393
646
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
394
647
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
395
648
  }
@@ -403,6 +656,7 @@
403
656
  position: sticky;
404
657
  inset-block-start: 0;
405
658
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
659
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
406
660
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
407
661
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
408
662
  }
@@ -415,6 +669,7 @@
415
669
  position: sticky;
416
670
  inset-block-end: 0;
417
671
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
672
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
418
673
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
419
674
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
420
675
  }
@@ -429,6 +684,7 @@
429
684
  position: sticky;
430
685
  inset-block-start: 0;
431
686
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
687
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
432
688
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
433
689
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
434
690
  }
@@ -441,6 +697,7 @@
441
697
  position: sticky;
442
698
  inset-block-end: 0;
443
699
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
700
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
444
701
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
445
702
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
446
703
  }
@@ -455,6 +712,7 @@
455
712
  position: sticky;
456
713
  inset-block-start: 0;
457
714
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
715
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
458
716
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
459
717
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
460
718
  }
@@ -467,6 +725,7 @@
467
725
  position: sticky;
468
726
  inset-block-end: 0;
469
727
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
728
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
470
729
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
471
730
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
472
731
  }
@@ -481,6 +740,7 @@
481
740
  position: sticky;
482
741
  inset-block-start: 0;
483
742
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
743
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
484
744
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
485
745
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
486
746
  }
@@ -493,6 +753,7 @@
493
753
  position: sticky;
494
754
  inset-block-end: 0;
495
755
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
756
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
496
757
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
497
758
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
498
759
  }
@@ -507,6 +768,7 @@
507
768
  position: sticky;
508
769
  inset-block-start: 0;
509
770
  z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
771
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
510
772
  border-block-end: var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndWidth) solid var(--pf-v6-c-page--section--m-sticky-top--BorderBlockEndColor);
511
773
  box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
512
774
  }
@@ -519,10 +781,96 @@
519
781
  position: sticky;
520
782
  inset-block-end: 0;
521
783
  z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
784
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
522
785
  border-block-start: var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartWidth) solid var(--pf-v6-c-page--section--m-sticky-bottom--BorderBlockStartColor);
523
786
  box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
524
787
  }
525
788
  }
789
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base,
790
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
791
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
792
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
793
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
794
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
795
+ position: sticky;
796
+ inset-block-start: 0;
797
+ z-index: var(--pf-v6-c-page--section--m-sticky-top--ZIndex);
798
+ box-shadow: none;
799
+ }
800
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base::before,
801
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base::before,
802
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base::before,
803
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base::before,
804
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base::before,
805
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base::before {
806
+ position: absolute;
807
+ inset: 0;
808
+ z-index: -1;
809
+ content: "";
810
+ background-color: var(--pf-v6-c-page--section--m-sticky-top--BackgroundColor);
811
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-top--BoxShadow);
812
+ opacity: 0;
813
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-top--TransitionTimingFunction);
814
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-top--TransitionDuration);
815
+ transition-property: opacity;
816
+ }
817
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-base, .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-breadcrumb:last-child,
818
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-base,
819
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-tabs:last-child,
820
+ .pf-v6-c-page__main-section.pf-m-sticky-top-base,
821
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-section:last-child,
822
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-base,
823
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-wizard:last-child,
824
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base,
825
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-group:last-child,
826
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-base,
827
+ .pf-v6-c-page__main-group.pf-m-sticky-top-base .pf-v6-c-page__main-subnav:last-child {
828
+ --pf-v6-c-page__main-breadcrumb--PaddingBlockEnd: var(--pf-v6-c-page__main-breadcrumb--m-sticky-top--PaddingBlockEnd);
829
+ }
830
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-top-stuck::before,
831
+ .pf-v6-c-page__main-tabs.pf-m-sticky-top-stuck::before,
832
+ .pf-v6-c-page__main-section.pf-m-sticky-top-stuck::before,
833
+ .pf-v6-c-page__main-wizard.pf-m-sticky-top-stuck::before,
834
+ .pf-v6-c-page__main-group.pf-m-sticky-top-stuck::before,
835
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top-stuck::before {
836
+ opacity: 1;
837
+ }
838
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base,
839
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base,
840
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base,
841
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base,
842
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base,
843
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base {
844
+ position: sticky;
845
+ inset-block-end: 0;
846
+ z-index: var(--pf-v6-c-page--section--m-sticky-bottom--ZIndex);
847
+ box-shadow: none;
848
+ }
849
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-base::before,
850
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-base::before,
851
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-base::before,
852
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-base::before,
853
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-base::before,
854
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-base::before {
855
+ position: absolute;
856
+ inset: 0;
857
+ z-index: -1;
858
+ content: "";
859
+ background-color: var(--pf-v6-c-page--section--m-sticky-bottom--BackgroundColor);
860
+ box-shadow: var(--pf-v6-c-page--section--m-sticky-bottom--BoxShadow);
861
+ opacity: 0;
862
+ transition-timing-function: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionTimingFunction);
863
+ transition-duration: var(--pf-v6-c-page--section--m-sticky-bottom--TransitionDuration);
864
+ transition-property: opacity;
865
+ }
866
+ .pf-v6-c-page__main-breadcrumb.pf-m-sticky-bottom-stuck::before,
867
+ .pf-v6-c-page__main-tabs.pf-m-sticky-bottom-stuck::before,
868
+ .pf-v6-c-page__main-section.pf-m-sticky-bottom-stuck::before,
869
+ .pf-v6-c-page__main-wizard.pf-m-sticky-bottom-stuck::before,
870
+ .pf-v6-c-page__main-group.pf-m-sticky-bottom-stuck::before,
871
+ .pf-v6-c-page__main-subnav.pf-m-sticky-bottom-stuck::before {
872
+ opacity: 1;
873
+ }
526
874
 
527
875
  .pf-v6-c-page__main-container {
528
876
  display: flex;
@@ -533,12 +881,14 @@
533
881
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
534
882
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
535
883
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
884
+ backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
536
885
  border: solid var(--pf-v6-c-page__main-container--BorderColor);
537
886
  border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
538
887
  border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
539
888
  border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
540
889
  border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
541
890
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
891
+ box-shadow: var(--pf-v6-c-page__main-container--BoxShadow);
542
892
  }
543
893
  @media screen and (max-width: calc(48rem - 1px)) {
544
894
  .pf-v6-c-page__main-container {
@@ -577,12 +927,31 @@
577
927
  outline: 0;
578
928
  }
579
929
 
930
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-subnav.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass),
931
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-breadcrumb.pf-m-plain,
932
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
933
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-tabs.pf-m-plain,
934
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
935
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-section.pf-m-plain,
936
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
937
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-wizard.pf-m-plain,
938
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
939
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-group.pf-m-plain,
940
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass) {
941
+ --pf-v6-c-page__main-section--BackgroundColor: transparent;
942
+ --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
943
+ --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;
944
+ --pf-v6-c-page__main-tabs--BackgroundColor: transparent;
945
+ --pf-v6-c-page__main-wizard--BackgroundColor: transparent;
946
+ --pf-v6-c-page__main-group--BackgroundColor: transparent;
947
+ }
948
+
580
949
  .pf-v6-c-page__main,
581
950
  .pf-v6-c-page__main-drawer,
582
951
  .pf-v6-c-page__main-group {
583
952
  display: flex;
584
- flex-direction: column;
585
953
  flex-grow: 1;
954
+ flex-direction: column;
586
955
  }
587
956
 
588
957
  .pf-v6-c-page__main {
@@ -596,7 +965,7 @@
596
965
  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
597
966
  background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
598
967
  }
599
- .pf-v6-c-page__main-subnav.pf-m-sticky-top {
968
+ .pf-v6-c-page__main-subnav.pf-m-sticky-top, .pf-v6-c-page__main-subnav.pf-m-sticky-top-base {
600
969
  padding-block-end: var(--pf-v6-c-page__main-subnav--m-sticky-top--PaddingBlockEnd);
601
970
  }
602
971
 
@@ -671,6 +1040,8 @@
671
1040
  }
672
1041
  .pf-v6-c-page__main-section.pf-m-secondary {
673
1042
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
1043
+ border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor);
1044
+ border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor);
674
1045
  }
675
1046
  .pf-v6-c-page__main-section.pf-m-padding {
676
1047
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);