basecoat-css 0.1.1 → 0.2.0-beta.1

package/dist/basecoat.css

@@ -161,7 +161,6 @@
     h2 {
       @apply col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight;
     }
-
     section {
       @apply text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed;
 
@@ -446,39 +445,84 @@
 /* Dialog */
 @layer components {
   .dialog {
-    [role='dialog'] {
-      @apply fixed inset-0 z-50 bg-black/50 opacity-0 invisible transition-all;
+    @apply inset-y-0 opacity-0 transition-all transition-discrete;
 
-      &:not([inert]),
-      &[inert='false'] {
-        @apply opacity-100 visible;
-        > article {
-          @apply opacity-100 scale-100 visible;
-        }
+    &:is([open],:popover-open) {
+      @apply opacity-100;
+
+      &::backdrop {
+        @apply opacity-100;
       }
       > article {
-        @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg opacity-0 scale-95 invisible transition-all max-h-[calc(100%-2rem)];
+        @apply scale-100;
+      }
 
-        > header {
-          @apply flex flex-col gap-2 text-center sm:text-left;
+      @starting-style {
+        @apply opacity-0;
 
-          > h2 {
-            @apply text-lg leading-none font-semibold;
-          }
-          > p {
-            @apply text-muted-foreground text-sm;
-          }
+        &::backdrop {
+          @apply opacity-0;
+        }
+        > article {
+          @apply scale-95;
         }
-        > section {
-          @apply flex-1 -mx-6 px-6;
+      }
+    }
+    &::backdrop {
+      @apply bg-black/50 opacity-0 transition-all transition-discrete;
+    }
+    > article {
+      @apply bg-background fixed top-[50%] left-[50%] z-50 flex flex-col w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg max-h-[calc(100%-2rem)];
+      @apply transition-all scale-95;
+
+      > header {
+        @apply flex flex-col gap-2 text-center sm:text-left;
+
+        > h2 {
+          @apply text-lg leading-none font-semibold;
         }
-        > footer {
-          @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+        > p {
+          @apply text-muted-foreground text-sm;
         }
+      }
+      > section {
+        @apply flex-1 -mx-6 px-6;
+      }
+      > footer {
+        @apply flex flex-col-reverse gap-2 sm:flex-row sm:justify-end;
+      }
+      > form[method='dialog'] {
+        @apply absolute top-4 right-4;
         > button {
-          @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+          @apply ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground  rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4;
+        }
+      }
+    }
+  }
+}
+
+/* Dropdown Menu */
+@layer components {
+  .dropdown-menu {
+    [popover].popover {
+      @apply p-1;
+      min-width: anchor-size(width);
+
+      [role='menuitem'],
+      [role='menuitemcheckbox'],
+      [role='menuitemradio'] {
+        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+        @apply focus-visible:bg-accent focus-visible:text-accent-foreground hover:bg-accent hover:text-accent-foreground;
+        &.active {
+          @apply bg-accent text-accent-foreground;
         }
       }
+      [role='menu'] [role='heading'] {
+        @apply flex px-2 py-1.5 text-sm font-medium;
+      }
+      [role='separator'] {
+        @apply border-border -mx-1 my-1;
+      }
     }
   }
 }
@@ -532,15 +576,68 @@
 
 /* Popover */
 @layer components {
-  .popover {
-    @apply relative inline-flex;
+  [popover].popover {
+    @apply absolute inset-auto bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto p-4 rounded-md border shadow-md z-50 visible opacity-0 scale-95 w-max transition-all transition-discrete; 
 
-    > [data-popover] {
-      @apply absolute bg-popover text-popover-foreground overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md z-50 visible opacity-100 scale-100 min-w-full w-max transition-all;
+    &:not([data-side]),
+    &[data-side='bottom'] {
+      @apply -translate-y-2;
+    }
+    &[data-side='top'] {
+      @apply translate-y-2;
+    }
+    &[data-side='left'] {
+      @apply translate-x-2;
+    }
+    &[data-side='right'] {
+      @apply -translate-x-2;
+    }
+    &:not([data-side]),
+    &[data-side='bottom'] {
+      @apply mt-1 top-[anchor(bottom)];
+    }
+    &[data-side='top'] {
+      @apply mb-1 bottom-[anchor(top)];
+    }
+    &[data-side='left'] {
+      @apply mr-1 right-[anchor(left)];
+    }
+    &[data-side='right'] {
+      @apply ml-1 left-[anchor(right)];
+    }
+    &:not([data-side]),
+    &[data-side='bottom'],
+    &[data-side='top'] {
+      &:not([data-align]),
+      &[data-align='start'] {
+        @apply left-[anchor(left)];
+      }
+      &[data-align='end'] {
+        @apply right-[anchor(right)];
+      }
+      &[data-align='center'] {
+        @apply left-[anchor(center)] -translate-x-1/2;
+      }
+    }
+    &[data-side='left'],
+    &[data-side='right'] {
+      &:not([data-align]),
+      &[data-align='start'] {
+        @apply top-[anchor(top)];
+      }
+      &[data-align='end'] {
+        @apply bottom-[anchor(bottom)];
+      }
+      &[data-align='center'] {
+        @apply top-[anchor(center)] -translate-y-1/2;
+      }
+    }
+    &:is(:popover-open) {
+      @apply opacity-100 scale-100 translate-x-0 translate-y-0;
+
+      @starting-style {
+        @apply opacity-0 scale-95;
 
-      &[aria-hidden='true'] {
-        @apply invisible opacity-0 scale-95;
-        
         &:not([data-side]),
         &[data-side='bottom'] {
           @apply -translate-y-2;
@@ -555,97 +652,8 @@
           @apply -translate-x-2;
         }
       }
-      &:not([data-side]),
-      &[data-side='bottom'] {
-        @apply mt-1 top-full;
-      }
-      &[data-side='top'] {
-        @apply mb-1 bottom-full;
-      }
-      &[data-side='left'] {
-        @apply mr-1 right-full;
-      }
-      &[data-side='right'] {
-        @apply ml-1 left-full;
-      }
-      &:not([data-side]),
-      &[data-side='bottom'],
-      &[data-side='top'] {
-        &:not([data-align]),
-        &[data-align='start'] {
-          @apply left-0;
-        }
-        &[data-align='end'] {
-          @apply right-0;
-        }
-        &[data-align='center'] {
-          @apply left-1/2 -translate-x-1/2;
-        }
-      }
-      &[data-side='left'],
-      &[data-side='right'] {
-        &:not([data-align]),
-        &[data-align='start'] {
-          @apply top-0;
-        }
-        &[data-align='end'] {
-          @apply bottom-0;
-        }
-        &[data-align='center'] {
-          @apply top-1/2 -translate-y-1/2;
-        }
-      }
-      [role='menuitem'],
-      [role='menuitemcheckbox'],
-      [role='menuitemradio'],
-      [role='option'] {
-        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
-      }
-      [role='menuitem'],
-      [role='menuitemcheckbox'],
-      [role='menuitemradio'] {
-        @apply focus-visible:bg-accent focus-visible:text-accent-foreground hover:bg-accent hover:text-accent-foreground;
-      }
-      [role='option'] {
-        @apply data-[focus]:bg-accent data-[focus]:text-accent-foreground pr-7.5;
-
-        &[aria-selected='true'] {
-          @apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
-        }
-      }
-      [role='menu'] [role='heading'] {
-        @apply flex px-2 py-1.5 text-sm font-medium;
-      }
-      [role='listbox'] [role='heading'] {
-        @apply flex text-muted-foreground px-2 py-1.5 text-xs;
-      }
-      [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
-        @apply hidden;
-      }
-      [role='separator'] {
-        @apply border-border -mx-1 my-1;
-      }
-      /* Combobox */
-      > header {
-        @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
-
-        svg {
-          @apply size-4 shrink-0 opacity-50;
-        }
-        input[role='combobox'] {
-          @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;
-        }
-      }
-      [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
-        @apply flex items-center justify-center p-6 text-sm truncate;
-      }
-      [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
-        @apply content-[attr(data-empty)];
-      }
-      [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
-        @apply content-['No_results_found'];
-      }
     }
+    
   }
 }
 
@@ -713,15 +721,67 @@
 /* Select */
 @layer components {
   .form select,
-  .select {
+  select.select {
     @apply appearance-none border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent pl-3 pr-9 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 h-9;
     @apply bg-[image:var(--chevron-down-icon-50)] bg-no-repeat bg-position-[center_right_0.75rem] bg-size-[1rem];
+
+    option,
+    optgroup {
+      @apply bg-popover text-popover-foreground;
+    }
+  }
+  *:not(select).select {
+    [popover].popover {
+      @apply p-1 min-w-[anchor-size(width)];
+
+      [role='option'] {
+        @apply aria-hidden:hidden [&_svg]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm pl-2 py-1.5 pr-7.5 text-sm outline-hidden select-none [&_svg]:shrink-0 [&_svg]:size-4 aria-disabled:opacity-50 aria-disabled:pointer-events-none disabled:opacity-50 disabled:pointer-events-none w-full truncate;
+        
+        &[aria-selected='true'] {
+          @apply bg-[image:var(--check-icon)] bg-no-repeat bg-position-[center_right_0.5rem] bg-size-[0.875rem];
+        }
+      }
+      [role='listbox'] [role='heading'] {
+        @apply flex text-muted-foreground px-2 py-1.5 text-xs;
+      }
+      [role='listbox'] [role='group']:not(:has([role='option']:not([aria-hidden='true']))) {
+        @apply hidden;
+      }
+      [role='separator'] {
+        @apply border-border -mx-1 my-1;
+      }
+      > header {
+        @apply flex h-9 items-center gap-2 border-b px-3 -mx-1 -mt-1 mb-1;
+
+        svg {
+          @apply size-4 shrink-0 opacity-50;
+        }
+        input[role='combobox'] {
+          @apply placeholder:text-muted-foreground flex h-10 flex-1 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50 min-w-0;
+        }
+      }
+      [role='listbox']:not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply flex items-center justify-center p-6 text-sm truncate;
+      }
+      [role='listbox'][data-empty]:not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply content-[attr(data-empty)];
+      }
+      [role='listbox']:not([data-empty]):not(:has([data-value]:not([aria-hidden='true'])))::before {
+        @apply content-['No_results_found'];
+      }
+    }
+
+    [role='option']:hover,
+    &[data-select-initialized] [role='option'].active,
+    &[data-select-initialized] [role='option']:focus-visible {
+      @apply bg-accent text-accent-foreground;
+    }
   }
 }
 
 /* Sidebar */
 .sidebar {
-  &[data-uninitialized] {
+  &:not([data-sidebar-initialized]) {
     @apply max-md:hidden;
   }
   &:not([aria-hidden]),
@@ -729,7 +789,10 @@
     @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 transition-transform ease-in-out duration-300 z-50;
+    @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] {
@@ -737,7 +800,7 @@
       @apply left-0 border-r;
     }
     & + * {
-      @apply relative md:ml-(--sidebar-width) transition-[margin] ease-in-out duration-300;
+      @apply relative md:ml-(--sidebar-width);
     }
     &[aria-hidden=true] {
       nav {
@@ -753,7 +816,7 @@
       @apply right-0 border-l;
     }
     & + * {
-      @apply relative md:mr-(--sidebar-width) transition-[margin] ease-in-out duration-300;
+      @apply relative md:mr-(--sidebar-width);
     }
     &[aria-hidden=true] {
       nav {
@@ -925,7 +988,27 @@
       @apply pointer-events-auto w-full mt-4 animate-[toast-up_0.3s_ease-in-out] grid  grid-rows-[1fr] transition-[grid-template-rows,opacity,margin] duration-300 ease-in-out;
       
       .toast-content {
-        @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden;
+        @apply text-popover-foreground text-[13px] bg-popover border shadow-lg rounded-lg overflow-hidden flex gap-2.5 p-3 items-center;
+
+        svg {
+          @apply size-4 shrink-0;
+        }
+        section {
+          h2 {
+            @apply font-medium tracking-tight;
+          }
+          p {
+            @apply text-muted-foreground;
+          }
+        }
+        footer {
+          @apply ml-auto flex flex-col gap-2;
+
+          [data-toast-action],
+          [data-toast-cancel] {
+            @apply h-6 px-2.5 text-xs;
+          }
+        }
       }
       &[aria-hidden='true'] {
         @apply grid-rows-[0fr] opacity-0 m-0 border-0 p-0 overflow-hidden;