daisyui 4.0.0-alpha.6 → 4.0.0-alpha.9

package/dist/styled.css

@@ -109,13 +109,13 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
+  border-radius: var(--rounded-btn, 0.5rem);
   border-color: transparent;
   text-align: center;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  border-radius: var(--rounded-btn, 0.5rem);
   height: 3rem;
   min-height: 3rem;
   padding-left: 1rem;
@@ -378,6 +378,66 @@
       white-space: pre;
       top: calc(var(--value) * -1em);
     }
+.diff {
+  position: relative;
+  display: grid;
+  width: 100%;
+  overflow: hidden;
+  container-type: inline-size;
+  grid-template-columns: auto 1fr
+}
+.diff-resizer {
+  position: relative;
+  top: 50%;
+  z-index: 1;
+  height: 3rem;
+  width: 25rem;
+  min-width: 1rem;
+  max-width: calc(100cqi - 1rem);
+  resize: horizontal;
+  overflow: hidden;
+  opacity: 0;
+  transform-origin: 100% 100%;
+  scale: 4;
+  translate: 1.5rem -1.5rem;
+  clip-path: inset(calc(100% - 0.75rem) 0 0 calc(100% - 0.75rem))
+}
+.diff-resizer,
+.diff-item-1,
+.diff-item-2 {
+  position: relative;
+  grid-column-start: 1;
+  grid-row-start: 1
+}
+.diff-item-1:after {
+  pointer-events: none;
+  position: absolute;
+  bottom: 0px;
+  right: 1px;
+  top: 50%;
+  z-index: 1;
+  height: 2rem;
+  width: 2rem;
+  --tw-content: '';
+  content: var(--tw-content);
+  translate: 50% -50%
+}
+.diff-item-2 {
+  overflow: hidden
+}
+.diff-item-1 > *,
+.diff-item-2 > * {
+  pointer-events: none;
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+  width: 100cqi;
+  max-width: none;
+  object-fit: cover;
+  object-position: center
+}
 .divider {
     display: flex;
     flex-direction: row;
@@ -1169,35 +1229,35 @@ input.tab:checked + .tab-content,
   position: relative;
   display: flex;
 }
