@patternfly/patternfly 6.0.0-alpha.209 → 6.0.0-alpha.210

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 (9) hide show
  1. package/components/Card/card.css +30 -24
  2. package/components/Card/card.scss +33 -18
  3. package/components/_index.css +30 -24
  4. package/docs/components/Card/examples/Card.md +91 -102
  5. package/package.json +1 -1
  6. package/patternfly-no-globals.css +30 -24
  7. package/patternfly.css +30 -24
  8. package/patternfly.min.css +1 -1
  9. package/patternfly.min.css.map +1 -1
package/components/Card/card.css CHANGED
@@ -30,6 +30,8 @@
30
30
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
31
31
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
32
32
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
33
+ --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
34
+ --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
33
35
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
34
36
  --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
35
37
  --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -97,23 +99,25 @@
97
99
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
98
100
  border: none;
99
101
  }
100
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
101
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
102
+ .pf-v6-c-card.pf-m-current {
103
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
104
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth);
105
+ --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
106
+ --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
107
+ }
108
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
102
109
  position: unset;
103
110
  }
104
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
105
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
111
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)::before {
106
112
  position: absolute;
107
113
  inset: 0;
108
114
  cursor: pointer;
109
115
  }
110
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
111
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
116
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
112
117
  --pf-v6-c-card--BackgroundColor: revert;
113
118
  --pf-v6-c-card--BorderColor: revert;
114
119
  }
115
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
116
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label, .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
120
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
117
121
  --pf-v6-c-card--BorderColor: revert;
118
122
  --pf-v6-c-card--m-selectable--BorderWidth: revert;
119
123
  }
@@ -121,8 +125,7 @@
121
125
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
122
126
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
123
127
  }
124
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
125
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label, .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
128
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
126
129
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
127
130
  }
128
131
  .pf-v6-c-card.pf-m-compact {
@@ -232,15 +235,13 @@
232
235
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
233
236
  }
234
237
 
235
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
236
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
238
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) {
237
239
  position: absolute;
238
240
  inset: 0;
239
241
  justify-self: auto;
240
242
  cursor: pointer;
241
243
  }
242
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
243
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
244
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before {
244
245
  position: absolute;
245
246
  inset: 0;
246
247
  z-index: -1;
@@ -249,32 +250,28 @@
249
250
  border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
250
251
  border-radius: var(--pf-v6-c-card--BorderRadius);
251
252
  }
252
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label:hover,
253
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label:hover {
253
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
254
254
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
255
255
  }
256
256
 
257
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
258
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label,
257
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label),
259
258
  .pf-v6-c-card.pf-m-selected {
260
259
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
261
260
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
262
261
  }
263
262
 
264
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
265
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
263
+ .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),
264
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input, .pf-v6-c-card__clickable-action):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
266
265
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor);
267
266
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth);
268
267
  }
269
268
 
270
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-check__label,
271
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-radio__label {
269
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
272
270
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor);
273
271
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth);
274
272
  }
275
273
 
276
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
277
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label,
274
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label),
278
275
  .pf-v6-c-card.pf-m-disabled {
279
276
  --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color);
280
277
  --pf-v6-c-card__body--Color: var(--pf-v6-c-card--m-selectable--m-disabled__body--Color);
@@ -283,6 +280,15 @@
283
280
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor);
284
281
  }
285
282
 
283
+ .pf-v6-c-card__clickable-action {
284
+ background: none;
285
+ border: 0;
286
+ outline: 0;
287
+ }
288
+ .pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
289
+ pointer-events: none;
290
+ }
291
+
286
292
  .pf-v6-c-card__header,
287
293
  .pf-v6-c-card__title,
288
294
  .pf-v6-c-card__body,
package/components/Card/card.scss CHANGED
@@ -37,6 +37,10 @@
37
37
  // Selectable/Clickable
38
38
  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
39
39
 
40
+ // Clickable clicked
41
+ --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
42
+ --#{$card}--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
43
+
40
44
  // Selected state (checked) of selectable card
41
45
  --#{$card}--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
42
46
  --#{$card}--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
@@ -138,11 +142,18 @@
138
142
  }
139
143
  }
140
144
 
