@patternfly/react-styles 6.0.0-prerelease.5 → 6.0.0-prerelease.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (79) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Alert/alert.css +2 -6
  3. package/css/components/Button/button.css +8 -0
  4. package/css/components/DataList/data-list.css +4 -13
  5. package/css/components/DataList/data-list.d.ts +0 -1
  6. package/css/components/DataList/data-list.js +0 -1
  7. package/css/components/DataList/data-list.mjs +0 -1
  8. package/css/components/Drawer/drawer.css +0 -4
  9. package/css/components/Drawer/drawer.d.ts +1 -2
  10. package/css/components/Drawer/drawer.js +1 -2
  11. package/css/components/Drawer/drawer.mjs +1 -2
  12. package/css/components/FormControl/form-control.css +22 -3
  13. package/css/components/FormControl/form-control.d.ts +2 -1
  14. package/css/components/FormControl/form-control.js +2 -1
  15. package/css/components/FormControl/form-control.mjs +2 -1
  16. package/css/components/MenuToggle/menu-toggle.css +66 -55
  17. package/css/components/MenuToggle/menu-toggle.d.ts +4 -2
  18. package/css/components/MenuToggle/menu-toggle.js +4 -2
  19. package/css/components/MenuToggle/menu-toggle.mjs +4 -2
  20. package/css/components/Page/page.css +10 -8
  21. package/css/components/Page/page.d.ts +0 -1
  22. package/css/components/Page/page.js +0 -1
  23. package/css/components/Page/page.mjs +0 -1
  24. package/css/components/Pagination/pagination.css +31 -17
  25. package/css/components/Pagination/pagination.d.ts +1 -1
  26. package/css/components/Pagination/pagination.js +1 -1
  27. package/css/components/Pagination/pagination.mjs +1 -1
  28. package/css/components/Table/table-grid.css +9 -4
  29. package/css/components/Table/table.css +6 -5
  30. package/css/components/_index.css +158 -115
  31. package/css/components/_index.d.ts +3 -3
  32. package/css/components/_index.js +3 -3
  33. package/css/components/_index.mjs +3 -3
  34. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  35. package/css/docs/utilities/BoxShadow/examples/box-shadow.d.ts +2 -1
  36. package/css/docs/utilities/BoxShadow/examples/box-shadow.js +2 -1
  37. package/css/docs/utilities/BoxShadow/examples/box-shadow.mjs +2 -1
  38. package/package.json +3 -3
  39. package/css/assets/images/PF-Masthead-Logo.svg +0 -1
  40. package/css/assets/images/background-filter.svg +0 -17
  41. package/css/assets/images/g_sizing.png +0 -0
  42. package/css/assets/images/img_avatar-dark.svg +0 -22
  43. package/css/assets/images/img_avatar.svg +0 -21
  44. package/css/assets/images/l_pf-reverse-164x11.png +0 -0
  45. package/css/assets/images/l_pf-reverse.svg +0 -1
  46. package/css/assets/images/logo-dropbox-old.svg +0 -1
  47. package/css/assets/images/logo-dropbox.svg +0 -6
  48. package/css/assets/images/logo-facebook.svg +0 -4
  49. package/css/assets/images/logo-github.svg +0 -4
  50. package/css/assets/images/logo-gitlab.svg +0 -4
  51. package/css/assets/images/logo-google.svg +0 -4
  52. package/css/assets/images/logo-google2.svg +0 -10
  53. package/css/assets/images/logo__pf--reverse--base.png +0 -0
  54. package/css/assets/images/logo__pf--reverse--base.svg +0 -40
  55. package/css/assets/images/logo__pf--reverse-on-md.svg +0 -40
  56. package/css/assets/images/pf-c-brand__logo-base.jpg +0 -0
  57. package/css/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  58. package/css/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  59. package/css/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  60. package/css/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  61. package/css/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  62. package/css/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  63. package/css/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  64. package/css/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  65. package/css/assets/images/pf-c-brand__logo.svg +0 -10
  66. package/css/assets/images/pf-logo.svg +0 -28
  67. package/css/assets/images/pf_logo.svg +0 -37
  68. package/css/assets/images/pf_logo_color.svg +0 -22
  69. package/css/assets/images/pf_logo_white.svg +0 -37
  70. package/css/assets/images/pf_mini_logo_white.svg +0 -1
  71. package/css/assets/images/pfbg_1200.jpg +0 -0
  72. package/css/assets/images/pfbg_2000.jpg +0 -0
  73. package/css/assets/images/pfbg_576.jpg +0 -0
  74. package/css/assets/images/pfbg_576@2x.jpg +0 -0
  75. package/css/assets/images/pfbg_768.jpg +0 -0
  76. package/css/assets/images/pfbg_768@2x.jpg +0 -0
  77. package/css/assets/images/pfbg_992.jpg +0 -0
  78. package/css/assets/images/pfbg_992@2x.jpg +0 -0
  79. package/css/assets/images/status-icon-sprite.svg +0 -38
