@anyblades/blades 2.3.2 → 2.4.0

package/README.md

@@ -1,4 +1,6 @@
-# 🥷 *Bl*ades &nbsp;<img src='https://img.shields.io/npm/v/@anyblades/blades?label=&color=white'>
+# 🥷 *Bl*ades &nbsp;![][B_NPM]
+
+[B_NPM]: https://img.shields.io/npm/v/@anyblades/blades?label=&color=white
 
 <!--section:summary-->
 
@@ -59,7 +61,7 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
 - https://github.com/getgrav/grav-theme-quark2 for Grav CMS v2
 - https://jekyll.blades.ninja/ starter <!--{.faded}-->
 
-### Standalone version
+### Standalone versions
 
 - https://blades.ninja/css/standalone/
 

package/_includes/blades/links.njk

@@ -0,0 +1,9 @@
+<ul>
+  {%- for link in links %}
+    <li>
+      <a href="{{ link.url }}" {% if link.url == current_url %}aria-current="page"{% endif %}>
+        {{- link.title | safe -}}
+      </a>
+    </li>
+  {%- endfor %}
+</ul>

package/blades.gemspec

@@ -2,12 +2,12 @@
 
 Gem::Specification.new do |spec|
   spec.name          = "blades"
-  spec.version       = "2.3.2"
+  spec.version       = "2.4.0"
+  
   spec.authors       = ["Anton Staroverov"]
-
-  spec.summary       = "Fully compatible and actively maintained successor to Pico CSS."
-  spec.homepage      = "https://github.com/anyblades/blades"
+  spec.homepage      = "https://blades.ninja/"
   spec.license       = "MIT"
+  spec.summary       = "Fully compatible and actively maintained successor to Pico CSS."
 
   spec.files = Dir.glob("{_includes,css}/**/*")
   # puts "spec.files: #{spec.files.inspect}"

package/css/blades.css

@@ -3498,11 +3498,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 ```
 How it works:
 ```css */