145
+ // CLICKABLE is clicked
146
+ &.pf-m-current {
147
+ --#{$card}--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
148
+ --#{$card}--BorderWidth: var(--#{$card}--m-clickable--m-current--BorderWidth);
149
+ --#{$card}--m-selectable--hover--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
150
+ --#{$card}--m-selectable--focus--BorderColor: var(--#{$card}--m-clickable--m-current--BorderColor);
151
+ }
152
+
141
153
  // stylelint-disable selector-max-class
142
154
  // Cards that are BOTH SELECTABLE AND CLICKABLE
143
155
  &.pf-m-selectable.pf-m-clickable {
144
- .#{$card}__selectable-actions .#{$check}__label,
145
- .#{$card}__selectable-actions .#{$radio}__label {
156
+ .#{$card}__selectable-actions :is(.#{$check}__label, .#{$radio}__label) {
146
157
  position: unset;
147
158
 
148
159
  &::before {
@@ -153,15 +164,13 @@
153
164
  }
154
165
 
155
166
  // When SELECTABLE and CLICKABLE card is focused, don't show change of background or border on the card
156
- .#{$card}__selectable-actions .#{$check}__input:where(:focus-visible) ~ .#{$check}__label,
157
- .#{$card}__selectable-actions .#{$radio}__input:where(:focus-visible) ~ .#{$radio}__label {
167
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:focus-visible) ~ :is(.#{$check}__label, .#{$radio}__label) {
158
168
  --#{$card}--BackgroundColor: revert;
159
169
  --#{$card}--BorderColor: revert;
160
170
  }
161
171
 
162
172
  // SELECTABLE and CLICKABLE card is selected (Check box checked or marked .pf-m-selected)
163
- .#{$card}__selectable-actions .#{$check}__input:where(:checked) ~ .#{$check}__label,
164
- .#{$card}__selectable-actions .#{$radio}__input:where(:checked) ~ .#{$radio}__label,
173
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$check}__label, .#{$radio}__label),
165
174
  &.pf-m-selected {
166
175
  --#{$card}--BorderColor: revert;
167
176
  --#{$card}--m-selectable--BorderWidth: revert;
@@ -174,8 +183,7 @@
174
183
  }
175
184
 
176
185
  // SELECTABLE and CLICKABLE but DISABLED card
177
- .#{$card}__selectable-actions .#{$check}__input:where(:disabled) ~ .#{$check}__label,
178
- .#{$card}__selectable-actions .#{$radio}__input:where(:disabled) ~ .#{$radio}__label,
186
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:disabled) ~ :is(.#{$check}__label, .#{$radio}__label),
179
187
  &.pf-m-disabled {
180
188
  --#{$card}--BackgroundColor: var(--#{$card}--m-selectable--m-disabled--BackgroundColor);
181
189
  }
@@ -309,8 +317,7 @@
309
317
  }
310
318
 
311
319
  // Labels are used to handle states of selectable and clickable cards
312
- .#{$card}__selectable-actions .#{$check}__label,
313
- .#{$card}__selectable-actions .#{$radio}__label {
320
+ .#{$card}__selectable-actions :is(.#{$check}__label, .#{$radio}__label, .#{$card}__clickable-action) {
314
321
  position: absolute;
315
322
  inset: 0;
316
323
  justify-self: auto;
@@ -332,30 +339,27 @@
332
339
  }
333
340
 
334
341
  // Selected card (checked)
335
- .#{$card}__selectable-actions .#{$check}__input:where(:checked) ~ .#{$check}__label,
336
- .#{$card}__selectable-actions .#{$radio}__input:where(:checked) ~ .#{$radio}__label,
342
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:checked) ~ :is(.#{$radio}__label, .#{$check}__label),
337
343
  .#{$card}.pf-m-selected {
338
344
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--BorderColor);
339
345
  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--m-selectable--m-selected--BorderWidth); // this line used to be just BorderWidth, not m-selectable
340
346
  }
341
347
 
342
348
  // Focus on the card (focus on label but not checked)
343
- .#{$card}__selectable-actions .#{$check}__input:where(:focus-visible) ~ .#{$check}__label,
344
- .#{$card}__selectable-actions .#{$radio}__input:where(:focus-visible) ~ .#{$radio}__label {
349
+ .#{$card}__selectable-actions .#{$card}__clickable-action:where(:focus-visible),
350
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input, .#{$card}__clickable-action):where(:focus-visible) ~ :is(.#{$check}__label, .#{$radio}__label) {
345
351
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--focus--BorderColor);
346
352
  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--focus--BorderWidth);
