@anydigital/blades 0.27.0-beta.14 → 0.27.0-beta.16

package/README.md

@@ -24,15 +24,15 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
 <!-- copy-paste of ToC from https://blades.ninja/css/ -->
 <ul class="unlist columns">
 <li><a href="https://blades.ninja/css/#install">Install</a></li>
-<li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/">🥷 Breakout elements →</a></li>
+<li><a href="https://blades.ninja/css/#layout">Layout</a><ul><li><a href="https://blades.ninja/css/breakout/"><i>🥷</i> Breakout elements →</a></li>
 <li><a href="https://blades.ninja/css/#landmarks">Landmarks</a></li>
 <li><a href="https://blades.ninja/css/#auto-columns">Auto-columns</a></li>
 <li><a href="https://blades.ninja/css/#jump-to-top">Jump to top</a></li></ul></li>
 <li><a href="https://blades.ninja/css/#content">Content</a><ul><li><a href="https://blades.ninja/css/#heading-anchors">Heading anchors</a></li>
 <li><a href="https://blades.ninja/css/#list-markers">List markers</a></li>
-<li><a href="https://blades.ninja/css/link-icon/">🥷 Link [fav]icons →</a></li>
+<li><a href="https://blades.ninja/css/link-icon/"><i>🥷</i> Link [fav]icons →</a></li>
 <li><a href="https://blades.ninja/css/#code">Code</a></li></ul></li>
-<li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/">🥷 Responsive table without wrapper →</a></li>
+<li><a href="https://blades.ninja/css/#table">Table</a><ul><li><a href="https://blades.ninja/css/responsive-table/"><i>🥷</i> Responsive table without wrapper →</a></li>
 <li><a href="https://blades.ninja/css/#horizontal-expanders">Horizontal expanders</a></li>
 <li><a href="https://blades.ninja/css/#borderless-table">Borderless table</a></li></ul></li>
 <li><a href="https://blades.ninja/css/#utilities">Utilities</a><ul><li><a href="https://blades.ninja/css/#auto-dark">Auto-dark</a></li>
@@ -43,9 +43,9 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
 </ul>
 
 <!--section:index,install-css-->
-<details><summary role="button" class="outline"><b>Install CSS blades</b></summary>
+<details><summary role="button" class="outline"><b>Install CSS blades</b> via CDN or npm</summary>
 
-<mark>Option A.</mark> From CDN:
+<mark>Via CDN:</mark>
 
 <!--prettier-ignore-->
 ```html
@@ -53,7 +53,7 @@ Nunjucks/Liquid batteries included (for 11ty/Build Awesome, Jekyll, etc.) 🥷
 <link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->
 ```
 
-<mark>Option B.</mark> Via npm:
+<mark>Via npm:</mark>
 
 ```sh
 npm install @anydigital/blades
@@ -83,7 +83,7 @@ Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_s
 <!--{.columns}-->
 
 <!--section:index,install-html-->
-<details><summary role="button" class="outline"><b>Install HTML blades</b></summary>
+<details><summary role="button" class="outline"><b>Install HTML blades</b> via npm</summary>
 
 ```sh
 npm install @anydigital/blades
@@ -93,12 +93,16 @@ ln -s ../node_modules/@anydigital/blades/_includes/blades
 
 That's it! Now you can use HTML blades in your templates like this:
 
-```jinja2 {data-caption=Nunjucks}
+<mark>In Nunjucks:</mark>
+
+```jinja2
 {% extends 'blades/html.njk' %}
 {% include 'blades/gtm.njk' %}
 ```
 
-```liquid {data-caption=Liquid}
+<mark>In Liquid:</mark>
+
+```liquid
 {% include blades/html.liquid %}
 {% include blades/gtm.liquid for_body=true %}
 {% render blades/links, links: site.links, current_url: page.url %}
@@ -136,10 +140,12 @@ Or use a preconfigured template:
 
 - Featured by:
   - https://github.com/uhub/awesome-css
-  - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
+  - 🕶️ [awesome-css-frameworks](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
   - 🕶️ [awesome-eleventy](https://github.com/anydigital/awesome-11ty-build-awesome)
-  - 🚀 [build-awesome-starter](https://github.com/anydigital/build-awesome-starter)
-  - 🚀 [bladeswitch starter](https://github.com/anydigital/bladeswitch)
+  - https://11tybundle.dev/showcase/
+  - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
+  - https://github.com/anydigital/build-awesome-starter
+  - https://github.com/anydigital/bladeswitch starter
   - https://github.com/hostfurl/minformhf starter
 - Showcase:
   - https://any.digital/ (Pico ⁺ Blades)

package/assets/blades.css

@@ -3,34 +3,23 @@
 /* Layout */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs-->
+<!--section:docs-intro-->
 
 Global styles:
-- Prevent horizontal overflow and scrolling, modern way.
 ```css */
 
 html {
+  /* Prevent horizontal overflow and scrolling, modern way. */
   overflow-x: clip;
 }
 
