@patternfly/react-styles 6.6.1-prerelease.0 → 6.6.1-prerelease.2

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 (63) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/css/components/Accordion/accordion.css +3 -3
  3. package/css/components/Alert/alert.css +5 -5
  4. package/css/components/Breadcrumb/breadcrumb.css +2 -2
  5. package/css/components/Button/button.css +20 -8
  6. package/css/components/Button/button.d.ts +1 -0
  7. package/css/components/Button/button.js +1 -0
  8. package/css/components/Button/button.mjs +1 -0
  9. package/css/components/Card/card.css +4 -4
  10. package/css/components/Compass/compass.css +21 -24
  11. package/css/components/Compass/compass.d.ts +1 -0
  12. package/css/components/Compass/compass.js +1 -0
  13. package/css/components/Compass/compass.mjs +1 -0
  14. package/css/components/DataList/data-list.css +16 -14
  15. package/css/components/DataList/data-list.d.ts +1 -0
  16. package/css/components/DataList/data-list.js +1 -0
  17. package/css/components/DataList/data-list.mjs +1 -0
  18. package/css/components/FormControl/form-control.css +12 -2
  19. package/css/components/Hint/hint.css +2 -2
  20. package/css/components/Label/label.css +9 -3
  21. package/css/components/Masthead/masthead.css +3 -3
  22. package/css/components/Masthead/masthead.d.ts +1 -0
  23. package/css/components/Masthead/masthead.js +1 -0
  24. package/css/components/Masthead/masthead.mjs +1 -0
  25. package/css/components/Menu/menu.css +1 -1
  26. package/css/components/MenuToggle/menu-toggle.css +4 -4
  27. package/css/components/MenuToggle/menu-toggle.d.ts +1 -0
  28. package/css/components/MenuToggle/menu-toggle.js +1 -0
  29. package/css/components/MenuToggle/menu-toggle.mjs +1 -0
  30. package/css/components/ModalBox/modal-box.css +3 -3
  31. package/css/components/Nav/nav.css +27 -7
  32. package/css/components/Nav/nav.d.ts +2 -0
  33. package/css/components/Nav/nav.js +2 -0
  34. package/css/components/Nav/nav.mjs +2 -0
  35. package/css/components/Page/page.css +67 -17
  36. package/css/components/Page/page.d.ts +4 -1
  37. package/css/components/Page/page.js +4 -1
  38. package/css/components/Page/page.mjs +4 -1
  39. package/css/components/Pagination/pagination.css +12 -7
  40. package/css/components/Pagination/pagination.d.ts +2 -4
  41. package/css/components/Pagination/pagination.js +2 -4
  42. package/css/components/Pagination/pagination.mjs +2 -4
  43. package/css/components/Popover/popover.css +1 -1
  44. package/css/components/Table/table-grid.css +26 -14
  45. package/css/components/Table/table.css +6 -2
  46. package/css/components/Tabs/tabs.css +19 -5
  47. package/css/components/TreeView/tree-view.css +6 -6
  48. package/css/components/Wizard/wizard.css +1 -1
  49. package/css/components/_index.css +270 -138
  50. package/css/components/_index.d.ts +6 -2
  51. package/css/components/_index.js +6 -2
  52. package/css/components/_index.mjs +6 -2
  53. package/css/docs/components/Nav/examples/Navigation.css +3 -1
  54. package/dist/esm/index.d.ts +1 -1
  55. package/dist/esm/index.d.ts.map +1 -1
  56. package/dist/esm/index.js +2 -2
  57. package/dist/esm/index.js.map +1 -1
  58. package/dist/js/index.d.ts +1 -1
  59. package/dist/js/index.d.ts.map +1 -1
  60. package/dist/js/index.js +2 -2
  61. package/dist/js/index.js.map +1 -1
  62. package/package.json +3 -3
  63. package/src/index.ts +3 -3
package/css/components/Popover/popover.css CHANGED
@@ -37,7 +37,7 @@
37
37
  --pf-v6-c-popover__arrow--m-inline-bottom--InsetBlockEnd: var(--pf-t--global--border--radius--medium);
