@patternfly/react-styles 6.3.0-prerelease.1 → 6.3.0-prerelease.11

package/css/components/Table/table.css

@@ -14,6 +14,8 @@
   --pf-v6-c-table__tbody--cell--PaddingBlockStart: var(--pf-v6-c-table--cell--Padding--base);
   --pf-v6-c-table__tbody--cell--PaddingBlockEnd: var(--pf-v6-c-table--cell--Padding--base);
   --pf-v6-c-table__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-table__tbody--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-table__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table__tr--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-table__tr--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-table--cell--Padding--base: var(--pf-t--global--spacer--md);
@@ -74,6 +76,15 @@
   --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--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-table__expandable-row--Opacity: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
+  --pf-v6-c-table__expandable-row--TranslateY: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
   --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);
@@ -109,6 +120,10 @@
   --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -134,6 +149,13 @@
   --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-table {
+    --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-table {
   width: 100%;
@@ -186,7 +208,7 @@
   --pf-v6-c-table__sticky-column--BackgroundColor: var(--pf-v6-c-table--m-striped__tr--BackgroundColor);
   background: var(--pf-v6-c-table--m-striped__tr--BackgroundColor);
 }
-.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row).pf-m-ghost-row {
+.pf-v6-c-table tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row:where(:nth-child(n+2))).pf-m-ghost-row {
   background-color: var(--pf-v6-c-table__tr--m-ghost-row--BackgroundColor);
   opacity: var(--pf-v6-c-table__tr--m-ghost-row--Opacity);
 }
@@ -330,6 +352,10 @@
 .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
   overflow-wrap: break-word;
 }
+.pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
+  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
+  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
+}
 .pf-v6-c-table .pf-v6-c-table__sort {
   min-width: var(--pf-v6-c-table__sort--MinWidth);
 }
@@ -382,7 +408,7 @@
   background-color: var(--pf-v6-c-table__tbody--m-selected--BackgroundColor);
   outline-offset: var(--pf-v6-c-table__tbody--m-selected--OutlineOffset);
 }
-.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected .pf-v6-c-table__tr.pf-m-expanded:not(.pf-v6-c-table__expandable-row) {
+.pf-v6-c-table tbody:where(.pf-v6-c-table__tbody).pf-m-selected .pf-v6-c-table__tr.pf-m-expanded:not(.pf-v6-c-table__expandable-row:where(:nth-child(n+2))) {
   border: none;
 }
 .pf-v6-c-table.pf-m-drag-over {
@@ -398,6 +424,48 @@
 .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.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)) {
+  display: var(--pf-v6-c-table__expandable-row--Display, revert);
+  visibility: hidden;
+  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
+  transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, background-color;
+  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2))[hidden] {
+  display: var(--pf-v6-c-table__expandable-row--Display, revert);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)).pf-m-expanded {
+  visibility: visible;
+  opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
+  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)).pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+  max-height: 99999px;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)):not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) {
+  --pf-v6-c-table--cell--responsive--label: none;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)):not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th),
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)):not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+  padding: 0;
+  overflow: hidden;
+  transition-delay: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
+  transition-property: padding, max-height, overflow;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__expandable-row:where(:nth-child(n+2)):not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+  max-height: 0;
+}
+.pf-v6-c-table.pf-m-animate-expand > .pf-v6-c-table__tbody > .pf-v6-c-table__control-row.pf-m-no-animate-expand ~ .pf-v6-c-table__expandable-row:where(:nth-child(n+2)) {
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: 0s;
+}
 
 [class*=pf-v6-c-table].pf-m-truncate {
   --pf-v6-c-table--cell--MinWidth: var(--pf-v6-c-table--m-truncate--cell--MinWidth);
@@ -699,42 +767,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   pointer-events: none;
 }
 
-.pf-v6-c-table__expandable-row {
-  position: relative;
-  border-block-end: 0 solid transparent;
-}
-: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;
-}
-
-.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding,
-.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding {
-  padding-block-start: 0;
-  padding-block-end: 0;
-  padding-inline-start: 0;
-  padding-inline-end: 0;
-}
-.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td).pf-m-no-padding .pf-v6-c-table__expandable-row-content,
-.pf-v6-c-table__expandable-row th:where(.pf-v6-c-table__th).pf-m-no-padding .pf-v6-c-table__expandable-row-content {
-  padding: 0;
-}
-.pf-v6-c-table__expandable-row .pf-v6-c-table__expandable-row-content {
-  padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
-  border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
-}
-.pf-v6-c-table__expandable-row.pf-m-expanded {
-  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
-  border-block-end-width: var(--pf-v6-c-table--border-width--base);
-}
-.pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
-  display: none;
-}
-.pf-v6-c-table__expandable-row tr:last-child {
+.pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row.pf-m-expanded) {
   border-block-end: 0;
 }
 
