daisyui 3.0.4 → 3.0.6

package/dist/styled.css

@@ -358,9 +358,11 @@
 }
 .collapse[open],
 .collapse-open,
-.collapse:focus:not(.collapse-close),
-.collapse:not(.collapse-close):has(input[type="checkbox"]:checked),
-.collapse:not(.collapse-close):has(input[type="radio"]:checked) {
+.collapse:focus:not(.collapse-close) {
+  grid-template-rows: auto 1fr;
+}
+.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
+.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
   grid-template-rows: auto 1fr;
 }
 .collapse[open] .collapse-content,
@@ -1452,6 +1454,7 @@
   --tw-text-opacity: 1;
   color: hsl(var(--bc) / var(--tw-text-opacity));
   text-decoration-line: none;
+  outline-color: hsl(var(--bc) / 1);
 }
   @media (hover: hover) {
       .btn:hover {
@@ -1471,7 +1474,6 @@
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
-  outline-color: hsl(var(--bc) / 1);
 }
   /* brand colors */
   .btn-primary {
@@ -1481,6 +1483,7 @@
   background-color: hsl(var(--p) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--pc) / var(--tw-text-opacity));
+  outline-color: hsl(var(--p) / 1);
 }
   @media (hover: hover) {
       .btn-primary:hover {
@@ -1495,9 +1498,6 @@
   border-color: hsl(var(--pf) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--pf) / var(--tw-bg-opacity));
-}
-  .btn-primary:focus-visible {
-  outline-color: hsl(var(--p) / 1);
 }
   .btn-secondary {
   --tw-border-opacity: 1;
@@ -1506,6 +1506,7 @@
   background-color: hsl(var(--s) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--sc) / var(--tw-text-opacity));
+  outline-color: hsl(var(--s) / 1);
 }
   @media (hover: hover) {
       .btn-secondary:hover {
@@ -1520,9 +1521,6 @@
   border-color: hsl(var(--sf) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--sf) / var(--tw-bg-opacity));
-}
-  .btn-secondary:focus-visible {
-  outline-color: hsl(var(--s) / 1);
 }
   .btn-accent {
   --tw-border-opacity: 1;
@@ -1531,6 +1529,7 @@
   background-color: hsl(var(--a) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--ac) / var(--tw-text-opacity));
+  outline-color: hsl(var(--a) / 1);
 }
   @media (hover: hover) {
       .btn-accent:hover {
@@ -1545,9 +1544,6 @@
   border-color: hsl(var(--af) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--af) / var(--tw-bg-opacity));
-}
-  .btn-accent:focus-visible {
-  outline-color: hsl(var(--a) / 1);
 }
   .btn-neutral {
   --tw-border-opacity: 1;
@@ -1556,6 +1552,7 @@
   background-color: hsl(var(--n) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--nc) / var(--tw-text-opacity));
+  outline-color: hsl(var(--n) / 1);
 }
   @media (hover: hover) {
       .btn-neutral:hover {
@@ -1570,9 +1567,6 @@
   border-color: hsl(var(--nf) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--nf) / var(--tw-bg-opacity));
-}
-  .btn-neutral:focus-visible {
-  outline-color: hsl(var(--n) / 1);
 }
   /* btn with state colors */
   .btn-info {
@@ -1582,6 +1576,7 @@
   background-color: hsl(var(--in) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--inc) / var(--tw-text-opacity));
+  outline-color: hsl(var(--in) / 1);
 }
   @media (hover: hover) {
       .btn-info:hover {
@@ -1596,9 +1591,6 @@
   border-color: hsl(var(--in) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--in) / var(--tw-bg-opacity));
-}
-  .btn-info:focus-visible {
-  outline-color: hsl(var(--in) / 1);
 }
   .btn-success {
   --tw-border-opacity: 1;
@@ -1607,6 +1599,7 @@
   background-color: hsl(var(--su) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--suc) / var(--tw-text-opacity));
+  outline-color: hsl(var(--su) / 1);
 }
   @media (hover: hover) {
       .btn-success:hover {
@@ -1621,9 +1614,6 @@
   border-color: hsl(var(--su) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--su) / var(--tw-bg-opacity));
-}
-  .btn-success:focus-visible {
-  outline-color: hsl(var(--su) / 1);
 }
   .btn-warning {
   --tw-border-opacity: 1;
@@ -1632,6 +1622,7 @@
   background-color: hsl(var(--wa) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--wac) / var(--tw-text-opacity));
