@anyblades/blades 2.4.7 → 2.4.9

package/css/link-icon.css

@@ -2,31 +2,31 @@
 \3c !--section:code-->
 ```css */
 /* Use inline flex only if link contains an icon */
-a:has(> i):not(.does-not-exist) /* soft win specificity over Pico's `a[role="button"]` and inner `img:not([height])` */ {
+a:not(.does-not-exist):has(> i) {
     display: inline-flex;
     overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
     gap: 0.375ch; /* =3/8 */
     text-wrap: balance;
   }
-a > i {
+a:not(.does-not-exist) > i {
     float: left; /*                 ✅ Chrome ❌ Safari */
     font-style: normal;
     text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
   }
 /* Favicons */
-a > i > img {
+a:not(.does-not-exist) > i > img {
       display: inline-block; /* for Tailwind CSS Typography */
       max-width: none; /* to keep ratio safe */
       height: 1.25em;
       margin-block-start: calc(-0.25em / 2);
     }
-a > i[class^="fa-"],
-    a > i[class*=" fa-"] {
+a:not(.does-not-exist) > i[class^="fa-"],
+    a:not(.does-not-exist) > i[class*=" fa-"] {
       line-height: inherit;
       --fa-width: auto;
     }
 /* Font Awesome */
-a > i.fa-lg {
+a:not(.does-not-exist) > i.fa-lg {
       line-height: normal;
     }
 /*```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anyblades/blades",
-  "version": "2.4.7",
+  "version": "2.4.9",
   "exports": {
     ".": "./src/blades.css",
     "./standalone": "./src/blades.standalone.css",

package/src/_layout.css

@@ -1,7 +1,4 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs,columns-->
-
-### Auto-columns
+/*<!--section:columns-->
 
 `.columns` automatically creates columns with at least 30 characters each:
 
@@ -27,10 +24,7 @@ How it works:
     break-inside: avoid;
   }
 }
-/*```
-<!--section:docs,jump-->
-
-### Jump to top
+/*```<!--section:jump-->
 
 `data-jump-to="top"` fixes element to the corner and adds extra top padding to make it easy to click:
 ```css */
@@ -40,5 +34,3 @@ How it works:
   right: 0;
   padding-top: 50vh;
 }
-/*```
-<!--section--> */

package/src/_utilities.css

@@ -1,7 +1,6 @@
-/* Extends https://github.com/picocss/pico/tree/main/scss/utilities
-<!--section:docs-->
+/*<!--section:docs-->
 
-### Auto-dark
+## Auto-dark
 
 `.dark-auto` automatically creates a simple dark version of any element:
 
@@ -28,7 +27,7 @@ How it works:
 }
 /*```
 
-### Faded
+## Faded
 
 `.faded` reduces the opacity of an element:
 

package/src/blades.standalone.core.css

@@ -1,3 +1,5 @@
+/*<!--section:code-->```css */
+
 /* Follows https://github.com/picocss/pico/blob/main/scss/_index.scss */
 
 /* Layout */

package/src/blades.standalone.theme.css

@@ -1,6 +1,4 @@
-/*
-<!--section:code-->
-```css */
+/*<!--section:code-->```css */
 @import "./float-label.theme";
 
 html {
@@ -130,5 +128,3 @@ table {
     text-decoration-style: dotted;
   }
 }
-/*```
-<!--section--> */

package/src/components/_timeline.css

@@ -22,4 +22,3 @@ dl.timeline,
     border-inline-start: 0.25rem solid gray;
   }
 }
-/*```*/

package/src/content/_code.css

@@ -1,7 +1,4 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
-<!--section:docs-->
-
-### Code
+/*<!--section:docs-->
 
 The `<pre><code>` blocks are Prism-compatible and support captions via `data-caption="..."` attribute:
 
@@ -11,7 +8,8 @@ The `<pre><code>` blocks are Prism-compatible and support captions via `data-cap
 ├── blades.theme.css    # minimal opinionated theme
 └── blades.css          # above two together
 ```
-How it works:
+
+<!--section:code-->
 ```css */
 pre {
   @media (width < 768px) {
@@ -31,5 +29,3 @@ code {
     }
   }
 }
-/*```
-<!--section--> */

package/src/content/_table.css

@@ -1,7 +1,6 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
-<!--section:docs-->
+/*<!--section:docs-->
 
-### Column expanders
+## Column expanders
 
 Place `<hr>` element inside `<th>` column to expand it horizontally:
 
@@ -37,7 +36,7 @@ th {
 }
 /*```
 
-### Borderless table
+## Borderless table
 
 `.borderless` removes all default borders:
 
@@ -50,9 +49,7 @@ th {
 {.borderless}
 </article>
 
-Living example: https://bladeswitch.com/#minimal-dependencies table
-
-<!--section--> */
+<!--section-->*/
 table.borderless {
   th,
   td {

package/src/content/_typography.css

@@ -1,12 +1,9 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs,h-anchor-->
-
-### Heading anchors
+/*<!--section:h-anchor-->
 
 Links with `href="#..."` inside headings are automatically displayed as anchors:
 
 <article>
-  <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a href="#hwa" style="visibility: visible">#</a></h2>
+  <h2 style="margin: 0 0 0 1.5rem">Heading with anchor <a aria-hidden="true" style="visibility: visible">#</a></h2>
 </article>
 
 How it works:
@@ -41,9 +38,7 @@ h6 {
 
 **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
+<!--section:list-->
 
 Customize markers using inline `style="--list-marker:..."` on `<ul>/<ol>` or even individual `<li>`:
 
@@ -136,5 +131,3 @@ ol {
     }
   }
 }
-/*```
-<!--section--> */

package/src/float-label.core.css

@@ -1,18 +1,18 @@
-/* Moved here from https://github.com/anyblades/float-label-css for easier maintenance
+/* Sources moved here from https://github.com/anyblades/float-label-css for easier maintenance
 <!--section:docs-->
 
 First, we target either:
 1. `<label>` which `:has` inner form inputs (classless approach)
 2. or explicit `.has-float-label` class (explicit approach)
+
 ```css */
 label:has(> span):has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
 .has-float-label {
   display: block;
   position: relative;
-  /*
-```
-Then, we define the default/fallback state (when the float label should be minimized):
-```css */
+  /*```
+  Then, we define the default/fallback state (when the float label should be minimized):
+  ```css */
   > span,
   label {
     position: absolute;
@@ -21,10 +21,9 @@ Then, we define the default/fallback state (when the float label should be minim
     cursor: text;
     font-size: 75%;
   }
-  /*
-```
-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 */
+  /*```
+  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 */
   *:placeholder-shown:not(:focus)::placeholder {
     opacity: 0;
   }
@@ -36,9 +35,10 @@ Finally, we detect if placeholder is shown, but not in focus. That means we can
     }
   }
 }
-/*
-```
+/*```
+
 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--> */
+
+<!--section-->*/

package/src/link-icon.css

@@ -1,9 +1,9 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
 <!--section:code-->
 ```css */
-a {
+a:not(.does-not-exist) /* soft win specificity over Pico's `a[role="button"]` and inner `img:not([height])` */ {
   /* Use inline flex only if link contains an icon */
-  &:has(> i):not(.does-not-exist) /* soft win specificity over Pico's `a[role="button"]` and inner `img:not([height])` */ {
+  &:has(> i) {
     display: inline-flex;
     gap: 0.375ch; /* =3/8 */
     text-wrap: balance;