@patternfly/react-styles 6.3.0-prerelease.10 → 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);
@@ -206,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);
 }
@@ -406,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 {
@@ -422,8 +424,8 @@
 .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 {
-  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)) {
+  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);
@@ -432,30 +434,33 @@
   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[hidden] {
-  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))[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.pf-m-expanded {
+.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.pf-m-expanded > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+.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: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:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+.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:not(.pf-m-expanded) > :is(.pf-v6-c-table__td, .pf-v6-c-table__th) > .pf-v6-c-table__expandable-row-content {
+.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 {
+.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;
@@ -762,53 +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;
-}
-.pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-.pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
-  padding-block-start: 0;
-}
-.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
-.pf-v6-c-table__control-row ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
-  padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
-}
-.pf-v6-c-table__expandable-row .pf-v6-c-table__td.pf-m-no-padding,
-.pf-v6-c-table__expandable-row .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 .pf-v6-c-table__td.pf-m-no-padding .pf-v6-c-table__expandable-row-content,
-.pf-v6-c-table__expandable-row .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 .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-v6-c-table__expandable-row-content.pf-m-no-background {
-  background-color: transparent;
-}
-.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 {
-  border-block-end: 0;
-}
-
-.pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row) {
+.pf-v6-c-table__tr:has(~ .pf-v6-c-table__expandable-row.pf-m-expanded) {
   border-block-end: 0;
 }
 
@@ -816,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);
 }
@@ -860,16 +819,14 @@ 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: 0;
 }
@@ -884,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

@@ -43,10 +43,10 @@ declare const _default: {
     "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
-    "noPadding": "pf-m-no-padding",
-    "noBackground": "pf-m-no-background",
     "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

@@ -45,10 +45,10 @@ exports.default = {
     "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
-    "noPadding": "pf-m-no-padding",
-    "noBackground": "pf-m-no-background",
     "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

@@ -43,10 +43,10 @@ export default {
     "breakWord": "pf-m-break-word",
     "standalone": "pf-m-standalone",
     "favorited": "pf-m-favorited",
-    "noPadding": "pf-m-no-padding",
-    "noBackground": "pf-m-no-background",
     "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",