package/css/components/MenuToggle/menu-toggle.mjs CHANGED
@@ -1,5 +1,6 @@
1
1
  import './menu-toggle.css';
2
2
  export default {
3
+ "avatar": "pf-v6-c-avatar",
3
4
  "button": "pf-v6-c-button",
4
5
  "check": "pf-v6-c-check",
5
6
  "checkInput": "pf-v6-c-check__input",
@@ -25,9 +26,10 @@ export default {
25
26
  "danger": "pf-m-danger",
26
27
  "placeholder": "pf-m-placeholder",
27
28
  "splitButton": "pf-m-split-button",
28
- "action": "pf-m-action",
29
+ "standalone": "pf-m-standalone",
29
30
  "typeahead": "pf-m-typeahead",
30
- "text": "pf-m-text"
31
+ "text": "pf-m-text",
32
+ "avatar": "pf-m-avatar"
31
33
  },
32
34
  "textInputGroup": "pf-v6-c-text-input-group"
33
35
  };
package/css/components/Page/page.css CHANGED
@@ -4,6 +4,7 @@
4
4
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
5
5
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
6
6
  --pf-v6-c-page__sidebar--Width: 18.125rem;
7
+ --pf-v6-c-page__sidebar--xl--Width: auto;
7
8
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
8
9
  --pf-v6-c-page__sidebar--BoxShadow: none;
9
10
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -12,7 +13,7 @@
12
13
  --pf-v6-c-page__sidebar--TranslateZ: 0;
13
14
  --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
14
15
  --pf-v6-c-page__sidebar--xl--TranslateX: 0;
15
- --pf-v6-c-page__sidebar--MarginInlineEnd: 0;
16
+ --pf-v6-c-page__sidebar--MarginInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
16
17
  --pf-v6-c-page__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
17
18
  --pf-v6-c-page__sidebar--PaddingInlineStart: 0;
18
19
  --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
@@ -25,7 +26,7 @@
25
26
  --pf-v6-c-page__sidebar-title--LineHeight: var(--pf-t--global--font--line-height--heading);
26
27
  --pf-v6-c-page__sidebar-title--FontFamily: var(--pf-t--global--font--family--heading);
27
28
  --pf-v6-c-page__sidebar-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
28
- --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
29
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: calc(var(--pf-t--global--spacer--inset--page-chrome) / 2);
29
30
  --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
30
31
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineEnd: var(--pf-v6-c-page--inset);
31
32
  --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
@@ -38,8 +39,8 @@
38
39
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
40
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
40
41
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
41
- --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--large);
42
- --pf-v6-c-page__main-container--BorderWidth: var(--pf-t--global--spacer--sm);
42
+ --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
43
+ --pf-v6-c-page__main-container--BorderWidth: 0.25rem;
43
44
  --pf-v6-c-page__main-container--BorderColor: var(--pf-v6-c-page__main-container--BackgroundColor);
44
45
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
45
46
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -96,6 +97,7 @@
96
97
  }
97
98
  @media (min-width: 75rem) {
98
99
  .pf-v6-c-page {
100
+ --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--xl--Width);
99
101
  grid-template-areas: "header header" "sidebar main";
100
102
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
101
103
  }
@@ -605,9 +607,9 @@
605
607
  flex-shrink: 0;
606
608
  }
607
609
 
