@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/patternfly-no-globals.css CHANGED
@@ -8291,6 +8291,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8291
8291
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
8292
8292
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
8293
8293
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
8294
+ --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
8295
+ --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8294
8296
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
8295
8297
  --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8296
8298
  --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -8358,23 +8360,25 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8358
8360
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
8359
8361
  border: none;
8360
8362
  }
8361
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
8362
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
8363
+ .pf-v6-c-card.pf-m-current {
8364
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
8365
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth);
8366
+ --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
8367
+ --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
8368
+ }
8369
+ .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) {
8363
8370
  position: unset;
8364
8371
  }
8365
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
8366
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
8372
+ .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 {
8367
8373
  position: absolute;
8368
8374
  inset: 0;
8369
8375
  cursor: pointer;
8370
8376
  }
8371
- .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,
8372
- .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 {
8377
+ .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) {
8373
8378
  --pf-v6-c-card--BackgroundColor: revert;
8374
8379
  --pf-v6-c-card--BorderColor: revert;
8375
8380
  }
8376
- .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,
8377
- .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 {
8381
+ .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 {
8378
8382
  --pf-v6-c-card--BorderColor: revert;
8379
8383
  --pf-v6-c-card--m-selectable--BorderWidth: revert;
8380
8384
  }
@@ -8382,8 +8386,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8382
8386
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
8383
8387
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
8384
8388
  }
8385
- .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,
8386
- .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 {
8389
+ .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 {
8387
8390
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
8388
8391
  }
8389
8392
  .pf-v6-c-card.pf-m-compact {
@@ -8493,15 +8496,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8493
8496
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
8494
8497
  }
8495
8498
 
8496
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
8497
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
8499
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) {
8498
8500
  position: absolute;
8499
8501
  inset: 0;
8500
8502
  justify-self: auto;
8501
8503
  cursor: pointer;
8502
8504
  }
8503
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
8504
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
8505
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before {
8505
8506
  position: absolute;
8506
8507
  inset: 0;
8507
8508
  z-index: -1;
@@ -8510,32 +8511,28 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8510
8511
  border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
8511
8512
  border-radius: var(--pf-v6-c-card--BorderRadius);
8512
8513
  }
8513
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label:hover,
8514
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label:hover {
8514
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
8515
8515
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
8516
8516
  }
8517
8517
 
8518
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
8519
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label,
8518
+ .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),
8520
8519
  .pf-v6-c-card.pf-m-selected {
8521
8520
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
8522
8521
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
8523
8522
  }
8524
8523
 
8525
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
8526
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
8524
+ .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),
8525
+ .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) {
8527
8526
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor);
8528
8527
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth);
8529
8528
  }
8530
8529
 
8531
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-check__label,
8532
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-radio__label {
8530
+ .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) {
8533
8531
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor);
8534
8532
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth);
8535
8533
  }
8536
8534
 
8537
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
8538
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label,
8535
+ .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),
8539
8536
  .pf-v6-c-card.pf-m-disabled {
8540
8537
  --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color);
8541
8538
  --pf-v6-c-card__body--Color: var(--pf-v6-c-card--m-selectable--m-disabled__body--Color);
@@ -8544,6 +8541,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8544
8541
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor);
8545
8542
  }
8546
8543
 
8544
+ .pf-v6-c-card__clickable-action {
8545
+ background: none;
8546
+ border: 0;
8547
+ outline: 0;
8548
+ }
8549
+ .pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
8550
+ pointer-events: none;
8551
+ }
8552
+
8547
8553
  .pf-v6-c-card__header,
8548
8554
  .pf-v6-c-card__title,
8549
8555
  .pf-v6-c-card__body,
package/patternfly.css CHANGED
@@ -8412,6 +8412,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8412
8412
  --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
8413
8413
  --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
8414
8414
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
8415
+ --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
8416
+ --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8415
8417
  --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
8416
8418
  --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
8417
8419
  --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -8479,23 +8481,25 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8479
8481
  .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
8480
8482
  border: none;
8481
8483
  }
8482
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
8483
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
8484
+ .pf-v6-c-card.pf-m-current {
8485
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
8486
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth);
8487
+ --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
8488
+ --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
8489
+ }
8490
+ .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) {
8484
8491
  position: unset;
8485
8492
  }
8486
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
8487
- .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
8493
+ .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 {
8488
8494
  position: absolute;
8489
8495
  inset: 0;
8490
8496
  cursor: pointer;
8491
8497
  }
8492
- .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,
8493
- .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 {
8498
+ .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) {
8494
8499
  --pf-v6-c-card--BackgroundColor: revert;
8495
8500
  --pf-v6-c-card--BorderColor: revert;
8496
8501
  }
8497
- .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,
8498
- .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 {
8502
+ .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 {
8499
8503
  --pf-v6-c-card--BorderColor: revert;
8500
8504
  --pf-v6-c-card--m-selectable--BorderWidth: revert;
8501
8505
  }
@@ -8503,8 +8507,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8503
8507
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
8504
8508
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
8505
8509
  }
8506
- .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,
8507
- .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 {
8510
+ .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 {
8508
8511
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
8509
8512
  }
8510
8513
  .pf-v6-c-card.pf-m-compact {
@@ -8614,15 +8617,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8614
8617
  --pf-v6-c-card__actions--MarginBlockEnd: 0;
8615
8618
  }
8616
8619
 
8617
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
8618
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
8620
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) {
8619
8621
  position: absolute;
8620
8622
  inset: 0;
8621
8623
  justify-self: auto;
8622
8624
  cursor: pointer;
8623
8625
  }
8624
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
8625
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
8626
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before {
8626
8627
  position: absolute;
8627
8628
  inset: 0;
8628
8629
  z-index: -1;
@@ -8631,32 +8632,28 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8631
8632
  border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
8632
8633
  border-radius: var(--pf-v6-c-card--BorderRadius);
8633
8634
  }
8634
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__label:hover,
8635
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label:hover {
8635
+ .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
8636
8636
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
8637
8637
  }
8638
8638
 
8639
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
8640
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label,
8639
+ .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),
8641
8640
  .pf-v6-c-card.pf-m-selected {
8642
8641
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
8643
8642
  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
8644
8643
  }
8645
8644
 
8646
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
8647
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
8645
+ .pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),
8646
+ .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) {
8648
8647
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor);
8649
8648
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth);
8650
8649
  }
8651
8650
 
8652
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-check__label,
8653
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-radio__label {
8651
+ .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) {
8654
8652
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor);
8655
8653
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth);
8656
8654
  }
8657
8655
 
8658
- .pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
8659
- .pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label,
8656
+ .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),
8660
8657
  .pf-v6-c-card.pf-m-disabled {
8661
8658
  --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color);
8662
8659
  --pf-v6-c-card__body--Color: var(--pf-v6-c-card--m-selectable--m-disabled__body--Color);
@@ -8665,6 +8662,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
8665
8662
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor);
8666
8663
  }
8667
8664
 
8665
+ .pf-v6-c-card__clickable-action {
8666
+ background: none;
8667
+ border: 0;
8668
+ outline: 0;
8669
+ }
8670
+ .pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
8671
+ pointer-events: none;
8672
+ }
8673
+
8668
8674
  .pf-v6-c-card__header,
8669
8675
  .pf-v6-c-card__title,
8670
8676
  .pf-v6-c-card__body,