daisyui 3.9.3 → 4.0.0-alpha.2

package/dist/styled.css

@@ -13,7 +13,7 @@
         grid-auto-flow: column;
         grid-template-columns: auto minmax(auto,1fr);
         justify-items: start;
-        text-align: left
+        text-align: start
     }
 }
 .artboard {
@@ -109,17 +109,17 @@
   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;
-  min-height: 3rem;
   font-size: 0.875rem;
   line-height: 1em;
 }
@@ -159,8 +159,8 @@
 
 /* radio input and checkbox as button */
 
-.btn:is(input[type="checkbox"]),
-.btn:is(input[type="radio"]) {
+:where(.btn:is(input[type="checkbox"])),
+:where(.btn:is(input[type="radio"])) {
   width: auto;
   appearance: none;
 }
@@ -417,7 +417,7 @@
   .drawer-side {
   pointer-events: none;
   position: fixed;
-  left: 0px;
+  inset-inline-start: 0px;
   top: 0px;
   grid-column-start: 1;
   grid-row-start: 1;
@@ -453,7 +453,7 @@
       transform: translateX(-100%);
 }
   [dir="rtl"] .drawer-side > *:not(.drawer-overlay) {
-        transform: translateX(-100%);
+        transform: translateX(100%);
       }
   .drawer-toggle {
   position: fixed;
@@ -482,6 +482,9 @@
   .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
         transform: translateX(100%);
       }
+  [dir="rtl"] .drawer-end .drawer-toggle ~ .drawer-side > *:not(.drawer-overlay) {
+          transform: translateX(-100%);
+        }
   .drawer-end .drawer-toggle:checked ~ .drawer-side > *:not(.drawer-overlay) {
         transform: translateX(0%);
       }
@@ -501,16 +504,16 @@
   opacity: 0
 }
 .dropdown-end .dropdown-content {
-  right: 0px
+  inset-inline-end: 0px
 }
 .dropdown-left .dropdown-content {
   bottom: auto;
-  right: 100%;
+  inset-inline-end: 100%;
   top: 0px
 }
 .dropdown-right .dropdown-content {
   bottom: auto;
-  left: 100%;
+  inset-inline-start: 100%;
   top: 0px
 }
 .dropdown-bottom .dropdown-content {
@@ -547,13 +550,13 @@
 .file-input {
     height: 3rem;
     flex-shrink: 1;
-    padding-right: 1rem;
+    padding-inline-end: 1rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
     line-height: 2
 }
   .file-input::file-selector-button {
-    margin-right: 1rem;
+    margin-inline-end: 1rem;
     display: inline-flex;
     height: 100%;
     flex-shrink: 0;
@@ -790,10 +793,16 @@
   mask-size: 200%;
   mask-position: left;
 }
+:is([dir="rtl"] .mask-half-1) {
+  mask-position: right;
+}
 .mask-half-2 {
   mask-size: 200%;
   mask-position: right;
 }
+:is([dir="rtl"] .mask-half-2) {
+  mask-position: left;
+}
 .menu {
     display: flex;
     flex-direction: column;
@@ -1010,12 +1019,12 @@
     user-select: none;
     appearance: none;
     height: 3rem;
+    min-height: 3rem;
     padding-left: 1rem;
     padding-right: 2.5rem;
     font-size: 0.875rem;
     line-height: 1.25rem;
-    line-height: 2;
-    min-height: 3rem
+    line-height: 2
 }
 
   /* disabled */
@@ -1189,8 +1198,8 @@
     background-color: hsl(var(--b2) / var(--tw-bg-opacity))
 }
 .textarea {
-    flex-shrink: 1;
     min-height: 3rem;
+    flex-shrink: 1;
     padding-left: 1rem;
     padding-right: 1rem;
     padding-top: 0.5rem;
@@ -1210,13 +1219,13 @@
     flex-shrink: 0
 }
 .alert {
+  border-radius: var(--rounded-box, 1rem);
   border-width: 1px;
   --tw-border-opacity: 1;
   border-color: hsl(var(--b2) / var(--tw-border-opacity));
   padding: 1rem;
   --tw-text-opacity: 1;
   color: hsl(var(--bc) / var(--tw-text-opacity));
-  border-radius: var(--rounded-box, 1rem);
   --alert-bg: hsl(var(--b2));
   --alert-bg-mix: hsl(var(--b1));
   background-color: var(--alert-bg)
@@ -1264,14 +1273,14 @@
     border-color: hsl(var(--b1) / var(--tw-border-opacity))
 }
 .badge {
+    border-radius: var(--rounded-badge, 1.9rem);
     border-width: 1px;
     --tw-border-opacity: 1;
     border-color: hsl(var(--b2) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--b1) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--bc) / var(--tw-text-opacity));
