@patternfly/patternfly 6.5.0-prerelease.64 → 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.
@@ -99,7 +99,7 @@
99
99
  --#{$table}__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
100
100
  --#{$table}__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
101
101
  --#{$table}__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
102
- --#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--small);
102
+ --#{$table}__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
103
103
  --#{$table}__button--hover--Color: var(--pf-t--global--text--color--regular);
104
104
  --#{$table}__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
105
105
 
@@ -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);
@@ -251,12 +254,27 @@
251
254
  --#{$table}__nested-column-header__button--PaddingInlineEnd: calc(var(--#{$table}__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
252
255
 
253
256
  // * Table striped
254
- --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
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);
@@ -13583,6 +13587,7 @@ ul.pf-v6-c-list {
13583
13587
  --pf-v6-c-page__sidebar--TranslateZ: 0;
13584
13588
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
13585
13589
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
13590
+ --pf-v6-c-page__sidebar--MarginBlockStart: 0;
13586
13591
  --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
13587
13592
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
13588
13593
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
@@ -13600,6 +13605,20 @@ ul.pf-v6-c-list {
13600
13605
  }
13601
13606
  }
13602
13607
  .pf-v6-c-page {
13608
+ --pf-v6-c-page__sidebar-main--PaddingBlockStart: 0;
13609
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: 0;
13610
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: 0;
13611
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: 0;
13612
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: 0;
13613
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: 0;
13614
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: 0;
13615
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: 0;
13616
+ --pf-v6-c-page__sidebar-main--BackgroundColor: transparent;
13617
+ --pf-v6-c-page__sidebar-main--BackdropFilter: none;
13618
+ --pf-v6-c-page__sidebar-main--BorderWidth: 0;
13619
+ --pf-v6-c-page__sidebar-main--BorderColor: transparent;
13620
+ --pf-v6-c-page__sidebar-main--BorderRadius: 0;
13621
+ --pf-v6-c-page__sidebar-main--BoxShadow: none;
13603
13622
  --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
13604
13623
  --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
13605
13624
  --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -13670,6 +13689,10 @@ ul.pf-v6-c-list {
13670
13689
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13671
13690
  --pf-v6-c-page__main-section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13672
13691
  --pf-v6-c-page__main-breadcrumb--page__main-tabs--PaddingBlockStart: var(--pf-t--global--spacer--md);
13692
+ --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));
13693
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor: var(--pf-t--global--border--color--subtle);
13694
+ --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));
13695
+ --pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor: var(--pf-t--global--border--color--subtle);
13673
13696
  --pf-v6-c-page--section--m-limit-width--MaxWidth: calc(125rem - var(--pf-v6-c-page__sidebar--Width));
13674
13697
  --pf-v6-c-page--section--m-sticky-top--ZIndex: var(--pf-t--global--z-index--md);
13675
13698
  --pf-v6-c-page--section--m-sticky-top--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
@@ -13712,11 +13735,54 @@ ul.pf-v6-c-list {
13712
13735
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13713
13736
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13714
13737
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13738
+ --pf-v6-c-page--BackgroundColor--glass: transparent;
13739
+ --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13740
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
13741
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
13742
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13743
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart--glass: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13744
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13745
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: calc(var(--pf-t--global--spacer--sm) * -1);
13746
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-t--global--spacer--md);
13747
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-t--global--spacer--md);
13748
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-t--global--spacer--md);
13749
+ --pf-v6-c-page__sidebar-main--BackgroundColor--glass: var(--pf-v6-c-page__sidebar--BackgroundColor);
13750
+ --pf-v6-c-page__sidebar-main--BackdropFilter--glass: var(--pf-v6-c-page__sidebar--BackdropFilter);
13751
+ --pf-v6-c-page__sidebar-main--BorderWidth--glass: var(--pf-t--global--border--width--glass--default);
13752
+ --pf-v6-c-page__sidebar-main--BorderColor--glass: var(--pf-t--global--border--color--glass--default);
13753
+ --pf-v6-c-page__sidebar-main--BorderRadius--glass: var(--pf-t--global--border--radius--glass--default);
13754
+ --pf-v6-c-page__sidebar-main--BoxShadow--glass: var(--pf-t--global--box-shadow--glass--default);
13755
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass: 0;
13756
+ --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13757
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13758
+ --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13715
13759
  }
