@patternfly/react-styles 6.1.0-prerelease.4 → 6.1.0-prerelease.5

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 (13) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/css/components/Button/button.css +18 -2
  3. package/css/components/Label/label.css +4 -1
  4. package/css/components/Menu/menu.css +7 -3
  5. package/css/components/MenuToggle/menu-toggle.css +24 -4
  6. package/css/components/Page/page.css +4 -1
  7. package/css/components/Table/table.css +3 -0
  8. package/css/components/_index.css +60 -11
  9. package/css/docs/components/Page/examples/Page.css +1 -1
  10. package/css/docs/components/Page/examples/Page.d.ts +1 -2
  11. package/css/docs/components/Page/examples/Page.js +1 -2
  12. package/css/docs/components/Page/examples/Page.mjs +1 -2
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.1.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.1.0-prerelease.4...@patternfly/react-styles@6.1.0-prerelease.5) (2024-12-04)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
6
10
  # [6.1.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.1.0-prerelease.3...@patternfly/react-styles@6.1.0-prerelease.4) (2024-11-25)
7
11
 
8
12
  **Note:** Version bump only for package @patternfly/react-styles
package/css/components/Button/button.css CHANGED
@@ -79,6 +79,8 @@
79
79
  --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
80
80
  --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
81
81
  --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
82
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
83
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
82
84
  --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
83
85
  --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
84
86
  --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -128,6 +130,8 @@
128
130
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
129
131
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
130
132
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
133
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
134
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
131
135
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
132
136
  --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
133
137
  --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -152,9 +156,13 @@
152
156
  --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
153
157
  --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
154
158
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
159
+ --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
160
+ --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
155
161
  --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
156
162
  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
157
163
  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
164
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
165
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
158
166
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
159
167
  --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
160
168
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -342,6 +350,8 @@
342
350
  --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
343
351
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
344
352
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
353
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
354
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
345
355
  }
346
356
  .pf-v6-c-button.pf-m-link.pf-m-inline {
347
357
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
@@ -429,11 +439,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
429
439
  --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
430
440
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
431
441
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
442
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
443
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
432
444
  }
433
445
  .pf-v6-c-button.pf-m-stateful {
434
446
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
435
447
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
436
448
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
449
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
450
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
437
451
  }
438
452
  .pf-v6-c-button.pf-m-read {
439
453
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
@@ -490,8 +504,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
490
504
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
491
505
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
492
506
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
493
- --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
494
- --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
507
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
508
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
509
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
510
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
495
511
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
496
512
  }
497
513
  .pf-v6-c-button.pf-m-block {
package/css/components/Label/label.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
5
5
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
6
6
  --pf-v6-c-label--MaxWidth: 100%;
7
- --pf-v6-c-label--MinWidth: 3em;
7
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
8
8
  --pf-v6-c-label--BorderWidth: 0;
9
9
  --pf-v6-c-label--BorderColor: transparent;
10
10
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -161,6 +161,7 @@
161
161
  --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
162
162
  --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
163
163
  --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
164
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
164
165
  --pf-v6-c-label__content--MaxWidth: 100%;
165
166
  --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
166
167
  --pf-v6-c-label__content--Cursor: initial;
@@ -353,6 +354,7 @@
353
354
  --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
354
355
  --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
355
356
  --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
357
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
356
358
  --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
357
359
  }
358
360
  .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -441,6 +443,7 @@
441
443
  .pf-v6-c-label__content {
442
444
  display: inline-flex;
443
445
  align-items: center;
446
+ justify-content: center;
444
447
  }
445
448
 
446
449
  .pf-v6-c-label__text {
package/css/components/Menu/menu.css CHANGED
@@ -68,7 +68,6 @@
68
68
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
69
69
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
70
70
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
71
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
72
71
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
73
72
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
74
73
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -554,8 +553,13 @@
554
553
  .pf-v6-c-menu__item-action.pf-m-favorited,
555
554
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
556
555
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
557
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
558
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
556
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
557
+ }
558
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
559
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
560
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
561
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
562
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
559
563
  }
560
564
 
561
565
  .pf-v6-c-menu__breadcrumb {
package/css/components/MenuToggle/menu-toggle.css CHANGED
@@ -50,6 +50,8 @@
50
50
  --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
51
51
  --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
52
52
  --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
53
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
54
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
53
55
  --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
54
56
  --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
55
57
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
@@ -64,6 +66,8 @@
64
66
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
65
67
  --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
66
68
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
69
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
70
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
67
71
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
68
72
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
69
73
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -74,6 +78,8 @@
74
78
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
75
79
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
76
80
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
81
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
82
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
77
83
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
78
84
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
79
85
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
@@ -88,6 +94,8 @@
88
94
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
89
95
  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
90
96
  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
97
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
98
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
91
99
  --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
92
100
  --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
93
101
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -99,6 +107,8 @@
99
107
  --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
100
108
  --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
101
109
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
110
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
111
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
102
112
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
103
113
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
104
114
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -168,6 +178,8 @@
168
178
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
169
179
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
170
180
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
181
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
182
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
171
183
  }
