@patternfly/react-styles 6.0.0-alpha.25 → 6.0.0-alpha.27

package/css/components/Panel/panel.css

@@ -2,43 +2,44 @@
   --pf-v6-c-panel--Width: auto;
   --pf-v6-c-panel--MinWidth: auto;
   --pf-v6-c-panel--MaxWidth: none;
-  --pf-v6-c-panel--ZIndex: auto;
   --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-panel--BoxShadow: none;
+  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
-  --pf-v6-c-panel--m-raised--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main--MaxHeight: none;
   --pf-v6-c-panel__main--Overflow: visible;
   --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-panel__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--BoxShadow: none;
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
-  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: 0 -0.3125rem 0.25rem -0.25rem rgba(0 0 0 / 16%);
+  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
+  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
 }
 
 .pf-v6-c-panel {
   position: relative;
-  z-index: var(--pf-v6-c-panel--ZIndex);
   width: var(--pf-v6-c-panel--Width);
   min-width: var(--pf-v6-c-panel--MinWidth);
   max-width: var(--pf-v6-c-panel--MaxWidth);
   background-color: var(--pf-v6-c-panel--BackgroundColor);
+  border-radius: var(--pf-v6-c-panel--BorderRadius);
   box-shadow: var(--pf-v6-c-panel--BoxShadow);
 }
 .pf-v6-c-panel::before {
@@ -47,6 +48,7 @@
   pointer-events: none;
   content: "";
   border: var(--pf-v6-c-panel--before--BorderWidth) solid var(--pf-v6-c-panel--before--BorderColor);
+  border-radius: var(--pf-v6-c-panel--BorderRadius);
 }
 .pf-v6-c-panel.pf-m-bordered {
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-bordered--before--BorderWidth);
@@ -57,12 +59,13 @@
 .pf-v6-c-panel.pf-m-raised {
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
   --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
-  --pf-v6-c-panel--ZIndex: var(--pf-v6-c-panel--m-raised--ZIndex);
 }
 .pf-v6-c-panel.pf-m-scrollable {
   --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
   --pf-v6-c-panel__main--Overflow: var(--pf-v6-c-panel--m-scrollable__main--Overflow);
   --pf-v6-c-panel__footer--BoxShadow: var(--pf-v6-c-panel--m-scrollable__footer--BoxShadow);
+  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockStart);
+  --pf-v6-c-panel__footer--PaddingBlockEnd: var(--pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd);
 }
 
 .pf-v6-c-panel__header {

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/Toolbar/toolbar.css

@@ -17,6 +17,7 @@
   --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
+  --pf-v6-c-toolbar__content--PaddingBlockStart: 0;
   --pf-v6-c-toolbar__expandable-content--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-toolbar__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar__expandable-content--BackgroundColor: var(--pf-t--global--background--color--floating--default);

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;
 }