-    border-radius: var(--rounded-badge, 1.9rem)
+    color: hsl(var(--bc) / var(--tw-text-opacity))
 }
   .badge-neutral {
     --tw-border-opacity: 1;
@@ -1451,7 +1460,7 @@
 
 [dir="rtl"] .breadcrumbs > ul > li + *:before,
 [dir="rtl"] .breadcrumbs > ol > li + *:before {
-  --tw-rotate: -45deg;
+  --tw-rotate: -135deg;
 }
 .btn {
   gap: 0.5rem;
@@ -2047,10 +2056,10 @@
 }
   .card.image-full:before {
     z-index: 10;
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: hsl(var(--n) / var(--tw-bg-opacity));
     opacity: 0.75;
-    border-radius: var(--rounded-box, 1rem);
 }
   .card.image-full > .card-body {
     z-index: 20;
@@ -2126,16 +2135,16 @@
     color: hsl(var(--erc) / var(--tw-text-opacity));
 }
   .chat-start .chat-bubble {
-    border-bottom-left-radius: 0px;
+    border-end-start-radius: 0px;
 }
   .chat-start .chat-bubble:before {
-      left: -0.749rem;
+      inset-inline-start: -0.749rem;
     }
   .chat-end .chat-bubble {
-    border-bottom-right-radius: 0px;
+    border-end-end-radius: 0px;
 }
   .chat-end .chat-bubble:before {
-      left: 99.9%;
+      inset-inline-start: 99.9%;
     }
 .checkbox {
   --chkbg: var(--bc);
@@ -2144,10 +2153,10 @@
   width: 1.5rem;
   cursor: pointer;
   appearance: none;
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: hsl(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0.2;
-  border-radius: var(--rounded-btn, 0.5rem);
 }
   .checkbox:focus-visible {
   outline-style: solid;
@@ -2389,22 +2398,6 @@
 .checkbox-mark {
   display: none;
 }
-
-[dir="rtl"] .checkbox:checked,
-    [dir="rtl"] .checkbox[checked="true"],
-    [dir="rtl"] .checkbox[aria-checked="true"] {
-      background-image: linear-gradient(45deg, transparent 65%, hsl(var(--chkbg)) 65.99%),
-        linear-gradient(-45deg, transparent 75%, hsl(var(--chkbg)) 75.99%),
-        linear-gradient(45deg, hsl(var(--chkbg)) 40%, transparent 40.99%),
-        linear-gradient(
-          -45deg,
-          hsl(var(--chkbg)) 30%,
-          hsl(var(--chkfg)) 30.99%,
-          hsl(var(--chkfg)) 40%,
-          transparent 40.99%
-        ),
-        linear-gradient(45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 50.99%);
-    }
 .collapse {
   width: 100%;
   border-radius: var(--rounded-box, 1rem);
@@ -2451,15 +2444,12 @@ details.collapse summary {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   transition-duration: 0.2s;
   top: 50%;
-  right: 1.4rem;
+  inset-inline-end: 1.4rem;
   content: "";
   transform-origin: 75% 75%;
   box-shadow: 2px 2px;
   pointer-events: none;
 }
-[dir="rtl"] .collapse-arrow > .collapse-title:after {
-  --tw-rotate: -45deg;
-}
 .collapse-plus > .collapse-title:after {
   position: absolute;
   display: block;
@@ -2470,7 +2460,7 @@ details.collapse summary {
   transition-duration: 300ms;
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
   top: 0.9rem;
-  right: 1.4rem;
+  inset-inline-end: 1.4rem;
   content: "+";
   pointer-events: none;
 }
@@ -2494,7 +2484,7 @@ details.collapse summary {
 :where(.collapse > input[type="radio"]) {
   width: 100%;
   padding: 1rem;
-  padding-right: 3rem;
+  padding-inline-end: 3rem;
   min-height: 3.75rem;
   transition: background-color 0.2s ease-out;
 }
@@ -2525,15 +2515,6 @@ details.collapse summary {
   --tw-rotate: 225deg;
   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));
 }
-[dir="rtl"] .collapse[open].collapse-arrow > .collapse-title:after,
-[dir="rtl"] .collapse-open.collapse-arrow > .collapse-title:after,
-[dir="rtl"] .collapse-arrow:focus:not(.collapse-close) .collapse-title:after,
-[dir="rtl"]
-  .collapse-arrow:not(.collapse-close)
-  input[type="checkbox"]:checked
-  ~ .collapse-title:after {
-  --tw-rotate: 135deg;
-}
 .collapse[open].collapse-plus > .collapse-title:after,
 .collapse-open.collapse-plus > .collapse-title:after,
 .collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
@@ -2619,6 +2600,7 @@ details.collapse summary {
 }
 .file-input {
     overflow: hidden;
+    border-radius: var(--rounded-btn, 0.5rem);
     border-width: 1px;
     border-color: hsl(var(--bc) / var(--tw-border-opacity));
     --tw-border-opacity: 0;
@@ -2626,7 +2608,6 @@ details.collapse summary {
     background-color: hsl(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;
@@ -2842,6 +2823,7 @@ details.collapse summary {
     padding: 1rem
 }
 .input {
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: hsl(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0;
@@ -2849,7 +2831,6 @@ details.collapse summary {
   background-color: hsl(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;
   } */
@@ -2959,12 +2940,13 @@ details.collapse summary {
   .join > :where(*:not(:first-child)) {
     margin-top: 0px;
     margin-bottom: 0px;
-    margin-left: -1px
+    margin-inline-start: -1px
 }
   .join-item:focus {
     isolation: isolate
 }
 .kbd {
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: hsl(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0.2;
@@ -2972,7 +2954,6 @@ details.collapse summary {
   background-color: hsl(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
@@ -3172,13 +3153,13 @@ details.collapse summary {
   height: 1px;
 }
 .menu :where(li ul) {
-  margin-left: 1rem;
-  padding-left: 0.5rem;
+  margin-inline-start: 1rem;
+  padding-inline-start: 0.5rem;
 }
 .menu :where(li ul):before {
   position: absolute;
   bottom: 0.75rem;
-  left: 0px;
+  inset-inline-start: 0px;
   top: 0.75rem;
   width: 1px;
   background-color: hsl(var(--bc) / 0.1);
@@ -3186,16 +3167,16 @@ 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;
   padding-bottom: 0.5rem;
-  text-align: left;
+  text-align: start;
   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);
   text-wrap: balance;
 }
 :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
@@ -3277,14 +3258,15 @@ details.collapse summary {
   color: hsl(var(--bc) / 0.4);
 }
 .mockup-code {
-      min-width: 18rem;
-      --tw-bg-opacity: 1;
-      background-color: hsl(var(--n) / var(--tw-bg-opacity));
-      padding-top: 1.25rem;
-      padding-bottom: 1.25rem;
-      --tw-text-opacity: 1;
-      color: hsl(var(--nc) / var(--tw-text-opacity));
-      border-radius: var(--rounded-box, 1rem);
+    min-width: 18rem;
+    border-radius: var(--rounded-box, 1rem);
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--n) / var(--tw-bg-opacity));
+    padding-top: 1.25rem;
+    padding-bottom: 1.25rem;
+    --tw-text-opacity: 1;
+    color: hsl(var(--nc) / var(--tw-text-opacity));
+    direction: ltr;
 }
     .mockup-code:before {
       content: "";
@@ -3300,7 +3282,7 @@ details.collapse summary {
         4.2em 0;
     }
     .mockup-code pre {
-      padding-right: 1.25rem;
+    padding-right: 1.25rem;
 }
     .mockup-code pre:before {
         content: "";
@@ -3312,8 +3294,10 @@ details.collapse summary {
         opacity: 0.5;
       }
   .mockup-window {
-      padding-top: 1.25rem;
-      border-radius: var(--rounded-box, 1rem);
+    display: flex;
+    flex-direction: column;
+    border-radius: var(--rounded-box, 1rem);
+    padding-top: 1.25rem;
 }
   .mockup-window:before {
       content: "";
@@ -3321,8 +3305,14 @@ details.collapse summary {
       display: block;
       aspect-ratio: 1 / 1;
       height: 0.75rem;
+      align-self: flex-start;
       border-radius: 9999px;
       opacity: 0.3;
+    }
+  :is([dir="rtl"] .mockup-window):before {
+    align-self: flex-end;
+}
+  .mockup-window:before {
       box-shadow:
         1.4em 0,
         2.8em 0,
@@ -3376,15 +3366,18 @@ details.collapse summary {
       margin-top: -25px;
     }
   .mockup-browser {
-      border-radius: var(--rounded-box, 1rem);
+    border-radius: var(--rounded-box, 1rem);
 }
   .mockup-browser .mockup-browser-toolbar {
-      margin-top: 0.75rem;
-      margin-bottom: 0.75rem;
-      display: inline-flex;
-      width: 100%;
-      align-items: center;
-      padding-right: 1.4em;
+    margin-top: 0.75rem;
+    margin-bottom: 0.75rem;
+    display: inline-flex;
+    width: 100%;
+    align-items: center;
+    padding-right: 1.4em;
+}
+  :is([dir="rtl"] .mockup-browser .mockup-browser-toolbar) {
+    flex-direction: row-reverse;
 }
   .mockup-browser .mockup-browser-toolbar:before {
         content: "";
@@ -3400,18 +3393,19 @@ details.collapse summary {
           4.2em 0;
       }
   .mockup-browser .mockup-browser-toolbar .input {
-      position: relative;
-      margin-left: auto;
-      margin-right: auto;
-      display: block;
-      height: 1.75rem;
-      width: 24rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      --tw-bg-opacity: 1;
-      background-color: hsl(var(--b2) / var(--tw-bg-opacity));
-      padding-left: 2rem;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+    display: block;
+    height: 1.75rem;
+    width: 24rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--b2) / var(--tw-bg-opacity));
+    padding-left: 2rem;
+        direction: ltr;
 }
   .mockup-browser .mockup-browser-toolbar .input:before {
           content: "";
@@ -3472,6 +3466,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: hsl(var(--b1) / var(--tw-bg-opacity));
   padding: 1.5rem;
@@ -3479,10 +3477,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 +3511,48 @@ details.collapse summary {
 }
 .progress {
     height: 0.5rem;
-    background-color: hsl(var(--bc) / 0.2);
     border-radius: var(--rounded-box, 1rem);
+    background-color: hsl(var(--bc) / 0.2);
 }
   .progress::-moz-progress-bar {
+    border-radius: var(--rounded-box, 1rem);
     --tw-bg-opacity: 1;
     background-color: hsl(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: hsl(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: hsl(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: hsl(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: hsl(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: hsl(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: hsl(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: hsl(var(--er) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress:indeterminate {
     --progress-color: hsl(var(--bc));
@@ -3585,13 +3579,13 @@ details.collapse summary {
     --progress-color: hsl(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: hsl(var(--bc) / var(--tw-bg-opacity));
-    border-radius: var(--rounded-box, 1rem);
 }
   .progress-primary::-webkit-progress-value {
     --tw-bg-opacity: 1;
@@ -3882,8 +3876,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 hsl(var(--b1)) inset, 0 0 0 2rem hsl(var(--range-shdw)) inset;
@@ -3894,23 +3888,23 @@ details.collapse summary {
   .range::-webkit-slider-runnable-track {
   height: 0.5rem;
   width: 100%;
-  background-color: hsl(var(--bc) / 0.1);
   border-radius: var(--rounded-box, 1rem);
+  background-color: hsl(var(--bc) / 0.1);
 }
   .range::-moz-range-track {
   height: 0.5rem;
   width: 100%;
-  background-color: hsl(var(--bc) / 0.1);
   border-radius: var(--rounded-box, 1rem);
+  background-color: hsl(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: hsl(var(--b1) / var(--tw-bg-opacity));
-  border-radius: var(--rounded-box, 1rem);
     appearance: none;
     -webkit-appearance: none;
     top: 50%;
@@ -3927,10 +3921,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: hsl(var(--b1) / var(--tw-bg-opacity));
-  border-radius: var(--rounded-box, 1rem);
     top: 50%;
     color: hsl(var(--range-shdw));
     --filler-size: 100rem;
@@ -4006,13 +4000,13 @@ details.collapse summary {
   }
 }
 .select {
+  border-radius: var(--rounded-btn, 0.5rem);
   border-width: 1px;
   border-color: hsl(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0;
   --tw-bg-opacity: 1;
   background-color: hsl(var(--b1) / var(--tw-bg-opacity));
   padding-right: 2.5rem;
-  border-radius: var(--rounded-btn, 0.5rem);
 }
   .select-bordered {
   --tw-border-opacity: 0.2;
@@ -4134,47 +4128,50 @@ details.collapse summary {
     opacity: 1
 }
 .stats {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--b1) / var(--tw-bg-opacity));
-    --tw-text-opacity: 1;
-    color: hsl(var(--bc) / var(--tw-text-opacity));
-    border-radius: var(--rounded-box, 1rem)
+  border-radius: var(--rounded-box, 1rem);
+  --tw-bg-opacity: 1;
+  background-color: hsl(var(--b1) / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: hsl(var(--bc) / var(--tw-text-opacity));
 }
 :where(.stats) > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-x-reverse: 0;
-    border-right-width: calc(1px * var(--tw-divide-x-reverse));
-    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(0px * var(--tw-divide-y-reverse))
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(1px * var(--tw-divide-x-reverse));
+  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
 }
 :where(.stats) {
-    overflow-x: auto
+  overflow-x: auto;
+}
+:is([dir="rtl"] .stats > :not([hidden]) ~ :not([hidden])) {
+  --tw-divide-x-reverse: 1;
 }
 .stat {
-    column-gap: 1rem;
-    border-color: hsl(var(--bc) / var(--tw-border-opacity));
-    --tw-border-opacity: 0.1;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    padding-top: 1rem;
-    padding-bottom: 1rem
+  column-gap: 1rem;
+  border-color: hsl(var(--bc) / var(--tw-border-opacity));
+  --tw-border-opacity: 0.1;
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
 }
 .stat-title {
-    color: hsl(var(--bc) / 0.6)
+  color: hsl(var(--bc) / 0.6);
 }
 .stat-value {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-    font-weight: 800
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  font-weight: 800;
 }
 .stat-desc {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    color: hsl(var(--bc) / 0.6)
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: hsl(var(--bc) / 0.6);
 }
 .stat-actions {
-    margin-top: 1rem
+  margin-top: 1rem;
 }
 /* .stat + .stat {
   @apply border-l border-base-content border-opacity-10;
@@ -4218,7 +4215,7 @@ details.collapse summary {
   --tw-text-opacity: 1;
   color: hsl(var(--bc) / var(--tw-text-opacity));
       content: "";
-      margin-left: -100%;
+      margin-inline-start: -100%;
 }
   /* } */
   .steps .step:after {
@@ -4380,8 +4377,8 @@ details.collapse summary {
   --tab-bg: hsl(var(--b1) / var(--tw-bg-opacity, 1));
   --tab-border-color: hsl(var(--b3) / var(--tw-bg-opacity, 1));
   color: var(--tab-color);
-  padding-left: var(--tab-padding, 1rem);
-  padding-right: var(--tab-padding, 1rem);
+  padding-inline-start: var(--tab-padding, 1rem);
+  padding-inline-end: var(--tab-padding, 1rem);
 }
   .tab.tab-active:not(.tab-disabled):not([disabled]) {
   border-color: hsl(var(--bc) / var(--tw-border-opacity));
@@ -4397,8 +4394,8 @@ details.collapse summary {
     outline-offset: -3px;
   }
   .tab:focus-visible.tab-lifted {
-      border-bottom-right-radius: var(--tab-radius, 0.5rem);
-      border-bottom-left-radius: var(--tab-radius, 0.5rem);
+      border-end-end-radius: var(--tab-radius, 0.5rem);
+      border-end-start-radius: var(--tab-radius, 0.5rem);
     }
   /* disabled */
   .tab-disabled,
@@ -4424,21 +4421,21 @@ details.collapse summary {
 .tab-lifted {
   border: var(--tab-border, 1px) solid transparent;
   border-width: 0 0 var(--tab-border, 1px) 0;
-  border-top-left-radius: var(--tab-radius, 0.5rem);
-  border-top-right-radius: var(--tab-radius, 0.5rem);
+  border-start-start-radius: var(--tab-radius, 0.5rem);
+  border-start-end-radius: var(--tab-radius, 0.5rem);
   border-bottom-color: var(--tab-border-color);
-  padding-left: var(--tab-padding, 1rem);
-  padding-right: var(--tab-padding, 1rem);
+  padding-inline-start: var(--tab-padding, 1rem);
+  padding-inline-end: var(--tab-padding, 1rem);
   padding-top: var(--tab-border, 1px);
 }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled]) {
     background-color: var(--tab-bg);
     border-width: var(--tab-border, 1px) var(--tab-border, 1px) 0 var(--tab-border, 1px);
-    border-left-color: var(--tab-border-color);
-    border-right-color: var(--tab-border-color);
+    border-inline-start-color: var(--tab-border-color);
+    border-inline-end-color: var(--tab-border-color);
     border-top-color: var(--tab-border-color);
-    padding-left: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
-    padding-right: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
+    padding-inline-start: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
+    padding-inline-end: calc(var(--tab-padding, 1rem) - var(--tab-border, 1px));
     padding-bottom: var(--tab-border, 1px);
     padding-top: 0;
   }
@@ -4461,20 +4458,18 @@ details.collapse summary {
       );
     }
 .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):before {
-      left: calc(var(--tab-radius, 0.5rem) * -1);
+      inset-inline-start: calc(var(--tab-radius, 0.5rem) * -1);
       --circle-pos: top left;
       background-image: var(--tab-corner-bg);
     }
-/* RTL quick fix */
 [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 {
-      right: calc(var(--tab-radius, 0.5rem) * -1);
+      inset-inline-end: calc(var(--tab-radius, 0.5rem) * -1);
       --circle-pos: top right;
       background-image: var(--tab-corner-bg);
     }
-/* RTL quick fix */
 [dir="rtl"] .tab-lifted.tab-active:not(.tab-disabled):not([disabled]):after {
         --circle-pos: top left;
       }
@@ -4489,10 +4484,10 @@ details.collapse summary {
     background: none;
   }
 .tabs-boxed {
+  border-radius: var(--rounded-btn, 0.5rem);
   --tw-bg-opacity: 1;
   background-color: hsl(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);
@@ -4509,10 +4504,13 @@ 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
 }
   .table :where(th, td) {
     padding-left: 1rem;
@@ -4561,12 +4559,12 @@ details.collapse summary {
     color: hsl(var(--bc) / 0.6)
 }
 .textarea {
+      border-radius: var(--rounded-btn, 0.5rem);
       border-width: 1px;
       border-color: hsl(var(--bc) / var(--tw-border-opacity));
       --tw-border-opacity: 0;
       --tw-bg-opacity: 1;
-      background-color: hsl(var(--b1) / var(--tw-bg-opacity));
-      border-radius: var(--rounded-btn, 0.5rem)
+      background-color: hsl(var(--b1) / var(--tw-bg-opacity))
 }
   .textarea-bordered {
       --tw-border-opacity: 0.2
@@ -4678,12 +4676,12 @@ details.collapse summary {
   width: 3rem;
   cursor: pointer;
   appearance: none;
+  border-radius: var(--rounded-badge, 1.9rem);
   border-width: 1px;
   border-color: hsl(var(--bc) / var(--tw-border-opacity));
   --tw-border-opacity: 0.2;
   background-color: hsl(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;