-:where(.timeline li) {
+:where(.timeline > li) {
   position: relative;
   display: grid;
   align-items: center;
   grid-template-rows: var(--timeline-row-start, 1fr) auto var(--timeline-row-end, 1fr);
   grid-template-columns: var(--timeline-col-start, 1fr) auto var(--timeline-col-end, 1fr);
 }
-:where(.timeline:not(:has(.timeline-start)) li) {
+:where(.timeline:not(:has(.timeline-start)) > li) {
   --timeline-row-start: min-content;
 }
-:where(.timeline:not(:has(.timeline-end)) li) {
+:where(.timeline:not(:has(.timeline-end)) > li) {
   --timeline-row-end: min-content;
 }
 :where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
   --timeline-row-start: min-content;
   --timeline-row-end: min-content;
 }
-.timeline hr {
+.timeline > li > hr {
   width: 100%;
   border-width: 0px;
 }
-.timeline-snap-icon li {
+.timeline-snap-icon > li {
   --timeline-col-start: 0.5rem;
 }
-:where(.timeline hr):first-child {
+:where(.timeline > li > hr):first-child {
   grid-column-start: 1;
   grid-row-start: 2;
 }
-:where(.timeline hr):last-child {
+:where(.timeline > li > hr):last-child {
   grid-column-start: 3;
   grid-row-start: 2;
 }
@@ -1234,13 +1294,13 @@ input.tab:checked + .tab-content,
     flex-shrink: 0
 }
 .alert {
+  border-radius: var(--rounded-box, 1rem);
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: oklch(var(--b2) / var(--tw-border-opacity));
   padding: 1rem;
   --tw-text-opacity: 1;
   color: oklch(var(--bc) / var(--tw-text-opacity));
-  border-radius: var(--rounded-box, 1rem);
   --alert-bg: oklch(var(--b2));
   --alert-bg-mix: oklch(var(--b1));
   background-color: var(--alert-bg)
@@ -1288,14 +1348,14 @@ input.tab:checked + .tab-content,
     border-color: oklch(var(--b1) / var(--tw-border-opacity))
 }
 .badge {
+    border-radius: var(--rounded-badge, 1.9rem);
     border-width: 1px;
     --tw-border-opacity: 1;
     border-color: oklch(var(--b2) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: oklch(var(--b1) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: oklch(var(--bc) / var(--tw-text-opacity));
-    border-radius: var(--rounded-badge, 1.9rem)
+    color: oklch(var(--bc) / var(--tw-text-opacity))
 }
   .badge-neutral {
     --tw-border-opacity: 1;
@@ -1532,18 +1592,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-primary:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--pf) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--pf) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-primary.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--pf) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--pf) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
+    }
   .btn-secondary {
   --tw-border-opacity: 1;
   border-color: oklch(var(--s) / var(--tw-border-opacity));
@@ -1555,18 +1611,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-secondary:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--sf) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--sf) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--s) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--s) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-secondary.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--sf) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--sf) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--s) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--s) / var(--tw-border-opacity)) 90%, black);
+    }
   .btn-accent {
   --tw-border-opacity: 1;
   border-color: oklch(var(--a) / var(--tw-border-opacity));
@@ -1578,18 +1630,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-accent:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--af) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--af) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--a) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--a) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-accent.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--af) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--af) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--a) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--a) / var(--tw-border-opacity)) 90%, black);
+    }
   .btn-neutral {
   --tw-border-opacity: 1;
   border-color: oklch(var(--n) / var(--tw-border-opacity));
@@ -1601,18 +1649,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-neutral:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--nf) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--nf) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--n) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--n) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-neutral.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--nf) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--nf) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--n) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--n) / var(--tw-border-opacity)) 90%, black);
+    }
   /* btn with state colors */
   .btn-info {
   --tw-border-opacity: 1;
@@ -1625,18 +1669,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-info:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--in) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--in) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--in) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--in) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-info.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--in) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--in) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--in) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--in) / var(--tw-border-opacity)) 90%, black);
+    }
   .btn-success {
   --tw-border-opacity: 1;
   border-color: oklch(var(--su) / var(--tw-border-opacity));
@@ -1648,18 +1688,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-success:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--su) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--su) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--su) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--su) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-success.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--su) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--su) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--su) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--su) / var(--tw-border-opacity)) 90%, black);
+    }
   .btn-warning {
   --tw-border-opacity: 1;
   border-color: oklch(var(--wa) / var(--tw-border-opacity));
@@ -1671,18 +1707,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-warning:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--wa) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--wa) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-warning.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--wa) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--wa) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-border-opacity)) 90%, black);
+    }
   .btn-error {
   --tw-border-opacity: 1;
   border-color: oklch(var(--er) / var(--tw-border-opacity));
@@ -1694,18 +1726,14 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
       .btn-error:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--er) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--er) / var(--tw-bg-opacity));
-  }
+        background-color: color-mix(in oklab, oklch(var(--er) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--er) / var(--tw-border-opacity)) 90%, black);
+      }
     }
   .btn-error.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--er) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--er) / var(--tw-bg-opacity));
