@patternfly/patternfly 6.5.0-prerelease.65 → 6.5.0-prerelease.66

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.
@@ -1,5 +1,5 @@
1
1
  .pf-v6-c-breadcrumb {
2
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
2
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
3
3
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
4
4
  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
5
5
  --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
@@ -10,12 +10,14 @@
10
10
  --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
11
11
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
12
12
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
13
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
13
14
  --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
14
15
  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
15
16
  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
17
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
16
18
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
17
19
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
18
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
20
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
19
21
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
22
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
21
23
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -68,6 +70,7 @@
68
70
  color: var(--pf-v6-c-breadcrumb__link--Color);
69
71
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
70
72
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
73
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
71
74
  word-break: break-word;
72
75
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
73
76
  }
@@ -75,6 +78,7 @@
75
78
  --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
76
79
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
77
80
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
81
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
78
82
  }
79
83
  .pf-v6-c-breadcrumb__link.pf-m-current {
80
84
  cursor: default;
@@ -2,7 +2,7 @@
2
2
 
3
3
  @include pf-root($breadcrumb) {
4
4
  // Breadcrumb item
5
- --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
5
+ --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--default);
6
6
  --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
7
7
  --#{$breadcrumb}__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
8
8
 
@@ -17,14 +17,16 @@
17
17
  --#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
18
18
  --#{$breadcrumb}__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
19
19
  --#{$breadcrumb}__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
20
+ --#{$breadcrumb}__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
20
21
  --#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
21
22
  --#{$breadcrumb}__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
22
23
  --#{$breadcrumb}__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
24
+ --#{$breadcrumb}__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
23
25
  --#{$breadcrumb}__link--m-current--Color: var(--pf-t--global--text--color--regular);
24
26
  --#{$breadcrumb}__link--BackgroundColor: transparent;
25
27
 
26
28
  // Heading
27
- --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
29
+ --#{$breadcrumb}__heading--FontSize: var(--#{$breadcrumb}__item--FontSize);
28
30
 
29
31
  // breadcrumb dropdown
30
32
  --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -83,6 +85,7 @@
83
85
  color: var(--#{$breadcrumb}__link--Color);
84
86
  text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
85
87
  text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
88
+ text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);
86
89
  word-break: break-word;
87
90
  background-color: var(--#{$breadcrumb}__link--BackgroundColor);
88
91
 
@@ -90,6 +93,7 @@
90
93
  --#{$breadcrumb}__link--Color: var(--#{$breadcrumb}__link--hover--Color);
91
94
  --#{$breadcrumb}__link--TextDecorationLine: var(--#{$breadcrumb}__link--hover--TextDecorationLine);
92
95
  --#{$breadcrumb}__link--TextDecorationStyle: var(--#{$breadcrumb}__link--hover--TextDecorationStyle);
96
+ --#{$breadcrumb}__link--TextDecorationColor: var(--#{$breadcrumb}__link--hover--TextDecorationColor);
93
97
  }
94
98
 
95
99
 
@@ -115,7 +115,7 @@
115
115
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
116
116
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
117
117
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
118
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
118
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
119
119
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
120
120
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
121
121
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -145,7 +145,7 @@
145
145
  --#{$menu-toggle}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
146
146
  --#{$menu-toggle}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
147
147
  --#{$menu-toggle}--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
148
- --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
148
+ --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
149
149
  --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
150
150
  --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
151
151
  --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -153,6 +153,9 @@
153
153
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
154
154
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
155
155
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
156
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
157
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
158
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
156
159
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
157
160
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
158
161
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -160,9 +163,23 @@
160
163
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
161
164
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
162
165
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
166
+ --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
163
167
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
164
168
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
165
169
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
170
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
171
+ --pf-v6-c-table--m-sticky-header--BoxShadow: 0;
172
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
173
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
174
+ --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
175
+ --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
176
+ --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
177
+ --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
178
+ }
179
+ :where(.pf-v6-theme-glass) .pf-v6-c-table {
180
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
181
+ --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
182
+ --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
166
183
  }
167
184
 
