@patternfly/patternfly 6.0.0-alpha.151 → 6.0.0-alpha.153

package/components/Alert/alert-group.css

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

package/components/Alert/alert-group.scss

@@ -1,7 +1,7 @@
 @use '../../sass-utilities' as *;
 
 // Tabs
-.#{$alert-group} {
+:where(:root, .#{$alert-group}) {
   // Alert group variables
   --#{$alert-group}__item--MarginBlockStart: var(--pf-t--global--spacer--md);
 
@@ -28,7 +28,9 @@
   --#{$alert-group}__overflow-button--focus--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
   --#{$alert-group}__overflow-button--active--Color: var(--pf-t--global--text--color--link--hover);
   --#{$alert-group}__overflow-button--active--BoxShadow: var(--pf-t--global--box-shadow--lg), var(--pf-t--global--box-shadow--lg--bottom);
+}
 
+.#{$alert-group} {
   // Spacing between alerts
   > * + * {
     margin-block-start: var(--#{$alert-group}__item--MarginBlockStart);

package/components/Brand/brand.css

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

package/components/Brand/brand.scss

@@ -2,10 +2,12 @@
 
 $pf-v6-c-brand--breakpoint-map: build-breakpoint-map();
 
-.#{$brand} {
+:where(:root, .#{$brand}) {
   --#{$brand}--Width: auto;
   --#{$brand}--Height: auto;
+}
 
+.#{$brand} {
   width: var(--#{$brand}--Width--base);
   height: var(--#{$brand}--Height--base);
 

package/components/Button/button.scss

@@ -24,7 +24,7 @@
   --#{$button}--hover--BorderColor: transparent;
   --#{$button}--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
   --#{$button}--hover--TextDecoration: none;
-  
+
   // Clicked
   --#{$button}--m-clicked--BackgroundColor: transparent;
   --#{$button}--m-clicked--BorderColor: transparent;

package/components/CalendarMonth/calendar-month.css

@@ -58,7 +58,7 @@
   --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);

package/components/CalendarMonth/calendar-month.scss

@@ -24,7 +24,6 @@
   --#{$calendar-month}__day--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$calendar-month}__day--Color: var(--pf-t--global--text--color--regular);
 
-
   // dates td
   --#{$calendar-month}__dates-cell--PaddingBlockStart: #{pf-size-prem(2px)};
   --#{$calendar-month}__dates-cell--PaddingInlineEnd: #{pf-size-prem(2px)};
@@ -71,7 +70,7 @@
   --#{$calendar-month}__date--after--focus--OutlineOffset: -2px;
 }
 
-:where(.#{$calendar-month}) {
+.#{$calendar-month} {
   display: inline-flex;
   flex-direction: column;
   padding-block-start: var(--#{$calendar-month}--PaddingBlockStart);

package/components/Card/card.scss

@@ -34,7 +34,6 @@
   --#{$card}__header-toggle-icon--Transition: var(--pf-t--global--transition);
   --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
 
-
   // Selectable/Clickable
   --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
 

package/components/DataList/data-list.scss

@@ -91,7 +91,6 @@
   --#{$data-list}__check--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
   --#{$data-list}__check--MarginBlockStart: #{pf-size-prem(-1px)}; // slightly offset input
 
-
   // actions
   --#{$data-list}__item-action--Display: flex;
   --#{$data-list}__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);

package/components/FormControl/form-control.scss

@@ -318,7 +318,6 @@
 
     overflow: auto;
   }
-
 }
 
 .#{$form-control}__icon {

package/components/HelperText/helper-text.scss

@@ -29,6 +29,7 @@
   // icon
   --#{$helper-text}__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--xs);
 }
+
 .#{$helper-text} {
   // text
 

package/components/InlineEdit/inline-edit.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-:where(:root,  .#{$inline-edit}) {
+:where(:root, .#{$inline-edit}) {
   // Group
   --#{$inline-edit}__group--item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 

package/components/List/list.css

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

package/components/List/list.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-.#{$list} {
+:where(:root, .#{$list}) {
   // list
   --#{$list}--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$list}--nested--MarginBlockStart: var(--pf-t--global--spacer--sm);
@@ -25,7 +25,9 @@
   --#{$list}--m-icon-lg__item-icon--MinWidth: var(--pf-t--global--icon--size--lg);
   --#{$list}--m-icon-lg__item-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --#{$list}--m-icon-lg__item-icon--FontSize: var(--pf-t--global--icon--size--lg);
+}
 
+.#{$list} {
   padding-inline-start: var(--#{$list}--PaddingInlineStart);
 
   ol,

package/components/LogViewer/log-viewer.css

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

package/components/LogViewer/log-viewer.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-.#{$log-viewer} {
+:where(:root, .#{$log-viewer}) {
   --#{$log-viewer}--Height: 100%;
   --#{$log-viewer}--MaxHeight: auto;
   --#{$log-viewer}--m-line-numbers__index--Display: inline;
@@ -67,7 +67,9 @@
 
   // Dark theme
   --#{$log-viewer}--m-dark__main--BorderWidth: 0;
+}
 
+.#{$log-viewer} {
   &.pf-m-dark {
     --#{$log-viewer}__main--BorderWidth: var(--#{$log-viewer}--m-dark__main--BorderWidth);
 

package/components/Page/page.scss

@@ -17,7 +17,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}--inset: var(--#{$page}--xl--inset);
   }
 
- 
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
@@ -124,7 +123,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-wizard--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$page}__main-wizard--BorderBlockStartColor: var(--pf-t--global--border--color--default);
   --#{$page}__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--button--default);
-  }
+}
 
 .#{$page} {
   // Base

package/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/components/Popover/popover.scss

@@ -1,6 +1,6 @@
 @use '../../sass-utilities' as *;
 
-.#{$popover} {
+:where(:root, .#{$popover}) {
   // Component
   --#{$popover}--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$popover}--MinWidth: calc(var(--#{$popover}__content--PaddingInlineStart) + var(--#{$popover}__content--PaddingInlineEnd) + #{pf-size-prem(300px)});
@@ -67,7 +67,9 @@
 
   // Footer
   --#{$popover}__footer--MarginBlockStart: var(--pf-t--global--spacer--md);
+}
 
+.#{$popover} {
   position: relative;
   min-width: var(--#{$popover}--MinWidth);
   max-width: var(--#{$popover}--MaxWidth);

package/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/components/Table/table-grid.scss

@@ -32,7 +32,7 @@
 }
 
 // - Table grid
-.#{$table}[class*="pf-m-grid"] {
+:where(:root, .#{$table}[class*="pf-m-grid"]) {
   // ============================================================ //
   // Start non-conformant variables
   //

package/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/components/Table/table.scss

@@ -593,6 +593,10 @@
       border-block-end: 0;
     }
   }
+
+  .#{$button} .#{$table}__sort-indicator {
+    --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
+  }
 }
 
 // - Table text
