Removing mentions of Alpine.js (RIP)

README.md

@@ -6,7 +6,7 @@ A collection of modern UI components built with Tailwind CSS that works with any
 
 ## Features
 
-- **Lightweight**: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.
+- **Lightweight**: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.
 - **Easy to use**: add classes like `btn` or `input` and you're done.
 - **Framework-agnostic**: works with any backend or frontend stack.
 - **Accessible**: components follow accessibility best practices.

docs/src/_data/site.js

@@ -1,7 +1,7 @@
 export default {
   title: "Basecoat",
   description: "A components library built with Tailwind CSS that works with any web stack.",
-  keywords: ["components", "component library", "component system", "UI", "UI kit", "shadcn", "shadcn/ui", "Tailwind CSS", "Tailwind", "CSS", "HTML", "Jinja", "Nunjucks", "Alpine.js"],
+  keywords: ["components", "component library", "component system", "UI", "UI kit", "shadcn", "shadcn/ui", "Tailwind CSS", "Tailwind", "CSS", "HTML", "Jinja", "Nunjucks", "JS", "JavaScript", "vanilla JS", "vanilla JavaScript"],
   author: {
     name: "Ronan Berder",
     x: "@hunvreus"

docs/src/_includes/partials/sidebar.njk

@@ -17,16 +17,8 @@
     "data-keep-mobile-sidebar-open": ""
   },
   popover_attrs={
-    "data-side": "right",
-    "data-align": "end",
-    "class": "w-80",
-    "x-init": "
-      if (window.innerWidth < 768) {
-        $el.setAttribute('data-side', 'top');
-        $el.setAttribute('data-align', 'start');
-        $el.classList.add('w-[271px]');
-      }
-    "
+    "data-side": "top",
+    "class": "w-[271px] md:w-[239px]"
   }
 ) %}
 <div class="grid gap-4">

docs/src/assets/styles.css

@@ -466,6 +466,9 @@
   .min-h-\[350px\] {
     min-height: 350px;
   }
+  .w-\(--sidebar-mobile-width\) {
+    width: var(--sidebar-mobile-width);
+  }
   .w-1\/2 {
     width: calc(1/2 * 100%);
   }
@@ -502,6 +505,9 @@
   .w-\[271px\] {
     width: 271px;
   }
+  .w-\[calc\(100vw-24px\)\] {
+    width: calc(100vw - 24px);
+  }
   .w-full {
     width: 100%;
   }
@@ -1273,6 +1279,16 @@
       margin-left: calc(var(--spacing) * 4);
     }
   }
+  .md\:w-\(--sidebar-width\) {
+    @media (width >= 48rem) {
+      width: var(--sidebar-width);
+    }
+  }
+  .md\:w-\[239px\] {
+    @media (width >= 48rem) {
+      width: 239px;
+    }
+  }
   .md\:max-w-\[200px\] {
     @media (width >= 48rem) {
       max-width: 200px;

docs/src/introduction.njk

@@ -25,7 +25,7 @@ toc:
   <p><b>That's where Basecoat comes in.</b> It gives you modern, accessible components with the simplicity of plain HTML and Tailwind. Basecoat is:</p>
 
   <ul>
-    <li><b>Lightweight</b>: no runtime JS, just CSS and tiny Alpine.js scripts for the more interactive components.</li>
+    <li><b>Lightweight</b>: no runtime JS, just CSS and a tiny bit of vanilla JavaScript for the more interactive components.</li>
     <li><b>Easy to use</b>: add classes like <code>btn</code> or <code>input</code> and you're done.</li>
     <li><b>Framework-agnostic</b>: works with any backend or frontend stack.</li>
     <li><b>Accessible</b>: components follow accessibility best practices.</li>
@@ -42,7 +42,7 @@ toc:
 <div class="prose">
   <p>Add a single CSS file to your Tailwind setup. Use components by dropping in simple classes like <code>btn</code>, <code>form</code>, or <code>card</code>.</p>
 
-  <p>Some components (like modals or dropdowns) use a tiny bit of Alpine.js. You can skip it if you don't need interactivity.</p>
+  <p>Some components (like modals or dropdowns) use a tiny bit of vanilla JavaScript. You can skip it if you don't need interactivity.</p>
 
   <p>There's also a CLI to help you scaffold components and get set up fast.</p>
 

packages/cli/README.md

@@ -8,7 +8,6 @@ This package provides a Command Line Interface (CLI) to help you quickly scaffol
 - For the components to function correctly, your project should have:
   - [Tailwind CSS](https://tailwindcss.com/docs/installation) installed and configured.
   - The `basecoat-css` package installed and imported (or `basecoat.css` manually added).
-  - [Alpine.js](https://alpinejs.dev/docs/installation) installed and initialized, as Basecoat components rely on it for interactivity.
 
 ## Usage
 

src/jinja/toast.html.jinja

@@ -4,8 +4,7 @@
 
   @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
   @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
-  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
-  @param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+  @param attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
 #}
 {% macro toaster(
   id="toaster",

src/nunjucks/toast.njk

@@ -4,8 +4,7 @@
 
   @param id {string} [optional] [default="toaster"] - Unique identifier for the toaster container.
   @param toasts {array} [optional] - An array of toast objects to render initially. See the <code>toast()</code> macro for more details.
-  @param main_attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
-  @param is_fragment {boolean} [optional] [default=false] - If true, renders only the toast elements with hx-swap-oob="beforeend", suitable for htmx responses. Skips script and template inclusion.
+  @param attrs {object} [optional] - Additional HTML attributes for the main toaster container div.
 #}
 {% macro toaster(
   id="toaster",