168
185
  .pf-v6-c-table {
@@ -180,35 +197,46 @@
180
197
  .pf-v6-c-table.pf-m-fixed {
181
198
  table-layout: fixed;
182
199
  }
183
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
184
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
200
+ .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
201
+ opacity: 0;
202
+ transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
203
+ transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
204
+ transition-property: opacity;
205
+ }
206
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
207
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
208
+ }
209
+ .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after {
210
+ opacity: 1;
211
+ }
212
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
213
+ position: relative;
214
+ }
215
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead {
185
216
  position: sticky;
186
217
  inset-block-start: 0;
187
218
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
188
- background: var(--pf-v6-c-table--BackgroundColor);
189
219
  }
190
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
191
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
220
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before {
192
221
  position: absolute;
193
- inset-block-start: 0;
194
- inset-block-end: 0;
195
- inset-inline-start: 0;
196
- inset-inline-end: 0;
197
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
222
+ inset: 0;
223
+ z-index: -1;
198
224
  pointer-events: none;
199
225
  content: "";
200
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
201
- }
202
- .pf-v6-c-table.pf-m-sticky-header {
203
- position: relative;
226
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
227
+ border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
228
+ box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
204
229
  }
205
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
230
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
206
231
  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
207
232
  }
208
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
209
- position: sticky;
210
- inset-block-start: 0;
211
- background: var(--pf-v6-c-table--BackgroundColor);
233
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
234
+ position: absolute;
235
+ inset: 0;
236
+ z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
237
+ pointer-events: none;
238
+ content: "";
239
+ border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
212
240
  }
213
241
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
214
242
  border-block-end: 0;
@@ -899,6 +927,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
899
927
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
900
928
  vertical-align: bottom;
901
929
  }
930
+ .pf-v6-c-table__thead.pf-m-nested-column-header {
931
+ position: relative;
932
+ }
933
+ .pf-v6-c-table__thead.pf-m-nested-column-header::after {
934
+ position: absolute;
935
+ inset: 0;
936
+ z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
937
+ pointer-events: none;
938
+ content: "";
939
+ border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
940
+ }
902
941
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
903
942
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
904
943
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd);
@@ -239,6 +239,9 @@
239
239
  --#{$table}__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
240
240
 
241
241
  // * Table nested column header
242
+ --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: var(--#{$table}--border-width--base);
243
+ --#{$table}__thead--m-nested-column-header--BorderBlockEndColor: var(--#{$table}--BorderColor);
244
+ --#{$table}__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
242
245
  --#{$table}__thead--m-nested-column-header--button--OutlineOffset: #{pf-size-prem(-3px)};
243
246
  --#{$table}__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
244
247
  --#{$table}__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -254,9 +257,24 @@
254
257
  --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
255
258
 
256
259
  // * Table sticky header
260
+ --#{$table}--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
257
261
  --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
258
262
  --#{$table}--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
259
263
  --#{$table}--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
264
+ --#{$table}--m-sticky-header--BorderRadius: 0;
265
+ --#{$table}--m-sticky-header--BoxShadow: 0;
266
+ --#{$table}--m-sticky-header--BorderBlockEndWidth: var(--#{$table}--border-width--base);
267
+ --#{$table}--m-sticky-header--BorderBlockEndColor: var(--#{$table}--BorderColor);
268
+ --#{$table}--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
269
+ --#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
270
+ --#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
271
+ --#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
272
+
273
+ :where(.pf-v6-theme-glass) & {
274
+ --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
275
+ --#{$table}--m-sticky-header--BoxShadow: var(--#{$table}--m-sticky-header--BoxShadow--glass);
276
+ --#{$table}--m-sticky-header--BorderRadius: var(--#{$table}--m-sticky-header--BorderRadius--glass);
277
+ }
260
278
  }
261
279
 
262
280
  // TODO: update grouping comments to // Table {element}
@@ -279,41 +297,63 @@
279
297
  table-layout: fixed;
280
298
  }
281
299
 
