daisyui 4.0.0-alpha.3 → 4.0.0-alpha.5

package/dist/styled.css

@@ -109,66 +109,52 @@
   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;
   padding-right: 1rem;
   font-size: 0.875rem;
-  line-height: 1em;
+  line-height: 1em
 }
 
   /* disabled */
   .btn-disabled,
   .btn[disabled],
   .btn:disabled {
-  pointer-events: none;
+  pointer-events: none
 }
   /* shapes */
   .btn-square {
   height: 3rem;
   width: 3rem;
-  padding: 0px;
+  padding: 0px
 }
   .btn-circle {
   height: 3rem;
   width: 3rem;
   border-radius: 9999px;
-  padding: 0px;
-}
-
-/* group */
-
-.btn-group {
-  display: inline-flex;
+  padding: 0px
 }
 
-.btn-group > input[type="radio"].btn {
-  appearance: none;
-}
-
-.btn-group > input[type="radio"].btn:before {
-    content: attr(data-title);
-  }
-
 /* radio input and checkbox as button */
 
 :where(.btn:is(input[type="checkbox"])),
 :where(.btn:is(input[type="radio"])) {
   width: auto;
-  appearance: none;
+  appearance: none
 }
 
 .btn:is(input[type="checkbox"]):after,
 .btn:is(input[type="radio"]):after {
   --tw-content: attr(aria-label);
-  content: var(--tw-content);
+  content: var(--tw-content)
 }
 .card {
       position: relative;
@@ -652,76 +638,8 @@
     padding-right: 1rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    line-height: 2;
-}
-.input-group {
-    display: flex;
-    width: 100%;
-    align-items: stretch;
-}
-.input-group > .input {
-    isolation: isolate;
-}
-.input-group > *,
-  .input-group > .input,
-  .input-group > .textarea,
-  .input-group > .select {
-    border-radius: 0px;
-}
-.input-group-md {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    line-height: 2;
-}
-.input-group-lg {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    line-height: 2;
-}
-.input-group-sm {
-    font-size: 0.875rem;
-    line-height: 2rem;
-}
-.input-group-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    line-height: 1.625;
-}
-.input-group :where(span) {
-    display: flex;
-    align-items: center;
-    --tw-bg-opacity: 1;
-    background-color: oklch(var(--b3) / var(--tw-bg-opacity));
-    padding-left: 1rem;
-    padding-right: 1rem;
-}
-.input-group > :first-child {
-    border-top-left-radius: var(--rounded-btn, 0.5rem);
-    border-top-right-radius: 0;
-    border-bottom-left-radius: var(--rounded-btn, 0.5rem);
-    border-bottom-right-radius: 0;
-  }
-.input-group > :last-child {
-    border-top-left-radius: 0;
-    border-top-right-radius: var(--rounded-btn, 0.5rem);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: var(--rounded-btn, 0.5rem);
-  }
-.input-group-vertical {
-    flex-direction: column;
+    line-height: 2
 }