@@ -742,7 +775,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
 }
-.pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row) {
+.pf-v6-c-table.pf-m-compact tr:where(.pf-v6-c-table__tr):not(.pf-v6-c-table__expandable-row:where(:nth-child(n+2))) {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact--cell--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact--cell--PaddingBlockEnd);
 }
@@ -758,6 +791,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
   --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
 }
+.pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
+  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
+  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
+}
 .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
   width: auto;
   min-width: 0;
@@ -782,18 +819,16 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   background-color: var(--pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor);
 }
 
-.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tr.pf-m-expanded {
+.pf-v6-c-table__tr.pf-m-expanded:has(~ .pf-v6-c-table__expandable-row) {
   border-block-end: 0;
 }
-.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody {
-  border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor);
-}
-.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded {
-  border-block-end: var(--pf-v6-c-table__tr--BorderBlockEndWidth) solid var(--pf-v6-c-table__tr--BorderBlockEndColor);
+
+.pf-v6-c-table__tbody.pf-m-expanded, .pf-v6-c-table__tbody:has(> .pf-v6-c-table__expandable-row.pf-m-expanded) {
+  border-block-end: var(--pf-v6-c-table__tbody--BorderBlockEndWidth) solid var(--pf-v6-c-table__tbody--BorderBlockEndColor);
 }
-.pf-v6-c-table.pf-m-expandable .pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
+.pf-v6-c-table__tbody.pf-m-expanded .pf-v6-c-table__control-row {
   background-color: var(--pf-v6-c-table__control-row--BackgroundColor);
-  border-block-end: var(--pf-v6-c-table__control-row--BorderBlockEndWidth) solid var(--pf-v6-c-table__control-row__tbody--BorderBlockEndColor);
+  border-block-end: 0;
 }
 
 .pf-v6-c-table__tr {
@@ -806,6 +841,52 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
 }
 
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) {
+  position: relative;
+  border-block-end: 0 solid transparent;
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) > .pf-v6-c-table__th,
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) > .pf-v6-c-table__td {
+  padding-block-start: 0;
+}
+.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row:where(:nth-child(n+2)) > .pf-v6-c-table__th,
+.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row:where(:nth-child(n+2)) > .pf-v6-c-table__td {
+  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) .pf-v6-c-table__td.pf-m-no-padding,
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) .pf-v6-c-table__th.pf-m-no-padding {
+  padding-block-start: 0;
+  padding-block-end: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) .pf-v6-c-table__th.pf-m-no-padding .pf-v6-c-table__expandable-row-content {
+  padding: 0;
+  border-radius: 0;
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) .pf-v6-c-table__expandable-row-content {
+  padding-block-start: var(--pf-v6-c-table__expandable-row-content--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-table__expandable-row-content--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-table__expandable-row-content--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-table__expandable-row-content--PaddingInlineEnd);
+  background-color: var(--pf-v6-c-table__expandable-row-content--BackgroundColor);
+  border-radius: var(--pf-v6-c-table__expandable-row-content--BorderRadius);
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) .pf-v6-c-table__expandable-row-content.pf-m-no-background {
+  background-color: transparent;
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)).pf-m-expanded {
+  border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
+  border-block-end-width: var(--pf-v6-c-table--border-width--base);
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)):not(.pf-m-expanded) {
+  display: none;
+}
+.pf-v6-c-table__expandable-row:where(:nth-child(n+2)) tr:last-child {
+  border-block-end: 0;
+}
+
 .pf-v6-c-table__icon-inline {
   display: flex;
   align-items: center;

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

@@ -27,12 +27,15 @@ declare const _default: {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
+    "action": "pf-m-action",
     "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",
+    "animateExpand": "pf-m-animate-expand",
+    "noAnimateExpand": "pf-m-no-animate-expand",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
@@ -40,9 +43,10 @@ declare const _default: {
     "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
-    "noPadding": "pf-m-no-padding",
     "compact": "pf-m-compact",
     "borderRow": "pf-m-border-row",
+    "noPadding": "pf-m-no-padding",
+    "noBackground": "pf-m-no-background",
     "width_10": "pf-m-width-10",
     "width_15": "pf-m-width-15",
     "width_20": "pf-m-width-20",

package/css/components/Table/table.js

@@ -29,12 +29,15 @@ exports.default = {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
+    "action": "pf-m-action",
     "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",
+    "animateExpand": "pf-m-animate-expand",
+    "noAnimateExpand": "pf-m-no-animate-expand",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
@@ -42,9 +45,10 @@ exports.default = {
     "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
-    "noPadding": "pf-m-no-padding",
     "compact": "pf-m-compact",
     "borderRow": "pf-m-border-row",
+    "noPadding": "pf-m-no-padding",
+    "noBackground": "pf-m-no-background",
     "width_10": "pf-m-width-10",
     "width_15": "pf-m-width-15",
     "width_20": "pf-m-width-20",

package/css/components/Table/table.mjs

@@ -27,12 +27,15 @@ export default {
     "favorite": "pf-m-favorite",
     "borderRight": "pf-m-border-right",
     "borderLeft": "pf-m-border-left",
+    "action": "pf-m-action",
     "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",
+    "animateExpand": "pf-m-animate-expand",
+    "noAnimateExpand": "pf-m-no-animate-expand",
     "truncate": "pf-m-truncate",
     "wrap": "pf-m-wrap",
     "nowrap": "pf-m-nowrap",
@@ -40,9 +43,10 @@ export default {
     "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
-    "noPadding": "pf-m-no-padding",
     "compact": "pf-m-compact",
     "borderRow": "pf-m-border-row",
+    "noPadding": "pf-m-no-padding",
+    "noBackground": "pf-m-no-background",
     "width_10": "pf-m-width-10",
     "width_15": "pf-m-width-15",
     "width_20": "pf-m-width-20",

package/css/components/Tabs/tabs.css

@@ -96,25 +96,28 @@
   --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-tabs--link-accent--start: 0;
-  --pf-v6-c-tabs--link-accent--length: auto;
+  --pf-v6-c-tabs--link-accent--length: 0;
   --pf-v6-c-tabs--link-accent--color: var(--pf-v6-c-tabs__item--m-current__link--after--BorderColor);
   --pf-v6-c-tabs--link-accent--border-size: var(--pf-v6-c-tabs__item--m-current__link--after--BorderWidth);
+  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
+  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: auto;
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: 0;
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: initial;
+  --pf-v6-c-tabs--link-accent--InsetInlineStart: 0;
   --pf-v6-c-tabs--link-accent--Width: initial;
   --pf-v6-c-tabs--link-accent--Height: 0;
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--link-accent--border-size);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: initial;
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--link-accent--TranslateY: 0;
+  --pf-v6-c-tabs--link-accent--TransformOrigin: 0 center;
+  --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd: auto;
-  --pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Width: 0;
-  --pf-v6-c-tabs--m-vertical--link-accent--Height: initial;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth: 0;
   --pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--link-accent--border-size);
-  --pf-v6-c-tabs--link-accent--TransitionDuration: var(--pf-t--global--motion--duration--md);
-  --pf-v6-c-tabs--link-accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateX: 0;
+  --pf-v6-c-tabs--m-vertical--link-accent--TranslateY: var(--pf-v6-c-tabs--link-accent--start);
+  --pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin: center 0;
   --pf-v6-c-tabs__scroll-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tabs__scroll-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
@@ -274,11 +277,13 @@
   --pf-v6-c-tabs__list--ScrollSnapTypeAxis: var(--pf-v6-c-tabs--m-vertical__list--ScrollSnapTypeAxis);
   --pf-v6-c-tabs--link-accent--InsetBlockStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockStart);
   --pf-v6-c-tabs--link-accent--InsetBlockEnd: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetBlockEnd);
-  --pf-v6-c-tabs--link-accent--InsetInlineStart: var(--pf-v6-c-tabs--m-vertical--link-accent--InsetInlineStart);
   --pf-v6-c-tabs--link-accent--Width: var(--pf-v6-c-tabs--m-vertical--link-accent--Width);
   --pf-v6-c-tabs--link-accent--Height: var(--pf-v6-c-tabs--m-vertical--link-accent--Height);
   --pf-v6-c-tabs--link-accent--BorderBlockEndWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderBlockEndWidth);
   --pf-v6-c-tabs--link-accent--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-vertical--link-accent--BorderInlineStartWidth);
+  --pf-v6-c-tabs--link-accent--TranslateX: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateX);
+  --pf-v6-c-tabs--link-accent--TranslateY: var(--pf-v6-c-tabs--m-vertical--link-accent--TranslateY);
+  --pf-v6-c-tabs--link-accent--TransformOrigin: var(--pf-v6-c-tabs--m-vertical--link-accent--TransformOrigin);
   display: inline-flex;
   flex-direction: column;
   height: 100%;
@@ -855,15 +860,15 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__link::after,
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__link::after,
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__item.pf-m-action::after {
     content: revert;
   }
-  .pf-v6-c-tabs:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+  .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
     position: absolute;
-    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-block-start: var(--pf-v6-c-tabs--link-accent--InsetBlockStart);
     inset-block-end: var(--pf-v6-c-tabs--link-accent--InsetBlockEnd);
-    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart, var(--pf-v6-c-tabs--link-accent--start));
+    inset-inline-start: var(--pf-v6-c-tabs--link-accent--InsetInlineStart);
     width: var(--pf-v6-c-tabs--link-accent--Width, var(--pf-v6-c-tabs--link-accent--length));
     height: var(--pf-v6-c-tabs--link-accent--Height, var(--pf-v6-c-tabs--link-accent--length));
     content: "";
@@ -872,7 +877,12 @@
     border-inline-start-width: var(--pf-v6-c-tabs--link-accent--BorderInlineStartWidth);
     transition-timing-function: var(--pf-v6-c-tabs--link-accent--TransitionTimingFunction);
     transition-duration: var(--pf-v6-c-tabs--link-accent--TransitionDuration);
-    transition-property: --pf-v6-c-tabs--link-accent--length, --pf-v6-c-tabs--link-accent--start, width;
+    transition-property: width, height, translate;
+    transform-origin: var(--pf-v6-c-tabs--link-accent--TransformOrigin);
+    translate: var(--pf-v6-c-tabs--link-accent--TranslateX) var(--pf-v6-c-tabs--link-accent--TranslateY);
+  }
+  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs.pf-m-animate-current:not(.pf-m-box) .pf-v6-c-tabs__list::after {
+    translate: calc(var(--pf-v6-c-tabs--link-accent--TranslateX) * var(--pf-v6-global--inverse--multiplier)) var(--pf-v6-c-tabs--link-accent--TranslateY);
   }
   .pf-v6-c-tabs.pf-m-initializing-accent {
     --pf-v6-c-tabs--link-accent--TransitionDuration: 0;

package/css/components/Tabs/tabs.d.ts

@@ -65,6 +65,7 @@ declare const _default: {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/Tabs/tabs.js

@@ -67,6 +67,7 @@ exports.default = {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

package/css/components/Tabs/tabs.mjs

@@ -65,6 +65,7 @@ export default {
     "insetLgOn_2xl": "pf-m-inset-lg-on-2xl",
     "insetXlOn_2xl": "pf-m-inset-xl-on-2xl",
     "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
+    "animateCurrent": "pf-m-animate-current",
     "initializingAccent": "pf-m-initializing-accent"
   },
   "tabs": "pf-v6-c-tabs",

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

@@ -103,6 +103,22 @@
   --pf-v6-c-text-input-group--m-hover--BorderColor: var(--pf-v6-c-text-input-group--m-hover--m-error--BorderColor);
   --pf-v6-c-text-input-group__icon--m-status--Color: var(--pf-v6-c-text-input-group__main--m-error__icon--m-status--Color);
 }
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-text-input-group.pf-m-error {
+    translate: var(--pf-v6-global--danger-jiggle--TranslateX, 0);
+    animation-name: pf-v6-global-danger-jiggle-motion;
+    animation-duration: var(--pf-v6-global--danger-jiggle--AnimationDuration--Transform);
+    animation-timing-function: var(--pf-v6-global--danger-jiggle--AnimationTimingFunction--Transform);
+    animation-fill-mode: both;
+  }
+}
+.pf-v6-c-text-input-group.pf-m-error .pf-v6-c-text-input-group__icon.pf-m-status {
+  --pf-v6-c-text-input-group--TransitionDuration--Opacity: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-text-input-group--TransitionTimingFunction--Opacity: var(--pf-t--global--motion--timing-function--default);
+  animation-name: pf-v6-global-fade-in;
+  animation-duration: var(--pf-v6-c-text-input-group--TransitionDuration--Opacity);
+  animation-timing-function: var(--pf-v6-c-text-input-group--TransitionTimingFunction--Opacity);
+}
 .pf-v6-c-text-input-group:hover {
   --pf-v6-c-text-input-group--BorderColor: var(--pf-v6-c-text-input-group--m-hover--BorderColor);
 }

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

@@ -7,8 +7,8 @@ declare const _default: {
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
-    "icon": "pf-m-icon",
     "status": "pf-m-status",
+    "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",

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

@@ -9,8 +9,8 @@ exports.default = {
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
-    "icon": "pf-m-icon",
     "status": "pf-m-status",
+    "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",

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

@@ -7,8 +7,8 @@ export default {
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
-    "icon": "pf-m-icon",
     "status": "pf-m-status",
+    "icon": "pf-m-icon",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",

package/css/components/Timestamp/timestamp.css

@@ -28,4 +28,8 @@
   --pf-v6-c-timestamp--Color: var(--pf-v6-c-timestamp--m-help-text--hover--Color);
   --pf-v6-c-timestamp--m-help-text--TextDecorationLine: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationLine);
   --pf-v6-c-timestamp--m-help-text--TextDecorationStyle: var(--pf-v6-c-timestamp--m-help-text--hover--TextDecorationStyle);
+}
+
+.pf-v6-c-timestamp__text {
+  text-decoration: inherit;
 }

package/css/components/Timestamp/timestamp.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-v6-c-timestamp"
+  "timestamp": "pf-v6-c-timestamp",
+  "timestampText": "pf-v6-c-timestamp__text"
 };
 export default _default;

package/css/components/Timestamp/timestamp.js

@@ -5,5 +5,6 @@ exports.default = {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-v6-c-timestamp"
+  "timestamp": "pf-v6-c-timestamp",
+  "timestampText": "pf-v6-c-timestamp__text"
 };

package/css/components/Timestamp/timestamp.mjs

@@ -3,5 +3,6 @@ export default {
   "modifiers": {
     "helpText": "pf-m-help-text"
   },
-  "timestamp": "pf-v6-c-timestamp"
+  "timestamp": "pf-v6-c-timestamp",
+  "timestampText": "pf-v6-c-timestamp__text"
 };

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

@@ -14,6 +14,17 @@
   --pf-v6-c-tree-view__node-container--Display: contents;
   --pf-v6-c-tree-view__node-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tree-view__node-content--Overflow: visible;
+  --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-tree-view__list--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-tree-view__list--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-tree-view__list--TransitionDuration--slide: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--slide);
+  --pf-v6-c-tree-view__list--TransitionDuration--fade: var(--pf-v6-c-tree-view__list--TransitionDuration--collapse--fade);
+  --pf-v6-c-tree-view__list--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-tree-view__list--Opacity: 0;
+  --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
+  --pf-v6-c-tree-view__list--TranslateY: 0;
+  --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
   --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
   --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
   --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -29,6 +40,8 @@
   --pf-v6-c-tree-view__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-tree-view__node-toggle--MarginBlockStart: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
   --pf-v6-c-tree-view__node-toggle--MarginBlockEnd: calc(var(--pf-v6-c-tree-view__node-toggle--PaddingBlockStart) * -1);
