pretttier

src/components/styled/collapse.css

@@ -69,15 +69,19 @@ details.collapse summary {
 .collapse-content {
   @apply px-4;
   cursor: unset;
-  transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  transition:
+    padding 0.2s ease-out,
+    background-color 0.2s ease-out;
 }
 .collapse[open] :where(.collapse-content),
 .collapse-open :where(.collapse-content),
 .collapse:focus:not(.collapse-close) :where(.collapse-content),
 .collapse:not(.collapse-close) :where(input[type="checkbox"]:checked ~ .collapse-content),
 .collapse:not(.collapse-close) :where(input[type="radio"]:checked ~ .collapse-content) {
   @apply pb-4;
-  transition: padding 0.2s ease-out, background-color 0.2s ease-out;
+  transition:
+    padding 0.2s ease-out,
+    background-color 0.2s ease-out;
 }
 
 .collapse[open].collapse-arrow .collapse-title:after,

src/components/styled/mockup.css

@@ -4,7 +4,10 @@
     &:before {
       content: "";
       @apply mb-4 block h-3 w-3 rounded-full opacity-30;
-      box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
+      box-shadow:
+        1.4em 0,
+        2.8em 0,
+        4.2em 0;
     }
     pre {
       @apply pr-5;
@@ -25,7 +28,10 @@
     &:before {
       content: "";
       @apply mb-4 block h-3 aspect-square rounded-full opacity-30;
-      box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
+      box-shadow:
+        1.4em 0,
+        2.8em 0,
+        4.2em 0;
     }
   }
   &-phone {
@@ -82,7 +88,10 @@
       &:before {
         content: "";
         @apply mr-[4.8rem] inline-block h-3 aspect-square rounded-full opacity-30;
-        box-shadow: 1.4em 0, 2.8em 0, 4.2em 0;
+        box-shadow:
+          1.4em 0,
+          2.8em 0,
+          4.2em 0;
       }
       .input {
         @apply pl-8 relative block w-96 h-7 mx-auto bg-base-200 text-ellipsis whitespace-nowrap overflow-hidden;

src/components/styled/radio.css

@@ -8,7 +8,9 @@
   &[aria-checked="true"] {
     @apply bg-base-content;
     animation: radiomark var(--animation-input, 0.2s) ease-out;
-    box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
+    box-shadow:
+      0 0 0 4px hsl(var(--b1)) inset,
+      0 0 0 4px hsl(var(--b1)) inset;
   }
   &-primary {
     --chkbg: var(--p);
@@ -94,13 +96,19 @@
 
 @keyframes radiomark {
   0% {
-    box-shadow: 0 0 0 12px hsl(var(--b1)) inset, 0 0 0 12px hsl(var(--b1)) inset;
+    box-shadow:
+      0 0 0 12px hsl(var(--b1)) inset,
+      0 0 0 12px hsl(var(--b1)) inset;
   }
   50% {
-    box-shadow: 0 0 0 3px hsl(var(--b1)) inset, 0 0 0 3px hsl(var(--b1)) inset;
+    box-shadow:
+      0 0 0 3px hsl(var(--b1)) inset,
+      0 0 0 3px hsl(var(--b1)) inset;
   }
   100% {
-    box-shadow: 0 0 0 4px hsl(var(--b1)) inset, 0 0 0 4px hsl(var(--b1)) inset;
+    box-shadow:
+      0 0 0 4px hsl(var(--b1)) inset,
+      0 0 0 4px hsl(var(--b1)) inset;
   }
 }
 

src/components/styled/range.css

@@ -24,7 +24,9 @@
     transform: translateY(-50%);
     --filler-size: 100rem;
     --filler-offset: 0.6rem;
-    box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
+    box-shadow:
+      0 0 0 3px hsl(var(--range-shdw)) inset,
+      var(--focus-shadow, 0 0),
       calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
   }
   &::-moz-range-thumb {
@@ -33,7 +35,9 @@
     color: hsl(var(--range-shdw));
     --filler-size: 100rem;
     --filler-offset: 0.5rem;
-    box-shadow: 0 0 0 3px hsl(var(--range-shdw)) inset, var(--focus-shadow, 0 0),
+    box-shadow:
+      0 0 0 3px hsl(var(--range-shdw)) inset,
+      var(--focus-shadow, 0 0),
       calc(var(--filler-size) * -1 - var(--filler-offset)) 0 0 var(--filler-size);
   }
   &-primary {

src/components/styled/select.css

@@ -5,8 +5,12 @@
   }
   background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
     linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: calc(100% - 20px) calc(1px + 50%), calc(100% - 16px) calc(1px + 50%);
-  background-size: 4px 4px, 4px 4px;
+  background-position:
+    calc(100% - 20px) calc(1px + 50%),
+    calc(100% - 16px) calc(1px + 50%);
+  background-size:
+    4px 4px,
+    4px 4px;
   background-repeat: no-repeat;
   &:focus {
     @apply outline outline-2 outline-offset-2 outline-base-content/20;
@@ -72,5 +76,7 @@
 }
 
 [dir="rtl"] .select {
-  background-position: calc(0% + 12px) calc(1px + 50%), calc(0% + 16px) calc(1px + 50%);
+  background-position:
+    calc(0% + 12px) calc(1px + 50%),
+    calc(0% + 16px) calc(1px + 50%);
 }

src/components/styled/toggle.css

@@ -4,8 +4,12 @@
   --handleoffsetcalculator: calc(var(--handleoffset) * -1);
   --togglehandleborder: 0 0;
   @apply h-6 w-12 cursor-pointer appearance-none border border-base-content border-opacity-20 bg-base-content bg-opacity-50 rounded-badge;
-  transition: background, box-shadow var(--animation-input, 0.2s) ease-out;
-  box-shadow: var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset,
+  transition:
+    background,
+    box-shadow var(--animation-input, 0.2s) ease-out;
+  box-shadow:
+    var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,
+    0 0 0 2px var(--tglbg) inset,
     var(--togglehandleborder);
   [dir="rtl"] & {
     --handleoffsetcalculator: calc(var(--handleoffset) * 1);
@@ -24,11 +28,15 @@
   }
   &:indeterminate {
     @apply border-opacity-100 bg-opacity-100;
-    box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
-      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
+    box-shadow:
+      calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+      calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+      0 0 0 2px var(--tglbg) inset;
     [dir="rtl"] & {
-      box-shadow: calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
-        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, 0 0 0 2px var(--tglbg) inset;
+      box-shadow:
+        calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset,
+        calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset,
+        0 0 0 2px var(--tglbg) inset;
     }
   }
   &-primary {

src/components/unstyled/collapse.css

@@ -35,4 +35,4 @@
 .collapse:not(.collapse-close) input[type="checkbox"]:checked ~ .collapse-content,
 .collapse:not(.collapse-close) input[type="radio"]:checked ~ .collapse-content {
   @apply visible min-h-fit;
-}
+}

src/components/unstyled/radial-progress.css

@@ -19,8 +19,9 @@
 }
 .radial-progress:before {
   @apply inset-0;
-  background: radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness)
-      var(--thickness) no-repeat,
+  background:
+    radial-gradient(farthest-side, currentColor 98%, #0000) top/var(--thickness) var(--thickness)
+      no-repeat,
     conic-gradient(currentColor calc(var(--value) * 1%), #0000 0);
   -webkit-mask: radial-gradient(
     farthest-side,

src/docs/src/app.html

@@ -1,9 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script>try{document.documentElement.setAttribute('data-theme',localStorage.getItem('theme'));}catch(e){}</script>
+    <script>
+      try {
+        document.documentElement.setAttribute("data-theme", localStorage.getItem("theme"))
+      } catch (e) {}
+    </script>
     %sveltekit.head%
   </head>
   <body>

src/experiments/compare/login-form/bootstrap/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/experiments/compare/login-form/daisyui/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />

src/experiments/compare/login-form/tailwind/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />