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

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.4 (2023-03-02)
+
+### Bug Fixes
+
+- **core:** update core to alpha.24 ([#8768](https://github.com/patternfly/patternfly-react/issues/8768)) ([6dd5e01](https://github.com/patternfly/patternfly-react/commit/6dd5e01e16bc94fe4b954b79ba67adaaab9c7135))
+
+# 5.0.0-alpha.3 (2023-02-15)
+
+### Bug Fixes
+
+- **deps:** updated to the latest core alpha ([#8688](https://github.com/patternfly/patternfly-react/issues/8688)) ([5f81928](https://github.com/patternfly/patternfly-react/commit/5f819288d7baaa3806b23c0da8fb26dd4ec12d6b))
+
 # 5.0.0-alpha.2 (2023-02-08)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/Accordion/accordion.css

@@ -23,6 +23,7 @@
   --pf-c-accordion__toggle--before--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-accordion__toggle--after--Width: var(--pf-global--BorderWidth--lg);
   --pf-c-accordion__toggle--m-expanded--after--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-accordion__toggle--BackgroundColor: transparent;
   --pf-c-accordion__toggle-text--MaxWidth: calc(100% - var(--pf-global--spacer--lg));
   --pf-c-accordion__toggle--hover__toggle-text--Color: var(--pf-global--link--Color);
   --pf-c-accordion__toggle--active__toggle-text--Color: var(--pf-global--link--Color);
@@ -137,6 +138,7 @@
   padding: var(--pf-c-accordion__toggle--PaddingTop) var(--pf-c-accordion__toggle--PaddingRight) var(--pf-c-accordion__toggle--PaddingBottom) var(--pf-c-accordion__toggle--PaddingLeft);
   font-family: var(--pf-c-accordion__toggle--FontFamily, inherit);
   font-size: var(--pf-c-accordion__toggle--FontSize, inherit);
+  background-color: var(--pf-c-accordion__toggle--BackgroundColor);
   border: 0;
 }
 .pf-c-accordion__toggle::after {

package/css/components/AppLauncher/app-launcher.css

@@ -17,6 +17,7 @@
   --pf-c-app-launcher__toggle--focus--Color: var(--pf-global--Color--100);
   --pf-c-app-launcher__toggle--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-app-launcher__toggle--m-expanded--Color: var(--pf-global--Color--100);
+  --pf-c-app-launcher__toggle--BackgroundColor: transparent;
   --pf-c-app-launcher__menu-search--PaddingTop: var(--pf-global--spacer--sm);
   --pf-c-app-launcher__menu-search--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-app-launcher__menu-search--PaddingBottom: var(--pf-global--spacer--md);
@@ -79,6 +80,7 @@
 .pf-c-app-launcher__toggle {
   padding: var(--pf-c-app-launcher__toggle--PaddingTop) var(--pf-c-app-launcher__toggle--PaddingRight) var(--pf-c-app-launcher__toggle--PaddingBottom) var(--pf-c-app-launcher__toggle--PaddingLeft);
   color: var(--pf-c-app-launcher__toggle--Color);
+  background-color: var(--pf-c-app-launcher__toggle--BackgroundColor);
   border: none;
 }
 .pf-c-app-launcher__toggle:hover {

package/css/components/Breadcrumb/breadcrumb.css

@@ -10,6 +10,7 @@
   --pf-c-breadcrumb__link--hover--Color: var(--pf-global--link--Color--hover);
   --pf-c-breadcrumb__link--hover--TextDecoration: var(--pf-global--link--TextDecoration--hover);
   --pf-c-breadcrumb__link--m-current--Color: var(--pf-global--Color--100);
+  --pf-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-c-breadcrumb__heading--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-breadcrumb__dropdown--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
   --pf-c-breadcrumb__dropdown--MarginRight: calc(var(--pf-c-breadcrumb__item--MarginRight) * -1);
@@ -52,6 +53,7 @@
   color: var(--pf-c-breadcrumb__link--Color);
   text-decoration: var(--pf-c-breadcrumb__link--TextDecoration);
   word-break: break-word;
+  background-color: var(--pf-c-breadcrumb__link--BackgroundColor);
 }
 .pf-c-breadcrumb__link:hover {
   --pf-c-breadcrumb__link--Color: var(--pf-c-breadcrumb__link--hover--Color);

package/css/components/Chip/chip.css

@@ -22,18 +22,19 @@
   --pf-c-chip--m-draggable--BackgroundColor: var(--pf-global--BackgroundColor--200);
   --pf-c-chip--m-draggable--BoxShadow: var(--pf-global--BoxShadow--sm);
   --pf-c-chip--m-draggable__icon--FontSize: var(--pf-global--icon--FontSize--sm);
-  --pf-c-chip__text--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__content--ColumnGap: var(--pf-global--spacer--xs);
   --pf-c-chip__text--Color: var(--pf-global--Color--100);
   --pf-c-chip__text--MaxWidth: 16ch;
-  --pf-c-chip__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-chip__c-button--PaddingLeft: var(--pf-global--spacer--sm);
-  --pf-c-chip__c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
-  --pf-c-chip__c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
-  --pf-c-chip__c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
-  --pf-c-chip__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-chip__c-badge--MarginLeft: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-chip__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-chip__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-chip__actions--c-button--MarginTop: calc(var(--pf-c-chip--PaddingTop) * -1);
+  --pf-c-chip__actions--c-button--MarginRight: calc(var(--pf-c-chip--PaddingRight) / 2 * -1);
+  --pf-c-chip__actions--c-button--MarginBottom: calc(var(--pf-c-chip--PaddingBottom) * -1);
+  --pf-c-chip__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-chip__icon--MarginLeft: var(--pf-global--spacer--sm);
   color: var(--pf-global--Color--100);
   position: relative;
@@ -68,19 +69,6 @@
 .pf-c-chip.pf-m-draggable .pf-c-chip__icon {
   font-size: var(--pf-c-chip--m-draggable__icon--FontSize);
 }
-.pf-c-chip .pf-c-button {
-  --pf-c-button--PaddingTop: var(--pf-c-chip__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-chip__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-chip__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-chip__c-button--PaddingLeft);
-  --pf-c-button--FontSize: var(--pf-c-chip__c-button--FontSize);
-  margin-top: var(--pf-c-chip__c-button--MarginTop);
-  margin-right: var(--pf-c-chip__c-button--MarginRight);
-  margin-bottom: var(--pf-c-chip__c-button--MarginBottom);
-}
-.pf-c-chip .pf-c-badge {
-  margin-left: var(--pf-c-chip__c-badge--MarginLeft);
-}
 
 .pf-c-chip__text {
   overflow: hidden;
@@ -88,7 +76,6 @@
   white-space: nowrap;
   position: relative;
   max-width: var(--pf-c-chip__text--MaxWidth);
-  font-size: var(--pf-c-chip__text--FontSize);
   color: var(--pf-c-chip__text--Color);
 }
 
@@ -97,6 +84,28 @@
   margin-left: var(--pf-c-chip__icon--MarginLeft);
 }
 
+.pf-c-chip__content {
+  display: flex;
+  align-items: center;
+  column-gap: var(--pf-c-chip__content--ColumnGap);
+  font-size: var(--pf-c-chip__content--FontSize);
+}
+
+.pf-c-chip__actions {
+  font-size: var(--pf-c-chip__actions--FontSize);
+}
+.pf-c-chip__actions .pf-c-button {
+  --pf-c-button--PaddingTop: var(--pf-c-chip__actions--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-chip__actions--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-chip__actions--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-chip__actions--c-button--PaddingLeft);
+  --pf-c-button--FontSize: var(--pf-c-chip__actions--c-button--FontSize);
+  margin-top: var(--pf-c-chip__actions--c-button--MarginTop);
+  margin-right: var(--pf-c-chip__actions--c-button--MarginRight);
+  margin-bottom: var(--pf-c-chip__actions--c-button--MarginBottom);
+  line-height: 1;
+}
+
 :where(.pf-theme-dark) .pf-c-chip {
   --pf-c-chip--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-chip--before--BorderColor: var(--pf-global--BorderColor--100);

package/css/components/Chip/chip.d.ts

@@ -1,8 +1,9 @@
 import './chip.css';
 declare const _default: {
-  "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
+  "chipActions": "pf-c-chip__actions",
+  "chipContent": "pf-c-chip__content",
   "chipIcon": "pf-c-chip__icon",
   "chipText": "pf-c-chip__text",
   "modifiers": {

package/css/components/Chip/chip.js

@@ -2,9 +2,10 @@
 exports.__esModule = true;
 require('./chip.css');
 exports.default = {
-  "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
+  "chipActions": "pf-c-chip__actions",
+  "chipContent": "pf-c-chip__content",
   "chipIcon": "pf-c-chip__icon",
   "chipText": "pf-c-chip__text",
   "modifiers": {

package/css/components/Chip/chip.mjs

@@ -1,8 +1,9 @@
 import './chip.css';
 export default {
-  "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
+  "chipActions": "pf-c-chip__actions",
+  "chipContent": "pf-c-chip__content",
   "chipIcon": "pf-c-chip__icon",
   "chipText": "pf-c-chip__text",
   "modifiers": {

package/css/components/ContextSelector/context-selector.css

@@ -26,6 +26,7 @@
   --pf-c-context-selector__toggle--active--BorderBottomColor: var(--pf-global--active-color--100);
   --pf-c-context-selector__toggle--expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md);
   --pf-c-context-selector__toggle--expanded--BorderBottomColor: var(--pf-global--active-color--100);
+  --pf-c-context-selector__toggle--BackgroundColor: transparent;
   --pf-c-context-selector__toggle--m-plain--Color: var(--pf-global--Color--200);
   --pf-c-context-selector__toggle--m-plain--hover--Color: var(--pf-global--Color--100);
   --pf-c-context-selector__toggle--m-plain--disabled--Color: var(--pf-global--disabled-color--200);
@@ -64,6 +65,7 @@
   --pf-c-context-selector__menu-list-item--PaddingRight: var(--pf-global--spacer--lg);
   --pf-c-context-selector__menu-list-item--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-context-selector__menu-list-item--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-context-selector__menu-list-item--BackgroundColor: transparent;
   --pf-c-context-selector__menu-list-item--hover--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
   --pf-c-context-selector__menu-list-item--disabled--Color: var(--pf-global--Color--dark-200);
   --pf-c-context-selector__menu-item-icon--Color: var(--pf-global--active-color--100);
@@ -175,6 +177,7 @@
   color: var(--pf-c-context-selector__toggle--Color);
   white-space: nowrap;
   cursor: pointer;
+  background-color: var(--pf-c-context-selector__toggle--BackgroundColor);
   border: none;
 }
 .pf-c-context-selector__toggle::before {
@@ -283,11 +286,12 @@
   padding: var(--pf-c-context-selector__menu-list-item--PaddingTop) var(--pf-c-context-selector__menu-list-item--PaddingRight) var(--pf-c-context-selector__menu-list-item--PaddingBottom) var(--pf-c-context-selector__menu-list-item--PaddingLeft);
   color: var(--pf-c-context-selector__menu-list-item--Color);
   white-space: nowrap;
+  background-color: var(--pf-c-context-selector__menu-list-item--BackgroundColor);
   border: none;
 }
 .pf-c-context-selector__menu-list-item:hover, .pf-c-context-selector__menu-list-item:focus {
+  --pf-c-context-selector__menu-list-item--BackgroundColor: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
   text-decoration: none;
-  background-color: var(--pf-c-context-selector__menu-list-item--hover--BackgroundColor);
 }
 .pf-c-context-selector__menu-list-item.pf-m-disabled, .pf-c-context-selector__menu-list-item:disabled {
   --pf-c-context-selector__menu-list-item--Color: var(--pf-c-context-selector__menu-list-item--disabled--Color);

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

@@ -546,6 +546,7 @@
   --pf-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
   --pf-c-data-list__toggle-icon--Rotate: 0;
   --pf-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --pf-c-data-list__item-draggable-button--BackgroundColor: transparent;
   --pf-c-data-list__item-draggable-button--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-data-list__item-draggable-button--PaddingRight: var(--pf-global--spacer--md);
   --pf-c-data-list__item-draggable-button--MarginTop: calc(var(--pf-global--spacer--lg) * -1);
@@ -617,7 +618,6 @@
   font-size: var(--pf-c-data-list--FontSize);
   line-height: var(--pf-c-data-list--LineHeight);
   overflow-wrap: break-word;
-  list-style-type: disc;
   border-top: var(--pf-c-data-list--BorderTopWidth) solid var(--pf-c-data-list--BorderTopColor);
 }
 @media screen and (min-width: 576px) {
@@ -790,6 +790,7 @@
   flex-direction: column;
   padding: var(--pf-c-data-list__item-draggable-button--PaddingTop) var(--pf-c-data-list__item-draggable-button--PaddingRight) var(--pf-c-data-list__item-draggable-button--PaddingBottom) var(--pf-c-data-list__item-draggable-button--PaddingLeft);
   margin: var(--pf-c-data-list__item-draggable-button--MarginTop) 0 var(--pf-c-data-list__item-draggable-button--MarginBottom) var(--pf-c-data-list__item-draggable-button--MarginLeft);
+  background-color: var(--pf-c-data-list__item-draggable-button--BackgroundColor);
   border: 0;
 }
 .pf-c-data-list__item-draggable-button:hover {

package/css/components/Drawer/drawer.css

@@ -442,7 +442,7 @@
     --pf-c-drawer__splitter--after--BorderLeftWidth: 0;
   }
   .pf-c-drawer > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border,
-.pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
+  .pf-c-drawer.pf-m-panel-left > .pf-c-drawer__main > .pf-c-drawer__panel.pf-m-no-border {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer__splitter {
@@ -531,15 +531,15 @@
 }
 @media (min-width: 768px) {
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -592,15 +592,15 @@
 }
 @media (min-width: 992px) {
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static-on-lg > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline-on-lg > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -653,15 +653,15 @@
 }
 @media (min-width: 1200px) {
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static-on-xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline-on-xl > .pf-c-drawer__main > .pf-c-drawer__content {
@@ -714,15 +714,15 @@
 }
 @media (min-width: 1450px) {
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content,
-.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
+  .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {
     flex-shrink: 1;
   }
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel,
-.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
+  .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel {
     --pf-c-drawer--m-expanded__panel--BoxShadow: none;
   }
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after,
-.pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
+  .pf-c-drawer.pf-m-static-on-2xl > .pf-c-drawer__main > .pf-c-drawer__panel:not(.pf-m-no-border)::after {
     background-color: var(--pf-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor);
   }
   .pf-c-drawer.pf-m-inline-on-2xl > .pf-c-drawer__main > .pf-c-drawer__content {

package/css/components/Dropdown/dropdown.css

@@ -50,6 +50,7 @@
   --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderWidth: var(--pf-global--BorderWidth--md);
   --pf-c-dropdown--m-expanded__toggle--m-secondary--before--BorderColor: var(--pf-global--primary-color--100);
   --pf-c-dropdown__toggle-button--Color: var(--pf-global--Color--100);
+  --pf-c-dropdown__toggle-button--BackgroundColor: transparent;
   --pf-c-dropdown__toggle-progress--Visibility: hidden;
   --pf-c-dropdown__toggle-progress--c-spinner--diameter: var(--pf-global--FontSize--sm);
   --pf-c-dropdown__toggle--m-split-button--child--PaddingTop: var(--pf-global--spacer--form-element);
@@ -275,6 +276,7 @@
 }
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-button {
   color: var(--pf-c-dropdown__toggle-button--Color);
+  background-color: var(--pf-c-dropdown__toggle-button--BackgroundColor);
   border: 0;
 }
 .pf-c-dropdown__toggle.pf-m-split-button .pf-c-dropdown__toggle-text {
@@ -509,51 +511,51 @@
 }
 @media (min-width: 576px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-sm,
-.pf-c-dropdown__menu.pf-m-align-right-on-sm {
+  .pf-c-dropdown__menu.pf-m-align-right-on-sm {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-sm,
-.pf-c-dropdown__menu.pf-m-align-left-on-sm {
+  .pf-c-dropdown__menu.pf-m-align-left-on-sm {
     right: auto;
   }
 }
 @media (min-width: 768px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-md,
-.pf-c-dropdown__menu.pf-m-align-right-on-md {
+  .pf-c-dropdown__menu.pf-m-align-right-on-md {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-md,
-.pf-c-dropdown__menu.pf-m-align-left-on-md {
+  .pf-c-dropdown__menu.pf-m-align-left-on-md {
     right: auto;
   }
 }
 @media (min-width: 992px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-lg,
-.pf-c-dropdown__menu.pf-m-align-right-on-lg {
+  .pf-c-dropdown__menu.pf-m-align-right-on-lg {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-lg,
-.pf-c-dropdown__menu.pf-m-align-left-on-lg {
+  .pf-c-dropdown__menu.pf-m-align-left-on-lg {
     right: auto;
   }
 }
 @media (min-width: 1200px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-xl,
-.pf-c-dropdown__menu.pf-m-align-right-on-xl {
+  .pf-c-dropdown__menu.pf-m-align-right-on-xl {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-xl,
-.pf-c-dropdown__menu.pf-m-align-left-on-xl {
+  .pf-c-dropdown__menu.pf-m-align-left-on-xl {
     right: auto;
   }
 }
 @media (min-width: 1450px) {
   .pf-c-dropdown .pf-c-menu.pf-m-align-right-on-2xl,
-.pf-c-dropdown__menu.pf-m-align-right-on-2xl {
+  .pf-c-dropdown__menu.pf-m-align-right-on-2xl {
     right: 0;
   }
   .pf-c-dropdown .pf-c-menu.pf-m-align-left-on-2xl,
-.pf-c-dropdown__menu.pf-m-align-left-on-2xl {
+  .pf-c-dropdown__menu.pf-m-align-left-on-2xl {
     right: auto;
   }
 }

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

@@ -9,6 +9,7 @@
   --pf-c-expandable-section__toggle--active--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--focus--Color: var(--pf-global--link--Color--hover);
   --pf-c-expandable-section__toggle--m-expanded--Color: var(--pf-global--link--Color--hover);
+  --pf-c-expandable-section__toggle--BackgroundColor: transparent;
   --pf-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-c-expandable-section__toggle-icon--Color: var(--pf-global--Color--100);
   --pf-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
@@ -94,6 +95,7 @@
   padding: var(--pf-c-expandable-section__toggle--PaddingTop) var(--pf-c-expandable-section__toggle--PaddingRight) var(--pf-c-expandable-section__toggle--PaddingBottom) var(--pf-c-expandable-section__toggle--PaddingLeft);
   margin-top: var(--pf-c-expandable-section__toggle--MarginTop);
   color: var(--pf-c-expandable-section__toggle--Color);
+  background-color: var(--pf-c-expandable-section__toggle--BackgroundColor);
   border: none;
 }
 .pf-c-expandable-section__toggle:hover {

package/css/components/Label/label.css

@@ -3,6 +3,7 @@
   --pf-c-label--PaddingRight: var(--pf-global--spacer--sm);
   --pf-c-label--PaddingBottom: var(--pf-global--spacer--xs);
   --pf-c-label--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label--MaxWidth: 100%;
   --pf-c-label--BorderRadius: var(--pf-global--BorderRadius--lg);
   --pf-c-label--BackgroundColor: var(--pf-global--palette--black-150);
   --pf-c-label--Color: var(--pf-global--Color--100);
@@ -105,21 +106,22 @@
   --pf-c-label--m-compact--FontSize: var(--pf-global--FontSize--xs);
   --pf-c-label--m-compact--m-editable--TextDecorationOffset: 0.0625rem;
   --pf-c-label__content--Color: var(--pf-global--Color--100);
+  --pf-c-label__content--BackgroundColor: transparent;
   --pf-c-label__content--MaxWidth: 100%;
   --pf-c-label--m-outline__content--Color: var(--pf-global--Color--100);
   --pf-c-label--m-editable__content--MaxWidth: 16ch;
-  --pf-c-label__text--MaxWidth: 16ch;
+  --pf-c-label__text--MaxWidth: 100%;
   --pf-c-label__icon--Color: var(--pf-global--Color--100);
   --pf-c-label__icon--MarginRight: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--FontSize: var(--pf-global--FontSize--xs);
-  --pf-c-label__c-button--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginRight: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
-  --pf-c-label__c-button--MarginLeft: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingTop: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingRight: var(--pf-global--spacer--sm);
-  --pf-c-label__c-button--PaddingBottom: var(--pf-global--spacer--xs);
-  --pf-c-label__c-button--PaddingLeft: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--MarginRight: calc(var(--pf-c-label__actions--c-button--PaddingRight) * -1);
+  --pf-c-label__actions--c-button--FontSize: var(--pf-global--FontSize--xs);
+  --pf-c-label__actions--c-button--MarginTop: calc(var(--pf-c-label__actions--c-button--PaddingTop) * -1);
+  --pf-c-label__actions--c-button--MarginBottom: calc(var(--pf-c-label__actions--c-button--PaddingBottom) * -1);
+  --pf-c-label__actions--c-button--PaddingTop: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingRight: var(--pf-global--spacer--sm);
+  --pf-c-label__actions--c-button--PaddingBottom: var(--pf-global--spacer--xs);
+  --pf-c-label__actions--c-button--PaddingLeft: var(--pf-global--spacer--sm);
   --pf-c-label--m-editable--Cursor: pointer;
   --pf-c-label--m-editable--TextDecoration: underline;
   --pf-c-label--m-editable--TextDecorationStyle: dashed;
@@ -140,6 +142,7 @@
   --pf-c-label--m-editable--m-editable-active__content--before--BorderWidth: 0;
   --pf-c-label--m-editable--m-editable-active__content--before--BorderColor: transparent;
   position: relative;
+  max-width: var(--pf-c-label--MaxWidth);
   padding: var(--pf-c-label--PaddingTop) var(--pf-c-label--PaddingRight) var(--pf-c-label--PaddingBottom) var(--pf-c-label--PaddingLeft);
   font-size: var(--pf-c-label--FontSize);
   color: var(--pf-c-label--Color);
@@ -311,17 +314,6 @@
   --pf-c-label--m-editable--TextDecoration: var(--pf-c-label--m-editable--m-editable-active--TextDecoration);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-editable--m-editable-active--BackgroundColor);
 }
-.pf-c-label .pf-c-button {
-  --pf-c-button--FontSize: var(--pf-c-label__c-button--FontSize);
-  --pf-c-button--PaddingTop: var(--pf-c-label__c-button--PaddingTop);
-  --pf-c-button--PaddingRight: var(--pf-c-label__c-button--PaddingRight);
-  --pf-c-button--PaddingBottom: var(--pf-c-label__c-button--PaddingBottom);
-  --pf-c-button--PaddingLeft: var(--pf-c-label__c-button--PaddingLeft);
-  margin-top: var(--pf-c-label__c-button--MarginTop);
-  margin-right: var(--pf-c-label__c-button--MarginRight);
-  margin-bottom: var(--pf-c-label__c-button--MarginBottom);
-  margin-left: var(--pf-c-label__c-button--MarginLeft);
-}
 .pf-c-label.pf-m-overflow, .pf-c-label.pf-m-add {
   --pf-c-label__content--Color: var(--pf-c-label--m-overflow__content--Color);
   --pf-c-label--BackgroundColor: var(--pf-c-label--m-overflow__content--BackgroundColor);
@@ -347,11 +339,10 @@
 }
 
 .pf-c-label__content {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   max-width: var(--pf-c-label__content--MaxWidth);
+  overflow: hidden;
   color: var(--pf-c-label__content--Color);
+  background-color: var(--pf-c-label__content--BackgroundColor);
   border-width: 0;
 }
 .pf-c-label__content::before {
@@ -365,9 +356,17 @@
   border: var(--pf-c-label__content--before--BorderWidth) solid var(--pf-c-label__content--before--BorderColor);
   border-radius: var(--pf-c-label--BorderRadius);
 }
+input.pf-c-label__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 a.pf-c-label__content,
 button.pf-c-label__content {
+  padding: 0;
   cursor: pointer;
+  background-color: transparent;
   border: none;
 }
 a.pf-c-label__content, a.pf-c-label__content:hover, a.pf-c-label__content:focus,
@@ -392,6 +391,20 @@ button.pf-c-label__content:focus {
   color: var(--pf-c-label__icon--Color);
 }
 
+.pf-c-label__actions {
+  margin-right: var(--pf-c-label__actions--MarginRight);
+  font-size: var(--pf-c-label__actions--FontSize);
+}
+.pf-c-label__actions .pf-c-button {
+  --pf-c-button--FontSize: var(--pf-c-label__actions--c-button--FontSize);
+  --pf-c-button--PaddingTop: var(--pf-c-label__actions--c-button--PaddingTop);
+  --pf-c-button--PaddingRight: var(--pf-c-label__actions--c-button--PaddingRight);
+  --pf-c-button--PaddingBottom: var(--pf-c-label__actions--c-button--PaddingBottom);
+  --pf-c-button--PaddingLeft: var(--pf-c-label__actions--c-button--PaddingLeft);
+  margin-top: var(--pf-c-label__actions--c-button--MarginTop);
+  margin-bottom: var(--pf-c-label__actions--c-button--MarginBottom);
+}
+
 :where(.pf-theme-dark) .pf-c-label {
   --pf-c-label--BackgroundColor: var(--pf-global--BackgroundColor--300);
   --pf-c-label--m-blue--BackgroundColor: var(--pf-global--BackgroundColor--300);

package/css/components/Label/label.d.ts

@@ -2,6 +2,7 @@ import './label.css';
 declare const _default: {
   "button": "pf-c-button",
   "label": "pf-c-label",
+  "labelActions": "pf-c-label__actions",
   "labelContent": "pf-c-label__content",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",

package/css/components/Label/label.js

@@ -4,6 +4,7 @@ require('./label.css');
 exports.default = {
   "button": "pf-c-button",
   "label": "pf-c-label",
+  "labelActions": "pf-c-label__actions",
   "labelContent": "pf-c-label__content",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",

package/css/components/Label/label.mjs

@@ -2,6 +2,7 @@ import './label.css';
 export default {
   "button": "pf-c-button",
   "label": "pf-c-label",
+  "labelActions": "pf-c-label__actions",
   "labelContent": "pf-c-label__content",
   "labelIcon": "pf-c-label__icon",
   "labelText": "pf-c-label__text",

package/css/components/Login/login.css

@@ -215,7 +215,7 @@
 }
 @media (min-width: 768px) {
   .pf-c-login__main-header-utilities,
-.pf-c-login__main-header .pf-c-dropdown {
+  .pf-c-login__main-header .pf-c-dropdown {
     grid-column: 2/3;
     grid-row: 1;
   }

package/css/components/Menu/menu.css

@@ -150,6 +150,7 @@
   --pf-c-menu__item-action--PaddingBottom: var(--pf-global--spacer--sm);
   --pf-c-menu__item-action--PaddingLeft: var(--pf-global--spacer--md);
   --pf-c-menu__item-action--Color: var(--pf-global--Color--200);
+  --pf-c-menu__item-action--BackgroundColor: transparent;
   --pf-c-menu__item-action--hover--Color: var(--pf-global--Color--100);
   --pf-c-menu__item-action--disabled--Color: var(--pf-global--disabled-color--200);
   --pf-c-menu__item-action--m-favorited--Color: var(--pf-global--palette--gold-400);
@@ -270,6 +271,7 @@
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list {
   position: relative;
   overflow: hidden;
+  visibility: visible;
   transition: var(--pf-c-menu--m-drilldown__list--Transition);
 }
 .pf-c-menu.pf-m-drilldown .pf-c-menu__list .pf-c-menu__list {
@@ -580,6 +582,7 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   padding-bottom: var(--pf-c-menu__item-action--PaddingBottom);
   padding-left: var(--pf-c-menu__item-action--PaddingLeft);
   color: var(--pf-c-menu__item-action--Color);
+  background-color: var(--pf-c-menu__item-action--BackgroundColor);
   border: none;
 }
 .pf-c-menu__item-action.pf-m-favorite .pf-c-menu__item-action-icon {

package/css/components/MenuToggle/menu-toggle.css

@@ -106,6 +106,7 @@
   --pf-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-split-button--m-action--m-primary--m-expanded--child--BackgroundColor: var(--pf-global--primary-color--200);
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
+  --pf-c-menu-toggle__button--BackgroundColor: transparent;
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
@@ -361,6 +362,7 @@
   --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
   --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
   color: inherit;
+  background-color: var(--pf-c-menu-toggle__button--BackgroundColor);
   border: 0;
 }