38
38
  --pf-v6-c-popover__arrow--m-block-left--InsetInlineStart: var(--pf-t--global--border--radius--medium);
39
39
  --pf-v6-c-popover__arrow--m-block-right--InsetInlineEnd: var(--pf-t--global--border--radius--medium);
40
- --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--default));
40
+ --pf-v6-c-popover__close--InsetBlockStart: calc(var(--pf-v6-c-popover__content--PaddingBlockStart) - var(--pf-t--global--spacer--control--vertical--plain));
41
41
  --pf-v6-c-popover__close--InsetInlineEnd: var(--pf-v6-c-popover__content--PaddingInlineEnd);
42
42
  --pf-v6-c-popover__close--sibling--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
43
43
  --pf-v6-c-popover__header--MarginBlockEnd: var(--pf-t--global--spacer--sm);
package/css/components/Table/table-grid.css CHANGED
@@ -35,22 +35,24 @@
35
35
  --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
36
36
  --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
37
37
  --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
38
+ --pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
38
39
  --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
39
40
  --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
40
41
  --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
41
42
  --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
42
- --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: 0.4375rem;
43
- --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
43
+ --pf-v6-c-table--m-compact__check--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + 0.25rem);
44
+ --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--compact) * -1);
44
45
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
45
46
  --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
46
47
  --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
47
48
  --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
48
49
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
49
50
  --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
50
- --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem;
51
- --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0.5rem;
51
+ --pf-v6-c-table__check--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + 0.25rem);
52
+ --pf-v6-c-table--m-grid__favorite--MarginBlockStart: 0;
52
53
  --pf-v6-c-table--m-grid__check--favorite--MarginInlineStart: var(--pf-t--global--spacer--xl);
53
54
  --pf-v6-c-table__action--responsive--MarginInlineStart: var(--pf-t--global--spacer--xl);
55
+ --pf-v6-c-table__action--responsive--MarginBlockStart: calc(var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart) + var(--pf-t--global--spacer--control--vertical--plain) * -1);
54
56
  --pf-v6-c-table--m-grid__favorite--action--MarginInlineStart: var(--pf-t--global--spacer--2xl);
55
57
  --pf-v6-c-table--m-grid__check--favorite--action--MarginInlineStart: calc(var(--pf-v6-c-table--m-grid__check--favorite--MarginInlineStart) + var(--pf-v6-c-table--m-grid__favorite--action--MarginInlineStart));
56
58
  --pf-v6-c-table__toggle__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
@@ -132,10 +134,11 @@
132
134
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
133
135
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
134
136
  }
135
- .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
137
+ .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
136
138
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
137
139
  }
138
140
  .pf-m-grid.pf-v6-c-table.pf-m-compact {
141
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
139
142
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
140
143
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
141
144
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -145,7 +148,7 @@
145
148
  }
146
149
  .pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
147
150
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
148
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
151
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
149
152
  }
150
153
  .pf-m-grid.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
151
154
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -335,6 +338,7 @@
335
338
  }
336
339
  .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
337
340
  text-align: end;
341
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
338
342
  }
339
343
  @media screen and (max-width: 36rem) {
340
344
  .pf-m-grid.pf-v6-c-table .pf-v6-c-table__action {
@@ -441,10 +445,11 @@
441
445
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
442
446
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
443
447
  }
444
- .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
448
+ .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-md.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
445
449
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
446
450
  }
447
451
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact {
452
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
448
453
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
449
454
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
450
455
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -454,7 +459,7 @@
454
459
  }
455
460
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
456
461
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
457
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
462
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
458
463
  }
459
464
  .pf-m-grid-md.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
460
465
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -644,6 +649,7 @@
644
649
  }
645
650
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
646
651
  text-align: end;
652
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
647
653
  }
648
654
  @media screen and (max-width: 36rem) {
649
655
  .pf-m-grid-md.pf-v6-c-table .pf-v6-c-table__action {
@@ -751,10 +757,11 @@
751
757
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
752
758
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
753
759
  }
754
- .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
760
+ .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-lg.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
755
761
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
756
762
  }
757
763
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact {
764
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
758
765
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
759
766
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
760
767
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -764,7 +771,7 @@
764
771
  }
