basecoat-css 0.3.4 → 0.3.5

package/dist/basecoat.css

@@ -381,42 +381,44 @@
 }
 
 /* Button Group */
-.button-group {
-  @apply inline-flex w-fit items-stretch isolate;
-  
-  > *:focus-visible,
-  > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
-    @apply relative z-10;
-  }
-
-  > hr[role='separator'] {
-    @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
-  }
-
-  &:not([data-orientation='vertical']) {
-    > *:not(:first-child),
-    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
-      @apply rounded-l-none border-l-0;
-    }
-    > *:not(:last-child),
-    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
-      @apply rounded-r-none;
+@layer components {
+  .button-group {
+    @apply inline-flex w-fit items-stretch isolate;
+    
+    > *:focus-visible,
+    > :is(.dropdown-menu, .popover, .select) > button:focus-visible {
+      @apply relative z-10;
     }
-  }  
-  &[data-orientation='vertical'] {
-    @apply flex-col;
 
     > hr[role='separator'] {
-      @apply w-auto h-px;
-    }
-    
-    > *:not(:first-child),
-    > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
-      @apply rounded-t-none border-t-0;
+      @apply w-0 h-auto self-stretch border border-input shrink-0 m-0;
     }
-    > *:not(:last-child),
-    > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
-      @apply rounded-b-none;
+
+    &:not([data-orientation='vertical']) {
+      > *:not(:first-child),
+      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        @apply rounded-l-none border-l-0;
+      }
+      > *:not(:last-child),
+      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        @apply rounded-r-none;
+      }
+    }  
+    &[data-orientation='vertical'] {
+      @apply flex-col;
+
+      > hr[role='separator'] {
+        @apply w-auto h-px;
+      }
+      
+      > *:not(:first-child),
+      > :is(.dropdown-menu, .popover, .select):not(:first-child) > button {
+        @apply rounded-t-none border-t-0;
+      }
+      > *:not(:last-child),
+      > :is(.dropdown-menu, .popover, .select):not(:last-child) > button {
+        @apply rounded-b-none;
+      }
     }
   }
 }
@@ -988,119 +990,121 @@
 }
 
 /* Sidebar */
-.sidebar {
-  &:not([data-sidebar-initialized]) {
-    @apply max-md:hidden;
-  }
-  &:not([aria-hidden]),
-  &[aria-hidden=false] {
-    @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
-  }
-  nav {
-    @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
-  }
-  & + * {
-    @apply transition-[margin] ease-in-out duration-300;
-  }
-  &:not([data-side]),
-  &[data-side=left] {
+@layer components {
+  .sidebar {
+    &:not([data-sidebar-initialized]) {
+      @apply max-md:hidden;
+    }
+    &:not([aria-hidden]),
+    &[aria-hidden=false] {
+      @apply max-md:bg-black/50 max-md:fixed max-md:inset-0 max-md:z-40;
+    }
     nav {
-      @apply left-0 border-r;
+      @apply bg-sidebar text-sidebar-foreground flex flex-col w-(--sidebar-mobile-width) md:w-(--sidebar-width) fixed inset-y-0 z-50 transition-transform ease-in-out duration-300;
     }
     & + * {
-      @apply relative md:ml-(--sidebar-width);
+      @apply transition-[margin] ease-in-out duration-300;
     }
-    &[aria-hidden=true] {
+    &:not([data-side]),
+    &[data-side=left] {
       nav {
-        @apply -translate-x-full;
+        @apply left-0 border-r;
       }
       & + * {
-        @apply md:ml-0;
+        @apply relative md:ml-(--sidebar-width);
+      }
+      &[aria-hidden=true] {
+        nav {
+          @apply -translate-x-full;
+        }
+        & + * {
+          @apply md:ml-0;
+        }
       }
     }
-  }
-  &[data-side=right] {
-    nav {
-      @apply right-0 border-l;
-    }
-    & + * {
-      @apply relative md:mr-(--sidebar-width);
-    }
-    &[aria-hidden=true] {
+    &[data-side=right] {
       nav {
-        @apply translate-x-full;
+        @apply right-0 border-l;
       }
       & + * {
-        @apply md:mr-0;
+        @apply relative md:mr-(--sidebar-width);
+      }
+      &[aria-hidden=true] {
+        nav {
+          @apply translate-x-full;
+        }
+        & + * {
+          @apply md:mr-0;
+        }
       }
     }
-  }
-  nav {
-    > header,
-    > footer {
-      @apply flex flex-col gap-2 p-2;
-    }
-    [role=separator] {
-      @apply border-sidebar-border mx-2 w-auto;
-    }
-    > section {
-      @apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
-
-      > [role=group] {
-        @apply relative flex w-full min-w-0 flex-col p-2;
+    nav {
+      > header,
+      > footer {
+        @apply flex flex-col gap-2 p-2;
       }
-      h3 {
-        @apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
+      [role=separator] {
+        @apply border-sidebar-border mx-2 w-auto;
       }
-      ul {
-        @apply flex w-full min-w-0 flex-col gap-1;
+      > section {
+        @apply flex min-h-0 flex-1 flex-col gap-2 overflow-y-auto;
 
-        li {
-          @apply relative;
+        > [role=group] {
+          @apply relative flex w-full min-w-0 flex-col p-2;
+        }
+        h3 {
+          @apply text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0;
+        }
+        ul {
+          @apply flex w-full min-w-0 flex-col gap-1;
 
-          > a,
-          > details > summary {
-            @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
+          li {
+            @apply relative;
 
-            &:not([data-variant]),
-            &[data-variant=default] {
-              @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
-            }
-            &[data-variant=outline] {
-              @apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
-            }
-            &:not([data-size]),
-            &[data-size=default] {
-              @apply h-8 text-sm;
-            }
-            &[data-size=sm] {
-              @apply h-7 text-xs;
-            }
-            &[data-size=lg] {
-              @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
+            > a,
+            > details > summary {
+              @apply flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&[aria-current=page]]:bg-sidebar-accent [&[aria-current=page]]:font-medium [&[aria-current=page]]:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0;
+
+              &:not([data-variant]),
+              &[data-variant=default] {
+                @apply hover:bg-sidebar-accent hover:text-sidebar-accent-foreground;
+              }
+              &[data-variant=outline] {
+                @apply bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))];
+              }
+              &:not([data-size]),
+              &[data-size=default] {
+                @apply h-8 text-sm;
+              }
+              &[data-size=sm] {
+                @apply h-7 text-xs;
+              }
+              &[data-size=lg] {
+                @apply h-12 text-sm group-data-[collapsible=icon]:p-0!;
+              }
             }
-          }
-          > details {
-            &:not([open]) {
+            > details {
+              &:not([open]) {
+                > summary {
+                  &::after {
+                    @apply -rotate-90;
+                  }
+                }
+              }
               > summary {
                 &::after {
-                  @apply -rotate-90;
+                  @apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
+                  @apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
                 }
               }
-            }
-            > summary {
-              &::after {
-                @apply content-[''] block size-3.5 bg-primary ml-auto transition-transform ease-linear;
-                @apply mask-[image:var(--chevron-down-icon)] mask-size-[1rem] mask-no-repeat mask-center;
+              &::details-content {
+                @apply px-3.5;
               }
             }
-            &::details-content {
-              @apply px-3.5;
-            }
           }
-        }
-        ul {
-          @apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
+          ul {
+            @apply border-sidebar-border flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 w-full;
+          }
         }
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecoat-css",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Tailwind CSS for Basecoat components",
   "author": {
     "name": "hunvreus",