347
353
  }
348
354
 
349
355
  // Focus on a selected card (focus + checked)
350
- .#{$card}__selectable-actions .#{$check}__input:where(:focus-visible):where(:checked) ~ .#{$check}__label,
351
- .#{$card}__selectable-actions .#{$radio}__input:where(:focus-visible):where(:checked) ~ .#{$radio}__label {
356
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:focus-visible):where(:checked) ~ :is(.#{$check}__label, .#{$radio}__label) {
352
357
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-selected--focus--BorderColor);
353
358
  --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-selected--focus--BorderWidth);
354
359
  }
355
360
 
356
361
  // Disabled card
357
- .#{$card}__selectable-actions .#{$check}__input:where(:disabled) ~ .#{$check}__label,
358
- .#{$card}__selectable-actions .#{$radio}__input:where(:disabled) ~ .#{$radio}__label,
362
+ .#{$card}__selectable-actions :is(.#{$check}__input, .#{$radio}__input):where(:disabled) ~ :is(.#{$check}__label, .#{$radio}__label),
359
363
  .#{$card}.pf-m-disabled {
360
364
  --#{$card}__title-text--Color: var(--#{$card}--m-selectable--m-disabled__title-text--Color);
361
365
  --#{$card}__body--Color: var(--#{$card}--m-selectable--m-disabled__body--Color);
@@ -364,6 +368,17 @@
364
368
  --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-disabled--BorderColor);
365
369
  }
366
370
 
371
+ .#{$card}__clickable-action {
372
+ background: none;
373
+ border: 0;
374
+ outline: 0;
375
+
376
+ &:disabled,
377
+ &.pf-m-disabled {
378
+ pointer-events: none;
379
+ }
380
+ }
381
+
367
382
  .#{$card}__header,
368
383
  .#{$card}__title,
369
384
  .#{$card}__body,
package/components/_index.css CHANGED
@@ -2228,6 +2228,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2228
2228
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
2229
2229
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
2230
2230
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
2231
+ --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
2232
+ --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
2231
2233
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
2232
2234
  --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
2233
2235
  --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -2295,23 +2297,25 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2295
2297
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
2296
2298
  border: none;
2297
2299
  }
2298
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
2299
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
2300
+ .pf-v6-c-card.pf-m-current {
2301
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
2302
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth);
2303
+ --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
2304
+ --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
2305
+ }
2306
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
2300
2307
  position: unset;
2301
2308
  }
2302
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
2303
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
2309
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label)::before {
2304
2310
  position: absolute;
2305
2311
  inset: 0;
2306
2312
  cursor: pointer;
2307
2313
  }
2308
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
2309
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
2314
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
2310
2315
  --pf-v6-c-card--BackgroundColor: revert;
2311
2316
  --pf-v6-c-card--BorderColor: revert;
2312
2317
  }
2313
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
2314
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label, .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
2318
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
2315
2319
  --pf-v6-c-card--BorderColor: revert;
2316
2320
  --pf-v6-c-card--m-selectable--BorderWidth: revert;
2317
2321
  }
@@ -2319,8 +2323,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2319
2323
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
2320
2324
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
2321
2325
  }
2322
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
2323
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label, .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
2326
+ .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
2324
2327
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
2325
2328
  }
2326
2329
  .pf-v6-c-card.pf-m-compact {
@@ -2430,15 +2433,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2430
2433
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
2431
2434
  }
2432
2435
 
2433
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
2434
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
2436
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) {
2435
2437
  position: absolute;
2436
2438
  inset: 0;
2437
2439
  justify-self: auto;
2438
2440
  cursor: pointer;
2439
2441
  }
2440
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
2441
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
2442
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before {
2442
2443
  position: absolute;
2443
2444
  inset: 0;
2444
2445
  z-index: -1;
@@ -2447,32 +2448,28 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2447
2448
  border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
2448
2449
  border-radius: var(--pf-v6-c-card--BorderRadius);
2449
2450
  }
2450
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label:hover,
2451
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label:hover {
2451
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
2452
2452
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
2453
2453
  }