765
772
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
766
773
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
767
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
774
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
768
775
  }
769
776
  .pf-m-grid-lg.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
770
777
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -954,6 +961,7 @@
954
961
  }
955
962
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
956
963
  text-align: end;
964
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
957
965
  }
958
966
  @media screen and (max-width: 36rem) {
959
967
  .pf-m-grid-lg.pf-v6-c-table .pf-v6-c-table__action {
@@ -1061,10 +1069,11 @@
1061
1069
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
1062
1070
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
1063
1071
  }
1064
- .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
1072
+ .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
1065
1073
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
1066
1074
  }
1067
1075
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact {
1076
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
1068
1077
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
1069
1078
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
1070
1079
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -1074,7 +1083,7 @@
1074
1083
  }
1075
1084
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
1076
1085
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1077
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1086
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
1078
1087
  }
1079
1088
  .pf-m-grid-xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
1080
1089
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -1264,6 +1273,7 @@
1264
1273
  }
1265
1274
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
1266
1275
  text-align: end;
1276
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
1267
1277
  }
1268
1278
  @media screen and (max-width: 36rem) {
1269
1279
  .pf-m-grid-xl.pf-v6-c-table .pf-v6-c-table__action {
@@ -1371,10 +1381,11 @@
1371
1381
  padding-block-end: var(--pf-v6-c-table--cell--responsive--PaddingBlockEnd);
1372
1382
  padding-inline-start: var(--pf-v6-c-table--cell--responsive--PaddingInlineStart);
1373
1383
  }
1374
- .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child {
1384
+ .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):first-child, .pf-m-grid-2xl.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) > :where(th, td):is(.pf-v6-c-table__toggle, .pf-v6-c-table__check, .pf-v6-c-table__favorite) + :where(th, td) {
1375
1385
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart);
1376
1386
  }
1377
1387
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact {
1388
+ --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--first-child--responsive--PaddingBlockStart);
1378
1389
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart);
1379
1390
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd);
1380
1391
  --pf-v6-c-table--cell--responsive--PaddingBlockStart: var(--pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart);
@@ -1384,7 +1395,7 @@
1384
1395
  }
1385
1396
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__action {
1386
1397
  margin-block-start: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1387
- margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockStart);
1398
+ margin-block-end: var(--pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd);
1388
1399
  }
1389
1400
  .pf-m-grid-2xl.pf-v6-c-table.pf-m-compact .pf-v6-c-table__toggle .pf-v6-c-button {
1390
1401
  margin-block-end: var(--pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd);
@@ -1574,6 +1585,7 @@
1574
1585
  }
1575
1586
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
1576
1587
  text-align: end;
1588
+ margin-block-start: var(--pf-v6-c-table__action--responsive--MarginBlockStart);
1577
1589
  }
1578
1590
  @media screen and (max-width: 36rem) {
1579
1591
  .pf-m-grid-2xl.pf-v6-c-table .pf-v6-c-table__action {
package/css/components/Table/table.css CHANGED
@@ -54,8 +54,8 @@
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
55
55
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
56
56
  --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
57
- --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
57
+ --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
58
+ --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
59
59
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
60
60
  --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
61
61
  --pf-v6-c-table__button--Color: var(--pf-t--global--text--color--regular);
@@ -141,6 +141,8 @@
141
141
  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
142
142
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
143
143
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
144
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--sm);
145
+ --pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
144
146
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
145
147
  --pf-v6-c-table__tr--m-clickable--BackgroundColor: transparent;
146
148
  --pf-v6-c-table__tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
@@ -924,6 +926,8 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
924
926
  .pf-v6-c-table.pf-m-compact {
925
927
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
926
928
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
929
+ --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockStart);
930
+ --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__expandable-row-content--PaddingBlockEnd);
927
931
  }
928
932
  .pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
929
933
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
package/css/components/Tabs/tabs.css CHANGED
@@ -50,10 +50,10 @@
50
50
  --pf-v6-c-tabs__link--BorderColor: transparent;
51
51
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
52
52
  --pf-v6-c-tabs__link--disabled--BorderColor: transparent;
