daisyui 4.0.0-alpha.4 → 4.0.0-alpha.6

package/dist/full.css

@@ -1749,12 +1749,6 @@ html {
     width: 3rem;
     border-radius: 9999px;
     padding: 0px}
-.btn-group {
-    display: inline-flex}
-.btn-group > input[type="radio"].btn {
-    appearance: none}
-.btn-group > input[type="radio"].btn:before {
-    content: attr(data-title)}
 :where(.btn:is(input[type="checkbox"])),
 :where(.btn:is(input[type="radio"])) {
     width: auto;
@@ -2416,61 +2410,6 @@ html {
     --tw-bg-opacity: 1;
     background-color: oklch(var(--b1) / var(--tw-bg-opacity));
     border-radius: var(--rounded-btn, 0.5rem)}
-.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}
-.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;
@@ -3045,18 +2984,21 @@ input.tab:checked + .tab-content,
     position: relative;
     display: grid;
     align-items: center;
-    grid-template-rows: 1fr auto 1fr;
-    grid-template-columns: 1fr auto 1fr}
+    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) {
-    grid-template-rows: min-content auto 1fr}
+    --timeline-row-start: min-content}
 :where(.timeline:not(:has(.timeline-end)) li) {
-    grid-template-rows: 1fr auto min-content}
+    --timeline-row-end: min-content}
 :where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
-    grid-template-rows: min-content auto min-content}
+    --timeline-row-start: min-content;
+    --timeline-row-end: min-content}
 .timeline hr {
     width: 100%;
     border-width: 0px;
     height: 0.25rem}
+.timeline-snap-icon li {
+    --timeline-col-start: 0.5rem}
 :where(.timeline hr):first-child {
     grid-column-start: 1;
     grid-row-start: 2}
@@ -3516,18 +3458,6 @@ input.tab:checked + .tab-content,
     --tw-bg-opacity: 0.2;
     color: oklch(var(--bc) / var(--tw-text-opacity));
     --tw-text-opacity: 0.2}
