@patternfly/react-styles 6.0.0-alpha.24 → 6.0.0-alpha.26

package/css/components/_index.css

@@ -346,10 +346,10 @@
 }
 
 :where(:root, .pf-v6-c-action-list) {
-  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-action-list--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
+  --pf-v6-c-action-list--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal);
+  --pf-v6-c-action-list__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
+  --pf-v6-c-action-list--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 }
 
 .pf-v6-c-action-list,
@@ -582,7 +582,7 @@
   margin-inline-end: var(--pf-v6-c-alert__action-group__c-button--not-last-child--MarginInlineEnd);
 }
 
-.pf-v6-c-alert-group {
+:where(:root, .pf-v6-c-alert-group) {
   --pf-v6-c-alert-group__item--MarginBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert-group--m-toast--InsetBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-alert-group--m-toast--InsetInlineEnd: var(--pf-t--global--spacer--xl);
@@ -605,6 +605,7 @@
   --pf-v6-c-alert-group__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-alert-group__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
 }
+
 .pf-v6-c-alert-group > * + * {
   margin-block-start: var(--pf-v6-c-alert-group__item--MarginBlockStart);
 }
@@ -1072,12 +1073,12 @@
   --pf-v6-c-banner--m-orangered--Color: var(--pf-t--global--text--color--nonstatus--on-orangered--default);
   --pf-v6-c-banner--m-orange--BackgroundColor: var(--pf-t--global--color--nonstatus--orange--default);
   --pf-v6-c-banner--m-orange--Color: var(--pf-t--global--text--color--nonstatus--on-orange--default);
-  --pf-v6-c-banner--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
-  --pf-v6-c-banner--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
+  --pf-v6-c-banner--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-banner--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
   --pf-v6-c-banner--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
   --pf-v6-c-banner--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
-  --pf-v6-c-banner--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
-  --pf-v6-c-banner--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
+  --pf-v6-c-banner--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-banner--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
   --pf-v6-c-banner--m-blue--BackgroundColor: var(--pf-t--global--color--nonstatus--blue--default);
   --pf-v6-c-banner--m-blue--Color: var(--pf-t--global--text--color--nonstatus--on-blue--default);
   --pf-v6-c-banner--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
@@ -1133,17 +1134,17 @@
   --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-orange--BackgroundColor);
   --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-orange--Color);
 }
-.pf-v6-c-banner.pf-m-gold {
-  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-gold--BackgroundColor);
-  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-gold--Color);
+.pf-v6-c-banner.pf-m-yellow {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-yellow--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-yellow--Color);
 }
 .pf-v6-c-banner.pf-m-green {
   --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-green--BackgroundColor);
   --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-green--Color);
 }
-.pf-v6-c-banner.pf-m-cyan {
-  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-cyan--BackgroundColor);
-  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-cyan--Color);
+.pf-v6-c-banner.pf-m-teal {
+  --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-teal--BackgroundColor);
+  --pf-v6-c-banner--Color: var(--pf-v6-c-banner--m-teal--Color);
 }
 .pf-v6-c-banner.pf-m-blue {
   --pf-v6-c-banner--BackgroundColor: var(--pf-v6-c-banner--m-blue--BackgroundColor);
@@ -1187,9 +1188,12 @@
   cursor: not-allowed;
 }
 
-.pf-v6-c-brand {
+:where(:root, .pf-v6-c-brand) {
   --pf-v6-c-brand--Width: auto;
   --pf-v6-c-brand--Height: auto;
+}
+
+.pf-v6-c-brand {
   width: var(--pf-v6-c-brand--Width--base);
   height: var(--pf-v6-c-brand--Height--base);
   --pf-v6-c-brand--Width--base: var(--pf-v6-c-brand--Width);
@@ -1978,7 +1982,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-calendar-month__date--after--focus--OutlineOffset: -2px;
 }
 
-:where(.pf-v6-c-calendar-month) {
+.pf-v6-c-calendar-month {
   display: inline-flex;
   flex-direction: column;
   padding-block-start: var(--pf-v6-c-calendar-month--PaddingBlockStart);
@@ -2202,14 +2206,24 @@ button.pf-v6-c-breadcrumb__link {
   flex-direction: column;
   overflow: auto;
   background-color: var(--pf-v6-c-card--BackgroundColor);
-  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
+  border: 0;
   border-radius: var(--pf-v6-c-card--BorderRadius);
 }
+.pf-v6-c-card::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
+  border-radius: inherit;
+}
 .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
   gap: 0;
 }
 .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
   isolation: isolate;
+}
+.pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
   border: none;
 }
 .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions .pf-v6-c-check__label,
