@anydigital/blades 0.27.0-beta.9 → 0.28.0-alpha

package/assets/float-label.theme.css

@@ -0,0 +1,31 @@
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
+.has-float-label {
+  /* Default/fallback state */
+  > span,
+  label {
+    padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
+    padding-block-start: 0.25rem;
+    opacity: 75%;
+    transition: all 0.25s;
+  }
+  input,
+  textarea,
+  select {
+    margin-block-start: 0; /* reset Pico */
+    padding-inline-start: 1rem; /* match Pico */
+    padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
+
+    &::placeholder {
+      opacity: 100%;
+      transition: all 0.25s;
+    }
+  }
+
+  /* Enlarged state */
+  &:has(*:placeholder-shown:not(:focus)) {
+    > span,
+    label {
+      padding-block: 0.75rem; /* match Pico */
+    }
+  }
+}

package/assets/link-icon.css

@@ -0,0 +1,55 @@
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+<!--section:code-->
+```css */
+a {
+  /* Use inline flex only if link contains an icon */
+  &:has(> i) {
+    display: inline-flex;
+    gap: 0.375ch; /* =3/8 */
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+  }
+  > i {
+    font-style: normal;
+    float: left; /*                 ✅ Chrome ❌ Safari */
+    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+
+    /* Favicons */
+    > img {
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
+      display: inline-block; /* for Tailwind CSS Typography */
+    }
+
+    /* Font Awesome */
+    &[class^="fa-"],
+    &[class*=" fa-"] {
+      line-height: inherit;
+      --fa-width: auto;
+    }
+    &.fa-lg {
+      line-height: normal;
+    }
+  }
+}
+/*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
+<!--section:docs,summary-->
+
+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 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>`            |
+
+---
+
+[How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
+
+<!--section--> */

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.9"
+  spec.version       = "0.28.0-alpha"
   spec.authors       = ["Anton Staroverov"]
 
   spec.summary       = "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development."

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@anydigital/blades",
-  "version": "0.27.0-beta.9",
+  "version": "0.28.0-alpha",
   "description": "Framework-agnostic CSS utilities and single-file Liquid 'blades' for modern web development.",
   "style": "./assets/blades.css",
   "exports": {
     ".": "./src/blades.css",
+    "./core": "./src/blades.core.css",
     "./theme": "./src/blades.theme.css",
+    "./float-label": "./src/float-label.css",
     "./unreduce-motion": "./src/_unreduce-motion.css"
   },
   "scripts": {

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 */
@@ -10,6 +10,8 @@ html {
 }
 
 body {
+  /* Evaluates the last ~4 lines of text blocks to prevent a single word from sitting on the final line. */
+  text-wrap: pretty;
   /* Enable global hyphenation */
   hyphens: auto;
   /* ... except for links and tables which are better (safer) without hyphenation */
@@ -19,6 +21,7 @@ body {
   }
 }
 /*```
+<!--section:docs-->
 
 ### Heading anchors
 
@@ -37,13 +40,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 +93,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.core.css

@@ -0,0 +1,18 @@
+/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
+
+/* Layout */
+@import "./_layout";
+@import "./breakout";
+
+/* Content */
+@import "./_typography";
+@import "./link-icon";
+@import "./_table";
+@import "./responsive-table";
+@import "./_code";
+
+/* Forms */
+@import "./float-label.core";
+
+/* Utilities */
+@import "./_utilities";

package/src/blades.css

@@ -1,15 +1,2 @@
-/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
-
-/* Layout */
-@import "./_layout";
-@import "./breakout";
-
-/* Content */
-@import "./_typography";
-@import "./_link";
-@import "./_table";
-@import "./responsive-table";
-@import "./_code";
-
-/* Utilities */
-@import "./_utilities";
+@import "./blades.core";
+@import "./blades.theme";

package/src/blades.theme.css

@@ -1,5 +1,16 @@
 /* <!--section:code-->
 ```css */
+@import "./float-label.theme";
+
+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;
@@ -14,11 +25,10 @@ h1 {
   margin-bottom: 1rem; /* for tw-typography */
 }
 
-/* Fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
+/* Potential fix https://github.com/picocss/pico/blob/main/css/pico.css for the very first headings
 :where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul) ~ :is(h1, h2, h3, h4, h5, h6) {
   margin-top: var(--pico-typography-spacing-top);
 }
-*/
 h1,
 h2,
 h3,
@@ -26,9 +36,11 @@ h4,
 h5,
 h6 {
   & ~ & {
-    margin-top: 2rem;
+    margin-bottom: 2rem;
   }
 }
+NOTE: be careful with wrapped headings, i.e. inside nav: https://blades.ninja/build-awesome-11ty/#usage
+*/
 
 hr {
   margin-block: 2em; /* for pico.css & tw-typography */
@@ -63,7 +75,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/float-label.core.css

@@ -0,0 +1,44 @@
+/* Moved here from https://github.com/anydigital/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 (alternative approach)
+```css */
+label: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 */
+  > span,
+  label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    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 */
+  *:placeholder-shown:not(:focus)::placeholder {
+    opacity: 0;
+  }
+  &:has(*:placeholder-shown:not(:focus)) {
+    > span,
+    label {
+      font-size: inherit;
+      opacity: 50%;
+    }
+  }
+}
+/*
+```
+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--> */

package/src/float-label.css

@@ -0,0 +1,3 @@
+/* Float Label CSS v2.0.0-alpha */
+@import "./float-label.core";
+@import "./float-label.theme";

package/src/float-label.theme.css

@@ -0,0 +1,31 @@
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
+.has-float-label {
+  /* Default/fallback state */
+  > span,
+  label {
+    padding-inline-start: calc(1rem + 1px); /* match Pico's padding + border */
+    padding-block-start: 0.25rem;
+    opacity: 75%;
+    transition: all 0.25s;
+  }
+  input,
+  textarea,
+  select {
+    margin-block-start: 0; /* reset Pico */
+    padding-inline-start: 1rem; /* match Pico */
+    padding-block: 1.125rem 0.375rem; /* match Pico's total: 2 x 0.75rem = 1.5rem */
+
+    &::placeholder {
+      opacity: 100%;
+      transition: all 0.25s;
+    }
+  }
+
+  /* Enlarged state */
+  &:has(*:placeholder-shown:not(:focus)) {
+    > span,
+    label {
+      padding-block: 0.75rem; /* match Pico */
+    }
+  }
+}

package/src/link-icon.css

@@ -0,0 +1,55 @@
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
+<!--section:code-->
+```css */
+a {
+  /* Use inline flex only if link contains an icon */
+  &:has(> i) {
+    display: inline-flex;
+    gap: 0.375ch; /* =3/8 */
+    overflow-y: clip; /* to work in pair with text-underline-offset in Safari */
+  }
+  > i {
+    font-style: normal;
+    float: left; /*                 ✅ Chrome ❌ Safari */
+    text-underline-offset: -2em; /* ❌ Chrome ✅ Safari - to clip it with overflow-y */
+
+    /* Favicons */
+    > img {
+      height: 1.25em;
+      margin-block: calc(-0.25em / 2);
+      display: inline-block; /* for Tailwind CSS Typography */
+    }
+
+    /* Font Awesome */
+    &[class^="fa-"],
+    &[class*=" fa-"] {
+      line-height: inherit;
+      --fa-width: auto;
+    }
+    &.fa-lg {
+      line-height: normal;
+    }
+  }
+}
+/*```
+> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
+
+<!--section:docs,summary-->
+
+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 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>`            |
+
+---
+
+[How we made it ↗ &nbsp;<small>(on Codepen)</small>](https://codepen.io/editor/anydigital/pen/019d2b94-5616-75dc-a23e-e111869d5237){role=button .outline}
+
+<!--section--> */

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/

package/src/_link.css

@@ -1,46 +0,0 @@
-/* Extends https://github.com/picocss/pico/blob/main/scss/content/_link.scss
-<!--section:code-->
-```css */
-a {
-  /* Helper to handle [fav]icons in links */
-  > i {
-    display: inline-block;
-    font-style: normal;
-
-    > img {
-      height: 1.25em;
-      margin-block: calc(-0.25em / 2);
-
-      /* for tw-typography (.prose) */
-      display: inline-block;
-    }
-  }
-}
-/*```
-> **PRO-TIP** for 11ty: https://blades.ninja/build-awesome-11ty/processors/#auto-link-favicons
-
-<!--section:docs-->
-
-### Link [fav]icons
-
-Wrap [fav]icons inside links using `<i>...&nbsp;</i>` helper to size automatically and avoid underline. Compare:
-
-<big class="grid">
-  <article><a href="https://github.com/anydigital/blades">
-       🥷          Blades
-  </a></article>
-  <article><a href="https://github.com/anydigital/blades">
-    <i>🥷&nbsp;</i>Blades
-  </a></article>
-</big>
-
-<big class="grid">
-  <article><a href="https://github.com/anydigital/blades">
-       <img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64"          >/anydigital/blades
-  </a></article>
-  <article><a href="https://github.com/anydigital/blades">
-    <i><img src="https://www.google.com/s2/favicons?domain=github.com&amp;sz=64">&nbsp;</i>/anydigital/blades
-  </a></article>
-</big>
-
-<!--section--> */