@anyblades/blades 3.0.0-alpha.2 → 3.0.0-alpha.3

package/README.md

@@ -4,7 +4,7 @@
 
 <!--section:summary-->
 
-<h1><span class="mark-brand">Minimal CSS Framework</span> <small>for</small> Semantic HTML</h1>
+<h1><b class="mark-brand">Minimal CSS Framework</b> <small>for</small> Semantic HTML</h1>
 
 <big>Fully compatible and actively maintained successor to [Pico CSS](//blades.ninja/css/pico/).</big>
 
@@ -42,13 +42,13 @@ Simply switch `pico.css` to `blades.css` OR use `blades.standalone.css` with oth
 <!--prettier-ignore-->
 ```html
 <link rel="stylesheet" href="
-  https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/blades.min.css
+  https://cdn.jsdelivr.net/npm/@anyblades/blades@^3.0.0-0/css/blades.min.css
 "/>
 ```
 
 Live example: https://github.com/pallets/website/blob/main/src/pallets/templates/layout.html
 
-Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@3/css/
+Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades/blades@^3.0.0-0/css/
 
 ### <mark>C.</mark> Install with NPM
 
@@ -56,7 +56,7 @@ Full list of CSS files available on CDN: https://cdn.jsdelivr.net/npm/@anyblades
 npm install @anyblades/blades
 ```
 
-Then, `@import` Blades into your CSS file:
+Then, `@import` sources into your CSS file:
 
 ```css
 @import "@anyblades/blades";
@@ -104,7 +104,7 @@ Live example using <i class="fa-brands fa-tailwind-css"></i> Tailwind: https://g
 
 ### Dynamic templates
 
-[Available for Nunjucks, Twig and Liquid ↗](https://blades.ninja/tpl/)<!--{role=button .outline}-->
+[Available for Nunjucks, Liquid and Twig ↗](https://blades.ninja/tpl/)<!--{role=button .outline}-->
 
 <!--section:gh-only-->
 

package/css/blades.css

@@ -3296,17 +3296,17 @@ textarea,
 
 /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
 
-.breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
+.breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr:not([class]) + *)::before {
         display: none !important;
       }
 
-.breakout-all > *:is(hr) {
+.breakout-all > *:is(hr):not([class]) {
     height: 0.5rem;
     overflow: visible;
     border: none;
   }
 
-.breakout-all > *:is(hr)::before {
+.breakout-all > *:is(hr):not([class])::before {
       left: 50%;
       width: 100dvw;
       height: 100%;

package/css/blades.min.css

@@ -118,7 +118,7 @@ button:focus,[type=submit]:focus,[type=button]:focus,[role=button]:focus
 table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
 ),.breakout>:is(
 table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
-){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
+){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr:not([class]) + *)::before{display:none!important}.breakout-all>:is(hr):not([class]){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr):not([class])::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
  * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
  * Licensed under MIT

package/css/blades.standalone.css

@@ -105,17 +105,17 @@
 
 /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
 
-.breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr + *)::before {
+.breakout-all > *:is(h2, h3, h4, h5, h6):not([class]):where(hr:not([class]) + *)::before {
         display: none !important;
       }
 
-.breakout-all > *:is(hr) {
+.breakout-all > *:is(hr):not([class]) {
     height: 0.5rem;
     overflow: visible;
     border: none;
   }
 
-.breakout-all > *:is(hr)::before {
+.breakout-all > *:is(hr):not([class])::before {
       left: 50%;
       width: 100dvw;
       height: 100%;

package/css/blades.standalone.min.css

@@ -10,7 +10,7 @@
 table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
 ),.breakout>:is(
 table,pre,figure,video,iframe,canvas,img,picture,.breakout-item,.breakout-item-max
-){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr + *)::before{display:none!important}.breakout-all>:is(hr){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr)::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
+){width:-moz-fit-content;width:fit-content;min-width:100%;max-width:min(125%,100dvw);margin-left:50%;transform:translateX(-50%)}.breakout-all>:is(img,picture):not(.does-not-exist),.breakout>:is(img,picture):not(.does-not-exist){min-width:auto}.breakout-all>.breakout-item-max,.breakout>.breakout-item-max{width:min(125%,100dvw)!important}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class]){position:relative}.breakout-all>:is(h2,h3,h4,h5,h6,hr):not([class])::before{display:block;position:absolute;background:gray;content:"";opacity:12.5%}.breakout-all>:is(h2,h3,h4,h5,h6):not([class])::before{top:50%;right:100%;width:10em;height:.25em;margin-right:.8ch;transform:translateY(-50%);background:linear-gradient(to left,gray,transparent)}.breakout-all>:is(h2,h3,h4,h5,h6):not([class]):where(hr:not([class]) + *)::before{display:none!important}.breakout-all>:is(hr):not([class]){height:.5rem;overflow:visible;border:none}.breakout-all>:is(hr):not([class])::before{left:50%;width:100dvw;height:100%;transform:translateX(-50%)}.columns{-moz-columns:25ch auto;columns:25ch auto}.columns>*{-moz-column-break-inside:avoid;break-inside:avoid}[href="#top"]{position:fixed;right:0;bottom:0;padding-top:50vh}h1,h2,h3,h4,h5,h6{position:relative}h1 a[aria-hidden=true],h2 a[aria-hidden=true],h3 a[aria-hidden=true],h4 a[aria-hidden=true],h5 a[aria-hidden=true],h6 a[aria-hidden=true]{visibility:hidden;position:absolute;top:50%;right:100%;padding-right:.2ch;transform:translateY(-50%);color:silver;text-decoration:none}@media (hover:hover){h1:hover a[aria-hidden=true],h2:hover a[aria-hidden=true],h3:hover a[aria-hidden=true],h4:hover a[aria-hidden=true],h5:hover a[aria-hidden=true],h6:hover a[aria-hidden=true]{visibility:visible}}ol[style*="--list-marker:"],ul[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol[style*="--list-marker:"]>li,ul[style*="--list-marker:"]>li{list-style-type:inherit}ol li[style*="--list-marker:"],ul li[style*="--list-marker:"]{list-style-type:var(--list-marker)}ol li[data-marker]::marker,ul li[data-marker]::marker{content:attr(data-marker) " "}ol.markerless,ul.markerless{padding-inline-start:1.25rem}ol.markerless li,ul.markerless li{list-style:none}.unlist-all ol,.unlist-all ul,ol.unlist,ol.unlist-all,ul.unlist,ul.unlist-all{padding-inline-start:0}.unlist-all ol>li,.unlist-all ul>li,ol.unlist-all>li,ol.unlist>li,ul.unlist-all>li,ul.unlist>li{list-style:none}th hr{visibility:hidden;width:12ch;height:0;margin:0}th hr.lg{width:18ch}th hr.x2{width:24ch}table.borderless td,table.borderless th{border:none}.breakout-all>table:not(.does-not-exist),.breakout>table:not(.does-not-exist),table.responsive{display:block;width:-moz-max-content;width:max-content;min-width:auto;max-width:100dvw;margin-left:50%;padding-inline:7.5%;overflow-x:auto;transform:translateX(-50%);-webkit-overflow-scrolling:touch}.breakout-all>table:not(.does-not-exist) td,.breakout-all>table:not(.does-not-exist) th,.breakout>table:not(.does-not-exist) td,.breakout>table:not(.does-not-exist) th,table.responsive td,table.responsive th{padding-inline-start:0}@media (width < 768px){pre{border-radius:0}}code[data-caption]::before{display:block;margin-bottom:1rem;content:attr(data-caption);font-style:italic;opacity:50%}/*!
  * Float Label CSS v2 by Blades CSS 🥷🏷️
  * Copyright 2016–2026 (https://blades.ninja/css/float-label/)
  * Licensed under MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anyblades/blades",
-  "version": "3.0.0-alpha.2",
+  "version": "3.0.0-alpha.3",
   "exports": {
     ".": "./src/blades.css",
     "./pico": "./src/pico.css",

package/src/standalone/layout/_breakout.css

@@ -67,13 +67,13 @@
     }
 
     /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
-    &:where(hr + *) {
+    &:where(hr:not([class]) + *) {
       &::before {
         display: none !important;
       }
     }
   }
-  &:is(hr) {
+  &:is(hr):not([class]) {
     height: 0.5rem;
     border: none;
     overflow: visible;