@anyblades/blades 0.28.0 → 2.2.0

package/assets/{blades.theme.css → blades.standalone.theme.css}

@@ -1,5 +1,5 @@
 /*
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 /* Default/fallback state */
 label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
@@ -126,4 +126,4 @@ table pre {
     text-decoration-style: dotted;
   }
 /*```
-<!--section--> */
+\3c !--section--> */

package/assets/breakout.css

@@ -1,5 +1,5 @@
 /*
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 .breakout,
 .breakout-all {
@@ -76,17 +76,17 @@
       transform: translateX(-50%);
     }
 /*```
-<!--section:summary-->
+\3c !--section:summary-->
 
 The `.breakout` layout allows images, tables, and other figures to automatically extend or bleed beyond their parent container’s width.
 
-<!--section:docs-->
+\3c !--section:docs-->
 
-### Demo <!-- inside parent .breakout -->
+### Demo \3c !-- inside parent .breakout -->
 
 Break out a wide image from the text flow:
 
-<div><!-- Dummy div to avoid p tag in Markdown --></div><img
+<div>\3c !-- Dummy div to avoid p tag in Markdown --></div><img
   src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3000' height='300'><rect width='100%' height='100%' fill='gray'/></svg>">
 
 Or table:
@@ -115,4 +115,4 @@ Or anything else:
 <h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>
 <hr>
 
-<!--section--> */
+\3c !--section--> */

package/assets/float-label.core.css

@@ -1,5 +1,5 @@
 /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
-<!--section:docs-->
+\3c !--section:docs-->
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
@@ -53,4 +53,4 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
 
 Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
-<!--section--> */
+\3c !--section--> */

package/assets/float-label.css

@@ -1,6 +1,6 @@
 /* Float Label CSS v2.0.0-alpha */
 /* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
-<!--section:docs-->
+\3c !--section:docs-->
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
@@ -54,7 +54,7 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 The `:has(*:placeholder-shown:not(:focus))` trick allows this input state information to *propagate* to the parent level. This enables modern CSS to target inner float label (`<span>` or `<label>`) regardless of its position relative to the input field.
 
 Historically, this was not possible: the float label had to be placed after the input field to be targeted using the `input:focus + label` selector.
-<!--section--> */
+\3c !--section--> */
 /* Default/fallback state */
 label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
   label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,

package/assets/link-icon.css

@@ -1,5 +1,5 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 /* Use inline flex only if link contains an icon */
 a:has(> i) {
@@ -29,12 +29,12 @@ a > i.fa-lg {
       line-height: normal;
     }
 /*```
-<!--section:summary-->
+\3c !--section:summary-->
 
 Use *Bl*ades `<i>`-helper to wrap emojis, favicons, or simply drop Font Awesome icons inside links.
 It automatically handles sizing and alignment while preventing underline on icons.
 
-<!--section:docs-->
+\3c !--section:docs-->
 
 <article class="breakout-item">
 
@@ -55,4 +55,4 @@ How we made it: https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e
 
 **PRO** example of automatic favicons for `11ty`: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
 
-<!--section--> */
+\3c !--section--> */

package/assets/responsive-table.css

@@ -1,5 +1,5 @@
 /*
-<!--section:code-->
+\3c !--section:code-->
 ```css */
 table.responsive,
 .breakout > table:not(.does-not-exist),
@@ -31,12 +31,12 @@ table.responsive th,
 /*```
 `table:not(.does-not-exist)` trick (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:summary-->
+\3c !--section:summary-->
 
 `.responsive` makes a table full-bleed and scroll on mobile, without a need for a redundant wrapper (finally).
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
-<!--section:docs-->
+\3c !--section:docs-->
 
 ### Demo table
 
@@ -48,10 +48,10 @@ Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 ---
 
-Living examples: <!--A-Z-->
+Living examples: \3c !--A-Z-->
 - https://blades.ninja/ai/ide/
 - https://blades.ninja/build-awesome-11ty/starters/
 - https://blades.ninja/css/frameworks/
 - https://blades.ninja/ssg/
 
-<!--section--> */
+\3c !--section--> */

package/blades.gemspec

@@ -2,7 +2,7 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "blades"
-  spec.version       = "0.28.0"
+  spec.version       = "2.2.0"
   spec.authors       = ["Anton Staroverov"]
 
   spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@anyblades/blades",
-  "version": "0.28.0",
+  "version": "2.2.0",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
   "style": "./assets/blades.css",
   "exports": {
-    ".": "./src/blades.css",
-    "./core": "./src/blades.core.css",
-    "./theme": "./src/blades.theme.css",
-    "./float-label": "./src/float-label.css",
-    "./pico": "./src/pico.blades.css"
+    ".": "./src/blades.standalone.css",
+    "./core": "./src/blades.standalone.core.css",
+    "./theme": "./src/blades.standalone.theme.css",
+    "./float-label": "./src/float-label.css"
   },
   "scripts": {
     "postcss": "postcss './src/!(_)*.css' --dir ./assets",

package/src/_layout.css

@@ -1,5 +1,5 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs-->
+<!--section:docs,columns-->
 
 ### Auto-columns
 
@@ -17,10 +17,10 @@ The smaller the font size, the more columns will be created:
 
 Useful for tables of contents and long lists.
 
-<details>How it works:
+How it works:
 ```css */
 .columns {
-  columns: 30ch auto; /* 2 cols max for 65ch container */
+  columns: 25ch auto; /* common container 65ch / 25ch => 2 columns max, with a buffer for list paddings */
 
   /* Avoid breaking inside elements, such as nested lists */
   > * {
@@ -28,7 +28,7 @@ Useful for tables of contents and long lists.
   }
 }
 /*```
-</details>
+<!--section:docs,jump-->
 
 ### Jump to top
 

package/src/_utilities.css

@@ -9,7 +9,7 @@
   <p>Look how cool <big class="dark-auto">🔥🕷️🐦‍⬛🐄🦓</big> can look in the dark!</p>
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 /* Per https://picocss.com/docs/css-variables#css-variables-for-color-schemes */
 :root {
@@ -27,7 +27,6 @@
   }
 }
 /*```
-</details>
 
 ### Faded
 
@@ -37,7 +36,7 @@
   Hover to unfade me!
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 .faded {
   opacity: 50%;
@@ -47,7 +46,6 @@
   }
 }
 /*```
-</details>
 <!--section--> */
 
 /* Fix the scrollbar color when inverted by https://tailwindcss.com/docs/filter-invert */

package/src/blades.css

@@ -1,2 +1,6 @@
-@import "./blades.core";
-@import "./blades.theme";
+/*!
+ * Blades+Pico CSS ✨🥷
+ * Copyright 2026 - Licensed under MIT
+ */
+@import "@anyblades/pico";
+@import "./blades.standalone";

package/src/blades.standalone.css

@@ -0,0 +1,2 @@
+@import "./blades.standalone.core";
+@import "./blades.standalone.theme";

package/src/content/_code.css

@@ -11,7 +11,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 ├── blades.theme.css    # minimal opinionated theme
 └── blades.css          # above two together
 ```
-<details>How it works:
+How it works:
 ```css */
 pre {
   padding: 1rem 1.5rem;
@@ -54,5 +54,4 @@ code {
   }
 }
 /*```
-</details>
 <!--section--> */

package/src/content/_table.css

@@ -18,7 +18,7 @@ Living examples of big tables with `<hr>`-expanders: <!--A-Z-->
 - https://blades.ninja/css/frameworks/
 - https://blades.ninja/ssg/
 
-<details>How it works:
+How it works:
 ```css */
 th {
   hr {
@@ -36,7 +36,6 @@ th {
   }
 }
 /*```
-</details>
 
 ### Borderless table
 

package/src/content/_typography.css

@@ -1,5 +1,5 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs-->
+<!--section:docs,h-anchor-->
 
 ### Heading anchors
 
@@ -9,7 +9,7 @@ Links with `href="#..."` inside headings are automatically displayed as anchors:
   <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 h1,
 h2,
@@ -38,10 +38,11 @@ h6 {
   }
 }
 /*```
-</details>
 
 **PRO** example of automatic anchors for `11ty`+`markdown-it-anchor`: https://github.com/anyblades/eleventy-blades/blob/main/src/eleventy.config.js
 
+<!--section:docs,list-->
+
 ### List markers
 
 Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
@@ -59,7 +60,7 @@ Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or eve
 {style="--list-marker:'→ '"}
 </article>
 
-<details>How it works:
+How it works:
 ```css */
 ul,
 ol {
@@ -78,7 +79,6 @@ ol {
   }
 }
 /*```
-</details>
 
 ### Unlist
 
@@ -95,7 +95,7 @@ ol {
 
 `.unlist-all` also removes styling from all nested lists.
 
-<details>How it works:
+How it works:
 ```css */
 ul,
 ol {
@@ -110,5 +110,4 @@ ol {
   }
 }
 /*```
-</details>
 <!--section--> */