608
- .pf-v6-c-page__drawer {
609
- grid-area: main;
610
+ .pf-v6-c-page__drawer .pf-v6-c-page__main-container {
611
+ align-self: revert;
610
612
  }
611
- .pf-v6-c-page__drawer > .pf-v6-c-drawer {
612
- flex: 1 0 auto;
613
+ .pf-v6-c-page__drawer .pf-v6-c-page__main-container.pf-m-fill {
614
+ flex-grow: 1;
613
615
  }
package/css/components/Page/page.d.ts CHANGED
@@ -1,7 +1,6 @@
1
1
  import './page.css';
2
2
  declare const _default: {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
- "drawer": "pf-v6-c-drawer",
5
4
  "masthead": "pf-v6-c-masthead",
6
5
  "modifiers": {
7
6
  "expanded": "pf-m-expanded",
package/css/components/Page/page.js CHANGED
@@ -3,7 +3,6 @@ exports.__esModule = true;
3
3
  require('./page.css');
4
4
  exports.default = {
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
- "drawer": "pf-v6-c-drawer",
7
6
  "masthead": "pf-v6-c-masthead",
8
7
  "modifiers": {
9
8
  "expanded": "pf-m-expanded",
package/css/components/Page/page.mjs CHANGED
@@ -1,7 +1,6 @@
1
1
  import './page.css';
2
2
  export default {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
- "drawer": "pf-v6-c-drawer",
5
4
  "masthead": "pf-v6-c-masthead",
6
5
  "modifiers": {
7
6
  "expanded": "pf-m-expanded",
package/css/components/Pagination/pagination.css CHANGED
@@ -17,17 +17,23 @@
17
17
  --pf-v6-c-pagination--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
18
18
  --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
19
19
  --pf-v6-c-pagination--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
20
- --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
21
20
  --pf-v6-c-pagination--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
22
21
  --pf-v6-c-pagination--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--lg);
23
- --pf-v6-c-pagination--m-sticky--ZIndex: 100;
22
+ --pf-v6-c-pagination--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
23
+ --pf-v6-c-pagination--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
24
24
  --pf-v6-c-pagination--m-sticky--InsetBlockStart: 0;
25
25
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
26
26
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
27
- --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
28
- --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
29
- --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
30
27
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
28
+ --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
29
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--sm);
30
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart: var(--pf-t--global--spacer--sm);
32
+ --pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
33
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart: var(--pf-t--global--spacer--gap--group--vertical);
34
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd: 0;
35
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart: var(--pf-t--global--spacer--sm);
36
+ --pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31
37
  --pf-v6-c-pagination__page-menu--Display--base: block;
32
38
  --pf-v6-c-pagination__page-menu--Display: none;
33
39
  --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
@@ -67,17 +73,13 @@
67
73
  position: sticky;
68
74
  inset-block-end: var(--pf-v6-c-pagination--m-bottom--InsetBlockEnd);
69
75
  justify-content: center;
70
- padding-inline-start: var(--pf-v6-c-pagination--m-bottom--PaddingInlineStart);
71
- padding-inline-end: var(--pf-v6-c-pagination--m-bottom--PaddingInlineEnd);
76
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
77
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
78
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
79
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
72
80
  background-color: var(--pf-v6-c-pagination--m-bottom--BackgroundColor);
73
81
  box-shadow: var(--pf-v6-c-pagination--m-bottom--BoxShadow);
74
82
  }
75
- .pf-v6-c-pagination.pf-m-bottom.pf-m-static {
76
- --pf-v6-c-pagination--m-bottom--MarginBlockStart: 0;
77
- --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: 0;
78
- position: relative;
79
- box-shadow: none;
80
- }
81
83
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
82
84
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
83
85
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-page-select {
@@ -99,6 +101,10 @@
99
101
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: auto;
100
102
  position: relative;
101
103
  justify-content: flex-end;
104
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
105
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
106
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
107
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
102
108
  }
103
109
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-first,
104
110
  .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav-control.pf-m-last,
@@ -116,15 +122,23 @@
116
122
  flex-basis: auto;
117
123
  }
118
124
  }
125
+ .pf-v6-c-pagination.pf-m-static {
126
+ position: relative;
127
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockStart);
128
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingBlockEnd);
129
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineStart);
130
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-static--PaddingInlineEnd);
131
+ box-shadow: none;
132
+ }
119
133
  .pf-v6-c-pagination.pf-m-sticky {
120
134
  --pf-v6-c-pagination--m-bottom--InsetBlockEnd: 0;
121
135
  position: sticky;
122
136
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
123
137
  z-index: var(--pf-v6-c-pagination--m-sticky--ZIndex);
124
- padding-block-start: var(--pf-v6-c-pagination--m-sticky--PaddingBlockStart);
125
- padding-block-end: var(--pf-v6-c-pagination--m-sticky--PaddingBlockEnd);
126
- padding-inline-start: var(--pf-v6-c-pagination--m-sticky--PaddingInlineStart);
127
- padding-inline-end: var(--pf-v6-c-pagination--m-sticky--PaddingInlineEnd);
138
+ padding-block-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockStart);
139
+ padding-block-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingBlockEnd);
140
+ padding-inline-start: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineStart);
141
+ padding-inline-end: var(--pf-v6-c-pagination--m-bottom--m-sticky--PaddingInlineEnd);
128
142
  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