-pre {
-  padding: 1rem 1.5rem;
-  padding-inline-end: 2rem;
-}
-@media (max-width: 767px) {
+@media (width < 768px) {
 pre {
     border-radius: 0
 }
@@ -3515,9 +3511,6 @@ code[data-caption]::before {
       font-style: italic;
       opacity: 50%;
     }
-code:where(pre > *) {
-    padding: 0;
-  }
 /*```
 \3c !--section--> */
 /* Forms */
@@ -3526,9 +3519,9 @@ code:where(pre > *) {
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (alternative approach)
+2. or explicit `.has-float-label` class (explicit approach)
 ```css */
-label: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 {
   display: block;
   position: relative;
@@ -3537,8 +3530,8 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
-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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     position: absolute;
@@ -3551,21 +3544,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
@@ -3577,6 +3570,29 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
 
 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.
 \3c !--section--> */
+/* Components */
+/*\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:
+
+<article class="has-timeline">
+
+May 11, 2026
+: First Blades CSS stable release (v2.2.0).
+
+Mar 15, 2025
+: Last Pico CSS update (v2.1.1).
+
+</article>
+
+\3c !--section:code-->```css */
+dl.timeline dd, .has-timeline > dl dd {
+    margin-block: 0;
+    padding: 0.25rem 0 0.75rem 1rem;
+    border-inline-start: 0.25rem solid gray;
+  }
+/*```*/
 /* Utilities */
 /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
 \3c !--section:docs-->
@@ -3636,8 +3652,8 @@ How it works:
 \3c !--section:code-->
 ```css */
 /* 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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
@@ -3645,9 +3661,9 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     opacity: 75%;
     transition: all 0.25s;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
   .has-float-label input,
   .has-float-label textarea,
   .has-float-label select {
@@ -3655,21 +3671,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     padding-inline-start: 1rem; /* match Pico */
     padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
       opacity: 100%;
       -moz-transition: all 0.25s;
       transition: all 0.25s;
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
       opacity: 100%;
       transition: all 0.25s;
     }
 /* Enlarged state */
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
@@ -3712,6 +3728,14 @@ a:not([href^="#"]) {
 a:not([href^="#"]):hover {
       text-decoration-thickness: 2px;
     }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
 h1 {
   margin-bottom: 1rem; /* for tw-typography */
   font-size: 2.5em; /* for pico.css & tw-typography */
@@ -3722,10 +3746,20 @@ hr {
 ul ul {
     font-size: 87.5%;
   }
+dl dt {
+    margin-block: 0.25rem;
+    font-weight: 500;
+  }
+dl dd {
+    margin-block-end: 1rem;
+  }
 pre small {
     font-weight: lighter;
     opacity: 75%;
   }
+pre:has(code) {
+    background: #181c25 !important;
+  }
 table th {
     font-weight: bold;
     vertical-align: bottom;

package/css/blades.ninja.css

@@ -0,0 +1,54 @@
+/*\3c !--section:docs-->
+
+### `sup`er   and   `sub`headings
+
+<article><br>
+
+# <sup style>Parent page</sup> Page title <sub style>Subtitle</sub>
+
+</article>
+
+How it works:
+```css */
+sup[style] {
+  display: block;
+  font-size: 0.75rem;
+  letter-spacing: 0.0625em;
+  text-transform: uppercase;
+}
+sub[style] {
+  display: block;
+  bottom: 0;
+  font-weight: 300;
+  line-height: 1.1;
+  opacity: 75%;
+}
+sub[style]:where(h1 > *) {
+    font-size: 50%;
+  }
+/*```
+
+### `.opt`ional content
+
+How it works:
+```css */
+@media (width < 1024px) {
+.opt {
+    display: none
+}
+  }
+/*```
+
+### Nicer GitHub favicons
+
+How it works:
+```css */
+img[src*="?domain=github.com&"] {
+  border-radius: 50%;
+}
+@media (prefers-color-scheme: dark) {
+img[src*="?domain=github.com&"] {
+    filter: invert(1)
+}
+  }
+/*```*/

package/css/blades.standalone.core.css

@@ -551,12 +551,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 How it works:
 ```css */
 
-pre {
-  padding: 1rem 1.5rem;
-  padding-inline-end: 2rem;
-}
-
-@media (max-width: 767px) {
+@media (width < 768px) {
 
 pre {
     border-radius: 0
@@ -573,10 +568,6 @@ code[data-caption]::before {
       opacity: 50%;
     }
 
-code:where(pre > *) {
-    padding: 0;
-  }
-
 /*```
 \3c !--section--> */
 
@@ -587,10 +578,10 @@ code:where(pre > *) {
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (alternative approach)
+2. or explicit `.has-float-label` class (explicit approach)
 ```css */
 
-label: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 {
   display: block;
   position: relative;
@@ -601,8 +592,8 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
 
-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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     position: absolute;
@@ -617,25 +608,25 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
@@ -649,6 +640,33 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
 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.
 \3c !--section--> */
 
+/* Components */
+
+/*\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:
+
+<article class="has-timeline">
+
+May 11, 2026
+: First Blades CSS stable release (v2.2.0).
+
+Mar 15, 2025
+: Last Pico CSS update (v2.1.1).
+
+</article>
+
+\3c !--section:code-->```css */
+
+dl.timeline dd, .has-timeline > dl dd {
+    margin-block: 0;
+    padding: 0.25rem 0 0.75rem 1rem;
+    border-inline-start: 0.25rem solid gray;
+  }
+
+/*```*/
+
 /* Utilities */
 
 /* Extends https://github.com/picocss/pico/tree/main/scss/utilities

package/css/blades.standalone.css

@@ -551,12 +551,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 How it works:
 ```css */
 
-pre {
-  padding: 1rem 1.5rem;
-  padding-inline-end: 2rem;
-}
-
-@media (max-width: 767px) {
+@media (width < 768px) {
 
 pre {
     border-radius: 0
@@ -573,10 +568,6 @@ code[data-caption]::before {
       opacity: 50%;
     }
 
-code:where(pre > *) {
-    padding: 0;
-  }
-
 /*```
 \3c !--section--> */
 
@@ -587,10 +578,10 @@ code:where(pre > *) {
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (alternative approach)
+2. or explicit `.has-float-label` class (explicit approach)
 ```css */
 
-label: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 {
   display: block;
   position: relative;
@@ -601,8 +592,8 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
 
-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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     position: absolute;
@@ -617,25 +608,25 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
@@ -649,6 +640,33 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
 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.
 \3c !--section--> */
 
+/* Components */
+
+/*\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:
+
+<article class="has-timeline">
+
+May 11, 2026
+: First Blades CSS stable release (v2.2.0).
+
+Mar 15, 2025
+: Last Pico CSS update (v2.1.1).
+
+</article>
+
+\3c !--section:code-->```css */
+
+dl.timeline dd, .has-timeline > dl dd {
+    margin-block: 0;
+    padding: 0.25rem 0 0.75rem 1rem;
+    border-inline-start: 0.25rem solid gray;
+  }
+
+/*```*/
+
 /* Utilities */
 
 /* Extends https://github.com/picocss/pico/tree/main/scss/utilities
@@ -725,8 +743,8 @@ How it works:
 
 /* 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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
@@ -735,9 +753,9 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     transition: all 0.25s;
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
   .has-float-label input,
   .has-float-label textarea,
   .has-float-label select {
@@ -746,25 +764,25 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
   }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
       opacity: 100%;
       -moz-transition: all 0.25s;
       transition: all 0.25s;
     }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
       opacity: 100%;
       transition: all 0.25s;
     }
 
 /* Enlarged state */
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
 
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
@@ -815,6 +833,15 @@ a:not([href^="#"]):hover {
       text-decoration-thickness: 2px;
     }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
+
 h1 {
   margin-bottom: 1rem; /* for tw-typography */
   font-size: 2.5em; /* for pico.css & tw-typography */
@@ -828,11 +855,24 @@ ul ul {
     font-size: 87.5%;
   }
 
+dl dt {
+    margin-block: 0.25rem;
+    font-weight: 500;
+  }
+
+dl dd {
+    margin-block-end: 1rem;
+  }
+
 pre small {
     font-weight: lighter;
     opacity: 75%;
   }
 
+pre:has(code) {
+    background: #181c25 !important;
+  }
+
 table th {
     font-weight: bold;
     vertical-align: bottom;

package/css/blades.standalone.theme.css

@@ -2,8 +2,8 @@
 \3c !--section:code-->
 ```css */
 /* 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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
@@ -11,9 +11,9 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     opacity: 75%;
     transition: all 0.25s;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
   .has-float-label input,
   .has-float-label textarea,
   .has-float-label select {
@@ -21,21 +21,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     padding-inline-start: 1rem; /* match Pico */
     padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
       opacity: 100%;
       -moz-transition: all 0.25s;
       transition: all 0.25s;
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
       opacity: 100%;
       transition: all 0.25s;
     }
 /* Enlarged state */
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
@@ -78,6 +78,14 @@ a:not([href^="#"]) {
 a:not([href^="#"]):hover {
       text-decoration-thickness: 2px;
     }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
 h1 {
   margin-bottom: 1rem; /* for tw-typography */
   font-size: 2.5em; /* for pico.css & tw-typography */
@@ -88,10 +96,20 @@ hr {
 ul ul {
     font-size: 87.5%;
   }
+dl dt {
+    margin-block: 0.25rem;
+    font-weight: 500;
+  }
+dl dd {
+    margin-block-end: 1rem;
+  }
 pre small {
     font-weight: lighter;
     opacity: 75%;
   }
+pre:has(code) {
+    background: #181c25 !important;
+  }
 table th {
     font-weight: bold;
     vertical-align: bottom;

package/css/float-label.core.css

@@ -3,9 +3,9 @@
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (alternative approach)
+2. or explicit `.has-float-label` class (explicit approach)
 ```css */
-label: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 {
   display: block;
   position: relative;
@@ -14,8 +14,8 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
-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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     position: absolute;
@@ -28,21 +28,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;

package/css/float-label.css

@@ -4,9 +4,9 @@
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (alternative approach)
+2. or explicit `.has-float-label` class (explicit approach)
 ```css */
-label: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 {
   display: block;
   position: relative;
@@ -15,8 +15,8 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Then, we define the default/fallback state (when the float label should be minimized):
 ```css */
-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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     position: absolute;
@@ -29,21 +29,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
 ```
 Finally, we detect if placeholder is shown, but not in focus. That means we can safely hide it, and enlarge the float label instead:
 ```css */
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::-moz-placeholder, .has-float-label *:placeholder-shown:not(:focus)::-moz-placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:-moz-placeholder:not(:focus)::placeholder, .has-float-label *:-moz-placeholder:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) *:placeholder-shown:not(:focus)::placeholder, .has-float-label *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       font-size: inherit;
       opacity: 50%;
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       font-size: inherit;
@@ -56,8 +56,8 @@ The `:has(*:placeholder-shown:not(:focus))` trick allows this input state inform
 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.
 \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,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
@@ -65,9 +65,9 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     opacity: 75%;
     transition: all 0.25s;
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
   .has-float-label input,
   .has-float-label textarea,
   .has-float-label select {
@@ -75,21 +75,21 @@ label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea
     padding-inline-start: 1rem; /* match Pico */
     padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
   }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
       opacity: 100%;
       -moz-transition: all 0.25s;
       transition: all 0.25s;
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
       opacity: 100%;
       transition: all 0.25s;
     }
 /* Enlarged state */
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
-label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */

package/css/float-label.theme.css

@@ -1,6 +1,6 @@
 /* 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,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) > span,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) label,
   .has-float-label > span,
   .has-float-label label {
     padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
@@ -8,9 +8,9 @@
     opacity: 75%;
     transition: all 0.25s;
   }
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select,
   .has-float-label input,
   .has-float-label textarea,
   .has-float-label select {
@@ -18,21 +18,21 @@
     padding-inline-start: 1rem; /* match Pico */
     padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
   }
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::-moz-placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::-moz-placeholder, .has-float-label input::-moz-placeholder, .has-float-label textarea::-moz-placeholder, .has-float-label select::-moz-placeholder {
       opacity: 100%;
       -moz-transition: all 0.25s;
       transition: all 0.25s;
     }
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) input::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) textarea::placeholder, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) select::placeholder, .has-float-label input::placeholder, .has-float-label textarea::placeholder, .has-float-label select::placeholder {
       opacity: 100%;
       transition: all 0.25s;
     }
   /* Enlarged state */
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) > span, label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:-moz-placeholder:not(:focus)) label, .has-float-label:has(*:-moz-placeholder:not(:focus)) > span, .has-float-label:has(*:-moz-placeholder:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */
     }
-  label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
-    label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
+  label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) > span,
+    label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):has(*:placeholder-shown:not(:focus)) label,
     .has-float-label:has(*:placeholder-shown:not(:focus)) > span,
     .has-float-label:has(*:placeholder-shown:not(:focus)) label {
       padding-block: 0.75rem; /* match Pico */

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@anyblades/blades",
-  "version": "2.3.2",
-  "description": "Fully compatible and actively maintained successor to Pico CSS.",
+  "version": "2.4.0",
   "exports": {
     ".": "./src/blades.css",
     "./standalone": "./src/blades.standalone.css",
@@ -9,25 +8,13 @@
     "./standalone/theme": "./src/blades.standalone.theme.css",
     "./float-label": "./src/float-label.css"
   },
+  "=== DEV ONLY": "===",
   "scripts": {
     "postcss": "postcss './src/!(_)*.css' --dir ./css/",
     "build": "npm run postcss -- --no-map",
     "start": "npm run postcss -- --watch",
     "prepublishOnly": "npm run build"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/anyblades/blades.git"
-  },
-  "keywords": [
-    "css",
-    "utilities",
-    "helpers",
-    "atomic",
-    "cdn"
-  ],
-  "author": "Anton Staroverov",
-  "license": "MIT",
   "devDependencies": {
     "@anyblades/pico": "^2.3.0",
     "autoprefixer": "^10.5.0",
@@ -37,5 +24,26 @@
     "postcss-import": "^16.1.1",
     "postcss-nested": "^7.0.2",
     "prettier-plugin-jinja-template": "^2.1.0"
-  }
-}
+  },
+  "=== METADATA": "A-Z",
+  "author": "Anton Staroverov",
+  "description": "Fully compatible and actively maintained successor to Pico CSS.",
+  "keywords": [
+    "blades",
+    "classless",
+    "css-framework",
+    "css",
+    "dark-mode",
+    "dark-theme",
+    "lightweight",
+    "minimal",
+    "native-html",
+    "semantic"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/anyblades/blades.git"
+  },
+  "===": "==="
+}

