@patternfly/react-styles 6.0.0-alpha.34 → 6.0.0-alpha.35

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0-alpha.35](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.34...@patternfly/react-styles@6.0.0-alpha.35) (2024-08-19)
+
+### Bug Fixes
+
+- **Card:** updated markup for actionable cards ([#10859](https://github.com/patternfly/patternfly-react/issues/10859)) ([d58b051](https://github.com/patternfly/patternfly-react/commit/d58b051f8d736f55580e3df9fc2bbddf479af099))
+
 # [6.0.0-alpha.34](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.33...@patternfly/react-styles@6.0.0-alpha.34) (2024-08-08)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Card/card.css

@@ -30,6 +30,8 @@
   --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -97,23 +99,25 @@
 .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
   border: none;
 }
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
+.pf-v6-c-card.pf-m-current {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth);
+  --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
+}
+.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) {
   position: unset;
 }
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
+.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 {
   position: absolute;
   inset: 0;
   cursor: pointer;
 }
-.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,
-.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 {
+.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) {
   --pf-v6-c-card--BackgroundColor: revert;
   --pf-v6-c-card--BorderColor: revert;
 }
-.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,
-.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 {
+.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 {
   --pf-v6-c-card--BorderColor: revert;
   --pf-v6-c-card--m-selectable--BorderWidth: revert;
 }
@@ -121,8 +125,7 @@
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
 }
-.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,
-.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 {
+.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 {
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
 }
 .pf-v6-c-card.pf-m-compact {
@@ -232,15 +235,13 @@
   --pf-v6-c-card__actions--MarginBlockEnd: 0;
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) {
   position: absolute;
   inset: 0;
   justify-self: auto;
   cursor: pointer;
 }
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before {
   position: absolute;
   inset: 0;
   z-index: -1;
@@ -249,32 +250,28 @@
   border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
   border-radius: var(--pf-v6-c-card--BorderRadius);
 }
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__label:hover,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__label:hover {
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label,
+.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),
 .pf-v6-c-card.pf-m-selected {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
+.pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),
+.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) {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-radio__label {
+.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) {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label,
+.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-disabled {
   --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color);
   --pf-v6-c-card__body--Color: var(--pf-v6-c-card--m-selectable--m-disabled__body--Color);
@@ -283,6 +280,15 @@
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor);
 }
 
+.pf-v6-c-card__clickable-action {
+  background: none;
+  border: 0;
+  outline: 0;
+}
+.pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
+  pointer-events: none;
+}
+
 .pf-v6-c-card__header,
 .pf-v6-c-card__title,
 .pf-v6-c-card__body,

package/css/components/Card/card.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
+  "cardClickableAction": "pf-v6-c-card__clickable-action",
   "cardExpandableContent": "pf-v6-c-card__expandable-content",
   "cardFooter": "pf-v6-c-card__footer",
   "cardHeader": "pf-v6-c-card__header",
@@ -21,8 +22,8 @@ declare const _default: {
   "modifiers": {
     "selectable": "pf-m-selectable",
     "clickable": "pf-m-clickable",
-    "selected": "pf-m-selected",
     "current": "pf-m-current",
+    "selected": "pf-m-selected",
     "disabled": "pf-m-disabled",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",

package/css/components/Card/card.js

@@ -6,6 +6,7 @@ exports.default = {
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
+  "cardClickableAction": "pf-v6-c-card__clickable-action",
   "cardExpandableContent": "pf-v6-c-card__expandable-content",
   "cardFooter": "pf-v6-c-card__footer",
   "cardHeader": "pf-v6-c-card__header",
@@ -23,8 +24,8 @@ exports.default = {
   "modifiers": {
     "selectable": "pf-m-selectable",
     "clickable": "pf-m-clickable",
-    "selected": "pf-m-selected",
     "current": "pf-m-current",
+    "selected": "pf-m-selected",
     "disabled": "pf-m-disabled",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",

package/css/components/Card/card.mjs

@@ -4,6 +4,7 @@ export default {
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
+  "cardClickableAction": "pf-v6-c-card__clickable-action",
   "cardExpandableContent": "pf-v6-c-card__expandable-content",
   "cardFooter": "pf-v6-c-card__footer",
   "cardHeader": "pf-v6-c-card__header",
@@ -21,8 +22,8 @@ export default {
   "modifiers": {
     "selectable": "pf-m-selectable",
     "clickable": "pf-m-clickable",
-    "selected": "pf-m-selected",
     "current": "pf-m-current",
+    "selected": "pf-m-selected",
     "disabled": "pf-m-disabled",
     "compact": "pf-m-compact",
     "displayLg": "pf-m-display-lg",

package/css/components/Content/content.css

@@ -2,6 +2,7 @@
   --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
@@ -38,6 +39,7 @@
   --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
@@ -66,11 +68,16 @@
   --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
 }
 
-.pf-v6-c-content {
+[class*=pf-v6-c-content] {
   font-size: var(--pf-v6-c-content--FontSize);
   line-height: var(--pf-v6-c-content--LineHeight);
   color: var(--pf-v6-c-content--Color);
 }
+[class*=pf-v6-c-content].pf-m-editorial {
+  --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
+  --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
+}
+
 :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
   text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);

package/css/components/Content/content.d.ts

@@ -21,6 +21,7 @@ declare const _default: {
   "contentTable": "pf-v6-c-content--table",
   "contentUl": "pf-v6-c-content--ul",
   "modifiers": {
+    "editorial": "pf-m-editorial",
     "visited": "pf-m-visited",
     "plain": "pf-m-plain"
   }

package/css/components/Content/content.js

@@ -23,6 +23,7 @@ exports.default = {
   "contentTable": "pf-v6-c-content--table",
   "contentUl": "pf-v6-c-content--ul",
   "modifiers": {
+    "editorial": "pf-m-editorial",
     "visited": "pf-m-visited",
     "plain": "pf-m-plain"
   }

package/css/components/Content/content.mjs

@@ -21,6 +21,7 @@ export default {
   "contentTable": "pf-v6-c-content--table",
   "contentUl": "pf-v6-c-content--ul",
   "modifiers": {
+    "editorial": "pf-m-editorial",
     "visited": "pf-m-visited",
     "plain": "pf-m-plain"
   }

package/css/components/Form/form.css

@@ -104,8 +104,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
@@ -132,8 +132,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
@@ -160,8 +160,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
@@ -188,8 +188,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
@@ -216,8 +216,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
@@ -244,8 +244,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
@@ -272,8 +272,8 @@
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
@@ -317,6 +317,7 @@
 }
 .pf-v6-c-form__group-label.pf-m-info {
   display: flex;
+  gap: var(--pf-v6-c-form__group-label--m-info--Gap);
   align-items: flex-end;
 }
 
@@ -325,7 +326,6 @@
 }
 
 .pf-v6-c-form__group-label-info {
-  margin-inline-start: var(--pf-v6-c-form__group-label-info--MarginInlineStart);
   font-size: var(--pf-v6-c-form__group-label-info--FontSize);
 }
 

package/css/components/FormControl/form-control.css

@@ -21,8 +21,9 @@
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
   --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -33,8 +34,6 @@
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
   --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
   --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
@@ -135,8 +134,6 @@
 }
 .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
@@ -145,10 +142,6 @@
   --pf-v6-c-form-control--after--BorderStyle: none;
   --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
-.pf-v6-c-form-control:hover {
-  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
-  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
-}
 .pf-v6-c-form-control.pf-m-expanded {
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
@@ -165,6 +158,7 @@
 .pf-v6-c-form-control.pf-m-error {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
@@ -175,6 +169,7 @@
 .pf-v6-c-form-control.pf-m-success {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
@@ -185,6 +180,7 @@
 .pf-v6-c-form-control.pf-m-warning {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
@@ -192,6 +188,10 @@
 .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
+.pf-v6-c-form-control:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
+  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
+}
 .pf-v6-c-form-control.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
 }

package/css/components/_index.css

@@ -2228,6 +2228,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+  --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --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 {
 .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
   border: none;
 }
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
+.pf-v6-c-card.pf-m-current {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-clickable--m-current--BorderWidth);
+  --pf-v6-c-card--m-selectable--hover--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--m-selectable--focus--BorderColor: var(--pf-v6-c-card--m-clickable--m-current--BorderColor);
+}
+.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) {
   position: unset;
 }
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
-.pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
+.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 {
   position: absolute;
   inset: 0;
   cursor: pointer;
 }
-.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,
-.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 {
+.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) {
   --pf-v6-c-card--BackgroundColor: revert;
   --pf-v6-c-card--BorderColor: revert;
 }
-.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,
-.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 {
+.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 {
   --pf-v6-c-card--BorderColor: revert;
   --pf-v6-c-card--m-selectable--BorderWidth: revert;
 }
@@ -2319,8 +2323,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
 }
-.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,
-.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 {
+.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 {
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
 }
 .pf-v6-c-card.pf-m-compact {
@@ -2430,15 +2433,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__actions--MarginBlockEnd: 0;
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__label {
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action) {
   position: absolute;
   inset: 0;
   justify-self: auto;
   cursor: pointer;
 }
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__label::before,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__label::before {
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action)::before {
   position: absolute;
   inset: 0;
   z-index: -1;
@@ -2447,32 +2448,28 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   border: var(--pf-v6-c-card--m-selectable--BorderWidth) solid var(--pf-v6-c-card--BorderColor, transparent);
   border-radius: var(--pf-v6-c-card--BorderRadius);
 }
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__label:hover,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__label:hover {
+.pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__label, .pf-v6-c-radio__label, .pf-v6-c-card__clickable-action):hover {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--hover--BorderColor);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:checked) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:checked) ~ .pf-v6-c-radio__label,
+.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),
 .pf-v6-c-card.pf-m-selected {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--BorderColor);
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--BorderWidth);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible) ~ .pf-v6-c-radio__label {
+.pf-v6-c-card__selectable-actions .pf-v6-c-card__clickable-action:where(:focus-visible),
+.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) {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--focus--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--focus--BorderWidth);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-v6-c-radio__label {
+.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) {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderColor);
   --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-selected--focus--BorderWidth);
 }
 
-.pf-v6-c-card__selectable-actions .pf-v6-c-check__input:where(:disabled) ~ .pf-v6-c-check__label,
-.pf-v6-c-card__selectable-actions .pf-v6-c-radio__input:where(:disabled) ~ .pf-v6-c-radio__label,
+.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-disabled {
   --pf-v6-c-card__title-text--Color: var(--pf-v6-c-card--m-selectable--m-disabled__title-text--Color);
   --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 {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-disabled--BorderColor);
 }
 
+.pf-v6-c-card__clickable-action {
+  background: none;
+  border: 0;
+  outline: 0;
+}
+.pf-v6-c-card__clickable-action:disabled, .pf-v6-c-card__clickable-action.pf-m-disabled {
+  pointer-events: none;
+}
+
 .pf-v6-c-card__header,
 .pf-v6-c-card__title,
 .pf-v6-c-card__body,
@@ -2935,6 +2941,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-content--m-editorial--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-content--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
@@ -2971,6 +2978,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-content--m-editorial--small--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-content--small--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-content--a--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-content--a--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
@@ -2999,11 +3007,16 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-content--hr--BackgroundColor: var(--pf-t--global--border--color--default);
 }
 
-.pf-v6-c-content {
+[class*=pf-v6-c-content] {
   font-size: var(--pf-v6-c-content--FontSize);
   line-height: var(--pf-v6-c-content--LineHeight);
   color: var(--pf-v6-c-content--Color);
 }
+[class*=pf-v6-c-content].pf-m-editorial {
+  --pf-v6-c-content--FontSize: var(--pf-v6-c-content--m-editorial--FontSize);
+  --pf-v6-c-content--small--FontSize: var(--pf-v6-c-content--m-editorial--small--FontSize);
+}
+
 :is(.pf-v6-c-content--a, .pf-v6-c-content a) {
   color: var(--pf-v6-c-content--a--Color);
   text-decoration: var(--pf-v6-c-content--a--TextDecorationLine) var(--pf-v6-c-content--a--TextDecorationStyle);
@@ -6387,8 +6400,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label-main {
@@ -6415,8 +6428,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xs .pf-v6-c-form__group-label-main {
@@ -6443,8 +6456,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-sm .pf-v6-c-form__group-label-main {
@@ -6471,8 +6484,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-md .pf-v6-c-form__group-label-main {
@@ -6499,8 +6512,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-lg .pf-v6-c-form__group-label-main {
@@ -6527,8 +6540,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-xl .pf-v6-c-form__group-label-main {
@@ -6555,8 +6568,8 @@ ul) {
     transform: translateY(var(--pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY));
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label.pf-m-info {
+    --pf-v6-c-form__group-label--m-info--Gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     flex-direction: column;
-    gap: var(--pf-v6-c-form--m-horizontal__group-label--m-info--Gap);
     align-items: flex-start;
   }
   .pf-v6-c-form.pf-m-horizontal-on-2xl .pf-v6-c-form__group-label-main {
@@ -6600,6 +6613,7 @@ ul) {
 }
 .pf-v6-c-form__group-label.pf-m-info {
   display: flex;
+  gap: var(--pf-v6-c-form__group-label--m-info--Gap);
   align-items: flex-end;
 }
 
@@ -6608,7 +6622,6 @@ ul) {
 }
 
 .pf-v6-c-form__group-label-info {
-  margin-inline-start: var(--pf-v6-c-form__group-label-info--MarginInlineStart);
   font-size: var(--pf-v6-c-form__group-label-info--FontSize);
 }
 
@@ -6823,8 +6836,9 @@ ul) {
   --pf-v6-c-form-control--PaddingInlineStart: var(--pf-v6-c-form-control--inset--base);
   --pf-v6-c-form-control--hover--after--BorderWidth: var(--pf-t--global--border--width--control--hover);
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-form-control--m-success--hover--after--BorderColor: var(--pf-t--global--border--color--status--success--hover);
+  --pf-v6-c-form-control--m-warning--hover--after--BorderColor: var(--pf-t--global--border--color--status--warning--hover);
+  --pf-v6-c-form-control--m-error--hover--after--BorderColor: var(--pf-t--global--border--color--status--danger--hover);
   --pf-v6-c-form-control--m-expanded--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-form-control--m-expanded--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
@@ -6835,8 +6849,6 @@ ul) {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
   --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
-  --pf-v6-c-form-control--m-readonly--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
   --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
@@ -6937,8 +6949,6 @@ ul) {
 }
 .pf-v6-c-form-control.pf-m-readonly:not(.pf-m-success, .pf-m-warning, .pf-m-error) {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
-  --pf-v6-c-form-control--focus--after--BorderWidth: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderWidth);
-  --pf-v6-c-form-control--focus--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--focus--after--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
@@ -6947,10 +6957,6 @@ ul) {
   --pf-v6-c-form-control--after--BorderStyle: none;
   --pf-v6-c-form-control--OutlineOffset: var(--pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset);
 }
-.pf-v6-c-form-control:hover {
-  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
-  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
-}
 .pf-v6-c-form-control.pf-m-expanded {
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-expanded--after--BorderColor);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-expanded--after--BorderWidth);
@@ -6967,6 +6973,7 @@ ul) {
 .pf-v6-c-form-control.pf-m-error {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-error--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-error__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-error--after--BorderWidth);
@@ -6977,6 +6984,7 @@ ul) {
 .pf-v6-c-form-control.pf-m-success {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-success--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-success--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-success--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-success__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-success--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-success--after--BorderWidth);
@@ -6987,6 +6995,7 @@ ul) {
 .pf-v6-c-form-control.pf-m-warning {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-warning--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-warning--after--BorderColor);
+  --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-warning--hover--after--BorderColor);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-v6-c-form-control--m-warning__icon--m-status--Color);
   --pf-v6-c-form-control__select--PaddingInlineEnd: var(--pf-v6-c-form-control__select--m-warning--m-status--PaddingInlineEnd);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--m-warning--after--BorderWidth);
@@ -6994,6 +7003,10 @@ ul) {
 .pf-v6-c-form-control.pf-m-warning.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--icon--PaddingInlineEnd);
 }
+.pf-v6-c-form-control:hover {
+  --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--hover--after--BorderColor);
+  --pf-v6-c-form-control--after--BorderWidth: var(--pf-v6-c-form-control--hover--after--BorderWidth);
+}
 .pf-v6-c-form-control.pf-m-icon {
   --pf-v6-c-form-control--PaddingInlineEnd: var(--pf-v6-c-form-control--m-icon--PaddingInlineEnd);
 }

package/css/components/_index.d.ts

@@ -61,6 +61,7 @@ declare const _default: {
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
+  "cardClickableAction": "pf-v6-c-card__clickable-action",
   "cardExpandableContent": "pf-v6-c-card__expandable-content",
   "cardFooter": "pf-v6-c-card__footer",
   "cardHeader": "pf-v6-c-card__header",
@@ -412,6 +413,7 @@ declare const _default: {
     "code": "pf-m-code",
     "readOnly": "pf-m-read-only",
     "dragHover": "pf-m-drag-hover",
+    "editorial": "pf-m-editorial",
     "visited": "pf-m-visited",
     "icon": "pf-m-icon",
     "alignRight": "pf-m-align-right",

package/css/components/_index.js

@@ -63,6 +63,7 @@ exports.default = {
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
+  "cardClickableAction": "pf-v6-c-card__clickable-action",
   "cardExpandableContent": "pf-v6-c-card__expandable-content",
   "cardFooter": "pf-v6-c-card__footer",
   "cardHeader": "pf-v6-c-card__header",
@@ -414,6 +415,7 @@ exports.default = {
     "code": "pf-m-code",
     "readOnly": "pf-m-read-only",
     "dragHover": "pf-m-drag-hover",
+    "editorial": "pf-m-editorial",
     "visited": "pf-m-visited",
     "icon": "pf-m-icon",
     "alignRight": "pf-m-align-right",

package/css/components/_index.mjs

@@ -61,6 +61,7 @@ export default {
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
+  "cardClickableAction": "pf-v6-c-card__clickable-action",
   "cardExpandableContent": "pf-v6-c-card__expandable-content",
   "cardFooter": "pf-v6-c-card__footer",
   "cardHeader": "pf-v6-c-card__header",
@@ -412,6 +413,7 @@ export default {
     "code": "pf-m-code",
     "readOnly": "pf-m-read-only",
     "dragHover": "pf-m-drag-hover",
+    "editorial": "pf-m-editorial",
     "visited": "pf-m-visited",
     "icon": "pf-m-icon",
     "alignRight": "pf-m-align-right",

package/css/docs/components/Sidebar/examples/Sidebar.css

@@ -1,4 +1,6 @@
-.ws-core-c-sidebar .ws-preview-html {
-  height: 200px;
+#ws-core-c-sidebar-sticky-panel,
+#ws-core-c-sidebar-static-panel,
+#ws-core-c-sidebar-responsive-panel-width {
   overflow: auto;
+  max-height: 200px;
 }

package/css/docs/components/Sidebar/examples/Sidebar.d.ts

@@ -1,6 +1,3 @@
 import './Sidebar.css';
-declare const _default: {
-  "wsCoreCSidebar": "ws-core-c-sidebar",
-  "wsPreviewHtml": "ws-preview-html"
-};
+declare const _default: {};
 export default _default;

package/css/docs/components/Sidebar/examples/Sidebar.js

@@ -1,7 +1,4 @@
 "use strict";
 exports.__esModule = true;
 require('./Sidebar.css');
-exports.default = {
-  "wsCoreCSidebar": "ws-core-c-sidebar",
-  "wsPreviewHtml": "ws-preview-html"
-};
+exports.default = {};

package/css/docs/components/Sidebar/examples/Sidebar.mjs

@@ -1,5 +1,2 @@
 import './Sidebar.css';
-export default {
-  "wsCoreCSidebar": "ws-core-c-sidebar",
-  "wsPreviewHtml": "ws-preview-html"
-};
+export default {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.0.0-alpha.34",
+  "version": "6.0.0-alpha.35",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.205",
+    "@patternfly/patternfly": "6.0.0-alpha.210",
     "change-case": "^5.4.4",
     "fs-extra": "^11.2.0"
   },
   "license": "MIT",
-  "gitHead": "19631bb68902f7cd7b0c3c20d08088b94eab321d"
+  "gitHead": "11fa597623c93a0cab58d80a1768ca16bd903759"
 }