@patternfly/react-styles 6.0.0-alpha.2 → 6.0.0-alpha.4

package/css/components/Card/card.js

@@ -15,6 +15,7 @@ exports.default = {
   "cardSrInput": "pf-v5-c-card__sr-input",
   "cardTitle": "pf-v5-c-card__title",
   "cardTitleText": "pf-v5-c-card__title-text",
+  "check": "pf-v5-c-check",
   "checkInput": "pf-v5-c-check__input",
   "checkLabel": "pf-v5-c-check__label",
   "dirRtl": "pf-v5-m-dir-rtl",
@@ -40,6 +41,7 @@ exports.default = {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
+  "radio": "pf-v5-c-radio",
   "radioInput": "pf-v5-c-radio__input",
   "radioLabel": "pf-v5-c-radio__label",
   "themeDark": "pf-v5-theme-dark"

package/css/components/Card/card.mjs

@@ -13,6 +13,7 @@ export default {
   "cardSrInput": "pf-v5-c-card__sr-input",
   "cardTitle": "pf-v5-c-card__title",
   "cardTitleText": "pf-v5-c-card__title-text",
+  "check": "pf-v5-c-check",
   "checkInput": "pf-v5-c-check__input",
   "checkLabel": "pf-v5-c-check__label",
   "dirRtl": "pf-v5-m-dir-rtl",
@@ -38,6 +39,7 @@ export default {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
+  "radio": "pf-v5-c-radio",
   "radioInput": "pf-v5-c-radio__input",
   "radioLabel": "pf-v5-c-radio__label",
   "themeDark": "pf-v5-theme-dark"

package/css/components/Check/check.css

@@ -5,7 +5,8 @@
   --pf-v5-c-check__label--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-check__label--FontSize: var(--pf-v5-global--FontSize--md);
   --pf-v5-c-check__label--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-check__input--TranslateY--moz: 5px;
+  --pf-v5-c-check__input--TranslateY: calc((var(--pf-v5-c-check__label--LineHeight) * var(--pf-v5-c-check__label--FontSize) / 2 ) - 50%);
+  --pf-v5-c-check__input--TranslateY--moz: var(--pf-v5-c-check__input--TranslateY);
   --pf-v5-c-check__description--FontSize: var(--pf-v5-global--FontSize--sm);
   --pf-v5-c-check__description--Color: var(--pf-v5-global--Color--200);
   --pf-v5-c-check__body--MarginTop: var(--pf-v5-global--spacer--sm);
@@ -15,15 +16,21 @@
   display: grid;
   grid-template-columns: auto 1fr;
   grid-gap: var(--pf-v5-c-check--GridGap);
+  align-items: baseline;
 }
 .pf-v5-c-check.pf-m-standalone {
   --pf-v5-c-check--GridGap: 0;
-  --pf-v5-c-check__input--TranslateY--moz: 0;
+  --pf-v5-c-check__input--TranslateY: none;
   display: inline-grid;
 }
 
+.pf-v5-c-check__input {
+  align-self: start;
+  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
+  transform: translateY(var(--pf-v5-c-check__input--TranslateY));
+}
+
 .pf-v5-c-check__label {
-  align-self: baseline;
   font-size: var(--pf-v5-c-check__label--FontSize);
   font-weight: var(--pf-v5-c-check__label--FontWeight);
   line-height: var(--pf-v5-c-check__label--LineHeight);
@@ -41,11 +48,6 @@
   margin-block-start: var(--pf-v5-c-check__body--MarginTop);
 }
 
-.pf-v5-c-check__input {
-  align-self: baseline;
-  -moz-transform: translateY(var(--pf-v5-c-check__input--TranslateY--moz));
-}
-
 .pf-v5-c-check__label,
 .pf-v5-c-check__input {
   justify-self: start;

package/css/components/Content/content.css

@@ -1,39 +1,39 @@
 .pf-v5-c-content {
   --pf-v5-c-content--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body);
+  --pf-v5-c-content--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v5-c-content--FontWeight: var(--pf-t--global--font--weight--body);
   --pf-v5-c-content--Color: var(--pf-t--global--text--color--regular);
   --pf-v5-c-content--heading--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v5-c-content--h1--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h1--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h1--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--lg);
+  --pf-v5-c-content--h1--FontSize: var(--pf-t--global--font--size--heading--h1);
   --pf-v5-c-content--h1--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h2--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h2--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h2--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-content--h2--FontSize: var(--pf-t--global--font--size--heading--h2);
   --pf-v5-c-content--h2--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h3--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h3--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h3--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--sm);
+  --pf-v5-c-content--h3--FontSize: var(--pf-t--global--font--size--heading--h3);
   --pf-v5-c-content--h3--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h4--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h4--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h4--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h4--FontSize: var(--pf-t--global--font--size--heading--h4);
   --pf-v5-c-content--h4--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h5--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h5--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h5--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h5--FontSize: var(--pf-t--global--font--size--heading--h5);
   --pf-v5-c-content--h5--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--h6--MarginTop: var(--pf-t--global--spacer--lg);
   --pf-v5-c-content--h6--MarginBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
-  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v5-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading);
   --pf-v5-c-content--small--MarginBottom: var(--pf-t--global--spacer--md);
   --pf-v5-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);

