@anyblades/blades 3.1.0-beta.2 → 3.1.0-beta.5

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/twitter/follow/BladesCSS?label=Twitter
+[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-->
@@ -117,8 +125,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.
+- Two layered `components/*` parts also carry Blades' own additions, as in `blades.css`: `components/modal` includes the CSS-only open animation for `showModal()`, and `components/dropdown-popover` styles `<ul popover>` / `<menu popover>` menus opened by a button.
 - 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/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.
 
@@ -290,6 +299,7 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 ## <sup style>Featured by</sup> <!-- [1] big projects [2] awesome [3] smaller projects [4] blogs/social -->
 
 - [getgrav.org](https://getgrav.org/migrate-to-2#:~:text=blades)
+- https://usehadron.dev/
 - [@11ty/buildawesome](https://bsky.app/profile/11ty.dev/post/3mp75r53ccv2b) [↗](https://mastodon.social/@11ty@neighborhood.11ty.dev/116816881367741413)
 - [<i class="fa-brands fa-build-awesome mark-brand"></i> buildawesome.one](https://buildawesome.one/#:~:text=blades)
 - https://github.com/dbohdan/classless-css
@@ -297,7 +307,7 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 - [/gabrielizalo/awesome-css-frameworks](https://github.com/gabrielizalo/awesome-css-frameworks-and-ui-libraries/tree/master/Lightweight)
 - https://github.com/eggplantpasta/greenroom
 - [/adamdjbrett/11ty-wisp](https://github.com/adamdjbrett/11ty-wisp#features:~:text=blades) [↗](https://github.com/adamdjbrett/000000076#:~:text=blades)
-- [doany.io](https://doany.io/en/posts/svelte-bun-sqlite/#on-biome-and-css)
+- [doany.io](https://doany.io/en/posts/svelte-bun-sqlite/#on-biome-and-css:~:text=anyblades)
 - [@box464](https://mastodon.social/@box464/117442493473921346)
 - [@draupnerdata](https://www.youtube.com/watch?v=yDjArj9HSjs&t=180s)
 - [@cantdutchthis](https://news.ycombinator.com/item?id=48729467)
@@ -309,10 +319,3 @@ Add `<html data-compact>` for the whole page, or put the attribute on a single e
 
 <!--{.markerless .columns}-->
 <!--[hostfurl.com, @johnheenan]-->
-
-## <sup style>Credits</sup>
-
-- https://picocss.com/ for [inspiration](//blades.ninja/css/pico/)
-- https://11ty.dev/ for [site generation](//buildawesome.one/)
-
-<!--{.markerless}-->

package/css/blades.css

@@ -2403,7 +2403,11 @@ label > details.dropdown {
   --pico-loading-spinner-opacity: 0.5;
 }
 
-[aria-busy="true"]:not(input, select, textarea, html, form) {
+[aria-busy="true"]:not(input, select, textarea, html, form):not(
+    :where(button, [type="submit"], [type="button"], [type="reset"], [role="button"])
+  ) {
+  /* :where() zeroes the specificity of the button list inside :not(), so this rule stays
+   * low-specificity and doesn't override the more specific button rules below */
   white-space: nowrap;
 }
 [aria-busy="true"]:not(input, select, textarea, html, form)::before {
@@ -2432,6 +2436,19 @@ a[aria-busy="true"] {
   pointer-events: none;
 }
 
+/* Buttons keep their size: the label stays in place but hidden, the spinner sits on top */
+button[aria-busy="true"]:not(:empty), [type="submit"][aria-busy="true"]:not(:empty), [type="button"][aria-busy="true"]:not(:empty), [type="reset"][aria-busy="true"]:not(:empty), [role="button"][aria-busy="true"]:not(:empty) {
+    position: relative;
+    color: transparent;
+  }
+button[aria-busy="true"]:not(:empty) > *, [type="submit"][aria-busy="true"]:not(:empty) > *, [type="button"][aria-busy="true"]:not(:empty) > *, [type="reset"][aria-busy="true"]:not(:empty) > *, [role="button"][aria-busy="true"]:not(:empty) > * {
+      opacity: 0;
+    }
+button[aria-busy="true"]:not(:empty)::before, [type="submit"][aria-busy="true"]:not(:empty)::before, [type="button"][aria-busy="true"]:not(:empty)::before, [type="reset"][aria-busy="true"]:not(:empty)::before, [role="button"][aria-busy="true"]:not(:empty)::before {
+      position: absolute;
+      margin: auto;
+      inset: 0;
+    }
 /**
  * Modal (<dialog>)
  */
@@ -3281,6 +3298,31 @@ label:has(> span):has(
       padding-block: 0.75rem; /* match Pico */
     }
 /* Components */
+/*\3c !--section:docs-->
+
+A `<dialog>` opened with `dialog.showModal()` fades in and its `<article>` zooms in, without JS classes.
+Pico's modal JS (`.modal-is-open`, `.modal-is-opening`, `.modal-is-closing`) still works on top of it.
+
+- `dialog.close()` closes it at once, as before.
+- `<dialog open>` in markup and non-modal `dialog.show()` aren't animated.
+- Browsers without `@starting-style`, and reduced motion, open it at once.
+
+\3c !--section:code-->```css */
+dialog:modal {
+  transition: opacity var(--pico-transition);
+}
+dialog:modal > article {
+    transition: transform var(--pico-transition);
+  }
+@starting-style {
+  dialog:modal {
+    opacity: 0;
+  }
+
+    dialog:modal > article {
+      transform: scale(0.96);
+    }
+}
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
 \3c !--section:code-->
 ```css */
@@ -3340,6 +3382,110 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
 \3c !--section--> */
 /*\3c !--section:docs-->
 
+A `<ul>` or `<menu>` with the `popover` attribute is styled like a dropdown and opens next to the button
+that toggles it, with no JS:
+
+```html
+<button popovertarget="actions">Actions</button>
+<ul id="actions" popover>
+  <li><a href="#">Edit</a></li>
+  <li><a href="#">Duplicate</a></li>
+</ul>
+```
+
+- Clicking outside or pressing Esc closes it, and it's drawn on top of everything (no `z-index`, no clipping by `overflow`).
+- It opens below the button (on the reading side, also in RTL) and flips when there's no room.
+  Open it with `popovertarget`, `commandfor` or `showPopover({ source })`, so it knows its button.
+- Browsers without CSS anchor positioning show it in the middle of the screen instead, like a plain popover.
+- It uses the dropdown colours (`--pico-dropdown-*`, from `components/dropdown`).
+
+\3c !--section:code-->```css */
+:is(ul, menu)[popover] {
+  min-width: -moz-fit-content;
+  min-width: fit-content;
+  margin: auto;
+  padding: 0;
+  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
+  border-radius: var(--pico-border-radius);
+  background-color: var(--pico-dropdown-background-color);
+  box-shadow: var(--pico-dropdown-box-shadow);
+  color: var(--pico-dropdown-color);
+  white-space: nowrap;
+  opacity: 0;
+  transition:
+    opacity var(--pico-transition),
+    overlay var(--pico-transition) allow-discrete,
+    display var(--pico-transition) allow-discrete;
+}
+/* Beats `nav ul` / `aside ul`, which would otherwise show the closed menu */
+:is(ul, menu)[popover]:not(:popover-open) {
+    display: none;
+  }
+:is(ul, menu)[popover]:popover-open {
+    display: block;
+    opacity: 1;
+  }
+:is(ul, menu)[popover] li {
+    display: block;
+    margin-bottom: 0;
+    padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
+      var(--pico-form-element-spacing-horizontal);
+    list-style: none;
+  }
+:is(ul, menu)[popover] li:first-of-type {
+      margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
+    }
+:is(ul, menu)[popover] li:last-of-type {
+      margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
+    }
+:is(ul, menu)[popover] li:has(label):hover {
+      background-color: var(--pico-dropdown-hover-background-color);
+    }
+:is(ul, menu)[popover] li a {
+    display: block;
+    margin: calc(var(--pico-form-element-spacing-vertical) * -0.5)
+      calc(var(--pico-form-element-spacing-horizontal) * -1);
+    padding: calc(var(--pico-form-element-spacing-vertical) * 0.5)
+      var(--pico-form-element-spacing-horizontal);
+    overflow: hidden;
+    border-radius: 0;
+    color: var(--pico-dropdown-color);
+    text-decoration: none;
+    text-overflow: ellipsis;
+  }
+:is(ul, menu)[popover] li a:is(:hover, :focus, :active, :focus-visible, [aria-current]:not([aria-current="false"])) {
+      background-color: var(--pico-dropdown-hover-background-color);
+    }
+:is(ul, menu)[popover] li label {
+    width: 100%;
+  }
+/* Beats Pico's `nav ul:first-of-type` / `:last-of-type` margins whatever the load order (soft win via :not) */
+nav :is(ul, menu)[popover]:not(.does-not-exist) {
+  margin: auto;
+}
+@starting-style {
+  :is(ul, menu)[popover]:popover-open {
+    opacity: 0;
+  }
+}
+
+/* Next to the button that opened it (its implicit anchor) */
+@supports (position-area: bottom) {
+  :is(ul, menu)[popover],
+  nav :is(ul, menu)[popover]:not(.does-not-exist) {
+    position-area: bottom span-right;
+    position-try-fallbacks: flip-block, flip-inline;
+    margin: 0;
+    margin-top: var(--pico-outline-width);
+    inset: auto;
+  }
+
+    :is(ul, menu)[popover]:dir(rtl), nav :is(ul, menu)[popover]:not(.does-not-exist):dir(rtl) {
+      position-area: bottom span-left;
+    }
+}
+/*\3c !--section:docs-->
+
 Use `dl.timeline` or wrap a `<dl>` with `.has-timeline` to style it as a
 vertical timeline — each `<dd>` gets a left border strip acting as the track:
 
@@ -3359,6 +3505,7 @@ dl.timeline dd, .has-timeline > dl dd {
     padding: 0.25rem 0 0.75rem 1rem;
     border-inline-start: 0.25rem solid var(--blades-timeline-border-color);
   }
+/* Compact version (opt-in via `data-compact` attr anywhere) */
 /*
  * Compact: opt-in denser sizing and a more current look, applied under `data-compact` on
  * <html> (whole page) or on any element such as a single <form>. Without the attribute it