@anyblades/blades 3.1.0-alpha.2 → 3.1.0-beta.4

package/package.json

@@ -1,29 +1,30 @@
 {
   "name": "@anyblades/blades",
-  "version": "3.1.0-alpha.2",
+  "version": "3.1.0-beta.4",
   "style": "./src/blades.css",
   "exports": {
     ".": "./src/blades.css",
+    "./compact": "./src/blades/_compact.css",
+    "./float-label/*": "./src/blades/float-label/_*.css",
     "./pico": "./src/pico.css",
-    "./pico/variables": "./src/pico/_variables.css",
-    "./pico/layout": "./src/pico/layout/_index.css",
-    "./pico/layout/*": "./src/pico/layout/_*.css",
+    "./pico/components": "./src/pico/components/_index.css",
+    "./pico/components/*": "./src/pico/components/_*.css",
     "./pico/content": "./src/pico/content/_index.css",
     "./pico/content/*": "./src/pico/content/_*.css",
     "./pico/forms": "./src/pico/forms/_index.css",
     "./pico/forms/*": "./src/pico/forms/_*.css",
-    "./pico/components": "./src/pico/components/_index.css",
-    "./pico/components/*": "./src/pico/components/_*.css",
+    "./pico/layout": "./src/pico/layout/_index.css",
+    "./pico/layout/*": "./src/pico/layout/_*.css",
     "./pico/utilities": "./src/pico/_utilities.css",
-    "./standalone": "./src/blades.standalone.css",
-    "./float-label": "./src/standalone/forms/_float-label.css",
-    "./ninja": "./src/ninja.css",
+    "./pico/variables": "./src/pico/_variables.css",
     "./css/*.css": "./css/*.css",
+    "./layered/*": "./css/layered/*.css",
     "./package.json": "./package.json"
   },
   "files": [
     "src",
     "css/*.css",
+    "css/layered",
     "_includes",
     ".prettierrc.json"
   ],
@@ -32,9 +33,12 @@
     "build": "clear; npm run lint && npm run build:css && npm run build:minify && npm run build:conditional && npm run build:layered",
     "lint": "prettier --write --log-level silent './src/**/*.css'",
     "build:css": "postcss --config css './src/!(_)*.css' --dir css --no-map",
-    "build:minify": "cleancss -O1 --with-rebase --batch --batch-suffix .min ./css/*.css !./css/*.min.css !./css/pico.conditional.* !./css/pico.layered.*",
+    "build:minify": "for f in css/*.css; do case $f in *.min.css|css/pico.conditional.*) ;; *) lightningcss --minify $f -o ${f%.css}.min.css || exit 1;; esac; done",
     "build:conditional": "for f in '' .min; do { printf '@scope (.pico) {\\n'; cat ./css/pico${f}.css; printf '\\n}\\n'; } > ./css/pico.conditional${f}.css; done",
-    "build:layered": "for f in '' .min; do { printf '@layer pico {\\n'; cat ./css/pico${f}.css; printf '\\n}\\n'; } > ./css/pico.layered${f}.css; done",
+    "build:layered": "npm run build:layered:css && npm run build:layered:wrap && npm run build:layered:clean",
+    "build:layered:css": "rm -rf css/layered && postcss --config css './src/pico/**/_*.css' '!./src/pico/_index.css' ./src/blades/_compact.css --base src --dir css/layered --no-map && mv css/layered/pico/* css/layered/blades/* css/layered/ && rmdir css/layered/pico css/layered/blades",
+    "build:layered:wrap": "for f in css/blades.css css/blades.min.css $(find css/layered -name '_*.css'); do case $f in css/blades*) n=${f##*/}; o=css/layered/${n%%.*}.layered.${n#*.};; *) d=${f%/*}; n=${f##*/_}; [ $n = index.css ] && o=$d.css || o=$d/$n;; esac; { printf '@layer blades {\\n'; cat $f; printf '\\n}\\n'; } > $o || exit 1; done",
+    "build:layered:clean": "find css/layered -name '_*.css' -delete",
     "start": "npm run build:css -- --watch",
     "prepublishOnly": "npm run build"
   },
@@ -43,8 +47,8 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.5.0",
-    "clean-css-cli": "^5.4.2",
     "css-declaration-sorter": "^7.4.0",
+    "lightningcss-cli": "^1.33.0",
     "postcss": "^8.4.33",
     "postcss-cli": "^12.0.0",
     "postcss-import": "^16.1.1",

package/src/blades/_compact.css

@@ -0,0 +1,51 @@
+/*
+ * 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
+ * changes nothing. Part of blades.css (and blades.layered.css); with per-part imports, import it
+ * last (in the same layer as the other parts).
+ *
+ * The extra selectors keep the values winning where Pico re-declares them at the same
+ * specificity: nested [data-theme] sections, the `.pico` root when combined with the conditional build,
+ * and a shadow host.
+ */
+[data-compact],
+[data-compact] :is([data-theme], .pico),
+.pico[data-compact],
+:host([data-compact]),
+:host([data-compact]) [data-theme] {
+  --pico-border-radius: 0.5rem;
+  --pico-outline-width: 0.1875rem;
+  --pico-block-spacing-vertical: 1.5rem;
+  --pico-block-spacing-horizontal: 1.5rem;
+  --pico-form-element-spacing-vertical: 0.375rem;
+  --pico-form-element-spacing-horizontal: 0.75rem;
+  --pico-form-label-font-weight: 500;
+  --pico-button-font-weight: 500;
+  --pico-form-element-background-color: light-dark(#fff, rgb(28, 33, 43.5));
+  --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 rgba(0, 0, 0, 0.05);
+  --pico-card-sectioning-background-color: var(--pico-card-background-color);
+}
+
+/* Search fields keep their pill shape */
+[data-compact]:is([role="search"], [type="search"]) {
+  --pico-border-radius: 5rem;
+}
+
+/* Page-level only: everything is sized in rem, so the root size can't change per element */
+: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;
+}
+
+/* Keep helper text at the normal weight under the 500-weight labels */
+[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/src/blades/_dropdown-popover.css

@@ -0,0 +1,107 @@
+/*<!--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`).
+
+<!--section:code-->```css */
+:is(ul, menu)[popover] {
+  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 */
+  &:not(:popover-open) {
+    display: none;
+  }
+  &:popover-open {
+    display: block;
+    opacity: 1;
+  }
+
+  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;
+
+    &:first-of-type {
+      margin-top: calc(var(--pico-form-element-spacing-vertical) * 0.5);
+    }
+    &:last-of-type {
+      margin-bottom: calc(var(--pico-form-element-spacing-vertical) * 0.5);
+    }
+    &:has(label):hover {
+      background-color: var(--pico-dropdown-hover-background-color);
+    }
+  }
+  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(:hover, :focus, :active, :focus-visible, [aria-current]:not([aria-current="false"])) {
+      background-color: var(--pico-dropdown-hover-background-color);
+    }
+  }
+  li label {
+    width: 100%;
+  }
+}
+/* Beats Pico's `nav ul:first-of-type` / `:last-of-type` margins */
+nav :is(ul, menu)[popover] {
+  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] {
+    inset: auto;
+    margin: 0;
+    margin-top: var(--pico-outline-width);
+    position-area: bottom span-right;
+    position-try-fallbacks: flip-block, flip-inline;
+
+    &:dir(rtl) {
+      position-area: bottom span-left;
+    }
+  }
+}

package/src/blades/_index.css

@@ -0,0 +1,28 @@
+/*!
+ * Blades CSS standalone kit v3 🥷
+ * Copyright 2026 (https://blades.ninja/css/standalone/)
+ * Licensed under MIT
+ */
+/*<!--section:code-->```css */
+
+/* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
+
+@import "./_variables";
+
+/* Layout */
+@import "./_columns";
+
+/* Content */
+@import "./_code";
+
+/* Forms */
+@import "./float-label/_index";
+
+/* Components */
+@import "./_modal";
+@import "./_icon";
+@import "./_dropdown-popover";
+@import "./_timeline";
+
+/* Compact version (opt-in via `data-compact` attr anywhere) */
+@import "./_compact";

package/src/blades/_modal.css

@@ -0,0 +1,26 @@
+/*<!--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.
+
+<!--section:code-->```css */
+dialog:modal {
+  transition: opacity var(--pico-transition);
+
+  > article {
+    transition: transform var(--pico-transition);
+  }
+}
+@starting-style {
+  dialog:modal {
+    opacity: 0;
+
+    > article {
+      transform: scale(0.96);
+    }
+  }
+}