-.input-group-vertical :first-child {
-      border-top-left-radius: var(--rounded-btn, 0.5rem);
-      border-top-right-radius: var(--rounded-btn, 0.5rem);
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-.input-group-vertical :last-child {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      border-bottom-left-radius: var(--rounded-btn, 0.5rem);
-      border-bottom-right-radius: var(--rounded-btn, 0.5rem);
-    }
 .join {
     display: inline-flex;
     align-items: stretch;
@@ -764,8 +682,17 @@
     border-start-end-radius: inherit;
     border-end-end-radius: inherit;
   }
-:where(.join *) {
-    border-radius: inherit;
+
+@supports not selector(:has(*)) {
+  :where(.join *) {
+        border-radius: inherit;
+    }
+}
+
+@supports selector(:has(*)) {
+  :where(.join *:has(.join-item)) {
+        border-radius: inherit;
+    }
 }
 .kbd {
     display: inline-flex;
@@ -1149,24 +1076,54 @@
     opacity: 1
 }
 .tabs {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end
+  display: grid;
+  align-items: flex-end;
+}
+  .tabs:has(.tab-content[class^="rounded-"]) .tab-lifted:first-child:not(.tab-active),
+  .tabs:has(.tab-content[class*=" rounded-"]) .tab-lifted:first-child:not(.tab-active) {
+  border-bottom-color: transparent;
 }
 .tab {
   position: relative;
+  grid-row-start: 1;
   display: inline-flex;
+  height: 2rem;
   cursor: pointer;
   user-select: none;
+  appearance: none;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   text-align: center;
-  height: 2rem;
   font-size: 0.875rem;
   line-height: 1.25rem;
   line-height: 2;
-  --tab-padding: 1rem
+  --tab-padding: 1rem;
+}
+.tab:is(input[type="radio"]):after {
+    --tw-content: attr(aria-label);
+    content: var(--tw-content);
+  }
+.tab:not(input):empty {
+  cursor: default;
+    grid-column-start: span 9999;
+}
+.tab-content {
+  grid-column: 1 / -1;
+  grid-column-end: span 9999;
+  grid-row-start: 2;
+  margin-top: calc(var(--tab-border) * -1);
+  display: none;
+  border-color: transparent;
+  border-width: var(--tab-border, 0);
+}
+:checked + .tab-content:nth-child(2),
+  .tab-active + .tab-content:nth-child(2) {
+  border-start-start-radius: 0px;
+}
+input.tab:checked + .tab-content,
+.tab-active + .tab-content {
+  display: block;
 }
 .table {
     position: relative;
@@ -1208,6 +1165,60 @@
     line-height: 1.25rem;
     line-height: 2
 }
+.timeline {
+  position: relative;
+  display: flex;
+}
+:where(.timeline li) {
+  position: relative;
+  display: grid;
+  align-items: center;
+  grid-template-rows: 1fr auto 1fr;
+  grid-template-columns: 1fr auto 1fr;
+}
+:where(.timeline:not(:has(.timeline-start)) li) {
+  grid-template-rows: min-content auto 1fr;
+}
+:where(.timeline:not(:has(.timeline-end)) li) {
+  grid-template-rows: 1fr auto min-content;
+}
+:where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
+  grid-template-rows: min-content auto min-content;
+}
+.timeline hr {
+  width: 100%;
+  border-width: 0px;
+}
+:where(.timeline hr):first-child {
+  grid-column-start: 1;
+  grid-row-start: 2;
+}
+:where(.timeline hr):last-child {
+  grid-column-start: 3;
+  grid-row-start: 2;
+}
+.timeline-start {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 2;
+  margin: 0.25rem;
+  align-self: flex-end;
+  justify-self: center;
+}
+.timeline-middle {
+  grid-column-start: 2;
+  grid-row-start: 2;
+}
+.timeline-end {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 3;
+  grid-row-end: 4;
+  margin: 0.25rem;
+  align-self: flex-start;
+  justify-self: center;
+}
 .toast {
     position: fixed;
     display: flex;
@@ -1219,13 +1230,13 @@
     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)
@@ -1273,14 +1284,14 @@
     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))
+    color: oklch(var(--bc) / var(--tw-text-opacity));
+    border-radius: var(--rounded-badge, 1.9rem)
 }
   .badge-neutral {
     --tw-border-opacity: 1;
@@ -1957,22 +1968,9 @@
     --tw-text-opacity: 0.2;
   }
   }
