@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.3

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 (71) hide show
  1. package/assets/pficon/pficon.scss +1 -1
  2. package/base/normalize.scss +2 -2
  3. package/base/patternfly-pf-icons.css +1 -1
  4. package/components/Banner/banner.css +2 -2
  5. package/components/Banner/banner.scss +2 -2
  6. package/components/Breadcrumb/breadcrumb.css +3 -2
  7. package/components/Breadcrumb/breadcrumb.scss +3 -2
  8. package/components/Button/button.css +22 -2
  9. package/components/Button/button.scss +22 -2
  10. package/components/Content/content.css +2 -1
  11. package/components/Content/content.scss +2 -1
  12. package/components/DescriptionList/description-list.css +2 -1
  13. package/components/DescriptionList/description-list.scss +2 -1
  14. package/components/Form/form.css +0 -3
  15. package/components/Form/form.scss +0 -4
  16. package/components/JumpLinks/jump-links.css +1 -1
  17. package/components/JumpLinks/jump-links.scss +1 -1
  18. package/components/Label/label.css +3 -2
  19. package/components/Label/label.scss +3 -2
  20. package/components/Menu/menu.css +11 -2
  21. package/components/Menu/menu.scss +12 -2
  22. package/components/Nav/nav.css +1 -1
  23. package/components/Nav/nav.scss +1 -1
  24. package/components/ProgressStepper/progress-stepper.css +2 -1
  25. package/components/ProgressStepper/progress-stepper.scss +2 -1
  26. package/components/SimpleList/simple-list.css +2 -2
  27. package/components/SimpleList/simple-list.scss +2 -2
  28. package/components/Tabs/tabs.css +1 -1
  29. package/components/Tabs/tabs.scss +1 -1
  30. package/components/Timestamp/timestamp.css +2 -1
  31. package/components/Timestamp/timestamp.scss +2 -1
  32. package/components/ToggleGroup/toggle-group.css +1 -1
  33. package/components/ToggleGroup/toggle-group.scss +1 -1
  34. package/components/Wizard/wizard.css +1 -1
  35. package/components/Wizard/wizard.scss +1 -1
  36. package/components/_index.css +56 -24
  37. package/docs/components/Avatar/examples/Avatar.md +4 -4
  38. package/docs/components/Brand/examples/Brand.md +2 -2
  39. package/docs/components/DataList/examples/DataList.md +3 -3
  40. package/docs/components/DescriptionList/examples/DescriptionList.md +2 -2
  41. package/docs/components/Divider/examples/Divider.md +2 -2
  42. package/docs/components/Drawer/examples/Drawer.md +3 -3
  43. package/docs/components/JumpLinks/examples/JumpLinks.md +2 -2
  44. package/docs/components/Masthead/examples/masthead.md +1 -1
  45. package/docs/components/Menu/examples/Menu.md +2 -2
  46. package/docs/components/Page/examples/Page.md +2 -2
  47. package/docs/components/Pagination/examples/Pagination.md +3 -3
  48. package/docs/components/ProgressStepper/examples/ProgressStepper.md +2 -2
  49. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  50. package/docs/components/Table/examples/Table.md +3 -3
  51. package/docs/components/Tabs/examples/Tabs.md +3 -3
  52. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  53. package/docs/layouts/Flex/examples/Flex.md +1 -1
  54. package/docs/layouts/Gallery/examples/Gallery.md +2 -2
  55. package/docs/layouts/Grid/examples/Grid.md +4 -4
  56. package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
  57. package/docs/utilities/Alignment/examples/Alignment.md +1 -1
  58. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
  59. package/docs/utilities/Display/examples/Display.md +1 -1
  60. package/docs/utilities/Flex/examples/Flex.md +1 -1
  61. package/docs/utilities/Float/examples/Float.md +1 -1
  62. package/docs/utilities/Sizing/examples/Sizing.md +6 -6
  63. package/docs/utilities/Spacing/examples/Spacing.md +1 -1
  64. package/docs/utilities/Text/examples/Text.md +1 -1
  65. package/package.json +2 -2
  66. package/patternfly-base-no-globals.css +1 -1
  67. package/patternfly-base.css +3 -3
  68. package/patternfly-no-globals.css +57 -25
  69. package/patternfly.css +59 -27
  70. package/patternfly.min.css +1 -1
  71. package/patternfly.min.css.map +1 -1