+  outline-color: hsl(var(--wa) / 1);
 }
   @media (hover: hover) {
       .btn-warning:hover {
@@ -1646,9 +1637,6 @@
   border-color: hsl(var(--wa) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--wa) / var(--tw-bg-opacity));
-}
-  .btn-warning:focus-visible {
-  outline-color: hsl(var(--wa) / 1);
 }
   .btn-error {
   --tw-border-opacity: 1;
@@ -1657,6 +1645,7 @@
   background-color: hsl(var(--er) / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: hsl(var(--erc) / var(--tw-text-opacity));
+  outline-color: hsl(var(--er) / 1);
 }
   @media (hover: hover) {
       .btn-error:hover {
@@ -1671,18 +1660,16 @@
   border-color: hsl(var(--er) / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: hsl(var(--er) / var(--tw-bg-opacity));
-}
-  .btn-error:focus-visible {
-  outline-color: hsl(var(--er) / 1);
 }
   /* glass */
   .btn.glass {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-color: currentColor;
 }
   @media (hover: hover) {
-      .btn.glass:hover{
+      .btn.glass:hover {
         --glass-opacity: 25%;
         --glass-border-opacity: 15%;
       }
@@ -1691,9 +1678,6 @@
       --glass-opacity: 25%;
       --glass-border-opacity: 15%;
     }
-  .btn.glass:focus-visible {
-  outline-color: currentColor;
-}
   /* btn variants */
   .btn-ghost {
   border-width: 1px;
@@ -1703,6 +1687,7 @@
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-color: currentColor;
 }
   @media (hover: hover) {
       .btn-ghost:hover {
@@ -1715,9 +1700,6 @@
   --tw-border-opacity: 0;
   background-color: hsl(var(--bc) / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.2;
-}
-  .btn-ghost:focus-visible {
-  outline-color: currentColor;
 }
   .btn-link {
   border-color: transparent;
@@ -1728,6 +1710,7 @@
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline-color: currentColor;
 }
   @media (hover: hover) {
       .btn-link:hover {
@@ -1740,9 +1723,6 @@
   border-color: transparent;
   background-color: transparent;
   text-decoration-line: underline;
-}
-  .btn-link:focus-visible {
-  outline-color: currentColor;
 }
   /* outline */
   .btn-outline {
@@ -2429,8 +2409,8 @@ details.collapse summary {
   outline-offset: 2px;
 }
 .collapse:has(.collapse-title:focus-visible),
-.collapse:has(input[type="checkbox"]:focus-visible),
-.collapse:has(input[type="radio"]:focus-visible) {
+.collapse:has(> input[type="checkbox"]:focus-visible),
+.collapse:has(> input[type="radio"]:focus-visible) {
   outline-style: solid;
   outline-width: 2px;
   outline-offset: 2px;
@@ -2566,6 +2546,11 @@ details.collapse summary {
   .drawer-toggle:checked ~ .drawer-side > .drawer-overlay {
         background-color: hsl(0 0% 0%/0.4);
       }
+  .drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+}
 .dropdown:is(:not(details)) .dropdown-content {
   transform-origin: top;
   --tw-scale-x: .95;
@@ -3170,19 +3155,23 @@ details.collapse summary {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     border-radius: var(--rounded-btn, 0.5rem);
 }
-  .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)).focus,
-    .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):focus,
-    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)).focus,
-    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):focus {
+  .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active).focus,
+    .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):focus,
+    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active).focus,
+    .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):focus {
     cursor: pointer;
     background-color: hsl(var(--bc) / 0.1);
+    --tw-text-opacity: 1;
+    color: hsl(var(--bc) / var(--tw-text-opacity));
     outline: 2px solid transparent;
     outline-offset: 2px;
 }
   @media (hover: hover) {
-      .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):hover {
+      .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, .menu :where(li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
         cursor: pointer;
         background-color: hsl(var(--bc) / 0.1);
+        --tw-text-opacity: 1;
+        color: hsl(var(--bc) / var(--tw-text-opacity));
         outline: 2px solid transparent;
         outline-offset: 2px;
     }
@@ -3341,11 +3330,12 @@ details.collapse summary {
   transition-property: transform, opacity, visibility;
   overflow-y: hidden;
   overscroll-behavior: contain;
-  background-color: rgba(0, 0, 0, 0.3);
-}
-.modal::backdrop {
-  background: transparent;
 }
+  .modal:not(dialog),
+  .modal::backdrop {
+    background-color: rgba(0, 0, 0, 0.3);
+    animation: modal-pop 0.2s ease-out;
+  }
 .modal-backdrop {
   z-index: -1;
   grid-column-start: 1;
@@ -3395,132 +3385,144 @@ details.collapse summary {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+@keyframes modal-pop {
+  0% {
+    opacity: 0;
+  }
+}
 .navbar {
   padding: var(--navbar-padding, 0.5rem);
   min-height: 4rem;
   width: 100%;
 }
 .progress {
-  height: 0.5rem;
-  border-radius: var(--rounded-box, 1rem);
+    height: 0.5rem;
+    border-radius: var(--rounded-box, 1rem);
 }
   .progress::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--n) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--n) / var(--tw-bg-opacity));
 }
   .progress-primary::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--p) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--p) / var(--tw-bg-opacity));
 }
   .progress-secondary::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--s) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--s) / var(--tw-bg-opacity));
 }
   .progress-accent::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--a) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--a) / var(--tw-bg-opacity));
 }
   .progress-info::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--in) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--in) / var(--tw-bg-opacity));
 }
   .progress-success::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--su) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--su) / var(--tw-bg-opacity));
 }
   .progress-warning::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--wa) / var(--tw-bg-opacity));
 }
   .progress-error::-moz-progress-bar {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--er) / var(--tw-bg-opacity));