53
- --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
54
- --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
55
- --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
56
- --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
54
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
55
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
56
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
57
57
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
58
58
  --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
59
59
  --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
@@ -72,9 +72,15 @@
72
72
  --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
73
73
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
74
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
- --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
76
75
  --pf-v6-c-tabs__link--TransitionDuration--background-color: var(--pf-t--global--motion--duration--fade--short);
77
76
  --pf-v6-c-tabs__link--TransitionTimingFunction--background-color: var(--pf-t--global--motion--timing-function--default);
77
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
78
+ --pf-v6-c-tabs--m-subtab__link--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) - var(--pf-t--global--spacer--control--vertical--compact) + (var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body) - 1lh) / 2);
79
+ --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--body--sm);
80
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
81
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
82
+ --pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
83
+ --pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
78
84
  --pf-v6-c-tabs__link--before--border-color--base: var(--pf-t--global--border--color--default);
79
85
  --pf-v6-c-tabs__link--before--border-width--base: var(--pf-t--global--border--width--regular);
80
86
  --pf-v6-c-tabs__link--before--BorderBlockStartColor: var(--pf-v6-c-tabs__link--before--border-color--base);
@@ -441,9 +447,17 @@
441
447
  }
442
448
  .pf-v6-c-tabs.pf-m-subtab {
443
449
  --pf-v6-c-tabs__link--FontSize: var(--pf-v6-c-tabs--m-subtab__link--FontSize);
450
+ --pf-v6-c-tabs__link--PaddingBlockStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockStart);
451
+ --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingBlockEnd);
452
+ --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineStart);
453
+ --pf-v6-c-tabs__link--PaddingInlineEnd: var(--pf-v6-c-tabs--m-subtab__link--PaddingInlineEnd);
444
454
  --pf-v6-c-tabs__item-action--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__item-action--c-button--FontSize);
445
455
  --pf-v6-c-tabs__add--c-button--FontSize: var(--pf-v6-c-tabs--m-subtab__add--c-button--FontSize);
446
456
  }
457
+ .pf-v6-c-tabs.pf-m-subtab .pf-v6-c-tabs__link {
458
+ margin-block-start: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockStart);
459
+ margin-block-end: var(--pf-v6-c-tabs--m-subtab__link--MarginBlockEnd);
460
+ }
447
461
  .pf-v6-c-tabs.pf-m-page-insets {
448
462
  --pf-v6-c-tabs--inset: var(--pf-v6-c-tabs--m-page-insets--inset);
449
463
  }
package/css/components/TreeView/tree-view.css CHANGED
@@ -1,10 +1,10 @@
1
1
  .pf-v6-c-tree-view {
2
- --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
2
+ --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingInlineStart) + var(--pf-v6-c-tree-view__node-toggle--PaddingInlineEnd) + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
3
3
  --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
4
4
  --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);
5
- --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
7
- --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
5
+ --pf-v6-c-tree-view__node--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
6
+ --pf-v6-c-tree-view__node--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
7
+ --pf-v6-c-tree-view__node--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
8
8
  --pf-v6-c-tree-view__node--PaddingInlineStart: var(--pf-v6-c-tree-view__node--indent--base);
9
9
  --pf-v6-c-tree-view__node--Color: var(--pf-t--global--text--color--subtle);
10
10
  --pf-v6-c-tree-view__node--BackgroundColor: transparent;
@@ -48,9 +48,9 @@
48
48
  --pf-v6-c-tree-view__node-toggle--BackgroundColor: transparent;
49
49
  --pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color: var(--pf-t--global--icon--color--regular);
50
50
  --pf-v6-c-tree-view__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
51
- --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
51
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
52
52
  --pf-v6-c-tree-view__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
53
- --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
53
+ --pf-v6-c-tree-view__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
54
54
  --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
55
55
  --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
56
56
  --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
package/css/components/Wizard/wizard.css CHANGED
@@ -133,7 +133,7 @@
133
133
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
134
134
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
135
135
  --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
136
- --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
136
+ --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--sm);
137
137
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
138
138
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
139
139
  --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--lg);