172
184
  .pf-v6-c-menu-toggle.pf-m-secondary {
173
185
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -183,6 +195,8 @@
183
195
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
184
196
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
185
197
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
198
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
199
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
186
200
  }
187
201
  .pf-v6-c-menu-toggle.pf-m-full-height {
188
202
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -207,6 +221,8 @@
207
221
  --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
208
222
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
209
223
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
224
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
225
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
210
226
  }
211
227
  .pf-v6-c-menu-toggle.pf-m-plain::before {
212
228
  border: none;
@@ -233,6 +249,10 @@
233
249
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
234
250
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
235
251
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
252
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
253
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
254
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
255
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
236
256
  }
237
257
  .pf-v6-c-menu-toggle.pf-m-success {
238
258
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
@@ -311,13 +331,13 @@
311
331
  .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
312
332
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
313
333
  }
314
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
315
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
334
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
335
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
316
336
  .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
317
337
  padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
318
338
  }
319
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
320
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
339
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
340
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
321
341
  .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
322
342
  padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
323
343
  }
package/css/components/Page/page.css CHANGED
@@ -4,7 +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
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
8
8
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
9
  --pf-v6-c-page__sidebar--BoxShadow: none;
10
10
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -193,18 +193,21 @@
193
193
  flex-grow: 0;
194
194
  }
195
195
 
196
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
196
197
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
197
198
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
198
199
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
199
200
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
200
201
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
201
202
  }
203
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
202
204
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
203
205
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
204
206
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
205
207
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
206
208
  align-items: center;
207
209
  }
210
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
208
211
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
209
212
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
210
213
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
package/css/components/Table/table.css CHANGED
@@ -308,6 +308,9 @@
308
308
  --pf-v6-c-table--cell--TextOverflow: ellipsis;
309
309
  --pf-v6-c-table--cell--WhiteSpace: nowrap;
310
310
  }
311
+ .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
312
+ margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
313
+ }
311
314
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
312
315
  outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
313
316
  }
