daisyui 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/styled.css

@@ -121,54 +121,40 @@
   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;
-}
-
-.btn-group > input[type="radio"].btn {
-  appearance: none;
+  padding: 0px
 }
 
-.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;
@@ -2050,22 +1968,9 @@ input.tab:checked + .tab-content,
     --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;
@@ -2075,6 +1980,7 @@ input.tab:checked + .tab-content,
   --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;
@@ -2083,9 +1989,11 @@ input.tab:checked + .tab-content,
     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));
@@ -2648,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;
@@ -4207,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