@@ -7844,14 +7858,14 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-orangered--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-orangered--hover);
   --pf-v6-c-label--m-orangered--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--default);
   --pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--orangered--hover);
-  --pf-v6-c-label--m-gold--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--default);
-  --pf-v6-c-label--m-gold--Color: var(--pf-t--global--text--color--nonstatus--on-gold--default);
-  --pf-v6-c-label--m-gold__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--default);
-  --pf-v6-c-label--m-gold--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--gold--hover);
-  --pf-v6-c-label--m-gold--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-gold--hover);
-  --pf-v6-c-label--m-gold--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-gold--hover);
-  --pf-v6-c-label--m-gold--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--default);
-  --pf-v6-c-label--m-gold--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--gold--hover);
+  --pf-v6-c-label--m-yellow--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--default);
+  --pf-v6-c-label--m-yellow--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--default);
+  --pf-v6-c-label--m-yellow__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--default);
+  --pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--yellow--hover);
+  --pf-v6-c-label--m-yellow--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-yellow--hover);
+  --pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-yellow--hover);
+  --pf-v6-c-label--m-yellow--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--default);
+  --pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--yellow--hover);
   --pf-v6-c-label--m-green--BackgroundColor: var(--pf-t--global--color--nonstatus--green--default);
   --pf-v6-c-label--m-green--Color: var(--pf-t--global--text--color--nonstatus--on-green--default);
   --pf-v6-c-label--m-green__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--default);
@@ -7860,14 +7874,14 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-green--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-green--hover);
   --pf-v6-c-label--m-green--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--green--default);
   --pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--green--hover);
-  --pf-v6-c-label--m-cyan--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--default);
-  --pf-v6-c-label--m-cyan--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--default);
-  --pf-v6-c-label--m-cyan__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--default);
-  --pf-v6-c-label--m-cyan--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--cyan--hover);
-  --pf-v6-c-label--m-cyan--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-cyan--hover);
-  --pf-v6-c-label--m-cyan--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-cyan--hover);
-  --pf-v6-c-label--m-cyan--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--default);
-  --pf-v6-c-label--m-cyan--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--cyan--hover);
+  --pf-v6-c-label--m-teal--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--default);
+  --pf-v6-c-label--m-teal--Color: var(--pf-t--global--text--color--nonstatus--on-teal--default);
+  --pf-v6-c-label--m-teal__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--default);
+  --pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor: var(--pf-t--global--color--nonstatus--teal--hover);
+  --pf-v6-c-label--m-teal--m-clickable--hover--Color: var(--pf-t--global--text--color--nonstatus--on-teal--hover);
+  --pf-v6-c-label--m-teal--m-clickable--hover__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-teal--hover);
+  --pf-v6-c-label--m-teal--m-outline--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--default);
+  --pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor: var(--pf-t--global--border--color--nonstatus--teal--hover);
   --pf-v6-c-label--m-purple--BackgroundColor: var(--pf-t--global--color--nonstatus--purple--default);
   --pf-v6-c-label--m-purple--Color: var(--pf-t--global--text--color--nonstatus--on-purple--default);
   --pf-v6-c-label--m-purple__icon--Color: var(--pf-t--global--icon--color--nonstatus--on-purple--default);
@@ -8041,15 +8055,15 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--BorderColor);
   --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-orangered--m-outline--m-clickable--hover--BorderColor);
 }
-.pf-v6-c-label.pf-m-gold {
-  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-gold--BackgroundColor);
-  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-gold--Color);
-  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-gold__icon--Color);
-  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-gold--m-clickable--hover--BackgroundColor);
-  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-gold--m-clickable--hover--Color);
-  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-gold--m-clickable--hover__icon--Color);
-  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-gold--m-outline--BorderColor);
-  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-gold--m-outline--m-clickable--hover--BorderColor);
+.pf-v6-c-label.pf-m-yellow {
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-yellow--BackgroundColor);
+  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-yellow--Color);
+  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-yellow__icon--Color);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-yellow--m-clickable--hover--BackgroundColor);
+  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover--Color);
+  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-yellow--m-clickable--hover__icon--Color);
+  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--BorderColor);
+  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-yellow--m-outline--m-clickable--hover--BorderColor);
 }
 .pf-v6-c-label.pf-m-green {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-green--BackgroundColor);
