@patternfly/patternfly 6.0.0 → 6.1.0-prerelease.10

package/README.md

@@ -1,11 +1,11 @@
-# PatternFly 5
+# PatternFly
 
 ## Install
 
 - This assumes an environment is already set up for npm packages - if not, please use npm init following the steps at [https://docs.npmjs.com/getting-started/using-a-package.json](https://docs.npmjs.com/getting-started/using-a-package.json).
 - run `npm install @patternfly/patternfly --save`
 
-When you install PatternFly 5, the package includes:
+When you install PatternFly, the package includes:
 
 - a single file for the entire compiled library: `node_modules/@patternfly/patternfly/patternfly.css`
 - individual files with each component compiled separately: `node_modules/@patternfly/patternfly/<ComponentName>/styles.css`
@@ -16,9 +16,9 @@ Any of the files above are meant for use in consuming the library. The recommend
 
 ## Development
 
-**PatternFly 5 Development requires Node v18.0.0 or greater**
+**PatternFly Development requires Node v18.0.0 or greater**
 
-To setup the PatternFly 5 development environment:
+To setup the PatternFly development environment:
 
 - clone the project
 - run `yarn install` from the project root
@@ -115,7 +115,7 @@ If you have any suggestions about ways that we can improve how we use this tool,
 [How do I use CSS variables to customize the library?](https://core-staging.patternfly.org/guidelines#variables)
 
 #### Browser support
-PatternFly 5 is supported on the latest two major versions of the following browsers:
+PatternFly is supported on the latest two major versions of the following browsers:
 
 - Chrome
 - Firefox

package/components/Button/button.css

@@ -79,6 +79,8 @@
   --pf-v6-c-button--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
   --pf-v6-c-button--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-button--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
+  --pf-v6-c-button--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --pf-v6-c-button--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
   --pf-v6-c-button--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
   --pf-v6-c-button--m-link--m-danger--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-button--m-link--m-danger__icon--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -128,6 +130,8 @@
   --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
+  --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
+  --pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -152,9 +156,13 @@
   --pf-v6-c-button--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-button--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --pf-v6-c-button--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-button--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+  --pf-v6-c-button--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-button--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-button--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+  --pf-v6-c-button--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-button--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-button--m-read--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-button--m-read--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -342,6 +350,8 @@
   --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-link--m-clicked--Color);
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-link--m-clicked--BackgroundColor);
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
+  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-small--PaddingInlineEnd);
+  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-small--PaddingInlineStart);
 }
 .pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
@@ -429,11 +439,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--m-clicked--BorderColor: var(--pf-v6-c-button--m-control--m-clicked--BorderColor);
   --pf-v6-c-button--m-clicked--BorderWidth: var(--pf-v6-c-button--m-control--m-clicked--BorderWidth);
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-control--m-clicked__icon--Color);
+  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-control--m-small--PaddingInlineEnd);
+  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-control--m-small--PaddingInlineStart);
 }
 .pf-v6-c-button.pf-m-stateful {
   --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-stateful--BorderRadius);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--PaddingInlineStart);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--PaddingInlineEnd);
+  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineEnd);
+  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-stateful--m-small--PaddingInlineStart);
 }
 .pf-v6-c-button.pf-m-read {
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-read--BackgroundColor);
@@ -490,8 +504,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
   --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd);