282
- // - Table sticky header
283
- &.pf-m-sticky-header > .#{$table}__thead,
284
- .#{$table}__thead.pf-m-nested-column-header {
285
- position: sticky;
286
- inset-block-start: 0;
287
- z-index: var(--#{$table}--m-sticky-header--ZIndex);
288
- background: var(--#{$table}--BackgroundColor);
300
+ &.pf-m-sticky-header-base > .#{$table}__thead {
301
+ &::before,
302
+ &::after {
303
+ opacity: 0;
304
+ transition-timing-function: var(--#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor);
305
+ transition-duration: var(--#{$table}--m-sticky-header--TransitionDuration--BackgroundColor);
306
+ transition-property: opacity;
307
+ }
308
+ }
289
309
 
290
- &::before {
291
- position: absolute;
292
- inset-block-start: 0;
293
- inset-block-end: 0;
294
- inset-inline-start: 0;
295
- inset-inline-end: 0;
296
- z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
297
- pointer-events: none;
298
- content: '';
299
- border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
310
+ &.pf-m-sticky-header,
311
+ &.pf-m-sticky-header-stuck {
312
+ --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: 0;
313
+ }
314
+
315
+ &.pf-m-sticky-header-stuck > .#{$table}__thead {
316
+ &::before,
317
+ &::after {
318
+ opacity: 1;
300
319
  }
301
320
  }
302
321
 
303
- &.pf-m-sticky-header {
322
+ &.pf-m-sticky-header,
323
+ &.pf-m-sticky-header-base {
304
324
  position: relative;
305
325
 
306
- thead:where(.#{$table}__thead) tr:where(.#{$table}__tr) {
326
+ > .#{$table}__thead {
327
+ position: sticky;
328
+ inset-block-start: 0;
329
+ z-index: var(--#{$table}--m-sticky-header--ZIndex);
330
+
331
+ &::before {
332
+ position: absolute;
333
+ inset: 0;
334
+ z-index: -1;
335
+ pointer-events: none;
336
+ content: '';
337
+ background-color: var(--#{$table}--m-sticky-header--BackgroundColor);
338
+ border-radius: var(--#{$table}--m-sticky-header--BorderRadius);
339
+ box-shadow: var(--#{$table}--m-sticky-header--BoxShadow);
340
+ }
341
+
307
342
  > :where(th, td) {
308
343
  z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
309
344
  }
310
345
  }
346
+ }
311
347
 
312
- // - Table nested column header
313
- > .pf-m-nested-column-header {
314
- position: sticky;
315
- inset-block-start: 0;
316
- background: var(--#{$table}--BackgroundColor);
348
+ &.pf-m-sticky-header,
349
+ &.pf-m-sticky-header-base {
350
+ > .#{$table}__thead::after {
351
+ position: absolute;
352
+ inset: 0;
353
+ z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
354
+ pointer-events: none;
355
+ content: '';
356
+ border-block-end: var(--#{$table}--m-sticky-header--BorderBlockEndWidth) solid var(--#{$table}--m-sticky-header--BorderBlockEndColor);
317
357
  }
318
358
  }
319
359
 
@@ -1216,6 +1256,17 @@
1216
1256
 
1217
1257
  // - Table nested column header button
1218
1258
  &.pf-m-nested-column-header {
1259
+ position: relative;
1260
+
1261
+ &::after {
1262
+ position: absolute;
1263
+ inset: 0;
1264
+ z-index: var(--#{$table}__thead--m-nested-column-header--after--ZIndex);
1265
+ pointer-events: none;
1266
+ content: '';
1267
+ border-block-end: var(--#{$table}__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--#{$table}__thead--m-nested-column-header--BorderBlockEndColor);
1268
+ }
1269
+
1219
1270
  .#{$table}__button {
1220
1271
  --#{$table}__button--PaddingInlineStart: var(--#{$table}__nested-column-header__button--PaddingInlineStart);
1221
1272
  --#{$table}__button--PaddingInlineEnd: var(--#{$table}__nested-column-header__button--PaddingInlineEnd);
@@ -1501,7 +1501,7 @@
1501
1501
  }
1502
1502
 
1503
1503
  .pf-v6-c-breadcrumb {
1504
- --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
1504
+ --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
1505
1505
  --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
1506
1506
  --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
1507
1507
  --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
@@ -1512,12 +1512,14 @@
1512
1512
  --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
1513
1513
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
1514
1514
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
1515
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
1515
1516
  --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
1516
1517
  --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
1517
1518
  --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
1519
+ --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
1518
1520
  --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
1519
1521
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
1520
- --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
1522
+ --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
1521
1523
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1522
1524
  --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
1523
1525
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -1570,6 +1572,7 @@
1570
1572
  color: var(--pf-v6-c-breadcrumb__link--Color);
1571
1573
  text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
1572
1574
  text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
1575
+ text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
1573
1576
  word-break: break-word;
1574
1577
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
1575
1578
  }
@@ -1577,6 +1580,7 @@
1577
1580
  --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
1578
1581
  --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
1579
1582
  --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
1583
+ --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
1580
1584
  }
1581
1585
  .pf-v6-c-breadcrumb__link.pf-m-current {
1582
1586
  cursor: default;
@@ -11920,7 +11924,7 @@ ul.pf-v6-c-list {
11920
11924
  --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
11921
11925
  --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
11922
11926
  --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
11923
- --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
11927
+ --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
11924
11928
  --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
11925
11929
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
11926
11930
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -19058,6 +19062,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19058
19062
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19059
19063
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19060
19064
  --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
19065
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19066
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
19067
+ --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19061
19068
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
19062
19069
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19063
19070
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -19065,9 +19072,23 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19065
19072
  --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
19066
19073
  --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
19067
19074
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
19075
+ --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
19068
19076
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
19069
19077
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
19070
19078
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19079
+ --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
19080
+ --pf-v6-c-table--m-sticky-header--BoxShadow: 0;
19081
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
19082
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
19083
+ --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
19084
+ --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
19085
+ --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
19086
+ --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
19087
+ }
19088
+ :where(.pf-v6-theme-glass) .pf-v6-c-table {
19089
+ --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
19090
+ --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
19091
+ --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
19071
19092
  }
19072
19093
 
19073
19094
  .pf-v6-c-table {
@@ -19085,35 +19106,46 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19085
19106
  .pf-v6-c-table.pf-m-fixed {
19086
19107
  table-layout: fixed;
19087
19108
  }
19088
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
19089
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
19109
+ .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
19110
+ opacity: 0;
19111
+ transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
19112
+ transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
19113
+ transition-property: opacity;
19114
+ }
19115
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
19116
+ --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
19117
+ }
19118
+ .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after {
19119
+ opacity: 1;
19120
+ }
19121
+ .pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
19122
+ position: relative;
19123
+ }
19124
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead {
19090
19125
  position: sticky;
19091
19126
  inset-block-start: 0;
19092
19127
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
19093
- background: var(--pf-v6-c-table--BackgroundColor);
19094
19128
  }
19095
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
19096
- .pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
19129
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before {
19097
19130
  position: absolute;
19098
- inset-block-start: 0;
19099
- inset-block-end: 0;
19100
- inset-inline-start: 0;
19101
- inset-inline-end: 0;
19102
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19131
+ inset: 0;
19132
+ z-index: -1;
19103
19133
  pointer-events: none;
19104
19134
  content: "";
19105
- border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
19135
+ background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
19136
+ border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
19137
+ box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
19106
19138
  }
19107
- .pf-v6-c-table.pf-m-sticky-header {
19108
- position: relative;
19109
- }
19110
- .pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
19139
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
19111
19140
  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
19112
19141
  }
19113
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
19114
- position: sticky;
19115
- inset-block-start: 0;
19116
- background: var(--pf-v6-c-table--BackgroundColor);
19142
+ .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
19143
+ position: absolute;
19144
+ inset: 0;
19145
+ z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19146
+ pointer-events: none;
19147
+ content: "";
19148
+ border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
19117
19149
  }
19118
19150
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
19119
19151
  border-block-end: 0;
@@ -19804,6 +19836,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19804
19836
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
19805
19837
  vertical-align: bottom;
19806
19838
  }
19839
+ .pf-v6-c-table__thead.pf-m-nested-column-header {
19840
+ position: relative;
19841
+ }
19842
+ .pf-v6-c-table__thead.pf-m-nested-column-header::after {
19843
+ position: absolute;
19844
+ inset: 0;
19845
+ z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
19846
+ pointer-events: none;
19847
+ content: "";
19848
+ border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
19849
+ }
19807
19850
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
19808
19851
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
19809
19852
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd);
@@ -382,7 +382,7 @@ cssPrefix: pf-v6-c-breadcrumb
382
382
  aria-expanded="false"
383
383
  >
384
384
  <span class="pf-v6-c-menu-toggle__count">
385
- <span class="pf-v6-c-badge pf-m-unread">
385
+ <span class="pf-v6-c-badge pf-m-read">
386
386
  4
387
387
  <span class="pf-v6-screen-reader">additional items</span>
388
388
  </span>