-/* group */
-.btn-group > input[type="radio"]:checked.btn,
-  .btn-group > .btn-active {
-  --tw-border-opacity: 1;
-  border-color: oklch(var(--p) / var(--tw-border-opacity));
-  --tw-bg-opacity: 1;
-  background-color: oklch(var(--p) / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: oklch(var(--pc) / var(--tw-text-opacity));
-}
-.btn-group > input[type="radio"]:checked.btn:focus-visible, .btn-group > .btn-active:focus-visible {
-  outline-style: solid;
-  outline-width: 2px;
-  outline-color: oklch(var(--p) / 1);
-}
+
 /* radio input and checkbox as button */
+
 .btn:is(input[type="checkbox"]:checked),
 .btn:is(input[type="radio"]:checked) {
   --tw-border-opacity: 1;
@@ -1982,6 +1980,7 @@
   --tw-text-opacity: 1;
   color: oklch(var(--pc) / var(--tw-text-opacity));
 }
+
 @media (hover: hover) {
     .btn:is(input[type="checkbox"]:checked):hover, .btn:is(input[type="radio"]:checked):hover {
     --tw-border-opacity: 1;
@@ -1990,9 +1989,11 @@
     background-color: oklch(var(--pf) / var(--tw-bg-opacity));
   }
   }
+
 .btn:is(input[type="checkbox"]:checked):focus-visible, .btn:is(input[type="radio"]:checked):focus-visible {
   outline-color: oklch(var(--p) / 1);
 }
+
 @keyframes button-pop {
   0% {
     transform: scale(var(--btn-focus-scale, 0.98));
@@ -2056,10 +2057,10 @@
 }
   .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;
@@ -2153,10 +2154,10 @@
   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;
@@ -2555,7 +2556,7 @@ details.collapse summary {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
   .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
-        background-color: oklch(0 0% 0%/0.4);
+        background-color: oklch(0 0 0/0.4);
       }
   .drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
   outline-style: solid;
@@ -2600,7 +2601,6 @@ 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;
@@ -2608,6 +2608,7 @@ 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;
@@ -2823,7 +2824,6 @@ 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;
@@ -2831,6 +2831,7 @@ 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;
   } */
@@ -2946,7 +2947,6 @@ 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;
@@ -2954,6 +2954,7 @@ 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
@@ -3167,7 +3168,6 @@ 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;
@@ -3177,6 +3177,7 @@ 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,
@@ -3259,13 +3260,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 {
@@ -3296,8 +3297,8 @@ details.collapse summary {
   .mockup-window {
     display: flex;
     flex-direction: column;
-    border-radius: var(--rounded-box, 1rem);
     padding-top: 1.25rem;
+    border-radius: var(--rounded-box, 1rem);
 }
   .mockup-window:before {
       content: "";
@@ -3467,10 +3468,6 @@ 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;
@@ -3478,6 +3475,10 @@ 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;
@@ -3512,48 +3513,48 @@ details.collapse summary {
 }
 .progress {
     height: 0.5rem;
-    border-radius: var(--rounded-box, 1rem);
     background-color: oklch(var(--bc) / 0.2);
+    border-radius: var(--rounded-box, 1rem);
 }
   .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));
@@ -3580,13 +3581,13 @@ details.collapse summary {
     --progress-color: oklch(var(--er));
   }
   .progress::-webkit-progress-bar {
-    border-radius: var(--rounded-box, 1rem);
     background-color: transparent;
+    border-radius: var(--rounded-box, 1rem);
 }
   .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;
@@ -3877,8 +3878,8 @@ details.collapse summary {
   -webkit-appearance: none;
   --range-shdw: var(--bc);
   overflow: hidden;
-  border-radius: var(--rounded-box, 1rem);
   background-color: transparent;
+  border-radius: var(--rounded-box, 1rem);
 }
   .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;
@@ -3889,23 +3890,23 @@ details.collapse summary {
   .range::-webkit-slider-runnable-track {
   height: 0.5rem;
   width: 100%;
-  border-radius: var(--rounded-box, 1rem);
   background-color: oklch(var(--bc) / 0.1);
+  border-radius: var(--rounded-box, 1rem);
 }
   .range::-moz-range-track {
   height: 0.5rem;
   width: 100%;
-  border-radius: var(--rounded-box, 1rem);
   background-color: oklch(var(--bc) / 0.1);
+  border-radius: var(--rounded-box, 1rem);
 }
   .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%;
@@ -3922,10 +3923,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;
@@ -4001,13 +4002,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;
@@ -4114,6 +4115,37 @@ details.collapse summary {
     calc(0% + 12px) calc(1px + 50%),
     calc(0% + 16px) calc(1px + 50%);
 }
+.skeleton {
+  --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(
+    105deg,
+    transparent 0%,
+    transparent 40%,
+    oklch(var(--b1)) 50%,
+    transparent 60%,
+    transparent 100%
+  );
+  background-size: 200% auto;
+  background-repeat: no-repeat;
+  background-position-x: -50%;
+}
+@media (prefers-reduced-motion) {
+  .skeleton {
+    animation-duration: 15s;
+  }
+}
+@keyframes skeleton {
+  from {
+    background-position: 150%;
+  }
+  to {
+    background-position: -50%;
+  }
+}
 .stack {
     place-items: center;
     align-items: flex-end
@@ -4129,11 +4161,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;
@@ -4381,7 +4413,8 @@ details.collapse summary {
   padding-inline-start: var(--tab-padding, 1rem);
   padding-inline-end: var(--tab-padding, 1rem);
 }
-  .tab.tab-active:not(.tab-disabled):not([disabled]) {
+  .tab.tab-active:not(.tab-disabled):not([disabled]),
+  .tab:is(input:checked) {
   border-color: oklch(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 1;
   --tw-text-opacity: 1;
@@ -4392,11 +4425,11 @@ details.collapse summary {
 }
   .tab:focus-visible {
     outline: 2px solid currentColor;
-    outline-offset: -3px;
+    outline-offset: -5px;
   }
   .tab:focus-visible.tab-lifted {
-      border-end-end-radius: var(--tab-radius, 0.5rem);
-      border-end-start-radius: var(--tab-radius, 0.5rem);
+      border-end-end-radius: 0;
+      border-end-start-radius: 0;
     }
   /* disabled */
   .tab-disabled,
@@ -4429,7 +4462,8 @@ details.collapse summary {
   padding-inline-end: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
 }
-.tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
+.tab-lifted.tab-active:not(.tab-disabled):not([disabled]),
+  .tab-lifted:is(input:checked) {
     background-color: var(--tab-bg);
     border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
     border-inline-start-color: var(--tab-border-color);
@@ -4440,75 +4474,76 @@ details.collapse summary {
     padding-bottom: var(--tab-border, 1px);
     padding-top: 0;
   }
-.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before,
-    .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
+.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before, .tab-lifted:is(input:checked):before {
       z-index: 1;
       content: "";
       display: block;
       position: absolute;
-      width: var(--tab-radius, 0.5rem);
+      width: calc(100% + var(--tab-radius, 0.5rem) * 2);
       height: var(--tab-radius, 0.5rem);
       bottom: 0;
+      background-size: var(--tab-radius, 0.5rem);
+      background-position:
+        top left,
+        top right;
+      background-repeat: no-repeat;
       --tab-grad: calc(68% - var(--tab-border, 1px));
-      --tab-corner-bg: radial-gradient(
-        circle at var(--circle-pos),
+      --radius-start: radial-gradient(
+        circle at top left,
         transparent var(--tab-grad),
         var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
         var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
         var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
       );
+      --radius-end: radial-gradient(
+        circle at top right,
+        transparent var(--tab-grad),
+        var(--tab-border-color) calc(var(--tab-grad) + 0.3px),
+        var(--tab-border-color) calc(var(--tab-grad) + var(--tab-border, 1px)),
+        var(--tab-bg) calc(var(--tab-grad) + var(--tab-border, 1px) + 0.3px)
+      );
+      background-image: var(--radius-start), var(--radius-end);
     }
-.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
-      inset-inline-start: calc(var(--tab-radius, 0.5rem) * -1);
-      --circle-pos: top left;
-      background-image: var(--tab-corner-bg);
-    }
-[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
-        --circle-pos: top right;
-      }
-.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
-      inset-inline-end: calc(var(--tab-radius, 0.5rem) * -1);
-      --circle-pos: top right;
-      background-image: var(--tab-corner-bg);
-    }
-[dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
-        --circle-pos: top left;
-      }
-.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before {
-      background: none;
+.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):first-child:before, .tab-lifted:is(input:checked):first-child:before {
+      background-image: var(--radius-end);
+      background-position: top right;
     }
-.tab-lifted.tab-active:not(.tab-disabled):not([disabled]):last-child:after {
-      background: none;
+.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;
     }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled])
-  + .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
-    background: none;
+  + .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);
 }
-.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]) {
+.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]),
+  .tabs-boxed :is(input:checked) {
   --tw-bg-opacity: 1;
   background-color: oklch(var(--p) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: oklch(var(--pc) / var(--tw-text-opacity));
 }
-@media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover {
+@media(hover:hover) {.tabs-boxed .tab-active:not(.tab-disabled):not([disabled]):hover,
+  .tabs-boxed :is(input:checked):hover {
     --tw-text-opacity: 1;
     color: oklch(var(--pc) / var(--tw-text-opacity));
   }
 }
 .table {
-    border-radius: var(--rounded-box, 1rem);
     text-align: left;
     font-size: 0.875rem;
-    line-height: 1.25rem
+    line-height: 1.25rem;
+    border-radius: var(--rounded-box, 1rem)
 }
 :is([dir="rtl"] .table) {
     text-align: right
@@ -4560,12 +4595,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))
+      background-color: oklch(var(--b1) / var(--tw-bg-opacity));
+      border-radius: var(--rounded-btn, 0.5rem)
 }
   .textarea-bordered {
       --tw-border-opacity: 0.2
@@ -4650,6 +4685,52 @@ details.collapse summary {
       color: oklch(var(--bc) / var(--tw-placeholder-opacity));
       --tw-placeholder-opacity: 0.2
 }
+.timeline hr {
+    height: 0.25rem
+}
+:where(.timeline hr) {
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--b3) / var(--tw-bg-opacity))
+}
+:where(.timeline:has(.timeline-middle) hr):first-child {
+    border-start-end-radius: var(--rounded-badge, 1.9rem);
+    border-end-end-radius: var(--rounded-badge, 1.9rem);
+    border-start-start-radius: 0px;
+    border-end-start-radius: 0px
+}
+:where(.timeline:has(.timeline-middle) hr):last-child {
+    border-start-start-radius: var(--rounded-badge, 1.9rem);
+    border-end-start-radius: var(--rounded-badge, 1.9rem);
+    border-start-end-radius: 0px;
+    border-end-end-radius: 0px
+}
+:where(.timeline:not(:has(.timeline-middle)) :first-child hr:last-child) {
+    border-start-start-radius: var(--rounded-badge, 1.9rem);
+    border-end-start-radius: var(--rounded-badge, 1.9rem);
+    border-start-end-radius: 0px;
+    border-end-end-radius: 0px
+}
+:where(.timeline:not(:has(.timeline-middle)) :last-child hr:first-child) {
+    border-start-end-radius: var(--rounded-badge, 1.9rem);
+    border-end-end-radius: var(--rounded-badge, 1.9rem);
+    border-start-start-radius: 0px;
+    border-end-start-radius: 0px
+}
+.timeline-box {
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: oklch(var(--b3) / var(--tw-border-opacity));
+    --tw-bg-opacity: 1;
+    background-color: oklch(var(--b1) / var(--tw-bg-opacity));
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.5rem;
+    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)
+}
 .toast {
     gap: 0.5rem;
     padding: 1rem;
@@ -4677,12 +4758,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;