-  --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
-  --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
+  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd);
+  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart);
+  --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineEnd);
+  --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-no-padding--m-small--PaddingInlineStart);
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
 }
 .pf-v6-c-button.pf-m-block {

package/components/Button/button.scss

@@ -93,6 +93,8 @@
   --#{$button}--m-link--m-clicked--Color: var(--pf-t--global--text--color--brand--clicked);
   --#{$button}--m-link--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$button}--m-link--m-clicked__icon--Color: var(--pf-t--global--text--color--brand--clicked);
+  --#{$button}--m-link--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--compact);
+  --#{$button}--m-link--m-small--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--compact);
 
   // Link danger
   --#{$button}--m-link--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
@@ -150,6 +152,8 @@
   --#{$button}--m-plain--m-no-padding--PaddingInlineEnd: 0;
   --#{$button}--m-plain--m-no-padding--PaddingBlockEnd: 0;
   --#{$button}--m-plain--m-no-padding--PaddingInlineStart: 0;
+  --#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart: 0;
+  --#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd: 0;
   --#{$button}--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
   --#{$button}--m-plain--m-no-padding--BackgroundColor: transparent;
   --#{$button}--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -176,11 +180,15 @@
   --#{$button}--m-control--m-clicked--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$button}--m-control--m-clicked--BorderWidth: var(--pf-t--global--border--width--control--clicked);
   --#{$button}--m-control--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$button}--m-control--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+  --#{$button}--m-control--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
 
   // Stateful
   --#{$button}--m-stateful--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$button}--m-stateful--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$button}--m-stateful--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+  --#{$button}--m-stateful--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+  --#{$button}--m-stateful--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
 
   // Read
   --#{$button}--m-read--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -402,6 +410,8 @@
     --#{$button}--m-clicked--Color: var(--#{$button}--m-link--m-clicked--Color);
     --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-link--m-clicked--BackgroundColor);
     --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
+    --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-link--m-small--PaddingInlineEnd);
+    --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-link--m-small--PaddingInlineStart);
 
     &.pf-m-inline {
       @at-root span#{&} {
@@ -499,6 +509,8 @@
     --#{$button}--m-clicked--BorderColor: var(--#{$button}--m-control--m-clicked--BorderColor);
     --#{$button}--m-clicked--BorderWidth: var(--#{$button}--m-control--m-clicked--BorderWidth);
     --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-control--m-clicked__icon--Color);
+    --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-control--m-small--PaddingInlineEnd);
+    --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-control--m-small--PaddingInlineStart);
   }
 
   // Stateful
@@ -506,6 +518,8 @@
     --#{$button}--BorderRadius: var(--#{$button}--m-stateful--BorderRadius);
     --#{$button}--PaddingInlineStart: var(--#{$button}--m-stateful--PaddingInlineStart);
     --#{$button}--PaddingInlineEnd: var(--#{$button}--m-stateful--PaddingInlineEnd);
+    --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-stateful--m-small--PaddingInlineEnd);
+    --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-stateful--m-small--PaddingInlineStart);
   }
 
   // Read
@@ -570,9 +584,11 @@
       --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-no-padding--m-clicked--BackgroundColor);
       --#{$button}--PaddingBlockStart: var(--#{$button}--m-plain--m-no-padding--PaddingBlockStart);
       --#{$button}--PaddingBlockEnd: var(--#{$button}--m-plain--m-no-padding--PaddingBlockEnd);
-      --#{$button}--m-plain--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
-      --#{$button}--m-plain--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
-
+      --#{$button}--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--PaddingInlineEnd);
+      --#{$button}--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--PaddingInlineStart);
+      --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineEnd);
+      --#{$button}--m-small--PaddingInlineStart: var(--#{$button}--m-plain--m-no-padding--m-small--PaddingInlineStart);
+  
       min-width: var(--#{$button}--m-plain--m-no-padding--MinWidth);
     }
   }

package/components/CodeEditor/code-editor.css

@@ -51,9 +51,22 @@
   --pf-v6-c-code-editor__tab-icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
 }
 
+.pf-v6-c-code-editor {
+  display: flex;
+  flex-direction: column;
+}
 .pf-v6-c-code-editor.pf-m-read-only {
   --pf-v6-c-code-editor__main--BackgroundColor: var(--pf-v6-c-code-editor--m-read-only__main--BackgroundColor);
 }
+.pf-v6-c-code-editor.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-code-editor__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
 
 .pf-v6-c-code-editor__header {
   position: relative;
@@ -120,6 +133,7 @@
 
 .pf-v6-c-code-editor__main {
   position: relative;
+  flex-grow: 1;
   color: var(--pf-v6-c-code-editor__main--Color, inherit);
   background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
   border: var(--pf-v6-c-code-editor__main--BorderWidth) solid;
@@ -141,6 +155,7 @@
 
 .pf-v6-c-code-editor__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--pf-v6-c-code-editor__code--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-code-editor__code--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-code-editor__code--PaddingInlineStart);

package/components/CodeEditor/code-editor.scss

@@ -71,9 +71,22 @@
 }
 
 .#{$code-editor} {
+  display: flex;
+  flex-direction: column;
+
   &.pf-m-read-only {
     --#{$code-editor}__main--BackgroundColor: var(--#{$code-editor}--m-read-only__main--BackgroundColor);
   }
+
+  &.pf-m-full-height {
+    height: 100%;
+  }
+}
+
+.#{$code-editor}__container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .#{$code-editor}__header {
@@ -144,7 +157,8 @@
 }
 
 .#{$code-editor}__main {
-  position: relative;
+  position: relative; 
+  flex-grow: 1;
   color: var(--#{$code-editor}__main--Color, inherit);
   background-color: var(--#{$code-editor}__main--BackgroundColor);
   border: var(--#{$code-editor}__main--BorderWidth) solid;
@@ -170,6 +184,7 @@
 
 .#{$code-editor}__code {
   position: relative;
+  height: 100%;
   padding-block-start: var(--#{$code-editor}__code--PaddingBlockStart);
   padding-block-end: var(--#{$code-editor}__code--PaddingBlockEnd);
   padding-inline-start: var(--#{$code-editor}__code--PaddingInlineStart);

package/components/Content/content.css

@@ -36,6 +36,7 @@
   --pf-v6-c-content--h6--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-content--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --pf-v6-c-content--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --pf-v6-c-content--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
   --pf-v6-c-content--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--small--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-content--small--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -135,6 +136,14 @@
 .pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6):last-child {
   margin-block-end: 0;
 }
+:is(.pf-v6-c-content--h1,
+.pf-v6-c-content--h2,
+.pf-v6-c-content--h3,
+.pf-v6-c-content--h4,
+.pf-v6-c-content--h5,
+.pf-v6-c-content--h6, .pf-v6-c-content h1, .pf-v6-c-content h2, .pf-v6-c-content h3, .pf-v6-c-content h4, .pf-v6-c-content h5, .pf-v6-c-content h6).pf-m-page-title {
+  font-weight: var(--pf-v6-c-content--heading--m-page-title--FontWeight);
+}
 
 :is(.pf-v6-c-content--h1, .pf-v6-c-content h1) {
   margin-block-start: var(--pf-v6-c-content--h1--MarginBlockStart);

package/components/Content/content.scss

@@ -56,6 +56,9 @@
   --#{$content}--h6--FontSize: var(--pf-t--global--font--size--heading--h6);
   --#{$content}--h6--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
+  // Page title
+  --#{$content}--heading--m-page-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+
   // Small text
   --#{$content}--small--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --#{$content}--small--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -194,6 +197,10 @@
     &:last-child {
       margin-block-end: 0;
     }
+
+    &.pf-m-page-title {
+      font-weight: var(--#{$content}--heading--m-page-title--FontWeight);
+    }
   }
 
   @at-root :is(

package/components/DataList/data-list.css

@@ -503,6 +503,8 @@
   --pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
+  --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -556,6 +558,10 @@
 .pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__check {
   font-size: var(--pf-v6-c-data-list--m-compact__check--FontSize);
 }
+.pf-v6-c-data-list.pf-m-compact .pf-v6-c-data-list__item-action {
+  padding-block-start: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart--offset));
+  padding-block-end: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd--offset));
+}
 .pf-v6-c-data-list.pf-m-drag-over {
   overflow-anchor: none;
 }

package/components/DataList/data-list.scss

@@ -132,6 +132,8 @@
   --#{$data-list}--m-compact__item-control--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --#{$data-list}--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$data-list}--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$data-list}--m-compact__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--compact);
+  --#{$data-list}--m-compact__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--compact);
   --#{$data-list}--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
   --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -175,6 +177,11 @@
     .#{$data-list}__check {
       font-size: var(--#{$data-list}--m-compact__check--FontSize);
     }
+
+    .#{$data-list}__item-action {
+      padding-block-start: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockStart) - var(--#{$data-list}--m-compact__item-action--PaddingBlockStart--offset));
+      padding-block-end: calc(var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd) - var(--#{$data-list}--m-compact__item-action--PaddingBlockEnd--offset));
+    }
   }
 
   &.pf-m-drag-over {

package/components/Label/label-group.css

@@ -1,16 +1,22 @@
 .pf-v6-c-label-group {
   --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group--MaxWidth: 100%;
   --pf-v6-c-label-group--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group__main--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__main--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-label-group__main--MaxWidth: 100%;
+  --pf-v6-c-label-group__main--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list--MaxWidth: 100%;
+  --pf-v6-c-label-group__list--MinWidth: 0;
   --pf-v6-c-label-group--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-label-group__list-item--MaxWidth: 100%;
   --pf-v6-c-label-group--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label-group--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--m-category--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -37,6 +43,7 @@
   row-gap: var(--pf-v6-c-label-group--RowGap);
   column-gap: var(--pf-v6-c-label-group--ColumnGap);
   align-items: center;
+  max-width: var(--pf-v6-c-label-group--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-category {
   padding-block-start: var(--pf-v6-c-label-group--m-category--PaddingBlockStart);
@@ -62,9 +69,11 @@
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__list {
   flex-direction: column;
   align-items: flex-start;
+  max-width: var(--pf-v6-c-label-group__list--MaxWidth);
 }
 .pf-v6-c-label-group.pf-m-vertical .pf-v6-c-label-group__main {
   flex-direction: column;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 .pf-v6-c-label-group.pf-m-editable,
 .pf-v6-c-label-group.pf-m-editable .pf-v6-c-label-group__main,
@@ -85,6 +94,7 @@
   row-gap: var(--pf-v6-c-label-group__main--RowGap);
   column-gap: var(--pf-v6-c-label-group__main--ColumnGap);
   align-items: baseline;
+  min-width: var(--pf-v6-c-label-group__main--MinWidth);
 }
 
 .pf-v6-c-label-group__list {
@@ -92,10 +102,12 @@
   flex-wrap: wrap;
   row-gap: var(--pf-v6-c-label-group__list--RowGap);
   column-gap: var(--pf-v6-c-label-group__list--ColumnGap);
+  min-width: var(--pf-v6-c-label-group__list--MinWidth);
 }
 
 .pf-v6-c-label-group__list-item {
   display: inline-flex;
+  max-width: var(--pf-v6-c-label-group__list-item--MaxWidth);
 }
 
 .pf-v6-c-label-group__label {

package/components/Label/label-group.scss

@@ -4,21 +4,29 @@
   // Label group - spaces main with the close button
   --#{$label-group}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$label-group}--MaxWidth: 100%;
   --#{$label-group}--m-vertical--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--m-vertical--ColumnGap: var(--pf-t--global--spacer--sm);
 
   // Main - spaces the category label with the list
   --#{$label-group}__main--RowGap: var(--pf-t--global--spacer--xs);
   --#{$label-group}__main--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$label-group}__main--MaxWidth: 100%;
+  --#{$label-group}__main--MinWidth: 0;
   --#{$label-group}--m-vertical__main--RowGap: var(--pf-t--global--spacer--sm);
   --#{$label-group}--m-vertical__main--ColumnGap: var(--pf-t--global--spacer--xs);
 
   // List - spaces the items
   --#{$label-group}__list--RowGap: var(--pf-t--global--spacer--xs);
   --#{$label-group}__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$label-group}__list--MaxWidth: 100%;
+  --#{$label-group}__list--MinWidth: 0;
   --#{$label-group}--m-vertical__list--RowGap: var(--pf-t--global--spacer--xs);
   --#{$label-group}--m-vertical__list--ColumnGap: var(--pf-t--global--spacer--xs);
 
+  // List item
+  --#{$label-group}__list-item--MaxWidth: 100%;
+
   // Category
   --#{$label-group}--m-category--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$label-group}--m-category--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -52,6 +60,7 @@
   row-gap: var(--#{$label-group}--RowGap);
   column-gap: var(--#{$label-group}--ColumnGap);
   align-items: center;
+  max-width: var(--#{$label-group}--MaxWidth);
 
   &.pf-m-category {
     padding-block-start: var(--#{$label-group}--m-category--PaddingBlockStart);
@@ -79,10 +88,12 @@
     .#{$label-group}__list {
       flex-direction: column;
       align-items: flex-start;
+      max-width: var(--#{$label-group}__list--MaxWidth);
     }
 
     .#{$label-group}__main {
       flex-direction: column;
+      min-width: var(--#{$label-group}__main--MinWidth);
     }
   }
 
@@ -109,6 +120,7 @@
   row-gap: var(--#{$label-group}__main--RowGap);
   column-gap: var(--#{$label-group}__main--ColumnGap);
   align-items: baseline;
+  min-width: var(--#{$label-group}__main--MinWidth);
 }
 
 .#{$label-group}__list {
@@ -116,10 +128,12 @@
   flex-wrap: wrap;
   row-gap: var(--#{$label-group}__list--RowGap);
   column-gap: var(--#{$label-group}__list--ColumnGap);
+  min-width: var(--#{$label-group}__list--MinWidth);
 }
 
 .#{$label-group}__list-item {
   display: inline-flex;
+  max-width: var(--#{$label-group}__list-item--MaxWidth);
 }
 
 .#{$label-group}__label {

package/components/Label/label.css

@@ -4,6 +4,7 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--MaxWidth: 100%;
+  --pf-v6-c-label--MinWidth: calc((var(--pf-v6-c-label--FontSize) * var(--pf-t--global--font--line-height--body) + var(--pf-v6-c-label--PaddingBlockStart) + var(--pf-v6-c-label--PaddingBlockEnd)));
   --pf-v6-c-label--BorderWidth: 0;
   --pf-v6-c-label--BorderColor: transparent;
   --pf-v6-c-label--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -160,6 +161,7 @@
   --pf-v6-c-label--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset: 0.0625rem;
+  --pf-v6-c-label--m-compact--MinWidth: calc((var(--pf-v6-c-label--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--pf-v6-c-label--m-compact--PaddingBlockStart) + var(--pf-v6-c-label--m-compact--PaddingBlockEnd)));
   --pf-v6-c-label__content--MaxWidth: 100%;
   --pf-v6-c-label__content--Gap: var(--pf-t--global--spacer--gap--text-to-element--compact);
   --pf-v6-c-label__content--Cursor: initial;
@@ -193,6 +195,7 @@
 
 .pf-v6-c-label {
   position: relative;
+  min-width: var(--pf-v6-c-label--MinWidth);
   max-width: var(--pf-v6-c-label--MaxWidth);
   padding-block-start: var(--pf-v6-c-label--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-label--PaddingBlockEnd);
@@ -351,6 +354,7 @@
   --pf-v6-c-label--PaddingBlockEnd: var(--pf-v6-c-label--m-compact--PaddingBlockEnd);
   --pf-v6-c-label--PaddingInlineStart: var(--pf-v6-c-label--m-compact--PaddingInlineStart);
   --pf-v6-c-label--FontSize: var(--pf-v6-c-label--m-compact--FontSize);
+  --pf-v6-c-label--MinWidth: var(--pf-v6-c-label--m-compact--MinWidth);
   --pf-v6-c-label--m-editable--TextUnderlineOffset: var(--pf-v6-c-label--m-compact--m-editable--TextUnderlineOffset);
 }
 .pf-v6-c-label.pf-m-filled .pf-v6-c-label__actions .pf-v6-c-button {
@@ -439,6 +443,7 @@
 .pf-v6-c-label__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pf-v6-c-label__text {

package/components/Label/label.scss

@@ -6,6 +6,7 @@
   --#{$label}--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --#{$label}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$label}--MaxWidth: 100%;
+  --#{$label}--MinWidth: calc((var(--#{$label}--FontSize) * var(--pf-t--global--font--line-height--body) + var(--#{$label}--PaddingBlockStart) + var(--#{$label}--PaddingBlockEnd)));
   --#{$label}--BorderWidth: 0;
   --#{$label}--BorderColor: transparent;
   --#{$label}--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -202,6 +203,7 @@
   --#{$label}--m-compact--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$label}--m-compact--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$label}--m-compact--m-editable--TextUnderlineOffset: #{pf-size-prem(1px)};
+  --#{$label}--m-compact--MinWidth: calc((var(--#{$label}--m-compact--FontSize) * var(--pf-t--global--font--line-height--body)) + (var(--#{$label}--m-compact--PaddingBlockStart) + var(--#{$label}--m-compact--PaddingBlockEnd)));
 
   // Content
   --#{$label}__content--MaxWidth: 100%;
@@ -251,6 +253,7 @@
 
 .#{$label} {
   position: relative;
+  min-width: var(--#{$label}--MinWidth);
   max-width: var(--#{$label}--MaxWidth);
   padding-block-start: var(--#{$label}--PaddingBlockStart);
   padding-block-end: var(--#{$label}--PaddingBlockEnd);
@@ -422,6 +425,7 @@
     --#{$label}--PaddingBlockEnd: var(--#{$label}--m-compact--PaddingBlockEnd);
     --#{$label}--PaddingInlineStart: var(--#{$label}--m-compact--PaddingInlineStart);
     --#{$label}--FontSize: var(--#{$label}--m-compact--FontSize);
+    --#{$label}--MinWidth: var(--#{$label}--m-compact--MinWidth);
     --#{$label}--m-editable--TextUnderlineOffset: var(--#{$label}--m-compact--m-editable--TextUnderlineOffset);
   }
 
@@ -533,6 +537,7 @@
 .#{$label}__content {
   display: inline-flex;
   align-items: center;
+  justify-content: center;
 }
 
 .#{$label}__text {

package/components/Menu/menu.css

@@ -68,7 +68,6 @@
   --pf-v6-c-menu__item-description--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-menu__item-action--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-menu__item-action--icon--size: var(--pf-v6-c-menu__item-action--FontSize, var(--pf-t--global--icon--size--md));
-  --pf-v6-c-menu__item-action--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-menu__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
   --pf-v6-c-menu__item-action--button--MinWidth: calc(var(--pf-v6-c-menu__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
   --pf-v6-c-menu__item-select-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -554,8 +553,13 @@
 .pf-v6-c-menu__item-action.pf-m-favorited,
 .pf-v6-c-menu__item-action.pf-m-favorited:hover,
 .pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button {
-  --pf-v6-c-button--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
-  --pf-v6-c-menu__item-action--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
+  --pf-v6-c-button--m-plain__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
+}
+.pf-v6-c-menu__item-toggle-icon.pf-m-favorited:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited:hover:is(:hover, :focus), .pf-v6-c-menu__item-toggle-icon.pf-m-favorited .pf-v6-c-button:is(:hover, :focus),
+.pf-v6-c-menu__item-action.pf-m-favorited:is(:hover, :focus),
+.pf-v6-c-menu__item-action.pf-m-favorited:hover:is(:hover, :focus),
+.pf-v6-c-menu__item-action.pf-m-favorited .pf-v6-c-button:is(:hover, :focus) {
+  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-menu__item-action--m-favorited--Color);
 }
 
 .pf-v6-c-menu__breadcrumb {

package/components/Menu/menu.scss

@@ -101,7 +101,6 @@
   // * Menu action
   --#{$menu}__item-action--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$menu}__item-action--icon--size: var(--#{$menu}__item-action--FontSize, var(--pf-t--global--icon--size--md));
-  --#{$menu}__item-action--Color: var(--pf-t--global--icon--color--subtle);
   --#{$menu}__item-action--m-favorited--Color: var(--pf-t--global--icon--color--favorite--clicked);
   --#{$menu}__item-action--button--MinWidth: calc(var(--#{$menu}__item-action--icon--size) + var(--pf-t--global--spacer--sm) * 2);
 
@@ -613,8 +612,11 @@
   &.pf-m-favorited,
   &.pf-m-favorited:hover,
   &.pf-m-favorited .#{$button} {
-    --#{$button}--Color: var(--#{$menu}__item-action--m-favorited--Color);
-    --#{$menu}__item-action--Color: var(--#{$menu}__item-action--m-favorited--Color);
+    --#{$button}--m-plain__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
+    
+    &:is(:hover, :focus) {
+      --#{$button}--hover__icon--Color: var(--#{$menu}__item-action--m-favorited--Color);
+    }
   }
 }