129
143
  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
130
144
  }
package/css/components/Pagination/pagination.d.ts CHANGED
@@ -4,9 +4,9 @@ declare const _default: {
4
4
  "formControl": "pf-v6-c-form-control",
5
5
  "modifiers": {
6
6
  "bottom": "pf-m-bottom",
7
- "static": "pf-m-static",
8
7
  "first": "pf-m-first",
9
8
  "last": "pf-m-last",
9
+ "static": "pf-m-static",
10
10
  "sticky": "pf-m-sticky",
11
11
  "pageInsets": "pf-m-page-insets",
12
12
  "displaySummary": "pf-m-display-summary",
package/css/components/Pagination/pagination.js CHANGED
@@ -6,9 +6,9 @@ exports.default = {
6
6
  "formControl": "pf-v6-c-form-control",
7
7
  "modifiers": {
8
8
  "bottom": "pf-m-bottom",
9
- "static": "pf-m-static",
10
9
  "first": "pf-m-first",
11
10
  "last": "pf-m-last",
11
+ "static": "pf-m-static",
12
12
  "sticky": "pf-m-sticky",
13
13
  "pageInsets": "pf-m-page-insets",
14
14
  "displaySummary": "pf-m-display-summary",
package/css/components/Pagination/pagination.mjs CHANGED
@@ -4,9 +4,9 @@ export default {
4
4
  "formControl": "pf-v6-c-form-control",
5
5
  "modifiers": {
6
6
  "bottom": "pf-m-bottom",
7
- "static": "pf-m-static",
8
7
  "first": "pf-m-first",
9
8
  "last": "pf-m-last",
9
+ "static": "pf-m-static",
10
10
  "sticky": "pf-m-sticky",
11
11
  "pageInsets": "pf-m-page-insets",
12
12
  "displaySummary": "pf-m-display-summary",
package/css/components/Table/table-grid.css CHANGED
@@ -10,9 +10,9 @@
10
10
  --pf-v6-c-table__tr--responsive--GridColumnGap: var(--pf-t--global--spacer--md);
11
11
  --pf-v6-c-table__tr--responsive--MarginBlockStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
12
12
  --pf-v6-c-table__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--md);
13
- --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13
+ --pf-v6-c-table__tr--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
14
14
  --pf-v6-c-table__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--md);
15
- --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
15
+ --pf-v6-c-table__tr--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
16
16
  --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockStart: var(--pf-t--global--spacer--xl);
17
17
  --pf-v6-c-table__tr--responsive--nested-table--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
18
18
  --pf-v6-c-table__tr--responsive--nested-table--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
@@ -42,8 +42,8 @@
42
42
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockStart: calc(var(--pf-t--global--spacer--xs) * -1);
43
43
  --pf-v6-c-table--m-compact__action--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
44
44
  --pf-v6-c-table--m-compact__toggle--c-button--responsive--MarginBlockEnd: calc(var(--pf-t--global--spacer--xs) * -1);
45
- --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
46
- --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--lg);
45
+ --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
46
+ --pf-v6-c-table__expandable-row-content--responsive--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
47
47
  --pf-v6-c-table__expandable-row-content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
48
48
  --pf-v6-c-table__check--responsive--MarginInlineStart: var(--pf-v6-c-table__tbody--responsive--border-width--base);
49
49
  --pf-v6-c-table__check--responsive--MarginBlockStart: 0.875rem;
@@ -61,6 +61,7 @@
61
61
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
62
62
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
63
63
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
64
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
64
65
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
65
66
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
66
67
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -360,6 +361,7 @@
360
361
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
361
362
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
362
363
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
364
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
363
365
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
364
366
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
365
367
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -662,6 +664,7 @@
662
664
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
663
665
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
664
666
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
667
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
665
668
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
666
669
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
667
670
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -964,6 +967,7 @@
964
967
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
965
968
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
966
969
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
970
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
967
971
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
968
972
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
969
973
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
@@ -1266,6 +1270,7 @@
1266
1270
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
1267
1271
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-grid--cell--PaddingBlockEnd);
1268
1272
  --pf-v6-c-table--cell--PaddingInlineStart: var(--pf-v6-c-table--m-grid--cell--PaddingInlineStart);
1273
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: 0;
1269
1274
  --pf-v6-c-table__favorite--c-button--MarginBlockStart: auto;
1270
1275
  --pf-v6-c-table__favorite--c-button--MarginInlineEnd: auto;
1271
1276
  --pf-v6-c-table__favorite--c-button--MarginBlockEnd: auto;
package/css/components/Table/table.css CHANGED
@@ -7,7 +7,7 @@
7
7
  --pf-v6-c-table__caption--PaddingBlockStart: var(--pf-t--global--spacer--md);
8
8
  --pf-v6-c-table__caption--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
9
9
  --pf-v6-c-table__caption--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
- --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10
+ --pf-v6-c-table__caption--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
11
11
  --pf-v6-c-table__thead--cell--FontSize: var(--pf-t--global--font--size--body--sm);
12
12
  --pf-v6-c-table__thead--cell--FontWeight: var(--pf-t--global--font--weight--body--bold);
13
13
  --pf-v6-c-table__thead__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -25,7 +25,7 @@
25
25
  --pf-v6-c-table--cell--FontWeight: var(--pf-t--global--font--weight--body--default);
26
26
  --pf-v6-c-table--cell--LineHeight: var(--pf-t--global--font--line-height--body);
27
27
  --pf-v6-c-table--cell--Color: var(--pf-t--global--text--color--regular);
28
- --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--sm);
28
+ --pf-v6-c-table--cell--first-last-child--PaddingInline: var(--pf-t--global--spacer--inset--page-chrome);
29
29
  --pf-v6-c-table__tr--m-first-cell-offset-reset--cell--PaddingInlineStart: var(--pf-v6-c-table--cell--Padding--base);
30
30
  --pf-v6-c-table--cell--MinWidth: 0;
31
31
  --pf-v6-c-table--cell--MaxWidth: none;
@@ -254,10 +254,10 @@
254
254
  }
255
255
  }
256
256
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
257
- padding-inline-start: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingInlineStart));
257
+ padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
258
258
  }
259
259
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):last-child {
260
- padding-inline-end: calc(var(--pf-v6-c-table--cell--first-last-child--PaddingInline) + var(--pf-v6-c-table--cell--PaddingInlineEnd));
260
+ padding-inline-end: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
261
261
  }
262
262
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-center {
263
263
  text-align: center;
@@ -490,7 +490,7 @@
490
490
  .pf-v6-c-table__column-help {
491
491
  display: inline-grid;
492
492
  grid-template-columns: auto max-content;
493
- align-items: baseline;
493
+ align-items: last baseline;
494
494
  justify-content: start;
495
495
  }
496
496
  .pf-v6-c-table__button-content .pf-v6-c-table__text,
@@ -655,6 +655,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
655
655
  }
656
656
 
657
657
  .pf-v6-c-table__column-help-action {
658
+ align-self: last baseline;
658
659
  margin-inline-start: var(--pf-v6-c-table__column-help--MarginInlineStart);
659
660
  }
660
661