package/css/components/_index.css CHANGED
@@ -1471,6 +1471,8 @@ button.pf-v6-c-breadcrumb__link {
1471
1471
  --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
1472
1472
  --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
1473
1473
  --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
1474
+ --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1475
+ --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
1474
1476
  --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
1475
1477
  --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
1476
1478
  --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -1520,6 +1522,8 @@ button.pf-v6-c-breadcrumb__link {
1520
1522
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
1521
1523
  --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
1522
1524
  --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
1525
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
1526
+ --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
1523
1527
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
1524
1528
  --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
1525
1529
  --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -1544,9 +1548,13 @@ button.pf-v6-c-breadcrumb__link {
1544
1548
  --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
1545
1549
  --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
1546
1550
  --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
1551
+ --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1552
+ --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1547
1553
  --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
1548
1554
  --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
1549
1555
  --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
1556
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
1557
+ --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
1550
1558
  --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
1551
1559
  --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
1552
1560
  --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -1734,6 +1742,8 @@ button.pf-v6-c-breadcrumb__link {
1734
1742
  --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
1735
1743
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
1736
1744
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
1745
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
1746
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
1737
1747
  }
1738
1748
  .pf-v6-c-button.pf-m-link.pf-m-inline {
1739
1749
  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
@@ -1821,11 +1831,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1821
1831
  --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
1822
1832
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
1823
1833
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
1834
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
1835
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
1824
1836
  }
1825
1837
  .pf-v6-c-button.pf-m-stateful {
1826
1838
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
1827
1839
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
1828
1840
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
1841
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
1842
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
1829
1843
  }
1830
1844
  .pf-v6-c-button.pf-m-read {
1831
1845
  --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
@@ -1882,8 +1896,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
1882
1896
  --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
1883
1897
  --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
1884
1898
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
1885
- --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
1886
- --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
1899
+ --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
1900
+ --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
1901
+ --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
1902
+ --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
1887
1903
  min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
1888
1904
  }
1889
1905
  .pf-v6-c-button.pf-m-block {
@@ -7866,7 +7882,7 @@ label.pf-v6-c-input-group__text {
7866
7882
  --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
7867
7883
  --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
7868
7884
  --pf-v6-c-label--MaxWidth: 100%;
7869
- --pf-v6-c-label--MinWidth: 3em;
7885
+ --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
7870
7886
  --pf-v6-c-label--BorderWidth: 0;
7871
7887
  --pf-v6-c-label--BorderColor: transparent;
7872
7888
  --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -8023,6 +8039,7 @@ label.pf-v6-c-input-group__text {
8023
8039
  --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
8024
8040
  --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
8025
8041
  --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
8042
+ --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
8026
8043
  --pf-v6-c-label__content--MaxWidth: 100%;
8027
8044
  --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
8028
8045
  --pf-v6-c-label__content--Cursor: initial;
@@ -8215,6 +8232,7 @@ label.pf-v6-c-input-group__text {
8215
8232
  --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
8216
8233
  --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
8217
8234
  --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
8235
+ --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
8218
8236
  --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
8219
8237
  }
8220
8238
  .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -8303,6 +8321,7 @@ label.pf-v6-c-input-group__text {
8303
8321
  .pf-v6-c-label__content {
8304
8322
  display: inline-flex;
8305
8323
  align-items: center;
8324
+ justify-content: center;
8306
8325
  }
8307
8326
 
8308
8327
  .pf-v6-c-label__text {
@@ -9431,7 +9450,6 @@ ul.pf-v6-c-list {
9431
9450
  --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
9432
9451
  --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
9433
9452
  --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
9434
- --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
9435
9453
  --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
9436
9454
  --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
9437
9455
  --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -9917,8 +9935,13 @@ ul.pf-v6-c-list {
9917
9935
  .pf-v6-c-menu__item-action.pf-m-favorited,
9918
9936
  .pf-v6-c-menu__item-action.pf-m-favorited:hover,
9919
9937
  .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
9920
- --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9921
- --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9938
+ --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9939
+ }
9940
+ .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
9941
+ .pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
9942
+ .pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
9943
+ .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
9944
+ --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
9922
9945
  }
9923
9946
 
9924
9947
  .pf-v6-c-menu__breadcrumb {
@@ -9994,6 +10017,8 @@ ul.pf-v6-c-list {
9994
10017
  --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
9995
10018
  --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
9996
10019
  --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
10020
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
10021
+ --pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
9997
10022
  --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
9998
10023
  --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
9999
10024
  --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
@@ -10008,6 +10033,8 @@ ul.pf-v6-c-list {
10008
10033
  --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
10009
10034
  --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
10010
10035
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
10036
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
10037
+ --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
10011
10038
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
10012
10039
  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
10013
10040
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -10018,6 +10045,8 @@ ul.pf-v6-c-list {
10018
10045
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
10019
10046
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
10020
10047
  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
10048
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--compact);
10049
+ --pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--compact);
10021
10050
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
10022
10051
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
10023
10052
  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
@@ -10032,6 +10061,8 @@ ul.pf-v6-c-list {
10032
10061
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10033
10062
  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
10034
10063
  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
10064
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
10065
+ --pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
10035
10066
  --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
10036
10067
  --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
10037
10068
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -10043,6 +10074,8 @@ ul.pf-v6-c-list {
10043
10074
  --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
10044
10075
  --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
10045
10076
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
10077
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
10078
+ --pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
10046
10079
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
10047
10080
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
10048
10081
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
@@ -10112,6 +10145,8 @@ ul.pf-v6-c-list {
10112
10145
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color);
10113
10146
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
10114
10147
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary__toggle-icon--Color);
10148
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineStart);
10149
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--m-small--PaddingInlineEnd);
10115
10150
  }
10116
10151
  .pf-v6-c-menu-toggle.pf-m-secondary {
10117
10152
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
@@ -10127,6 +10162,8 @@ ul.pf-v6-c-list {
10127
10162
  --pf-v6-c-menu-toggle--hover__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color);
10128
10163
  --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
10129
10164
  --pf-v6-c-menu-toggle__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color);
10165
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineStart);
10166
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd);
10130
10167
  }
10131
10168
  .pf-v6-c-menu-toggle.pf-m-full-height {
10132
10169
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
@@ -10151,6 +10188,8 @@ ul.pf-v6-c-list {
10151
10188
  --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
10152
10189
  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
10153
10190
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
10191
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineStart);
10192
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--m-small--PaddingInlineEnd);
10154
10193
  }
10155
10194
  .pf-v6-c-menu-toggle.pf-m-plain::before {
10156
10195
  border: none;
@@ -10177,6 +10216,10 @@ ul.pf-v6-c-list {
10177
10216
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
10178
10217
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
10179
10218
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
10219
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineStart);
10220
+ --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small__button--toggle-icon--PaddingInlineEnd);
10221
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineStart--offset);
10222
+ --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-v6-c-menu-toggle--m-split-button--m-small--pill--child--PaddingInlineEnd--offset);
10180
10223
  }
10181
10224
  .pf-v6-c-menu-toggle.pf-m-success {
10182
10225
  --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
@@ -10255,13 +10298,13 @@ ul.pf-v6-c-list {
10255
10298
  .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
10256
10299
  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
10257
10300
  }
10258
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
10259
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
10301
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
10302
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):first-child,
10260
10303
  .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
10261
10304
  padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
10262
10305
  }
