kaas

src/components/tabs.module.css

@@ -1,6 +1,10 @@
 .root {
     display: grid;
-    grid-template-rows: auto 1fr;
+    grid: auto minmax(0, 1fr) / repeat(var(--tab-count), auto);
+    justify-content: start;
+
+    inline-size: 100%;
+    block-size: 100%;
 
     .tab {
         display: contents;
@@ -8,13 +12,37 @@
         & > summary {
             grid-row: 1 / 1;
 
+            padding: var(--padding-s) var(--padding-m);
+
             &::marker {
                 content: none;
             }
         }
 
         &::details-content {
-            grid-area: 2 / 1;
+            grid-area: 2 / 1 / span 1 / span var(--tab-count);
+            display: none;
+            grid: 100% / 100%;
+            inline-size: 100%;
+            block-size: 100%;
+
+            overflow: auto;
+        }
+
+        &[open] {
+            & > summary {
+                background-color: var(--surface-2);
+            }
+
+            &::details-content {
+                display: grid;
+            }
         }
     }
+}
+
+@property --tab-count {
+    syntax: '<integer>';
+    inherits: true;
+    initial-value: 0;
 }