+  --pf-v6-c-tree-view__node-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-tree-view__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tree-view__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-tree-view__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -104,6 +117,13 @@
   --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
   --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-tree-view {
+    --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-tree-view__list--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
   position: relative;
@@ -219,12 +239,23 @@
   display: inline-block;
   min-width: var(--pf-v6-c-tree-view__node-toggle-icon--MinWidth);
   text-align: center;
+  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
+  max-height: 0;
+  visibility: hidden;
+  opacity: var(--pf-v6-c-tree-view__list--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--fade);
+  transition-timing-function: var(--pf-v6-c-tree-view__list--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
+  translate: 0 var(--pf-v6-c-tree-view__list--TranslateY);
+}
 .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item {
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
   --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--Color--base);
@@ -233,6 +264,14 @@
   --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle--Color);
   --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate);
 }
+.pf-v6-c-tree-view__list-item.pf-m-expanded > .pf-v6-c-tree-view__list {
+  max-height: 99999px;
+  visibility: revert;
+  opacity: var(--pf-v6-c-tree-view--m-expanded__list--Opacity);
+  transition-delay: 0s;
+  transition-duration: var(--pf-v6-c-tree-view__list--TransitionDuration--expand--fade), var(--pf-v6-c-tree-view__list--TransitionDuration--expand--slide), 0s, 0s;
+  translate: 0 var(--pf-v6-c-tree-view--m-expanded__list--TranslateY);
+}
 
 .pf-v6-c-tree-view__node,
 .pf-v6-c-tree-view__node-container {