@anyblades/blades 3.1.0-beta.7 → 3.1.0-rc.1

package/css/blades.ninja.min.css

@@ -1,22 +1,22 @@
 /*!
  * Blades CSS v3 with Pico CSS 🥷✨
- * Copyright 2026 (https://blades.ninja/)
+ * Copyright 2026 (https://blades.dev/)
  * Licensed under MIT
  */
 /*!
  * Blades CSS' Pico fork v2.5 🥷✨
  * Copyright 2019-2025 (https://picocss.com)
- * Copyright 2026 (https://blades.ninja/css/pico/)
+ * Copyright 2026 (https://blades.dev/css/pico/)
  * Licensed under MIT
  */
 /*!
  * Blades CSS standalone kit v3 🥷
- * Copyright 2026 (https://blades.ninja/css/standalone/)
+ * Copyright 2026 (https://blades.dev/css/standalone/)
  * Licensed under MIT
  */
 /*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
  * Licensed under MIT
  */
 /*!

package/css/float-label.css

@@ -1,6 +1,6 @@
 /*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
  * Licensed under MIT
  */
 label:has( > span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select), .has-float-label {

package/css/float-label.min.css

@@ -1,6 +1,6 @@
 /*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
  * Licensed under MIT
  */
 label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select),.has-float-label{display:block;position:relative;&>span,& label{cursor:text;font-size:75%;position:absolute;top:0;left:0}& :placeholder-shown:not(:focus)::placeholder{opacity:0}&:has(:placeholder-shown:not(:focus)){&>span,& label{font-size:inherit;opacity:.5}}}label:has(>span):has(input:not([type=checkbox],[type=radio],[type=range]),textarea,select),.has-float-label{&>span,& label{opacity:.75;padding-block-start:.25rem;padding-inline-start:calc(1rem + 1px);transition:all .25s}& input,& textarea,& select{margin-block-start:0;padding-block:1.125rem .375rem;padding-inline-start:1rem;&::placeholder{opacity:1;transition:all .25s}}&:has(:placeholder-shown:not(:focus)){&>span,& label{padding-block:.75rem}}}

package/css/layered/README.md