-.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)}
 .btn:is(input[type="checkbox"]:checked),
 .btn:is(input[type="radio"]:checked) {
     --tw-border-opacity: 1;
@@ -3886,7 +3816,7 @@ details.collapse summary::-webkit-details-marker {
 .divider:not(:empty) {
     gap: 1rem}
 .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;
     outline-width: 2px;
@@ -4863,6 +4793,31 @@ details.collapse summary::-webkit-details-marker {
 [dir="rtl"] .select {
     background-position: 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%}}
 :where(.stats) > :not([hidden]) ~ :not([hidden]) {
     --tw-divide-x-reverse: 0;
     border-right-width: calc(1px * var(--tw-divide-x-reverse));
@@ -23211,10 +23166,6 @@ details.collapse summary::-webkit-details-marker {
     width: 4rem;
     border-radius: 9999px;
     padding: 0px}
-.btn-group-horizontal {
-    flex-direction: row}
-.btn-group-vertical {
-    flex-direction: column}
 .card-side {
     align-items: stretch;
     flex-direction: row}
@@ -23675,14 +23626,16 @@ details.collapse summary::-webkit-details-marker {
 .timeline-vertical {
     flex-direction: column}
 :where(.timeline-vertical li) {
-    grid-template-rows: 1fr auto 1fr;
+    --timeline-row-start: 1fr;
+    --timeline-row-end: 1fr;
     justify-items: center}
 :where(.timeline-vertical:not(:has(.timeline-start)) li) {
-    grid-template-columns: min-content auto 1fr}
+    --timeline-col-start: min-content}
 :where(.timeline-vertical:not(:has(.timeline-end)) li) {
-    grid-template-columns: 1fr auto min-content}
+    --timeline-col-end: min-content}
 :where(.timeline-vertical:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
-    grid-template-columns: min-content auto min-content}
+    --timeline-col-start: min-content;
+    --timeline-col-end: min-content}
 .timeline-vertical hr {
     height: 100%}
 :where(.timeline-vertical hr):first-child {
@@ -23705,17 +23658,21 @@ details.collapse summary::-webkit-details-marker {
     grid-row-end: 4;
     align-self: center;
     justify-self: start}
+.timeline-vertical.timeline-snap-icon li {
+    --timeline-row-start: 0.5rem}
 .timeline-horizontal {
     flex-direction: row}
 :where(.timeline-horizontal li) {
-    grid-template-columns: 1fr auto 1fr;
+    --timeline-col-start: 1fr;
+    --timeline-col-end: 1fr;
     align-items: center}
 :where(.timeline-horizontal:not(:has(.timeline-start)) li) {
-    grid-template-rows: min-content auto 1fr}
+    --timeline-row-start: min-content}
 :where(.timeline-horizontal:not(:has(.timeline-end)) li) {
-    grid-template-rows: 1fr auto min-content}
+    --timeline-row-end: min-content}
 :where(.timeline-horizontal:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
-    grid-template-rows: min-content auto min-content}
+    --timeline-row-start: min-content;
+    --timeline-row-end: min-content}
 .timeline-horizontal hr {
     width: 100%}
 :where(.timeline-horizontal hr):first-child {
@@ -23738,6 +23695,8 @@ details.collapse summary::-webkit-details-marker {
     grid-row-end: 4;
     align-self: flex-start;
     justify-self: center}
+.timeline-horizontal.timeline-snap-icon li {
+    --timeline-col-start: 0.5rem}
 :where(.toast) {
     bottom: 0px;
     inset-inline-end: 0px;
@@ -25484,17 +25443,6 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     color: oklch(var(--erc) / var(--tw-text-opacity))}
 @media (min-width: 640px) {
-    .sm\:input-group-md {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        line-height: 2}
-    .sm\:input-group-lg {
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-        line-height: 2}
-    .sm\:input-group-sm {
-        font-size: 0.875rem;
-        line-height: 2rem}
     .sm\:stats {
         display: inline-grid;
         --tw-bg-opacity: 1;
@@ -25521,17 +25469,6 @@ details.collapse summary::-webkit-details-marker {
     :is([dir="rtl"] .sm\:stats > :not([hidden]) ~ :not([hidden])) {
         --tw-divide-x-reverse: 1}}
 @media (min-width: 768px) {
-    .md\:input-group-md {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        line-height: 2}
-    .md\:input-group-lg {
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-        line-height: 2}
-    .md\:input-group-sm {
-        font-size: 0.875rem;
-        line-height: 2rem}
     .md\:stats {
         display: inline-grid;
         --tw-bg-opacity: 1;
@@ -25558,17 +25495,6 @@ details.collapse summary::-webkit-details-marker {
     :is([dir="rtl"] .md\:stats > :not([hidden]) ~ :not([hidden])) {
         --tw-divide-x-reverse: 1}}
 @media (min-width: 1024px) {
-    .lg\:input-group-md {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        line-height: 2}
-    .lg\:input-group-lg {
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-        line-height: 2}
-    .lg\:input-group-sm {
-        font-size: 0.875rem;
-        line-height: 2rem}
     .lg\:stats {
         display: inline-grid;
         --tw-bg-opacity: 1;
@@ -25595,17 +25521,6 @@ details.collapse summary::-webkit-details-marker {
     :is([dir="rtl"] .lg\:stats > :not([hidden]) ~ :not([hidden])) {
         --tw-divide-x-reverse: 1}}
 @media (min-width: 1280px) {
-    .xl\:input-group-md {
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        line-height: 2}
-    .xl\:input-group-lg {
-        font-size: 1.125rem;
-        line-height: 1.75rem;
-        line-height: 2}
-    .xl\:input-group-sm {
-        font-size: 0.875rem;
-        line-height: 2rem}
     .xl\:stats {
         display: inline-grid;
         --tw-bg-opacity: 1;

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;
@@ -1255,22 +1173,26 @@ input.tab:checked + .tab-content,
   position: relative;
   display: grid;
   align-items: center;
-  grid-template-rows: 1fr auto 1fr;
-  grid-template-columns: 1fr auto 1fr;
+  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) {
-  grid-template-rows: min-content auto 1fr;
+  --timeline-row-start: min-content;
 }
 :where(.timeline:not(:has(.timeline-end)) li) {
-  grid-template-rows: 1fr auto min-content;
+  --timeline-row-end: min-content;
 }
 :where(.timeline:not(:has(.timeline-start)):not(:has(.timeline-end)) li) {
-  grid-template-rows: min-content auto min-content;
+  --timeline-row-start: min-content;
+  --timeline-row-end: min-content;
 }
 .timeline hr {
   width: 100%;
   border-width: 0px;
 }
+.timeline-snap-icon li {
+  --timeline-col-start: 0.5rem;
+}
 :where(.timeline hr):first-child {
   grid-column-start: 1;
   grid-row-start: 2;
@@ -2050,22 +1972,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 +1984,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 +1993,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 +2560,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 +4119,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