package/src/blades.ninja.css

@@ -0,0 +1,54 @@
+/*<!--section:docs-->
+
+### `sup`er &nbsp; and &nbsp; `sub`headings
+
+<article><br>
+
+# <sup style>Parent page</sup> Page title <sub style>Subtitle</sub>
+
+</article>
+
+How it works:
+```css */
+sup[style] {
+  display: block;
+  font-size: 0.75rem;
+  letter-spacing: 0.0625em;
+  text-transform: uppercase;
+}
+sub[style] {
+  display: block;
+  line-height: 1.1;
+  bottom: 0;
+  font-weight: 300;
+  opacity: 75%;
+
+  &:where(h1 > *) {
+    font-size: 50%;
+  }
+}
+/*```
+
+### `.opt`ional content
+
+How it works:
+```css */
+.opt {
+  @media (width < 1024px) {
+    display: none;
+  }
+}
+/*```
+
+### Nicer GitHub favicons
+
+How it works:
+```css */
+img[src*="?domain=github.com&"] {
+  border-radius: 50%;
+
+  @media (prefers-color-scheme: dark) {
+    filter: invert(1);
+  }
+}
+/*```*/

package/src/blades.standalone.core.css

@@ -14,5 +14,8 @@
 /* Forms */
 @import "./float-label.core";
 
+/* Components */
+@import "./components/_timeline";
+
 /* Utilities */
 @import "./_utilities";

package/src/blades.standalone.theme.css

@@ -45,6 +45,14 @@ a {
   }
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  text-wrap: balance;
+}
 h1 {
   font-size: 2.5em; /* for pico.css & tw-typography */
   margin-bottom: 1rem; /* for tw-typography */
@@ -60,11 +68,24 @@ ul {
   }
 }
 
+dl {
+  dt {
+    margin-block: 0.25rem;
+    font-weight: 500;
+  }
+  dd {
+    margin-block-end: 1rem;
+  }
+}
+
 pre {
   small {
     opacity: 75%;
     font-weight: lighter;
   }
+  &:has(code) {
+    background: #181c25 !important;
+  }
 }
 
 table {

package/src/components/_timeline.css

@@ -0,0 +1,25 @@
+/*<!--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:
+
+<article class="has-timeline">
+
+May 11, 2026
+: First Blades CSS stable release (v2.2.0).
+
+Mar 15, 2025
+: Last Pico CSS update (v2.1.1).
+
+</article>
+
+<!--section:code-->```css */
+dl.timeline,
+.has-timeline > dl {
+  dd {
+    padding: 0.25rem 0 0.75rem 1rem;
+    margin-block: 0;
+    border-inline-start: 0.25rem solid gray;
+  }
+}
+/*```*/

package/src/content/_code.css

@@ -14,10 +14,7 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 How it works:
 ```css */
 pre {
-  padding: 1rem 1.5rem;
-  padding-inline-end: 2rem;
-
-  @media (max-width: 767px) {
+  @media (width < 768px) {
     border-radius: 0;
   }
 }
@@ -33,10 +30,6 @@ code {
       font-style: italic;
     }
   }
-
-  &:where(pre > *) {
-    padding: 0;
-  }
 }
 /*```
 <!--section--> */

package/src/float-label.core.css

@@ -3,9 +3,9 @@
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
-2. or explicit `.has-float-label` class (alternative approach)
+2. or explicit `.has-float-label` class (explicit approach)
 ```css */
-label: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 {
   display: block;
   position: relative;

package/src/float-label.theme.css

@@ -1,4 +1,4 @@
-label: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,