basecoat-css 0.2.1 → 0.2.3

package/README.md

@@ -8,42 +8,51 @@ Your project must have [Tailwind CSS](https://tailwindcss.com/docs/installation)
 
 ## Installation
 
-You can install `basecoat-css` using your preferred package manager:
+Install with any package manager:
 
 ```bash
-# npm
-npm install basecoat-css
+npm install basecoat-css # or pnpm add / yarn add / bun add
+```
 
-# yarn
-yarn add basecoat-css
+## Usage
 
-# pnpm
-pnpm add basecoat-css
+Add it just after Tailwind in your stylesheet:
 
-# bun
-bun add basecoat-css
+```css
+@import "tailwindcss";
+@import "basecoat-css";
 ```
 
-Alternatively, you can download the `basecoat.css` file directly from the [GitHub repository](https://github.com/hunvreus/basecoat/blob/main/src/css/basecoat.css) (or the `dist/basecoat.css` file from this package after installation) and include it in your project.
+That's it, you can use any Basecoat class (`btn`, `card`, `input`, etc) in your markup.
 
-## Usage
+### (Optional) JavaScript files
 
-After installation, import `basecoat-css` into your main CSS file. Make sure to import it **after** Tailwind CSS and **before** any custom theme overrides.
+Some interactive components (Dropdown Menu, Popover, Select, Sidebar, Tabs, Toast) need some JavaScript.
 
-```css
-/* Your main CSS file (e.g., styles.css) */
+With a build tool (ESM):
+
+```js
+import 'basecoat-css/all';
+```
+
+Or cherry-pick the components you need:
 
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+```js
+import 'basecoat-css/tabs';
+import 'basecoat-css/popover';
+```
 
-@import "basecoat-css"; /* Or the path to basecoat.css if manually added */
+Without a build tool, copy the files from `node_modules`:
 
-/* Your custom styles or theme overrides (optional) */
-/* @import "your-theme.css"; */
+```bash
+npx copyfiles -u 1 "node_modules/basecoat-css/dist/js/**/*" public/js/basecoat
 ```
 
-Once imported, you can start using Basecoat's component classes in your HTML.
+Then reference what you need, e.g.
+
+```html
+<script src="/js/basecoat/tabs.min.js" defer></script>
+```
 
 ## Documentation
 

package/dist/basecoat.cdn.css

@@ -2502,7 +2502,6 @@
   .dropdown-menu {
     position: relative;
     display: inline-flex;
-    padding: calc(var(--spacing) * 1);
     [data-popover] {
       padding: calc(var(--spacing) * 1);
       min-width: anchor-size(width);
@@ -2554,28 +2553,30 @@
         & svg {
           color: var(--color-muted-foreground);
         }
-        &:hover {
-          @media (hover: hover) {
+        &:not([aria-disabled='true']) {
+          &:hover {
+            @media (hover: hover) {
+              background-color: var(--color-accent);
+            }
+          }
+          &:hover {
+            @media (hover: hover) {
+              color: var(--color-accent-foreground);
+            }
+          }
+          &:focus-visible {
             background-color: var(--color-accent);
           }
-        }
-        &:hover {
-          @media (hover: hover) {
+          &:focus-visible {
             color: var(--color-accent-foreground);
           }
         }
-        &:focus-visible {
-          background-color: var(--color-accent);
-        }
-        &:focus-visible {
-          color: var(--color-accent-foreground);
-        }
         &.active {
           background-color: var(--color-accent);
           color: var(--color-accent-foreground);
         }
       }
-      [role='menu'] [role="presentation"] {
+      [role='menu'] [role='heading'] {
         display: flex;
         padding-inline: calc(var(--spacing) * 2);
         padding-block: calc(var(--spacing) * 1.5);
@@ -3167,7 +3168,7 @@
           background-repeat: no-repeat;
         }
       }
-      [role='listbox'] [role="presentation"] {
+      [role='listbox'] [role='heading'] {
         display: flex;
         padding-inline: calc(var(--spacing) * 2);
         padding-block: calc(var(--spacing) * 1.5);