-}
-  .progress:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--n) / var(--tw-bg-opacity));
-}
-  .progress-primary:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--p) / var(--tw-bg-opacity));
-}
-  .progress-secondary:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--s) / var(--tw-bg-opacity));
-}
-  .progress-accent:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--a) / var(--tw-bg-opacity));
-}
-  .progress-info:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--in) / var(--tw-bg-opacity));
-}
-  .progress-success:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--su) / var(--tw-bg-opacity));
-}
-  .progress-warning:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
-}
-  .progress-error:indeterminate::after {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--er) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--er) / var(--tw-bg-opacity));
 }
+  .progress:indeterminate {
+    --progress-color: hsl(var(--n));
+  }
+  .progress-primary:indeterminate {
+    --progress-color: hsl(var(--p));
+  }
+  .progress-secondary:indeterminate {
+    --progress-color: hsl(var(--s));
+  }
+  .progress-accent:indeterminate {
+    --progress-color: hsl(var(--a));
+  }
+  .progress-info:indeterminate {
+    --progress-color: hsl(var(--in));
+  }
+  .progress-success:indeterminate {
+    --progress-color: hsl(var(--su));
+  }
+  .progress-warning:indeterminate {
+    --progress-color: hsl(var(--wa));
+  }
+  .progress-error:indeterminate {
+    --progress-color: hsl(var(--er));
+  }
   .progress::-webkit-progress-bar {
-  background-color: hsl(var(--n) / var(--tw-bg-opacity));
-  --tw-bg-opacity: 0.2;
-  border-radius: var(--rounded-box, 1rem);
+    background-color: hsl(var(--n) / 0.2);
+    border-radius: var(--rounded-box, 1rem);
 }
   .progress::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--nf) / var(--tw-bg-opacity));
-  border-radius: var(--rounded-box, 1rem);
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--nf) / var(--tw-bg-opacity));
+    border-radius: var(--rounded-box, 1rem);
 }
   .progress-primary::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--p) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--p) / var(--tw-bg-opacity));
 }
   .progress-secondary::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--s) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--s) / var(--tw-bg-opacity));
 }
   .progress-accent::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--a) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--a) / var(--tw-bg-opacity));
 }
   .progress-info::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--in) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--in) / var(--tw-bg-opacity));
 }
   .progress-success::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--su) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--su) / var(--tw-bg-opacity));
 }
   .progress-warning::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--wa) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--wa) / var(--tw-bg-opacity));
 }
   .progress-error::-webkit-progress-value {
-  --tw-bg-opacity: 1;
-  background-color: hsl(var(--er) / var(--tw-bg-opacity));
+    --tw-bg-opacity: 1;
+    background-color: hsl(var(--er) / var(--tw-bg-opacity));
 }
 
-.progress:indeterminate::after {
-  content: "";
-  position: absolute;
-  top: 0px;
-  bottom: 0px;
-  left: -40%;
-  width: 33.333333%;
-  border-radius: var(--rounded-box, 1rem);
-  animation: progress-loading 5s infinite ease-in-out;
+.progress:indeterminate {
+  background-image: repeating-linear-gradient(
+    90deg,
+    var(--progress-color) -1%,
+    var(--progress-color) 10%,
+    transparent 10%,
+    transparent 90%
+  );
+  background-size: 200%;
+  background-position-x: 15%;
+  animation: progress-loading 5s ease-in-out infinite;
+}
+
+.progress:indeterminate::-moz-progress-bar {
+    background-color: hsl(var(--n) / 0.2);
+  background-image: repeating-linear-gradient(
+    90deg,
+    var(--progress-color) -1%,
+    var(--progress-color) 10%,
+    transparent 10%,
+    transparent 90%
+  );
+  background-size: 200%;
+  background-position-x: 15%;
+  animation: progress-loading 5s ease-in-out infinite;
 }
 
 @keyframes progress-loading {
   50% {
-    left: 107%;
+    background-position-x: -115%;
   }
 }
 .radial-progress {
@@ -4610,7 +4612,7 @@ details.collapse summary {
   color: hsl(var(--ac) / var(--tw-text-opacity));
 }
   .toggle-success:focus-visible {
-  outline-color: hsl(var(--in) / 1);
+  outline-color: hsl(var(--su) / 1);
 }
   .toggle-success:checked,
     .toggle-success[checked="true"],
@@ -4623,7 +4625,7 @@ details.collapse summary {
   color: hsl(var(--suc) / var(--tw-text-opacity));
 }
   .toggle-warning:focus-visible {
-  outline-color: hsl(var(--su) / 1);
+  outline-color: hsl(var(--wa) / 1);
 }
   .toggle-warning:checked,
     .toggle-warning[checked="true"],
@@ -4636,7 +4638,7 @@ details.collapse summary {
   color: hsl(var(--wac) / var(--tw-text-opacity));
 }
   .toggle-info:focus-visible {
-  outline-color: hsl(var(--wa) / 1);
+  outline-color: hsl(var(--in) / 1);
 }
   .toggle-info:checked,
     .toggle-info[checked="true"],