@anyblades/blades 3.1.0-beta.4 → 3.1.0-beta.6

package/.prettierrc.json

@@ -1,18 +1,11 @@
 {
   "printWidth": 120,
-  "plugins": ["prettier-plugin-jinja-template"],
   "overrides": [
     {
       "files": "*.css",
       "options": {
         "printWidth": 100
       }
-    },
-    {
-      "files": ["*.njk", "*.html"],
-      "options": {
-        "parser": "jinja-template"
-      }
     }
   ]
 }

package/README.md

@@ -1,21 +1,29 @@
-# 🥷 *Bl*ades  ![][NPM_V]
+# blades<sup>✨</sup>
 
-[NPM_V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=darkslategray
+![][V] ![][NEXT_V] ![][LIC] [![][X]][X_URL] [![][B]][B_URL] [![][M]][M_URL]
+
+[V]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=brightgreen
+[NEXT_V]: https://img.shields.io/github/v/release/anyblades/blades?include_prereleases&label=next&color=blue
+[LIC]: https://img.shields.io/badge/license-MIT-blue
+[X]:  https://img.shields.io/badge/78-white?logo=x&style=social
+[X_URL]: https://x.com/BladesCSS
+[B]: https://img.shields.io/bluesky/followers/blades.dev?label=
+[B_URL]: https://bsky.app/profile/blades.dev
+[M]: https://img.shields.io/mastodon/follow/117487235444867518?label=NEW
+[M_URL]: https://mastodon.social/@BladesCSS
 
 <!--section:summary-->
 
 <h1><span class="mark-brand">Minimal CSS Framework</span> <small>for</small> Semantic HTML</h1>
 
-<big>Fully compatible and actively maintained successor to [Pico CSS](https://picocss.com/).</big>
+<big>Blades CSS is a modern drop&#8209;in successor to [Pico CSS](//picocss.com/docs/maintenance).</big>
 
-Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with other frameworks.
+Just switch `pico.css` to `blades.css` — and voilà!
 
 <nav>
-  <a href="//blades.ninja/css/" role="button">Get started <i>✨</i></a>
-  <b hidden>|</b>
-  <a href="//blades.ninja/css/standalone/" role="button" class="outline">
-    Standalone <i><i class="fa-brands fa-tailwind-css"></i><i class="fa-brands fa-bootstrap"></i></i>
-  </a>
+  <a href="//blades.dev/css/" role="button">Get started</a>
+  <b hidden>&nbsp;•&nbsp;</b>
+  <a href="//blades.dev/css/pico/" role="button" class="outline">Inspired by Pico ✨</a>
 </nav>
 
 <!--section:gh-only-->
@@ -105,6 +113,7 @@ import "@anyblades/blades/layered/forms/basics";
 // in the component that renders a <dialog>
 import "@anyblades/blades/layered/components/card";
 import "@anyblades/blades/layered/components/modal";
+import "@anyblades/blades/layered/components/modal-modern"; // optional: open animation without JS
 ```
 
 ```html
@@ -117,8 +126,9 @@ import "@anyblades/blades/layered/components/modal";
 ```
 
 - Bundlers dedupe JS-side CSS imports and split them per route, so each part is downloaded and cached once and only where it's used.
+- Blades' own parts are layered too, mostly in the same folders as Pico's: e.g. `components/modal-modern` adds the CSS-only open animation for `showModal()` on top of `components/modal`, and `components/dropdown-popover` styles `<ul popover>` / `<menu popover>` menus opened by a button. The others are `variables-blades`, `layout/columns`, `content/code-block`, `content/icon`, `forms/float-label`, `components/timeline` and `compact` (import it last, see below).
 - Override in your component's `<style>` or `app.css`, or set `--pico-*` variables on `:root` or on an element. Unlayered CSS always wins over `@layer blades`. The usual layer caveats apply: Blades' own `!important` declarations beat yours, and if you use other layered CSS, declare the order once, before anything else is loaded. For Tailwind v4 that is `@layer theme, base, blades, components, utilities;` at the top of the CSS file you import first (before `@import "tailwindcss"`), and that file has to be imported before any `layered/*` part, because the first `@layer` the browser sees fixes the order.
-- Parts don't `@import` the parts they build on (e.g. `components/modal` expects `components/card`, `components/group` and `components/dropdown` expect `content/button` and `forms/basics`, and the `forms/*` extras expect `forms/basics`). If they did, every route chunk would carry its own copy. Import those shared parts once, at the root or next to the part that needs them; bundlers dedupe the imports.
+- Parts don't `@import` the parts they build on (e.g. `components/modal` expects `components/card`, `components/group` and `components/dropdown` expect `content/button` and `forms/basics`, `components/modal-modern` expects `components/modal`, `components/dropdown-popover` expects `components/dropdown`, and the `forms/*` extras expect `forms/basics`). If they did, every route chunk would carry its own copy. Import those shared parts once, at the root or next to the part that needs them; bundlers dedupe the imports.
 - An `@import` inside a scoped `<style>` (Svelte, Astro, Vue `scoped`) is processed as that component's own styles. The rules get scoped to the component's markup (Svelte also prunes the unused ones) and are duplicated in every component that imports them.
 - Landmark padding: `pico.css` and `blades.ninja.css` pad `body > header`, `body > main` and `body > footer` like Pico, which doesn't match when the framework wraps the page in an element (SvelteKit's `<div style="display: contents">`, Next.js pages router `#__next`, Nuxt `#__nuxt`, a SPA's `#root` / `#app`). `blades.css` doesn't pad them; with per-part imports, add `layout/landmarks` (or `layered/layout/landmarks`) for Pico's `body >` padding.
 

package/_includes/.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-jinja-template"],
+  "overrides": [
+    {
+      "files": ["*.njk", "*.html"],
+      "options": {
+        "parser": "jinja-template"
+      }
+    }
+  ]
+}

package/_includes/package.json

@@ -0,0 +1,10 @@
+{
+  "private": true,
+  "scripts": {
+    "lint": "prettier --write 'blades/*.njk'"
+  },
+  "devDependencies": {
+    "prettier": "^3.5.3",
+    "prettier-plugin-jinja-template": "^2.1.0"
+  }
+}