2454
2454
 
2455
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
2456
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label,
2455
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:checked) ~ :is(.pf-v6-c-radio__label, .pf-v6-c-check__label),
2457
2456
  .pf-v6-c-card.pf-m-selected {
2458
2457
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
2459
2458
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
2460
2459
  }
2461
2460
 
2462
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
2463
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
2461
+ .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),
2462
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input, .pf-v6-c-card__clickable-action):where(:focus-visible) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
2464
2463
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor);
2465
2464
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth);
2466
2465
  }
2467
2466
 
2468
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-check__label,
2469
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-radio__label {
2467
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:focus-visible):where(:checked) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label) {
2470
2468
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor);
2471
2469
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth);
2472
2470
  }
2473
2471
 
2474
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
2475
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label,
2472
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label),
2476
2473
  .pf-v6-c-card.pf-m-disabled {
2477
2474
  --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color);
2478
2475
  --pf-v6-c-card__body--Color: var(--pf-v6-c-card--m-selectable--m-disabled__body--Color);
@@ -2481,6 +2478,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2481
2478
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor);
2482
2479
  }
2483
2480
 
2481
+ .pf-v6-c-card__clickable-action {
2482
+ background: none;
2483
+ border: 0;
2484
+ outline: 0;
2485
+ }
2486
+ .pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
2487
+ pointer-events: none;
2488
+ }
2489
+
2484
2490
  .pf-v6-c-card__header,
2485
2491
  .pf-v6-c-card__title,
2486
2492
  .pf-v6-c-card__body,
package/docs/components/Card/examples/Card.md CHANGED
@@ -494,7 +494,7 @@ cssPrefix: pf-v6-c-card
494
494
 
495
495
  ```
496
496
 
497
- ### Selectable Secondary style
497
+ ### Selectable secondary style
498
498
 
499
499
  ```html
500
500
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -730,34 +730,26 @@ cssPrefix: pf-v6-c-card
730
730
 
731
731
  ```
732
732
 
733
- ### Clickable
733
+ ### Actionable (button)
734
734
 
735
735
  ```html
736
736
  <div class="pf-v6-l-gallery pf-m-gutter">
737
- <div class="pf-v6-c-card pf-m-clickable" id="card-clickable-example">
737
+ <div class="pf-v6-c-card pf-m-clickable" id="card-actionable-button-example">
738
738
  <div class="pf-v6-c-card__header">
739
739
  <div class="pf-v6-c-card__actions pf-m-no-offset">
740
740
  <div class="pf-v6-c-card__selectable-actions">
741
- <div class="pf-v6-c-radio pf-m-standalone">
742
- <input
743
- class="pf-v6-c-radio__input pf-v6-screen-reader"
744
- type="radio"
745
- id="card-clickable-example-sr-only-radio"
746
- name="card-clickable-example-sr-only-radio"
747
- aria-labelledby="card-clickable-example"
748
- />
749
-
750
- <label
751
- class="pf-v6-c-radio__label"
752
- for="card-clickable-example-sr-only-radio"
753
- id="card-clickable-example-sr-only-radio-label"
754
- name="card-clickable-example-sr-only-radio"
755
- ></label>
756
- </div>
741
+ <button
742
+ class="pf-v6-c-card__clickable-action"
743
+ type="button"
744
+ aria-labelledby="card-actionable-button-example"
745
+ ></button>
757
746
  </div>
758
747
  </div>
759
748
  <div class="pf-v6-c-card__header-main">
760
- <div class="pf-v6-c-card__title" id="card-clickable-example-title">
749
+ <div
750
+ class="pf-v6-c-card__title"
751
+ id="card-actionable-button-example-title"
752
+ >
761
753
  <h2 class="pf-v6-c-card__title-text">Title</h2>
762
754
  </div>
763
755
  </div>
@@ -767,35 +759,51 @@ cssPrefix: pf-v6-c-card
767
759
  </div>
768
760
 
769
761
  <div
770
- class="pf-v6-c-card pf-m-clickable pf-m-disabled"
771
- id="card-clickable-example-disabled"
762
+ class="pf-v6-c-card pf-m-clickable pf-m-current"
763
+ id="card-actionable-button-example-clicked"
772
764
  >
