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

package/css/components/Menu/menu.css

@@ -12,6 +12,8 @@
   --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;
@@ -25,6 +27,9 @@
   --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);
@@ -195,6 +200,8 @@
   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%;
@@ -366,6 +373,9 @@
 .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;
@@ -375,6 +385,7 @@
   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);

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

@@ -13,6 +13,9 @@
   --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);
@@ -136,6 +139,9 @@
   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);
@@ -150,6 +156,7 @@
   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);

package/css/components/Pagination/pagination.css

@@ -28,14 +28,17 @@
   --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;
   }
@@ -82,7 +85,7 @@
 }
 .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;

package/css/components/Popover/popover.css

@@ -1,4 +1,4 @@
-.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);
@@ -47,6 +47,9 @@
   --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);

package/css/components/Table/table-grid.css

@@ -1,4 +1,4 @@
-.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);

package/css/components/Table/table.css

@@ -419,6 +419,9 @@
 .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%;
@@ -514,14 +517,16 @@
 .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);
@@ -659,8 +664,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 {

package/css/components/TextInputGroup/text-input-group.css

@@ -2,15 +2,19 @@
   --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);
@@ -36,15 +40,6 @@
   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);
@@ -58,7 +53,7 @@
 .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;
 }
 
@@ -73,12 +68,14 @@
   --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 {
@@ -87,11 +84,16 @@
   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 {

package/css/components/Truncate/truncate.css

@@ -1,5 +1,5 @@
 :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;
 }