10263
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
10264
- .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
10306
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
10307
+ .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__controls:only-child)):last-child,
10265
10308
  .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
10266
10309
  padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
10267
10310
  }
@@ -11395,7 +11438,7 @@ ul.pf-v6-c-list {
11395
11438
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
11396
11439
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
11397
11440
  --pf-v6-c-page__sidebar--Width: 18.125rem;
11398
- --pf-v6-c-page__sidebar--xl--Width: auto;
11441
+ --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
11399
11442
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11400
11443
  --pf-v6-c-page__sidebar--BoxShadow: none;
11401
11444
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -11584,18 +11627,21 @@ ul.pf-v6-c-list {
11584
11627
  flex-grow: 0;
11585
11628
  }
11586
11629
 
11630
+ .pf-v6-c-page__main-subnav.pf-m-limit-width > .pf-v6-c-page__main-body,
11587
11631
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width > .pf-v6-c-page__main-body,
11588
11632
  .pf-v6-c-page__main-tabs.pf-m-limit-width > .pf-v6-c-page__main-body,
11589
11633
  .pf-v6-c-page__main-section.pf-m-limit-width > .pf-v6-c-page__main-body,
11590
11634
  .pf-v6-c-page__main-wizard.pf-m-limit-width > .pf-v6-c-page__main-body {
11591
11635
  max-width: var(--pf-v6-c-page--section--m-limit-width--MaxWidth);
11592
11636
  }
11637
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center,
11593
11638
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center,
11594
11639
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center,
11595
11640
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center,
11596
11641
  .pf-v6-c-page__main-wizard.pf-m-limit-width.pf-m-align-center {
11597
11642
  align-items: center;
11598
11643
  }
11644
+ .pf-v6-c-page__main-subnav.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11599
11645
  .pf-v6-c-page__main-breadcrumb.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11600
11646
  .pf-v6-c-page__main-tabs.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
11601
11647
  .pf-v6-c-page__main-section.pf-m-limit-width.pf-m-align-center > .pf-v6-c-page__main-body,
@@ -16489,6 +16535,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16489
16535
  --pf-v6-c-table--cell--TextOverflow: ellipsis;
16490
16536
  --pf-v6-c-table--cell--WhiteSpace: nowrap;
16491
16537
  }
16538
+ .pf-v6-c-table thead:where(.pf-v6-c-table__thead) .pf-v6-c-table__sort .pf-v6-c-table__button {
16539
+ margin-block-end: calc(var(--pf-v6-c-table__button--PaddingBlockEnd) * -1);
16540
+ }
16492
16541
  .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
16493
16542
  outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
16494
16543
  }
package/css/docs/components/Page/examples/Page.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /* Because the page component has height:100dvh, override it just for the embedded examples */
2
- .ws-mdx-content-content [id^=ws-core-c-page-] .pf-v6-c-page {
2
+ #ws-page-main [id^=ws-core-c-page-] .pf-v6-c-page {
3
3
  height: min-content;
4
4
  min-height: 30em;
5
5
  }
package/css/docs/components/Page/examples/Page.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import './Page.css';
2
2
  declare const _default: {
3
- "page": "pf-v6-c-page",
4
- "wsMdxContentContent": "ws-mdx-content-content"
3
+ "page": "pf-v6-c-page"
5
4
  };
6
5
  export default _default;
package/css/docs/components/Page/examples/Page.js CHANGED
@@ -2,6 +2,5 @@
2
2
  exports.__esModule = true;
3
3
  require('./Page.css');
4
4
  exports.default = {
5
- "page": "pf-v6-c-page",
6
- "wsMdxContentContent": "ws-mdx-content-content"
5
+ "page": "pf-v6-c-page"
7
6
  };
package/css/docs/components/Page/examples/Page.mjs CHANGED
@@ -1,5 +1,4 @@
1
1
  import './Page.css';
2
2
  export default {
3
- "page": "pf-v6-c-page",
4
- "wsMdxContentContent": "ws-mdx-content-content"
3
+ "page": "pf-v6-c-page"
5
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.1.0-prerelease.4",
3
+ "version": "6.1.0-prerelease.5",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.1.0-prerelease.6",
22
+ "@patternfly/patternfly": "6.1.0-prerelease.11",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.2.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "b0877b3cf7898cd134c56ba91ba251a8f4301225"
27
+ "gitHead": "c1ab963828ff4dbd92ac3047453ef242a56c16ee"
28
28
  }