@patternfly/react-styles 6.0.0-prerelease.1 → 6.0.0-prerelease.3

package/css/components/Table/table.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-table) {
+:root,
+.pf-v6-c-table {
   --pf-v6-c-table--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-table--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table--border-width--base: var(--pf-t--global--border--width--divider--default);
@@ -48,7 +49,8 @@
   --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
-  --pf-v6-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
   --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -71,7 +73,6 @@
   --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__expandable-row--Transition: var(--pf-t--global--transition);
   --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -300,6 +301,11 @@
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead) {
   --pf-v6-c-table--cell--FontSize: var(--pf-v6-c-table__thead--cell--FontSize);
   --pf-v6-c-table--cell--FontWeight: var(--pf-v6-c-table__thead--cell--FontWeight);
+  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
+  --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
+  --pf-v6-c-table--cell--Overflow: hidden;
+  --pf-v6-c-table--cell--TextOverflow: ellipsis;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
 }
 .pf-v6-c-table thead:where(.pf-v6-c-table__thead).pf-m-nested-column-header button:where(.pf-v6-c-button) {
   outline-offset: var(--pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset);
@@ -326,40 +332,6 @@
 .pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td).pf-m-help {
   min-width: var(--pf-v6-c-table__th--m-help--MinWidth);
 }
-.pf-v6-c-table > thead, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-truncate, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-truncate {
-  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
-  --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
-  --pf-v6-c-table--cell--Overflow: hidden;
-  --pf-v6-c-table--cell--TextOverflow: ellipsis;
-  --pf-v6-c-table--cell--WhiteSpace: nowrap;
-}
-
-.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-wrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-wrap {
-  --pf-v6-c-table--cell--MinWidth: 0;
-  --pf-v6-c-table--cell--MaxWidth: none;
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--cell--TextOverflow: clip;
-  --pf-v6-c-table--cell--WhiteSpace: normal;
-}
-.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-nowrap, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-nowrap {
-  --pf-v6-c-table--cell--MinWidth: 0;
-  --pf-v6-c-table--cell--MaxWidth: none;
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--cell--TextOverflow: clip;
-  --pf-v6-c-table--cell--WhiteSpace: nowrap;
-}
-.pf-v6-c-table :where([class*=pf-v6-c-table]) .pf-v6-c-table__icon, .pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-fit-content, :where(.pf-v6-c-table) > :is(thead, tbody) .pf-v6-c-table__icon, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-fit-content {
-  --pf-v6-c-table--cell--MinWidth: fit-content;
-  --pf-v6-c-table--cell--MaxWidth: none;
-  --pf-v6-c-table--cell--Width: 1%;
-  --pf-v6-c-table--cell--Overflow: visible;
-  --pf-v6-c-table--cell--TextOverflow: clip;
-  --pf-v6-c-table--cell--WhiteSpace: nowrap;
-}
-.pf-v6-c-table :where([class*=pf-v6-c-table]).pf-m-break-word, :where(.pf-v6-c-table) > :is(thead, tbody).pf-m-break-word {
-  --pf-v6-c-table--cell--WordBreak: break-word;
-  --pf-v6-c-table--cell--WhiteSpace: normal;
-}
 .pf-v6-c-table.pf-m-no-border-rows > tbody:where(.pf-v6-c-table__tbody) {
   --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
   --pf-v6-c-table__tbody--BorderBlockEndWidth: 0;
@@ -423,6 +395,40 @@
   --pf-v6-c-table__sort-indicator--MarginInlineStart: 0;
 }
 
+[class*=pf-v6-c-table].pf-m-truncate {
+  --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
+  --pf-v6-c-table--cell--MaxWidth: var(--pf-v6-c-table--m-truncate--cell--MaxWidth);
+  --pf-v6-c-table--cell--Overflow: hidden;
+  --pf-v6-c-table--cell--TextOverflow: ellipsis;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
+}
+[class*=pf-v6-c-table].pf-m-wrap {
+  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MaxWidth: none;
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--cell--TextOverflow: clip;
+  --pf-v6-c-table--cell--WhiteSpace: normal;
+}
+[class*=pf-v6-c-table].pf-m-nowrap {
+  --pf-v6-c-table--cell--MinWidth: 0;
+  --pf-v6-c-table--cell--MaxWidth: none;
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--cell--TextOverflow: clip;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
+}
+[class*=pf-v6-c-table] .pf-v6-c-table__icon, [class*=pf-v6-c-table].pf-m-fit-content {
+  --pf-v6-c-table--cell--MinWidth: fit-content;
+  --pf-v6-c-table--cell--MaxWidth: none;
+  --pf-v6-c-table--cell--Width: 1%;
+  --pf-v6-c-table--cell--Overflow: visible;
+  --pf-v6-c-table--cell--TextOverflow: clip;
+  --pf-v6-c-table--cell--WhiteSpace: nowrap;
+}
+[class*=pf-v6-c-table].pf-m-break-word {
+  --pf-v6-c-table--cell--WordBreak: break-word;
+  --pf-v6-c-table--cell--WhiteSpace: normal;
+}
+
 .pf-v6-c-table__text {
   --pf-v6-c-table--cell--MaxWidth: 100%;
   position: relative;
@@ -537,7 +543,7 @@
   transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
 }
 .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
-  transition: var(--pf-v6-c-table__toggle--c-button__toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -689,10 +695,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   position: relative;
   border-block-end: 0 solid transparent;
 }
-.pf-v6-c-table__expandable-row,
-.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td):first-child::after {
-  transition: var(--pf-v6-c-table__expandable-row--Transition);
-}
 :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
 :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
   padding-block-start: 0;