package/src/blades/float-label/_index.css

@@ -0,0 +1,2 @@
+@import "./_core";
+@import "./_theme";

package/src/{standalone/forms/_float-label.theme.css → blades/float-label/_theme.css}

@@ -1,4 +1,8 @@
-label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
+label:has(> span):has(
+    input:not([type="checkbox"], [type="radio"], [type="range"]),
+    textarea,
+    select
+  ),
 .has-float-label {
   /* Default/fallback state */
   > span,

package/src/blades.css

@@ -3,5 +3,5 @@
  * Copyright 2026 (https://blades.ninja/)
  * Licensed under MIT
  */
-@import "./pico";
-@import "./blades.standalone";
+@import "./pico/_index";
+@import "./blades/_index";

package/src/blades.ninja.css

@@ -0,0 +1,3 @@
+@import "./blades";
+@import "./pico/layout/_landmarks";
+@import "./ninja/_index";

package/src/float-label.css

@@ -0,0 +1 @@
+@import "./blades/float-label/_index";

package/src/ninja/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Anton Staroverov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/src/ninja/README.md

@@ -0,0 +1 @@
+# Ninja CSS add-ons for Blades CSS

package/src/ninja/_index.css

@@ -0,0 +1,19 @@
+/*!
+ * Blades CSS' ninja add-ons (experimental) 🥷🧪
+ * Copyright 2026 (https://blades.ninja/css/ninja/)
+ * Licensed under MIT
+ */
+
+/* Layout */
+@import "./_container-breakout";
+@import "./_page-anchors";
+
+/* Content */
+@import "./_heading-anchor";
+@import "./_list-helpers";
+@import "./_table-helpers";
+@import "./_table-responsive";
+
+/* Other */
+@import "./_utilities";
+@import "./_theme";

package/src/{standalone → ninja}/_theme.css

@@ -1,6 +1,4 @@
 /*<!--section:code-->```css */
-@import "./forms/_float-label.theme";
-
 html {
   /* Prevent horizontal overflow and scrolling, modern way. */
   overflow-x: clip;

package/src/{ninja.css → ninja/_utilities.css}

@@ -1,8 +1,3 @@
-/*!
- * Blades CSS' ninja add-ons (experimental) 🥷🧪
- * Copyright 2026 (https://blades.ninja/css/ninja/)
- * Licensed under MIT
- */
 /*<!--section:docs-->
 
 ### `sup`er &nbsp; and &nbsp; `sub`headings
@@ -80,4 +75,58 @@ img[src*="?domain=github.com&"] {
     filter: invert(1);
   }
 }
-/*```*/
+/*```
+
+## Dark auto
+
+`.dark-auto` automatically creates a simple dark version of any element:
+
+<article data-theme="dark">
+  <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
+</article>
+
+How it works:
+```css */
+/* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
+:root {
+  --blades-dark-filter: invert(100%) hue-rotate(180deg);
+}
+.dark-auto {
+  /* Dark color scheme (Auto) */
+  @media (prefers-color-scheme: dark) {
+    filter: var(--blades-dark-filter);
+  }
+  /* Dark color scheme (Forced) */
+  &[data-theme="dark"],
+  &:where([data-theme="dark"] *) {
+    filter: var(--blades-dark-filter);
+  }
+}
+/*```
+
+## Faded
+
+`.faded` reduces the opacity of an element:
+
+<article class="faded">
+  Hover to unfade me!
+</article>
+
+How it works:
+```css */
+.faded {
+  opacity: 50%;
+
+  &:hover {
+    opacity: 87.5%;
+  }
+}
+/*```
+<!--section--> */
+
+/* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */
+.invert {
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}

package/src/pico/_variables.css

@@ -225,7 +225,8 @@ details summary[role="button"]:not(.outline)::after {
   --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(rgba(2, 154, 232, 0.5), rgba(1, 170, 255, 0.375));
+  /* Focus rings are opaque: at 25–50% alpha they composite below 3:1 (SC 1.4.11), see #167 */
+  --pico-primary-focus: light-dark(rgb(2, 138, 212), rgb(1, 170, 255));
   --pico-primary-inverse: #fff;
   --pico-secondary: light-dark(#5d6b89, #969eaf);
   --pico-secondary-background: #525f7a;
@@ -235,7 +236,7 @@ details summary[role="button"]:not(.outline)::after {
   --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(rgba(93, 107, 137, 0.25), rgba(144, 158, 190, 0.25));
+  --pico-secondary-focus: light-dark(rgb(93, 107, 137), rgb(144, 158, 190));
   --pico-secondary-inverse: #fff;
   --pico-contrast: light-dark(#181c25, #dfe3eb);
   --pico-contrast-background: light-dark(#181c25, #eff1f4);
@@ -248,7 +249,7 @@ details summary[role="button"]:not(.outline)::after {
     var(--pico-secondary-hover),
     var(--pico-contrast-hover)
   );
-  --pico-contrast-focus: light-dark(rgba(93, 107, 137, 0.25), rgba(207, 213, 226, 0.25));
+  --pico-contrast-focus: light-dark(rgb(93, 107, 137), rgb(207, 213, 226));
   --pico-contrast-inverse: light-dark(#fff, #000);
   --pico-box-shadow: 0 0.5rem 2.5rem light-dark(rgba(129, 145, 181, 0.2), rgba(7, 8.5, 12, 0.2));
   --pico-h1-color: light-dark(#2d3138, #f0f1f3);
@@ -282,11 +283,11 @@ details summary[role="button"]:not(.outline)::after {
   --pico-form-element-disabled-opacity: 0.5;
   --pico-form-element-invalid-border-color: light-dark(
     rgb(183.5, 105.5, 106.5),
-    rgb(149.5, 74, 80)
+    rgb(200.25, 79.25, 72.25)
   );
   --pico-form-element-invalid-active-border-color: light-dark(
     rgb(200.25, 79.25, 72.25),
-    rgb(183.25, 63.5, 59)
+    rgb(214, 92, 86)
   );
   --pico-form-element-invalid-focus-color: var(--pico-form-element-invalid-active-border-color);
   --pico-form-element-valid-border-color: light-dark(rgb(76, 154.5, 137.5), #2a7b6f);

package/src/pico/components/_loading.css

@@ -10,7 +10,11 @@
   --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 {
@@ -38,3 +42,25 @@ button[aria-busy="true"],
 a[aria-busy="true"] {
   pointer-events: none;
 }
+
+/* Buttons keep their size: the label stays in place but hidden, the spinner sits on top */
+button,
+[type="submit"],
+[type="button"],
+[type="reset"],
+[role="button"] {
+  &[aria-busy="true"]:not(:empty) {
+    position: relative;
+    color: transparent;
+
+    > * {
+      opacity: 0;
+    }
+
+    &::before {
+      position: absolute;
+      inset: 0;
+      margin: auto;
+    }
+  }
+}

package/src/pico/content/_button.css

@@ -32,7 +32,7 @@ button,
   background-color: var(--pico-background-color);
   box-shadow: var(--pico-box-shadow);
   color: var(--pico-color);
-  font-weight: var(--pico-font-weight);
+  font-weight: var(--pico-button-font-weight, var(--pico-font-weight));
   font-size: 1rem;
   line-height: var(--pico-line-height);
   text-align: center;

package/src/pico/layout/_document.css

@@ -34,3 +34,12 @@
   -o-tab-size: 4;
   tab-size: 4;
 }
+
+body {
+  width: 100%;
+  margin: 0;
+}
+
+main {
+  display: block;
+}

package/src/pico/layout/_index.css

@@ -1,5 +1,4 @@
 @import "./_document";
-@import "./_landmarks";
 @import "./_section";
 @import "./_container";
 @import "./_grid";

package/src/pico/layout/_landmarks.css

@@ -1,15 +1,7 @@
 /**
  * Landmarks
+ * Included in pico.css and blades.ninja.css; not in blades.css
  */
-body {
-  width: 100%;
-  margin: 0;
-}
-
-main {
-  display: block;
-}
-
 body > header,
 body > main,
 body > footer {

package/src/pico.css

@@ -1 +1,2 @@
 @import "./pico/_index";
+@import "./pico/layout/_landmarks";