daisyui 3.0.4 → 3.0.6

package/README.md

@@ -54,7 +54,7 @@ Loading CSS files from CDN is not recommended for production. It's better to ins
 
 ```html
 <link
-  href="https://cdn.jsdelivr.net/npm/daisyui@3.0.3/dist/full.css"
+  href="https://cdn.jsdelivr.net/npm/daisyui@3.0.5/dist/full.css"
   rel="stylesheet"
   type="text/css" />
 <script src="https://cdn.tailwindcss.com"></script>

package/dist/full.css

@@ -1716,7 +1716,8 @@ html {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--b2) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--bc) / var(--tw-text-opacity))}
+    color: hsl(var(--bc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--bc) / 1)}
 .btn-disabled,
   .btn[disabled],
   .btn:disabled {
@@ -1943,9 +1944,10 @@ html {
     cursor: unset}
 .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,
 .collapse-open .collapse-content,
@@ -2239,9 +2241,11 @@ html {
         --tw-scale-x: 1;
         --tw-scale-y: 1;
         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))}
-    .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}
     .tab[disabled],
@@ -2594,7 +2598,6 @@ html {
     overscroll-behavior: contain;
     z-index: 999;
     background-color: transparent;
-    background-color: rgba(0, 0, 0, 0.3);
     transition-duration: 200ms;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-property: transform, opacity, visibility;
@@ -3150,129 +3153,119 @@ html {
 .btn:focus-visible {
     outline-style: solid;
     outline-width: 2px;
-    outline-offset: 2px;
-    outline-color: hsl(var(--bc) / 1)}
+    outline-offset: 2px}
 .btn-primary {
     --tw-border-opacity: 1;
     border-color: hsl(var(--p) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--p) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--pc) / var(--tw-text-opacity))}
+    color: hsl(var(--pc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--p) / 1)}
 .btn-primary.btn-active {
     --tw-border-opacity: 1;
     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;
     border-color: hsl(var(--s) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--s) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--sc) / var(--tw-text-opacity))}
+    color: hsl(var(--sc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--s) / 1)}
 .btn-secondary.btn-active {
     --tw-border-opacity: 1;
     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;
     border-color: hsl(var(--a) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--a) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--ac) / var(--tw-text-opacity))}
+    color: hsl(var(--ac) / var(--tw-text-opacity));
+    outline-color: hsl(var(--a) / 1)}
 .btn-accent.btn-active {
     --tw-border-opacity: 1;
     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;
     border-color: hsl(var(--n) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--n) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--nc) / var(--tw-text-opacity))}
+    color: hsl(var(--nc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--n) / 1)}
 .btn-neutral.btn-active {
     --tw-border-opacity: 1;
     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-info {
     --tw-border-opacity: 1;
     border-color: hsl(var(--in) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--inc) / var(--tw-text-opacity))}
+    color: hsl(var(--inc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--in) / 1)}
 .btn-info.btn-active {
     --tw-border-opacity: 1;
     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;
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--su) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--suc) / var(--tw-text-opacity))}
+    color: hsl(var(--suc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--su) / 1)}
 .btn-success.btn-active {
     --tw-border-opacity: 1;
     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;
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--wa) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--wac) / var(--tw-text-opacity))}
+    color: hsl(var(--wac) / var(--tw-text-opacity));
+    outline-color: hsl(var(--wa) / 1)}
 .btn-warning.btn-active {
     --tw-border-opacity: 1;
     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;
     border-color: hsl(var(--er) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--erc) / var(--tw-text-opacity))}
+    color: hsl(var(--erc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--er) / 1)}
 .btn-error.btn-active {
     --tw-border-opacity: 1;
     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)}
 .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)}
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    outline-color: currentColor}
 .btn.glass.btn-active {
     --glass-opacity: 25%;
     --glass-border-opacity: 15%}
-.btn.glass:focus-visible {
-    outline-color: currentColor}
 .btn-ghost {
     border-width: 1px;
     border-color: transparent;
@@ -3280,13 +3273,12 @@ html {
     color: currentColor;
     --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)}
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    outline-color: currentColor}
 .btn-ghost.btn-active {
     --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;
     background-color: transparent;
@@ -3295,13 +3287,12 @@ html {
     text-decoration-line: underline;
     --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)}
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    outline-color: currentColor}
 .btn-link.btn-active {
     border-color: transparent;
     background-color: transparent;
     text-decoration-line: underline}
-.btn-link:focus-visible {
-    outline-color: currentColor}
 .btn-outline {
     border-color: currentColor;
     background-color: transparent;
@@ -3683,8 +3674,8 @@ details.collapse summary::-webkit-details-marker {
     outline-offset: 2px;
     outline-color: hsl(var(--bc) / 1)}
 .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;
@@ -3781,6 +3772,10 @@ details.collapse summary::-webkit-details-marker {
     cursor: pointer;
     background-color: transparent;
     transition: background-color 0.2s cubic-bezier(0, 0, 0.58, 1)}
+.drawer-toggle:focus-visible ~ .drawer-content label.drawer-button {
+    outline-style: solid;
+    outline-width: 2px;
+    outline-offset: 2px}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -4133,12 +4128,14 @@ details.collapse summary::-webkit-details-marker {
     width: 1px;
     background-color: hsl(var(--bc) / 0.1);
     content: ""}
-.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}
 .menu :where(li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):active,
@@ -4244,8 +4241,10 @@ details.collapse summary::-webkit-details-marker {
     overflow: hidden;
     border-radius: 40px;
     margin-top: -25px}
-.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;
@@ -4266,6 +4265,9 @@ details.collapse summary::-webkit-details-marker {
     --tw-space-x-reverse: 0;
     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}}
 .progress::-moz-progress-bar {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--n) / var(--tw-bg-opacity))}
@@ -4290,41 +4292,34 @@ details.collapse summary::-webkit-details-marker {
 .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));
-    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-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))}
+.progress:indeterminate {
+    --progress-color: hsl(var(--n));
+    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-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;
+    background-color: hsl(var(--n) / 0.2);
     border-radius: var(--rounded-box, 1rem)}
 .progress::-webkit-progress-value {
     --tw-bg-opacity: 1;
@@ -4351,9 +4346,21 @@ details.collapse summary::-webkit-details-marker {
 .progress-error::-webkit-progress-value {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity))}
+.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%}}
 .radio:focus-visible {
     outline-style: solid;
     outline-width: 2px;
@@ -5006,7 +5013,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     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"],
     .toggle-success[aria-checked="true"] {
@@ -5017,7 +5024,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     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"],
     .toggle-warning[aria-checked="true"] {
@@ -5028,7 +5035,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     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"],
     .toggle-info[aria-checked="true"] {
@@ -22087,6 +22094,8 @@ details.collapse summary::-webkit-details-marker {
 .divider-vertical:after {
     height: 0.125rem;
     width: 100%}
+.drawer-open > .drawer-toggle {
+    display: none}
 .drawer-open > .drawer-toggle ~ .drawer-side {
     pointer-events: auto;
     visibility: visible;
@@ -22920,12 +22929,14 @@ details.collapse summary::-webkit-details-marker {
     width: max-content}
 .tooltip.tooltip-open:before,
 .tooltip.tooltip-open:after,
-.tooltip:has(:focus-visible):after,
-.tooltip:has(:focus-visible):before,
 .tooltip:hover:before,
 .tooltip:hover:after {
     opacity: 1;
     transition-delay: 75ms}
+.tooltip:has(:focus-visible):after,
+.tooltip:has(:focus-visible):before {
+    opacity: 1;
+    transition-delay: 75ms}
 .tooltip:not([data-tip]):hover:before,
 .tooltip:not([data-tip]):hover:after {
     visibility: hidden;
@@ -23110,56 +23121,52 @@ details.collapse summary::-webkit-details-marker {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--inc) / var(--tw-text-opacity))}
+    color: hsl(var(--inc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--in) / 1)}
 .hover\:btn-info:hover.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--in) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity))}
-.hover\:btn-info:hover:focus-visible {
-    outline-color: hsl(var(--in) / 1)}
 .hover\:btn-success:hover {
     --tw-border-opacity: 1;
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--su) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--suc) / var(--tw-text-opacity))}
+    color: hsl(var(--suc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--su) / 1)}
 .hover\:btn-success:hover.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--su) / var(--tw-bg-opacity))}
-.hover\:btn-success:hover:focus-visible {
-    outline-color: hsl(var(--su) / 1)}
 .hover\:btn-warning:hover {
     --tw-border-opacity: 1;
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--wa) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--wac) / var(--tw-text-opacity))}
+    color: hsl(var(--wac) / var(--tw-text-opacity));
+    outline-color: hsl(var(--wa) / 1)}
 .hover\:btn-warning:hover.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
-.hover\:btn-warning:hover:focus-visible {
-    outline-color: hsl(var(--wa) / 1)}
 .hover\:btn-error:hover {
     --tw-border-opacity: 1;
     border-color: hsl(var(--er) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--erc) / var(--tw-text-opacity))}
+    color: hsl(var(--erc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--er) / 1)}
 .hover\:btn-error:hover.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--er) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity))}
-.hover\:btn-error:hover:focus-visible {
-    outline-color: hsl(var(--er) / 1)}
 .hover\:btn-success:hover.btn-outline {
     --tw-text-opacity: 1;
     color: hsl(var(--su) / var(--tw-text-opacity))}
@@ -23368,18 +23375,14 @@ details.collapse summary::-webkit-details-marker {
 .hover\:progress-error:hover::-moz-progress-bar {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity))}
-.hover\:progress-info:hover:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--in) / var(--tw-bg-opacity))}
-.hover\:progress-success:hover:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--su) / var(--tw-bg-opacity))}
-.hover\:progress-warning:hover:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
-.hover\:progress-error:hover:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--er) / var(--tw-bg-opacity))}
+.hover\:progress-info:hover:indeterminate {
+    --progress-color: hsl(var(--in))}
+.hover\:progress-success:hover:indeterminate {
+    --progress-color: hsl(var(--su))}
+.hover\:progress-warning:hover:indeterminate {
+    --progress-color: hsl(var(--wa))}
+.hover\:progress-error:hover:indeterminate {
+    --progress-color: hsl(var(--er))}
 .hover\:progress-info:hover::-webkit-progress-value {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity))}
@@ -23525,7 +23528,7 @@ details.collapse summary::-webkit-details-marker {
 .hover\:textarea-error:hover:focus {
     outline-color: hsl(var(--er) / 1)}
 .hover\:toggle-success:hover:focus-visible {
-    outline-color: hsl(var(--in) / 1)}
+    outline-color: hsl(var(--su) / 1)}
 .hover\:toggle-success:hover:checked,.hover\:toggle-success:hover[checked="true"],.hover\:toggle-success:hover[aria-checked="true"] {
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-border-opacity: 0.1;
@@ -23534,7 +23537,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     color: hsl(var(--suc) / var(--tw-text-opacity))}
 .hover\:toggle-warning:hover:focus-visible {
-    outline-color: hsl(var(--su) / 1)}
+    outline-color: hsl(var(--wa) / 1)}
 .hover\:toggle-warning:hover:checked,.hover\:toggle-warning:hover[checked="true"],.hover\:toggle-warning:hover[aria-checked="true"] {
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-border-opacity: 0.1;
@@ -23543,7 +23546,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     color: hsl(var(--wac) / var(--tw-text-opacity))}
 .hover\:toggle-info:hover:focus-visible {
-    outline-color: hsl(var(--wa) / 1)}
+    outline-color: hsl(var(--in) / 1)}
 .hover\:toggle-info:hover:checked,.hover\:toggle-info:hover[checked="true"],.hover\:toggle-info:hover[aria-checked="true"] {
     border-color: hsl(var(--in) / var(--tw-border-opacity));
     --tw-border-opacity: 0.1;
@@ -23724,56 +23727,52 @@ details.collapse summary::-webkit-details-marker {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--inc) / var(--tw-text-opacity))}
+    color: hsl(var(--inc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--in) / 1)}
 .focus\:btn-info:focus.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--in) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity))}
-.focus\:btn-info:focus:focus-visible {
-    outline-color: hsl(var(--in) / 1)}
 .focus\:btn-success:focus {
     --tw-border-opacity: 1;
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--su) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--suc) / var(--tw-text-opacity))}
+    color: hsl(var(--suc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--su) / 1)}
 .focus\:btn-success:focus.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--su) / var(--tw-bg-opacity))}
-.focus\:btn-success:focus:focus-visible {
-    outline-color: hsl(var(--su) / 1)}
 .focus\:btn-warning:focus {
     --tw-border-opacity: 1;
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--wa) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--wac) / var(--tw-text-opacity))}
+    color: hsl(var(--wac) / var(--tw-text-opacity));
+    outline-color: hsl(var(--wa) / 1)}
 .focus\:btn-warning:focus.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
-.focus\:btn-warning:focus:focus-visible {
-    outline-color: hsl(var(--wa) / 1)}
 .focus\:btn-error:focus {
     --tw-border-opacity: 1;
     border-color: hsl(var(--er) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity));
     --tw-text-opacity: 1;
-    color: hsl(var(--erc) / var(--tw-text-opacity))}
+    color: hsl(var(--erc) / var(--tw-text-opacity));
+    outline-color: hsl(var(--er) / 1)}
 .focus\:btn-error:focus.btn-active {
     --tw-border-opacity: 1;
     border-color: hsl(var(--er) / var(--tw-border-opacity));
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity))}
-.focus\:btn-error:focus:focus-visible {
-    outline-color: hsl(var(--er) / 1)}
 .focus\:btn-success:focus.btn-outline {
     --tw-text-opacity: 1;
     color: hsl(var(--su) / var(--tw-text-opacity))}
@@ -23982,18 +23981,14 @@ details.collapse summary::-webkit-details-marker {
 .focus\:progress-error:focus::-moz-progress-bar {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--er) / var(--tw-bg-opacity))}
-.focus\:progress-info:focus:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--in) / var(--tw-bg-opacity))}
-.focus\:progress-success:focus:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--su) / var(--tw-bg-opacity))}
-.focus\:progress-warning:focus:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--wa) / var(--tw-bg-opacity))}
-.focus\:progress-error:focus:indeterminate::after {
-    --tw-bg-opacity: 1;
-    background-color: hsl(var(--er) / var(--tw-bg-opacity))}
+.focus\:progress-info:focus:indeterminate {
+    --progress-color: hsl(var(--in))}
+.focus\:progress-success:focus:indeterminate {
+    --progress-color: hsl(var(--su))}
+.focus\:progress-warning:focus:indeterminate {
+    --progress-color: hsl(var(--wa))}
+.focus\:progress-error:focus:indeterminate {
+    --progress-color: hsl(var(--er))}
 .focus\:progress-info:focus::-webkit-progress-value {
     --tw-bg-opacity: 1;
     background-color: hsl(var(--in) / var(--tw-bg-opacity))}
@@ -24139,7 +24134,7 @@ details.collapse summary::-webkit-details-marker {
 .focus\:textarea-error:focus:focus {
     outline-color: hsl(var(--er) / 1)}
 .focus\:toggle-success:focus:focus-visible {
-    outline-color: hsl(var(--in) / 1)}
+    outline-color: hsl(var(--su) / 1)}
 .focus\:toggle-success:focus:checked,.focus\:toggle-success:focus[checked="true"],.focus\:toggle-success:focus[aria-checked="true"] {
     border-color: hsl(var(--su) / var(--tw-border-opacity));
     --tw-border-opacity: 0.1;
@@ -24148,7 +24143,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     color: hsl(var(--suc) / var(--tw-text-opacity))}
 .focus\:toggle-warning:focus:focus-visible {
-    outline-color: hsl(var(--su) / 1)}
+    outline-color: hsl(var(--wa) / 1)}
 .focus\:toggle-warning:focus:checked,.focus\:toggle-warning:focus[checked="true"],.focus\:toggle-warning:focus[aria-checked="true"] {
     border-color: hsl(var(--wa) / var(--tw-border-opacity));
     --tw-border-opacity: 0.1;
@@ -24157,7 +24152,7 @@ details.collapse summary::-webkit-details-marker {
     --tw-text-opacity: 1;
     color: hsl(var(--wac) / var(--tw-text-opacity))}
 .focus\:toggle-info:focus:focus-visible {
-    outline-color: hsl(var(--wa) / 1)}
+    outline-color: hsl(var(--in) / 1)}
 .focus\:toggle-info:focus:checked,.focus\:toggle-info:focus[checked="true"],.focus\:toggle-info:focus[aria-checked="true"] {
     border-color: hsl(var(--in) / var(--tw-border-opacity));
     --tw-border-opacity: 0.1;