13716
13760
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13717
- --pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13718
- --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13719
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13761
+ --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
13762
+ --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
13763
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
13764
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
13765
+ --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
13766
+ --pf-v6-c-page__sidebar-main--PaddingInlineStart: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart--glass);
13767
+ --pf-v6-c-page__sidebar-main--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd--glass);
13768
+ --pf-v6-c-page__sidebar-main--MarginBlockStart: var(--pf-v6-c-page__sidebar-main--MarginBlockStart--glass);
13769
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd--glass);
13770
+ --pf-v6-c-page__sidebar-main--MarginInlineStart: var(--pf-v6-c-page__sidebar-main--MarginInlineStart--glass);
13771
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd--glass);
13772
+ --pf-v6-c-page__sidebar-main--BackgroundColor: var(--pf-v6-c-page__sidebar-main--BackgroundColor--glass);
13773
+ --pf-v6-c-page__sidebar-main--BackdropFilter: var(--pf-v6-c-page__sidebar-main--BackdropFilter--glass);
13774
+ --pf-v6-c-page__sidebar-main--BorderWidth: var(--pf-v6-c-page__sidebar-main--BorderWidth--glass);
13775
+ --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
13776
+ --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
13777
+ --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13778
+ }
13779
+ @media (min-width: 75rem) {
13780
+ .pf-v6-c-page {
13781
+ --pf-v6-c-page__sidebar-main--MarginBlockStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockStart--glass);
13782
+ --pf-v6-c-page__sidebar-main--MarginBlockEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass);
13783
+ --pf-v6-c-page__sidebar-main--MarginInlineStart--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass);
13784
+ --pf-v6-c-page__sidebar-main--MarginInlineEnd--glass: var(--pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass);
13785
+ }
13720
13786
  }
13721
13787
 
13722
13788
  .pf-v6-c-page {
@@ -13729,9 +13795,6 @@ ul.pf-v6-c-list {
13729
13795
  max-height: 100%;
13730
13796
  background-color: var(--pf-v6-c-page--BackgroundColor);
13731
13797
  }
13732
- :where(:root.pf-v6-theme-glass) .pf-v6-c-page {
13733
- background-color: transparent;
13734
- }
13735
13798
  @media (min-width: 75rem) {
13736
13799
  .pf-v6-c-page {
13737
13800
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
@@ -13881,6 +13944,7 @@ ul.pf-v6-c-list {
13881
13944
  padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13882
13945
  padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13883
13946
  padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13947
+ margin-block-start: var(--pf-v6-c-page__sidebar--MarginBlockStart);
13884
13948
  margin-inline-end: var(--pf-v6-c-page__sidebar--MarginInlineEnd);
13885
13949
  overflow-x: hidden;
13886
13950
  overflow-y: auto;
@@ -13912,44 +13976,33 @@ ul.pf-v6-c-list {
13912
13976
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
13913
13977
  min-height: 0;
13914
13978
  padding: 0;
13915
- overflow: visible;
13979
+ overflow: revert;
13916
13980
  background: transparent;
13917
13981
  }
13918
13982
  :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
13919
13983
  box-shadow: none;
13920
13984
  }
13921
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13922
- padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13923
- padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13924
- padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13925
- margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
13926
- margin-block-end: var(--pf-t--global--spacer--md);
13927
- margin-inline-start: var(--pf-t--global--spacer--md);
13928
- margin-inline-end: var(--pf-t--global--spacer--md);
13985
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar-main {
13929
13986
  overflow: auto;
13930
- background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
13931
- backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
13932
- border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
13933
- border-radius: var(--pf-t--global--border--radius--glass--default);
13934
- box-shadow: var(--pf-t--global--box-shadow--glass--default);
13935
- }
13936
- @media (min-width: 75rem) {
13937
- :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13938
- margin-block-start: 0;
13939
- margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
13940
- margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
13941
- margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
13942
- }
13943
- }
13944
-
13945
- .pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
13946
- overflow: revert;
13947
13987
  }
13948
13988
 
13949
13989
  .pf-v6-c-page__sidebar-main {
13950
13990
  display: flex;
13951
13991
  flex-grow: 1;
13952
13992
  flex-direction: column;
13993
+ padding-block-start: var(--pf-v6-c-page__sidebar-main--PaddingBlockStart);
13994
+ padding-block-end: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd);
13995
+ padding-inline-start: var(--pf-v6-c-page__sidebar-main--PaddingInlineStart);
13996
+ padding-inline-end: var(--pf-v6-c-page__sidebar-main--PaddingInlineEnd);
13997
+ margin-block-start: var(--pf-v6-c-page__sidebar-main--MarginBlockStart);
13998
+ margin-block-end: var(--pf-v6-c-page__sidebar-main--MarginBlockEnd);
13999
+ margin-inline-start: var(--pf-v6-c-page__sidebar-main--MarginInlineStart);
14000
+ margin-inline-end: var(--pf-v6-c-page__sidebar-main--MarginInlineEnd);
14001
+ background-color: var(--pf-v6-c-page__sidebar-main--BackgroundColor);
14002
+ backdrop-filter: var(--pf-v6-c-page__sidebar-main--BackdropFilter);
14003
+ border: var(--pf-v6-c-page__sidebar-main--BorderWidth) solid var(--pf-v6-c-page__sidebar-main--BorderColor);
14004
+ border-radius: var(--pf-v6-c-page__sidebar-main--BorderRadius);
14005
+ box-shadow: var(--pf-v6-c-page__sidebar-main--BoxShadow);
13953
14006
  }
13954
14007
 
13955
14008
  .pf-v6-c-page__sidebar-header {
@@ -14377,8 +14430,8 @@ ul.pf-v6-c-list {
14377
14430
  }
14378
14431
  .pf-v6-c-page__main-section.pf-m-secondary {
14379
14432
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
14380
- border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
14381
- border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
14433
+ border-block-start: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockStartColor);
14434
+ border-block-end: var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndWidth) solid var(--pf-v6-c-page__main-section--m-secondary--BorderBlockEndColor);
14382
14435
  }
14383
14436
  .pf-v6-c-page__main-section.pf-m-padding {
14384
14437
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
@@ -18920,7 +18973,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18920
18973
  --pf-v6-c-table__button--BorderColor: var(--pf-t--global--border--color--high-contrast);
18921
18974
  --pf-v6-c-table__button--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
18922
18975
  --pf-v6-c-table__button--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
18923
- --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--small);
18976
+ --pf-v6-c-table__button--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
18924
18977
  --pf-v6-c-table__button--hover--Color: var(--pf-t--global--text--color--regular);
18925
18978
  --pf-v6-c-table__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18926
18979
  --pf-v6-c-table__check--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -19009,16 +19062,33 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19009
19062
  --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19010
19063
  --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
19011
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);
19012
19068
  --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
19013
19069
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
19014
19070
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
19015
19071
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
19016
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));
19017
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));
19018
- --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
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);
19019
19076
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
19020
19077
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
19021
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);
19022
19092
  }
19023
19093
 
19024
19094
  .pf-v6-c-table {
@@ -19036,35 +19106,46 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19036
19106
  .pf-v6-c-table.pf-m-fixed {
19037
19107
  table-layout: fixed;
19038
19108
  }
19039
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
19040
- .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 {
19041
19125
  position: sticky;
19042
19126
  inset-block-start: 0;
19043
19127
  z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
19044
- background: var(--pf-v6-c-table--BackgroundColor);
19045
19128
  }
19046
- .pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
19047
- .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 {
19048
19130
  position: absolute;
19049
- inset-block-start: 0;
19050
- inset-block-end: 0;
19051
- inset-inline-start: 0;
19052
- inset-inline-end: 0;
19053
- z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
19131
+ inset: 0;
19132
+ z-index: -1;
19054
19133
  pointer-events: none;
19055
19134
  content: "";
19056
- 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);
19057
19138
  }
19058
- .pf-v6-c-table.pf-m-sticky-header {
19059
- position: relative;
19060
- }
19061
- .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) {
19062
19140
  z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
19063
19141
  }
19064
- .pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
19065
- position: sticky;
19066
- inset-block-start: 0;
19067
- 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);
19068
19149
  }
19069
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) {
19070
19151
  border-block-end: 0;
@@ -19755,6 +19836,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
19755
19836
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
19756
19837
  vertical-align: bottom;
19757
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
+ }
19758
19850
  .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
19759
19851
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
19760
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>