773
765
  <div class="pf-v6-c-card__header">
774
766
  <div class="pf-v6-c-card__actions pf-m-no-offset">
775
767
  <div class="pf-v6-c-card__selectable-actions">
776
- <div class="pf-v6-c-radio pf-m-standalone">
777
- <input
778
- class="pf-v6-c-radio__input pf-v6-screen-reader"
779
- type="radio"
780
- id="card-clickable-example-disabled-sr-only-radio"
781
- name="card-clickable-example-disabled-sr-only-radio"
782
- aria-labelledby="card-clickable-example-disabled"
783
- disabled
784
- />
768
+ <button
769
+ class="pf-v6-c-card__clickable-action"
770
+ type="button"
771
+ aria-labelledby="card-actionable-button-example-clicked"
772
+ ></button>
773
+ </div>
774
+ </div>
775
+ <div class="pf-v6-c-card__header-main">
776
+ <div
777
+ class="pf-v6-c-card__title"
778
+ id="card-actionable-button-example-clicked-title"
779
+ >
780
+ <h2 class="pf-v6-c-card__title-text">Title (clicked)</h2>
781
+ </div>
782
+ </div>
783
+ </div>
784
+ <div class="pf-v6-c-card__body">Body</div>
785
+ <div class="pf-v6-c-card__footer">Footer</div>
786
+ </div>
785
787
 
786
- <label
787
- class="pf-v6-c-radio__label pf-m-disabled"
788
- for="card-clickable-example-disabled-sr-only-radio"
789
- id="card-clickable-example-disabled-sr-only-radio-label"
790
- name="card-clickable-example-disabled-sr-only-radio"
791
- ></label>
792
- </div>
788
+ <div
789
+ class="pf-v6-c-card pf-m-clickable pf-m-disabled"
790
+ id="card-actionable-button-example-disabled"
791
+ >
792
+ <div class="pf-v6-c-card__header">
793
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
794
+ <div class="pf-v6-c-card__selectable-actions">
795
+ <button
796
+ class="pf-v6-c-card__clickable-action"
797
+ type="button"
798
+ aria-labelledby="card-actionable-button-example-disabled"
799
+ disabled
800
+ ></button>
793
801
  </div>
794
802
  </div>
795
803
  <div class="pf-v6-c-card__header-main">
796
804
  <div
797
805
  class="pf-v6-c-card__title"
798
- id="card-clickable-example-disabled-title"
806
+ id="card-actionable-button-example-disabled-title"
799
807
  >
800
808
  <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
801
809
  </div>
@@ -804,39 +812,59 @@ cssPrefix: pf-v6-c-card
804
812
  <div class="pf-v6-c-card__body">Body</div>
805
813
  <div class="pf-v6-c-card__footer">Footer</div>
806
814
  </div>
815
+ </div>
816
+
817
+ ```
818
+
819
+ ### Actionable (link)
820
+
821
+ ```html
822
+ <div class="pf-v6-l-gallery pf-m-gutter">
823
+ <div class="pf-v6-c-card pf-m-clickable" id="card-actionable-link-example">
824
+ <div class="pf-v6-c-card__header">
825
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
826
+ <div class="pf-v6-c-card__selectable-actions">
827
+ <a
828
+ class="pf-v6-c-card__clickable-action"
829
+ aria-labelledby="card-actionable-link-example"
830
+ href="#"
831
+ ></a>
832
+ </div>
833
+ </div>
834
+ <div class="pf-v6-c-card__header-main">
835
+ <div
836
+ class="pf-v6-c-card__title"
837
+ id="card-actionable-link-example-title"
838
+ >
839
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
840
+ </div>
841
+ </div>
842
+ </div>
843
+ <div class="pf-v6-c-card__body">Body</div>
844
+ <div class="pf-v6-c-card__footer">Footer</div>
845
+ </div>
807
846
 
808
847
  <div
809
- class="pf-v6-c-card pf-m-clickable pf-m-selected pf-m-disabled"
810
- id="card-clickable-example-selected-disabled"
848
+ class="pf-v6-c-card pf-m-clickable pf-m-disabled"
849
+ id="card-actionable-link-example-disabled"
811
850
  >
812
851
  <div class="pf-v6-c-card__header">
