@anydigital/blades 0.27.0-beta.15 → 0.27.0-beta.17

package/README.md

@@ -43,27 +43,25 @@ 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
-<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.min.css" rel="stylesheet" />
-<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-alpha/assets/blades.theme.min.css" rel="stylesheet" /><!-- optional -->
+<link href="https://cdn.jsdelivr.net/npm/@anydigital/blades@^0.27.0-beta/assets/blades.min.css" rel="stylesheet" />
 ```
 
-<mark>Option B.</mark> Via npm:
+<mark>Via npm:</mark>
 
 ```sh
 npm install @anydigital/blades
 ```
 
-Then import in your .css:
+Then in your .css:
 
 ```css
 @import "@anydigital/blades";
-@import "@anydigital/blades.theme"; /* optional */
 ```
 
 Living example: https://github.com/anydigital/build-awesome-starter/blob/main/_styles/styles.css
@@ -83,7 +81,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 +91,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,11 +138,12 @@ Or use a preconfigured template:
 
 - Featured by:
   - https://github.com/uhub/awesome-css
-  - 🕶️ [Awesome-CSS-Frameworks-and-UI-Libraries](https://github.com/gabrielizalo/Awesome-CSS-Frameworks-and-UI-Libraries/tree/master/Lightweight)
+  - 🕶️ [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)
+  - https://11tybundle.dev/showcase/
   - [https://jekyll-themes.com/](https://jekyll-themes.com/anydigital/blades)
-  - 🚀 [build-awesome-starter](https://github.com/anydigital/build-awesome-starter)
-  - 🚀 [bladeswitch starter](https://github.com/anydigital/bladeswitch)
+  - 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.core.css

@@ -0,0 +1,598 @@
+/*** Follows https://github.com/picocss/pico/blob/main/scss/_index.scss ***/
+
+/* Layout */
+
+/* Extends https://github.com/picocss/pico/blob/main/scss/layout/
+<!--section:docs-intro-->
+
+Global styles:
+```css */
+
+html {
+  /* Prevent horizontal overflow and scrolling, modern way. */
+  overflow-x: clip;
+}
+
+body {
+  /* Ensure `body` takes at least the full height of the viewport (using dynamic viewport height for better mobile support). */
+  min-height: 100dvh;
+}
+
+/*```
+<!--section:docs-->
+
+### Auto-columns
+```css */
+
+.columns,
+[data-is-toc] > ul,
+[data-is-toc] > ol {
+  columns: 30ch auto; /* 2 cols max for 65ch container */
+
+  /* Avoid breaking inside elements, such as nested lists */
+  > * {
+    break-inside: avoid;
+  }
+}
+
+/*```
+
+Table of contents (`[data-is-toc]`) has auto-columns by default.
+
+### Jump to top
+```css */
+
+[data-jump-to="top"] {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding-top: 50vh;
+  opacity: 25%;
+
+  &:hover {
+    opacity: 75%;
+  }
+}
+
+/*```
+<!--section--> */
+
+/* <!--section:code-->```css */
+
+.breakout,
+.breakout-all {
+  /* Prepare the container for breakout elements */
+  padding-inline: 10%;
+  max-width: calc(10% + 65ch + 10%);
+
+  /* Breakout direct children only */
+  & > * {
+    &:is(
+      table,
+      pre,
+      figure, video, iframe, canvas,
+      img, picture,
+      /* Custom utility classes for other tags that need to be broken out */
+      .breakout-item,
+      .breakout-item-max
+    ) {
+      width: fit-content;
+      min-width: 100%;
+      max-width: 125%;
+      margin-left: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Respect img/picture min-width */
+    &:is(img, picture) {
+      min-width: auto;
+    }
+
+    /* Max out the width of the element */
+    &.breakout-item-max {
+      width: 125% !important; /* !important is for cases like figure.breakout-item-max @TODO */
+    }
+  }
+}
+
+.breakout-all > * {
+  &:is(h2, h3, h4, h5, h6, hr):not([class]) {
+    position: relative;
+
+    &::before {
+      content: "";
+      display: block;
+      position: absolute;
+      background: gray;
+      opacity: 12.5%;
+    }
+  }
+
+  &:is(h2, h3, h4, h5, h6):not([class]) {
+    &::before {
+      width: 10em;
+      right: 100%;
+      margin-right: 0.8ch;
+      height: 0.25em;
+      top: 50%;
+      transform: translateY(-50%);
+      background: linear-gradient(to left, gray, transparent);
+    }
+
+    /* @TODO: add to tricks-wiki why `*` works here, but `&` fails */
+    &:where(hr + *) {
+      &::before {
+        display: none !important;
+      }
+    }
+  }
+  &:is(hr) {
+    height: 0.5rem;
+    border: none;
+    overflow: visible;
+
+    &::before {
+      width: 100vw;
+      left: 50%;
+      height: 100%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+/*```
+<!--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.
+
+<!--section:docs-->
+
+```html
+<div class="breakout">
+  <img src="image.jpg" alt="Description" />
+</div>
+```
+
+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-intro-->
+
+Global styles:
+```css */
+
+html {
+  /* Enable font smoothing */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  /* Enable global hyphenation */
+  hyphens: auto;
+  /* ... except for links and tables which are better (safer) without hyphenation */
+  a,
+  table {
+    hyphens: none;
+  }
+}
+
+/*```
+<!--section:docs-->
+
+### Heading anchors
+
+Set `data-is-anchor` attribute on anchors inside headings to position them absolutely, and show only on hover (when supported):
+
+<article><h2>Heading with anchor <a href="#hwa" data-is-anchor>#</a></h2></article>
+
+How it works:
+```css */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  position: relative;
+
+  [data-is-anchor] {
+    position: absolute;
+    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) {
+    &:hover {
+      [data-is-anchor] {
+        visibility: visible;
+      }
+    }
+  }
+}
+
+/*```
+> **PRO-TIP** for 11ty + markdown-it-anchor: https://github.com/anydigital/eleventy-blades/blob/main/src/eleventy.config.js
+
+### List markers
+
+Use inline `style="--list-marker:'🥷 '"` on `<ul>/<ol>` or even individual `<li>` to customize list markers:
+<article>
+
+- Customize
+- list
+- markers
+- with [Blades CSS](https://blades.ninja/css/) {style="--list-marker:'🥷 '"}
+
+{style="--list-marker:'🧊 '"}
+</article>
+
+How it works:
+```css */
+
+ul,
+ol {
+  &[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+
+    > li {
+      list-style-type: inherit;
+    }
+  }
+
+  li[style*="--list-marker:"] {
+    list-style-type: var(--list-marker);
+  }
+  li[data-marker]::marker {
+    /* ⚠️ `data-marker` works only in Chrome and Firefox */
+    content: attr(data-marker) " ";
+  }
+}
+
+/*```
+
+### Unlist
+
+Helper class to remove list styling at all:
+```css */
+
+.unlist {
+  padding-inline-start: 0;
+
+  > li {
+    list-style: none;
+  }
+}
+
+/*```
+<!--section--> */
+
+/* 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 */
+    text-wrap: balance;
+    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--> */
+
+/* Extends https://github.com/picocss/pico/blob/main/scss/content/_table.scss
+<!--section:docs-->
+
+### Horizontal expanders
+
+Simply insert `<hr>` inside `<th>` to forcibly widen too narrow columns (especially useful in markdown):
+```html
+<th>Col <hr></th>
+```
+Example table before:
+<article class="overflow-auto"><table>
+  <tr><th>Wide tables</th><th>with many</th><th>columns might</th><th>get collapsed</th><th>and be really</th><th>hard to read!</th></tr>
+</table></article>
+
+Same table after adding `<hr>`-expanders:
+<article class="overflow-auto"><table>
+  <tr><th>Wide tables <hr></th><th>with many <hr></th><th>columns might <hr></th><th>get collapsed <hr></th><th>and be really <hr></th><th>hard to read! <hr></th></tr>
+</table></article>
+
+Living examples of big tables with `<hr>`-expanders:
+- https://any.digital/insights/ai-ide/
+- https://any.digital/insights/css-frameworks/
+- https://any.digital/insights/ssg/
+- https://blades.ninja/build-awesome-11ty/#min-starters
+
+How it works:
+```css */
+
+table {
+  th {
+    hr {
+      width: 12ch; /* min ~65/12 = ~5 cols */
+      height: 0;
+      margin: 0;
+      visibility: hidden;
+
+      &.lg {
+        width: 18ch;
+      }
+      &.x2 {
+        width: 24ch;
+      }
+    }
+  }
+}
+
+/*```
+### Borderless table
+
+`<table class="borderless">` removes all default borders:
+
+<article>
+
+| Less | borders |
+| ---- | ------- |
+| more | fun     |
+
+{.borderless}
+</article>
+
+Living example: https://bladeswitch.com/#minimal-dependencies table
+
+<!--section--> */
+
+table.borderless {
+  th,
+  td {
+    border: none;
+  }
+}
+
+/* <!--section:code-->
+```css */
+
+table.responsive,
+.breakout > table:not(.does-not-exist),
+.breakout-all > table:not(.does-not-exist) {
+  /* Center horizontally */
+  margin-left: 50%;
+  transform: translateX(-50%);
+
+  /* Let them full-bleed */
+  width: max-content;
+  min-width: auto;
+  max-width: 100vw;
+  padding-inline: 7.5%;
+
+  /* Let them scroll */
+  display: block;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch; /* Smooth scroll for iOS */
+
+  th,
+  td {
+    padding-inline-start: 0;
+  }
+}
+
+/*```
+<!--#TODO:css-blade-->
+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,summary-->
+
+`<table class="responsive">` allows a table to full-bleed and scroll on mobile.
+
+<!--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}
+
+---
+
+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/
+- https://blades.ninja/build-awesome-11ty/#min-starters
+
+<!--section--> */
+
+/* <!--section:docs-->
+### Code
+Extends https://github.com/picocss/pico/blob/main/scss/content/_code.scss
+```css */
+
+pre {
+  padding: 1rem 1.5rem;
+  padding-inline-end: 2rem;
+
+  @media screen and (max-width: 767px) {
+    border-radius: 0;
+  }
+}
+
+code {
+  /* Code block caption via data-attr (to display filename, etc.) */
+  &[data-caption] {
+    &::before {
+      content: attr(data-caption);
+      display: block;
+      margin-bottom: 1rem;
+      opacity: 50%;
+      font-style: italic;
+    }
+  }
+
+  &:where(pre > *) {
+    padding: 0;
+  }
+}
+
+/*** Extends https://github.com/PrismJS/prism/blob/master/plugins/treeview/prism-treeview.css ***/
+
+.token.treeview-part {
+  .entry-line {
+    width: 2.5em !important;
+    opacity: 25%;
+  }
+  .entry-name:last-child {
+    opacity: 50%;
+
+    &::before {
+      display: none !important;
+    }
+  }
+}
+
+/*``` <!--section--> */
+
+/* Forms */
+
+/* Moved here from https://github.com/anydigital/float-label-css for easier maintenance
+<!--section:code-->
+```css */
+
+label:has(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select),
+.has-float-label {
+  display: block;
+  position: relative;
+
+  /* Default/fallback state when float label is minimized */
+  > span,
+  label {
+    position: absolute;
+    left: 0;
+    top: 0;
+    cursor: text;
+    font-size: 75%;
+  }
+
+  /* Modern browser ? enlarge float label instead of placeholder : otherwise, code below is ignored in favor of default state above */
+  *:placeholder-shown:not(:focus)::placeholder {
+    opacity: 0;
+  }
+  &:has(*:placeholder-shown:not(:focus)) {
+    > span,
+    label {
+      font-size: inherit;
+      opacity: 50%;
+    }
+  }
+}
+
+/*```
+<!--section--> */
+
+/* Utilities */
+
+/*
+<!--section:docs-->
+
+### Auto-dark
+```css */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    .dark-auto {
+      filter: invert(100%) hue-rotate(180deg);
+    }
+  }
+}
+
+/*```
+
+### Faded
+```css */
+
+.faded {
+  opacity: 50%;
+  &:hover {
+    opacity: 87.5%;
+  }
+}
+
+/*```
+
+### Invert
+```css */
+
+/* Extends https://tailwindcss.com/docs/filter-invert */
+
+.invert {
+  /* Fix the scrollbar color when inverted */
+  ::-webkit-scrollbar {
+    filter: invert(1) !important;
+  }
+}
+
+/*``` <!--section--> */