@@ -706,8 +710,6 @@
 .#{$table} .#{$table}__check,
 .#{$table} .#{$table}__toggle,
 .#{$table} .#{$table}__action,
-.#{$table} .#{$table}__favorite,
-.#{$table} th:where(.#{$table}__th).pf-m-favorite,
 .#{$table} .#{$table}__inline-edit-action,
 .#{$table} .#{$table}__draggable {
   --#{$table}--cell--MinWidth: 0;
@@ -715,6 +717,10 @@
 }
 // stylelint-enable
 
+.#{$table} .#{$table}__favorite {
+  --#{$table}--cell--MaxWidth: auto;
+}
+
 // - Table toggle
 .#{$table}__toggle {
   --#{$table}--cell--PaddingBlockStart: var(--#{$table}__toggle--PaddingBlockStart);
@@ -900,11 +906,14 @@
     }
   }
 
-  &.pf-m-selected .#{$table}__button {
+  &.pf-m-selected .#{$table}__button,
+  &.pf-m-selected .#{$button} {
     --#{$table}__sort-indicator--Color: var(--#{$table}__sort--m-selected__sort-indicator--Color);
 
     // override state colors on text
-    color: var(--#{$table}__sort--m-selected__button--Color);
+    .#{$table}__text {
+      color: var(--#{$table}__sort--m-selected__button--Color);
+    }
   }
 
   &.pf-m-help {

package/components/Wizard/wizard.scss

@@ -108,7 +108,7 @@
   --#{$wizard}__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
   --#{$wizard}__toggle-status-icon--InsetBlockStart: 2px; // not spacer-based but needed to align
   --#{$wizard}__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
-  
+
   // Toggle list
   --#{$wizard}__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$wizard}__toggle-list--MarginBlockEnd: calc(var(--#{$wizard}__toggle-list-item--MarginBlockEnd) * -1);
@@ -145,7 +145,7 @@
   // Nav item
   --#{$wizard}__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
 
-  // Outer wrap 
+  // Outer wrap
   --#{$wizard}__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$wizard}__outer-wrap--lg--PaddingInlineStart: var(--#{$wizard}__nav--Width);
   --#{$wizard}__outer-wrap--MinHeight: #{pf-size-prem(250px)};
@@ -477,7 +477,7 @@
     &::before {
       display: none;
     }
-  }    
+  }
 
   &:where(:hover, :focus) {
     --#{$wizard}__nav-link--Color: var(--#{$wizard}__nav-link--hover--Color);

package/components/_index.css

@@ -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);
 }
@@ -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);
@@ -8422,7 +8426,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 +8444,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 +8504,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 +8551,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);
@@ -12625,7 +12635,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 +12684,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 +14780,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 +16840,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 +16938,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 +17085,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/docs/components/Table/examples/Table.md

@@ -19874,21 +19874,33 @@ For sticky columns to function correctly, the parent table's width must be contr
   <thead class="pf-v6-c-table__thead">
     <tr class="pf-v6-c-table__tr" role="row">
       <th
-        class="pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected pf-m-favorite"
+        class="pf-v6-c-table__th pf-v6-c-table__sort pf-m-selected pf-v6-c-table__favorite"
         role="columnheader"
         aria-sort="none"
         scope="col"
       >
-        <button class="pf-v6-c-table__button" aria-label="Favorite">
-          <span class="pf-v6-c-table__button-content">
-            <span class="pf-v6-c-table__text">
+        <div class="pf-v6-c-action-list pf-m-icons">
+          <div class="pf-v6-c-action-list__item">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              aria-label="Favorite all"
+            >
               <i class="fas fa-star" aria-hidden="true"></i>
-            </span>
-            <span class="pf-v6-c-table__sort-indicator">
-              <i class="fas fa-long-arrow-alt-down"></i>
-            </span>
-          </span>
-        </button>
+            </button>
+          </div>
+          <div class="pf-v6-c-action-list__item">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              aria-label="Sort favorites"
+            >
+              <span class="pf-v6-c-table__sort-indicator">
+                <i class="fas fa-long-arrow-alt-down"></i>
+              </span>
+            </button>
+          </div>
+        </div>
       </th>
 
       <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.0.0-alpha.151",
+  "version": "6.0.0-alpha.153",
   "keywords": [],
   "license": "MIT",
   "scripts": {