@patternfly/patternfly 6.6.0-prerelease.9 → 6.6.0

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 (60) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/base/patternfly-fonts.css +4 -4
  8. package/base/patternfly-fonts.scss +4 -4
  9. package/base/patternfly-variables.css +6 -6
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  12. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  13. package/base/tokens/tokens-charts.scss +1 -1
  14. package/base/tokens/tokens-dark.scss +1 -1
  15. package/base/tokens/tokens-default.scss +4 -4
  16. package/base/tokens/tokens-felt-dark.scss +1 -1
  17. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  18. package/base/tokens/tokens-felt-glass.scss +1 -1
  19. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  21. package/base/tokens/tokens-felt.scss +1 -1
  22. package/base/tokens/tokens-glass-dark.scss +1 -1
  23. package/base/tokens/tokens-glass.scss +1 -1
  24. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  25. package/base/tokens/tokens-highcontrast.scss +4 -4
  26. package/base/tokens/tokens-palette.scss +1 -1
  27. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  28. package/components/Alert/alert.css +1 -0
  29. package/components/Alert/alert.scss +1 -0
  30. package/components/Banner/banner.css +7 -0
  31. package/components/Banner/banner.scss +7 -0
  32. package/components/Button/button.css +15 -1
  33. package/components/Button/button.scss +17 -1
  34. package/components/DragDrop/drag-drop.css +4 -0
  35. package/components/DragDrop/drag-drop.scss +4 -0
  36. package/components/Page/page.css +7 -5
  37. package/components/Page/page.scss +9 -8
  38. package/components/Panel/panel.css +1 -1
  39. package/components/Panel/panel.scss +2 -2
  40. package/components/Table/table.css +26 -18
  41. package/components/Table/table.scss +37 -27
  42. package/components/_index.css +61 -25
  43. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  44. package/docs/components/Pagination/examples/Pagination.md +120 -120
  45. package/docs/components/Table/examples/Table.md +7 -0
  46. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  47. package/docs/demos/CardView/examples/CardView.md +12 -12
  48. package/docs/demos/Compass/examples/Compass.md +16 -16
  49. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  50. package/docs/demos/DataList/examples/DataList.md +48 -48
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  52. package/docs/demos/Table/examples/Table.md +160 -160
  53. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  54. package/package.json +2 -2
  55. package/patternfly-base-no-globals.css +10 -10
  56. package/patternfly-base.css +10 -10
  57. package/patternfly-no-globals.css +71 -35
  58. package/patternfly.css +71 -35
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
package/base/patternfly-fonts.css CHANGED
@@ -1,28 +1,28 @@
1
1
  @font-face {
2
2
  font-family: "Red Hat Text";
3
3
  font-style: normal;
4
- font-weight: 400 500;
4
+ font-weight: 400 600;
5
5
  src: url("./assets/fonts/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
6
6
  font-display: fallback;
7
7
  }
8
8
  @font-face {
9
9
  font-family: "Red Hat Text";
10
10
  font-style: italic;
11
- font-weight: 400 500;
11
+ font-weight: 400 600;
12
12
  src: url("./assets/fonts/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
13
13
  font-display: fallback;
14
14
  }
15
15
  @font-face {
16
16
  font-family: "Red Hat Display";
17
17
  font-style: normal;
18
- font-weight: 400 700;
18
+ font-weight: 600 800;
19
19
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
20
20
  font-display: fallback;
21
21
  }
22
22
  @font-face {
23
23
  font-family: "Red Hat Display";
24
24
  font-style: italic;
25
- font-weight: 400 700;
25
+ font-weight: 600 800;
26
26
  src: url("./assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
27
27
  font-display: fallback;
28
28
  }
package/base/patternfly-fonts.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @font-face {
4
4
  font-family: "Red Hat Text";
5
5
  font-style: normal;
6
- font-weight: 400 500;
6
+ font-weight: 400 600;
7
7
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF.woff2") format("woff2-variations");
8
8
  font-display: fallback;
9
9
  }
@@ -11,7 +11,7 @@
11
11
  @font-face {
12
12
  font-family: "Red Hat Text";
13
13
  font-style: italic;
14
- font-weight: 400 500;
14
+ font-weight: 400 600;
15
15
  src: url("#{$pf-v6-global--font-path}/RedHatText/RedHatTextVF-Italic.woff2") format("woff2-variations");
16
16
  font-display: fallback;
17
17
  }
@@ -19,7 +19,7 @@
19
19
  @font-face {
20
20
  font-family: "Red Hat Display";
21
21
  font-style: normal;
22
- font-weight: 400 700;
22
+ font-weight: 600 800;
23
23
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF.woff2") format("woff2-variations");
24
24
  font-display: fallback;
25
25
  }
@@ -27,7 +27,7 @@
27
27
  @font-face {
28
28
  font-family: "Red Hat Display";
29
29
  font-style: italic;
30
- font-weight: 400 700;
30
+ font-weight: 600 800;
31
31
  src: url("#{$pf-v6-global--font-path}/RedHatDisplay/RedHatDisplayVF-Italic.woff2") format("woff2-variations");
32
32
  font-display: fallback;
33
33
  }
package/base/patternfly-variables.css CHANGED
@@ -167,9 +167,9 @@
167
167
  --pf-t--global--font--size--700: 1.75rem;
168
168
  --pf-t--global--font--size--800: 2.25rem;
169
169
  --pf-t--global--font--weight--100: 400;
170
- --pf-t--global--font--weight--200: 500;
171
- --pf-t--global--font--weight--300: 500;
172
- --pf-t--global--font--weight--400: 700;
170
+ --pf-t--global--font--weight--200: 600;
171
+ --pf-t--global--font--weight--300: 600;
172
+ --pf-t--global--font--weight--400: 800;
173
173
  --pf-t--global--icon--size--100: 0.75rem;
174
174
  --pf-t--global--icon--size--200: 0.875rem;
175
175
  --pf-t--global--icon--size--250: 1rem;
@@ -1067,9 +1067,9 @@
1067
1067
  --pf-t--global--font--size--700: 1.75rem;
1068
1068
  --pf-t--global--font--size--800: 2.25rem;
1069
1069
  --pf-t--global--font--weight--100: 400;
1070
- --pf-t--global--font--weight--200: 500;
1071
- --pf-t--global--font--weight--300: 500;
1072
- --pf-t--global--font--weight--400: 700;
1070
+ --pf-t--global--font--weight--200: 600;
1071
+ --pf-t--global--font--weight--300: 600;
1072
+ --pf-t--global--font--weight--400: 800;
1073
1073
  --pf-t--global--icon--size--100: 0.75rem;
1074
1074
  --pf-t--global--icon--size--200: 0.875rem;
1075
1075
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
@@ -92,9 +92,9 @@
92
92
  --pf-t--global--font--size--700: 1.75rem;
93
93
  --pf-t--global--font--size--800: 2.25rem;
94
94
  --pf-t--global--font--weight--100: 400;
95
- --pf-t--global--font--weight--200: 500;
96
- --pf-t--global--font--weight--300: 500;
97
- --pf-t--global--font--weight--400: 700;
95
+ --pf-t--global--font--weight--200: 600;
96
+ --pf-t--global--font--weight--300: 600;
97
+ --pf-t--global--font--weight--400: 800;
98
98
  --pf-t--global--icon--size--100: 0.75rem;
99
99
  --pf-t--global--icon--size--200: 0.875rem;
100
100
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-felt-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (14 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-glass-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (33 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (24 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (43 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (122 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-felt.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (8 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-glass-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (19 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-glass.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  // Only tokens that differ from base theme (16 tokens)
6
6
  @mixin pf-v6-tokens {
package/base/tokens/tokens-highcontrast-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgb(0, 0, 0, 0.0000);
package/base/tokens/tokens-highcontrast.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgb(21, 21, 21, 0.4000);
@@ -75,9 +75,9 @@
75
75
  --pf-t--global--font--size--700: 1.75rem;
76
76
  --pf-t--global--font--size--800: 2.25rem;
77
77
  --pf-t--global--font--weight--100: 400;
78
- --pf-t--global--font--weight--200: 500;
79
- --pf-t--global--font--weight--300: 500;
80
- --pf-t--global--font--weight--400: 700;
78
+ --pf-t--global--font--weight--200: 600;
79
+ --pf-t--global--font--weight--300: 600;
80
+ --pf-t--global--font--weight--400: 800;
81
81
  --pf-t--global--icon--size--100: 0.75rem;
82
82
  --pf-t--global--icon--size--200: 0.875rem;
83
83
  --pf-t--global--icon--size--250: 1rem;
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Mon, 01 Jun 2026 21:26:11 GMT
3
+ // Generated on Tue, 23 Jun 2026 19:20:00 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/base/tokens/tokens-redhat-highcontrast.scss CHANGED
@@ -314,10 +314,10 @@
314
314
  --pf-t--global--font--size--sm: var(--pf-t--global--font--size--200);
315
315
  --pf-t--global--font--size--xl: var(--pf-t--global--font--size--500);
316
316
  --pf-t--global--font--size--xs: var(--pf-t--global--font--size--100);
317
- --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--200);
317
+ --pf-t--global--font--weight--body--bold: 600;
318
318
  --pf-t--global--font--weight--body--default: var(--pf-t--global--font--weight--100);
319
- --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--400);
320
- --pf-t--global--font--weight--heading--default: var(--pf-t--global--font--weight--300);
319
+ --pf-t--global--font--weight--heading--bold: 800;
320
+ --pf-t--global--font--weight--heading--default: 600;
321
321
  --pf-t--global--icon--color--100: var(--pf-t--color--gray--90);
322
322
  --pf-t--global--icon--color--150: var(--pf-t--color--gray--60);
323
323
  --pf-t--global--icon--color--200: var(--pf-t--color--gray--50);
package/components/Alert/alert.css CHANGED
@@ -152,6 +152,7 @@
152
152
 
153
153
  .pf-v6-c-alert__icon {
154
154
  grid-area: icon;
155
+ align-self: baseline;
155
156
  margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
156
157
  font-size: var(--pf-v6-c-alert__icon--FontSize);
157
158
  color: var(--pf-v6-c-alert__icon--Color);
package/components/Alert/alert.scss CHANGED
@@ -194,6 +194,7 @@
194
194
 
195
195
  .#{$alert}__icon {
196
196
  grid-area: icon;
197
+ align-self: baseline;
197
198
  margin-inline-end: var(--#{$alert}__icon--MarginInlineEnd);
198
199
  font-size: var(--#{$alert}__icon--FontSize);
199
200
  color: var(--#{$alert}__icon--Color);
package/components/Banner/banner.css CHANGED
@@ -21,7 +21,9 @@
21
21
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--Color);
22
22
  --pf-v6-c-banner--link--TextDecoration: underline;
23
23
  --pf-v6-c-banner--link--hover--Color: var(--pf-v6-c-banner--Color);
24
+ --pf-v6-c-banner--link--clicked--Color: var(--pf-v6-c-banner--Color);
24
25
  --pf-v6-c-banner--link--disabled--Color: var(--pf-t--global--text--color--disabled);
26
+ --pf-v6-c-banner--link--TextDecorationColor: currentcolor;
25
27
  --pf-v6-c-banner--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
26
28
  --pf-v6-c-banner--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md);
27
29
  --pf-v6-c-banner--m-danger--BackgroundColor: var(--pf-t--global--color--status--danger--default);
@@ -130,6 +132,7 @@
130
132
  .pf-v6-c-banner a {
131
133
  color: var(--pf-v6-c-banner--link--Color);
132
134
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
135
+ text-decoration-color: var(--pf-v6-c-banner--a--TextDecorationColor);
133
136
  }
134
137
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
135
138
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -141,7 +144,11 @@
141
144
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
142
145
  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
143
146
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
147
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-v6-c-banner--link--clicked--Color);
144
148
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
149
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
150
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
151
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-v6-c-banner--link--TextDecorationColor);
145
152
  text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
146
153
  }
147
154
  .pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled, .pf-v6-c-banner .pf-v6-c-button.pf-m-inline.pf-m-disabled {
package/components/Banner/banner.scss CHANGED
@@ -22,7 +22,9 @@
22
22
  --#{$banner}--link--Color: var(--#{$banner}--Color);
23
23
  --#{$banner}--link--TextDecoration: underline;
24
24
  --#{$banner}--link--hover--Color: var(--#{$banner}--Color);
25
+ --#{$banner}--link--clicked--Color: var(--#{$banner}--Color);
25
26
  --#{$banner}--link--disabled--Color: var(--pf-t--global--text--color--disabled);
27
+ --#{$banner}--link--TextDecorationColor: currentcolor;
26
28
 
27
29
  // modifier variables
28
30
  --#{$banner}--m-sticky--ZIndex: var(--pf-t--global--z-index--md);
@@ -154,6 +156,7 @@
154
156
  a {
155
157
  color: var(--#{$banner}--link--Color);
156
158
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
159
+ text-decoration-color: var(--#{$banner}--a--TextDecorationColor);
157
160
 
158
161
  &:hover:not(.pf-m-disabled) {
159
162
  --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
@@ -171,7 +174,11 @@
171
174
  .#{$button}.pf-m-inline {
172
175
  --#{$button}--m-link--m-inline--Color: var(--#{$banner}--link--Color);
173
176
  --#{$button}--m-link--m-inline--hover--Color: var(--#{$banner}--link--hover--Color);
177
+ --#{$button}--m-link--m-inline--m-clicked--Color: var(--#{$banner}--link--clicked--Color);
174
178
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
179
+ --#{$button}--m-link--m-inline--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
180
+ --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
181
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--#{$banner}--link--TextDecorationColor);
175
182
 
176
183
  text-decoration-line: var(--#{$banner}--link--TextDecoration);
177
184
 
package/components/Button/button.css CHANGED
@@ -126,6 +126,10 @@
126
126
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
127
127
  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
128
128
  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
129
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
130
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
131
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
132
+ --pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
129
133
  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
130
134
  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
131
135
  --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -140,6 +144,8 @@
140
144
  --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
141
145
  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
142
146
  --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
147
+ --pf-v6-c-button--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
148
+ --pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
143
149
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
144
150
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
145
151
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -512,9 +518,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
512
518
  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
513
519
  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
514
520
  --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
515
- --pf-v6-c-button--hover--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
521
+ --pf-v6-c-button--m-clicked--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationLine);
522
+ --pf-v6-c-button--m-clicked--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationStyle);
523
+ --pf-v6-c-button--m-clicked--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextDecorationColor);
524
+ --pf-v6-c-button--m-clicked--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
516
525
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
517
526
  --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
527
+ --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked--Color);
528
+ --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-inline--m-clicked__icon--Color);
518
529
  --pf-v6-c-button--BorderWidth: 0;
519
530
  --pf-v6-c-button--hover--BorderWidth: 0;
520
531
  --pf-v6-c-button--m-clicked--BorderWidth: 0;
@@ -527,6 +538,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
527
538
  .pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
528
539
  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
529
540
  }
541
+ .pf-v6-c-button.pf-m-link.pf-m-inline:active, .pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-clicked {
542
+ --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--m-clicked--TextUnderlineOffset);
543
+ }
530
544
  .pf-v6-c-button.pf-m-link.pf-m-danger {
531
545
  --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
532
546
  --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
package/components/Button/button.scss CHANGED
@@ -144,6 +144,10 @@
144
144
  --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
145
145
  --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
146
146
  --#{$button}--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
147
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
148
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
149
+ --#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
150
+ --#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
147
151
  --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
148
152
  --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
149
153
  --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
@@ -158,6 +162,8 @@
158
162
  --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
159
163
  --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
160
164
  --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
165
+ --#{$button}--m-link--m-inline--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
166
+ --#{$button}--m-link--m-inline--m-clicked__icon--Color: var(--pf-t--global--icon--color--brand--clicked);
161
167
 
162
168
  // Plain
163
169
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
@@ -588,9 +594,14 @@
588
594
  --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
589
595
  --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
590
596
  --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
591
- --#{$button}--hover--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
597
+ --#{$button}--m-clicked--TextDecorationLine: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationLine);
598
+ --#{$button}--m-clicked--TextDecorationStyle: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationStyle);
599
+ --#{$button}--m-clicked--TextDecorationColor: var(--#{$button}--m-link--m-inline--m-clicked--TextDecorationColor);
600
+ --#{$button}--m-clicked--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
592
601
  --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
593
602
  --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
603
+ --#{$button}--m-link--m-clicked--Color: var(--#{$button}--m-link--m-inline--m-clicked--Color);
604
+ --#{$button}--m-link--m-clicked__icon--Color: var(--#{$button}--m-link--m-inline--m-clicked__icon--Color);
594
605
  --#{$button}--BorderWidth: 0;
595
606
  --#{$button}--hover--BorderWidth: 0;
596
607
  --#{$button}--m-clicked--BorderWidth: 0;
@@ -605,6 +616,11 @@
605
616
  &:focus {
606
617
  --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
607
618
  }
619
+
620
+ &:active,
621
+ &.pf-m-clicked {
622
+ --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--m-clicked--TextUnderlineOffset);
623
+ }
608
624
  }
609
625
 
610
626
  &.pf-m-danger {
package/components/DragDrop/drag-drop.css CHANGED
@@ -3,6 +3,7 @@
3
3
  --pf-v6-c-draggable--m-dragging--Cursor: grabbing;
4
4
  --pf-v6-c-draggable--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
5
5
  --pf-v6-c-draggable--m-dragging--BackgroundColor: transparent;
6
+ --pf-v6-c-draggable--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
6
7
  --pf-v6-c-draggable--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
7
8
  --pf-v6-c-draggable--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
8
9
  --pf-v6-c-draggable--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -17,6 +18,7 @@
17
18
  --pf-v6-c-draggable--Cursor: var(--pf-v6-c-draggable--m-dragging--Cursor);
18
19
  position: relative;
19
20
  background-color: var(--pf-v6-c-draggable--m-dragging--BackgroundColor);
21
+ border-radius: var(--pf-v6-c-draggable--m-dragging--BorderRadius);
20
22
  box-shadow: var(--pf-v6-c-draggable--m-dragging--BoxShadow);
21
23
  }
22
24
  .pf-v6-c-draggable.pf-m-dragging::after {
@@ -36,6 +38,7 @@
36
38
 
37
39
  .pf-v6-c-droppable {
38
40
  --pf-v6-c-droppable--before--BackgroundColor: transparent;
41
+ --pf-v6-c-droppable--before--BorderRadius: var(--pf-t--global--border--radius--small);
39
42
  --pf-v6-c-droppable--before--Opacity: 0;
40
43
  --pf-v6-c-droppable--after--BorderWidth: 0;
41
44
  --pf-v6-c-droppable--after--BorderColor: transparent;
@@ -58,6 +61,7 @@
58
61
  }
59
62
  .pf-v6-c-droppable::before {
60
63
  background-color: var(--pf-v6-c-droppable--before--BackgroundColor);
64
+ border-radius: var(--pf-v6-c-droppable--before--BorderRadius);
61
65
  opacity: var(--pf-v6-c-droppable--before--Opacity);
62
66
  }
63
67
  .pf-v6-c-droppable::after {
package/components/DragDrop/drag-drop.scss CHANGED
@@ -5,6 +5,7 @@
5
5
  --#{$draggable}--m-dragging--Cursor: grabbing;
6
6
  --#{$draggable}--m-dragging--BoxShadow: var(--pf-t--global--box-shadow--md);
7
7
  --#{$draggable}--m-dragging--BackgroundColor: transparent;
8
+ --#{$draggable}--m-dragging--BorderRadius: var(--pf-t--global--border--radius--small);
8
9
  --#{$draggable}--m-dragging--after--BorderWidth: var(--pf-t--global--border--width--regular);
9
10
  --#{$draggable}--m-dragging--after--BorderColor: var(--pf-t--global--border--color--brand--default);
10
11
  --#{$draggable}--m-dragging--after--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -20,6 +21,7 @@
20
21
 
21
22
  position: relative;
22
23
  background-color: var(--#{$draggable}--m-dragging--BackgroundColor);
24
+ border-radius: var(--#{$draggable}--m-dragging--BorderRadius);
23
25
  box-shadow: var(--#{$draggable}--m-dragging--BoxShadow);
24
26
 
25
27
  &::after {
@@ -42,6 +44,7 @@
42
44
 
43
45
  @include pf-root($droppable) {
44
46
  --#{$droppable}--before--BackgroundColor: transparent;
47
+ --#{$droppable}--before--BorderRadius: var(--pf-t--global--border--radius--small);
45
48
  --#{$droppable}--before--Opacity: 0;
46
49
  --#{$droppable}--after--BorderWidth: 0;
47
50
  --#{$droppable}--after--BorderColor: transparent;
@@ -67,6 +70,7 @@
67
70
 
68
71
  &::before {
69
72
  background-color: var(--#{$droppable}--before--BackgroundColor);
73
+ border-radius: var(--#{$droppable}--before--BorderRadius);
70
74
  opacity: var(--#{$droppable}--before--Opacity);
71
75
  }
72
76
 
package/components/Page/page.css CHANGED
@@ -14,11 +14,12 @@
14
14
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
15
15
  --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
16
16
  --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
17
- --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
17
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
19
- --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
19
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
20
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
20
21
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
21
- --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
22
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
22
23
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
23
24
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
25
  --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
@@ -414,8 +415,6 @@
414
415
  }
415
416
  @media (min-width: 62rem) {
416
417
  .pf-v6-c-page__dock {
417
- --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
418
- --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
419
418
  position: revert;
420
419
  inset: revert;
421
420
  visibility: revert;
@@ -443,6 +442,9 @@
443
442
  }
444
443
  @media (min-width: 62rem) {
445
444
  .pf-v6-c-page__dock-main {
445
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndWidth);
446
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
447
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
446
448
  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
447
449
  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
448
450
  --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
package/components/Page/page.scss CHANGED
@@ -27,11 +27,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
27
27
  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
28
28
  --#{$page}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
29
29
  --#{$page}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
30
- --#{$page}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
30
+ --#{$page}__dock-main--BorderInlineEndWidth: 0;
31
31
  --#{$page}__dock-main--BorderInlineEndColor: transparent;
32
- --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
32
+ --#{$page}__dock-main--desktop--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
33
+ --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
33
34
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
34
- --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
35
+ --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: transparent;
35
36
 
36
37
  // Docked nav
37
38
  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
@@ -285,7 +286,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
285
286
  --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
286
287
  --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
287
288
  --#{$page}--m-dock__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight--glass);
288
- --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
289
+ --#{$page}--m-dock__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart--glass);
289
290
  }
290
291
 
291
292
  @media (min-width: $pf-v6-global--breakpoint--xl) {
@@ -447,9 +448,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
447
448
  }
448
449
 
449
450
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
450
- --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
451
- --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
452
-
453
451
  position: revert;
454
452
  inset: revert;
455
453
  visibility: revert;
@@ -479,6 +477,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
479
477
  }
480
478
 
481
479
  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
480
+ --#{$page}__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--desktop--BorderInlineEndWidth);
481
+ --#{$page}__dock-main--BackgroundColor: var(--#{$page}__dock-main--desktop--BackgroundColor);
482
+ --#{$page}__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
482
483
  --#{$page}__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
483
484
  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
484
485
  --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--BorderInlineEndWidth);
@@ -975,4 +976,4 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
975
976
  flex-grow: 1;
976
977
  }
977
978
  }
978
- }
979
+ }