@@ -8061,15 +8075,15 @@ label.pf-v6-c-input-group__text {
   --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-green--m-outline--BorderColor);
   --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-green--m-outline--m-clickable--hover--BorderColor);
 }
-.pf-v6-c-label.pf-m-cyan {
-  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-cyan--BackgroundColor);
-  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-cyan--Color);
-  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-cyan__icon--Color);
-  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-cyan--m-clickable--hover--BackgroundColor);
-  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-cyan--m-clickable--hover--Color);
-  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-cyan--m-clickable--hover__icon--Color);
-  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-cyan--m-outline--BorderColor);
-  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-cyan--m-outline--m-clickable--hover--BorderColor);
+.pf-v6-c-label.pf-m-teal {
+  --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-teal--BackgroundColor);
+  --pf-v6-c-label--Color: var(--pf-v6-c-label--m-teal--Color);
+  --pf-v6-c-label__icon--Color: var(--pf-v6-c-label--m-teal__icon--Color);
+  --pf-v6-c-label--m-clickable--hover--BackgroundColor: var(--pf-v6-c-label--m-teal--m-clickable--hover--BackgroundColor);
+  --pf-v6-c-label--m-clickable--hover--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover--Color);
+  --pf-v6-c-label--m-clickable--hover__icon--Color: var(--pf-v6-c-label--m-teal--m-clickable--hover__icon--Color);
+  --pf-v6-c-label--m-outline--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--BorderColor);
+  --pf-v6-c-label--m-outline--m-clickable--hover--BorderColor: var(--pf-v6-c-label--m-teal--m-outline--m-clickable--hover--BorderColor);
 }
 .pf-v6-c-label.pf-m-purple {
   --pf-v6-c-label--BackgroundColor: var(--pf-v6-c-label--m-purple--BackgroundColor);
@@ -8422,7 +8436,7 @@ input.pf-v6-c-label__content {
   display: none;
 }
 
-.pf-v6-c-list {
+:where(:root, .pf-v6-c-list) {
   --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-list--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-list--nested--MarginInlineStart: var(--pf-t--global--spacer--sm);
@@ -8440,6 +8454,9 @@ input.pf-v6-c-label__content {
   --pf-v6-c-list--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
   --pf-v6-c-list--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-list--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
+}
+
+.pf-v6-c-list {
   padding-inline-start: var(--pf-v6-c-list--PaddingInlineStart);
 }
 .pf-v6-c-list ol,
@@ -8497,7 +8514,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-list--m-bordered--li--BorderBlockEndWidth: 0;
 }
 
-.pf-v6-c-log-viewer {
+:where(:root, .pf-v6-c-log-viewer) {
   --pf-v6-c-log-viewer--Height: 100%;
   --pf-v6-c-log-viewer--MaxHeight: auto;
   --pf-v6-c-log-viewer--m-line-numbers__index--Display: inline;
@@ -8544,6 +8561,9 @@ ul.pf-v6-c-list {
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--spacer: 0;
   --pf-v6-c-log-viewer--c-toolbar__group--m-toggle-group--m-show--spacer: var(--pf-t--global--spacer--sm);
   --pf-v6-c-log-viewer--m-dark__main--BorderWidth: 0;
+}
+
+.pf-v6-c-log-viewer {
   display: flex;
   flex-direction: column;
   height: var(--pf-v6-c-log-viewer--Height);
@@ -9374,6 +9394,8 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
   --pf-v6-c-menu__content--Height: auto;
@@ -9387,6 +9409,9 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-menu__list-item--TransitionProperty: background-color;
   --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
   --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
@@ -9557,6 +9582,8 @@ ul.pf-v6-c-list {
   background-color: var(--pf-v6-c-menu--BackgroundColor);
   border-radius: var(--pf-v6-c-menu--BorderRadius);
   box-shadow: var(--pf-v6-c-menu--BoxShadow);
+  transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
+  transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
 }
 .pf-v6-c-menu .pf-v6-c-menu {
   min-width: 100%;
@@ -9728,6 +9755,9 @@ ul.pf-v6-c-list {
 .pf-v6-c-menu__list-item {
   align-items: baseline;
   min-width: 0;
+  transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
+  transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
 }
 .pf-v6-c-menu__list-item > * {
   position: relative;
@@ -9737,6 +9767,7 @@ ul.pf-v6-c-list {
   inset: 0;
   content: "";
   background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
+  transition: inherit;
 }
 .pf-v6-c-menu__list-item.pf-m-load {
   --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
@@ -9945,6 +9976,9 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--button--default);
   --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
+  --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-menu-toggle--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-menu-toggle--TransitionProperty: color, background-color, border-width, border-color;
   --pf-v6-c-menu-toggle--hover--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-menu-toggle--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
@@ -10068,6 +10102,9 @@ ul.pf-v6-c-list {
   cursor: pointer;
   background-color: var(--pf-v6-c-menu-toggle--BackgroundColor);
   border: 0;
+  transition-timing-function: var(--pf-v6-c-menu-toggle--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-menu-toggle--TransitionDuration);
+  transition-property: var(--pf-v6-c-menu-toggle--TransitionProperty);
 }
 .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle::before {
   border-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
@@ -10082,6 +10119,7 @@ ul.pf-v6-c-list {
   pointer-events: none;
   content: "";
   border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
+  transition: inherit;
 }
 .pf-v6-c-menu-toggle.pf-m-primary {
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
@@ -12217,14 +12255,17 @@ ul.pf-v6-c-list {
   --pf-v6-c-pagination--m-bottom--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-bottom--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
+  --pf-v6-c-pagination__page-menu--Display--base: block;
   --pf-v6-c-pagination__page-menu--Display: none;
   --pf-v6-c-pagination--m-display-summary__page-menu--Display: none;
-  --pf-v6-c-pagination--m-display-full__page-menu--Display: inline-flex;
+  --pf-v6-c-pagination--m-display-full__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+  --pf-v6-c-pagination--m-bottom__page-menu--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
+  --pf-v6-c-pagination__page-menu--md--Display: var(--pf-v6-c-pagination__page-menu--Display--base);
 }
 @media screen and (min-width: 768px) {
   :where(:root, .pf-v6-c-pagination) {
     --pf-v6-c-pagination--m-bottom--BoxShadow: none;
-    --pf-v6-c-pagination__page-menu--Display: inline-flex;
+    --pf-v6-c-pagination__page-menu--Display: var(--pf-v6-c-pagination__page-menu--md--Display);
     --pf-v6-c-pagination__nav--Display: inline-flex;
     --pf-v6-c-pagination__total-items--Display: none;
   }
@@ -12271,7 +12312,7 @@ ul.pf-v6-c-list {
 }
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__page-menu {
   position: absolute;
-  display: block;
+  display: var(--pf-v6-c-pagination--m-bottom__page-menu--Display);
 }
 .pf-v6-c-pagination.pf-m-bottom .pf-v6-c-pagination__nav {
   display: flex;
@@ -12625,7 +12666,7 @@ ul.pf-v6-c-list {
   box-shadow: var(--pf-v6-c-panel__footer--BoxShadow);
 }
 
-.pf-v6-c-popover {
+:where(:root, .pf-v6-c-popover) {
   --pf-v6-c-popover--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-popover--MinWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
   --pf-v6-c-popover--MaxWidth: calc(var(--pf-v6-c-popover__content--PaddingInlineStart) + var(--pf-v6-c-popover__content--PaddingInlineEnd) + 18.75rem);
@@ -12674,6 +12715,9 @@ ul.pf-v6-c-list {
   --pf-v6-c-popover__title-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-popover__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v6-c-popover__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
+}
+
+.pf-v6-c-popover {
   position: relative;
   min-width: var(--pf-v6-c-popover--MinWidth);
   max-width: var(--pf-v6-c-popover--MaxWidth);
@@ -14767,7 +14811,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
   --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
 }
 
-.pf-v6-c-table[class*=pf-m-grid] {
+:where(:root, .pf-v6-c-table[class*=pf-m-grid]) {
   --pf-v6-c-table--responsive--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table__tbody--responsive--border-width--base: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-table__tbody--after--border-width--base: var(--pf-t--global--border--width--extra-strong);
@@ -16827,6 +16871,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table .pf-v6-c-table :is(.pf-v6-c-table__tbody, .pf-v6-c-table__tr:last-child) {
   border-block-end: 0;
 }
+.pf-v6-c-table .pf-v6-c-button .pf-v6-c-table__sort-indicator {
+  --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
+}
 
 .pf-v6-c-table__text {
   --pf-v6-c-table--cell--MaxWidth: 100%;
@@ -16922,14 +16969,16 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
 .pf-v6-c-table .pf-v6-c-table__check,
 .pf-v6-c-table .pf-v6-c-table__toggle,
 .pf-v6-c-table .pf-v6-c-table__action,
-.pf-v6-c-table .pf-v6-c-table__favorite,
-.pf-v6-c-table th:where(.pf-v6-c-table__th).pf-m-favorite,
 .pf-v6-c-table .pf-v6-c-table__inline-edit-action,
 .pf-v6-c-table .pf-v6-c-table__draggable {
   --pf-v6-c-table--cell--MinWidth: 0;
   --pf-v6-c-table--cell--Width: 1%;
 }
 
+.pf-v6-c-table .pf-v6-c-table__favorite {
+  --pf-v6-c-table--cell--MaxWidth: auto;
+}
+
 .pf-v6-c-table__toggle {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__toggle--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__toggle--PaddingBlockEnd);
@@ -17067,8 +17116,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-table__sort .pf-v6-c-table__button .pf-v6-c-table__text {
   color: var(--pf-v6-c-table__sort__button__text--Color);
 }
-.pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button {
+.pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button {
   --pf-v6-c-table__sort-indicator--Color: var(--pf-v6-c-table__sort--m-selected__sort-indicator--Color);
+}
+.pf-v6-c-table__sort.pf-m-selected .pf-v6-c-table__button .pf-v6-c-table__text, .pf-v6-c-table__sort.pf-m-selected .pf-v6-c-button .pf-v6-c-table__text {
   color: var(--pf-v6-c-table__sort--m-selected__button--Color);
 }
 .pf-v6-c-table__sort.pf-m-help {
@@ -18967,15 +19018,19 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-text-input-group--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --pf-v6-c-text-input-group--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-text-input-group--BorderWidth: var(--pf-t--global--border--width--control--default);
-  --pf-v6-c-text-input-group--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-text-input-group__main--RowGap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-text-input-group__main--ColumnGap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group__text--BorderRadius--base: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-text-input-group__text--BorderStartStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+  --pf-v6-c-text-input-group__text--BorderStartEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+  --pf-v6-c-text-input-group__text--BorderEndEndRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+  --pf-v6-c-text-input-group__text--BorderEndStartRadius: var(--pf-v6-c-text-input-group__text--BorderRadius--base);
+  --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-text-input-group__text-input--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-text-input-group__text-input--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-text-input-group__text-input--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -19001,15 +19056,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   width: 100%;
   color: var(--pf-v6-c-text-input-group--Color, inherit);
   background-color: var(--pf-v6-c-text-input-group--BackgroundColor);
-  border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
-}
-.pf-v6-c-text-input-group::before {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  content: "";
-  border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
-  border-radius: var(--pf-v6-c-text-input-group--BorderRadius);
 }
 .pf-v6-c-text-input-group:hover {
   --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
@@ -19023,7 +19069,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-text-input-group.pf-m-plain {
   --pf-v6-c-text-input-group--BackgroundColor: transparent;
 }
-.pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::after {
+.pf-v6-c-text-input-group.pf-m-plain .pf-v6-c-text-input-group__text::before {
   border: 0;
 }
 
@@ -19038,12 +19084,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-text-input-group__text-input--PaddingInlineStart: var(--pf-v6-c-text-input-group__main--m-icon__text-input--PaddingInlineStart);
 }
 .pf-v6-c-text-input-group__main > :first-child:not(.pf-v6-c-text-input-group__text) {
+  padding-block-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--PaddingBlockEnd);
   margin-inline-start: var(--pf-v6-c-text-input-group__main--first-child--not--text-input--MarginInlineStart);
 }
 .pf-v6-c-text-input-group__main .pf-v6-c-label-group__main {
-  padding-block-start: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingBlockEnd);
-  padding-inline-end: var(--pf-v6-c-text-input-group--c-chip-group__main--PaddingInlineEnd);
+  padding-block-start: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingBlockEnd);
+  padding-inline-end: var(--pf-v6-c-text-input-group--c-label-group__main--PaddingInlineEnd);
 }
 
 .pf-v6-c-text-input-group__text {
@@ -19052,11 +19100,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   grid-template-areas: "text-input";
   grid-template-columns: 1fr;
 }
-.pf-v6-c-text-input-group__text::before, .pf-v6-c-text-input-group__text::after {
+.pf-v6-c-text-input-group__text::before {
   position: absolute;
   inset: 0;
   pointer-events: none;
   content: "";
+  border: var(--pf-v6-c-text-input-group--BorderWidth) solid var(--pf-v6-c-text-input-group--BorderColor);
+  border-start-start-radius: var(--pf-v6-c-text-input-group__text--BorderStartStartRadius);
+  border-start-end-radius: var(--pf-v6-c-text-input-group__text--BorderStartEndRadius);
+  border-end-start-radius: var(--pf-v6-c-text-input-group__text--BorderEndStartRadius);
+  border-end-end-radius: var(--pf-v6-c-text-input-group__text--BorderEndEndRadius);
 }
 
 .pf-v6-c-text-input-group__icon {
@@ -22520,7 +22573,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 }
 
 :where(:root, .pf-v6-c-truncate) {
-  --pf-v6-c-truncate--MinWidth: 12ch;
+  --pf-v6-c-truncate--MinWidth: 6ch;
   --pf-v6-c-truncate__start--MinWidth: 6ch;
 }
 

package/css/components/_index.d.ts

@@ -378,9 +378,9 @@ declare const _default: {
     "red": "pf-m-red",
     "orangered": "pf-m-orangered",
     "orange": "pf-m-orange",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "blue": "pf-m-blue",
     "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",

package/css/components/_index.js

@@ -380,9 +380,9 @@ exports.default = {
     "red": "pf-m-red",
     "orangered": "pf-m-orangered",
     "orange": "pf-m-orange",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "blue": "pf-m-blue",
     "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",

package/css/components/_index.mjs

@@ -378,9 +378,9 @@ export default {
     "red": "pf-m-red",
     "orangered": "pf-m-orangered",
     "orange": "pf-m-orange",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "blue": "pf-m-blue",
     "purple": "pf-m-purple",
     "sticky": "pf-m-sticky",

package/css/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -13,3 +13,7 @@
 #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
   height: 540px;
 }
+
+#ws-core-c-text-input-group-plain {
+  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
+}

package/css/docs/components/Truncate/examples/Truncate.css

@@ -2,7 +2,6 @@
   width: 320px;
   resize: horizontal;
   overflow: auto;
-  min-width: 161px;
   max-width: 100%;
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "6.0.0-alpha.24",
+  "version": "6.0.0-alpha.26",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -15,17 +15,14 @@
     "tag": "alpha"
   },
   "scripts": {
-    "generate": "rimraf css && node scripts/writeClassMaps.js && node scripts/copyStyles.js",
+    "generate": "rimraf css && node scripts/writeClassMaps.mjs && node scripts/copyStyles.mjs",
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.150",
-    "camel-case": "^3.0.0",
-    "css": "^2.2.3",
-    "fs-extra": "^11.1.1",
-    "glob": "^7.1.2",
-    "jsdom": "^15.1.0"
+    "@patternfly/patternfly": "6.0.0-alpha.160",
+    "change-case": "^5.4.4",
+    "fs-extra": "^11.2.0"
   },
   "license": "MIT",
-  "gitHead": "e2f8bd614fe8c9c20f205f04ef3e8a26eabe1f33"
+  "gitHead": "5ce8c9748b3f0fafa36430e68d82d0725dff2f2e"
 }

package/scripts/copyStyles.mjs

@@ -0,0 +1,8 @@
+import { copySync } from 'fs-extra/esm';
+import path from 'node:path';
+import url from 'node:url';
+
+const toDir = path.resolve(import.meta.dirname, '../css');
+const fromDir = path.dirname(url.fileURLToPath(import.meta.resolve('@patternfly/patternfly/package.json')));
+
+copySync(path.join(fromDir, 'assets/images'), path.join(toDir, 'assets/images'));