-/*```
-
-### Landmarks
-- Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
-- Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
-```css */
-
 body {
+  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
   min-height: 100dvh;
-
-  display: flex;
-  flex-direction: column;
-  > main {
-    flex-grow: 1;
-  }
 }
 
 /*```
+<!--section:docs-->
 
 ### Auto-columns
 ```css */
@@ -151,10 +140,14 @@ Table of contents (`[data-is-toc]`) has auto-columns by default.
   }
 }
 
-/*```<!--section:docs-->
+/*```
+<!--section:docs,summary-->
+
 Framework-agnostic utilities for breaking out images and figures beyond their container width.
 
-Use the `.breakout` class to allow elements to extend beyond their parent container:
+Use the `.breakout` class to allow elements to extend beyond their parent container.
+
+<!--section:docs-->
 
 ```html
 <div class="breakout">
@@ -163,12 +156,13 @@ Use the `.breakout` class to allow elements to extend beyond their parent contai
 ```
 
 The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
+
 <!--section--> */
 
 /* Content */
 
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs-->
+<!--section:docs-intro-->
 
 Global styles:
 ```css */
@@ -190,6 +184,7 @@ body {
 }
 
 /*```
+<!--section:docs-->
 
 ### Heading anchors
 
@@ -209,13 +204,14 @@ h6 {
   position: relative;
 
   [data-is-anchor] {
-    visibility: hidden;
     position: absolute;
-    top: 0;
     right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
     padding-right: 0.2ch;
     color: silver;
     text-decoration: none;
+    visibility: hidden;
   }
   /* Avoid double-tap on touch devices */
   @media (hover: hover) {
@@ -263,14 +259,20 @@ ol {
     /* ⚠️ `data-marker` works only in Chrome and Firefox */
     content: attr(data-marker) " ";
   }
+}
 
-  /* Helper class to remove list styling at all */
-  &.unlist {
-    padding-inline-start: 0;
+/*```
 
-    > li {
-      list-style: none;
-    }
+### Unlist
+
+Helper class to remove list styling at all:
+```css */
+
+.unlist {
+  padding-inline-start: 0;
+
+  > li {
+    list-style: none;
   }
 }
 
@@ -282,18 +284,16 @@ ol {
 ```css */
 
 a {
-  /* If link contains an icon, use inline flex */
+  /* Use inline flex only if link contains an icon */
   &:has(> i) {
     display: inline-flex;
     gap: 0.375ch; /* =3/8 */
     text-wrap: balance;
     overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
   }
-
-  /* Helper to handle [fav]icons in links */
   > i {
     font-style: normal;
-    float: left; /*                ✅ Chrome ❌ Safari */
+    float: left; /*                 ✅ Chrome ❌ Safari */
     text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
 
     /* Favicons */
@@ -307,8 +307,7 @@ a {
     &[class^="fa-"],
     &[class*=" fa-"] {
       line-height: inherit;
-      margin-inline-start: -0.25ch;
-      margin-inline-end: -0.125ch; /* =1/8 */
+      --fa-width: auto;
     }
     &.fa-lg {
       line-height: normal;
@@ -319,17 +318,19 @@ a {
 /*```
 > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
 
-<!--section:docs-->
+<!--section:docs,summary-->
 
-Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
+Use Blades' `<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-->
 
-| Without Blades <hr>                                                                                 | With Blades' `<i>` helper <hr>                                                                             | Clean HTML without `<span>`ning      |
-| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| [🥷 Link with emoji](#)                                                                             | [<i>🥷</i> Link with emoji](#)                                                                             | `<a><i>🥷</i> Text</a>`              |
-| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
-| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                          | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                 | `<a><i class="fa-..."></i> Text</a>` |
+Compare:
+
+| Without Blades <hr class="lg">                                                                          | With Blades' `<i>`-helper <hr class="lg">                                                                      | Clean HTML without `<span>ning` <hr class="x2"> |
+| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| [🥷 Link with emoji](#)                                                                                 | [<i>🥷</i> Link with emoji](#)                                                                                 | `<a><i>🥷</i> Text</a>`                         |
+| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>`            |
+| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                              | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                     | `<a><i class="fa-..."></i> Text</a>`            |
 
 ---
 
@@ -373,6 +374,9 @@ table {
       margin: 0;
       visibility: hidden;
 
+      &.lg {
+        width: 18ch;
+      }
       &.x2 {
         width: 24ch;
       }
@@ -381,8 +385,6 @@ table {
 }
 
 /*```
----
-
 ### Borderless table
 
 `<table class="borderless">` removes all default borders:
@@ -440,21 +442,24 @@ Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:docs-->
+<!--section:docs,summary-->
 
-`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<hr><div>
+`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
 
-| Term | Description <hr class="x2"> | Link |
-| --- | --- | --- |
+<!--section:docs-->
+
+| Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div><hr>
+
+---
 
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 Living examples:
+
 - https://any.digital/insights/ai-ide/
 - https://any.digital/insights/css-frameworks/
 - https://any.digital/insights/ssg/

package/assets/blades.theme.css

@@ -1,5 +1,13 @@
 /* <!--section:code-->
 ```css */
+body {
+  /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
+  display: flex;
+  flex-direction: column;
+  > main {
+    flex-grow: 1;
+  }
+}
 a {
   &:not([href^="#"]) {
     text-decoration-thickness: 1px;
@@ -57,7 +65,7 @@ table {
 [data-jump-to="top"] {
   > i {
     display: inline-block;
-    padding: 0.25rem;
+    padding: 0.25rem 0.375rem;
     margin: 0.5rem;
     font-size: 0.75rem;
     color: black;

package/assets/breakout.css

@@ -78,10 +78,14 @@
     }
   }
 }
-/*```<!--section:docs-->
+/*```
+<!--section:docs,summary-->
+
 Framework-agnostic utilities for breaking out images and figures beyond their container width.
 
-Use the `.breakout` class to allow elements to extend beyond their parent container:
+Use the `.breakout` class to allow elements to extend beyond their parent container.
+
+<!--section:docs-->
 
 ```html
 <div class="breakout">
@@ -90,4 +94,5 @@ Use the `.breakout` class to allow elements to extend beyond their parent contai
 ```
 
 The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
+
 <!--section--> */

package/assets/link-icon.css

@@ -2,18 +2,16 @@
 <!--section:code-->
 ```css */
 a {
-  /* If link contains an icon, use inline flex */
+  /* Use inline flex only if link contains an icon */
   &:has(> i) {
     display: inline-flex;
     gap: 0.375ch; /* =3/8 */
     text-wrap: balance;
     overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
   }
-
-  /* Helper to handle [fav]icons in links */
   > i {
     font-style: normal;
-    float: left; /*                ✅ Chrome ❌ Safari */
+    float: left; /*                 ✅ Chrome ❌ Safari */
     text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
 
     /* Favicons */
@@ -27,8 +25,7 @@ a {
     &[class^="fa-"],
     &[class*=" fa-"] {
       line-height: inherit;
-      margin-inline-start: -0.25ch;
-      margin-inline-end: -0.125ch; /* =1/8 */
+      --fa-width: auto;
     }
     &.fa-lg {
       line-height: normal;
@@ -38,17 +35,19 @@ a {
 /*```
 > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
 
-<!--section:docs-->
+<!--section:docs,summary-->
 
-Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
+Use Blades' `<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-->
+
+Compare:
 
-| Without Blades <hr>                                                                                 | With Blades' `<i>` helper <hr>                                                                             | Clean HTML without `<span>`ning      |
-| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| [🥷 Link with emoji](#)                                                                             | [<i>🥷</i> Link with emoji](#)                                                                             | `<a><i>🥷</i> Text</a>`              |
-| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
-| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                          | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                 | `<a><i class="fa-..."></i> Text</a>` |
+| Without Blades <hr class="lg">                                                                          | With Blades' `<i>`-helper <hr class="lg">                                                                      | Clean HTML without `<span>ning` <hr class="x2"> |
+| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| [🥷 Link with emoji](#)                                                                                 | [<i>🥷</i> Link with emoji](#)                                                                                 | `<a><i>🥷</i> Text</a>`                         |
+| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>`            |
+| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                              | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                     | `<a><i class="fa-..."></i> Text</a>`            |
 
 ---
 

package/assets/responsive-table.css

@@ -29,21 +29,24 @@ Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:docs-->
+<!--section:docs,summary-->
+
+`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
 
-`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<hr><div>
+<!--section:docs-->
 
-| Term | Description <hr class="x2"> | Link |
-| --- | --- | --- |
+| Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div><hr>
+
+---
 
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 Living examples:
+
 - https://any.digital/insights/ai-ide/
 - https://any.digital/insights/css-frameworks/
 - https://any.digital/insights/ssg/

package/blades.gemspec

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anydigital/blades",
-  "version": "0.27.0-beta.14",
+  "version": "0.27.0-beta.16",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
   "style": "./assets/blades.css",
   "exports": {

package/src/_layout.css

@@ -1,28 +1,18 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/layout/
-<!--section:docs-->
+<!--section:docs-intro-->
 
 Global styles:
-- Prevent horizontal overflow and scrolling, modern way.
 ```css */
 html {
+  /* Prevent horizontal overflow and scrolling, modern way. */
   overflow-x: clip;
 }
-/*```
-
-### Landmarks
-- Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support).
-- Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts.
-```css */
 body {
+  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
   min-height: 100dvh;
-
-  display: flex;
-  flex-direction: column;
-  > main {
-    flex-grow: 1;
-  }
 }
 /*```
+<!--section:docs-->
 
 ### Auto-columns
 ```css */

package/src/_table.css

@@ -33,6 +33,9 @@ table {
       margin: 0;
       visibility: hidden;
 
+      &.lg {
+        width: 18ch;
+      }
       &.x2 {
         width: 24ch;
       }
@@ -40,8 +43,6 @@ table {
   }
 }
 /*```
----
-
 ### Borderless table
 
 `<table class="borderless">` removes all default borders:

package/src/_typography.css

@@ -1,5 +1,5 @@
 /* Extends https://github.com/picocss/pico/blob/main/scss/content/_typography.scss
-<!--section:docs-->
+<!--section:docs-intro-->
 
 Global styles:
 ```css */
@@ -19,6 +19,7 @@ body {
   }
 }
 /*```
+<!--section:docs-->
 
 ### Heading anchors
 
@@ -37,13 +38,14 @@ h6 {
   position: relative;
 
   [data-is-anchor] {
-    visibility: hidden;
     position: absolute;
-    top: 0;
     right: 100%;
+    top: 50%;
+    transform: translateY(-50%);
     padding-right: 0.2ch;
     color: silver;
     text-decoration: none;
+    visibility: hidden;
   }
   /* Avoid double-tap on touch devices */
   @media (hover: hover) {
@@ -89,14 +91,18 @@ ol {
     /* ⚠️ `data-marker` works only in Chrome and Firefox */
     content: attr(data-marker) " ";
   }
+}
+/*```
 
-  /* Helper class to remove list styling at all */
-  &.unlist {
-    padding-inline-start: 0;
+### Unlist
 
-    > li {
-      list-style: none;
-    }
+Helper class to remove list styling at all:
+```css */
+.unlist {
+  padding-inline-start: 0;
+
+  > li {
+    list-style: none;
   }
 }
 /*```

package/src/blades.theme.css

@@ -1,5 +1,14 @@
 /* <!--section:code-->
 ```css */
+body {
+  /* Make the `body` a flex container with column layout, and `main` to automatically fill available space. This is useful for creating sticky footers and full-height layouts. */
+  display: flex;
+  flex-direction: column;
+  > main {
+    flex-grow: 1;
+  }
+}
+
 a {
   &:not([href^="#"]) {
     text-decoration-thickness: 1px;
@@ -64,7 +73,7 @@ table {
 [data-jump-to="top"] {
   > i {
     display: inline-block;
-    padding: 0.25rem;
+    padding: 0.25rem 0.375rem;
     margin: 0.5rem;
     font-size: 0.75rem;
     color: black;

package/src/breakout.css

@@ -79,10 +79,14 @@
     }
   }
 }
-/*```<!--section:docs-->
+/*```
+<!--section:docs,summary-->
+
 Framework-agnostic utilities for breaking out images and figures beyond their container width.
 
-Use the `.breakout` class to allow elements to extend beyond their parent container:
+Use the `.breakout` class to allow elements to extend beyond their parent container.
+
+<!--section:docs-->
 
 ```html
 <div class="breakout">
@@ -91,4 +95,5 @@ Use the `.breakout` class to allow elements to extend beyond their parent contai
 ```
 
 The breakout container has `10%` inline padding and a max-width of `calc(10% + 65ch + 10%)`. The breakout utilities support images, pictures, figures, canvas, audio, video, tables, pre, iframe, and other media elements. Tables inside `.breakout` are specifically enhanced for horizontal scrolling and full-bleed mobile display. This is automatically included when you import the stylesheet.
+
 <!--section--> */

package/src/link-icon.css

@@ -2,18 +2,16 @@
 <!--section:code-->
 ```css */
 a {
-  /* If link contains an icon, use inline flex */
+  /* Use inline flex only if link contains an icon */
   &:has(> i) {
     display: inline-flex;
     gap: 0.375ch; /* =3/8 */
     text-wrap: balance;
     overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
   }
-
-  /* Helper to handle [fav]icons in links */
   > i {
     font-style: normal;
-    float: left; /*                ✅ Chrome ❌ Safari */
+    float: left; /*                 ✅ Chrome ❌ Safari */
     text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
 
     /* Favicons */
@@ -27,8 +25,7 @@ a {
     &[class^="fa-"],
     &[class*=" fa-"] {
       line-height: inherit;
-      margin-inline-start: -0.25ch;
-      margin-inline-end: -0.125ch; /* =1/8 */
+      --fa-width: auto;
     }
     &.fa-lg {
       line-height: normal;
@@ -38,17 +35,19 @@ a {
 /*```
 > **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
 
-<!--section:docs-->
+<!--section:docs,summary-->
 
-Wrap emojis, favicons, or simply drop Font Awesome icons inside links using the Blades' `<i>` helper. It automatically handles sizing and alignment while preventing underlines. Compare:
+Use Blades' `<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-->
+
+Compare:
 
-| Without Blades <hr>                                                                                 | With Blades' `<i>` helper <hr>                                                                             | Clean HTML without `<span>`ning      |
-| --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------ |
-| [🥷 Link with emoji](#)                                                                             | [<i>🥷</i> Link with emoji](#)                                                                             | `<a><i>🥷</i> Text</a>`              |
-| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Longer link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Longer link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>` |
-| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                          | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                 | `<a><i class="fa-..."></i> Text</a>` |
+| Without Blades <hr class="lg">                                                                          | With Blades' `<i>`-helper <hr class="lg">                                                                      | Clean HTML without `<span>ning` <hr class="x2"> |
+| ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+| [🥷 Link with emoji](#)                                                                                 | [<i>🥷</i> Link with emoji](#)                                                                                 | `<a><i>🥷</i> Text</a>`                         |
+| [![](https://www.google.com/s2/favicons?domain=any.digital&sz=64) Multi-line link <br> with favicon](#) | [<i>![](https://www.google.com/s2/favicons?domain=any.digital&sz=64)</i> Multi-line link <br> with favicon](#) | `<a><i><img src="..."></i> Text</a>`            |
+| [<b class="fa-brands fa-github fa-lg"></b> Link with Font Awesome icon](#)                              | [<i class="fa-brands fa-github fa-lg"></i> Link with Font Awesome icon](#)                                     | `<a><i class="fa-..."></i> Text</a>`            |
 
 ---
 

package/src/responsive-table.css

@@ -29,21 +29,24 @@ Soft-increase selector specificity trick:
 
 `table:not(.does-not-exist)` (inspired by postcss) is used here to increase specificity against selectors like `&:is(table, .table)`
 
-<!--section:docs-->
+<!--section:docs,summary-->
+
+`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
 
-`<table class="responsive">` allows a table to full-bleed and scroll on mobile:
-<hr><div>
+<!--section:docs-->
 
-| Term | Description <hr class="x2"> | Link |
-| --- | --- | --- |
+| Term              | Description <hr class="x2">                                                                                                                                                                  | Link                                                |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
 | Responsive design | Approach to web design that aims to make web pages render well on a variety of devices and window or screen sizes from minimum to maximum display size to ensure usability and satisfaction. | https://en.wikipedia.org/wiki/Responsive_web_design |
 
 {.responsive}
-</div><hr>
+
+---
 
 Tables inside https://blades.ninja/css/breakout/ are responsive by default.
 
 Living examples:
+
 - https://any.digital/insights/ai-ide/
 - https://any.digital/insights/css-frameworks/
 - https://any.digital/insights/ssg/