@@ -14,7 +14,7 @@
14
14
  font-variant: normal;
15
15
  font-weight: normal;
16
16
  // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
17
- text-decoration: none;
17
+ text-decoration-line: none;
18
18
  text-transform: none;
19
19
  }
20
20
 
@@ -107,12 +107,12 @@
107
107
 
108
108
  :where(a) {
109
109
  color: var(--pf-t--global--text--color--link--default);
110
- text-decoration: var(--pf-t--global--text-decoration--link--line--default);
110
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
111
111
  }
112
112
 
113
113
  :where(a:hover, a:focus) {
114
114
  color: var(--pf-t--global--text--color--link--hover);
115
- text-decoration: var(--pf-t--global--text-decoration--link--line--hover);
115
+ text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
116
116
  }
117
117
 
118
118
  :where(
@@ -9,7 +9,7 @@
9
9
  font-style: normal;
10
10
  font-variant: normal;
11
11
  font-weight: normal;
12
- text-decoration: none;
12
+ text-decoration-line: none;
13
13
  text-transform: none;
14
14
  }
15
15
 
@@ -119,7 +119,7 @@
119
119
  }
120
120
  .pf-v6-c-banner a {
121
121
  color: var(--pf-v6-c-banner--link--Color);
122
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
122
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
123
123
  }
124
124
  .pf-v6-c-banner a:hover:not(.pf-m-disabled) {
125
125
  --pf-v6-c-banner--link--Color: var(--pf-v6-c-banner--link--hover--Color);
@@ -132,7 +132,7 @@
132
132
  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
133
133
  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
134
134
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
135
- text-decoration: var(--pf-v6-c-banner--link--TextDecoration);
135
+ text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
136
136
  }
137
137
  .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 {
138
138
  cursor: not-allowed;
@@ -142,7 +142,7 @@
142
142
 
143
143
  a {
144
144
  color: var(--#{$banner}--link--Color);
145
- text-decoration: var(--#{$banner}--link--TextDecoration);
145
+ text-decoration-line: var(--#{$banner}--link--TextDecoration);
146
146
 
147
147
  &:hover:not(.pf-m-disabled) {
148
148
  --#{$banner}--link--Color: var(--#{$banner}--link--hover--Color);
@@ -162,7 +162,7 @@
162
162
  --#{$button}--m-link--hover--Color: var(--#{$banner}--link--hover--Color);
163
163
  --#{$button}--disabled--Color: var(--#{$banner}--link--disabled--Color);
164
164
 
165
- text-decoration: var(--#{$banner}--link--TextDecoration);
165
+ text-decoration-line: var(--#{$banner}--link--TextDecoration);
166
166
 
167
167
  &:disabled,
168
168
  &.pf-m-disabled {
@@ -65,7 +65,8 @@
65
65
  font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
66
66
  line-height: inherit;
67
67
  color: var(--pf-v6-c-breadcrumb__link--Color);
68
- text-decoration: var(--pf-v6-c-breadcrumb__link--TextDecorationLine) var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
68
+ text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
69
+ text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
69
70
  word-break: break-word;
70
71
  background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
71
72
  }
@@ -79,7 +80,7 @@
79
80
  }
80
81
  .pf-v6-c-breadcrumb__link.pf-m-current, .pf-v6-c-breadcrumb__link.pf-m-current:is(:hover, :focus) {
81
82
  color: var(--pf-v6-c-breadcrumb__link--m-current--Color);
82
- text-decoration: none;
83
+ text-decoration-line: none;
83
84
  }
84
85
  button.pf-v6-c-breadcrumb__link {
85
86
  border: none;
@@ -81,7 +81,8 @@
81
81
  font-weight: var(--#{$breadcrumb}__link--FontWeight);
82
82
  line-height: inherit;
83
83
  color: var(--#{$breadcrumb}__link--Color);
84
- text-decoration: var(--#{$breadcrumb}__link--TextDecorationLine) var(--#{$breadcrumb}__link--TextDecorationStyle);
84
+ text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
85
+ text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
85
86
  word-break: break-word;
86
87
  background-color: var(--#{$breadcrumb}__link--BackgroundColor);
87
88
 
@@ -99,7 +100,7 @@
99
100
  &,
100
101
  &:is(:hover, :focus) {
101
102
  color: var(--#{$breadcrumb}__link--m-current--Color);
102
- text-decoration: none;
103
+ text-decoration-line: none;
103
104
  }
104
105
  }
105
106
 
@@ -18,6 +18,7 @@
18
18
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
19
19
  --pf-v6-c-button--TextDecorationLine: none;
20
20
  --pf-v6-c-button--TextDecorationStyle: none;
21
+ --pf-v6-c-button--TextDecorationColor: currentcolor;
21
22
  --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
22
23
  --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
23
24
  --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -26,6 +27,7 @@
26
27
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
27
28
  --pf-v6-c-button--hover--TextDecorationLine: none;
28
29
  --pf-v6-c-button--hover--TextDecorationStyle: none;
30
+ --pf-v6-c-button--hover--TextDecorationColor: currentcolor;
29
31
  --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
30
32
  --pf-v6-c-button--m-clicked--BorderColor: transparent;
31
33
  --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-t--global--border--width--action--clicked);
@@ -110,6 +112,12 @@
110
112
  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
111
113
  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
112
114
  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
115
+ --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
116
+ --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
117
+ --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
118
+ --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
119
+ --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
120
+ --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
113
121
  --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
114
122
  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
115
123
  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -217,6 +225,7 @@
217
225
  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--compact);
218
226
  --pf-v6-c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
219
227
  --pf-v6-c-button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
228
+ --pf-v6-c-button--disabled--TextDecorationColor: currentcolor;
220
229
  --pf-v6-c-button--disabled--BorderColor: transparent;
221
230
  --pf-v6-c-button--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
222
231
  --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -261,7 +270,9 @@
261
270
  line-height: var(--pf-v6-c-button--LineHeight, inherit);
262
271
  color: var(--pf-v6-c-button--Color);
263
272
  text-align: center;
264
- text-decoration: var(--pf-v6-c-button--TextDecorationLine) var(--pf-v6-c-button--TextDecorationStyle);
273
+ text-decoration-line: var(--pf-v6-c-button--TextDecorationLine);
274
+ text-decoration-style: var(--pf-v6-c-button--TextDecorationStyle);
275
+ text-decoration-color: var(--pf-v6-c-button--TextDecorationColor);
265
276
  white-space: nowrap;
266
277
  cursor: pointer;
267
278
  user-select: none;
@@ -374,6 +385,12 @@
374
385
  --pf-v6-c-button--disabled--BackgroundColor: transparent;
375
386
  --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
376
387
  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
388
+ --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
389
+ --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
390
+ --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
391
+ --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
392
+ --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
393
+ --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
377
394
  text-align: start;
378
395
  white-space: normal;
379
396
  outline-offset: 0.125rem;
@@ -534,7 +551,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
534
551
  --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
535
552
  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
536
553
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
537
- text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
554
+ text-decoration-line: var(--pf-v6-c-button--hover--TextDecorationLine);
555
+ text-decoration-style: var(--pf-v6-c-button--hover--TextDecorationStyle);
556
+ text-decoration-color: var(--pf-v6-c-button--hover--TextDecorationColor);
538
557
  }
539
558
  .pf-v6-c-button.pf-m-clicked {
540
559
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-clicked--Color);
@@ -548,6 +567,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
548
567
  }
549
568
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
550
569
  color: var(--pf-v6-c-button--disabled--Color);
570
+ text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
551
571
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
552
572
  }
553
573
  .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
@@ -20,6 +20,7 @@
20
20
  --#{$button}--BorderRadius: var(--pf-t--global--border--radius--pill);
21
21
  --#{$button}--TextDecorationLine: none;
22
22
  --#{$button}--TextDecorationStyle: none;
23
+ --#{$button}--TextDecorationColor: currentcolor;
23
24
  --#{$button}--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
24
25
  --#{$button}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
25
26
  --#{$button}--TransitionProperty: color, background-color, border-width, border-color, padding;
@@ -30,6 +31,7 @@
30
31
  --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
31
32
  --#{$button}--hover--TextDecorationLine: none;
32
33
  --#{$button}--hover--TextDecorationStyle: none;
34
+ --#{$button}--hover--TextDecorationColor: currentcolor;
33
35
 
34
36
  // Clicked
35
37
  --#{$button}--m-clicked--BackgroundColor: transparent;
@@ -128,6 +130,12 @@
128
130
  --#{$button}--span--m-link--m-inline--Display: inline;
129
131
  --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
130
132
  --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
133
+ --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
134
+ --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
135
+ --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
136
+ --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
137
+ --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
138
+ --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
131
139
 
132
140
  // Plain
133
141
  --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -259,6 +267,7 @@
259
267
  // Disabled
260
268
  --#{$button}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
261
269
  --#{$button}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
270
+ --#{$button}--disabled--TextDecorationColor: currentcolor;
262
271
  --#{$button}--disabled--BorderColor: transparent;
263
272
  --#{$button}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
264
273
 
@@ -311,7 +320,9 @@
311
320
  line-height: var(--#{$button}--LineHeight, inherit);
312
321
  color: var(--#{$button}--Color);
313
322
  text-align: center;
314
- text-decoration: var(--#{$button}--TextDecorationLine) var(--#{$button}--TextDecorationStyle);
323
+ text-decoration-line: var(--#{$button}--TextDecorationLine);
324
+ text-decoration-style: var(--#{$button}--TextDecorationStyle);
325
+ text-decoration-color: var(--#{$button}--TextDecorationColor);
315
326
  white-space: nowrap;
316
327
  cursor: pointer; // needed for when a button does not use <button> - eg, <span>
317
328
  user-select: none;
@@ -440,6 +451,12 @@
440
451
  --#{$button}--disabled--BackgroundColor: transparent;
441
452
  --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
442
453
  --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
454
+ --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
455
+ --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
456
+ --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
457
+ --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
458
+ --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
459
+ --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
443
460
 
444
461
  text-align: start;
445
462
  white-space: normal;
@@ -623,7 +640,9 @@
623
640
  --#{$button}--m-plain--m-no-padding__icon--Color: var(--#{$button}--m-plain--m-no-padding--hover__icon--Color);
624
641
  --#{$button}__icon--Color: var(--#{$button}--hover__icon--Color);
625
642
 
626
- text-decoration: var(--#{$button}--hover--TextDecorationLine) var(--#{$button}--hover--TextDecorationStyle);
643
+ text-decoration-line: var(--#{$button}--hover--TextDecorationLine);
644
+ text-decoration-style: var(--#{$button}--hover--TextDecorationStyle);
645
+ text-decoration-color: var(--#{$button}--hover--TextDecorationColor);
627
646
  }
628
647
 
629
648
  &.pf-m-clicked {
@@ -645,6 +664,7 @@
645
664
  &.pf-m-disabled,
646
665
  &.pf-m-aria-disabled {
647
666
  color: var(--#{$button}--disabled--Color);
667
+ text-decoration-color: var(--#{$button}--disabled--TextDecorationColor);
648
668
  background-color: var(--#{$button}--disabled--BackgroundColor);
649
669
 
650
670
  &::after {
@@ -83,7 +83,8 @@
83
83
 
84
84
  :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
85
85
  color: var(--pf-v6-c-content--a--Color);
86
- text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
86
+ text-decoration-line: var(--pf-v6-c-content--a--TextDecorationLine);
87
+ text-decoration-style: var(--pf-v6-c-content--a--TextDecorationStyle);
87
88
  }
88
89
  :is(.pf-v6-c-content--a, .pf-v6-c-content a):is(:hover, :focus) {
89
90
  --pf-v6-c-content--a--Color: var(--pf-v6-c-content--a--hover--Color);
@@ -119,7 +119,8 @@
119
119
  & a
120
120
  ) {
121
121
  color: var(--#{$content}--a--Color);
122
- text-decoration: var(--#{$content}--a--TextDecorationLine) var(--#{$content}--a--TextDecorationStyle);
122
+ text-decoration-line: var(--#{$content}--a--TextDecorationLine);
123
+ text-decoration-style: var(--#{$content}--a--TextDecorationStyle);
123
124
 
124
125
  &:is(:hover, :focus) {
125
126
  --#{$content}--a--Color: var(--#{$content}--a--hover--Color);
@@ -196,7 +196,8 @@
196
196
  min-width: 0;
197
197
  }
198
198
  .pf-v6-c-description-list__text.pf-m-help-text {
199
- text-decoration: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine) var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
199
+ text-decoration-line: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationLine);
200
+ text-decoration-style: var(--pf-v6-c-description-list__text--m-help-text--TextDecorationStyle);
200
201
  text-underline-offset: var(--pf-v6-c-description-list__text--m-help-text--TextUnderlineOffset);
201
202
  cursor: pointer;
202
203
  }
@@ -179,7 +179,8 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
179
179
  min-width: 0; // this allows overflow-wrap to work
180
180
 
181
181
  &.pf-m-help-text {
182
- text-decoration: var(--#{$description-list}__text--m-help-text--TextDecorationLine) var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
182
+ text-decoration-line: var(--#{$description-list}__text--m-help-text--TextDecorationLine);
183
+ text-decoration-style: var(--#{$description-list}__text--m-help-text--TextDecorationStyle);
183
184
  text-underline-offset: var(--#{$description-list}__text--m-help-text--TextUnderlineOffset);
184
185
  cursor: pointer;
185
186
 
@@ -333,9 +333,6 @@
333
333
  font-size: var(--pf-v6-c-form__label--FontSize);
334
334
  line-height: var(--pf-v6-c-form__label--LineHeight);
335
335
  }
336
- .pf-v6-c-form__label::selection {
337
- background-color: none;
338
- }
339
336
  .pf-v6-c-form__label:not(.pf-m-disabled):hover {
340
337
  cursor: var(--pf-v6-c-form__label--hover--Cursor);
341
338
  }
@@ -261,10 +261,6 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
261
261
  font-size: var(--#{$form}__label--FontSize);
262
262
  line-height: var(--#{$form}__label--LineHeight);
263
263
 
264
- &::selection {
265
- background-color: none;
266
- }
267
-
268
264
  &:not(.pf-m-disabled):hover {
269
265
  cursor: var(--#{$form}__label--hover--Cursor);
270
266
  }
@@ -186,7 +186,7 @@
186
186
  padding-block-end: var(--pf-v6-c-jump-links__link--PaddingBlockEnd);
187
187
  padding-inline-start: var(--pf-v6-c-jump-links__link--PaddingInlineStart);
188
188
  padding-inline-end: var(--pf-v6-c-jump-links__link--PaddingInlineEnd);
189
- text-decoration: none;
189
+ text-decoration-line: none;
190
190
  outline-offset: var(--pf-v6-c-jump-links__link--OutlineOffset);
191
191
  }
192
192
  .pf-v6-c-jump-links__link:is(:hover, :focus) {
@@ -160,7 +160,7 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
160
160
  padding-block-end: var(--#{$jump-links}__link--PaddingBlockEnd);
161
161
  padding-inline-start: var(--#{$jump-links}__link--PaddingInlineStart);
162
162
  padding-inline-end: var(--#{$jump-links}__link--PaddingInlineEnd);
163
- text-decoration: none;
163
+ text-decoration-line: none;
164
164
  outline-offset: var(--#{$jump-links}__link--OutlineOffset);
165
165
 
166
166
  &:is(:hover, :focus) {
@@ -381,7 +381,8 @@
381
381
  --pf-v6-c-label--m-editable--TextDecorationStyle: var(--pf-v6-c-label--m-editable--hover--TextDecorationStyle);
382
382
  }
383
383
  .pf-v6-c-label.pf-m-editable .pf-v6-c-label__text {
384
- text-decoration: var(--pf-v6-c-label--m-editable--TextDecorationLine) var(--pf-v6-c-label--m-editable--TextDecorationStyle);
384
+ text-decoration-line: var(--pf-v6-c-label--m-editable--TextDecorationLine);
385
+ text-decoration-style: var(--pf-v6-c-label--m-editable--TextDecorationStyle);
385
386
  text-underline-offset: var(--pf-v6-c-label--m-editable--TextUnderlineOffset);
386
387
  }
387
388
  .pf-v6-c-label.pf-m-editable-active {
@@ -414,7 +415,7 @@
414
415
  --pf-v6-c-label__content--Cursor: var(--pf-v6-c-label--m-clickable__content--Cursor);
415
416
  }
416
417
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content, .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
417
- text-decoration: none;
418
+ text-decoration-line: none;
418
419
  }
419
420
  .pf-v6-c-label.pf-m-clickable .pf-v6-c-label__content:is(:hover, :focus) {
420
421
  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-clickable--hover--Color);
@@ -458,7 +458,8 @@
458
458
  }
459
459
 
460
460
  .#{$label}__text {
461
- text-decoration: var(--#{$label}--m-editable--TextDecorationLine) var(--#{$label}--m-editable--TextDecorationStyle);
461
+ text-decoration-line: var(--#{$label}--m-editable--TextDecorationLine);
462
+ text-decoration-style: var(--#{$label}--m-editable--TextDecorationStyle);
462
463
  text-underline-offset: var(--#{$label}--m-editable--TextUnderlineOffset);
463
464
  }
464
465
  }
@@ -500,7 +501,7 @@
500
501
  .#{$label}__content {
501
502
  &,
502
503
  &:is(:hover, :focus) {
503
- text-decoration: none;
504
+ text-decoration-line: none;
504
505
  }
505
506
 
506
507
  &:is(:hover, :focus) {
@@ -177,11 +177,20 @@
177
177
  .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled=true]) {
178
178
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
179
179
  --pf-v6-c-menu__item-toggle-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
180
- --pf-v6-c-menu__item-external-icon--Color: var(--pf-v6-c-menu--icon--disabled--Color);
180
+ --pf-v6-c-menu__item-external--Color: transparent;
181
+ --pf-v6-c-menu__item-select-icon--Color: transparent;
181
182
  --pf-v6-c-menu__item-description--Color: var(--pf-v6-c-menu--icon--disabled--Color);
182
183
  --pf-v6-c-menu__list-item--BackgroundColor: transparent;
184
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: transparent;
185
+ }
186
+ .pf-v6-c-menu__list-item:is(.pf-m-disabled, :disabled),
187
+ .pf-v6-c-menu__item-action:is(.pf-m-disabled, :disabled) {
183
188
  pointer-events: none;
184
189
  }
190
+ .pf-v6-c-menu__list-item.pf-m-aria-disabled .pf-v6-c-menu__item,
191
+ .pf-v6-c-menu__item-action.pf-m-aria-disabled .pf-v6-c-menu__item {
192
+ cursor: default;
193
+ }
185
194
 
186
195
  [class*=pf-v6-c-menu]:is([hidden]) {
187
196
  display: none;
@@ -429,7 +438,7 @@
429
438
  line-height: var(--pf-v6-c-menu__item--LineHeight);
430
439
  color: var(--pf-v6-c-menu__item--Color);
431
440
  text-align: start;
432
- text-decoration: none;
441
+ text-decoration-line: none;
433
442
  background-color: var(--pf-v6-c-menu__item--BackgroundColor);
434
443
  border: 0;
435
444
  outline-offset: var(--pf-v6-c-menu--OutlineOffset);
@@ -175,12 +175,22 @@
175
175
  &:is(.pf-m-disabled, :disabled, .pf-m-aria-disabled, [aria-disabled="true"]) {
176
176
  --#{$menu}__item--Color: var(--#{$menu}__item--m-disabled--Color);
177
177
  --#{$menu}__item-toggle-icon--Color: var(--#{$menu}--icon--disabled--Color);
178
- --#{$menu}__item-external-icon--Color: var(--#{$menu}--icon--disabled--Color);
178
+ --#{$menu}__item-external--Color: transparent;
179
+ --#{$menu}__item-select-icon--Color: transparent;
179
180
  --#{$menu}__item-description--Color: var(--#{$menu}--icon--disabled--Color);
180
181
  --#{$menu}__list-item--BackgroundColor: transparent;
182
+ --#{$menu}__list-item--hover--BackgroundColor: transparent;
183
+ }
181
184
 
185
+ &:is(.pf-m-disabled, :disabled) {
182
186
  pointer-events: none;
183
187
  }
188
+
189
+ &.pf-m-aria-disabled {
190
+ .#{$menu}__item {
191
+ cursor: default;
192
+ }
193
+ }
184
194
  }
185
195
 
186
196
  // - Menu hidden
@@ -518,7 +528,7 @@
518
528
  line-height: var(--#{$menu}__item--LineHeight);
519
529
  color: var(--#{$menu}__item--Color);
520
530
  text-align: start;
521
- text-decoration: none;
531
+ text-decoration-line: none;
522
532
  background-color: var(--#{$menu}__item--BackgroundColor);
523
533
  border: 0;
524
534
  outline-offset: var(--#{$menu}--OutlineOffset);
@@ -186,7 +186,7 @@
186
186
  line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
187
187
  color: var(--pf-v6-c-nav__link--Color);
188
188
  text-align: start;
189
- text-decoration: none;
189
+ text-decoration-line: none;
190
190
  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
191
191
  border: none;
192
192
  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
@@ -233,7 +233,7 @@
233
233
  line-height: var(--#{$nav}__link--LineHeight, inherit); // default to nav line height if no custom value is set
234
234
  color: var(--#{$nav}__link--Color);
235
235
  text-align: start;
236
- text-decoration: none;
236
+ text-decoration-line: none;
237
237
  background-color: var(--#{$nav}__link--BackgroundColor);
238
238
  border: none;
239
239
  border-radius: var(--#{$nav}__link--BorderRadius);
@@ -316,7 +316,8 @@
316
316
  .pf-v6-c-progress-stepper__step-title.pf-m-help-text {
317
317
  padding-inline-start: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineStart);
318
318
  padding-inline-end: var(--pf-v6-c-progress-stepper__step-title--m-help-text--PaddingInlineEnd);
319
- text-decoration: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine) var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
319
+ text-decoration-line: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationLine);
320
+ text-decoration-style: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextDecorationStyle);
320
321
  text-underline-offset: var(--pf-v6-c-progress-stepper__step-title--m-help-text--TextUnderlineOffset);
321
322
  cursor: pointer;
322
323
  }
@@ -406,7 +406,8 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
406
406
  &.pf-m-help-text {
407
407
  padding-inline-start: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineStart);
408
408
  padding-inline-end: var(--#{$progress-stepper}__step-title--m-help-text--PaddingInlineEnd);
409
- text-decoration: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationLine) var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationStyle);
409
+ text-decoration-line: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationLine);
410
+ text-decoration-style: var(--#{$progress-stepper}__step-title--m-help-text--TextDecorationStyle);
410
411
  text-underline-offset: var(--#{$progress-stepper}__step-title--m-help-text--TextUnderlineOffset);
411
412
  cursor: pointer;
412
413
 
@@ -34,7 +34,7 @@
34
34
  font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
35
35
  color: var(--pf-v6-c-simple-list__item-link--Color);
36
36
  text-align: start;
37
- text-decoration: none;
37
+ text-decoration-line: none;
38
38
  background-color: var(--pf-v6-c-simple-list__item-link--BackgroundColor);
39
39
  border: none;
40
40
  border-radius: var(--pf-v6-c-simple-list__item-link--BorderRadius);
@@ -47,7 +47,7 @@
47
47
  .pf-v6-c-simple-list__item-link:is(:hover, :focus) {
48
48
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
49
49
  --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
50
- text-decoration: none;
50
+ text-decoration-line: none;
51
51
  }
52
52
  .pf-v6-c-simple-list__item-link.pf-m-current {
53
53
  --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--m-current--BackgroundColor);
@@ -43,7 +43,7 @@
43
43
  font-size: var(--#{$simple-list}__item-link--FontSize);
44
44
  color: var(--#{$simple-list}__item-link--Color);
45
45
  text-align: start;
46
- text-decoration: none;
46
+ text-decoration-line: none;
47
47
  background-color: var(--#{$simple-list}__item-link--BackgroundColor);
48
48
  border: none;
49
49
  border-radius: var(--#{$simple-list}__item-link--BorderRadius);
@@ -58,7 +58,7 @@
58
58
  --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
59
59
  --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
60
60
 
61
- text-decoration: none;
61
+ text-decoration-line: none;
62
62
  }
63
63
 
64
64
  &.pf-m-current {
@@ -495,7 +495,7 @@
495
495
  padding-inline-end: var(--pf-v6-c-tabs__link--PaddingInlineEnd);
496
496
  font-size: var(--pf-v6-c-tabs__link--FontSize);
497
497
  color: var(--pf-v6-c-tabs__link--Color);
498
- text-decoration: none;
498
+ text-decoration-line: none;
499
499
  background-color: var(--pf-v6-c-tabs__link--BackgroundColor);
500
500
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
501
501
  }
@@ -573,7 +573,7 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
573
573
  padding-inline-end: var(--#{$tabs}__link--PaddingInlineEnd);
574
574
  font-size: var(--#{$tabs}__link--FontSize);
575
575
  color: var(--#{$tabs}__link--Color);
576
- text-decoration: none;
576
+ text-decoration-line: none;
577
577
  background-color: var(--#{$tabs}__link--BackgroundColor);
578
578
  border-radius: var(--#{$tabs}__link--BorderRadius);
579
579
 
@@ -19,7 +19,8 @@
19
19
  }
20
20
  .pf-v6-c-timestamp.pf-m-help-text {
21
21
  --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--Color);
22
- text-decoration: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine) var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
22
+ text-decoration-line: var(--pf-v6-c-timestamp--m-help-text--TextDecorationLine);
23
+ text-decoration-style: var(--pf-v6-c-timestamp--m-help-text--TextDecorationStyle);
23
24
  text-underline-offset: var(--pf-v6-c-timestamp--m-help-text--TextUnderlineOffset);
24
25
  cursor: pointer;
25
26
  }
@@ -24,7 +24,8 @@
24
24
  &.pf-m-help-text {
25
25
  --#{$timestamp}--Color: var(--#{$timestamp}--m-help-text--Color);
26
26
 
27
- text-decoration: var(--#{$timestamp}--m-help-text--TextDecorationLine) var(--#{$timestamp}--m-help-text--TextDecorationStyle);
27
+ text-decoration-line: var(--#{$timestamp}--m-help-text--TextDecorationLine);
28
+ text-decoration-style: var(--#{$timestamp}--m-help-text--TextDecorationStyle);
28
29
  text-underline-offset: var(--#{$timestamp}--m-help-text--TextUnderlineOffset);
29
30
  cursor: pointer;
30
31
 
@@ -92,7 +92,7 @@
92
92
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
93
93
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
94
94
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
95
- text-decoration: none;
95
+ text-decoration-line: none;
96
96
  }
97
97
  .pf-v6-c-toggle-group__button.pf-m-selected {
98
98
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--m-selected--BackgroundColor);
@@ -122,7 +122,7 @@
122
122
  --#{$toggle-group}__button--ZIndex: var(--#{$toggle-group}__button--hover--ZIndex);
123
123
  --#{$toggle-group}__button--before--BorderColor: var(--#{$toggle-group}__button--hover--before--BorderColor);
124
124
 
125
- text-decoration: none;
125
+ text-decoration-line: none;
126
126
  }
127
127
 
128
128
  &.pf-m-selected {
@@ -357,7 +357,7 @@
357
357
  padding-inline: 0;
358
358
  color: var(--pf-v6-c-wizard__nav-link--Color);
359
359
  text-align: start;
360
- text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
360
+ text-decoration-line: var(--pf-v6-c-wizard__nav-link--TextDecoration);
361
361
  word-break: break-word;
362
362
  counter-increment: wizard-nav-count;
363
363
  background-color: transparent;
@@ -440,7 +440,7 @@
440
440
  padding-inline: 0;
441
441
  color: var(--#{$wizard}__nav-link--Color);
442
442
  text-align: start; // needed for when the item is a button
443
- text-decoration: var(--#{$wizard}__nav-link--TextDecoration);
443
+ text-decoration-line: var(--#{$wizard}__nav-link--TextDecoration);
444
444
  word-break: break-word;
445
445
  counter-increment: wizard-nav-count;
446
446
  background-color: transparent;