@swiftwc/ui 0.0.0-dev.54 → 0.0.0-dev.56

package/generated/css/index.css

@@ -4513,6 +4513,22 @@
       place-self: end;
       grid-column: 1/-1;
     }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row]) {
+      grid-template-columns: 1fr 1fr;
+      grid-template-rows: repeat(2, auto);
+      grid-template-areas: "title trailing" "subtitle _";
+    }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row] > :nth-child(-n+2)) {
+      display: grid;
+    }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row] > :nth-child(1)) {
+      grid-area: title;
+    }
+    :where(table-view[preferred-compact-template="title:trailing"] > [is=table-row] > :nth-child(2)) {
+      grid-area: trailing;
+      place-self: end;
+      grid-column: 1/-1;
+    }
     :where(table-view[preferred-compact-template="*"] > [is=table-row] > :nth-child(n+2)) {
       display: grid;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftwc/ui",
-  "version": "0.0.0-dev.54",
+  "version": "0.0.0-dev.56",
   "description": "Elegant SwiftUI-inspired web components for standalone web apps and web extensions.",
   "publishConfig": {
     "access": "public"

package/scss/components/_table-row.scss

@@ -174,6 +174,37 @@
           }
         }
       }
+      table-view[preferred-compact-template='title:trailing'] > & {
+        :where(&) {
+          grid-template-columns: 1fr 1fr;
+          grid-template-rows: repeat(2, auto);
+          grid-template-areas:
+            'title trailing'
+            'subtitle _';
+          // grid-template-rows: repeat(3, auto); /* 3 rows for first 6 items */
+          // grid-template-areas:
+          //   'a b'
+          //   'c d'
+          //   'e f';
+        }
+        > :nth-child(-n + 2) {
+          :where(&) {
+            display: grid;
+          }
+        }
+        > :nth-child(1) {
+          :where(&) {
+            grid-area: title;
+          }
+        }
+        > :nth-child(2) {
+          :where(&) {
+            grid-area: trailing;
+            place-self: end;
+            grid-column: 1 / -1;
+          }
+        }
+      }
       table-view[preferred-compact-template='*'] > & {
         > :nth-child(n + 2) {
           :where(&) {