package/css/components/Dropdown/dropdown.css

@@ -279,14 +279,12 @@
 }
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check > input,
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check {
+  --pf-v5-c-check__input--TranslateY: none;
   align-self: revert;
   width: auto;
   cursor: pointer;
   visibility: var(--pf-v5-c-dropdown__toggle--m-split-button__toggle-check__input--Visibility, unset);
 }
-.pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-check .pf-v5-c-check__input {
-  -moz-transform: none;
-}
 .pf-v5-c-dropdown__toggle.pf-m-split-button .pf-v5-c-dropdown__toggle-button {
   color: var(--pf-v5-c-dropdown__toggle-button--Color);
   background-color: var(--pf-v5-c-dropdown__toggle-button--BackgroundColor);

package/css/components/Dropdown/dropdown.d.ts

@@ -2,7 +2,6 @@ import './dropdown.css';
 declare const _default: {
   "badge": "pf-v5-c-badge",
   "check": "pf-v5-c-check",
-  "checkInput": "pf-v5-c-check__input",
   "divider": "pf-v5-c-divider",
   "dropdown": "pf-v5-c-dropdown",
   "dropdownGroup": "pf-v5-c-dropdown__group",

package/css/components/Dropdown/dropdown.js

@@ -4,7 +4,6 @@ require('./dropdown.css');
 exports.default = {
   "badge": "pf-v5-c-badge",
   "check": "pf-v5-c-check",
-  "checkInput": "pf-v5-c-check__input",
   "divider": "pf-v5-c-divider",
   "dropdown": "pf-v5-c-dropdown",
   "dropdownGroup": "pf-v5-c-dropdown__group",

package/css/components/Dropdown/dropdown.mjs

@@ -2,7 +2,6 @@ import './dropdown.css';
 export default {
   "badge": "pf-v5-c-badge",
   "check": "pf-v5-c-check",
-  "checkInput": "pf-v5-c-check__input",
   "divider": "pf-v5-c-divider",
   "dropdown": "pf-v5-c-dropdown",
   "dropdownGroup": "pf-v5-c-dropdown__group",

package/css/components/EmptyState/empty-state.css

@@ -1,41 +1,49 @@
-.pf-v5-c-empty-state {
-  --pf-v5-c-empty-state--PaddingTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--PaddingRight: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--PaddingBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--PaddingLeft: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-v5-global--spacer--md);
+:root {
+  --pf-v5-c-empty-state--PaddingTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--PaddingRight: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--PaddingBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--m-xs--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xs--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xs--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xs--PaddingLeft: var(--pf-t--global--spacer--md);
   --pf-v5-c-empty-state__content--MaxWidth: none;
   --pf-v5-c-empty-state--m-xs__content--MaxWidth: 21.875rem;
   --pf-v5-c-empty-state--m-sm__content--MaxWidth: 25rem;
   --pf-v5-c-empty-state--m-lg__content--MaxWidth: 37.5rem;
-  --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-empty-state__icon--FontSize: var(--pf-v5-global--icon--FontSize--xl);
-  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-global--icon--Color--light);
-  --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--m-xl__icon--FontSize: 6.25rem;
-  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
-  --pf-v5-c-empty-state__title-text--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
-  --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-v5-global--FontSize--4xl);
-  --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
-  --pf-v5-c-empty-state__body--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state__body--Color: var(--pf-v5-global--Color--200);
-  --pf-v5-c-empty-state--body--FontSize: var(--pf-v5-global--FontSize--md);
-  --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-v5-global--FontSize--sm);
-  --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-v5-global--FontSize--xl);
-  --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-empty-state__footer--RowGap: var(--pf-v5-global--spacer--sm);
-  --pf-v5-c-empty-state__footer--MarginTop: var(--pf-v5-global--spacer--xl);
-  --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-empty-state__actions--RowGap: var(--pf-v5-global--spacer--xs);
-  --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-v5-global--spacer--xs);
+  --pf-v5-c-empty-state__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-empty-state__icon--FontSize: var(--pf-t--global--icon--size--2xl);
+  --pf-v5-c-empty-state__icon--Color: var(--pf-t--global--icon--color--subtle);
+  --pf-v5-c-empty-state--m-xs__icon--MarginBottom: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-empty-state--m-xl__icon--MarginBottom: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--m-xl__icon--FontSize: var(--pf-t--global--icon--size--3xl);
+  --pf-v5-c-empty-state--m-danger__icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+  --pf-v5-c-empty-state--m-warning__icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+  --pf-v5-c-empty-state--m-success__icon--Color: var(--pf-t--global--icon--color--status--success--default);
+  --pf-v5-c-empty-state--m-info__icon--Color: var(--pf-t--global--icon--color--status--info--default);
+  --pf-v5-c-empty-state--m-custom__icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+  --pf-v5-c-empty-state__title-text--FontFamily: var(--pf-t--global--font--family--heading);
+  --pf-v5-c-empty-state__title-text--FontSize: var(--pf-t--global--font--size--heading--md);
+  --pf-v5-c-empty-state__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --pf-v5-c-empty-state__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-empty-state--m-xs__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
+  --pf-v5-c-empty-state--m-xl__title-text--FontSize: var(--pf-t--global--font--size--heading--2xl);
+  --pf-v5-c-empty-state--m-xl__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v5-c-empty-state__body--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state__body--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v5-c-empty-state--body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-empty-state--m-xs__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-empty-state--m-xs__body--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state--m-xl__body--FontSize: var(--pf-t--global--font--size--body--lg);
+  --pf-v5-c-empty-state--m-xl__body--MarginTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state__footer--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-empty-state__footer--MarginTop: var(--pf-t--global--spacer--xl);
+  --pf-v5-c-empty-state--m-xs__footer--MarginTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-empty-state__actions--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-empty-state__actions--ColumnGap: var(--pf-t--global--spacer--md);
+}
+
+.pf-v5-c-empty-state {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -74,6 +82,21 @@
 .pf-v5-c-empty-state.pf-m-full-height {
   height: 100%;
 }
+.pf-v5-c-empty-state.pf-m-danger {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-danger__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-warning {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-warning__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-success {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-success__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-info {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-info__icon--Color);
+}
+.pf-v5-c-empty-state.pf-m-custom {
+  --pf-v5-c-empty-state__icon--Color: var(--pf-v5-c-empty-state--m-custom__icon--Color);
+}
 
 .pf-v5-c-empty-state__content {
   max-width: var(--pf-v5-c-empty-state__content--MaxWidth);

package/css/components/EmptyState/empty-state.d.ts

@@ -12,7 +12,12 @@ declare const _default: {
     "sm": "pf-m-sm",
     "lg": "pf-m-lg",
     "xl": "pf-m-xl",
-    "fullHeight": "pf-m-full-height"
+    "fullHeight": "pf-m-full-height",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom"
   }
 };
 export default _default;

package/css/components/EmptyState/empty-state.js

@@ -14,6 +14,11 @@ exports.default = {
     "sm": "pf-m-sm",
     "lg": "pf-m-lg",
     "xl": "pf-m-xl",
-    "fullHeight": "pf-m-full-height"
+    "fullHeight": "pf-m-full-height",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom"
   }
 };

package/css/components/EmptyState/empty-state.mjs

@@ -12,6 +12,11 @@ export default {
     "sm": "pf-m-sm",
     "lg": "pf-m-lg",
     "xl": "pf-m-xl",
-    "fullHeight": "pf-m-full-height"
+    "fullHeight": "pf-m-full-height",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom"
   }
 };

package/css/components/ExpandableSection/expandable-section.css

@@ -1,50 +1,59 @@
-.pf-v5-c-expandable-section {
-  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-global--spacer--form-element);
-  --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
-  --pf-v5-c-expandable-section__toggle--MarginTop: 0;
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-global--link--Color);
-  --pf-v5-c-expandable-section__toggle--hover--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--active--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--focus--Color: var(--pf-v5-global--link--Color--hover);
-  --pf-v5-c-expandable-section__toggle--m-expanded--Color: var(--pf-v5-global--link--Color--hover);
+:root {
+  --pf-v5-c-expandable-section__toggle--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__toggle--BackgroundColor: transparent;
+  --pf-v5-c-expandable-section__toggle--ColumnGap: calc(var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--sm));
   --pf-v5-c-expandable-section__toggle-icon--MinWidth: 1em;
-  --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v5-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
   --pf-v5-c-expandable-section__toggle-icon--Rotate: 0;
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
-  --pf-v5-c-expandable-section__toggle-text--MarginLeft: calc(var(--pf-v5-global--spacer--xs) + var(--pf-v5-global--spacer--sm));
-  --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-t--global--color--brand--default);
+  --pf-v5-c-expandable-section__toggle-text--hover--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section--m-expanded__toggle-text--Color: var(--pf-t--global--color--brand--hover);
+  --pf-v5-c-expandable-section__content--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section__content--MaxWidth: auto;
   --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
-  --pf-v5-c-expandable-section--m-display-lg--BoxShadow: var(--pf-v5-global--BoxShadow--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-v5-global--spacer--md);
-  --pf-v5-c-expandable-section--m-display-lg__content--MarginTop: 0;
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-v5-global--spacer--lg);
-  --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: transparent;
-  --pf-v5-c-expandable-section--m-display-lg--after--Width: var(--pf-v5-global--BorderWidth--lg);
-  --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor: var(--pf-v5-global--primary-color--100);
-  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section__toggle-text--MarginLeft) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
+  --pf-v5-c-expandable-section--m-display-lg--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v5-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v5-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--Width: 100%;
+  --pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius: var(--pf-t--global--border--radius--medium) var(--pf-t--global--border--radius--medium) 0 0;
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base: calc(var(--pf-v5-c-expandable-section__toggle--ColumnGap) + var(--pf-v5-c-expandable-section__toggle-icon--MinWidth));
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section__toggle--PaddingLeft));
+  --pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft: calc(var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft--base) + var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft));
+  --pf-v5-c-expandable-section--m-truncate--PaddingTop: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section--m-truncate--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-truncate--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --pf-v5-c-expandable-section--m-truncate--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
   --pf-v5-c-expandable-section--m-truncate__content--LineClamp: 3;
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: var(--pf-v5-global--spacer--xs);
 }
+
 .pf-v5-c-expandable-section.pf-m-expanded {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--m-expanded--Color);
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section--m-expanded__toggle-text--Color);
   --pf-v5-c-expandable-section__toggle-icon--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor);
-}
-.pf-v5-c-expandable-section.pf-m-detached, .pf-v5-c-expandable-section.pf-m-truncate {
-  --pf-v5-c-expandable-section__content--MarginTop: 0;
+  --pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-expanded--m-display-lg__toggle--BorderRadius);
 }
 .pf-v5-c-expandable-section.pf-m-limit-width {
   --pf-v5-c-expandable-section__content--MaxWidth: var(--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -54,31 +63,31 @@
   --pf-v5-c-expandable-section__toggle--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight);
   --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom);
   --pf-v5-c-expandable-section__toggle--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft);
+  --pf-v5-c-expandable-section__toggle--hover--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--hover--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--active--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--active--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--focus--BackgroundColor: var(--pf-v5-c-expandable-section--m-display-lg__toggle--focus--BackgroundColor);
+  --pf-v5-c-expandable-section__toggle--BorderRadius: var(--pf-v5-c-expandable-section--m-display-lg__toggle--BorderRadius);
+  --pf-v5-c-expandable-section__toggle--Width: var(--pf-v5-c-expandable-section--m-display-lg__toggle--Width);
   --pf-v5-c-expandable-section__content--PaddingRight: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight);
   --pf-v5-c-expandable-section__content--PaddingBottom: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom);
   --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft);
-  --pf-v5-c-expandable-section__content--MarginTop: var(--pf-v5-c-expandable-section--m-display-lg__content--MarginTop);
-  position: relative;
-  box-shadow: var(--pf-v5-c-expandable-section--m-display-lg--BoxShadow);
-}
-.pf-v5-c-expandable-section.pf-m-display-lg::after {
-  position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  width: var(--pf-v5-c-expandable-section--m-display-lg--after--Width);
-  content: "";
-  background-color: var(--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor);
+  --pf-v5-c-expandable-section--m-indented__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-display-lg--m-indented__content--PaddingLeft);
+  background-color: var(--pf-v5-c-expandable-section--m-display-lg--BackgroundColor);
+  border: solid 1px var(--pf-v5-c-expandable-section--m-display-lg--BorderColor);
+  border-radius: var(--pf-v5-c-expandable-section--m-display-lg--BorderRadius);
 }
 .pf-v5-c-expandable-section.pf-m-indented {
   --pf-v5-c-expandable-section__content--PaddingLeft: var(--pf-v5-c-expandable-section--m-indented__content--PaddingLeft);
 }
 .pf-v5-c-expandable-section.pf-m-truncate {
-  --pf-v5-c-expandable-section__toggle--MarginTop: var(--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop);
   --pf-v5-c-expandable-section__toggle--PaddingTop: 0;
   --pf-v5-c-expandable-section__toggle--PaddingRight: 0;
-  --pf-v5-c-expandable-section__toggle--PaddingBottom: 0;
-  --pf-v5-c-expandable-section__toggle-text--MarginLeft: 0;
+  --pf-v5-c-expandable-section__toggle--PaddingBottom: var(--pf-v5-c-expandable-section--m-truncate__toggle--PaddingBottom);
+  --pf-v5-c-expandable-section__toggle--PaddingLeft: 0;
+  --pf-v5-c-expandable-section__content--PaddingTop: 0;
+  --pf-v5-c-expandable-section__content--PaddingRight: 0;
+  --pf-v5-c-expandable-section__content--PaddingBottom: 0;
+  --pf-v5-c-expandable-section__content--PaddingLeft: 0;
 }
 .pf-v5-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v5-c-expandable-section__content {
   display: -webkit-box;
@@ -86,29 +95,22 @@
   -webkit-line-clamp: var(--pf-v5-c-expandable-section--m-truncate__content--LineClamp);
   overflow: hidden;
 }
-.pf-v5-c-expandable-section.pf-m-detached {
-  --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop: 0;
-}
 
 .pf-v5-c-expandable-section__toggle {
   display: flex;
+  column-gap: var(--pf-v5-c-expandable-section__toggle--ColumnGap);
+  width: var(--pf-v5-c-expandable-section__toggle--Width, initial);
   padding-block-start: var(--pf-v5-c-expandable-section__toggle--PaddingTop);
   padding-block-end: var(--pf-v5-c-expandable-section__toggle--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-expandable-section__toggle--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-expandable-section__toggle--PaddingRight);
-  margin-block-start: var(--pf-v5-c-expandable-section__toggle--MarginTop);
-  color: var(--pf-v5-c-expandable-section__toggle--Color);
   background-color: var(--pf-v5-c-expandable-section__toggle--BackgroundColor);
   border: none;
+  border-radius: var(--pf-v5-c-expandable-section__toggle--BorderRadius, 0);
 }
-.pf-v5-c-expandable-section__toggle:hover {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--hover--Color);
-}
-.pf-v5-c-expandable-section__toggle:active, .pf-v5-c-expandable-section__toggle.pf-m-active {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--active--Color);
-}
-.pf-v5-c-expandable-section__toggle:focus {
-  --pf-v5-c-expandable-section__toggle--Color: var(--pf-v5-c-expandable-section__toggle--focus--Color);
+.pf-v5-c-expandable-section__toggle:is(:hover, :focus) {
+  --pf-v5-c-expandable-section__toggle-text--Color: var(--pf-v5-c-expandable-section__toggle-text--hover--Color);
+  --pf-v5-c-expandable-section__toggle--BackgroundColor: var(--pf-v5-c-expandable-section__toggle--hover--BackgroundColor, initial);
 }
 
 .pf-v5-c-expandable-section__toggle-icon {
@@ -126,13 +128,13 @@
 }
 
 .pf-v5-c-expandable-section__toggle-text {
-  margin-inline-start: var(--pf-v5-c-expandable-section__toggle-text--MarginLeft);
+  color: var(--pf-v5-c-expandable-section__toggle-text--Color);
 }
 
 .pf-v5-c-expandable-section__content {
   max-width: var(--pf-v5-c-expandable-section__content--MaxWidth);
+  padding-block-start: var(--pf-v5-c-expandable-section__content--PaddingTop);
   padding-block-end: var(--pf-v5-c-expandable-section__content--PaddingBottom);
   padding-inline-start: var(--pf-v5-c-expandable-section__content--PaddingLeft);
   padding-inline-end: var(--pf-v5-c-expandable-section__content--PaddingRight);
-  margin-block-start: var(--pf-v5-c-expandable-section__content--MarginTop);
 }

package/css/components/ExpandableSection/expandable-section.d.ts

@@ -8,12 +8,10 @@ declare const _default: {
   "expandableSectionToggleText": "pf-v5-c-expandable-section__toggle-text",
   "modifiers": {
     "expanded": "pf-m-expanded",
-    "detached": "pf-m-detached",
-    "truncate": "pf-m-truncate",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "active": "pf-m-active",
+    "truncate": "pf-m-truncate",
     "expandTop": "pf-m-expand-top"
   }
 };

package/css/components/ExpandableSection/expandable-section.js

@@ -10,12 +10,10 @@ exports.default = {
   "expandableSectionToggleText": "pf-v5-c-expandable-section__toggle-text",
   "modifiers": {
     "expanded": "pf-m-expanded",
-    "detached": "pf-m-detached",
-    "truncate": "pf-m-truncate",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "active": "pf-m-active",
+    "truncate": "pf-m-truncate",
     "expandTop": "pf-m-expand-top"
   }
 };

package/css/components/ExpandableSection/expandable-section.mjs

@@ -8,12 +8,10 @@ export default {
   "expandableSectionToggleText": "pf-v5-c-expandable-section__toggle-text",
   "modifiers": {
     "expanded": "pf-m-expanded",
-    "detached": "pf-m-detached",
-    "truncate": "pf-m-truncate",
     "limitWidth": "pf-m-limit-width",
     "displayLg": "pf-m-display-lg",
     "indented": "pf-m-indented",
-    "active": "pf-m-active",
+    "truncate": "pf-m-truncate",
     "expandTop": "pf-m-expand-top"
   }
 };

package/css/components/Form/form.css

@@ -247,6 +247,9 @@
   max-width: var(--pf-v5-c-form--m-limit-width--MaxWidth);
 }
 
+.pf-v5-c-form__group {
+  min-width: 0;
+}
 .pf-v5-c-form__group.pf-m-action {
   margin-block-start: var(--pf-v5-c-form__group--m-action--MarginTop);
   overflow: hidden;
@@ -335,6 +338,9 @@
   --pf-v5-c-form__group-label-help--Color: var(--pf-v5-c-form__group-label-help--focus--Color);
 }
 
+.pf-v5-c-form__group-control {
+  min-width: 0;
+}
 .pf-v5-c-form__group-control.pf-m-inline {
   display: flex;
   flex-flow: row wrap;