@@ -0,0 +1,164 @@
+# Layered modules
+
+<!--section:docs-->
+
+Blades CSS, whole or part by part, is also available wrapped in `@layer blades { }`, so any unlayered styles of yours win over it without specificity fights.
+
+## Whole framework
+
+`blades.layered.css` / `blades.layered.min.css` is `blades.css` wrapped in `@layer blades { }`:
+
+<!--prettier-ignore-->
+```html
+<link rel="stylesheet" href="
+  https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/layered/blades.layered.min.css
+"/>
+```
+
+When you can use `@import`, `@import url("…/blades.min.css") layer(blades);` does the same without this file.
+
+## Per-part imports
+
+### With bundlers and component frameworks (SvelteKit, Next.js, Nuxt, Astro, …)
+
+Import the parts from JavaScript, i.e. the root layout and the components that use them, rather than with `@import` inside a component's `<style>` block. The parts, `@anyblades/blades/<part>`, come wrapped in `@layer blades`, which a JS `import` can't add by itself.
+
+```js
+// root layout, once: the base and every part that others build on
+import "@anyblades/blades/variables";
+import "@anyblades/blades/layout/document";
+import "@anyblades/blades/content/typography";
+import "@anyblades/blades/content/button";
+import "@anyblades/blades/forms/basics";
+
+// in the component that renders a <dialog>
+import "@anyblades/blades/components/card";
+import "@anyblades/blades/components/modal";
+import "@anyblades/blades/components/modal-modern"; // optional: open animation without JS
+```
+
+```html
+<style>
+  /* unlayered, so it wins over Blades whatever the specificity (except Blades' !important) */
+  article {
+    max-width: 40rem;
+  }
+</style>
+```
+
+- 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.
+- 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.
+
+### Framework examples
+
+A confirm dialog component, with the root layout importing the base parts as above. The component imports `card` and `modal` and overrides Blades in its own styles. Blades' `dialog > article > footer button:not(:first-of-type)` is more specific than the component's rules, but it is in `@layer blades`, so the component's rules win. With the non-layered source (`@anyblades/blades/src/components/modal`), the second button would keep Blades' `margin-left`.
+
+Svelte, `Confirm.svelte`:
+
+```svelte
+<script>
+  import "@anyblades/blades/components/card";
+  import "@anyblades/blades/components/modal";
+</script>
+
+<dialog open>
+  <article>
+    <p>Delete this item?</p>
+    <footer>
+      <button class="secondary">Cancel</button>
+      <button>Delete</button>
+    </footer>
+  </article>
+</dialog>
+
+<style>
+  footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+  button {
+    margin: 0;
+  }
+</style>
+```
+
+Vue (`<script setup>` and `<style scoped>`) and Astro (the imports in the frontmatter, `<style>` in the component) work the same way.
+
+React, `Confirm.jsx` with a CSS module:
+
+```jsx
+import "@anyblades/blades/components/card";
+import "@anyblades/blades/components/modal";
+import styles from "./Confirm.module.css";
+
+export default function Confirm() {
+  return (
+    <dialog open>
+      <article>
+        <p>Delete this item?</p>
+        <footer className={styles.footer}>
+          <button className="secondary">Cancel</button>
+          <button>Delete</button>
+        </footer>
+      </article>
+    </dialog>
+  );
+}
+```
+
+```css
+/* Confirm.module.css */
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+.footer button {
+  margin: 0;
+}
+```
+
+Per-page CSS in a SvelteKit production build of this example, next to the whole `blades.layered.min.css` (gzip sizes in parentheses):
+
+|                                                                          | CSS                 |
+| ------------------------------------------------------------------------ | ------------------- |
+| `blades.layered.min.css`, for comparison                                 | 76.9 kB (12.4 kB)   |
+| Every page: the root layout's parts                                      | 25.5 kB (4.7 kB)    |
+| The page with `Confirm`: plus `card`, `modal` and the component's styles | + 4.7 kB (+ 1.4 kB) |
+
+The sizes are from a build with `build: { cssTarget: "esnext" }` in `vite.config.js`. With Vite's default browser targets, `light-dark()` is lowered to fallback custom properties, which adds about 4 kB to the root layout's CSS.
+
+### Available parts
+
+`@anyblades/blades/<part>` is the file under [`css/layered/`](https://github.com/anyblades/blades/tree/main/css/layered):
+
+- Pico's parts: `variables`, `layout/*`, `content/*`, `forms/*`, `components/*` and `utilities`. A whole category is one import, e.g. `@anyblades/blades/components` (Pico's parts of that category only; `layout` without `landmarks`).
+- Blades' own parts, mostly in the same folders as Pico's:
+  - `components/modal-modern` adds the CSS-only open animation for `showModal()` on top of `components/modal` ([No-JS transitions](//blades.dev/css/modal/#no-js-transitions-new))
+  - `components/dropdown-popover` styles `<ul popover>` / `<menu popover>` menus opened by a button ([Modern Popover API](//blades.dev/css/dropdown/#modern-popover-api-new))
+  - `variables-blades`, `layout/columns`, `content/code-block`, `content/icon`, `forms/float-label`, `components/timeline`
+  - `compact`: import it last (see [Compact sizing](https://github.com/anyblades/blades#compact-sizing-opt-in))
+- The same names under `@anyblades/blades/src/…` are the sources without the layer, e.g. `@anyblades/blades/src/components/card`, to put them in a layer of your own (`@import "@anyblades/blades/src/components/card" layer(ui);`) or to run your own build. `@anyblades/blades/src` on its own is the source of the whole `blades.css`.
+
+### Order and dependencies
+
+- `variables` and `layout/document` are the minimum. Inside the layer, later parts still win over earlier ones, so keep the order of [`src/pico/_index.css`](https://github.com/anyblades/blades/blob/main/src/pico/_index.css) (variables → layout → content → forms → components → utilities). Blades' own parts come after Pico's, in the order of [`src/blades/_index.css`](https://github.com/anyblades/blades/blob/main/src/blades/_index.css), with `compact` last.
+- Parts don't `@import` the parts they build on:
+  - `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`
+  - 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.
+
+- 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; add `layout/landmarks` for Pico's `body >` padding.
+
+## Overrides and caveats
+
+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 (form validation, reduced motion) beat your unlayered `!important`.
+- Your `@keyframes` of the same name as Blades' win regardless of load order.
+- If you use other layered CSS, declare the order once, before anything else is loaded, because the first `@layer` the browser sees fixes the order. 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 Blades part.

package/css/layered/_compact.css

@@ -0,0 +1,30 @@
+[data-compact], [data-compact] :is([data-theme], .pico), .pico[data-compact], :host([data-compact]), :host([data-compact]) [data-theme] {
+  --pico-border-radius: .5rem;
+  --pico-outline-width: .1875rem;
+  --pico-block-spacing-vertical: 1.5rem;
+  --pico-block-spacing-horizontal: 1.5rem;
+  --pico-form-element-spacing-vertical: .375rem;
+  --pico-form-element-spacing-horizontal: .75rem;
+  --pico-form-label-font-weight: 500;
+  --pico-button-font-weight: 500;
+  --pico-form-element-background-color: light-dark(#fff, #1c212c);
+  --pico-card-border-color: var(--pico-muted-border-color);
+  --pico-card-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-card-border-color), 0 1px 2px #0000000d;
+  --pico-card-sectioning-background-color: var(--pico-card-background-color);
+}
+
+[data-compact]:is([role="search"], [type="search"]) {
+  --pico-border-radius: 5rem;
+}
+
+:root[data-compact], :host([data-compact]) {
+  --pico-font-size: 100%;
+}
+
+[data-compact] :is(h1, h2, h3, h4, h5, h6), :host([data-compact]) :is(h1, h2, h3, h4, h5, h6) {
+  --pico-font-weight: 600;
+}
+
+[data-compact] :where(input, select, textarea, fieldset, .grid) + small, :host([data-compact]) :where(input, select, textarea, fieldset, .grid) + small {
+  font-weight: var(--pico-font-weight);
+}

package/css/layered/_utilities.css

@@ -0,0 +1,23 @@
+[aria-controls] {
+  cursor: pointer;
+}
+
+[aria-disabled="true"], [disabled] {
+  cursor: not-allowed;
+}
+
+[dir="rtl"] {
+  direction: rtl;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :not([aria-busy="true"]):not(.unreduce-motion), :not([aria-busy="true"]):before, :not([aria-busy="true"]):after {
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    animation-delay: -1ms !important;
+  }
+}

package/css/layered/_variables-blades.css

@@ -0,0 +1,8 @@
+:scope, :host {
+  --blades-token-primary: var(--pico-primary, dodgerblue);
+  --in-pico: #969eaf;
+  --blades-token-secondary: var(--pico-secondary, lightslategray);
+  --blades-timeline-border-color: color-mix(in srgb,
+    var(--blades-token-secondary) 50%,
+    transparent);
+}

package/css/layered/_variables.css

@@ -0,0 +1,258 @@
+:scope, :host {
+  --pico-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --pico-font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue",
+    sans-serif, var(--pico-font-family-emoji);
+  --pico-font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace,
+    var(--pico-font-family-emoji);
+  --pico-font-family: var(--pico-font-family-sans-serif);
+  --pico-line-height: 1.5;
+  --pico-font-weight: 400;
+  --pico-font-size: 100%;
+  --pico-text-underline-offset: .1rem;
+  --pico-border-radius: .25rem;
+  --pico-border-width: .0625rem;
+  --pico-outline-width: .125rem;
+  --pico-transition: .2s ease-in-out;
+  --pico-spacing: 1rem;
+  --pico-typography-spacing-vertical: 1rem;
+  --pico-block-spacing-vertical: var(--pico-spacing);
+  --pico-block-spacing-horizontal: var(--pico-spacing);
+  --pico-grid-column-gap: var(--pico-spacing);
+  --pico-grid-row-gap: var(--pico-spacing);
+  --pico-form-element-spacing-vertical: .75rem;
+  --pico-form-element-spacing-horizontal: 1rem;
+  --pico-nav-element-spacing-vertical: 1rem;
+  --pico-nav-link-spacing-vertical: .5rem;
+  --pico-nav-link-spacing-horizontal: .5rem;
+  --pico-icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+}
+
+@media (width >= 576px) {
+  :scope, :host {
+    --pico-font-size: 106.25%;
+  }
+}
+
+@media (width >= 768px) {
+  :scope, :host {
+    --pico-font-size: 112.5%;
+  }
+}
+
+@media (width >= 1024px) {
+  :scope, :host {
+    --pico-font-size: 118.75%;
+  }
+}
+
+@media (width >= 1280px) {
+  :scope, :host {
+    --pico-font-size: 125%;
+  }
+}
+
+@media (width >= 1536px) {
+  :scope, :host {
+    --pico-font-size: 131.25%;
+  }
+}
+
+a, a.secondary, a.contrast {
+  --pico-text-decoration: underline;
+}
+
+small {
+  --pico-font-size: .875em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  --pico-font-weight: 700;
+}
+
+h1 {
+  --pico-font-size: 2rem;
+  --pico-line-height: 1.125;
+  --pico-typography-spacing-top: 3rem;
+}
+
+h2 {
+  --pico-font-size: 1.75rem;
+  --pico-line-height: 1.15;
+  --pico-typography-spacing-top: 2.625rem;
+}
+
+h3 {
+  --pico-font-size: 1.5rem;
+  --pico-line-height: 1.175;
+  --pico-typography-spacing-top: 2.25rem;
+}
+
+h4 {
+  --pico-font-size: 1.25rem;
+  --pico-line-height: 1.2;
+  --pico-typography-spacing-top: 1.874rem;
+}
+
+h5 {
+  --pico-font-size: 1.125rem;
+  --pico-line-height: 1.225;
+  --pico-typography-spacing-top: 1.6875rem;
+}
+
+h6 {
+  --pico-font-size: 1rem;
+  --pico-line-height: 1.25;
+  --pico-typography-spacing-top: 1.5rem;
+}
+
+thead th, thead td, tfoot th, tfoot td {
+  --pico-font-weight: 600;
+  --pico-border-width: .1875rem;
+}
+
+pre, code, kbd, samp {
+  --pico-font-family: var(--pico-font-family-monospace);
+}
+
+kbd {
+  --pico-font-weight: bolder;
+}
+
+input:not([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :where(select, textarea) {
+  --pico-outline-width: .0625rem;
+}
+
+[type="search"] {
+  --pico-border-radius: 5rem;
+}
+
+[type="checkbox"], [type="radio"] {
+  --pico-border-width: .125rem;
+}
+
+[type="checkbox"][role="switch"] {
+  --pico-border-width: .1875rem;
+}
+
+details.dropdown summary:not([role="button"]) {
+  --pico-outline-width: .0625rem;
+}
+
+nav details.dropdown summary:focus-visible {
+  --pico-outline-width: .125rem;
+}
+
+[role="search"] {
+  --pico-border-radius: 5rem;
+}
+
+[role="search"] button, [role="search"] [type="submit"], [role="search"] [type="button"], [role="search"] [role="button"], [role="group"] button, [role="group"] [type="submit"], [role="group"] [type="button"], [role="group"] [role="button"] {
+  --pico-form-element-spacing-horizontal: 2rem;
+}
+
+details summary[role="button"]:not(.outline):after, [aria-busy="true"]:not(input, select, textarea):is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
+  filter: brightness(0) invert();
+}
+
+:scope, :host, [data-theme="light"], [data-theme="dark"] {
+  color-scheme: light;
+  --pico-background-color: light-dark(#fff, #13171f);
+  --pico-color: light-dark(#373c44, #c2c7d0);
+  --pico-text-selection-color: light-dark(#029ae840, #01aaff30);
+  --pico-muted-color: light-dark(#646b79, #7b8495);
+  --pico-muted-border-color: light-dark(#e7eaf0, #202632);
+  --pico-primary: light-dark(#0172ad, #01aaff);
+  --pico-primary-background: #0172ad;
+  --pico-primary-border: var(--pico-primary-background);
+  --pico-primary-underline: light-dark(#0172ad80, #01aaff80);
+  --pico-primary-hover: light-dark(#015887, #79c0ff);
+  --pico-primary-hover-background: light-dark(#02659a, #017fc0);
+  --pico-primary-hover-border: var(--pico-primary-hover-background);
+  --pico-primary-hover-underline: var(--pico-primary-hover);
+  --pico-primary-focus: light-dark(#028ad4, #01aaff);
+  --pico-primary-inverse: #fff;
+  --pico-secondary: light-dark(#5d6b89, #969eaf);
+  --pico-secondary-background: #525f7a;
+  --pico-secondary-border: var(--pico-secondary-background);
+  --pico-secondary-underline: light-dark(#5d6b8980, #969eaf80);
+  --pico-secondary-hover: light-dark(#48536b, #b3b9c5);
+  --pico-secondary-hover-background: light-dark(#48536b, #5d6b89);
+  --pico-secondary-hover-border: var(--pico-secondary-hover-background);
+  --pico-secondary-hover-underline: var(--pico-secondary-hover);
+  --pico-secondary-focus: light-dark(#5d6b89, #909ebe);
+  --pico-secondary-inverse: #fff;
+  --pico-contrast: light-dark(#181c25, #dfe3eb);
+  --pico-contrast-background: light-dark(#181c25, #eff1f4);
+  --pico-contrast-border: var(--pico-contrast-background);
+  --pico-contrast-underline: light-dark(#181c2580, #dfe3eb80);
+  --pico-contrast-hover: light-dark(#000, #fff);
+  --pico-contrast-hover-background: light-dark(#000, #fff);
+  --pico-contrast-hover-border: var(--pico-contrast-hover-background);
+  --pico-contrast-hover-underline: light-dark(var(--pico-secondary-hover), var(--pico-contrast-hover));
+  --pico-contrast-focus: light-dark(#5d6b89, #cfd5e2);
+  --pico-contrast-inverse: light-dark(#fff, #000);
+  --pico-box-shadow: 0 .5rem 2.5rem light-dark(#8191b533, #07090c33);
+  --pico-h1-color: light-dark(#2d3138, #f0f1f3);
+  --pico-h2-color: light-dark(#373c44, #e0e3e7);
+  --pico-h3-color: light-dark(#424751, #c2c7d0);
+  --pico-h4-color: light-dark(#4d535e, #b3b9c5);
+  --pico-h5-color: light-dark(#5c6370, #a4acba);
+  --pico-h6-color: light-dark(#646b79, #8891a4);
+  --pico-mark-background-color: light-dark(#fde7c0, #014063);
+  --pico-mark-color: light-dark(#0f1114, #fff);
+  --pico-ins-color: light-dark(#1d6a54, #62af9a);
+  --pico-del-color: light-dark(#883935, #ce7e7b);
+  --pico-blockquote-border-color: var(--pico-muted-border-color);
+  --pico-blockquote-footer-color: var(--pico-muted-color);
+  --pico-button-box-shadow: 0 0 0 #0000;
+  --pico-button-hover-box-shadow: 0 0 0 #0000;
+  --pico-table-border-color: var(--pico-muted-border-color);
+  --pico-table-row-stripped-background-color: #6f78870a;
+  --pico-code-background-color: light-dark(#f3f5f7, #1a1f28);
+  --pico-code-color: light-dark(#646b79, #8891a4);
+  --pico-code-kbd-background-color: var(--pico-color);
+  --pico-code-kbd-color: var(--pico-background-color);
+  --pico-form-element-background-color: light-dark(#fbfcfc, #1c212c);
+  --pico-form-element-selected-background-color: light-dark(#dfe3eb, #2a3140);
+  --pico-form-element-border-color: light-dark(#cfd5e2, #2a3140);
+  --pico-form-element-color: light-dark(#23262c, #e0e3e7);
+  --pico-form-element-placeholder-color: light-dark(var(--pico-muted-color), #8891a4);
+  --pico-form-element-active-background-color: light-dark(#fff, #1a1f28);
+  --pico-form-element-active-border-color: var(--pico-primary-border);
+  --pico-form-element-focus-color: var(--pico-primary-border);
+  --pico-form-element-disabled-opacity: .5;
+  --pico-form-element-invalid-border-color: light-dark(#b86a6b, #c84f48);
+  --pico-form-element-invalid-active-border-color: light-dark(#c84f48, #d65c56);
+  --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
+  --pico-form-element-valid-border-color: light-dark(#4c9b8a, #2a7b6f);
+  --pico-form-element-valid-active-border-color: light-dark(#279977, #16896a);
+  --pico-form-element-valid-focus-color: var(--pico-form-element-valid-active-border-color);
+  --pico-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(76, 154.5, 137.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --pico-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(200.25, 79.25, 72.25)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
+}
+
+input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+  --pico-form-element-focus-color: var(--pico-primary-focus);
+}
+
+@media only screen and (prefers-color-scheme: dark) {
+  :scope:not([data-theme]), :host(:not([data-theme])) {
+    color-scheme: dark;
+  }
+
+  :scope:not([data-theme]) details summary[role="button"].contrast:not(.outline):after, :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :scope:not([data-theme]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
+    filter: brightness(0);
+  }
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
+[data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, [data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
+  filter: brightness(0);
+}
+
+progress, [type="checkbox"], [type="radio"], [type="range"] {
+  accent-color: var(--pico-primary);
+}

package/css/layered/blades.layered.css

@@ -1,23 +1,23 @@
 @layer blades {
 /*!
  * Blades CSS v3 with Pico CSS 🥷✨
- * Copyright 2026 (https://blades.ninja/)
+ * Copyright 2026 (https://blades.dev/)
  * Licensed under MIT
  */
 /*!
  * Blades CSS' Pico fork v2.5 🥷✨
  * Copyright 2019-2025 (https://picocss.com)
- * Copyright 2026 (https://blades.ninja/css/pico/)
+ * Copyright 2026 (https://blades.dev/css/pico/)
  * Licensed under MIT
  */
 /*!
  * Blades CSS standalone kit v3 🥷
- * Copyright 2026 (https://blades.ninja/css/standalone/)
+ * Copyright 2026 (https://blades.dev/css/standalone/)
  * Licensed under MIT
  */
 /*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
- * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
+ * Copyright 2016–2026 (https://blades.dev/css/float-label/)
  * Licensed under MIT
  */
 :scope, :host {