-}
+      background-color: color-mix(in oklab, oklch(var(--er) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--er) / var(--tw-border-opacity)) 90%, black);
+    }
   /* glass */
   .btn.glass {
   --tw-shadow: 0 0 #0000;
@@ -1803,21 +1831,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-primary:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--pf) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--pf) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--pc) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-primary.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--pf) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--pf) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--pc) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
 }
   .btn-outline.btn-secondary {
   --tw-text-opacity: 1;
@@ -1825,21 +1849,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-secondary:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--sf) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--sf) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--sc) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--s) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--s) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-secondary.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--sf) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--sf) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--sc) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--s) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--s) / var(--tw-border-opacity)) 90%, black);
 }
   .btn-outline.btn-accent {
   --tw-text-opacity: 1;
@@ -1847,21 +1867,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-accent:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--af) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--af) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--ac) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--a) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--a) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-accent.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--af) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--af) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--ac) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--a) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--a) / var(--tw-border-opacity)) 90%, black);
 }
   .btn-outline.btn-success {
   --tw-text-opacity: 1;
@@ -1869,21 +1885,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-success:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--su) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--su) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--suc) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--su) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--su) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-success.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--su) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--su) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--suc) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--su) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--su) / var(--tw-border-opacity)) 90%, black);
 }
   .btn-outline.btn-info {
   --tw-text-opacity: 1;
@@ -1891,21 +1903,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-info:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--in) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--in) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--inc) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--in) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--in) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-info.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--in) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--in) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--inc) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--in) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--in) / var(--tw-border-opacity)) 90%, black);
 }
   .btn-outline.btn-warning {
   --tw-text-opacity: 1;
@@ -1913,21 +1921,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-warning:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--wa) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--wa) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--wac) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-warning.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--wa) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--wa) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--wac) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--wa) / var(--tw-border-opacity)) 90%, black);
 }
   .btn-outline.btn-error {
   --tw-text-opacity: 1;
@@ -1935,21 +1939,17 @@ input.tab:checked + .tab-content,
 }
   @media (hover: hover) {
         .btn-outline.btn-error:hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--er) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--er) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
     color: oklch(var(--erc) / var(--tw-text-opacity));
+          background-color: color-mix(in oklab, oklch(var(--er) / var(--tw-bg-opacity)) 90%, black);
+          border-color: color-mix(in oklab, oklch(var(--er) / var(--tw-border-opacity)) 90%, black);
   }
       }
   .btn-outline.btn-error.btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--er) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--er) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--erc) / var(--tw-text-opacity));
+        background-color: color-mix(in oklab, oklch(var(--er) / var(--tw-bg-opacity)) 90%, black);
+        border-color: color-mix(in oklab, oklch(var(--er) / var(--tw-border-opacity)) 90%, black);
 }
   /* disabled */
   .btn.btn-disabled,
@@ -1987,11 +1987,9 @@ input.tab:checked + .tab-content,
 
 @media (hover: hover) {
     .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
-    --tw-border-opacity: 1;
-    border-color: oklch(var(--pf) / var(--tw-border-opacity));
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--pf) / var(--tw-bg-opacity));
-  }
+      background-color: color-mix(in oklab, oklch(var(--p) / var(--tw-bg-opacity)) 90%, black);
+      border-color: color-mix(in oklab, oklch(var(--p) / var(--tw-border-opacity)) 90%, black);
+    }
   }
 
 .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
@@ -2061,10 +2059,10 @@ input.tab:checked + .tab-content,
 }
   .card.image-full:before {
     z-index: 10;
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--n) / var(--tw-bg-opacity));
     opacity: 0.75;
-    border-radius: var(--rounded-box, 1rem);
 }
   .card.image-full > .card-body {
     z-index: 20;
@@ -2158,10 +2156,10 @@ input.tab:checked + .tab-content,
   width: 1.5rem;
   cursor: pointer;
   appearance: none;
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: oklch(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0.2;
-  border-radius: var(--rounded-btn, 0.5rem);
 }
   .checkbox:focus-visible {
   outline-style: solid;
@@ -2531,6 +2529,27 @@ details.collapse summary {
       text-align: center;
       transition: all 1s cubic-bezier(1, 0, 0, 1);
     }
+.diff-item-1:after {
+  border-radius: 9999px;
+  border-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: oklch(var(--b1) / var(--tw-border-opacity));
+  background-color: oklch(var(--b1) / 0.5);
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-style: solid;
+  outline-offset: -3px;
+  outline-color: oklch(var(--bc) / 0.05);
+  --tw-backdrop-blur: blur(8px);
+  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  translate: 50% -50%
+}
+.diff-item-2 {
+  border-right-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: oklch(var(--b1) / var(--tw-border-opacity))
+}
 .divider {
     margin-top: 1rem;
     margin-bottom: 1rem;
@@ -2605,6 +2624,7 @@ details.collapse summary {
 }
 .file-input {
     overflow: hidden;
+    border-radius: var(--rounded-btn, 0.5rem);
     border-width: 1px;
     border-color: oklch(var(--bc) / var(--tw-border-opacity));
     --tw-border-opacity: 0;
@@ -2612,7 +2632,6 @@ details.collapse summary {
     background-color: oklch(var(--b1) / var(--tw-bg-opacity));
     font-size: 1rem;
     line-height: 1.5rem;
-    border-radius: var(--rounded-btn, 0.5rem);
 }
   .file-input::file-selector-button {
     border-style: solid;
@@ -2828,6 +2847,7 @@ details.collapse summary {
     padding: 1rem
 }
 .input {
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: oklch(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0;
@@ -2835,7 +2855,6 @@ details.collapse summary {
   background-color: oklch(var(--b1) / var(--tw-bg-opacity));
   font-size: 1rem;
   line-height: 1.5rem;
-  border-radius: var(--rounded-btn, 0.5rem);
   /* &::-webkit-calendar-picker-indicator {
     display: none;
   } */
@@ -2951,6 +2970,7 @@ details.collapse summary {
     isolation: isolate
 }
 .kbd {
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: oklch(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0.2;
@@ -2958,7 +2978,6 @@ details.collapse summary {
   background-color: oklch(var(--b2) / var(--tw-bg-opacity));
   padding-left: 0.5rem;
   padding-right: 0.5rem;
-  border-radius: var(--rounded-btn, 0.5rem);
   border-bottom-width: 2px;
   min-height: 2.2em;
   min-width: 2.2em
@@ -2969,8 +2988,7 @@ details.collapse summary {
 }
 @media(hover:hover) {
     .link-primary:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--pf) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--p)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-secondary {
@@ -2979,8 +2997,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-secondary:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--sf) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--s)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-accent {
@@ -2989,8 +3006,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-accent:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--af) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--a)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-neutral {
@@ -2999,8 +3015,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-neutral:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--nf) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--n)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-success {
@@ -3009,8 +3024,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-success:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--su) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--su)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-info {
@@ -3019,8 +3033,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-info:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--in) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--in)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-warning {
@@ -3029,8 +3042,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-warning:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--wa) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--wa)/var(--tw-text-opacity))80%,black);
     }
 }
   .link-error {
@@ -3039,8 +3051,7 @@ details.collapse summary {
 }
   @media(hover:hover) {
     .link-error:hover {
-        --tw-text-opacity: 1;
-        color: oklch(var(--er) / var(--tw-text-opacity));
+        color: color-mix(in oklab,oklch(var(--er)/var(--tw-text-opacity))80%,black);
     }
 }
   .link:focus {
@@ -3172,6 +3183,7 @@ details.collapse summary {
 }
 .menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
 .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+  border-radius: var(--rounded-btn, 0.5rem);
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -3181,7 +3193,6 @@ details.collapse summary {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  border-radius: var(--rounded-btn, 0.5rem);
   text-wrap: balance;
 }
 :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
@@ -3264,13 +3275,13 @@ details.collapse summary {
 }
 .mockup-code {
     min-width: 18rem;
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--n) / var(--tw-bg-opacity));
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;
     --tw-text-opacity: 1;
     color: oklch(var(--nc) / var(--tw-text-opacity));
-    border-radius: var(--rounded-box, 1rem);
     direction: ltr;
 }
     .mockup-code:before {
@@ -3301,8 +3312,8 @@ details.collapse summary {
   .mockup-window {
     display: flex;
     flex-direction: column;
-    padding-top: 1.25rem;
     border-radius: var(--rounded-box, 1rem);
+    padding-top: 1.25rem;
 }
   .mockup-window:before {
       content: "";
@@ -3472,6 +3483,10 @@ details.collapse summary {
   --tw-scale-x: .9;
   --tw-scale-y: .9;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-bottom-right-radius: var(--rounded-box, 1rem);
+  border-bottom-left-radius: var(--rounded-box, 1rem);
+  border-top-left-radius: var(--rounded-box, 1rem);
+  border-top-right-radius: var(--rounded-box, 1rem);
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b1) / var(--tw-bg-opacity));
   padding: 1.5rem;
@@ -3479,10 +3494,6 @@ details.collapse summary {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  border-top-left-radius: var(--rounded-box, 1rem);
-  border-top-right-radius: var(--rounded-box, 1rem);
-  border-bottom-left-radius: var(--rounded-box, 1rem);
-  border-bottom-right-radius: var(--rounded-box, 1rem);
   box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -3517,48 +3528,48 @@ details.collapse summary {
 }
 .progress {
     height: 0.5rem;
-    background-color: oklch(var(--bc) / 0.2);
     border-radius: var(--rounded-box, 1rem);
+    background-color: oklch(var(--bc) / 0.2);
 }
   .progress::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--bc) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-primary::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--p) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-secondary::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--s) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-accent::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--a) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-info::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--in) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-success::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--su) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-warning::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--wa) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-error::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--er) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress:indeterminate {
     --progress-color: oklch(var(--bc));
@@ -3585,13 +3596,13 @@ details.collapse summary {
     --progress-color: oklch(var(--er));
   }
   .progress::-webkit-progress-bar {
-    background-color: transparent;
     border-radius: var(--rounded-box, 1rem);
+    background-color: transparent;
 }
   .progress::-webkit-progress-value {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: oklch(var(--bc) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-primary::-webkit-progress-value {
     --tw-bg-opacity: 1;
@@ -3882,8 +3893,8 @@ details.collapse summary {
   -webkit-appearance: none;
   --range-shdw: var(--bc);
   overflow: hidden;
-  background-color: transparent;
   border-radius: var(--rounded-box, 1rem);
+  background-color: transparent;
 }
   .range:focus-visible::-webkit-slider-thumb {
     --focus-shadow: 0 0 0 6px oklch(var(--b1)) inset, 0 0 0 2rem oklch(var(--range-shdw)) inset;
@@ -3894,23 +3905,23 @@ details.collapse summary {
   .range::-webkit-slider-runnable-track {
   height: 0.5rem;
   width: 100%;
-  background-color: oklch(var(--bc) / 0.1);
   border-radius: var(--rounded-box, 1rem);
+  background-color: oklch(var(--bc) / 0.1);
 }
   .range::-moz-range-track {
   height: 0.5rem;
   width: 100%;
-  background-color: oklch(var(--bc) / 0.1);
   border-radius: var(--rounded-box, 1rem);
+  background-color: oklch(var(--bc) / 0.1);
 }
   .range::-webkit-slider-thumb {
   position: relative;
   height: 1.5rem;
   width: 1.5rem;
+  border-radius: var(--rounded-box, 1rem);
   border-style: none;
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b1) / var(--tw-bg-opacity));
-  border-radius: var(--rounded-box, 1rem);
     appearance: none;
     -webkit-appearance: none;
     top: 50%;
@@ -3927,10 +3938,10 @@ details.collapse summary {
   position: relative;
   height: 1.5rem;
   width: 1.5rem;
+  border-radius: var(--rounded-box, 1rem);
   border-style: none;
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b1) / var(--tw-bg-opacity));
-  border-radius: var(--rounded-box, 1rem);
     top: 50%;
     color: oklch(var(--range-shdw));
     --filler-size: 100rem;
@@ -4006,13 +4017,13 @@ details.collapse summary {
   }
 }
 .select {
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: oklch(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0;
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b1) / var(--tw-bg-opacity));
   padding-right: 2.5rem;
-  border-radius: var(--rounded-btn, 0.5rem);
 }
   .select-bordered {
   --tw-border-opacity: 0.2;
@@ -4120,9 +4131,9 @@ details.collapse summary {
     calc(0% + 16px) calc(1px + 50%);
 }
 .skeleton {
+  border-radius: var(--rounded-box, 1rem);
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b3) / var(--tw-bg-opacity));
-  border-radius: var(--rounded-box, 1rem);
   will-change: background-position;
   animation: skeleton 2.5s ease-in-out infinite;
   background-image: linear-gradient(
@@ -4165,11 +4176,11 @@ details.collapse summary {
     opacity: 1
 }
 .stats {
+  border-radius: var(--rounded-box, 1rem);
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b1) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--bc) / var(--tw-text-opacity));
-  border-radius: var(--rounded-box, 1rem);
 }
 :where(.stats) > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-x-reverse: 0;
@@ -4512,20 +4523,28 @@ details.collapse summary {
       background-image: var(--radius-end);
       background-position: top right;
     }
+[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, [dir="rtl"] .tab-lifted:is(input:checked):first-child:before {
+        background-image: var(--radius-start);
+        background-position: top left;
+      }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, .tab-lifted:is(input:checked):last-child:before {
       background-image: var(--radius-start);
       background-position: top left;
     }
+[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:before, [dir="rtl"] .tab-lifted:is(input:checked):last-child:before {
+        background-image: var(--radius-end);
+        background-position: top right;
+      }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled])
   + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked) + .tab-lifted:is(input:checked):before {
     background-image: var(--radius-end);
     background-position: top right;
   }
 .tabs-boxed {
+  border-radius: var(--rounded-btn, 0.5rem);
   --tw-bg-opacity: 1;
   background-color: oklch(var(--b2) / var(--tw-bg-opacity));
   padding: 0.25rem;
-  border-radius: var(--rounded-btn, 0.5rem);
 }
 .tabs-boxed .tab {
   border-radius: var(--rounded-btn, 0.5rem);
@@ -4544,10 +4563,10 @@ details.collapse summary {
   }
 }
 .table {
+    border-radius: var(--rounded-box, 1rem);
     text-align: left;
     font-size: 0.875rem;
-    line-height: 1.25rem;
-    border-radius: var(--rounded-box, 1rem)
+    line-height: 1.25rem
 }
 :is([dir="rtl"] .table) {
     text-align: right
@@ -4599,12 +4618,12 @@ details.collapse summary {
     color: oklch(var(--bc) / 0.6)
 }
 .textarea {
+      border-radius: var(--rounded-btn, 0.5rem);
       border-width: 1px;
       border-color: oklch(var(--bc) / var(--tw-border-opacity));
       --tw-border-opacity: 0;
       --tw-bg-opacity: 1;
-      background-color: oklch(var(--b1) / var(--tw-bg-opacity));
-      border-radius: var(--rounded-btn, 0.5rem)
+      background-color: oklch(var(--b1) / var(--tw-bg-opacity))
 }
   .textarea-bordered {
       --tw-border-opacity: 0.2
@@ -4721,6 +4740,7 @@ details.collapse summary {
     border-end-start-radius: 0px
 }
 .timeline-box {
+    border-radius: var(--rounded-box, 1rem);
     border-width: 1px;
     --tw-border-opacity: 1;
     border-color: oklch(var(--b3) / var(--tw-border-opacity));
@@ -4732,8 +4752,7 @@ details.collapse summary {
     padding-bottom: 0.5rem;
     --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-    border-radius: var(--rounded-box, 1rem)
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 .toast {
     gap: 0.5rem;
@@ -4762,12 +4781,12 @@ details.collapse summary {
   width: 3rem;
   cursor: pointer;
   appearance: none;
+  border-radius: var(--rounded-badge, 1.9rem);
   border-width: 1px;
   border-color: oklch(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0.2;
   background-color: oklch(var(--bc) / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.5;
-  border-radius: var(--rounded-badge, 1.9rem);
   transition:
     background,
     box-shadow var(--animation-input, 0.2s) ease-out;