@sigx/zero-daisyui 0.2.0-beta.6 → 0.3.0-beta.1

package/dist/css/components/table.css

@@ -1,5 +1,6 @@
 @layer zero.recipes {
     [data-scope="table"][data-part="root"] {
+        --table-cell-align: start;
         --table-accent: var(--color-base-content);
         --table-pad-block: var(--space-sm);
         --table-pad-inline: var(--space-md);
@@ -43,7 +44,7 @@
 
     [data-scope="table"][data-part="header-cell"] {
         padding: var(--table-pad-block) var(--table-pad-inline);
-        text-align: start;
+        text-align: var(--table-cell-align);
         font-weight: var(--weight-semibold);
         font-size: var(--text-xs);
         color: color-mix(in oklab, var(--table-accent) 60%, transparent);
@@ -51,7 +52,13 @@
 
     [data-scope="table"][data-part="cell"] {
         padding: var(--table-pad-block) var(--table-pad-inline);
-        text-align: start;
+        text-align: var(--table-cell-align);
+    }
+
+    [data-scope="table"][data-part="cell-label"] {
+        font-weight: var(--weight-semibold);
+        font-size: var(--text-xs);
+        color: color-mix(in oklab, var(--table-accent) 60%, transparent);
     }
 
     [data-scope="table"][data-part="root"][data-color="primary"] {
@@ -121,4 +128,271 @@
             background: var(--color-base-200);
         }
     }
+
+    @media (width < 64rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] {
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="caption"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="body"] {
+            row-gap: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="foot"] {
+            row-gap: var(--space-md);
+            margin-block-start: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"]) > [data-scope="table"][data-part="row"] {
+            border: var(--border) solid var(--color-base-200);
+            border-radius: var(--radius-box);
+            background: var(--color-base-100);
+            padding: var(--table-pad-block) var(--table-pad-inline);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="header-cell"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="cell"] {
+            padding-inline: 0;
+            padding-block: var(--space-xs);
+        }
+    }
+
+    @media (width < 48rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="md"] {
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="caption"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="body"] {
+            row-gap: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="foot"] {
+            row-gap: var(--space-md);
+            margin-block-start: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"]) > [data-scope="table"][data-part="row"] {
+            border: var(--border) solid var(--color-base-200);
+            border-radius: var(--radius-box);
+            background: var(--color-base-100);
+            padding: var(--table-pad-block) var(--table-pad-inline);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="header-cell"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="cell"] {
+            padding-inline: 0;
+            padding-block: var(--space-xs);
+        }
+    }
+
+    @media (width < 40rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] {
+            border: 0;
+            border-radius: 0;
+            background: transparent;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="caption"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="body"] {
+            row-gap: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"]) > [data-scope="table"][data-part="foot"] {
+            row-gap: var(--space-md);
+            margin-block-start: var(--space-md);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"]) > [data-scope="table"][data-part="row"] {
+            border: var(--border) solid var(--color-base-200);
+            border-radius: var(--radius-box);
+            background: var(--color-base-100);
+            padding: var(--table-pad-block) var(--table-pad-inline);
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="header-cell"] {
+            padding-inline: 0;
+        }
+
+        :where([data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"]) > [data-scope="table"][data-part="cell"] {
+            padding-inline: 0;
+            padding-block: var(--space-xs);
+        }
+    }
+}
+
+@layer zero.structure {
+    [data-scope="table"][data-part="cell-label"] {
+        display: none;
+    }
+    @media (width < 40rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"],
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="caption"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] {
+            display: none;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] > [data-scope="table"][data-part="column"] {
+            width: auto;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="head"] {
+            position: absolute;
+            inline-size: 1px;
+            block-size: 1px;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="body"],
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="foot"] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="header-cell"],
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] {
+            display: flow-root;
+            text-align: start;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"]:has(> [data-scope="table"][data-part="cell-label"]) {
+            padding-inline-start: calc(var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem)));
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="sm"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] > [data-scope="table"][data-part="cell-label"] {
+            display: block;
+            float: inline-start;
+            box-sizing: border-box;
+            inline-size: var(--table-stack-label-size, 8rem);
+            margin-inline-start: calc(-1 * (var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem))));
+            margin-inline-end: var(--table-stack-label-gap, var(--space-md, 0.5rem));
+        }
+    }
+    @media (width < 48rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"],
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="caption"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] {
+            display: none;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] > [data-scope="table"][data-part="column"] {
+            width: auto;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="head"] {
+            position: absolute;
+            inline-size: 1px;
+            block-size: 1px;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="body"],
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="foot"] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="header-cell"],
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] {
+            display: flow-root;
+            text-align: start;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"]:has(> [data-scope="table"][data-part="cell-label"]) {
+            padding-inline-start: calc(var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem)));
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="md"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] > [data-scope="table"][data-part="cell-label"] {
+            display: block;
+            float: inline-start;
+            box-sizing: border-box;
+            inline-size: var(--table-stack-label-size, 8rem);
+            margin-inline-start: calc(-1 * (var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem))));
+            margin-inline-end: var(--table-stack-label-gap, var(--space-md, 0.5rem));
+        }
+    }
+    @media (width < 64rem) {
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"],
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="caption"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] {
+            display: none;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="colgroup"] > [data-scope="table"][data-part="column"] {
+            width: auto;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="head"] {
+            position: absolute;
+            inline-size: 1px;
+            block-size: 1px;
+            width: 1px;
+            height: 1px;
+            margin: -1px;
+            padding: 0;
+            border: 0;
+            overflow: hidden;
+            clip: rect(0 0 0 0);
+            clip-path: inset(50%);
+            white-space: nowrap;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="body"],
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"][data-part="foot"] {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] {
+            display: block;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="header-cell"],
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] {
+            display: flow-root;
+            text-align: start;
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"]:has(> [data-scope="table"][data-part="cell-label"]) {
+            padding-inline-start: calc(var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem)));
+        }
+        [data-scope="table"][data-part="root"][data-l-stack="lg"] > [data-scope="table"][data-part="table"] > [data-scope="table"] > [data-scope="table"][data-part="row"] > [data-scope="table"][data-part="cell"] > [data-scope="table"][data-part="cell-label"] {
+            display: block;
+            float: inline-start;
+            box-sizing: border-box;
+            inline-size: var(--table-stack-label-size, 8rem);
+            margin-inline-start: calc(-1 * (var(--table-stack-label-size, 8rem) + var(--table-stack-label-gap, var(--space-md, 0.5rem))));
+            margin-inline-end: var(--table-stack-label-gap, var(--space-md, 0.5rem));
+        }
+    }
 }

