@sigx/zero-daisyui 0.7.0 → 0.8.0

package/dist/css/index.css

@@ -2039,6 +2039,179 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="hover-card"][data-part="trigger"] {
+        color: inherit;
+        text-decoration-line: underline;
+        text-underline-offset: 2px;
+        cursor: pointer;
+        border-radius: var(--radius-selector);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"]:hover:not([data-disabled]) {
+        text-decoration-thickness: 2px;
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-state="open"] {
+        text-decoration-thickness: 2px;
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="hover-card"][data-part="popup"] {
+        opacity: 0;
+        transform: translateY(-4px);
+        transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), display var(--duration-fast) allow-discrete, overlay var(--duration-fast) allow-discrete;
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-box);
+        box-shadow: var(--shadow-lg);
+        padding: var(--space-xl);
+        max-width: 20rem;
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-state="open"] {
+        opacity: 1;
+        transform: none;
+    }
+
+    [data-scope="hover-card"][data-part="popup"]:has(> [data-scope="hover-card"][data-part="arrow"]) {
+        overflow: visible;
+    }
+
+    [data-scope="hover-card"][data-part="arrow"] {
+        display: none;
+        position: absolute;
+        box-sizing: border-box;
+        width: 0.625rem;
+        height: 0.625rem;
+        rotate: 45deg;
+        pointer-events: none;
+        background: var(--color-base-100);
+        border: var(--border) solid var(--color-base-300);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="top"] > [data-scope="hover-card"][data-part="arrow"] {
+        display: block;
+        top: calc(100% - 0.625rem / 2);
+        left: var(--arrow-x, calc(50% - 0.625rem / 2));
+        clip-path: polygon(100% 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="bottom"] > [data-scope="hover-card"][data-part="arrow"] {
+        display: block;
+        top: calc(0.625rem / -2);
+        left: var(--arrow-x, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 0 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="left"] > [data-scope="hover-card"][data-part="arrow"] {
+        display: block;
+        left: calc(100% - 0.625rem / 2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="right"] > [data-scope="hover-card"][data-part="arrow"] {
+        display: block;
+        left: calc(0.625rem / -2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="start"] > [data-scope="hover-card"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(100% - 0.625rem / 2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="end"] > [data-scope="hover-card"][data-part="arrow"] {
+        display: block;
+        inset-inline-start: calc(0.625rem / -2);
+        top: var(--arrow-y, calc(50% - 0.625rem / 2));
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="start"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="hover-card"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 100%, 0 100%);
+    }
+
+    [data-scope="hover-card"][data-part="popup"][data-placement^="end"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > [data-scope="hover-card"][data-part="arrow"] {
+        clip-path: polygon(0 0, 100% 0, 100% 100%);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="primary"] {
+        color: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="secondary"] {
+        color: color-mix(in oklab, var(--color-secondary) 70%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="accent"] {
+        color: color-mix(in oklab, var(--color-accent) 55%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="neutral"] {
+        color: color-mix(in oklab, var(--color-neutral) 40%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="info"] {
+        color: color-mix(in oklab, var(--color-info) 70%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="success"] {
+        color: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="warning"] {
+        color: color-mix(in oklab, var(--color-warning) 45%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-color="error"] {
+        color: color-mix(in oklab, var(--color-error) 85%, var(--color-base-content));
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="xs"] {
+        font-size: var(--text-xs);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="sm"] {
+        font-size: var(--text-sm);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="lg"] {
+        font-size: var(--text-lg);
+    }
+
+    [data-scope="hover-card"][data-part="trigger"][data-size="xl"] {
+        font-size: var(--text-xl);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        [data-scope="hover-card"][data-part="popup"] {
+            transition: none;
+        }
+
+        [data-scope="hover-card"][data-part="popup"][data-state="open"] {
+            transform: none;
+        }
+    }
+
+    @starting-style {
+        [data-scope="hover-card"][data-part="popup"][data-state="open"] {
+            opacity: 0;
+            transform: translateY(-4px);
+        }
+    }
+}
+
 @layer zero.recipes {
     [data-scope="menu"][data-part="trigger"] {
         appearance: none;
@@ -2237,6 +2410,13 @@
         opacity: 0.6;
     }
 
+    [data-scope="menu"][data-part="shortcut"] {
+        margin-inline-start: auto;
+        padding-inline-start: var(--space-lg);
+        font-size: var(--text-xs);
+        opacity: 0.75;
+    }
+
     [data-scope="menu"][data-part="separator"] {
         height: var(--border);
         margin: var(--space-sm) var(--space-md);
@@ -2488,6 +2668,80 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="menubar"][data-part="root"] {
+        --menubar-surface: var(--color-base-200);
+    }
+
+    [data-scope="menubar"][data-part="root"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        padding: var(--space-xs);
+        width: max-content;
+        max-width: 100%;
+        flex-wrap: wrap;
+        background: var(--menubar-surface);
+        border-radius: var(--radius-box);
+    }
+
+    [data-scope="menubar"][data-part="root"][data-orientation="vertical"] {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="primary"] {
+        --menubar-surface: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="secondary"] {
+        --menubar-surface: color-mix(in oklch, var(--color-secondary) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="accent"] {
+        --menubar-surface: color-mix(in oklch, var(--color-accent) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="neutral"] {
+        --menubar-surface: color-mix(in oklch, var(--color-neutral) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="info"] {
+        --menubar-surface: color-mix(in oklch, var(--color-info) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="success"] {
+        --menubar-surface: color-mix(in oklch, var(--color-success) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="warning"] {
+        --menubar-surface: color-mix(in oklch, var(--color-warning) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-color="error"] {
+        --menubar-surface: color-mix(in oklch, var(--color-error) 12%, var(--color-base-200));
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="xs"] {
+        gap: 0;
+        padding: 0;
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="sm"] {
+        padding: var(--space-2xs);
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="lg"] {
+        gap: var(--space-sm);
+        padding: var(--space-sm);
+    }
+
+    [data-scope="menubar"][data-part="root"][data-size="xl"] {
+        gap: var(--space-md);
+        padding: var(--space-sm);
+    }
+}
+
 @layer zero.recipes {
     [data-scope="field"][data-part="root"] {
         --field-accent: var(--color-base-content);
@@ -4498,6 +4752,7 @@
         --toast-bg: var(--color-base-200);
         --toast-ink: var(--color-base-content);
         --toast-from: 8px;
+        --toast-mark: 1rem;
     }
 
     [data-scope="toast"][data-part="viewport"] {
@@ -4580,17 +4835,54 @@
         --toast-from: -8px;
     }
 
+    [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) {
+        grid-template-columns: auto 1fr auto auto;
+    }
+
+    [data-scope="toast"][data-part="indicator"] {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+        inline-size: var(--toast-mark);
+        block-size: var(--toast-mark);
+        box-sizing: border-box;
+    }
+
+    [data-scope="toast"][data-part="indicator"][data-state="loading"] {
+        border-radius: 50%;
+        border: calc(var(--border) * 2) solid color-mix(in oklab, var(--toast-ink) 25%, transparent);
+        border-block-start-color: var(--toast-ink);
+        animation: zero-daisyui-toast-spin 0.75s linear infinite;
+    }
+
+    [data-scope="toast"][data-part="indicator"][data-state="complete"] {
+        background: color-mix(in oklab, var(--color-success) 55%, var(--color-base-content));
+        clip-path: polygon(15.1% 41.3%, 1% 55%, 37.6% 92.8%, 99% 19.8%, 83.9% 7.2%, 36.6% 63.5%);
+    }
+
+    [data-scope="toast"][data-part="indicator"][data-state="error"] {
+        background: color-mix(in oklab, var(--color-error) 55%, var(--color-base-content));
+        clip-path: polygon(20% 8%, 50% 38%, 80% 8%, 92% 20%, 62% 50%, 92% 80%, 80% 92%, 50% 62%, 20% 92%, 8% 80%, 38% 50%, 8% 20%);
+    }
+
     [data-scope="toast"][data-part="title"] {
         grid-column: 1;
         font-weight: var(--weight-semibold);
     }
 
+    [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="title"] {
+        grid-column: 2;
+    }
+
     [data-scope="toast"][data-part="description"] {
         grid-column: 1;
         font-size: var(--text-xs);
         color: color-mix(in oklab, var(--toast-ink) 75%, transparent);
     }
 
+    [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="description"] {
+        grid-column: 2;
+    }
+
     [data-scope="toast"][data-part="action"] {
         grid-column: 2;
         grid-row: 1;
@@ -4619,6 +4911,10 @@
         outline-offset: 2px;
     }
 
+    [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="action"] {
+        grid-column: 3;
+    }
+
     [data-scope="toast"][data-part="close"] {
         grid-column: 3;
         grid-row: 1;
@@ -4645,6 +4941,10 @@
         outline-offset: 2px;
     }
 
+    [data-scope="toast"][data-part="root"]:has(> [data-scope="toast"][data-part="indicator"]) > [data-scope="toast"][data-part="close"] {
+        grid-column: 4;
+    }
+
     [data-scope="toast"][data-part="root"][data-color="primary"] {
         --toast-bg: var(--color-primary-soft);
         --toast-ink: var(--color-primary);
@@ -4717,6 +5017,18 @@
         }
     }
 
+    @media (forced-colors: active) {
+        [data-scope="toast"][data-part="indicator"][data-state="complete"] {
+            background: CanvasText;
+            forced-color-adjust: none;
+        }
+
+        [data-scope="toast"][data-part="indicator"][data-state="error"] {
+            background: CanvasText;
+            forced-color-adjust: none;
+        }
+    }
+
     @media (prefers-reduced-motion: reduce) {
         [data-scope="toast"][data-part="root"] {
             transition: none;
@@ -4725,8 +5037,15 @@
         [data-scope="toast"][data-part="root"][data-state="open"] {
             transform: none;
         }
+
+        [data-scope="toast"][data-part="indicator"][data-state="loading"] {
+            animation: none;
+        }
     }
 }
+@keyframes zero-daisyui-toast-spin {
+    to { transform: rotate(360deg); }
+}
 
 @layer zero.recipes {
     [data-scope="combobox"][data-part="root"] {
@@ -5737,6 +6056,8 @@
         --tree-accent: var(--color-primary);
         --tree-text: var(--text-sm);
         --tree-on-accent: var(--color-primary-content);
+        --tree-check: var(--tree-accent);
+        --tree-on-check: var(--tree-on-accent);
     }
 
     [data-scope="tree-view"][data-part="root"] {
@@ -5865,35 +6186,89 @@
         scale: -1 1;
     }
 
-    [data-scope="tree-view"][data-part="branch-content"] {
-        display: flex;
-        flex-direction: column;
-        padding-inline-start: var(--space-lg);
+    [data-scope="tree-view"][data-part="node-checkbox"] {
+        display: inline-block;
+        position: relative;
+        flex-shrink: 0;
+        box-sizing: border-box;
+        width: 1.25em;
+        height: 1.25em;
+        border: var(--border) solid var(--tree-check);
+        border-radius: var(--radius-selector);
+        box-shadow: 0 1px var(--depth-shade) inset;
+        cursor: pointer;
+        transition: background-color var(--duration-normal) var(--ease-standard);
     }
 
-    [data-scope="tree-view"][data-part="root"][data-color="primary"] {
-        --tree-accent: var(--color-primary);
-        --tree-on-accent: var(--color-primary-content);
+    [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"] {
+        background-color: var(--tree-check);
     }
 
-    [data-scope="tree-view"][data-part="root"][data-color="secondary"] {
-        --tree-accent: var(--color-secondary);
-        --tree-on-accent: var(--color-secondary-content);
+    [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"] {
+        background-color: var(--tree-check);
     }
 
-    [data-scope="tree-view"][data-part="root"][data-color="accent"] {
-        --tree-accent: var(--color-accent);
-        --tree-on-accent: var(--color-accent-content);
+    [data-scope="tree-view"][data-part="node-checkbox"][data-disabled] {
+        cursor: not-allowed;
     }
 
-    [data-scope="tree-view"][data-part="root"][data-color="neutral"] {
-        --tree-accent: var(--color-neutral);
-        --tree-on-accent: var(--color-neutral-content);
+    [data-scope="tree-view"][data-part="node-checkbox"]::after {
+        content: "";
+        position: absolute;
+        inset: 15%;
+        opacity: 0;
+        rotate: 45deg;
+        background-color: var(--tree-on-check);
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 70% 80%, 70% 100%);
+        transition: clip-path var(--duration-slow) var(--ease-standard) var(--duration-instant), opacity var(--duration-instant) var(--ease-standard) var(--duration-instant), rotate var(--duration-slow) var(--ease-standard) var(--duration-instant), translate var(--duration-slow) var(--ease-standard) var(--duration-instant);
     }
 
-    [data-scope="tree-view"][data-part="root"][data-color="info"] {
-        --tree-accent: var(--color-info);
-        --tree-on-accent: var(--color-info-content);
+    [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 0%, 70% 0%, 70% 100%);
+        opacity: 1;
+    }
+
+    [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
+        clip-path: polygon(20% 100%, 20% 80%, 50% 80%, 50% 80%, 80% 80%, 80% 100%);
+        opacity: 1;
+        translate: 0 -35%;
+        rotate: 0deg;
+    }
+
+    [data-scope="tree-view"][data-selected] [data-scope="tree-view"][data-part="node-checkbox"] {
+        --tree-check: var(--tree-on-accent);
+        --tree-on-check: var(--tree-accent);
+    }
+
+    [data-scope="tree-view"][data-part="branch-content"] {
+        display: flex;
+        flex-direction: column;
+        padding-inline-start: var(--space-lg);
+    }
+
+    [data-scope="tree-view"][data-part="root"][data-color="primary"] {
+        --tree-accent: var(--color-primary);
+        --tree-on-accent: var(--color-primary-content);
+    }
+
+    [data-scope="tree-view"][data-part="root"][data-color="secondary"] {
+        --tree-accent: var(--color-secondary);
+        --tree-on-accent: var(--color-secondary-content);
+    }
+
+    [data-scope="tree-view"][data-part="root"][data-color="accent"] {
+        --tree-accent: var(--color-accent);
+        --tree-on-accent: var(--color-accent-content);
+    }
+
+    [data-scope="tree-view"][data-part="root"][data-color="neutral"] {
+        --tree-accent: var(--color-neutral);
+        --tree-on-accent: var(--color-neutral-content);
+    }
+
+    [data-scope="tree-view"][data-part="root"][data-color="info"] {
+        --tree-accent: var(--color-info);
+        --tree-on-accent: var(--color-info-content);
     }
 
     [data-scope="tree-view"][data-part="root"][data-color="success"] {
@@ -5927,10 +6302,72 @@
         --tree-text: var(--text-lg);
     }
 
+    @media (forced-colors: active) {
+        [data-scope="tree-view"][data-part="node-checkbox"]::after {
+            clip-path: none;
+            background-color: #0000;
+            rotate: 0deg;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            color: CanvasText;
+            font-size: 0.85em;
+            line-height: 1;
+        }
+
+        [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
+            content: "✔︎";
+            clip-path: none;
+            rotate: 0deg;
+        }
+
+        [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
+            content: "−";
+            clip-path: none;
+            rotate: 0deg;
+            translate: none;
+        }
+    }
+
+    @media print {
+        [data-scope="tree-view"][data-part="node-checkbox"]::after {
+            clip-path: none;
+            background-color: #0000;
+            rotate: 0deg;
+            inset: 0;
+            display: grid;
+            place-items: center;
+            color: var(--print-ink);
+            font-size: 0.85em;
+            line-height: 1;
+        }
+
+        [data-scope="tree-view"][data-part="node-checkbox"][data-state="checked"]::after {
+            content: "✔︎";
+            clip-path: none;
+            rotate: 0deg;
+        }
+
+        [data-scope="tree-view"][data-part="node-checkbox"][data-state="indeterminate"]::after {
+            content: "−";
+            clip-path: none;
+            rotate: 0deg;
+            translate: none;
+        }
+    }
+
     @media (prefers-reduced-motion: reduce) {
         [data-scope="tree-view"][data-part="branch-indicator"] {
             transition: none;
         }
+
+        [data-scope="tree-view"][data-part="node-checkbox"] {
+            transition: none;
+        }
+
+        [data-scope="tree-view"][data-part="node-checkbox"]::after {
+            transition: none;
+        }
     }
 }
 
@@ -6368,6 +6805,32 @@
         overflow: hidden;
     }
 
+    [data-scope="card"][data-part="media"] {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: 0;
+        inline-size: 100%;
+        object-fit: cover;
+    }
+
+    [data-scope="card"][data-part="media"] > :is(img, picture, video, svg, canvas) {
+        display: block;
+        inline-size: 100%;
+        block-size: 100%;
+        object-fit: cover;
+    }
+
+    [data-scope="card"][data-part="media"]:first-child {
+        border-start-start-radius: var(--radius-box);
+        border-start-end-radius: var(--radius-box);
+    }
+
+    [data-scope="card"][data-part="media"]:last-child {
+        border-end-start-radius: var(--radius-box);
+        border-end-end-radius: var(--radius-box);
+    }
+
     [data-scope="card"][data-part="header"] {
         display: flex;
         flex-direction: column;
@@ -6962,21 +7425,86 @@
     }
 
     [data-scope="divider"][data-part="root"] {
+        display: flex;
+        align-items: center;
         border: none;
-        background: var(--divider-ink);
         align-self: stretch;
     }
 
+    [data-scope="divider"][data-part="root"]::before {
+        content: "";
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+
+    [data-scope="divider"][data-part="root"]::after {
+        content: "";
+        flex: 1 1 0;
+        min-inline-size: 0;
+    }
+
     [data-scope="divider"][data-part="root"][data-orientation="horizontal"] {
         inline-size: 100%;
-        block-size: var(--divider-thickness);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::before {
+        border-block-start: var(--divider-thickness) solid var(--divider-ink);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="horizontal"]::after {
+        border-block-start: var(--divider-thickness) solid var(--divider-ink);
     }
 
     [data-scope="divider"][data-part="root"][data-orientation="vertical"] {
-        inline-size: var(--divider-thickness);
+        flex-direction: column;
         min-block-size: 1em;
     }
 
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"]::before {
+        border-inline-start: var(--divider-thickness) solid var(--divider-ink);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"]::after {
+        border-inline-start: var(--divider-thickness) solid var(--divider-ink);
+    }
+
+    [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="start"])::before {
+        display: none;
+    }
+
+    [data-scope="divider"][data-part="root"]:has(> [data-scope="divider"][data-part="label"][data-placement="end"])::after {
+        display: none;
+    }
+
+    [data-scope="divider"][data-part="label"] {
+        flex: none;
+        padding-inline: var(--space-md);
+        font-size: var(--text-sm);
+        white-space: nowrap;
+        color: var(--color-base-content);
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"] {
+        padding-inline: 0;
+        padding-block: var(--space-sm);
+    }
+
+    [data-scope="divider"][data-part="label"][data-placement="start"] {
+        padding-inline-start: 0;
+    }
+
+    [data-scope="divider"][data-part="label"][data-placement="end"] {
+        padding-inline-end: 0;
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="start"] {
+        padding-block-start: 0;
+    }
+
+    [data-scope="divider"][data-part="root"][data-orientation="vertical"] > [data-scope="divider"][data-part="label"][data-placement="end"] {
+        padding-block-end: 0;
+    }
+
     [data-scope="divider"][data-part="root"][data-color="primary"] {
         --divider-ink: var(--color-primary);
     }
@@ -7788,6 +8316,20 @@
         align-self: start;
     }
 
+    [data-scope="timeline"][data-part="title"] {
+        display: block;
+        margin: 0;
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-tight);
+    }
+
+    [data-scope="timeline"][data-part="description"] {
+        display: block;
+        margin: 0;
+        margin-block-start: var(--space-2xs);
+        color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    }
+
     [data-scope="timeline"][data-part="marker"][data-color="primary"] {
         --timeline-accent: var(--color-primary);
         --timeline-ring: var(--color-primary-content);
@@ -8099,6 +8641,177 @@
     }
 }
 
+@layer zero.recipes {
+    [data-scope="chat-log"][data-part="root"] {
+        --chat-log-fill: var(--color-primary);
+        --chat-log-on-fill: var(--color-primary-content);
+        --chat-log-jump-size: calc(var(--size-field) * 8);
+    }
+
+    [data-scope="chat-log"][data-part="root"] {
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+        overscroll-behavior-y: contain;
+        border-radius: var(--radius-box);
+        background: var(--color-base-100);
+        color: var(--color-base-content);
+        border: var(--border) solid var(--color-base-300);
+        padding: var(--space-sm) var(--space-md);
+    }
+
+    [data-scope="chat-log"][data-part="root"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: -2px;
+    }
+
+    [data-scope="chat-log"][data-part="content"] {
+        margin-block-start: auto;
+        flex: none;
+        display: grid;
+        row-gap: var(--space-xs);
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"] {
+        position: sticky;
+        inset-block-end: var(--space-sm);
+        align-self: center;
+        flex: none;
+        margin-block-start: calc(var(--chat-log-jump-size) * -1);
+        block-size: var(--chat-log-jump-size);
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2xs);
+        padding-inline: var(--space-md);
+        border: var(--border) solid transparent;
+        border-radius: 9999px;
+        background: var(--chat-log-fill);
+        color: var(--chat-log-on-fill);
+        box-shadow: var(--shadow-xs);
+        font-family: inherit;
+        font-size: var(--text-xs);
+        font-weight: var(--weight-semibold);
+        line-height: var(--leading-none);
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"]:hover:not([data-disabled]) {
+        background: color-mix(in oklab, var(--chat-log-fill) 90%, black);
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="chat-log"][data-part="jump-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+        box-shadow: none;
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="primary"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-primary);
+            --chat-log-on-fill: var(--color-primary-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="secondary"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-secondary);
+            --chat-log-on-fill: var(--color-secondary-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="accent"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-accent);
+            --chat-log-on-fill: var(--color-accent-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="neutral"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-neutral);
+            --chat-log-on-fill: var(--color-neutral-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="info"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-info);
+            --chat-log-on-fill: var(--color-info-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="success"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-success);
+            --chat-log-on-fill: var(--color-success-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="warning"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-warning);
+            --chat-log-on-fill: var(--color-warning-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-color="error"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-fill: var(--color-error);
+            --chat-log-on-fill: var(--color-error-content);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="xs"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-2xs);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 6);
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="sm"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-2xs);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 7);
+            font-size: var(--text-xs);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="lg"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-sm);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 9);
+            font-size: var(--text-sm);
+        }
+    }
+
+    @scope ([data-scope="chat-log"][data-part="root"][data-size="xl"]) to ([data-scope="chat-log"][data-part="root"]) {
+        [data-scope="chat-log"][data-part="content"] {
+            row-gap: var(--space-md);
+        }
+
+        [data-scope="chat-log"][data-part="jump-trigger"] {
+            --chat-log-jump-size: calc(var(--size-field) * 10);
+            font-size: var(--text-sm);
+        }
+    }
+}
+
 @layer zero.recipes {
     [data-scope="radial-progress"][data-part="root"] {
         --radial-size: calc(var(--size-selector) * 16);
@@ -8666,6 +9379,36 @@
         user-select: none;
     }
 
+    [data-scope="breadcrumbs"][data-part="ellipsis"] {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+    }
+
+    [data-scope="breadcrumbs"][data-part="ellipsis-trigger"] {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        padding: 0 var(--space-2xs);
+        margin: 0;
+        font: inherit;
+        line-height: inherit;
+        color: color-mix(in oklch, var(--color-base-content) 75%, transparent);
+        border-radius: var(--radius-selector);
+        cursor: pointer;
+        transition: color var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="breadcrumbs"][data-part="ellipsis-trigger"]:hover:not([data-disabled]) {
+        color: var(--color-base-content);
+        text-decoration: underline;
+    }
+
+    [data-scope="breadcrumbs"][data-part="ellipsis-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-primary);
+        outline-offset: 2px;
+    }
+
     [data-scope="breadcrumbs"][data-part="root"][data-color="primary"] {
         --bc-accent: color-mix(in oklab, var(--color-primary) 95%, var(--color-base-content));
     }
@@ -8748,6 +9491,7 @@
         font-weight: var(--weight-semibold);
         font-variant-numeric: tabular-nums;
         appearance: none;
+        text-decoration: none;
         cursor: pointer;
         transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
     }
@@ -8786,6 +9530,46 @@
         user-select: none;
     }
 
+    [data-scope="pagination"][data-part="first-trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--pg-size);
+        block-size: var(--pg-size);
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+        border: none;
+        border-radius: var(--radius-field);
+        font-size: calc(var(--pg-font) * 1.2);
+        line-height: var(--leading-none);
+        appearance: none;
+        text-decoration: none;
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
+    [data-scope="pagination"][data-part="first-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        scale: -1 1;
+    }
+
     [data-scope="pagination"][data-part="prev-trigger"] {
         display: inline-flex;
         align-items: center;
@@ -8799,6 +9583,7 @@
         font-size: calc(var(--pg-font) * 1.2);
         line-height: var(--leading-none);
         appearance: none;
+        text-decoration: none;
         cursor: pointer;
         transition: background var(--duration-fast) var(--ease-standard);
     }
@@ -8838,6 +9623,7 @@
         font-size: calc(var(--pg-font) * 1.2);
         line-height: var(--leading-none);
         appearance: none;
+        text-decoration: none;
         cursor: pointer;
         transition: background var(--duration-fast) var(--ease-standard);
     }
@@ -8864,6 +9650,46 @@
         scale: -1 1;
     }
 
+    [data-scope="pagination"][data-part="last-trigger"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-inline-size: var(--pg-size);
+        block-size: var(--pg-size);
+        background: var(--color-base-200);
+        color: var(--color-base-content);
+        border: none;
+        border-radius: var(--radius-field);
+        font-size: calc(var(--pg-font) * 1.2);
+        line-height: var(--leading-none);
+        appearance: none;
+        text-decoration: none;
+        cursor: pointer;
+        transition: background var(--duration-fast) var(--ease-standard);
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
+    [data-scope="pagination"][data-part="last-trigger"]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+        scale: -1 1;
+    }
+
     [data-scope="pagination"][data-part="root"][data-color="primary"] {
         --pg-accent: var(--color-primary);
         --pg-accent-content: var(--color-primary-content);
@@ -8942,6 +9768,11 @@
         flex-direction: column;
     }
 
+    [data-scope="steps"][data-part="root"]:has(> [data-scope="steps"]:is([data-part="content"], [data-part="prev-trigger"], [data-part="next-trigger"])) {
+        flex-wrap: wrap;
+        row-gap: var(--space-md);
+    }
+
     [data-scope="steps"][data-part="item"] {
         appearance: none;
         position: relative;
@@ -8970,6 +9801,10 @@
         color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
     }
 
+    [data-scope="steps"][data-part="item"][data-invalid] {
+        color: color-mix(in oklab, var(--color-error) 70%, var(--color-base-content));
+    }
+
     [data-scope="steps"][data-part="item"][data-disabled] {
         opacity: var(--disabled-opacity);
         cursor: not-allowed;
@@ -9028,6 +9863,11 @@
         color: var(--color-base-content);
     }
 
+    [data-scope="steps"][data-part="indicator"][data-invalid] {
+        background: var(--color-error);
+        color: var(--color-error-content);
+    }
+
     [data-scope="steps"][data-part="separator"] {
         position: absolute;
         pointer-events: none;
@@ -9042,6 +9882,10 @@
         background: var(--color-base-300);
     }
 
+    [data-scope="steps"][data-part="separator"][data-invalid] {
+        background: var(--color-error);
+    }
+
     [data-scope="steps"][data-part="separator"][data-orientation="horizontal"] {
         inset-block-start: calc(var(--space-xs) + var(--steps-ind) / 2);
         inset-inline-start: 50%;
@@ -9066,6 +9910,91 @@
         font-weight: var(--weight-normal);
     }
 
+    [data-scope="steps"][data-part="content"] {
+        flex: 1 0 100%;
+        font-size: var(--text-md);
+        color: var(--color-base-content);
+    }
+
+    [data-scope="steps"][data-part="prev-trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        height: calc(var(--size-field) * 12);
+        padding-inline: calc(var(--size-field) * 4);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        cursor: pointer;
+        transition: background var(--duration-normal) var(--ease-standard);
+        flex: 0 0 auto;
+        align-self: flex-start;
+    }
+
+    [data-scope="steps"][data-part="prev-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="steps"][data-part="prev-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="steps"][data-part="prev-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="steps"][data-part="prev-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
+    [data-scope="steps"][data-part="next-trigger"] {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5em;
+        height: calc(var(--size-field) * 12);
+        padding-inline: calc(var(--size-field) * 4);
+        font-size: var(--text-sm);
+        font-weight: var(--weight-semibold);
+        color: var(--color-base-content);
+        background: var(--color-base-200);
+        border: var(--border) solid var(--color-base-300);
+        border-radius: var(--radius-field);
+        box-shadow: var(--shadow-xs);
+        cursor: pointer;
+        transition: background var(--duration-normal) var(--ease-standard);
+        flex: 0 0 auto;
+        align-self: flex-start;
+        margin-inline-start: auto;
+    }
+
+    [data-scope="steps"][data-part="next-trigger"]:hover:not([data-disabled]) {
+        background: var(--color-base-300);
+    }
+
+    [data-scope="steps"][data-part="next-trigger"][data-disabled] {
+        opacity: var(--disabled-opacity);
+        cursor: not-allowed;
+    }
+
+    [data-scope="steps"][data-part="next-trigger"][data-focus-visible] {
+        outline: 2px solid var(--color-base-content);
+        outline-offset: 2px;
+    }
+
+    [data-scope="steps"][data-part="next-trigger"][data-pressed]:not([data-disabled]) {
+        transform: translateY(1px);
+    }
+
     [data-scope="steps"][data-part="root"][data-size="xs"] {
         --steps-ind: calc(var(--size-selector) * 5);
         --steps-font: var(--text-xs);