fix: adjust layers - drawer and collapse (#4183)

* move parts from card, carouse, and chat from modifier to component layer

* docs: remove a high z-index from drawer example

* move collapse open status classes to modifier layer to allow animating status icons

* move drawer-end class in modifier.placement layer for lower priority

Author: pdanpdan

packages/daisyui/src/components/card.css

@@ -79,15 +79,15 @@
 }
 
 .card-title {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply flex items-center gap-2;
     font-size: var(--cardtitle-fs, 1.125rem);
     font-weight: 600;
   }
 }
 
 .card-body {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply flex flex-auto flex-col gap-2;
     padding: var(--card-p, 1.5rem);
     font-size: var(--card-fs, 0.875rem);
@@ -99,7 +99,7 @@
 }
 
 .card-actions {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply flex flex-wrap items-start gap-2;
   }
 }

packages/daisyui/src/components/carousel.css

@@ -28,7 +28,7 @@
 }
 
 .carousel-item {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply box-content flex flex-none;
     scroll-snap-align: start;
   }

packages/daisyui/src/components/chat.css

@@ -75,20 +75,20 @@
 }
 
 .chat-image {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply row-span-2 self-end;
   }
 }
 
 .chat-header {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply row-start-1 flex gap-1;
     font-size: 0.6875rem;
   }
 }
 
 .chat-footer {
-  @layer daisyui.modifier {
+  @layer daisyui.component {
     @apply row-start-3 flex gap-1;
     font-size: 0.6875rem;
   }

packages/daisyui/src/components/collapse.css

@@ -83,6 +83,17 @@
       }
     }
 
+    > input:is([type="checkbox"], [type="radio"]) {
+      z-index: 1;
+      width: 100%;
+      padding: 1rem;
+      padding-inline-end: 3rem;
+      min-height: 1lh;
+      transition: background-color 0.2s ease-out;
+    }
+  }
+
+  @layer daisyui.modifier {
     &:is([open]) {
       &.collapse-arrow {
         > .collapse-title:after {
@@ -143,15 +154,6 @@
         content: "−";
       }
     }
-
-    > input:is([type="checkbox"], [type="radio"]) {
-      z-index: 1;
-      width: 100%;
-      padding: 1rem;
-      padding-inline-end: 3rem;
-      min-height: 1lh;
-      transition: background-color 0.2s ease-out;
-    }
   }
 }
 

packages/daisyui/src/components/drawer.css

@@ -72,7 +72,7 @@
 }
 
 .drawer-end {
-  @layer daisyui.modifier {
+  @layer daisyui.modifier.placement {
     grid-auto-columns: auto max-content;
 
     > .drawer-toggle {

packages/docs/src/routes/(routes)/components/drawer/+page.md

@@ -223,7 +223,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
   <div class="h-56 drawer-content">
     <!-- Page content here -->
   </div>
-  <div class="drawer-side is-drawer-close:overflow-visible h-full max-lg:z-1002">
+  <div class="drawer-side is-drawer-close:overflow-visible h-full">
     <label for="my-drawer-4" aria-label="close sidebar" class="drawer-overlay"></label>
     <div class="is-drawer-close:w-14 is-drawer-open:w-64 h-full bg-base-200 flex flex-col items-start">
       <ul class="menu w-full grow">
@@ -267,7 +267,7 @@ You can check/uncheck the checkbox using JavaScript or by clicking the `label` t
   <div class="$$drawer-content">
     <!-- Page content here -->
   </div>
-  
+
   <div class="$$drawer-side is-drawer-close:overflow-visible">
     <label for="my-drawer-4" aria-label="close sidebar" class="$$drawer-overlay"></label>
     <div class="is-drawer-close:w-14 is-drawer-open:w-64 bg-base-200 flex flex-col items-start min-h-full">