package/dist/css/components/timeline.css

@@ -1,6 +1,7 @@
 @layer zero.recipes {
     [data-scope="timeline"][data-part="root"] {
         --timeline-accent: var(--color-base-content);
+        --timeline-ring: var(--timeline-accent);
         --timeline-marker-size: calc(var(--size-selector) * 3);
     }
 
@@ -32,13 +33,21 @@
         flex: 1 1 0%;
     }
 
+    [data-scope="timeline"][data-part="root"]:not(:has(> [data-scope="timeline"][data-part="item"] > [data-scope="timeline"][data-part="content"][data-placement="start"])) > [data-scope="timeline"][data-part="item"][data-orientation="vertical"] {
+        grid-template-columns: 0 auto 1fr;
+    }
+
+    [data-scope="timeline"][data-part="root"]:not(:has(> [data-scope="timeline"][data-part="item"] > [data-scope="timeline"][data-part="content"][data-placement="start"])) > [data-scope="timeline"][data-part="item"][data-orientation="horizontal"] {
+        grid-template-rows: 0 auto 1fr;
+    }
+
     [data-scope="timeline"][data-part="marker"] {
         inline-size: var(--timeline-marker-size);
         block-size: var(--timeline-marker-size);
         box-sizing: border-box;
         border-radius: 9999px;
         background: var(--timeline-accent);
-        border: calc(var(--timeline-marker-size) / 2) solid var(--timeline-accent);
+        border: calc(var(--timeline-marker-size) / 6) solid var(--timeline-ring);
         display: flex;
         align-items: center;
         justify-content: center;
@@ -114,51 +123,99 @@
         align-self: start;
     }
 
+    [data-scope="timeline"][data-part="marker"][data-color="primary"] {
+        --timeline-accent: var(--color-primary);
+        --timeline-ring: var(--color-primary-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="secondary"] {
+        --timeline-accent: var(--color-secondary);
+        --timeline-ring: var(--color-secondary-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="accent"] {
+        --timeline-accent: var(--color-accent);
+        --timeline-ring: var(--color-accent-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="neutral"] {
+        --timeline-accent: var(--color-neutral);
+        --timeline-ring: var(--color-neutral-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="info"] {
+        --timeline-accent: var(--color-info);
+        --timeline-ring: var(--color-info-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="success"] {
+        --timeline-accent: var(--color-success);
+        --timeline-ring: var(--color-success-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="warning"] {
+        --timeline-accent: var(--color-warning);
+        --timeline-ring: var(--color-warning-content);
+    }
+
+    [data-scope="timeline"][data-part="marker"][data-color="error"] {
+        --timeline-accent: var(--color-error);
+        --timeline-ring: var(--color-error-content);
+    }
+
     @scope ([data-scope="timeline"][data-part="root"][data-color="primary"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-primary);
+            --timeline-ring: var(--color-primary-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="secondary"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-secondary);
+            --timeline-ring: var(--color-secondary-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="accent"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-accent);
+            --timeline-ring: var(--color-accent-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="neutral"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-neutral);
+            --timeline-ring: var(--color-neutral-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="info"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-info);
+            --timeline-ring: var(--color-info-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="success"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-success);
+            --timeline-ring: var(--color-success-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="warning"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-warning);
+            --timeline-ring: var(--color-warning-content);
         }
     }
 
     @scope ([data-scope="timeline"][data-part="root"][data-color="error"]) to ([data-scope="timeline"][data-part="root"]) {
         [data-scope="timeline"][data-part="marker"] {
             --timeline-accent: var(--color-error);
+            --timeline-ring: var(--color-error-content);
         }
     }
 
@@ -201,4 +258,10 @@
             font-size: var(--text-md);
         }
     }
+
+    @media (forced-colors: active) {
+        [data-scope="timeline"][data-part="marker"] {
+            border-width: calc(var(--timeline-marker-size) / 2);
+        }
+    }
 }

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

@@ -29,7 +29,7 @@
     [data-scope="tree-view"][data-part="item"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-sm) var(--space-md);
         font-size: var(--tree-text);
         font-weight: var(--weight-medium);
@@ -75,7 +75,7 @@
     [data-scope="tree-view"][data-part="branch-trigger"] {
         display: flex;
         align-items: center;
-        gap: 0.625rem;
+        gap: var(--space-md);
         padding: var(--space-sm) var(--space-md);
         font-size: var(--tree-text);
         font-weight: var(--weight-medium);