package/css/components/Table/table.d.ts

@@ -27,17 +27,17 @@ declare const _default: {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "truncate": "pf-m-truncate",
-    "wrap": "pf-m-wrap",
-    "nowrap": "pf-m-nowrap",
-    "fitContent": "pf-m-fit-content",
-    "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
     "expanded": "pf-m-expanded",
     "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
     "dragOver": "pf-m-drag-over",
+    "truncate": "pf-m-truncate",
+    "wrap": "pf-m-wrap",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
     "noPadding": "pf-m-no-padding",

package/css/components/Table/table.js

@@ -29,17 +29,17 @@ exports.default = {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "truncate": "pf-m-truncate",
-    "wrap": "pf-m-wrap",
-    "nowrap": "pf-m-nowrap",
-    "fitContent": "pf-m-fit-content",
-    "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
     "expanded": "pf-m-expanded",
     "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
     "dragOver": "pf-m-drag-over",
+    "truncate": "pf-m-truncate",
+    "wrap": "pf-m-wrap",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
     "noPadding": "pf-m-no-padding",

package/css/components/Table/table.mjs

@@ -27,17 +27,17 @@ export default {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
-    "truncate": "pf-m-truncate",
-    "wrap": "pf-m-wrap",
-    "nowrap": "pf-m-nowrap",
-    "fitContent": "pf-m-fit-content",
-    "breakWord": "pf-m-break-word",
     "noBorderRows": "pf-m-no-border-rows",
     "expanded": "pf-m-expanded",
     "clickable": "pf-m-clickable",
     "selected": "pf-m-selected",
     "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
     "dragOver": "pf-m-drag-over",
+    "truncate": "pf-m-truncate",
+    "wrap": "pf-m-wrap",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
     "noPadding": "pf-m-no-padding",

package/css/components/Tabs/tabs.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tabs) {
+:root,
+.pf-v6-c-tabs {
   --pf-v6-c-tabs--inset: 0;
   --pf-v6-c-tabs--Width: auto;
   --pf-v6-c-tabs--before--BorderColor: var(--pf-t--global--border--color--default);

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

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-text-input-group) {
+:root,
+.pf-v6-c-text-input-group {
   --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--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);

package/css/components/Tile/tile.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tile) {
+:root,
+.pf-v6-c-tile {
   --pf-v6-c-tile--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tile--PaddingBlockEnd: var(--pf-t--global--spacer--lg);

package/css/components/Timestamp/timestamp.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-timestamp) {
+:root,
+.pf-v6-c-timestamp {
   --pf-v6-c-timestamp--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-timestamp--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-timestamp--OutlineOffset: 0.1875rem;

package/css/components/Title/title.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-title) {
+:root,
+.pf-v6-c-title {
   --pf-v6-c-title--FontFamily: var(--pf-t--global--font--family--heading);
   --pf-v6-c-title--m-4xl--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-title--m-4xl--FontSize: var(--pf-t--global--font--size--heading--2xl);

package/css/components/ToggleGroup/toggle-group.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-toggle-group) {
+:root,
+.pf-v6-c-toggle-group {
   --pf-v6-c-toggle-group__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group__button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-toggle-group__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);

package/css/components/Toolbar/toolbar.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-toolbar) {
+:root,
+.pf-v6-c-toolbar {
   --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingBlockStart: 0;
   --pf-v6-c-toolbar--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -37,7 +38,8 @@
   --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
-  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
   --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -369,7 +371,7 @@
 
 .pf-v6-c-toolbar__expand-all-icon {
   display: inline-flex;
-  transition: var(--pf-v6-c-toolbar__expand-all-icon--Transition);
+  transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {

package/css/components/Tooltip/tooltip.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tooltip) {
+:root,
+.pf-v6-c-tooltip {
   --pf-v6-c-tooltip--MaxWidth: 18.75rem;
   --pf-v6-c-tooltip--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-tooltip__content--PaddingBlockStart: var(--pf-t--global--spacer--sm);

package/css/components/TreeView/tree-view.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-tree-view) {
+:root,
+.pf-v6-c-tree-view {
   --pf-v6-c-tree-view__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth));
   --pf-v6-c-tree-view__node--nested-indent--base: calc(var(--pf-v6-c-tree-view__node--indent--base) - var(--pf-t--global--spacer--md));
   --pf-v6-c-tree-view__content--BorderRadius: var(--pf-t--global--border--radius--small);

package/css/components/Truncate/truncate.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-truncate) {
+:root,
+.pf-v6-c-truncate {
   --pf-v6-c-truncate--MinWidth: 6ch;
   --pf-v6-c-truncate__start--MinWidth: 6ch;
 }

package/css/components/Wizard/wizard.css

@@ -1,4 +1,5 @@
-:where(:root, .pf-v6-c-wizard) {
+:root,
+.pf-v6-c-wizard {
   --pf-v6-c-wizard--Height: initial;
   --pf-v6-c-wizard--Height--base: 100%;
   --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
@@ -39,7 +40,8 @@
   --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
   --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
   --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
@@ -113,7 +115,8 @@
   --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
 }
 @media screen and (min-width: 62rem) {
-  :where(:root, .pf-v6-c-wizard) {
+  :root,
+  .pf-v6-c-wizard {
     --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
     --pf-v6-c-wizard__nav--BoxShadow: none;
   }
@@ -444,7 +447,7 @@
 
 .pf-v6-c-wizard__nav-link-toggle-icon {
   display: inline-block;
-  transition: var(--pf-v6-c-wizard__nav-link-toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {