daisyui 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.20.0](https://github.com/saadeghi/daisyui/compare/v1.19.0...v1.20.0) (2021-12-26)
+
+
+### Features
+
+* support [checked=true] style on checkbox and toggle ([8131232](https://github.com/saadeghi/daisyui/commit/8131232836c145c23ed40707f4272fb00c6a3f1b))
+
 ## [1.19.0](https://github.com/saadeghi/daisyui/compare/v1.17.1...v1.19.0) (2021-12-22)
 
 

package/README.md

@@ -79,7 +79,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@1.18.0/dist/full.css" rel="stylesheet" type="text/css" />
+<link href="https://cdn.jsdelivr.net/npm/daisyui@1.19.0/dist/full.css" rel="stylesheet" type="text/css" />
 <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2/dist/tailwind.min.css" rel="stylesheet" type="text/css" />
 ```
 
@@ -207,6 +207,7 @@ Read the documents for more info:
   - [dailydev](https://app.daily.dev/posts/-4OPGw0te)
   - [Future Tech Blog (Japanese)](https://future-architect.github.io/articles/20211124a/)
 - Youtube videos
+  - [Supabase & Sveltekit - Build Twitter in 75 minutes](https://www.youtube.com/watch?v=mPQyckogDYc)
   - [Setup the Best Frontend JavaScript Stack - Svelte, Vite, TailwindCSS and DaisyUI](https://www.youtube.com/watch?v=mEBPN_9jTAE)
   - [Jamstack powered Image gallery with Cloudinary, Tailwind and DaisyUI](https://www.youtube.com/watch?v=Hpjq0D1vcpM)
   - [SvelteKit Crash Course w/ Tailwind CSS and DaisyUI, GraphQL and dynamic routes](https://www.youtube.com/watch?v=zH2qG9YwN3s)

package/dist/full.css

@@ -3194,7 +3194,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
 }
 
-.checkbox:checked{
+.checkbox:checked,.checkbox[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
   background-repeat:no-repeat;
@@ -3219,7 +3219,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
 }
 
-.checkbox-primary:checked{
+.checkbox-primary:checked,.checkbox-primary[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -3244,7 +3244,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
 }
 
-.checkbox-secondary:checked{
+.checkbox-secondary:checked,.checkbox-secondary[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -3269,7 +3269,7 @@ html{
   box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
 }
 
-.checkbox-accent:checked{
+.checkbox-accent:checked,.checkbox-accent[checked=true]{
   --tw-bg-opacity:1;
   background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
   --tw-border-opacity:1;
@@ -4774,14 +4774,14 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
 }
 
-.toggle:checked{
+.toggle:checked,.toggle[checked=true]{
   --chkbg:hsl(var(--bc));
   --tw-bg-opacity:1;
   --tw-border-opacity:1;
   box-shadow:var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
 }
 
-[dir=rtl] .toggle:checked{
+[dir=rtl] .toggle:checked,[dir=rtl] .toggle[checked=true]{
   box-shadow:calc(var(--handleoffset)*1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
 }
 
@@ -4789,7 +4789,7 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
 }
 
-.toggle-primary:checked{
+.toggle-primary:checked,.toggle-primary[checked=true]{
   --chkbg:hsl(var(--p));
   --tw-bg-opacity:1;
   background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
@@ -4804,7 +4804,7 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
 }
 
-.toggle-secondary:checked{
+.toggle-secondary:checked,.toggle-secondary[checked=true]{
   --chkbg:hsl(var(--s));
   --tw-bg-opacity:1;
   background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
@@ -4819,7 +4819,7 @@ html{
   --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
 }
 
-.toggle-accent:checked{
+.toggle-accent:checked,.toggle-accent[checked=true]{
   --chkbg:hsl(var(--a));
   --tw-bg-opacity:1;
   background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));

package/dist/styled.css

@@ -1702,10 +1702,12 @@
   .checkbox:focus-visible{
     box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
   }
-  .checkbox:checked{
+  .checkbox:checked,.checkbox[checked=true]{
     --tw-bg-opacity:1;
     background-color:hsla(var(--bc) / var(--tw-bg-opacity, 1));
     background-repeat:no-repeat;
+  }
+  .checkbox:checked,.checkbox[checked=true]{
     -webkit-animation:checkmark var(--animation-input, .2s)  ease-in-out;
             animation:checkmark var(--animation-input, .2s)  ease-in-out;
     background-image:linear-gradient(-45deg, transparent 65%, hsl(var(--chkbg)) 0), linear-gradient(45deg, transparent 75%, hsl(var(--chkbg)) 0), linear-gradient(-45deg, hsl(var(--chkbg)) 40%, transparent 0), linear-gradient(45deg, hsl(var(--chkbg)) 30%, hsl(var(--chkfg)) 0, hsl(var(--chkfg)) 40%, transparent 0), linear-gradient(-45deg, hsl(var(--chkfg)) 50%, hsl(var(--chkbg)) 0);
@@ -1723,7 +1725,7 @@
   .checkbox-primary:focus-visible{
       box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
-  .checkbox-primary:checked{
+  .checkbox-primary:checked,.checkbox-primary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -1744,7 +1746,7 @@
   .checkbox-secondary:focus-visible{
       box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
-  .checkbox-secondary:checked{
+  .checkbox-secondary:checked,.checkbox-secondary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -1765,7 +1767,7 @@
   .checkbox-accent:focus-visible{
       box-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
-  .checkbox-accent:checked{
+  .checkbox-accent:checked,.checkbox-accent[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -3391,20 +3393,26 @@
   .toggle:focus-visible{
     --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--bc));
   }
-  .toggle:checked{
-    --chkbg:hsl(var(--bc));
+  .toggle:checked,.toggle[checked=true]{
+    --chkbg:hsl(var(--bc))
+  }
+  .toggle:checked,.toggle[checked=true]{
     --tw-bg-opacity:1;
     --tw-border-opacity:1;
+  }
+  .toggle:checked,.toggle[checked=true]{
     box-shadow:var(--handleoffset) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
   }
-  [dir=rtl] .toggle:checked{
+  [dir=rtl] .toggle:checked,[dir=rtl] .toggle[checked=true]{
       box-shadow:calc(var(--handleoffset)*1) 0 0 2px hsl(var(--b1)) inset, 0 0 0 2px hsl(var(--b1)) inset, var(--focus-shadow);
     }
   .toggle-primary:focus-visible{
       --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--p));
     }
-  .toggle-primary:checked{
+  .toggle-primary:checked,.toggle-primary[checked=true]{
       --chkbg:hsl(var(--p));
+    }
+  .toggle-primary:checked,.toggle-primary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--p) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -3416,8 +3424,10 @@
   .toggle-secondary:focus-visible{
       --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--s));
     }
-  .toggle-secondary:checked{
+  .toggle-secondary:checked,.toggle-secondary[checked=true]{
       --chkbg:hsl(var(--s));
+    }
+  .toggle-secondary:checked,.toggle-secondary[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--s) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;
@@ -3429,8 +3439,10 @@
   .toggle-accent:focus-visible{
       --focus-shadow:0 0 0 2px hsl(var(--b1)), 0 0 0 4px hsl(var(--a));
     }
-  .toggle-accent:checked{
+  .toggle-accent:checked,.toggle-accent[checked=true]{
       --chkbg:hsl(var(--a));
+    }
+  .toggle-accent:checked,.toggle-accent[checked=true]{
       --tw-bg-opacity:1;
       background-color:hsla(var(--a) / var(--tw-bg-opacity, 1));
       --tw-border-opacity:1;