813
852
  <div class="pf-v6-c-card__actions pf-m-no-offset">
814
853
  <div class="pf-v6-c-card__selectable-actions">
815
- <div class="pf-v6-c-radio pf-m-standalone">
816
- <input
817
- class="pf-v6-c-radio__input pf-v6-screen-reader"
818
- type="radio"
819
- id="card-clickable-example-selected-disabled-sr-only-radio"
820
- name="card-clickable-example-selected-disabled-sr-only-radio"
821
- aria-labelledby="card-clickable-example-selected-disabled"
822
- disabled
823
- />
824
-
825
- <label
826
- class="pf-v6-c-radio__label pf-m-disabled"
827
- for="card-clickable-example-selected-disabled-sr-only-radio"
828
- id="card-clickable-example-selected-disabled-sr-only-radio-label"
829
- name="card-clickable-example-selected-disabled-sr-only-radio"
830
- ></label>
831
- </div>
854
+ <a
855
+ class="pf-v6-c-card__clickable-action pf-m-disabled"
856
+ tabindex="-1"
857
+ aria-labelledby="card-actionable-link-example-disabled"
858
+ href="#"
859
+ ></a>
832
860
  </div>
833
861
  </div>
834
862
  <div class="pf-v6-c-card__header-main">
835
863
  <div
836
864
  class="pf-v6-c-card__title"
837
- id="card-clickable-example-selected-disabled-title"
865
+ id="card-actionable-link-example-disabled-title"
838
866
  >
839
- <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
867
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
840
868
  </div>
841
869
  </div>
842
870
  </div>
@@ -847,7 +875,7 @@ cssPrefix: pf-v6-c-card
847
875
 
848
876
  ```
849
877
 
850
- ### Clickable secondary style
878
+ ### Actionable secondary style
851
879
 
852
880
  ```html
853
881
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -927,50 +955,11 @@ cssPrefix: pf-v6-c-card
927
955
  <div class="pf-v6-c-card__body">Body</div>
928
956
  <div class="pf-v6-c-card__footer">Footer</div>
929
957
  </div>
930
-
931
- <div
932
- class="pf-v6-c-card pf-m-clickable pf-m-selected pf-m-disabled pf-m-secondary"
933
- id="card-clickable-secondary-example-selected-disabled"
934
- >
935
- <div class="pf-v6-c-card__header">
936
- <div class="pf-v6-c-card__actions pf-m-no-offset">
937
- <div class="pf-v6-c-card__selectable-actions">
938
- <div class="pf-v6-c-radio pf-m-standalone">
939
- <input
940
- class="pf-v6-c-radio__input pf-v6-screen-reader"
941
- type="radio"
942
- id="card-clickable-secondary-example-selected-disabled-sr-only-radio"
943
- name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
944
- aria-labelledby="card-clickable-secondary-example-selected-disabled"
945
- disabled
946
- />
947
-
948
- <label
949
- class="pf-v6-c-radio__label pf-m-disabled"
950
- for="card-clickable-secondary-example-selected-disabled-sr-only-radio"
951
- id="card-clickable-secondary-example-selected-disabled-sr-only-radio-label"
952
- name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
953
- ></label>
954
- </div>
955
- </div>
956
- </div>
957
- <div class="pf-v6-c-card__header-main">
958
- <div
959
- class="pf-v6-c-card__title"
960
- id="card-clickable-secondary-example-selected-disabled-title"
961
- >
962
- <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
963
- </div>
964
- </div>
965
- </div>
966
- <div class="pf-v6-c-card__body">Body</div>
967
- <div class="pf-v6-c-card__footer">Footer</div>
968
- </div>
969
958
  </div>
970
959
 
971
960
  ```
972
961
 
973
- ### Clickable and selectable
962
+ ### Actionable and selectable
974
963
 
975
964
  ```html
976
965
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -1152,7 +1141,7 @@ cssPrefix: pf-v6-c-card
1152
1141
 
1153
1142
  ```
1154
1143
 
1155
- ### Clickable and selectable secondary style
1144
+ ### Actionable and selectable secondary style
1156
1145
 
1157
1146
  ```html
1158
1147
  <div class="pf-v6-l-gallery pf-m-gutter">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.209",
4
+ "version": "6.0.0-alpha.210",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {