@patternfly/react-styles 5.0.0-alpha.6 → 5.0.0-alpha.8

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 5.0.0-alpha.8 (2023-04-25)
+
+### Bug Fixes
+
+- bump dependencies and remove ssl option ([#8984](https://github.com/patternfly/patternfly-react/issues/8984)) ([f8f77d2](https://github.com/patternfly/patternfly-react/commit/f8f77d232b386ad8676af609273d9adff5a5feae))
+
+# 5.0.0-alpha.7 (2023-04-13)
+
+### Bug Fixes
+
+- general clean up ([#8944](https://github.com/patternfly/patternfly-react/issues/8944)) ([7a6ea59](https://github.com/patternfly/patternfly-react/commit/7a6ea59c7b029cd5ffe22117fa81706c28feadfe))
+
 # 5.0.0-alpha.6 (2023-04-03)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Card/card.css

@@ -23,13 +23,23 @@
   --pf-c-card__header-toggle--MarginLeft: calc(var(--pf-global--spacer--md) * -1);
   --pf-c-card__header-toggle-icon--Transition: var(--pf-global--Transition);
   --pf-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
-  --pf-c-card--m-hoverable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
+  --pf-c-card--m-selectable--BorderWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-card--m-selectable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--200);
+  --pf-c-card--m-selectable--m-selected--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--hover--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-card--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--m-selected--BoxShadow: var(--pf-global--BoxShadow--lg);
-  --pf-c-card--m-selectable--m-selected--before--Height: var(--pf-global--BorderWidth--lg);
-  --pf-c-card--m-selectable--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--focus--BackgroundColor: var(--pf-global--palette--blue-100);
+  --pf-c-card--m-selectable--focus--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--m-selected--focus--BorderColor: var(--pf-global--active-color--100);
+  --pf-c-card--m-selectable--m-disabled--BackgroundColor: var(--pf-global--palette--black-100);
+  --pf-c-card--m-selectable--m-disabled--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-card--m-selectable--m-disabled--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-card--m-selectable--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-card--m-selectable--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm);
+  --pf-c-card--m-selectable--m-clickable--m-selected--BorderColor: var(--pf-global--BorderColor--100);
+  --pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor: var(--pf-global--palette--black-150);
+  --pf-c-card--m-selectable--m-clickable--m-current--BorderColor: var(--pf-global--active-color--100);
   --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-card--m-hoverable-raised--hover--before--BackgroundColor: var(--pf-global--active-color--400);
   --pf-c-card--m-selectable-raised--before--Right: 0;
@@ -89,41 +99,49 @@
   --pf-c-card__header--m-toggle-right--toggle--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-card__input--focus--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-card__input--focus--BorderColor: var(--pf-global--primary-color--100);
+  position: relative;
   display: flex;
   flex-direction: column;
   background-color: var(--pf-c-card--BackgroundColor);
   box-shadow: var(--pf-c-card--BoxShadow);
 }
-.pf-c-card.pf-m-hoverable:hover {
-  box-shadow: var(--pf-c-card--m-hoverable--hover--BoxShadow);
+.pf-c-card.pf-m-selectable, .pf-c-card.pf-m-clickable {
+  isolation: isolate;
+  box-shadow: none;
 }
-.pf-c-card.pf-m-selectable {
-  position: relative;
-  cursor: pointer;
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label {
+  position: unset;
 }
-.pf-c-card.pf-m-selectable:hover {
-  box-shadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__label::before,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__label::before {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
 }
-.pf-c-card.pf-m-selectable:focus {
-  box-shadow: var(--pf-c-card--m-selectable--focus--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
+  --pf-c-card--BackgroundColor: unset;
+  --pf-c-card--BorderColor: unset;
 }
-.pf-c-card.pf-m-selectable:active {
-  box-shadow: var(--pf-c-card--m-selectable--active--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-selected {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-selected--BorderColor);
 }
-.pf-c-card.pf-m-selectable.pf-m-selected {
-  box-shadow: var(--pf-c-card--m-selectable--m-selected--BoxShadow);
+.pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
 }
-.pf-c-card.pf-m-selectable.pf-m-selected::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: var(--pf-c-card--m-selectable--m-selected--before--Height);
-  content: "";
-  background-color: var(--pf-c-card--m-selectable--m-selected--before--BackgroundColor);
+.pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current.pf-m-selected, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-current .pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-clickable--m-current--BorderColor);
 }
-.pf-c-card.pf-m-hoverable-raised, .pf-c-card.pf-m-selectable-raised, .pf-c-card.pf-m-non-selectable-raised {
-  position: relative;
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
+.pf-c-card.pf-m-selectable.pf-m-clickable .pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label, .pf-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
 }
 .pf-c-card.pf-m-hoverable-raised::before, .pf-c-card.pf-m-selectable-raised::before, .pf-c-card.pf-m-non-selectable-raised::before {
   position: absolute;
@@ -276,6 +294,54 @@
   --pf-c-card__actions--MarginBottom: 0;
 }
 
+.pf-c-card__selectable-actions .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__label {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+}
+.pf-c-card__selectable-actions .pf-c-check__label::before,
+.pf-c-card__selectable-actions .pf-c-radio__label::before {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  content: "";
+  background-color: var(--pf-c-card--BackgroundColor, transparent);
+  border: var(--pf-c-card--m-selectable--BorderWidth) solid var(--pf-c-card--BorderColor, transparent);
+  box-shadow: var(--pf-c-card--BoxShadow, none);
+}
+.pf-c-card__selectable-actions .pf-c-check__label:hover,
+.pf-c-card__selectable-actions .pf-c-radio__label:hover {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--hover--BackgroundColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--hover--BoxShadow);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:checked) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:checked) ~ .pf-c-radio__label,
+.pf-c-card.pf-m-selected {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--BorderColor);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-selected--BackgroundColor);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible) ~ .pf-c-radio__label {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--focus--BorderColor);
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--focus--BackgroundColor);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:focus-visible):where(:checked) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:focus-visible):where(:checked) ~ .pf-c-radio__label {
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-selected--focus--BorderColor);
+}
+
+.pf-c-card__selectable-actions .pf-c-check__input:where(:disabled) ~ .pf-c-check__label,
+.pf-c-card__selectable-actions .pf-c-radio__input:where(:disabled) ~ .pf-c-radio__label,
+.pf-c-card.pf-m-disabled {
+  --pf-c-card--BackgroundColor: var(--pf-c-card--m-selectable--m-disabled--BackgroundColor);
+  --pf-c-card--BorderColor: var(--pf-c-card--m-selectable--m-disabled--BorderColor);
+  --pf-c-card--BoxShadow: var(--pf-c-card--m-selectable--m-disabled--BoxShadow);
+}
+
 .pf-c-card__header,
 .pf-c-card__title,
 .pf-c-card__body,

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

@@ -9,14 +9,19 @@ declare const _default: {
   "cardHeaderMain": "pf-c-card__header-main",
   "cardHeaderToggle": "pf-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
+  "cardSelectableActions": "pf-c-card__selectable-actions",
   "cardSrInput": "pf-c-card__sr-input",
   "cardTitle": "pf-c-card__title",
   "cardTitleText": "pf-c-card__title-text",
+  "checkInput": "pf-c-check__input",
+  "checkLabel": "pf-c-check__label",
   "divider": "pf-c-divider",
   "modifiers": {
-    "hoverable": "pf-m-hoverable",
     "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
+    "current": "pf-m-current",
+    "disabled": "pf-m-disabled",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
     "nonSelectableRaised": "pf-m-non-selectable-raised",
@@ -32,6 +37,8 @@ declare const _default: {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
+  "radioInput": "pf-c-radio__input",
+  "radioLabel": "pf-c-radio__label",
   "themeDark": "pf-theme-dark"
 };
 export default _default;

package/css/components/Card/card.js

@@ -11,14 +11,19 @@ exports.default = {
   "cardHeaderMain": "pf-c-card__header-main",
   "cardHeaderToggle": "pf-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
+  "cardSelectableActions": "pf-c-card__selectable-actions",
   "cardSrInput": "pf-c-card__sr-input",
   "cardTitle": "pf-c-card__title",
   "cardTitleText": "pf-c-card__title-text",
+  "checkInput": "pf-c-check__input",
+  "checkLabel": "pf-c-check__label",
   "divider": "pf-c-divider",
   "modifiers": {
-    "hoverable": "pf-m-hoverable",
     "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
+    "current": "pf-m-current",
+    "disabled": "pf-m-disabled",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
     "nonSelectableRaised": "pf-m-non-selectable-raised",
@@ -34,5 +39,7 @@ exports.default = {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
+  "radioInput": "pf-c-radio__input",
+  "radioLabel": "pf-c-radio__label",
   "themeDark": "pf-theme-dark"
 };

package/css/components/Card/card.mjs

@@ -9,14 +9,19 @@ export default {
   "cardHeaderMain": "pf-c-card__header-main",
   "cardHeaderToggle": "pf-c-card__header-toggle",
   "cardHeaderToggleIcon": "pf-c-card__header-toggle-icon",
+  "cardSelectableActions": "pf-c-card__selectable-actions",
   "cardSrInput": "pf-c-card__sr-input",
   "cardTitle": "pf-c-card__title",
   "cardTitleText": "pf-c-card__title-text",
+  "checkInput": "pf-c-check__input",
+  "checkLabel": "pf-c-check__label",
   "divider": "pf-c-divider",
   "modifiers": {
-    "hoverable": "pf-m-hoverable",
     "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
+    "current": "pf-m-current",
+    "disabled": "pf-m-disabled",
     "hoverableRaised": "pf-m-hoverable-raised",
     "selectableRaised": "pf-m-selectable-raised",
     "nonSelectableRaised": "pf-m-non-selectable-raised",
@@ -32,5 +37,7 @@ export default {
     "noOffset": "pf-m-no-offset",
     "noFill": "pf-m-no-fill"
   },
+  "radioInput": "pf-c-radio__input",
+  "radioLabel": "pf-c-radio__label",
   "themeDark": "pf-theme-dark"
 };

package/css/components/DataList/data-list.css

@@ -498,25 +498,25 @@
   --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
   --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
+  --pf-c-data-list--MarginLeft: var(--pf-global--spacer--md);
   --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
   --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
   --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
   --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
-  --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
-  --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
-  --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
+  --pf-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
+  --pf-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
+  --pf-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
+  --pf-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
   --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
   --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
-  --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
-  --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
+  --pf-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
+  --pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
   --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
   --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
   --pf-c-data-list__item--before--BackgroundColor: transparent;
-  --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
+  --pf-c-data-list__item--before--Width: calc(2 * var(--pf-global--BorderWidth--lg));
   --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
   --pf-c-data-list__item--before--Top: 0;
   --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
@@ -576,8 +576,6 @@
   --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
   --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
-  --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
   --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
   --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
@@ -709,28 +707,28 @@
   background-color: var(--pf-c-data-list__item--before--BackgroundColor);
   transition: var(--pf-c-data-list__item--before--Transition);
 }
-.pf-c-data-list__item.pf-m-selectable {
+.pf-c-data-list__item.pf-m-clickable {
   cursor: pointer;
-  outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
+  outline-offset: var(--pf-c-data-list__item--m-clickable--OutlineOffset);
 }
-.pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
+.pf-c-data-list__item.pf-m-clickable:hover, .pf-c-data-list__item.pf-m-clickable:focus {
   position: relative;
-  z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
+  z-index: var(--pf-c-data-list__item--m-clickable--hover--ZIndex);
 }
-.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
+.pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) {
   --pf-c-data-list__item--BorderBottomWidth: 0;
 }
-.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
-  border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
+.pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
+  border-top: var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopColor);
 }
-.pf-c-data-list__item.pf-m-selectable:hover {
-  box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
+.pf-c-data-list__item.pf-m-clickable:hover {
+  box-shadow: var(--pf-c-data-list__item--m-clickable--hover--BoxShadow);
 }
-.pf-c-data-list__item.pf-m-selectable:focus {
-  box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
+.pf-c-data-list__item.pf-m-clickable:focus {
+  box-shadow: var(--pf-c-data-list__item--m-clickable--focus--BoxShadow);
 }
-.pf-c-data-list__item.pf-m-selectable:active {
-  box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
+.pf-c-data-list__item.pf-m-clickable:active {
+  box-shadow: var(--pf-c-data-list__item--m-clickable--active--BoxShadow);
 }
 .pf-c-data-list__item.pf-m-selected {
   --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
@@ -750,10 +748,6 @@
 }
 .pf-c-data-list__item.pf-m-expanded {
   --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
-  --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
-}
-.pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
-  --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
 }
 
 .pf-c-data-list__item-row {
@@ -885,11 +879,22 @@
 .pf-c-data-list__expandable-content {
   max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
   overflow-y: auto;
-  border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
 }
 .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
   padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
 }
+.pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body > .pf-c-data-list {
+  margin-left: var(--pf-c-data-list--MarginLeft);
+}
+.pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item:last-child {
+  border-bottom: 0;
+}
+.pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item-row {
+  --pf-c-data-list__item-row--PaddingLeft: 0;
+}
+.pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__expandable-content-body {
+  --pf-c-data-list__expandable-content-body--PaddingLeft: 0;
+}
 .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
   padding: 0;
 }

package/css/components/DataList/data-list.d.ts

@@ -46,7 +46,7 @@ declare const _default: {
     "truncate": "pf-m-truncate",
     "breakWord": "pf-m-break-word",
     "nowrap": "pf-m-nowrap",
-    "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "ghostRow": "pf-m-ghost-row",
     "expanded": "pf-m-expanded",

package/css/components/DataList/data-list.js

@@ -48,7 +48,7 @@ exports.default = {
     "truncate": "pf-m-truncate",
     "breakWord": "pf-m-break-word",
     "nowrap": "pf-m-nowrap",
-    "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "ghostRow": "pf-m-ghost-row",
     "expanded": "pf-m-expanded",

package/css/components/DataList/data-list.mjs

@@ -46,7 +46,7 @@ export default {
     "truncate": "pf-m-truncate",
     "breakWord": "pf-m-break-word",
     "nowrap": "pf-m-nowrap",
-    "selectable": "pf-m-selectable",
+    "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "ghostRow": "pf-m-ghost-row",
     "expanded": "pf-m-expanded",

package/css/components/Form/form.css

@@ -18,6 +18,7 @@
   --pf-c-form__label-required--MarginLeft: var(--pf-global--spacer--xs);
   --pf-c-form__label-required--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-form__label-required--Color: var(--pf-global--danger-color--100);
+  --pf-c-form__group-label-help--BackgroundColor: transparent;
   --pf-c-form__group-label-help--PaddingTop: var(--pf-global--spacer--xs);
   --pf-c-form__group-label-help--PaddingRight: var(--pf-global--spacer--xs);
   --pf-c-form__group-label-help--PaddingBottom: var(--pf-global--spacer--xs);
@@ -323,6 +324,7 @@
   line-height: 1;
   color: var(--pf-c-form__group-label-help--Color);
   cursor: pointer;
+  background-color: var(--pf-c-form__group-label-help--BackgroundColor);
   border: 0;
   transform: translateY(var(--pf-c-form__group-label-help--TranslateY));
 }

package/css/components/Spinner/spinner.css

@@ -28,135 +28,6 @@
   --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
 }
 
-span.pf-c-spinner {
-  --pf-c-spinner--AnimationDuration: 1.5s;
-  --pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
-  --pf-c-spinner--stroke-width-multiplier: .1;
-  --pf-c-spinner--stroke-width: calc(var(--pf-c-spinner--diameter) * var(--pf-c-spinner--stroke-width-multiplier));
-  --pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__clipper--after--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__tail-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  position: relative;
-  display: inline-block;
-  text-align: left;
-  animation: pf-animation-spinner-parent calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
-}
-
-@keyframes pf-animation-spinner-parent {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(540deg);
-  }
-  100% {
-    transform: rotate(1080deg);
-  }
-}
-.pf-c-spinner__clipper {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--Width);
-  height: var(--pf-c-spinner__clipper--Height);
-  clip-path: inset(0 0 50% 50%);
-  animation: pf-animation-spinner__clipper var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper {
-  0% {
-    transform: rotate(90deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__clipper::after {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--after--Width);
-  height: var(--pf-c-spinner__clipper--after--Height);
-  clip-path: inset(0 0 0 50%);
-  content: "";
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 var(--pf-c-spinner__clipper--after--BoxShadowSpreadRadius) var(--pf-c-spinner__clipper--after--BoxShadowColor);
-  animation: pf-animation-spinner__clipper-after var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper-after {
-  0% {
-    transform: rotate(-180deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-.pf-c-spinner__lead-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__lead-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__lead-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__lead-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__lead-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  33% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__tail-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__tail-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__tail-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__tail-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__tail-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  66% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
 svg.pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
   --pf-c-spinner--AnimationDuration: 1.4s;

package/css/components/Spinner/spinner.d.ts

@@ -8,9 +8,6 @@ declare const _default: {
     "xl": "pf-m-xl"
   },
   "spinner": "pf-c-spinner",
-  "spinnerClipper": "pf-c-spinner__clipper",
-  "spinnerLeadBall": "pf-c-spinner__lead-ball",
-  "spinnerPath": "pf-c-spinner__path",
-  "spinnerTailBall": "pf-c-spinner__tail-ball"
+  "spinnerPath": "pf-c-spinner__path"
 };
 export default _default;

package/css/components/Spinner/spinner.js

@@ -10,8 +10,5 @@ exports.default = {
     "xl": "pf-m-xl"
   },
   "spinner": "pf-c-spinner",
-  "spinnerClipper": "pf-c-spinner__clipper",
-  "spinnerLeadBall": "pf-c-spinner__lead-ball",
-  "spinnerPath": "pf-c-spinner__path",
-  "spinnerTailBall": "pf-c-spinner__tail-ball"
+  "spinnerPath": "pf-c-spinner__path"
 };

package/css/components/Spinner/spinner.mjs

@@ -8,8 +8,5 @@ export default {
     "xl": "pf-m-xl"
   },
   "spinner": "pf-c-spinner",
-  "spinnerClipper": "pf-c-spinner__clipper",
-  "spinnerLeadBall": "pf-c-spinner__lead-ball",
-  "spinnerPath": "pf-c-spinner__path",
-  "spinnerTailBall": "pf-c-spinner__tail-ball"
+  "spinnerPath": "pf-c-spinner__path"
 };